邃芒官网(PC) https://www.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

164 line
3.2 KiB

  1. <template>
  2. <div class="topBox">
  3. <div class="logoBox" @click="go('/')">
  4. <img src="../../assets/img/logo.png" alt class="logo">
  5. <div class="logoTitle">metavatar</div>
  6. </div>
  7. <div class="categoryBox">
  8. <div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div>
  9. <div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div>
  10. <div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div>
  11. <!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
  12. <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
  13. </div>
  14. <div class="cutBox">
  15. <div class="en">
  16. <el-select v-model="charactersMy" placeholder="请选择" @change="change">
  17. <el-option
  18. v-for="item in languageLsit"
  19. :key="item.value"
  20. :label="item.name"
  21. :value="item.value"
  22. >
  23. <div class>
  24. <img
  25. :src="item.url"
  26. alt
  27. class="cutImg"
  28. >
  29. <span>{{item.name}}</span>
  30. </div>
  31. </el-option>
  32. </el-select>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapState, mapActions } from "vuex";
  39. export default {
  40. name: "top",
  41. data() {
  42. return {
  43. languageLsit: [
  44. {
  45. name: "Cn",
  46. value: 1,
  47. url: require("../../assets/img/cn.jpeg")
  48. },
  49. {
  50. name: "En",
  51. value: 2,
  52. url: require("../../assets/img/en.jpg")
  53. }
  54. ],
  55. charactersMy: 1
  56. };
  57. },
  58. watch: {
  59. // languageLsit(newVal) {
  60. // this.setCharacters([
  61. // {
  62. // name: "Cn",
  63. // value: 1
  64. // },
  65. // {
  66. // name: "En",
  67. // value: 2
  68. // }
  69. // ]);
  70. // }
  71. },
  72. computed: {
  73. ...mapState({
  74. characters: state => state.publicObj.characters
  75. })
  76. },
  77. methods: {
  78. ...mapActions(["setCharacters"]),
  79. change(value) {
  80. console.log(value);
  81. this.setCharacters(value);
  82. },
  83. go(url){
  84. this.$router.push(url)
  85. },
  86. },
  87. mounted() {
  88. console.log(this.languageLsit, "characters");
  89. }
  90. };
  91. </script>
  92. <style lang="scss" scoped>
  93. .topBox {
  94. width: 100%;
  95. overflow: hidden;
  96. position: fixed;
  97. top: 0;
  98. left: 0;
  99. z-index: 100;
  100. background-color: #fff;
  101. }
  102. .logoBox {
  103. margin-top: 20px;
  104. margin-left: 35px;
  105. margin-bottom: 20px;
  106. float: left;
  107. overflow: hidden;
  108. cursor: pointer;
  109. }
  110. .logo {
  111. float: left;
  112. width: 60px;
  113. height: 30px;
  114. }
  115. .logoTitle {
  116. float: left;
  117. line-height: 30px;
  118. margin-left: 10px;
  119. font-size: 22px;
  120. }
  121. .categoryBox {
  122. height: 30px;
  123. width: 30%;
  124. float: left;
  125. margin-top: 20px;
  126. margin-left: 6%;
  127. display: flex;
  128. justify-content: space-between;
  129. }
  130. .categoryitem {
  131. line-height: 30px;
  132. color: #7d7d7d;
  133. font-size: 15px;
  134. cursor: pointer;
  135. }
  136. .categoryitem:hover{
  137. background-color: #1358ba;
  138. }
  139. .cutBox {
  140. float: right;
  141. margin-top: 20px;
  142. margin-right: 50px;
  143. overflow: hidden;
  144. cursor: pointer;
  145. }
  146. .cutImg {
  147. width: 30px;
  148. height: 20px;
  149. float: left;
  150. margin-top: 6px;
  151. margin-right: 10px;
  152. }
  153. .en {
  154. float: left;
  155. font-size: 15px;
  156. }
  157. .el-select{
  158. width: 120px;
  159. }
  160. </style>