pay-video-applet-uniapp-24-8-22/pages/index/center.vue

<template>
  <view style="display: flex;flex-direction: column; width: 100vw;height: 100vh;">
    <tabber :select="2"/>
    <!-- 顶部 -->
    <view style="width: 100%;height: 30%;">
      <image src="/static/image/center/1.png" style="width: 100%;height: 100%;"></image>
    </view>

    <!--中部 用户信息-->
    <view
        style="border-radius: 20rpx;position: absolute;top: 20%;left: 10%;   width:80%;height: 12%;z-index: 1;background: white;">
      <!--头像-->
      <view
          style="position: absolute;z-index:2;width:33%;height:100%;border-radius: 50%;overflow: hidden;top: -32%;left: 0%;">
        <image src="/static/image/center/tyx.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!--福利中心-->
      <view style="position: absolute;z-index:2;width:33%;height:30%;top: 13%;right: 2%;">
        <image src="/static/image/center/flzx.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!--  未认证-->
      <view style="position: absolute;z-index:2;width:15%;height:20%;top: 33%;left: 28%;">
        <image src="/static/image/center/wrz.png" style="width: 100%;height: 100%;"></image>
      </view>
      <!--  去认证  -->
      <view style="position: absolute;z-index:2;width:55%;height:20%;top: 32%;left: 44%;">
        <span style="font-size: 26rpx;" class="textColor">去认证</span>
      </view>
      <!--  用户信息  -->
      <view style="position: absolute;z-index:2;width:55%;height:20%;top: 60%;left: 7%;">
        <view>
          <span style="font-size: 35rpx;margin-right: 5rpx">海绵宝贝</span>
          <span style="font-size: 18rpx">15012142563</span>
        </view>
      </view>
      <!--  点赞量  -->
      <view
          style="display: flex;flex-direction: column;gap:2rpx ;position: absolute;z-index:2;width:15%;height:40%;top: 55%;right: 3%;">
        <view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
          <image src="/static/image/center/dianZan.svg" style="width: 40%;height: 84%;"></image>
        </view>
        <view style="display: flex;justify-content: center ;font-size: 20rpx;color:#777777">点赞量</view>
      </view>
    </view>

    <!-- 下部 -->
    <view style="width: 100%;height: 70%;padding-top:150rpx">
      <view>
        <!--上GridView-->
        <view>
          <uv-grid :col="4">
            <uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goToPage(item)">
              <img :src="item.imageUrl" :alt="item.title"
                   :style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
              <text style="font-size: 30rpx;color: #333333;">{{ item.title }}
              </text>
            </uv-grid-item>
          </uv-grid>
        </view>


        <!--其他-->
        <view style="margin:50rpx 0  0 50rpx;font-size: 40rpx;color: #333333;">其他</view>

        <!--下GridView-->
        <view style="margin-top: 50rpx;">
          <uv-grid :col="4">
            <uv-grid-item v-for="(item,index) in otherList" :key="index" @click="goToPage(item)">
              <img :src="item.imageUrl" :alt="item.title"
                   :style="{ width: '80rpx', height: '80rpx',marginBottom: '10rpx'}"/>
              <text style="font-size: 30rpx;color: #333333;">{{ item.title }}
              </text>
            </uv-grid-item>
          </uv-grid>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import {mapState} from 'vuex'

export default {
  components: {
    tabber
  },
  computed: {
    ...mapState(['count']),
  },
  data() {
    return {
      // 基础列表
      baseList: [
        {
          name: 'photo',
          imageUrl: '/static/image/center/1.png',
          title: '我的发布',
          gotoPageUrl: '/mine/releaseRecord'
        },
        {
          name: 'lock', imageUrl: '/static/image/center/1.png', title: '我的推广',
          gotoPageUrl: '/mine/promotionRecord'
        },
        {name: 'star', imageUrl: '/static/image/center/1.png', title: '我的银行卡',
          gotoPageUrl: '/mine/addBankCard'
        },
        {name: 'star', imageUrl: '/static/image/center/1.png', title: '我的钱包',
          gotoPageUrl: '/mine/purse'},
      ],
      // 其他列表
      otherList: [
        {name: 'photo', imageUrl: '/static/image/center/1.png', title: '实名信息'},
        {name: 'lock', imageUrl: '/static/image/center/1.png', title: '帮助反馈'},
      ],
    }
  },
  methods: {

    // 点击列表跳转页面
    goToPage(item) {
      this.$utils.navigateTo(item.gotoPageUrl)
    },

  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.textColor {
  background: $uni-linear-gradient-color;
  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
}


</style>