bn-q-icon/pages/index/components/top-head.vue

<template>
  <view class="head-box" :class="{'top-two':topType!==1}">
    <view class="top-head">
      <view class="head-item head-left">
        <view class="left-img">
          <image src="@/static/img/index/logo1.png" mode="aspectFill"></image>
        </view>
        <view class="left-text">
          <view class="item-item">BNBDAO</view>
          <view class="item-item">WEB3 DATA</view>
        </view>
      </view>
      <view class="head-item head-right">
        <view class="right-img" @click.stop="setShowLang">
          <image src="@/static/img/index/yy.svg" mode="aspectFill"></image>
        </view>
        <view class="right-text">{{ babAddress }}</view>
      </view>
    </view>
    <view class="top-lang" :class="{'show-lang':showLang}">
      <view class="lang-item" v-for="langItem in langList" @click.stop="setLocaleLang(langItem.name)">
        {{ langItem.value }}
      </view>
    </view>
  </view>
</template>

<script>
import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";

export default {
  name: "top-head",
  components: {},
  props: {
    topType:{
      default:1
    }
  },
  data() {
    return {
      langList: [{'name': 'zh-Hans', 'value': '简体中文'}, {'name': 'en', 'value': 'English'}, {
        'name': 'ja',
        'value': '日本語'
      }, {'name': 'ko', 'value': '한국어'}],
      babAddress: '',
      showLang:false
    }
  },
  watch: {},
  async mounted() {
    this.babAddress = tokenpocketBnb.getMyAddress()
  },
  methods: {
    setLocaleLang(code) {
      uni.setLocale(code);
      this.$i18n.locale = code;
      this.applicationLocale = code;
      this.showLang = false
    },
    setShowLang() {
      this.showLang = !this.showLang
    },
  }
}
</script>

<style scoped lang="scss">
.head-box {
  .top-head {
    display: flex;
    justify-content: space-between;
    height: 84rpx;
    padding-left: 20rpx;

    .head-item {
      display: flex;
      justify-content: left;
    }

    .head-left {
      .left-img {
        margin-top: 1rpx;

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .left-text {
        padding-top: 5px;
        margin-left: 10px;

        .item-item {
          font-size: 22rpx;
          color: #fff;
        }

        .item-item:nth-of-type(1) {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .head-right {
      justify-content: right;

      .right-img {
        width: 70rpx;
        height: 70rpx;

        image {
          width: 70rpx;
          height: 70rpx;
        }
      }

      .right-text {
        margin-left: 20rpx;
        height: 70rpx;
        line-height: 70rpx;
        width: 200rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgb(116, 132, 164);
      }
    }
  }
  .top-lang{
    border-radius: 0 0 0 20rpx;
    z-index: 1000;
    position: absolute;
    top:120rpx ;
    right: 0;
    width: 300rpx;
    transition: 0.5s ease;
    height: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    .lang-item{
      height: 100rpx;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 32rpx;
      padding-left: 40rpx;
      box-sizing: border-box;
    }
  }
  .show-lang{
    height: auto;
    transition: 0.5s ease;
  }


}
.top-two{
  .item-item{
    color: #222 !important;
  }
  .right-text{
    color: rgb(0, 87, 255) !important;
  }

}
</style>