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/椭圆形.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/编组 18.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/编组 28.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">去认证</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" @click="click">
            <uv-grid-item v-for="(item,index) in baseList" :key="index">
              <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" @click="click">
            <uv-grid-item v-for="(item,index) in baseList" :key="index">
              <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: '我的发布'
      }, {
        name: 'lock',
        imageUrl: '/static/image/center/1.png',
        title: '我的推广'
      }, {
        name: 'star',
        imageUrl: '/static/image/center/1.png',
        title: '我的银行卡'
      }, {
        name: 'star',
        imageUrl: '/static/image/center/1.png',
        title: '我的钱包'
      }],
      // 其他列表
      otherList: [{
        name: 'photo',
        imageUrl: '/static/image/center/1.png',
        title: '实名信息'
      }, {
        name: 'lock',
        imageUrl: '/static/image/center/1.png',
        title: '帮助反馈'
      },]
    }
  },
  methods: {
    click(name) {
      uni.showToast({
        icon: 'none',
        title: `点击了第${name}个`
      })
    }
  }
}
</script>

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


</style>