工作台

h5app/src/views/sapp/tabMain.vue

@@ -160,7 +160,7 @@ export default defineComponent({
     height: 150px;
     background-size: contain;
     background-repeat: no-repeat;
-    margin: 80px 15px 10px 15px;
+    margin: 50px 15px 10px 15px;
     background-size: contain;
     background-position: center;
   }

h5app/src/views/sapp/tabUser.vue

@@ -17,8 +17,8 @@
         </ion-item>
       </ion-list>
     </ion-content>-->
-    <ion-content class="tab-user-content">
-      <div class="mine-toolbar">
+    <ion-content>
+<!--      <div class="mine-toolbar">
         <div class="mine-body">
           <div class="info-img">
             <img class="img-user" src="@/assets/icon/icon-user-2x.png" onerror="this.src='@/assets/icon/icon-user-2x.png'" />
@@ -31,21 +31,51 @@
         </div>
       </div>
       <ion-list>
-        <ion-item class="item-menu" detail mode="md" style="--border-style: none;">
+        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;">
           <img src="@/assets/icon/grxx.png" >
           <ion-label @click="router.push('/tabs/tabUser/myInfo')">个人信息</ion-label>
         </ion-item>
-        <ion-item class="item-menu" detail mode="md" style="--border-style: none;" v-if="isDev">
+        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;" v-if="isDev">
           <img src="@/assets/icon/tysz.png">
           <ion-label @click="router.push('/tabs/tabUser/updatePassword')">密码修改</ion-label>
         </ion-item>
-        <ion-item class="item-menu" detail mode="md" style="--border-style: none;">
+        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;">
           <img src="@/assets/icon/gywm.png">
           <ion-label>关于我们</ion-label>
         </ion-item>
       </ion-list>
       <div class="login-out" @click="presentAlert" v-if="isDev">
         退出登录
+      </div>-->
+      <div class="tab-user-content">
+         <div class="user_info">
+           <div class="user_img">
+             <img class="img-user" src="@/assets/icon/icon-user-2x.png" onerror="this.src='@/assets/icon/icon-user-2x.png'" />
+           </div>
+           <div class="user_text">
+             <h2>{{user.name}}</h2>
+             <p>驿站人员</p>
+           </div>
+         </div>
+        <div class="user_panel">
+          <div class="panel_title">
+            我的设置
+          </div>
+          <div class="panel_list">
+            <ion-item class="item-menu" detail mode="md">
+              <img src="@/assets/icon/grxx.png" >
+              <ion-label @click="router.push('/tabs/tabUser/myInfo')">个人信息</ion-label>
+            </ion-item>
+            <ion-item class="item-menu" detail mode="md" v-if="isDev">
+              <img src="@/assets/icon/tysz.png">
+              <ion-label @click="router.push('/tabs/tabUser/updatePassword')">密码修改</ion-label>
+            </ion-item>
+            <ion-item class="item-menu" detail mode="md">
+              <img src="@/assets/icon/gywm.png">
+              <ion-label>关于我们</ion-label>
+            </ion-item>
+          </div>
+        </div>
       </div>
     </ion-content>
   </ion-page>
@@ -101,7 +131,7 @@ onMounted(() => {
 </script>
 
 <style lang="less">
-.tab-user-content{
+/*.tab-user-content{
   --background: #ffffff !important;
 
   .mine-toolbar {
@@ -130,7 +160,7 @@ onMounted(() => {
 
       .info-img {
         text-align: center;
-        /*margin: 30px 0px;*/
+        !*margin: 30px 0px;*!
 
         img {
           height: 60px;
@@ -177,6 +207,71 @@ onMounted(() => {
     margin-top:45px;
     width:100%;
   }
+}*/
+
+.tab-user-content{
+  background-image: url("../../assets/icon/user_bg.png");
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-color: #F7F8FC;
+  background-attachment: local;
+  overflow: hidden;
+
+  .user_info{
+    display: flex;
+    align-items: center;
+    margin: 90px 10px 10px 10px;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.6);
+    position: relative;
+    z-index: 2;
+
+    .user_text{
+      padding-left: 20px;
+
+      p{
+        color: #899099;
+      }
+    }
+  }
+
+  .user_info::before{
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    backdrop-filter: blur(2px);
+    border-radius: 10px;
+  }
+
+  .user_panel{
+    background-color: white;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 10px;
+
+    .panel_title{
+      font-size: 18px;
+      padding: 15px;
+    }
+
+    .panel_list{
+      ion-item{
+        --inner-border-width: 0;
+        --inner-padding-end:0px;
+        ion-label{
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+
 }