<template>   <!-- 页头 -->   <div class="container">     <van-row type="flex" justify="space-between">       <van-col span="6">         <div class="dropdown">           <button class="dropbtn" @click="pageChange_show"></button>           <div v-show="show">             <ul class="dropdown-content">               <li @click="pageChange">                 <a href="https://www.baidu.com/"                   >{{ LANG.test1.desc73 }}<span>></span></a                 >               </li>               <li @click="pageChange">                 <router-link to="/Marketplace"                   >{{ LANG.test1.desc74 }}<span>></span></router-link                 >               </li>               <li @click="pageChange">                 <router-link to="/#community">                   <a href="#community">{{ LANG.test1.desc75 }}<span>></span></a>                 </router-link>               </li>               <li @click="pageChange">                 <router-link to="/#space">                   <a href="#"> {{ LANG.test1.desc76 }}<span>></span></a>                 </router-link>               </li>               <li @click="pageChange">                 <router-link to="/#spaceGC">                   <a href="#"> {{ LANG.test1.desc77 }}<span>></span> </a>                 </router-link>               </li>             </ul>           </div>         </div>       </van-col>       <van-col span="6" @click="$router.push('/')"         ><img src="../../assets/images/icon.png" alt=""       /></van-col>       <van-col span="6"         ><button ref="smartBtn" class="col-md-6 wallet" @click="connectSmart()">           {{ smartBtnTxt }}         </button>       </van-col>     </van-row>   </div> </template>
<style lang="less" scoped> .container {   position: fixed;   z-index: 10;   width: 100%;   background-color: #000; } /* 设置下拉按钮的样式 */ .dropbtn {   width: 0.45rem;   height: 0.31rem;   background: url(../../assets/images/headLeft.png) no-repeat;   background-size: 100% 100%;   border: none;   cursor: pointer; }
/* 容器 <div> - 需要放置下拉内容 */ .dropdown {   position: relative;   display: inline-block; }
/* 下拉内容（默认隐藏） */ .dropdown-content {   position: absolute;   // display: flex;   display: none;   list-style: none;   width: 3.53rem;   height: 6.13rem;   left: -0.2rem;   top: 0.5rem;   background: url(../../assets/images/Group82.png) no-repeat;   background-size: 100% 100%;   // flex-direction: column;   // justify-content: space-around;   font-size: 0.24rem;   font-weight: bold;   li {     width: 88%;     // height: 20%;     margin: 0 auto;   } }
/* 下拉链接 */ li a {   width: 100%;   margin: 0 auto;   color: black;   text-decoration: none;   display: block;   border-bottom: 0.01rem solid #dfdfdf;   height: 1.22rem;   line-height: 1.22rem;   text-align: left;   position: relative;   span {     position: absolute;     right: 1%;     color: #c4c4c4;   } } li a:last-child {   border-bottom: none; } /* 悬停时更改下拉链接的颜色 */ .dropdown-content a:hover {   background: none; }
/* 悬停时显示下拉菜单 */ .dropdown:hover .dropdown-content {   display: block; }
.van-row {   width: 100%;   height: 1rem;   color: #202c3f;   display: flex;   background-color: #000;   flex-shrink: 1;   flex-wrap: nowrap;   font-size: 0.22rem;   text-align: center; } .van-col:nth-child(1) {   width: 15%;   position: relative;   top: 30%; } .van-col:nth-child(2) {   width: 55%;   position: relative; } .van-col:nth-child(2) img {   width: 1.05rem;   height: 0.52rem;   position: absolute;   top: 20%; } .van-col:nth-child(3) {   width: 30%;   position: relative; } .wallet {   width: 1.5rem;   height: 0.4rem;   font-size: 0.22rem;   background-color: #fff;   border-radius: 0.2rem;   border: none;   text-align: center;   font-weight: bold;   position: absolute;   top: 30%;   left: 50%;   margin-left: -0.75rem; } </style>
<script> export default {   data() {     return {       show: true,       smartBtnTxt: this.getSmartBtnTxt(),     };   },   methods: {     pageChange_show(){       this.show =true;     },     pageChange(name) {       this.$router.push(name);       this.show =false;     },     getSmartBtnTxt() {       if (this.CTManager.isConnect) {         let account = this.CTManager.account;         let pre = account.slice(0, 5);         let suffix = account.slice(account.length - 4, account.length);         return pre + "..." + suffix;       }       return this.LANG.test1.desc1;     },     connectSmart() {       this.CTManager.connectSmart((account) => {         this.smartBtnTxt = this.getSmartBtnTxt();       });     },   }, }; </script>