Update MemberProfileDialog and Dashboard components with improved styling and la…

…yout adjustments. Increased font sizes and padding for better readability, and streamlined the member search input for a cleaner look.

Update MemberProfileDialog and Dashboard components with improved styling and la…
…yout adjustments. Increased font sizes and padding for better readability, and streamlined the member search input for a cleaner look.
“wangming”
1 parent 1c7cb610
Showing 2 changed files with 93 additions and 149 deletions
store-pc/src/components/MemberProfileDialog.vue
store-pc/src/views/dashboard/index.vue
@@ -798,7 +798,7 @@ export default {
   margin-bottom: 10px;
 }
 .member-name {
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 600;
   color: #0f172a;
   letter-spacing: 0.3px;
@@ -807,8 +807,8 @@ export default {
 }
 .level-tag {
   display: inline-block;
-  font-size: 10px;
-  padding: 2px 12px;
+  font-size: 11px;
+  padding: 2px 14px;
   border-radius: 999px;
   font-weight: 600;
   margin-bottom: 8px;
@@ -824,7 +824,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 13px;
   color: #64748b;
   flex-wrap: wrap;
   text-align: center;
@@ -841,7 +841,7 @@ export default {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  font-size: 12px;
+  font-size: 13px;
   color: #64748b;
   margin-bottom: 6px;
   flex-wrap: wrap;
@@ -849,11 +849,11 @@ export default {
 .member-phone {
   color: #16a34a;
   font-weight: 500;
-  i { margin-right: 2px; font-size: 12px; }
+  i { margin-right: 2px; font-size: 13px; }
 }
 .member-dah {
   color: #94a3b8;
-  font-size: 11px;
+  font-size: 12px;
 }
 .member-type-tags {
   display: flex;
@@ -863,9 +863,9 @@ export default {
   margin-bottom: 4px;
 }
 .type-tag {
-  padding: 1px 8px;
+  padding: 2px 10px;
   border-radius: 999px;
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 500;
 }
 .type-tag--beauty {
@@ -892,19 +892,19 @@ export default {
   flex-wrap: wrap;
 }
 .member-visit {
-  font-size: 11px;
+  font-size: 12px;
   color: #94a3b8;
   cursor: default;
-  i { margin-right: 3px; font-size: 11px; }
+  i { margin-right: 3px; font-size: 12px; }
 }
 .member-sleep {
-  font-size: 10px;
-  padding: 1px 8px;
+  font-size: 11px;
+  padding: 2px 8px;
   border-radius: 999px;
   background: rgba(249,115,22,0.1);
   color: #ea580c;
   font-weight: 500;
-  i { margin-right: 2px; font-size: 10px; }
+  i { margin-right: 2px; font-size: 11px; }
 }
 .tag-row {
   margin-top: 8px;
@@ -914,9 +914,9 @@ export default {
   gap: 4px;
 }
 .member-tag {
-  padding: 1px 8px;
+  padding: 2px 8px;
   border-radius: 999px;
-  font-size: 10px;
+  font-size: 11px;
   background: rgba(129,140,248,0.1);
   color: #4f46e5;
   border: 1px solid rgba(129,140,248,0.15);
@@ -928,21 +928,21 @@ export default {
   border-top: 1px solid rgba(226,232,240,0.5);
 }
 .sidebar-section-title {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   color: #64748b;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   gap: 4px;
-  i { font-size: 12px; color: #6366f1; }
+  i { font-size: 13px; color: #6366f1; }
 }
 .sidebar-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 3px 0;
-  min-height: 22px;
+  padding: 4px 0;
+  min-height: 24px;
 }
 .sidebar-row--highlight {
   background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(124,58,237,0.04));
@@ -956,15 +956,15 @@ export default {
 }
 .sidebar-label {
   color: #94a3b8;
-  font-size: 11px;
+  font-size: 12px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  i { margin-right: 3px; font-size: 11px; color: #94a3b8; }
+  i { margin-right: 3px; font-size: 12px; color: #94a3b8; }
 }
 .sidebar-value {
   color: #1e293b;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -973,12 +973,12 @@ export default {
   text-align: right;
 }
 .sidebar-value--amount {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   color: #0f172a;
 }
 .sidebar-value--gradient {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
   background: linear-gradient(135deg, #2563eb, #7c3aed);
   -webkit-background-clip: text;
@@ -1023,14 +1023,14 @@ export default {
   background: transparent;
   padding: 0 8px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 13px;
   color: #4b5563;
   cursor: pointer;
   transition: color 0.25s ease;
   flex: 1 1 0;
   text-align: center;
-  height: 26px;
-  line-height: 26px;
+  height: 30px;
+  line-height: 30px;
   position: relative;
   z-index: 1;
 }
@@ -1053,9 +1053,9 @@ export default {
 .records-search { width: 160px; }
 .records-search ::v-deep .el-input__inner {
   border-radius: 999px;
-  height: 26px;
-  line-height: 26px;
-  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
   border-color: #e2e8f0;
   transition: border-color 0.2s;
   &:focus { border-color: #6366f1; }
@@ -1083,20 +1083,20 @@ export default {
   -ms-overflow-style: none;
   &::-webkit-scrollbar { display: none; }
 }
-.record-table, .rights-table { font-size: 12px; }
+.record-table, .rights-table { font-size: 13px; }
 ::v-deep .el-table {
   &::before { display: none; }
   th {
-    padding: 6px 0;
-    font-size: 11px;
+    padding: 8px 0;
+    font-size: 12px;
     background: #f8fafc;
     color: #64748b;
     font-weight: 500;
     border-bottom: 1px solid #e2e8f0;
   }
   td {
-    padding: 5px 0;
+    padding: 7px 0;
     border-bottom: 1px solid #f1f5f9;
   }
   .el-table__row:hover > td { background: rgba(99,102,241,0.03); }
@@ -1110,7 +1110,7 @@ export default {
 }
 /* ========== 状态胶囊 ========== */
-.status-capsule { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; line-height: 1.6; }
+.status-capsule { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.6; }
 .status--green { background: rgba(34,197,94,0.1); color: #16a34a; }
 .status--orange { background: rgba(249,115,22,0.1); color: #ea580c; }
 .status--red { background: rgba(239,68,68,0.1); color: #dc2626; }
@@ -1134,18 +1134,18 @@ export default {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 3px;
-  min-width: 80px;
-  height: 28px;
-  padding: 0 12px;
+  gap: 4px;
+  min-width: 84px;
+  height: 32px;
+  padding: 0 14px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
-  i { font-size: 12px; }
+  i { font-size: 13px; }
 }
 .records-op-btn--ghost {
   background: rgba(239,246,255,0.9);
@@ -7,14 +7,8 @@
         <div class="store-subtitle">今日邀约 · 预约 · 开单，一眼总览</div>
       </div>
       <div class="member-search">
-        <el-input
-          v-model="memberKeyword"
-          class="member-search-input"
-          clearable
-          placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
-          prefix-icon="el-icon-search"
-          @keyup.enter.native="handleMemberSearch"
-        >
+        <el-input v-model="memberKeyword" class="member-search-input" clearable placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
+          prefix-icon="el-icon-search" @keyup.enter.native="handleMemberSearch">
           <el-button slot="append" type="primary" @click="handleMemberSearch">查询</el-button>
         </el-input>
       </div>
@@ -49,17 +43,9 @@
         <!-- 六大业务板块 -->
         <div class="modules-grid">
           <el-row :gutter="16">
-            <el-col
-              v-for="module in modules"
-              :key="module.key"
-              :span="8"
-            >
-              <el-card
-                shadow="hover"
-                class="module-card"
-                :body-style="{ padding: '18px 18px 16px' }"
-                @click.native="goModule(module)"
-              >
+            <el-col v-for="module in modules" :key="module.key" :span="8">
+              <el-card shadow="hover" class="module-card" :body-style="{ padding: '18px 18px 16px' }"
+                @click.native="handleModuleSecondary(module)">
                 <div class="module-header">
                   <div class="module-title-wrap">
                     <div class="module-title">{{ module.title }}</div>
@@ -74,16 +60,11 @@
                   <div class="meta-label">{{ module.metricLabel }}</div>
                 </div>
                 <div class="module-actions">
-                  <span
-                    class="primary-action"
-                    @click.stop="handleModulePrimary(module)"
-                  >
+                  <span class="primary-action" @click.stop="handleModulePrimary(module)">
                     {{ module.primaryAction }}
                   </span>
-                  <span
-                    class="secondary-text"
-                    @click.stop="handleModuleSecondary(module)"
-                  >{{ module.secondaryText }}</span>
+                  <span class="secondary-text" @click.stop="handleModuleSecondary(module)">{{ module.secondaryText
+                    }}</span>
                 </div>
               </el-card>
             </el-col>
@@ -101,11 +82,7 @@
           <el-tabs v-model="todayTab">
             <el-tab-pane label="今日邀约" name="invite">
               <div v-if="todayInvite.length" class="timeline-list">
-                <div
-                  v-for="item in todayInvite"
-                  :key="item.id"
-                  class="timeline-item"
-                >
+                <div v-for="item in todayInvite" :key="item.id" class="timeline-item">
                   <div class="time">{{ item.time }}</div>
                   <div class="content">
                     <div class="line-main">
@@ -116,11 +93,7 @@
                       <span class="project">
                         电话是否有效：{{ item.dhsfyx }} · {{ item.lxjl }}
                       </span>
-                      <button
-                        type="button"
-                        class="quick-book-btn"
-                        @click="handleQuickBooking(item)"
-                      >
+                      <button type="button" class="quick-book-btn" @click="handleQuickBooking(item)">
                         快速预约
                       </button>
                     </div>
@@ -142,11 +115,7 @@
                       <span class="project">
                         预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
                       </span>
-                      <button
-                        type="button"
-                        class="quick-order-btn"
-                        @click="handleQuickBilling(item)"
-                      >
+                      <button type="button" class="quick-order-btn" @click="handleQuickBilling(item)">
                         快速开单
                       </button>
                     </div>
@@ -159,48 +128,19 @@
         </el-card>
       </div>
     </div>
-    <member-profile-dialog
-      :visible.sync="memberDialogVisible"
-      :member="activeMember || {}"
-    />
-    <tuoke-lead-dialog
-      :visible.sync="tuokeDialogVisible"
-    />
-    <invite-add-dialog
-      :visible.sync="inviteDialogVisible"
-    />
-    <booking-dialog
-      :visible.sync="bookingDialogVisible"
-      :prefill="bookingPrefill"
-    />
-    <billing-dialog
-      :visible.sync="billingDialogVisible"
-      :prefill="billingPrefill"
-    />
-    <consume-dialog
-      :visible.sync="consumeDialogVisible"
-    />
-    <refund-dialog
-      :visible.sync="refundDialogVisible"
-    />
-    <tuoke-list-dialog
-      :visible.sync="tuokeListVisible"
-    />
-    <invite-list-dialog
-      :visible.sync="inviteListVisible"
-    />
-    <booking-calendar-dialog
-      :visible.sync="bookingCalendarVisible"
-    />
-    <billing-list-dialog
-      :visible.sync="billingListVisible"
-    />
-    <consume-list-dialog
-      :visible.sync="consumeListVisible"
-    />
-    <refund-list-dialog
-      :visible.sync="refundListVisible"
-    />
+    <member-profile-dialog :visible.sync="memberDialogVisible" :member="activeMember || {}" />
+    <tuoke-lead-dialog :visible.sync="tuokeDialogVisible" />
+    <invite-add-dialog :visible.sync="inviteDialogVisible" />
+    <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
+    <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
+    <consume-dialog :visible.sync="consumeDialogVisible" />
+    <refund-dialog :visible.sync="refundDialogVisible" />
+    <tuoke-list-dialog :visible.sync="tuokeListVisible" />
+    <invite-list-dialog :visible.sync="inviteListVisible" />
+    <booking-calendar-dialog :visible.sync="bookingCalendarVisible" />
+    <billing-list-dialog :visible.sync="billingListVisible" />
+    <consume-list-dialog :visible.sync="consumeListVisible" />
+    <refund-list-dialog :visible.sync="refundListVisible" />
   </div>
 </template>
@@ -274,9 +214,8 @@ export default {
           iconBg: 'linear-gradient(135deg, #6366f1, #a855f7)',
           metricValue: 0,
           metricLabel: '今日新增潜客',
-          primaryAction: '录入拓客信息',
-          secondaryText: '查看拓客数据',
-          route: '/tuoke'
+          primaryAction: '新建拓客',
+          secondaryText: '查看拓客数据'
         },
         {
           key: 'invite',
@@ -286,9 +225,8 @@ export default {
           iconBg: 'linear-gradient(135deg, #0ea5e9, #22c55e)',
           metricValue: 0,
           metricLabel: '待跟进邀约',
-          primaryAction: '去邀约',
-          secondaryText: '查看邀约记录',
-          route: '/invite'
+          primaryAction: '新建邀约',
+          secondaryText: '查看邀约记录'
         },
         {
           key: 'booking',
@@ -299,8 +237,7 @@ export default {
           metricValue: 0,
           metricLabel: '今日预约',
           primaryAction: '新建预约',
-          secondaryText: '打开预约日历',
-          route: '/booking'
+          secondaryText: '打开预约日历'
         },
         {
           key: 'order',
@@ -311,8 +248,7 @@ export default {
           metricValue: 0,
           metricLabel: '今日开单',
           primaryAction: '新建开单',
-          secondaryText: '查看开单记录',
-          route: '/orders'
+          secondaryText: '查看开单记录'
         },
         {
           key: 'consume',
@@ -323,8 +259,7 @@ export default {
           metricValue: 0,
           metricLabel: '今日消耗人次',
           primaryAction: '新建消耗',
-          secondaryText: '查看消耗记录',
-          route: '/consume'
+          secondaryText: '查看消耗记录'
         },
         {
           key: 'refund',
@@ -335,8 +270,7 @@ export default {
           metricValue: 0,
           metricLabel: '今日退卡',
           primaryAction: '新建退卡',
-          secondaryText: '查看退卡记录',
-          route: '/refund'
+          secondaryText: '查看退卡记录'
         }
       ],
       todayInvite: [
@@ -605,7 +539,6 @@ export default {
         this.refundDialogVisible = true
         return
       }
-      this.goModule(module)
     },
     handleMemberSearch() {
       const keyword = (this.memberKeyword || '').trim()
@@ -726,11 +659,6 @@ export default {
       }
       const key = map[module.key]
       if (key) this[key] = true
-    },
-    goModule(module) {
-      if (module.route) {
-        this.$router.push(module.route)
-      }
     }
   }
 }
@@ -759,6 +687,7 @@ export default {
     color: #111827;
     letter-spacing: 0.5px;
   }
+
   .store-subtitle {
     margin-top: 4px;
     font-size: 13px;
@@ -774,6 +703,7 @@ export default {
     padding: 0 20px;
     border-radius: 0 999px 999px 0;
   }
+
   ::v-deep .el-input__inner {
     border-radius: 999px 0 0 999px;
     padding-left: 40px;
@@ -849,10 +779,12 @@ export default {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 4px;
+
   .label {
     font-size: 13px;
     color: #6b7280;
   }
+
   .tag {
     font-size: 11px;
     padding: 2px 8px;
@@ -900,6 +832,7 @@ export default {
     font-weight: 600;
     color: #111827;
   }
+
   .module-subtitle {
     margin-top: 2px;
     font-size: 12px;
@@ -915,6 +848,7 @@ export default {
   align-items: center;
   justify-content: center;
   color: #fff;
+
   i {
     font-size: 20px;
   }
@@ -922,11 +856,13 @@ export default {
 .module-meta {
   margin-top: 8px;
+
   .meta-value {
     font-size: 22px;
     font-weight: 600;
     color: #111827;
   }
+
   .meta-label {
     margin-top: 2px;
     font-size: 12px;
@@ -939,6 +875,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   .primary-action {
     display: inline-flex;
     align-items: center;
@@ -953,11 +890,13 @@ export default {
     font-weight: 500;
     box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
   }
+
   .secondary-text {
     font-size: 12px;
     color: #9ca3af;
     cursor: pointer;
     transition: color 0.15s;
+
     &:hover {
       color: #2563eb;
     }
@@ -990,8 +929,7 @@ export default {
   color: #2563eb;
 }
-.timeline-list {
-}
+.timeline-list {}
 .timeline-item {
   display: grid;
@@ -1001,7 +939,7 @@ export default {
   font-size: 12px;
 }
-.timeline-item + .timeline-item {
+.timeline-item+.timeline-item {
   border-top: 1px dashed #e5e7eb;
 }
@@ -1015,20 +953,24 @@ export default {
     display: flex;
     align-items: center;
     gap: 6px;
+
     .name {
       color: #111827;
       font-weight: 500;
     }
+
     .mobile {
       color: #6b7280;
     }
   }
+
   .line-sub {
     margin-top: 2px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+
     .project {
       color: #6b7280;
       flex: 1;
@@ -1110,10 +1052,12 @@ export default {
   .dashboard-page {
     padding: 16px;
   }
+
   .top-bar {
     grid-template-columns: minmax(0, 1fr);
     row-gap: 12px;
   }
+
   .layout-grid {
     grid-template-columns: minmax(0, 1fr);
   }