排版

hdApp/src/admin/home/me.vue

@@ -4,33 +4,37 @@
     <template>
       <view class="me-user_box" @click="goAdmin()">
         <view class="user-info_item">
-          <view v-if="myInfo.shopAdminId > 0"> <view class="name"> {{ myInfo.adminName||'' }} </view> <view class="mobile"> ID {{ myInfo.shopAdminId }} </view> </view>
+          <view v-if="myInfo.shopAdminId > 0"> 
+            <view class="name"> {{ myInfo.adminName||'' }} </view> 
+            <view class="mobile"> ID {{ myInfo.shopAdminId }} </view> 
+          </view>
         </view>
       </view>
       <view class="me-shop_box">
         <view class="me-shop_content content_box">
           <view class="me-shop_top">
             <view class="shop-top_left">
-
               <image :src="myInfo.shopImg" style="width:110upx;border-radius:100upx;" mode="widthFix" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0">
               </image>
               <image :src="myInfo.shopImg" style="width:110upx;border-radius:100upx;" mode="widthFix" @click="pageTo({url:'/admin/home/login'})" v-else>
               </image>
 
               <view class="top-info_box" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0" @click="pageTo({url: '/admin/shop/add?id='+myInfo.shopInfo.id})">
-                <view> {{ myInfo.sjName||'' }} </view>
-                <view style="display: flex; align-items: center;">
+                <view class="shop-name-text"> {{ myInfo.sjName||'' }} </view>
+                <view class="shop-detail-text">
                   <text>{{ myInfo.shopName||'' }} | ID {{myInfo.shopId||''}}</text>
-                  <i class="iconfont iconbianji" style="font-size:26upx;color:#abafb5;margin-left:18upx;"></i>
+                  <i class="iconfont iconbianji"></i>
                 </view>
               </view>
 
               <view class="top-info_box" @click="pageTo({url:'/admin/home/login'})" v-else>
-              <view style="font-size:40upx;"> 登录/注册 </view>
+                <view class="login-text">登录/注册</view>
               </view>
 
             </view>
-            <button @click="changeShop" v-if="loginInfo.switchShop" class="admin-button-com default chang-shop_btn" > <i class="iconfont iconqiehuan1"></i>切换门店</button>
+            <button @click="changeShop" v-if="loginInfo.switchShop" class="admin-button-com default chang-shop_btn" > 
+              <i class="iconfont iconqiehuan1"></i>切换门店
+            </button>
           </view>
           <view class="image-box" > <image :src="`${constant.imgUrl}/ghs/me/upgrade2.png`"></image> </view>
         </view>
@@ -38,87 +42,119 @@
         <template v-if="lookMoney == 1">
         <view class="account-info_box content_box">
           <view class="info-lf_box">
-            <view> 账户余额（元） <text style="float:right;margin-right:15upx;font-size:28upx;" @click.stop="suggest()">联系客服</text></view>
-            <view> <text>¥ </text> {{ myInfo.balance||0 }} </view>
-            <view> 可提现 ¥ {{ myInfo.txBalance||0 }}
-            <text class="to-cash" @click="pageTo({ url: '/pagesStore/me/shopYeChange' })">变动明细</text>
-            <text class="to-cash" @click="pageTo({ url: '/pagesStore/me/withdraw' })">提现记录</text>
-            <text v-if="myInfo.txBalance > 0" @click="checkToApplyCash" class="to-cash">提现</text> </view>
+            <view class="balance-title">
+              <text>账户余额（元）</text>
+              <text class="contact-service" @click.stop="suggest()">联系客服</text>
+            </view>
+            <view class="balance-amount"> 
+              <text class="currency">¥</text> 
+              <span>{{ myInfo.balance||0 }}</span>
+            </view>
+            <view class="balance-actions">
+              <text>可提现 ¥ {{ myInfo.txBalance||0 }}</text>
+              <text class="action-btn" @click="pageTo({ url: '/pagesStore/me/shopYeChange' })">变动明细</text>
+              <text class="action-btn" @click="pageTo({ url: '/pagesStore/me/withdraw' })">提现记录</text>
+              <text class="action-btn withdraw-btn" v-if="myInfo.txBalance > 0" @click="checkToApplyCash">提现</text>
+            </view>
           </view>
         </view>
         </template>
 
         <view class="module-com content_box user-open_bx">
-          <view class="input-line-wrap">
-
-            <!-- <tui-list-cell @click="pageTo({ url: '/pagesStore/me/income' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">收入明细</view>
-            </tui-list-cell>
-
-            <tui-list-cell @click="pageTo({ url: '/pagesStore/me/expend' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">支出明细</view>
-            </tui-list-cell> 
-
-            <tui-list-cell @click="pageTo({ url: '/admin/coupon/couponList' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">我的红包</view>
-            </tui-list-cell>
-
-            <tui-list-cell @click="pageTo({ url: '/pagesStore/me/rechargeList' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">充值记录</view>
-            </tui-list-cell> -->
-
-            <tui-list-cell @click="getMyVideo()" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title" style="color:green;">视频教程</view>
-            </tui-list-cell>
+          <view class="settings-group">
 
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/password' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">密码修改</view>
-            </tui-list-cell>
-
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/sk' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">更多设置</view>
-            </tui-list-cell>
-            <tui-list-cell @click="pageTo({ url: '/admin/delivery/deliveryManage' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">绑定跑腿</view>
-            </tui-list-cell>
-
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/print' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">前台小票机</view>
-            </tui-list-cell>
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/trumpet' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">前台云音箱</view>
-            </tui-list-cell>
-
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/makePrint' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">操作台小票机</view>
-            </tui-list-cell>
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/makeTrumpet' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">操作台云音箱</view>
-            </tui-list-cell>
+            <!-- 帮助与支持 -->
+            <view class="settings-category">
+              <view class="category-title">📚 帮助与支持</view>
+              <view class="category-items">
+                <view class="menu-item" @click="getMyVideo()">
+                  <text class="item-label" style="color: #049E2C; font-weight: 500;">视频教程</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+              </view>
+            </view>
 
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/mtPrint' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">美团小票机</view>
-            </tui-list-cell>
-            <tui-list-cell @click="pageTo({ url: '/admin/shop/mtTrumpet' })" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">美团云音箱</view>
-            </tui-list-cell>
+            <!-- 安全设置 -->
+            <view class="settings-category">
+              <view class="category-title">🔐 安全设置</view>
+              <view class="category-items">
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/password' })">
+                  <text class="item-label">密码修改</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/pagesStore/me/cashSet' })">
+                  <text class="item-label">提现账号</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+              </view>
+            </view>
 
-            <!-- #ifdef APP-PLUS -->
-            <tui-list-cell @click="getHzg()" class="line-cell" :hover="false" :arrow="true">
-              <view class="tui-title">更新APP</view>
-            </tui-list-cell>
+            <!-- 设备配置 -->
+            <view class="settings-category">
+              <view class="category-title">⚙️ 跑腿设置</view>
+              <view class="category-items">
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/sk' })">
+                  <text class="item-label">更多设置</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/delivery/deliveryManage' })">
+                  <text class="item-label">绑定跑腿</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+              </view>
+            </view>
 
-            <tui-list-cell @click="closeApp()" class="line-cell" :hover="false" :arrow="true" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0">
-              <view class="tui-title">关闭APP</view>
-            </tui-list-cell>
-            <!-- #endif -->
-            <tui-list-cell @click="pageTo({ url: '/pagesStore/me/cashSet' })" class="line-cell" :hover="false" :arrow="true" >
-              <view class="tui-title">提现账号</view>
-            </tui-list-cell>
-            <tui-list-cell @click="loginOut()" class="line-cell" :hover="false" :arrow="true" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0">
-              <view class="tui-title">退出登录</view>
-            </tui-list-cell>
+            <!-- 硬件管理 -->
+            <view class="settings-category">
+              <view class="category-title">🖨️ 硬件管理</view>
+              <view class="category-items">
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/print' })">
+                  <text class="item-label">前台小票机</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/trumpet' })">
+                  <text class="item-label">前台云音箱</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/makePrint' })">
+                  <text class="item-label">操作台小票机</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/makeTrumpet' })">
+                  <text class="item-label">操作台云音箱</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/mtPrint' })">
+                  <text class="item-label">美团小票机</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="pageTo({ url: '/admin/shop/mtTrumpet' })">
+                  <text class="item-label">美团云音箱</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+              </view>
+            </view>
 
+            <!-- 应用管理 -->
+            <view class="settings-category">
+              <view class="category-title">📱 应用管理</view>
+              <view class="category-items">
+                <!-- #ifdef APP-PLUS -->
+                <view class="menu-item" @click="getHzg()">
+                  <text class="item-label">更新APP</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <view class="menu-item" @click="closeApp()" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0">
+                  <text class="item-label">关闭APP</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+                <!-- #endif -->
+                <view class="menu-item logout-item" @click="loginOut()" v-if="!$util.isEmpty(getLoginInfo.admin) && getLoginInfo.admin.currentShopId > 0">
+                  <text class="item-label logout-text">退出登录</text>
+                  <i class="iconfont iconxiangyou"></i>
+                </view>
+              </view>
+            </view>
           </view>
         </view>
 
@@ -434,16 +470,33 @@ export default {
           & .top-info_box {
             padding-left: 30upx;
             box-sizing: border-box;
-            & > view:nth-child(1) {
+            flex: 1;
+            & > .shop-name-text {
               color: #333333;
               font-size: 32upx;
               font-weight: 600;
+              display: block;
             }
-            & > view:nth-child(2) {
+            & > .shop-detail-text {
               color: #666666;
               font-size: 26upx;
               font-weight: 400;
               margin-top: 22upx;
+              display: flex;
+              align-items: center;
+              & > text {
+                flex: 1;
+              }
+              & .iconfont {
+                font-size: 24upx;
+                color: #999;
+                margin-left: 12upx;
+              }
+            }
+            & > .login-text {
+              color: #333333;
+              font-size: 40upx;
+              font-weight: 600;
             }
           }
         }
@@ -502,30 +555,68 @@ export default {
     }
   & .account-info_box {
     margin-top: 20upx;
-    padding: 30upx 20upx;
+    padding: 32upx 24upx;
     box-sizing: border-box;
     display: flex;
     & .info-lf_box {
       flex: 1;
-      & > view:nth-child(1),
-      & > view:nth-child(3) {
+      & > .balance-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         font-weight: 400;
-        font-size: 24upx;
-      }
-      & > view:nth-child(1) {
+        font-size: 26upx;
         color: #999999;
+        margin-bottom: 20upx;
+        & .contact-service {
+          font-size: 26upx;
+          color: #049E2C;
+          font-weight: 500;
+        }
       }
-      & > view:nth-child(2) {
-        color: #333333;
-        font-size: 60upx;
-        font-weight: bold;
-        margin: 30upx 0;
-        & > text {
-          font-size: 38upx;
+      & > .balance-amount {
+        display: flex;
+        align-items: baseline;
+        margin-bottom: 28upx;
+        & .currency {
+          font-size: 40upx;
+          color: #333333;
+          font-weight: 600;
+        }
+        & span {
+          font-size: 56upx;
+          color: #333333;
+          font-weight: bold;
+          margin-left: 8upx;
         }
       }
-      & > view:nth-child(3) {
+      & > .balance-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 12upx;
+        font-weight: 400;
+        font-size: 24upx;
         color: #666666;
+        & > text:first-child {
+          flex-basis: 100%;
+          margin-bottom: 8upx;
+        }
+        & .action-btn {
+          border: 1upx solid #e5e5e5;
+          border-radius: 20upx;
+          font-size: 24upx;
+          padding: 8upx 18upx;
+          box-sizing: border-box;
+          color: #666666;
+          
+          &.withdraw-btn {
+            background: #049E2C;
+            color: white;
+            border-color: #049E2C;
+            font-weight: 500;
+          }
+        }
       }
     }
     & > .admin-button-com {
@@ -533,18 +624,76 @@ export default {
       height: 50upx;
       border-radius: 25upx;
     }
-    & .to-cash {
-      border: 1upx solid rgba(0, 0, 0, 0.2);
-      border-radius: 25upx;
-      font-size: 22upx;
-      padding: 6upx 17upx 6upx 17upx;
-      box-sizing: border-box;
-      margin-left:30upx;
-    }
   }
   & .user-open_bx {
     margin-top: 20upx;
     border-radius: 10upx;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    
+    .settings-group {
+      display: flex;
+      flex-direction: column;
+      gap: 16upx;
+      
+      .settings-category {
+        background: #ffffff;
+        border-radius: 12upx;
+        overflow: hidden;
+        box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.04);
+        
+        .category-title {
+          padding: 18upx 24upx;
+          font-size: 26upx;
+          font-weight: 600;
+          color: #333;
+          background: #f8f9fa;
+          border-bottom: 1upx solid #f0f0f0;
+        }
+        
+        .category-items {
+          display: flex;
+          flex-direction: column;
+          
+          .menu-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 18upx 24upx;
+            border-bottom: 1upx solid #f5f5f5;
+            transition: all 0.2s ease;
+            
+            &:last-child {
+              border-bottom: none;
+            }
+            
+            &:active {
+              background: #f9fafb;
+            }
+            
+            &.logout-item {
+              .logout-text {
+                color: #ff6b6b;
+                font-weight: 500;
+              }
+            }
+            
+            .item-label {
+              font-size: 28upx;
+              color: #333;
+              flex: 1;
+            }
+            
+            .iconfont {
+              font-size: 20upx;
+              color: #999;
+              margin-left: 12upx;
+            }
+          }
+        }
+      }
+    }
   }
 }