邃芒官网(PC) https://www.metavatar.cc
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

249 rindas
6.4 KiB

  1. <template>
  2. <div class="topBox" ref="scrollDiv">
  3. <div class="logoBox" @click="go('/')">
  4. <img
  5. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/logo.png"
  6. alt
  7. class="logo"
  8. />
  9. <div class="logoTitle">metavatar</div>
  10. </div>
  11. <div class="categoryBox">
  12. <div class="categoryitem">
  13. <el-dropdown @command="handleCommand">
  14. <span class="el-dropdown-link">
  15. {{ characters == 1 ? "产品能力" : "Products" }}
  16. <i class="el-icon-arrow-down el-icon--right"></i>
  17. </span>
  18. <el-dropdown-menu slot="dropdown">
  19. <el-dropdown-item command="MetaGene">
  20. {{ characters == 1 ? "邃芒慧生" : "MetaGene" }}
  21. </el-dropdown-item>
  22. <el-dropdown-item command="MetaStream">{{
  23. characters == 1 ? "邃芒慧播" : "MetaStreaming"
  24. }}</el-dropdown-item>
  25. <el-dropdown-item command="MetaManeuver">{{
  26. characters == 1 ? "邃芒慧影" : "MetaNeuver"
  27. }}</el-dropdown-item>
  28. <el-dropdown-item command="MetaTuring">{{
  29. characters == 1 ? "邃芒慧侃" : "MetaTuring"
  30. }}</el-dropdown-item>
  31. </el-dropdown-menu>
  32. </el-dropdown>
  33. </div>
  34. <div class="categoryitem" @click="goView('Technology')">
  35. {{ characters == 1 ? "创新技术" : "Technology" }}
  36. </div>
  37. <div class="categoryitem" @click="goView('Solutions')">
  38. {{ characters == 1 ? "解决方案" : "Solutions" }}
  39. </div>
  40. <!-- <div class="categoryitem" @click="goView('Cases')">
  41. {{ characters == 1 ? "经典案例" : "Cases" }}
  42. </div> -->
  43. <div class="categoryitem" @click="goView('aboutUs')">
  44. {{ characters == 1 ? "关于我们" : "About us" }}
  45. </div>
  46. </div>
  47. <div class="cutBox">
  48. <!-- <img src="@/assets/img/earth.png" alt="" /> -->
  49. <div class="en">
  50. <el-select v-model="charactersMy" placeholder="请选择" @change="change">
  51. <el-option
  52. v-for="item in languageLsit"
  53. :key="item.value"
  54. :label="item.name"
  55. :value="item.value"
  56. >
  57. <div class>
  58. <!-- <img :src="item.url" alt class="cutImg" /> -->
  59. <span>{{ item.name }}</span>
  60. </div>
  61. </el-option>
  62. </el-select>
  63. </div>
  64. </div>
  65. </div>
  66. </template>
  67. <script>
  68. import { mapState, mapActions } from "vuex";
  69. export default {
  70. name: "top",
  71. data() {
  72. return {
  73. languageLsit: [
  74. {
  75. name: "中文(中国)",
  76. value: 1,
  77. url: require("../../assets/img/cn.jpeg"),
  78. },
  79. {
  80. name: "English(USA)",
  81. value: 2,
  82. url: require("../../assets/img/en.jpg"),
  83. },
  84. ],
  85. charactersMy: 1,
  86. };
  87. },
  88. watch: {
  89. // languageLsit(newVal) {
  90. // this.setCharacters([
  91. // {
  92. // name: "Cn",
  93. // value: 1
  94. // },
  95. // {
  96. // name: "En",
  97. // value: 2
  98. // }
  99. // ]);
  100. // }
  101. },
  102. computed: {
  103. ...mapState({
  104. characters: (state) => state.publicObj.characters,
  105. }),
  106. },
  107. methods: {
  108. ...mapActions(["setCharacters"]),
  109. change(value) {
  110. console.log(value);
  111. this.setCharacters(value);
  112. },
  113. handleCommand(path) {
  114. this.$router.push(`/${path}`);
  115. },
  116. goView(id) {
  117. if (id == "Technology" || id == "Solutions") {
  118. this.$router.push(`/`);
  119. setTimeout(() => {
  120. document.querySelector("#" + id).scrollIntoView({
  121. behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
  122. block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  123. inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  124. });
  125. }, 100);
  126. } else {
  127. document.querySelector("#" + id).scrollIntoView({
  128. behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
  129. block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  130. inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  131. });
  132. }
  133. },
  134. goPage(path) {
  135. this.$router.push(path);
  136. // this.goView(path);
  137. },
  138. go(url) {
  139. this.$router.push(url);
  140. },
  141. // 滚动到顶部
  142. handleScrollTop() {
  143. this.$nextTick(() => {
  144. let scrollElem = this.$refs.scrollDiv;
  145. scrollElem.scrollTo({ top: 0, behavior: "smooth" });
  146. });
  147. },
  148. },
  149. mounted() {
  150. console.log(this.languageLsit, "characters");
  151. },
  152. created() {
  153. this.handleScrollTop();
  154. },
  155. };
  156. </script>
  157. <style lang="scss" scoped>
  158. .topBox {
  159. width: 100%;
  160. overflow: hidden;
  161. position: fixed;
  162. top: 0;
  163. left: 0;
  164. z-index: 100;
  165. background-color: #fff;
  166. }
  167. .logoBox {
  168. margin-top: 20px;
  169. margin-left: 35px;
  170. margin-bottom: 20px;
  171. float: left;
  172. overflow: hidden;
  173. cursor: pointer;
  174. }
  175. .logo {
  176. float: left;
  177. width: 60px;
  178. height: 30px;
  179. }
  180. .logoTitle {
  181. float: left;
  182. line-height: 30px;
  183. margin-left: 10px;
  184. font-size: 22px;
  185. }
  186. .categoryBox {
  187. height: 30px;
  188. width: 30%;
  189. float: left;
  190. margin-top: 20px;
  191. margin-left: 6%;
  192. display: flex;
  193. justify-content: space-between;
  194. }
  195. .categoryitem {
  196. line-height: 30px;
  197. color: #7d7d7d;
  198. font-size: 15px;
  199. cursor: pointer;
  200. transition: all 0.3s;
  201. }
  202. .categoryitem:hover {
  203. color: #16e9d6;
  204. }
  205. .el-dropdown-menu__item:focus,
  206. .el-dropdown-menu__item:not(.is-disabled):hover {
  207. background-color: #16e9d6;
  208. color: #fff;
  209. }
  210. .cutBox {
  211. float: right;
  212. margin-top: 20px;
  213. margin-right: 100px;
  214. cursor: pointer;
  215. img {
  216. position: relative;
  217. bottom: 3px;
  218. float: left;
  219. width: 45px;
  220. height: 45px;
  221. margin-right: 5px;
  222. }
  223. }
  224. .cutImg {
  225. width: 30px;
  226. height: 20px;
  227. float: left;
  228. margin-top: 6px;
  229. margin-right: 10px;
  230. }
  231. .en {
  232. float: left;
  233. font-size: 15px;
  234. }
  235. .el-select {
  236. width: 150px;
  237. }
  238. .el-dropdown-link {
  239. transition: all 0.3s;
  240. &:hover {
  241. color: #16e9d6;
  242. }
  243. }
  244. </style>