设置及发表图文页面

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

@@ -1,8 +1,11 @@
 <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"/></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">
@@ -14,8 +17,8 @@
             src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
           />
           </van-col>
-          <van-col span="12"><span class="title">大白不在家</span></van-col>
-          <van-col span="6"><span class="subtitle">个人主页<van-icon name="arrow" /></span></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>
@@ -25,44 +28,115 @@
 
           <van-col span="24">
         <van-row class="btnRow">
-            <van-col span="12">     <van-button class="btn" type="primary" >我的购物</van-button></van-col>
-            <van-col span="12" >   <van-button class="btn" type="primary">我的签到</van-button></van-col>
+            <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='data'></AppGrid>
-          <AppGrid class="grid" :data='data'></AppGrid>
-          <AppGrid class="grid" :data='data'></AppGrid>
+          <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'
-let data :AppGridData={
-  head:"你好压抑",
+import {ref} from 'vue'
+const show=ref<boolean>(false);
+let data1 :AppGridData={
+  head:"个人中心",
   body:[
   {
-    title:"你好",
-    icon:"123"
+    title:"我的消息",
+    icon:"comment-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    title:"我的聊天",
+    icon:"chat-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    title:"我的喜欢",
+    icon:"like-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    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{
@@ -75,20 +149,20 @@ let data :AppGridData={
 .bodyRow
 {
     text-align: left;
-    margin-top: 2rem;
+    margin-top: 1.5rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;;
+    padding-bottom: 4rem;
 }
-.bodyRow span{
-    line-height: 2rem;
 
-}
 .title
 {
     font-size: 1.5rem;
+    line-height: 4rem;
 }
 .subtitle
 {
+  line-height: 4rem;
     color:#CBCBCB ;
 }
 .bodyCol{
@@ -99,6 +173,7 @@ let data :AppGridData={
 .btn{
     width: 100%;
     margin: 0;
+    padding: 0;
     background-color: #FFFFFF;
     border:none;
     color: black;
@@ -107,4 +182,30 @@ let data :AppGridData={
     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>