antissoft / lvqianmeiye_ERP

Commit ed6ada0d5a6a4fbba4dcf93867a2cf908e181745

Authored by “wangming”
1 parent 1c7cb610

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.
Inline Side-by-side
Showing 2 changed files with 93 additions and 149 deletions
store-pc/src/components/MemberProfileDialog.vue
  View file @ed6ada0
... ... @@ -798,7 +798,7 @@ export default {
798 798 margin-bottom: 10px;
799 799 }
800 800 .member-name {
801   - font-size: 16px;
  801 + font-size: 17px;
802 802 font-weight: 600;
803 803 color: #0f172a;
804 804 letter-spacing: 0.3px;
... ... @@ -807,8 +807,8 @@ export default {
807 807 }
808 808 .level-tag {
809 809 display: inline-block;
810   - font-size: 10px;
811   - padding: 2px 12px;
  810 + font-size: 11px;
  811 + padding: 2px 14px;
812 812 border-radius: 999px;
813 813 font-weight: 600;
814 814 margin-bottom: 8px;
... ... @@ -824,7 +824,7 @@ export default {
824 824 display: flex;
825 825 align-items: center;
826 826 justify-content: center;
827   - font-size: 12px;
  827 + font-size: 13px;
828 828 color: #64748b;
829 829 flex-wrap: wrap;
830 830 text-align: center;
... ... @@ -841,7 +841,7 @@ export default {
841 841 align-items: center;
842 842 justify-content: center;
843 843 gap: 8px;
844   - font-size: 12px;
  844 + font-size: 13px;
845 845 color: #64748b;
846 846 margin-bottom: 6px;
847 847 flex-wrap: wrap;
... ... @@ -849,11 +849,11 @@ export default {
849 849 .member-phone {
850 850 color: #16a34a;
851 851 font-weight: 500;
852   - i { margin-right: 2px; font-size: 12px; }
  852 + i { margin-right: 2px; font-size: 13px; }
853 853 }
854 854 .member-dah {
855 855 color: #94a3b8;
856   - font-size: 11px;
  856 + font-size: 12px;
857 857 }
858 858 .member-type-tags {
859 859 display: flex;
... ... @@ -863,9 +863,9 @@ export default {
863 863 margin-bottom: 4px;
864 864 }
865 865 .type-tag {
866   - padding: 1px 8px;
  866 + padding: 2px 10px;
867 867 border-radius: 999px;
868   - font-size: 10px;
  868 + font-size: 11px;
869 869 font-weight: 500;
870 870 }
871 871 .type-tag--beauty {
... ... @@ -892,19 +892,19 @@ export default {
892 892 flex-wrap: wrap;
893 893 }
894 894 .member-visit {
895   - font-size: 11px;
  895 + font-size: 12px;
896 896 color: #94a3b8;
897 897 cursor: default;
898   - i { margin-right: 3px; font-size: 11px; }
  898 + i { margin-right: 3px; font-size: 12px; }
899 899 }
900 900 .member-sleep {
901   - font-size: 10px;
902   - padding: 1px 8px;
  901 + font-size: 11px;
  902 + padding: 2px 8px;
903 903 border-radius: 999px;
904 904 background: rgba(249,115,22,0.1);
905 905 color: #ea580c;
906 906 font-weight: 500;
907   - i { margin-right: 2px; font-size: 10px; }
  907 + i { margin-right: 2px; font-size: 11px; }
908 908 }
909 909 .tag-row {
910 910 margin-top: 8px;
... ... @@ -914,9 +914,9 @@ export default {
914 914 gap: 4px;
915 915 }
916 916 .member-tag {
917   - padding: 1px 8px;
  917 + padding: 2px 8px;
918 918 border-radius: 999px;
919   - font-size: 10px;
  919 + font-size: 11px;
920 920 background: rgba(129,140,248,0.1);
921 921 color: #4f46e5;
922 922 border: 1px solid rgba(129,140,248,0.15);
... ... @@ -928,21 +928,21 @@ export default {
928 928 border-top: 1px solid rgba(226,232,240,0.5);
929 929 }
930 930 .sidebar-section-title {
931   - font-size: 12px;
  931 + font-size: 13px;
932 932 font-weight: 600;
933 933 color: #64748b;
934 934 margin-bottom: 6px;
935 935 display: flex;
936 936 align-items: center;
937 937 gap: 4px;
938   - i { font-size: 12px; color: #6366f1; }
  938 + i { font-size: 13px; color: #6366f1; }
939 939 }
940 940 .sidebar-row {
941 941 display: flex;
942 942 justify-content: space-between;
943 943 align-items: center;
944   - padding: 3px 0;
945   - min-height: 22px;
  944 + padding: 4px 0;
  945 + min-height: 24px;
946 946 }
947 947 .sidebar-row--highlight {
948 948 background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(124,58,237,0.04));
... ... @@ -956,15 +956,15 @@ export default {
956 956 }
957 957 .sidebar-label {
958 958 color: #94a3b8;
959   - font-size: 11px;
  959 + font-size: 12px;
960 960 flex-shrink: 0;
961 961 display: flex;
962 962 align-items: center;
963   - i { margin-right: 3px; font-size: 11px; color: #94a3b8; }
  963 + i { margin-right: 3px; font-size: 12px; color: #94a3b8; }
964 964 }
965 965 .sidebar-value {
966 966 color: #1e293b;
967   - font-size: 12px;
  967 + font-size: 13px;
968 968 font-weight: 500;
969 969 overflow: hidden;
970 970 text-overflow: ellipsis;
... ... @@ -973,12 +973,12 @@ export default {
973 973 text-align: right;
974 974 }
975 975 .sidebar-value--amount {
976   - font-size: 13px;
  976 + font-size: 14px;
977 977 font-weight: 600;
978 978 color: #0f172a;
979 979 }
980 980 .sidebar-value--gradient {
981   - font-size: 14px;
  981 + font-size: 15px;
982 982 font-weight: 700;
983 983 background: linear-gradient(135deg, #2563eb, #7c3aed);
984 984 -webkit-background-clip: text;
... ... @@ -1023,14 +1023,14 @@ export default {
1023 1023 background: transparent;
1024 1024 padding: 0 8px;
1025 1025 border-radius: 999px;
1026   - font-size: 12px;
  1026 + font-size: 13px;
1027 1027 color: #4b5563;
1028 1028 cursor: pointer;
1029 1029 transition: color 0.25s ease;
1030 1030 flex: 1 1 0;
1031 1031 text-align: center;
1032   - height: 26px;
1033   - line-height: 26px;
  1032 + height: 30px;
  1033 + line-height: 30px;
1034 1034 position: relative;
1035 1035 z-index: 1;
1036 1036 }
... ... @@ -1053,9 +1053,9 @@ export default {
1053 1053 .records-search { width: 160px; }
1054 1054 .records-search ::v-deep .el-input__inner {
1055 1055 border-radius: 999px;
1056   - height: 26px;
1057   - line-height: 26px;
1058   - font-size: 12px;
  1056 + height: 30px;
  1057 + line-height: 30px;
  1058 + font-size: 13px;
1059 1059 border-color: #e2e8f0;
1060 1060 transition: border-color 0.2s;
1061 1061 &:focus { border-color: #6366f1; }
... ... @@ -1083,20 +1083,20 @@ export default {
1083 1083 -ms-overflow-style: none;
1084 1084 &::-webkit-scrollbar { display: none; }
1085 1085 }
1086   -.record-table, .rights-table { font-size: 12px; }
  1086 +.record-table, .rights-table { font-size: 13px; }
1087 1087  
1088 1088 ::v-deep .el-table {
1089 1089 &::before { display: none; }
1090 1090 th {
1091   - padding: 6px 0;
1092   - font-size: 11px;
  1091 + padding: 8px 0;
  1092 + font-size: 12px;
1093 1093 background: #f8fafc;
1094 1094 color: #64748b;
1095 1095 font-weight: 500;
1096 1096 border-bottom: 1px solid #e2e8f0;
1097 1097 }
1098 1098 td {
1099   - padding: 5px 0;
  1099 + padding: 7px 0;
1100 1100 border-bottom: 1px solid #f1f5f9;
1101 1101 }
1102 1102 .el-table__row:hover > td { background: rgba(99,102,241,0.03); }
... ... @@ -1110,7 +1110,7 @@ export default {
1110 1110 }
1111 1111  
1112 1112 /* ========== 状态胶囊 ========== */
1113   -.status-capsule { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; line-height: 1.6; }
  1113 +.status-capsule { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.6; }
1114 1114 .status--green { background: rgba(34,197,94,0.1); color: #16a34a; }
1115 1115 .status--orange { background: rgba(249,115,22,0.1); color: #ea580c; }
1116 1116 .status--red { background: rgba(239,68,68,0.1); color: #dc2626; }
... ... @@ -1134,18 +1134,18 @@ export default {
1134 1134 display: inline-flex;
1135 1135 align-items: center;
1136 1136 justify-content: center;
1137   - gap: 3px;
1138   - min-width: 80px;
1139   - height: 28px;
1140   - padding: 0 12px;
  1137 + gap: 4px;
  1138 + min-width: 84px;
  1139 + height: 32px;
  1140 + padding: 0 14px;
1141 1141 border-radius: 999px;
1142   - font-size: 12px;
  1142 + font-size: 13px;
1143 1143 font-weight: 500;
1144 1144 cursor: pointer;
1145 1145 position: relative;
1146 1146 overflow: hidden;
1147 1147 transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
1148   - i { font-size: 12px; }
  1148 + i { font-size: 13px; }
1149 1149 }
1150 1150 .records-op-btn--ghost {
1151 1151 background: rgba(239,246,255,0.9);
... ...
store-pc/src/views/dashboard/index.vue
  View file @ed6ada0
... ... @@ -7,14 +7,8 @@
7 7 <div class="store-subtitle">今日邀约 · 预约 · 开单，一眼总览</div>
8 8 </div>
9 9 <div class="member-search">
10   - <el-input
11   - v-model="memberKeyword"
12   - class="member-search-input"
13   - clearable
14   - placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
15   - prefix-icon="el-icon-search"
16   - @keyup.enter.native="handleMemberSearch"
17   - >
  10 + <el-input v-model="memberKeyword" class="member-search-input" clearable placeholder="快速查询会员：手机号 / 姓名 / 会员卡号"
  11 + prefix-icon="el-icon-search" @keyup.enter.native="handleMemberSearch">
18 12 <el-button slot="append" type="primary" @click="handleMemberSearch">查询</el-button>
19 13 </el-input>
20 14 </div>
... ... @@ -49,17 +43,9 @@
49 43 <!-- 六大业务板块 -->
50 44 <div class="modules-grid">
51 45 <el-row :gutter="16">
52   - <el-col
53   - v-for="module in modules"
54   - :key="module.key"
55   - :span="8"
56   - >
57   - <el-card
58   - shadow="hover"
59   - class="module-card"
60   - :body-style="{ padding: '18px 18px 16px' }"
61   - @click.native="goModule(module)"
62   - >
  46 + <el-col v-for="module in modules" :key="module.key" :span="8">
  47 + <el-card shadow="hover" class="module-card" :body-style="{ padding: '18px 18px 16px' }"
  48 + @click.native="handleModuleSecondary(module)">
63 49 <div class="module-header">
64 50 <div class="module-title-wrap">
65 51 <div class="module-title">{{ module.title }}</div>
... ... @@ -74,16 +60,11 @@
74 60 <div class="meta-label">{{ module.metricLabel }}</div>
75 61 </div>
76 62 <div class="module-actions">
77   - <span
78   - class="primary-action"
79   - @click.stop="handleModulePrimary(module)"
80   - >
  63 + <span class="primary-action" @click.stop="handleModulePrimary(module)">
81 64 {{ module.primaryAction }}
82 65 </span>
83   - <span
84   - class="secondary-text"
85   - @click.stop="handleModuleSecondary(module)"
86   - >{{ module.secondaryText }}</span>
  66 + <span class="secondary-text" @click.stop="handleModuleSecondary(module)">{{ module.secondaryText
  67 + }}</span>
87 68 </div>
88 69 </el-card>
89 70 </el-col>
... ... @@ -101,11 +82,7 @@
101 82 <el-tabs v-model="todayTab">
102 83 <el-tab-pane label="今日邀约" name="invite">
103 84 <div v-if="todayInvite.length" class="timeline-list">
104   - <div
105   - v-for="item in todayInvite"
106   - :key="item.id"
107   - class="timeline-item"
108   - >
  85 + <div v-for="item in todayInvite" :key="item.id" class="timeline-item">
109 86 <div class="time">{{ item.time }}</div>
110 87 <div class="content">
111 88 <div class="line-main">
... ... @@ -116,11 +93,7 @@
116 93 <span class="project">
117 94 电话是否有效：{{ item.dhsfyx }} · {{ item.lxjl }}
118 95 </span>
119   - <button
120   - type="button"
121   - class="quick-book-btn"
122   - @click="handleQuickBooking(item)"
123   - >
  96 + <button type="button" class="quick-book-btn" @click="handleQuickBooking(item)">
124 97 快速预约
125 98 </button>
126 99 </div>
... ... @@ -142,11 +115,7 @@
142 115 <span class="project">
143 116 预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
144 117 </span>
145   - <button
146   - type="button"
147   - class="quick-order-btn"
148   - @click="handleQuickBilling(item)"
149   - >
  118 + <button type="button" class="quick-order-btn" @click="handleQuickBilling(item)">
150 119 快速开单
151 120 </button>
152 121 </div>
... ... @@ -159,48 +128,19 @@
159 128 </el-card>
160 129 </div>
161 130 </div>
162   - <member-profile-dialog
163   - :visible.sync="memberDialogVisible"
164   - :member="activeMember || {}"
165   - />
166   - <tuoke-lead-dialog
167   - :visible.sync="tuokeDialogVisible"
168   - />
169   - <invite-add-dialog
170   - :visible.sync="inviteDialogVisible"
171   - />
172   - <booking-dialog
173   - :visible.sync="bookingDialogVisible"
174   - :prefill="bookingPrefill"
175   - />
176   - <billing-dialog
177   - :visible.sync="billingDialogVisible"
178   - :prefill="billingPrefill"
179   - />
180   - <consume-dialog
181   - :visible.sync="consumeDialogVisible"
182   - />
183   - <refund-dialog
184   - :visible.sync="refundDialogVisible"
185   - />
186   - <tuoke-list-dialog
187   - :visible.sync="tuokeListVisible"
188   - />
189   - <invite-list-dialog
190   - :visible.sync="inviteListVisible"
191   - />
192   - <booking-calendar-dialog
193   - :visible.sync="bookingCalendarVisible"
194   - />
195   - <billing-list-dialog
196   - :visible.sync="billingListVisible"
197   - />
198   - <consume-list-dialog
199   - :visible.sync="consumeListVisible"
200   - />
201   - <refund-list-dialog
202   - :visible.sync="refundListVisible"
203   - />
  131 + <member-profile-dialog :visible.sync="memberDialogVisible" :member="activeMember || {}" />
  132 + <tuoke-lead-dialog :visible.sync="tuokeDialogVisible" />
  133 + <invite-add-dialog :visible.sync="inviteDialogVisible" />
  134 + <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
  135 + <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
  136 + <consume-dialog :visible.sync="consumeDialogVisible" />
  137 + <refund-dialog :visible.sync="refundDialogVisible" />
  138 + <tuoke-list-dialog :visible.sync="tuokeListVisible" />
  139 + <invite-list-dialog :visible.sync="inviteListVisible" />
  140 + <booking-calendar-dialog :visible.sync="bookingCalendarVisible" />
  141 + <billing-list-dialog :visible.sync="billingListVisible" />
  142 + <consume-list-dialog :visible.sync="consumeListVisible" />
  143 + <refund-list-dialog :visible.sync="refundListVisible" />
204 144 </div>
205 145 </template>
206 146  
... ... @@ -274,9 +214,8 @@ export default {
274 214 iconBg: 'linear-gradient(135deg, #6366f1, #a855f7)',
275 215 metricValue: 0,
276 216 metricLabel: '今日新增潜客',
277   - primaryAction: '录入拓客信息',
278   - secondaryText: '查看拓客数据',
279   - route: '/tuoke'
  217 + primaryAction: '新建拓客',
  218 + secondaryText: '查看拓客数据'
280 219 },
281 220 {
282 221 key: 'invite',
... ... @@ -286,9 +225,8 @@ export default {
286 225 iconBg: 'linear-gradient(135deg, #0ea5e9, #22c55e)',
287 226 metricValue: 0,
288 227 metricLabel: '待跟进邀约',
289   - primaryAction: '去邀约',
290   - secondaryText: '查看邀约记录',
291   - route: '/invite'
  228 + primaryAction: '新建邀约',
  229 + secondaryText: '查看邀约记录'
292 230 },
293 231 {
294 232 key: 'booking',
... ... @@ -299,8 +237,7 @@ export default {
299 237 metricValue: 0,
300 238 metricLabel: '今日预约',
301 239 primaryAction: '新建预约',
302   - secondaryText: '打开预约日历',
303   - route: '/booking'
  240 + secondaryText: '打开预约日历'
304 241 },
305 242 {
306 243 key: 'order',
... ... @@ -311,8 +248,7 @@ export default {
311 248 metricValue: 0,
312 249 metricLabel: '今日开单',
313 250 primaryAction: '新建开单',
314   - secondaryText: '查看开单记录',
315   - route: '/orders'
  251 + secondaryText: '查看开单记录'
316 252 },
317 253 {
318 254 key: 'consume',
... ... @@ -323,8 +259,7 @@ export default {
323 259 metricValue: 0,
324 260 metricLabel: '今日消耗人次',
325 261 primaryAction: '新建消耗',
326   - secondaryText: '查看消耗记录',
327   - route: '/consume'
  262 + secondaryText: '查看消耗记录'
328 263 },
329 264 {
330 265 key: 'refund',
... ... @@ -335,8 +270,7 @@ export default {
335 270 metricValue: 0,
336 271 metricLabel: '今日退卡',
337 272 primaryAction: '新建退卡',
338   - secondaryText: '查看退卡记录',
339   - route: '/refund'
  273 + secondaryText: '查看退卡记录'
340 274 }
341 275 ],
342 276 todayInvite: [
... ... @@ -605,7 +539,6 @@ export default {
605 539 this.refundDialogVisible = true
606 540 return
607 541 }
608   - this.goModule(module)
609 542 },
610 543 handleMemberSearch() {
611 544 const keyword = (this.memberKeyword || '').trim()
... ... @@ -726,11 +659,6 @@ export default {
726 659 }
727 660 const key = map[module.key]
728 661 if (key) this[key] = true
729   - },
730   - goModule(module) {
731   - if (module.route) {
732   - this.$router.push(module.route)
733   - }
734 662 }
735 663 }
736 664 }
... ... @@ -759,6 +687,7 @@ export default {
759 687 color: #111827;
760 688 letter-spacing: 0.5px;
761 689 }
  690 +
762 691 .store-subtitle {
763 692 margin-top: 4px;
764 693 font-size: 13px;
... ... @@ -774,6 +703,7 @@ export default {
774 703 padding: 0 20px;
775 704 border-radius: 0 999px 999px 0;
776 705 }
  706 +
777 707 ::v-deep .el-input__inner {
778 708 border-radius: 999px 0 0 999px;
779 709 padding-left: 40px;
... ... @@ -849,10 +779,12 @@ export default {
849 779 align-items: center;
850 780 justify-content: space-between;
851 781 margin-bottom: 4px;
  782 +
852 783 .label {
853 784 font-size: 13px;
854 785 color: #6b7280;
855 786 }
  787 +
856 788 .tag {
857 789 font-size: 11px;
858 790 padding: 2px 8px;
... ... @@ -900,6 +832,7 @@ export default {
900 832 font-weight: 600;
901 833 color: #111827;
902 834 }
  835 +
903 836 .module-subtitle {
904 837 margin-top: 2px;
905 838 font-size: 12px;
... ... @@ -915,6 +848,7 @@ export default {
915 848 align-items: center;
916 849 justify-content: center;
917 850 color: #fff;
  851 +
918 852 i {
919 853 font-size: 20px;
920 854 }
... ... @@ -922,11 +856,13 @@ export default {
922 856  
923 857 .module-meta {
924 858 margin-top: 8px;
  859 +
925 860 .meta-value {
926 861 font-size: 22px;
927 862 font-weight: 600;
928 863 color: #111827;
929 864 }
  865 +
930 866 .meta-label {
931 867 margin-top: 2px;
932 868 font-size: 12px;
... ... @@ -939,6 +875,7 @@ export default {
939 875 display: flex;
940 876 align-items: center;
941 877 justify-content: space-between;
  878 +
942 879 .primary-action {
943 880 display: inline-flex;
944 881 align-items: center;
... ... @@ -953,11 +890,13 @@ export default {
953 890 font-weight: 500;
954 891 box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
955 892 }
  893 +
956 894 .secondary-text {
957 895 font-size: 12px;
958 896 color: #9ca3af;
959 897 cursor: pointer;
960 898 transition: color 0.15s;
  899 +
961 900 &:hover {
962 901 color: #2563eb;
963 902 }
... ... @@ -990,8 +929,7 @@ export default {
990 929 color: #2563eb;
991 930 }
992 931  
993   -.timeline-list {
994   -}
  932 +.timeline-list {}
995 933  
996 934 .timeline-item {
997 935 display: grid;
... ... @@ -1001,7 +939,7 @@ export default {
1001 939 font-size: 12px;
1002 940 }
1003 941  
1004   -.timeline-item + .timeline-item {
  942 +.timeline-item+.timeline-item {
1005 943 border-top: 1px dashed #e5e7eb;
1006 944 }
1007 945  
... ... @@ -1015,20 +953,24 @@ export default {
1015 953 display: flex;
1016 954 align-items: center;
1017 955 gap: 6px;
  956 +
1018 957 .name {
1019 958 color: #111827;
1020 959 font-weight: 500;
1021 960 }
  961 +
1022 962 .mobile {
1023 963 color: #6b7280;
1024 964 }
1025 965 }
  966 +
1026 967 .line-sub {
1027 968 margin-top: 2px;
1028 969 display: flex;
1029 970 align-items: center;
1030 971 justify-content: space-between;
1031 972 gap: 8px;
  973 +
1032 974 .project {
1033 975 color: #6b7280;
1034 976 flex: 1;
... ... @@ -1110,10 +1052,12 @@ export default {
1110 1052 .dashboard-page {
1111 1053 padding: 16px;
1112 1054 }
  1055 +
1113 1056 .top-bar {
1114 1057 grid-template-columns: minmax(0, 1fr);
1115 1058 row-gap: 12px;
1116 1059 }
  1060 +
1117 1061 .layout-grid {
1118 1062 grid-template-columns: minmax(0, 1fr);
1119 1063 }
... ...