Yi.Admin/Yi.Vue3.x.Vant/src/view/my.vue

<template>



    <van-row class="headRow">
        <van-col span="2"><van-icon name="scan" size="1.5rem"/></van-col>
        <van-col span="20"></van-col>
        <van-col span="2"><van-icon name="setting-o" size="1.5rem" @click="show=true"/></van-col>
    </van-row>   

    <van-row class="bodyRow">
        <van-col span="6" class="leftCol">
          <van-image
            round
            width="4rem"
            height="4rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          </van-col>
          <van-col span="12" class="title"><span >大白不在家</span></van-col>
          <van-col span="6" class="subtitle"><span >个人主页<van-icon name="arrow" /></span></van-col>


          <van-col span="6" class="bodyCol"><div><span>6</span><br>关注</div></van-col>
          <van-col span="6" class="bodyCol"><div><span>3</span><br>粉丝</div></van-col>
          <van-col span="6" class="bodyCol"><div><span>0</span><br>人气</div></van-col>
          <van-col span="6" class="bodyCol"><div><span>3</span><br>钱钱</div></van-col>

          <van-col span="24">
        <van-row class="btnRow">
            <van-col span="12" >   <van-button class="btn"  > <van-icon name="bag"  size="1.8rem"/> 我的购物<van-icon name="arrow" size="1.2rem" /></van-button></van-col>

            <van-col span="12">   <van-button class="btn"><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon name="arrow" size="1.2rem"/></van-button></van-col>
        </van-row>
          </van-col >


          <AppGrid class="grid" :data='data1'></AppGrid>
          <AppGrid class="grid" :data='data2'></AppGrid>
          <AppGrid class="grid" :data='data3'></AppGrid>
    </van-row>

    <van-popup v-model:show="show" position="right" :style="{ height:'100%',width:'100%',backgroundColor:'#F8F8F8' }" >

      <van-nav-bar
  title="设置"
  left-text="返回"
  left-arrow
  @click-left="show=false"
/>
      <van-cell-group>
        <van-cell title="账户与安全" is-link />
        <van-cell title="黑名单" is-link />
        <van-cell title="推送设置" is-link />
        <van-cell title="隐私管理" is-link />
        <van-cell title="通用设置" is-link />
      </van-cell-group>
      <van-cell-group class="group">
        <van-cell title="家庭入驻" is-link />
        <van-cell title="社区入驻" is-link />
      </van-cell-group>

      <van-cell-group class="group">
        <van-cell title="清理缓存" is-link />
        <van-cell title="检测更新" is-link />
        <van-cell title="关于我们" is-link />
        <van-cell title="给个好评" is-link />
      </van-cell-group>

      <van-button type="danger">退出登录</van-button>
    </van-popup>
    <!-- <van-popup v-model:show="show" position="right">
     <div class="body-div"> 内容</div>
      </van-popup> -->
</template>
<script setup lang="ts">
import AppGrid from '@/components/AppGrid.vue'
import {AppGridData} from '@/type/class/AppGridData.ts'
import {ref} from 'vue'
const show=ref<boolean>(false);
let data1 :AppGridData={
  head:"个人中心",
  body:[
  {
    title:"我的消息",
    icon:"comment-o"
  },
  {
    title:"我的聊天",
    icon:"chat-o"
  },
  {
    title:"我的喜欢",
    icon:"like-o"
  },
  {
    title:"我的关注",
    icon:"user-o"
  },
]
};
let data2 :AppGridData={
  head:"功能",
  body:[
  {
    title:"排行榜",
    icon:"medal-o"
  },
  {
    title:"活动报名",
    icon:"balance-list-o"
  },
  {
    title:"钱钱兑换",
    icon:"gem-o"
  },
  {
    title:"全网上新",
    icon:"gift-card-o"
  },
]
};
let data3 :AppGridData={
  head:"服务",
  body:[
  {
    title:"客服",
    icon:"service-o"
  },
  {
    title:"小黑屋",
    icon:"wap-home-o"
  },
  {
    title:"邀请好友",
    icon:"friends-o"
  }
]
};
</script>
<style scoped>
.grid{
    width: 100%;
    margin-top: 1rem;
}
.headRow{
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.bodyRow
{
    text-align: left;
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;;
    padding-bottom: 4rem;
}

.title
{
    font-size: 1.5rem;
    line-height: 4rem;
}
.subtitle
{
  line-height: 4rem;
    color:#CBCBCB ;
}
.bodyCol{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 1rem;
}
.btn{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    border:none;
    color: black;
}
.btnRow{
    margin-top: 1.5rem;
    box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
}
.btnRow .van-button
{
  font-size: 1.2rem;
}
.van-icon-send-gift
{
  margin-right: 0.5rem;
}
.btnRow .van-icon-arrow
{
  margin-left: 0.45rem;
}
.van-cell
{
  text-align: left;
}
.group
{
margin-top: 1rem;
}
.van-popup .van-button
{
  width: 90%;
  margin-top: 2rem;
}

</style>