|
- <template>
- <div class="topBox" ref="scrollDiv">
- <div class="logoBox" @click="go('/')">
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/logo.png"
- alt
- class="logo"
- />
- <div class="logoTitle">metavatar</div>
- </div>
-
- <div class="categoryBox">
- <div class="categoryitem">
- <el-dropdown @command="handleCommand">
- <span class="el-dropdown-link">
- {{ characters == 1 ? "产品能力" : "Products" }}
- <i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="MetaGene">
- {{ characters == 1 ? "邃芒慧生" : "MetaGene" }}
- </el-dropdown-item>
- <el-dropdown-item command="MetaStream">{{
- characters == 1 ? "邃芒慧播" : "MetaStreaming"
- }}</el-dropdown-item>
- <el-dropdown-item command="MetaManeuver">{{
- characters == 1 ? "邃芒慧影" : "MetaNeuver"
- }}</el-dropdown-item>
- <el-dropdown-item command="MetaTuring">{{
- characters == 1 ? "邃芒慧侃" : "MetaTuring"
- }}</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- <div class="categoryitem" @click="goView('Technology')">
- {{ characters == 1 ? "创新技术" : "Technology" }}
- </div>
- <div class="categoryitem" @click="goView('Solutions')">
- {{ characters == 1 ? "解决方案" : "Solutions" }}
- </div>
- <!-- <div class="categoryitem" @click="goView('Cases')">
- {{ characters == 1 ? "经典案例" : "Cases" }}
- </div> -->
-
- <div class="categoryitem" @click="goView('aboutUs')">
- {{ characters == 1 ? "关于我们" : "About us" }}
- </div>
- </div>
- <div class="cutBox">
- <!-- <img src="@/assets/img/earth.png" alt="" /> -->
- <div class="en">
- <el-select v-model="charactersMy" placeholder="请选择" @change="change">
- <el-option
- v-for="item in languageLsit"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- >
- <div class>
- <!-- <img :src="item.url" alt class="cutImg" /> -->
- <span>{{ item.name }}</span>
- </div>
- </el-option>
- </el-select>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { mapState, mapActions } from "vuex";
-
- export default {
- name: "top",
- data() {
- return {
- languageLsit: [
- {
- name: "中文(中国)",
- value: 1,
- url: require("../../assets/img/cn.jpeg"),
- },
- {
- name: "English(USA)",
- value: 2,
- url: require("../../assets/img/en.jpg"),
- },
- ],
- charactersMy: 1,
- };
- },
- watch: {
- // languageLsit(newVal) {
- // this.setCharacters([
- // {
- // name: "Cn",
- // value: 1
- // },
- // {
- // name: "En",
- // value: 2
- // }
- // ]);
- // }
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
- methods: {
- ...mapActions(["setCharacters"]),
- change(value) {
- console.log(value);
- this.setCharacters(value);
- },
- handleCommand(path) {
- this.$router.push(`/${path}`);
- },
- goView(id) {
- if (id == "Technology" || id == "Solutions") {
- this.$router.push(`/`);
- setTimeout(() => {
- document.querySelector("#" + id).scrollIntoView({
- behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
- block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
- inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
- });
- }, 100);
- } else {
- document.querySelector("#" + id).scrollIntoView({
- behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
- block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
- inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
- });
- }
- },
- goPage(path) {
- this.$router.push(path);
- // this.goView(path);
- },
- go(url) {
- this.$router.push(url);
- },
- // 滚动到顶部
- handleScrollTop() {
- this.$nextTick(() => {
- let scrollElem = this.$refs.scrollDiv;
- scrollElem.scrollTo({ top: 0, behavior: "smooth" });
- });
- },
- },
- mounted() {
- console.log(this.languageLsit, "characters");
- },
- created() {
- this.handleScrollTop();
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .topBox {
- width: 100%;
- overflow: hidden;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 100;
- background-color: #fff;
- }
- .logoBox {
- margin-top: 20px;
- margin-left: 35px;
- margin-bottom: 20px;
- float: left;
- overflow: hidden;
- cursor: pointer;
- }
- .logo {
- float: left;
- width: 60px;
- height: 30px;
- }
- .logoTitle {
- float: left;
- line-height: 30px;
- margin-left: 10px;
- font-size: 22px;
- }
- .categoryBox {
- height: 30px;
- width: 30%;
- float: left;
- margin-top: 20px;
- margin-left: 6%;
- display: flex;
- justify-content: space-between;
- }
- .categoryitem {
- line-height: 30px;
- color: #7d7d7d;
- font-size: 15px;
- cursor: pointer;
- transition: all 0.3s;
- }
- .categoryitem:hover {
- color: #16e9d6;
- }
- .el-dropdown-menu__item:focus,
- .el-dropdown-menu__item:not(.is-disabled):hover {
- background-color: #16e9d6;
- color: #fff;
- }
- .cutBox {
- float: right;
- margin-top: 20px;
- margin-right: 100px;
- cursor: pointer;
- img {
- position: relative;
- bottom: 3px;
- float: left;
- width: 45px;
- height: 45px;
- margin-right: 5px;
- }
- }
- .cutImg {
- width: 30px;
- height: 20px;
- float: left;
- margin-top: 6px;
- margin-right: 10px;
- }
- .en {
- float: left;
- font-size: 15px;
- }
- .el-select {
- width: 150px;
- }
- .el-dropdown-link {
- transition: all 0.3s;
- &:hover {
- color: #16e9d6;
- }
- }
- </style>
|