<script setup> const route = useRoute(); const router = useRouter(); const store = useStore(); const inited=ref(false) const nav=[ {label:"Document",path:"http://lite.techui.net/docs"}, {label:"Gtihub",path:"https://github.com/ayin86/techui-vue3-lite"}, {label:"Premium",path:"http://techui.net/docs/"}, ] const langs=[ {label:"简中",value:"cn"}, {label:"繁中",value:"hk"}, {label:"English",value:"en"}, ] const goToLink=(item)=>{ window.open(item.path); } const changLang=(item)=>{ store.state.lang=item.value if(item.value=='cn'){ router.push("/dashboardA-cn"); }else if(item.value=='hk'){ router.push("/dashboardA-hk"); }else if(item.value=='en'){ router.push("/dashboardA-en"); } } onMounted(() => { inited.value=true }) </script> <template> <div :class="`external-wrap ${inited&&'inited'}`" > <div class="link-wrap"> <div class="item" @click="goToLink(item)" v-for="item in nav"> {{ item.label }} </div> </div> <div class="lang-switch" > <div :class="`item ${store.state.lang==item.value?'active':''}`" @click="changLang(item)" v-for="(item,index) in langs">{{item.label}}</div> </div> </div> </template> <style lang="less"> .external-wrap{.poa; left:40px; top:0; display:flex; z-index: 20; .link-wrap{ display:flex; .item{padding:10px; .fc(@bld6); .por; cursor: pointer; .ani; &:hover{.fc(@cbl5);} } } .lang-switch{ display:flex; .por; margin:0 0 0 10px;padding:0 0 0 10px; &:before{content:""; .bdl(@bld6); .poa; left:0; top:10px; bottom:10px;} .item{padding:10px; .fc(@bld6); .por; cursor: pointer; .ani; &:before{.poa; top:0; left:50%; .bdr(0 0 10px 10px); .fixc("x"); width: 0%; opacity: 0; .ani; content:" "; height:5px; .bgc(@cbl6);} &:hover{.fc(@cbl5);} &.active{.fc(@cbl3); &:before{ opacity: 1;} } } } &.inited{ .active{ &:before{width: 90%;} } } } </style>