链接钱包 + 翻译

src/assets/styles/rem.js

@@ -7,7 +7,7 @@
 			console.log("11111",clientWidth)
 			if (!clientWidth) return;
 			if (clientWidth >= 640) {
-				docEl.style.fontSize = 60 + 'px';  // 页面宽度2200
+				docEl.style.fontSize = 60 + 'px'; 
 			} else {
 				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
 				// console.log("00001111")

src/assets/styles/theme.scss

@@ -15,7 +15,7 @@ $tabsFontSize: 18px;
 $tabsActiveWidth: 108px;
 
 
-$vpx: 0.0521vmax;
+$vpx: 0.0521vmax;  // 100/1920
 
 
 .theme-color{

src/components/Navigation.vue

+<template>
+    <div class="comn-navigation">
+        <div class="content">
+            <div class="left">
+                <img src="@/assets/images/logo.png" alt="" class="logo pointer" @click="goHome">
+                <div class="title flex-row-start-center">
+                    <div @click="goHome" class="pointer">{{$t('metaverse')}}</div>
+                </div>
+                <div class="nav-contianer">
+                    <div class="nav-item" @click="linkTo(item.path)" :class="{'nav-item-active': $route.path == item.path}" v-for="(item,index) in navList" :key="index">{{item.name}}</div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="option" style="cursor: auto;" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
+                <div class="option style-2" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div>
+                <div class="option language">
+                    <div>{{language}} <i class="el-icon-arrow-down" /></div>
+                    <ul class="lang-list" @click="toChangeLanguage($event.target.dataset.lang)">
+                        <li v-for="(item,index) in  langList" :key="index" :data-lang="item.value" class="lang-item">
+                            {{item.label}}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import i18n, { setLanguage, getCurrentLanguage } from '../i18n';
+import { createNamespacedHelpers } from 'vuex';
+
+const { mapMutations: mapMutationsWallet, mapState: mapStateWallet } = createNamespacedHelpers('wallet');
+
+export default {
+    name: 'Navigation',
+    props: {
+
+    },
+    data() {
+        return {
+            isPro: false,
+            queryData: '',
+            queryInputFocus: false,
+            langList: [
+                { label: '中文', value: 'zh' },
+                { label: 'English', value: 'en' },
+                { label: '日本語', value: 'ja' },
+                { label: '한글', value: 'ko' },
+            ],
+        };
+    },
+    computed: {
+        walletConnected() {
+            return this.$store.getters.walletConnected;
+        },
+        currentWalletAddress(){
+            return this.$store.getters.currentWalletAddress
+        },
+        navList() {
+            return []
+        },
+        language() {
+            let lan = getCurrentLanguage();
+            let content = this.langList.find(item => item.value == lan) || {};
+            return content.label;
+        }
+    },
+    methods: {
+        ...mapMutationsWallet(['SET_INTERFACE_SIGNATURE', 'SET_CURRENT_WALLET_ADDRESS', 'CHANGE_CONNECT_WALLET_MODAL_STATUS', 'SET_ADMIN_STRING']),
+        linkTo(path) {
+            this.$router.push(path);
+        },
+        goHome() {
+            this.$router.push("/");
+        },
+        toChangeLanguage(lang) {
+            console.log('改语言', lang)
+            setLanguage(lang)
+        },
+        toCannectWallet() {
+            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(true);
+        }
+    },
+    created() {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+    box-sizing: border-box;
+}
+
+.comn-navigation {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    height: 93*$vpx;
+    background: rgba(0, 0, 0, 0.1);
+    .content {
+        height: 100%;
+        width: 1600*$vpx;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .left {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .logo {
+                width: 50*$vpx;
+                height: 55*$vpx;
+                margin-right: 10*$vpx;
+            }
+        }
+    }
+    .title {
+        font-size: 28*$vpx;
+        font-family: FZZongYi-M05;
+        color: $themeColor;
+        margin: 0 50*$vpx 0 2*$vpx;
+        display: flex;
+        align-items: center;
+        line-height: 28*$vpx;
+        span {
+            cursor: pointer;
+            display: block;
+            font-size: 14*$vpx;
+            height: 28*$vpx;
+            line-height: 28*$vpx;
+            padding: 0 10*$vpx;
+            background-color: rgba($color: $themeColor, $alpha: 0.2);
+            border-radius: 18*$vpx;
+            margin-left: 12*$vpx;
+        }
+    }
+    .nav-contianer {
+        display: flex;
+        align-items: center;
+        .nav-item {
+            position: relative;
+            margin-right: 50*$vpx;
+            cursor: pointer;
+            font-size: 18*$vpx;
+            font-weight: bold;
+            color: #FFF;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &.nav-item-active {
+                color: $themeColor;
+                &:after {
+                    content: '';
+                    position: absolute;
+                    width: 69*$vpx;
+                    height: 10*$vpx; // background: url('../assets/images/header/tabActive.png') center no-repeat;
+                    background-size: cover;
+                }
+            }
+            &:hover {
+                color: $themeColor;
+            }
+        }
+    }
+    .right {
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .option {
+            width: 133*$vpx;
+            height: 47*$vpx;
+            border-radius: 23*$vpx;
+            background: rgba(255, 255, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 29*$vpx;
+            cursor: pointer;
+            &.style-2{
+                width: auto;
+                padding: 0 28*$vpx;
+            }
+        }
+        .language {
+            position: relative;
+            &:hover {
+                .lang-list {
+                    display: block;
+                }
+            }
+            .lang-list {
+                position: absolute;
+                top: 100%;
+                left: 0;
+                line-height: 30*$vpx;
+                background: rgba(255, 255, 255, 0.2);
+                width: 100%;
+                border-radius: 5px;
+                padding: 10*$vpx 20*$vpx;
+                display: none;
+            }
+        }
+    }
+}
+</style>

src/i18n/index.js

@@ -18,8 +18,20 @@ const messages = {
     ja,
     ko,
 }
-// 通过选项创建 VueI18n 实例并导出
-export default new VueI18n({
+
+const i18n = new VueI18n({
     locale: localStorage.getItem('lang') ||  'en', // 设置当前语言环境，默认中文简体
     messages, // 设置语言环境对应信息
 })
+
+
+export function setLanguage(lang){
+    i18n.locale = lang
+    localStorage.setItem('lang', lang)
+}
+
+export function getCurrentLanguage(){ 
+    return i18n.locale;
+}
+
+export default i18n;

src/views/thinkiumBridge/pcIndex.vue

 <template>
  <div class="container-wrap">
+    <Navigation/>
     <thinkiumBridge></thinkiumBridge>
  </div>
 </template>
 
 <script>
 import thinkiumBridge from './thinkiumBridge.vue'
+import Navigation from '@/components/Navigation.vue'
  export default {
-   components: { thinkiumBridge },
+   components: { thinkiumBridge, Navigation },
    data () {
      return {
 

src/views/thinkiumBridge/thinkiumBridge.vue

@@ -622,7 +622,7 @@ export default {
         height: 100%;
         display: block;
         .banner-top {
-            height: 28vw;
+            height: 533*$vpx;
             background: url('../../assets/images/bgPc.png') center no-repeat;
             background-size: cover;
         }