|
- <template>
- <div class="topBox">
- <div class="logoBox" @click="go('/')">
- <img src="../../assets/img/logo.png" alt class="logo">
- <div class="logoTitle">metavatar</div>
- </div>
- <div class="categoryBox">
- <div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div>
- <div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div>
- <div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div>
- <!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
- <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
- </div>
- <div class="cutBox">
- <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: "Cn",
- value: 1,
- url: require("../../assets/img/cn.jpeg")
- },
- {
- name: "En",
- 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);
- },
- go(url){
- this.$router.push(url)
- },
- },
- mounted() {
- console.log(this.languageLsit, "characters");
- }
- };
- </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;
- }
- .categoryitem:hover{
- background-color: #1358ba;
- }
- .cutBox {
- float: right;
- margin-top: 20px;
- margin-right: 50px;
- overflow: hidden;
- cursor: pointer;
- }
- .cutImg {
- width: 30px;
- height: 20px;
- float: left;
- margin-top: 6px;
- margin-right: 10px;
- }
- .en {
- float: left;
- font-size: 15px;
- }
- .el-select{
- width: 120px;
- }
- </style>
-
|