移动端遮罩页面 跳转

在router index.js添加

let router = new Router({

routes: [{}],

scrollBehavior(to, from, savedPosition) {

    // console.log('to', to)

    if (to.hash) {

      return {

        selector: to.hash

      }

    } else {

      return {

        x: 0, y: 0

      }

    }

  }

}）

页面

<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>