Parcourir la source

style: 第二轮token覆盖——剩余页面与内联样式全部对齐青调色板

预约/搜索/卡包/优惠券/收藏/个人信息/发票/FAQ等页面残余 rgba(0,0,0,x) 黑系与 #f0f0f0/#f5f5f5 灰系统一替换为青调中性色 token;图标色、分隔线、遮罩、描边全部收敛
skyline il y a 3 semaines
Parent
commit
8402942948

+ 1 - 1
charge-front/src/components/charge-station/charge-station.vue

@@ -23,7 +23,7 @@
         <view v-if="tag">
           <view class="flex-center tag">{{ tagMap[tag] }}</view>
         </view>
-        <view v-else @click.stop="detail" class="fs-22" style="color: rgba(0, 0, 0, 0.5)"
+        <view v-else @click.stop="detail" class="fs-22" style="color: #8c9997"
         >{{ address }} | {{ fmtDistance(distance) }}km
         </view
         >

+ 1 - 1
charge-front/src/components/shadow-card/shadow-card.vue

@@ -64,7 +64,7 @@ export default {
     .label {
       width: 156rpx;
       flex-shrink: 0;
-      color: rgba(0, 0, 0, 0.4);
+      color: #8c9997;
       font-size: 26rpx;
     }
 

+ 1 - 1
charge-front/src/components/style-result/style-result.vue

@@ -44,7 +44,7 @@ export default {
   &_tip {
     width: 370rpx;
     margin-top: 16rpx;
-    color: rgba(0, 0, 0, 0.6);
+    color: #5c6b69;
     text-align: center;
     font-size: 26rpx;
     font-weight: 400;

+ 10 - 10
charge-front/src/pages-charge/appointment/appointment.vue

@@ -30,7 +30,7 @@
         </view
         >
         <view class="ml-auto">
-          <uni-icons type="right" size="16" color="rgba(0,0,0,0.4)"></uni-icons>
+          <uni-icons type="right" size="16" color="rgba(28,43,41,0.4)"></uni-icons>
         </view>
       </view>
       <template v-if="appointmentData">
@@ -59,7 +59,7 @@
         <view class="mt-40 flex-center">
           <view
               class="flex-center height-68 br-68 fs-26 color-666"
-              style="width: 184rpx; border: 1px solid rgba(0, 0, 0, 0.3)"
+              style="width: 184rpx; border: 1px solid #c9d4d2"
               @click="cancelAppointment"
           >取消预约
           </view
@@ -74,7 +74,7 @@
               :key="index"
               :class="['pt-40', 'pb-40', 'flex-align-center']"
               :style="{
-              borderTop: index === 0 ? '' : '1rpx solid rgba(0, 0, 0, 0.10)',
+              borderTop: index === 0 ? '' : '1rpx solid var(--divider)',
             }"
               @click="changeType(index)"
           >
@@ -100,7 +100,7 @@
         <view class="mt-20 block pl-30 pr-30" v-if="chargeType === 0">
           <view
               class="pt-40 pb-40 flex-between"
-              style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
+              style="border-bottom: 1rpx solid var(--divider)"
               @click="selectTime"
           >
             <view class="fs-28 color-000 fw-500">充电时间</view>
@@ -223,8 +223,8 @@
           <view
               class="flex-center fs-24 fw-500"
               :style="isLowBalance
-                  ? 'height: 56rpx; border-radius: 56rpx; background-color: #f43636; color: #fff; padding: 0 28rpx;'
-                  : 'height: 56rpx; border-radius: 56rpx; border: 1rpx solid rgba(0, 0, 0, 0.15); color: #666; padding: 0 28rpx;'"
+                  ? 'height: 56rpx; border-radius: 56rpx; background-color: var(--color-error); color: #fff; padding: 0 28rpx;'
+                  : 'height: 56rpx; border-radius: 56rpx; border: 1rpx solid #c9d4d2; color: #666; padding: 0 28rpx;'"
           >去充值
           </view
           >
@@ -269,10 +269,10 @@
         '请选择' + (chargeTime.isPowerSaving ? '省电模式' : '') + '充电时间'
       "
     >
-      <view class="flex" style="border-top: 1rpx solid rgba(0, 0, 0, 0.1)">
+      <view class="flex" style="border-top: 1rpx solid var(--divider)">
         <view
             class="flex-shrink"
-            style="height: 840rpx; width: 256rpx; background-color: #f0f0f0"
+            style="height: 840rpx; width: 256rpx; background-color: var(--color-sec)"
         >
           <view
               class="flex-align-center pl-32 height-90"
@@ -295,7 +295,7 @@
             >
             <view
                 class="fs-24 color-666 ml-12 br-8 width-60 height-40 flex-center"
-                style="background-color: rgba(0, 0, 0, 0.07)"
+                style="background-color: rgba(28, 43, 41, 0.06)"
                 v-if="day.year && day.format !== chargeTime.day"
             >{{ day.year }}年
             </view
@@ -1015,7 +1015,7 @@ onShow(() => {
 
 .station {
   height: 148rpx;
-  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1rpx solid var(--divider);
 }
 
 .hour-placeholder {

+ 1 - 1
charge-front/src/pages-charge/card/card.vue

@@ -63,7 +63,7 @@
                         class="right flex-center"
                         :style="{
                       width: '210rpx',
-                      borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+                      borderLeft: '1px dashed rgba(28, 43, 41, 0.08)',
                     }"
                     >
                       <view class="btn flex-center fs-28" @click.stop="toCharge(index)"

+ 1 - 1
charge-front/src/pages-charge/discount/discount.vue

@@ -61,7 +61,7 @@
           class="right flex-center"
           :style="{
             width: '210rpx',
-            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+            borderLeft: '1px dashed rgba(28, 43, 41, 0.08)',
           }"
         >
           <view class="btn flex-center fs-28" @click.stop="toCharge(index)"

+ 1 - 1
charge-front/src/pages-charge/machines/machines.vue

@@ -74,7 +74,7 @@
             <uni-icons
                 type="right"
                 size="18"
-                color="rgba(0,0,0,0.4)"
+                color="rgba(28,43,41,0.4)"
             ></uni-icons>
           </view>
         </view>

+ 4 - 4
charge-front/src/pages-charge/machines/price-desc/price-desc.vue

@@ -15,13 +15,13 @@
             <view class="th flex-center fs-28">时间</view>
             <view class="th flex-center flex-column">
               <view>电费</view>
-              <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
+              <view class="fs-24 lh-24" style="color: #8c9997"
                 >(元/kwh)</view
               >
             </view>
             <view class="th flex-center flex-column">
               <view>服务费</view>
-              <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
+              <view class="fs-24 lh-24" style="color: #8c9997"
                 >(元/kwh)</view
               >
             </view>
@@ -176,11 +176,11 @@ export default defineComponent({
       border-bottom: 1rpx solid #e5e5e5;
       background-color: #f1f6ff;
       height: 92rpx;
-      color: rgba(0, 0, 0, 0.7);
+      color: #5c6b69;
       font-size: 28rpx;
 
       view {
-        color: rgba(0, 0, 0, 0.7);
+        color: #5c6b69;
         font-size: 28rpx;
       }
     }

+ 2 - 2
charge-front/src/pages-charge/order/order.vue

@@ -439,11 +439,11 @@ onLoad((options: any) => {
 }
 
 .border-b {
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid var(--divider);
 }
 
 .border-t {
-  border-top: 1rpx solid #f0f0f0;
+  border-top: 1rpx solid var(--divider);
 }
 
 .border-eee {

+ 1 - 1
charge-front/src/pages-charge/orders/orders.vue

@@ -77,7 +77,7 @@
       <view class="foot flex-align-center" v-if="!isInvoice">
         <view
           class="flex-center ml-auto mr-40 height-72 br-72"
-          style="width: 176rpx; border: 1rpx solid rgba(0, 0, 0, 0.2)"
+          style="width: 176rpx; border: 1rpx solid #c9d4d2"
           @click="openInvoice"
         >
           <view class="fs-28 color-333 mr-12">开发票</view>

+ 3 - 3
charge-front/src/pages-charge/search/search.vue

@@ -17,7 +17,7 @@
       :style="searchStyle"
   >
     <view class="search_icon flex-center flex-shrink">
-      <icon type="search" size="18" color="rgba(0,0,0,0.3)"></icon>
+      <icon type="search" size="18" color="#a9b6b4"></icon>
     </view>
     <input
         class="search_input flex-grow"
@@ -165,7 +165,7 @@ const search = function () {
   }
 
   .input-placeholder {
-    color: rgba(0, 0, 0, 0.3);
+    color: #a9b6b4;
   }
 
   &_close {
@@ -187,7 +187,7 @@ const search = function () {
 
   .tip {
     font-size: 24rpx;
-    color: rgba(0, 0, 0, 0.4);
+    color: #8c9997;
     margin-top: 20rpx;
   }
 }

+ 3 - 3
charge-front/src/pages-common/faq/faq.vue

@@ -4,7 +4,7 @@
       ><uni-icons
         type="spinner-cycle"
         size="20"
-        color="rgba(0, 0, 0, 0.5)"
+        color="rgba(28,43,41,0.5)"
       ></uni-icons
     ></view>
     <view class="sheet">
@@ -21,7 +21,7 @@
               <uni-icons
                 type="bottom"
                 size="18"
-                color="rgba(0,0,0,0.4)"
+                color="rgba(28,43,41,0.4)"
               ></uni-icons>
             </view>
           </view>
@@ -118,7 +118,7 @@ onLoad((options) => {
       padding: 0rpx 24rpx;
       box-sizing: border-box;
       & > view {
-        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+        border-bottom: 1rpx solid var(--divider);
       }
     }
     .body {

+ 2 - 2
charge-front/src/pages-common/invoice/invoice-form.vue

@@ -261,7 +261,7 @@ const submit = () => {
 
 .summary-bar {
   background-color: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid var(--divider);
 }
 
 .block {
@@ -367,7 +367,7 @@ const submit = () => {
   right: 0;
   height: 120rpx;
   padding-bottom: env(safe-area-inset-bottom);
-  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+  box-shadow: 0 -2rpx 12rpx rgba(28, 43, 41, 0.05);
 }
 
 .submit-btn {

+ 2 - 2
charge-front/src/pages-user/collect/collect.vue

@@ -20,7 +20,7 @@
 
   <view
     class="pt-40 flex-center fs-30"
-    style="color: rgba(0, 0, 0, 0.6)"
+    style="color: #5c6b69"
     v-if="list && list.length <= 0"
     >暂无数据</view
   >
@@ -72,6 +72,6 @@ onLoad(() => {
 
 <style lang="scss">
 page {
-  background-color: #f5f5f5;
+  background-color: var(--bg-page);
 }
 </style>

+ 7 - 7
charge-front/src/pages-user/invoice-title.vue

@@ -44,7 +44,7 @@
 
     <!-- 空状态 -->
     <view class="empty-state" v-else>
-      <uni-icons type="compose" size="64" color="rgba(0,0,0,0.1)"></uni-icons>
+      <uni-icons type="compose" size="64" color="#dfe7e5"></uni-icons>
       <text class="empty-title">暂无保存的抬头</text>
       <text class="empty-desc">添加抬头后可快速开具发票</text>
     </view>
@@ -65,7 +65,7 @@
           <view class="modal-header-right">
             <text class="import-title-btn" @click="importWechatTitle">同步微信抬头</text>
             <view class="modal-close" @click="closeForm">
-              <uni-icons type="closeempty" size="20" color="rgba(0,0,0,0.4)"></uni-icons>
+              <uni-icons type="closeempty" size="20" color="rgba(28,43,41,0.4)"></uni-icons>
             </view>
           </view>
         </view>
@@ -298,7 +298,7 @@ onShow(() => { loadList(); });
   overflow: hidden;
 
   &:not(:last-child) {
-    border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
+    border-bottom: 1rpx solid var(--divider);
   }
 }
 
@@ -367,13 +367,13 @@ onShow(() => { loadList(); });
 .add-btn { display: flex; align-items: center; justify-content: center; width: 400rpx; height: 80rpx; background: var(--color-primary); color: #fff; font-size: 32rpx; font-weight: 500; border-radius: 40rpx; }
 
 // === Modal ===
-.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); z-index: 1000; display: flex; align-items: flex-end; transition: background 0.25s ease-out; &.visible { background: rgba(0,0,0,0.45); } }
+.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(12,24,22,0); z-index: 1000; display: flex; align-items: flex-end; transition: background 0.25s ease-out; &.visible { background: rgba(12,24,22,0.45); } }
 .modal-content { width: 100%; max-width: 100vw; background: #fff; border-radius: 32rpx 32rpx 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); overflow: hidden; &.visible { transform: translateY(0); } }
 
 .modal-handle { display: flex; justify-content: center; padding: 16rpx 0 4rpx; }
-.handle-bar { width: 56rpx; height: 6rpx; border-radius: 3rpx; background: rgba(0,0,0,0.15); }
+.handle-bar { width: 56rpx; height: 6rpx; border-radius: 3rpx; background: #c9d4d2; }
 
-.modal-header { display: flex; align-items: center; justify-content: center; padding: 8rpx 30rpx 20rpx; position: relative; border-bottom: 1rpx solid rgba(0,0,0,0.05); }
+.modal-header { display: flex; align-items: center; justify-content: center; padding: 8rpx 30rpx 20rpx; position: relative; border-bottom: 1rpx solid rgba(28,43,41,0.05); }
 .modal-title { font-size: 32rpx; font-weight: 600; color: #1a1a1a; }
 .modal-header-right { position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
 .import-title-btn { font-size: 24rpx; color: var(--color-primary); padding: 8rpx 16rpx; border: 1rpx solid rgba(45, 158, 149, 0.4); border-radius: 16rpx; margin-right: 16rpx; }
@@ -381,7 +381,7 @@ onShow(() => { loadList(); });
 
 .modal-body { padding: 8rpx 30rpx 0; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
 
-.modal-footer { display: flex; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); gap: 20rpx; border-top: 1rpx solid rgba(0,0,0,0.05); }
+.modal-footer { display: flex; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); gap: 20rpx; border-top: 1rpx solid rgba(28,43,41,0.05); }
 .btn-cancel { width: 160rpx; height: 80rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: var(--color-primary); background: rgba(45, 158, 149, 0.08); border-radius: 40rpx; flex-shrink: 0; }
 .btn-save { flex: 1; height: 80rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500; color: #fff; background: var(--color-primary); border-radius: 40rpx; &.loading { opacity: 0.7; } }
 

+ 5 - 5
charge-front/src/pages-user/profile/profile.vue

@@ -21,13 +21,13 @@
       <view class="flex">
         <view
           :class="['fs-30', 'fw-500', `mr-${item.disabled ? '0' : '20'}`]"
-          style="color: rgba(0, 0, 0, 0.8)"
+          style="color: #1c2b29"
           >{{ item.value }}</view
         >
         <uni-icons
           type="right"
           size="12"
-          color="rgba(0,0,0,0.4)"
+          color="rgba(28,43,41,0.4)"
           v-if="!item.disabled"
         ></uni-icons>
       </view>
@@ -265,7 +265,7 @@ onShow(() => {
   height: 116rpx !important;
   width: 116rpx !important;
   border-radius: 50%;
-  border: 2rpx solid rgba(0, 0, 0, 0.15);
+  border: 2rpx solid #c9d4d2;
   overflow: hidden;
   &_image {
     position: absolute;
@@ -281,7 +281,7 @@ onShow(() => {
     left: 0;
     width: 100%;
     height: 40rpx;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(12, 24, 22, 0.5);
     color: #fff;
     font-size: 24rpx;
   }
@@ -290,7 +290,7 @@ onShow(() => {
 .menu {
   background-color: #fff;
   height: 120rpx;
-  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1rpx solid var(--divider);
   &:last-child {
     border-bottom: none;
   }

+ 1 - 1
charge-front/src/pages-user/wallet-refund/wallet-refund.vue

@@ -5,7 +5,7 @@
       <view class="fs-28 color-000 fw-500">退款金额</view>
       <view
         class="pt-24 pb-24 box-content flex-inline"
-        style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
+        style="border-bottom: 1rpx solid var(--divider)"
       >
         <text style="font-size: 32px; line-height: 32px">¥</text>
         <input

+ 3 - 3
charge-front/src/pages-user/wallet/wallet.vue

@@ -75,7 +75,7 @@
               }}
             </view>
             <view v-if="item.type!==2">
-              <view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">余额</view>
+              <view class="fs-24" style="color: #8c9997">余额</view>
             </view>
             <view v-else>
               <text class="refund-status" :style="refundStyle(item.status)">{{ refundLabel(item.status) }}</text>
@@ -87,7 +87,7 @@
               <text>{{ item.type == 3 ? "- " : "" }}{{ item.amount }}</text>
               <text class="fs-24 ml-6">元</text>
             </view>
-            <view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">{{
+            <view class="fs-24" style="color: #8c9997">{{
                 item.transactionTime
               }}
             </view>
@@ -96,7 +96,7 @@
             <uni-icons
                 type="right"
                 size="12"
-                color="rgba(0,0,0,0.4)"
+                color="rgba(28,43,41,0.4)"
             ></uni-icons>
           </view>
           <view class="ml-32" v-else>&nbsp;&nbsp;&nbsp;</view>

+ 2 - 2
charge-front/src/pages/list/list.vue

@@ -26,12 +26,12 @@
       v-if="infiniteScroller.list && infiniteScroller.list.length <= 0"
     >
       <image class="empty" src="/static/images/map-empty.png" mode="widthFix" />
-      <view class="fs-22 mt-14" style="color: rgba(0, 0, 0, 0.5)"
+      <view class="fs-22 mt-14" style="color: #8c9997"
         >暂无充电站信息</view
       >
     </view>
     <view class="flex-center flex-column pt-30" v-if="!infiniteScroller.list">
-      <view class="fs-28 mt-14" style="color: rgba(0, 0, 0, 0.5)">加载中</view>
+      <view class="fs-28 mt-14" style="color: #8c9997">加载中</view>
     </view>
   </view>
 </template>

+ 2 - 2
charge-front/src/pages/map/map.vue

@@ -22,7 +22,7 @@
         class="dialog_selector"
         :style="{
           height: filterDialog.distanceSelector ? '190rpx' : '0rpx',
-          borderTop: `1rpx solid rgba(0, 0, 0, ${
+          borderTop: `1rpx solid rgba(28, 43, 41, ${
             filterDialog.distanceSelector ? '0.1' : '0'
           })`,
         }"
@@ -205,7 +205,7 @@
             ><uni-icons
               type="spinner-cycle"
               size="20"
-              color="rgba(0, 0, 0, 0.5)"
+              color="rgba(28,43,41,0.45)"
             ></uni-icons
           ></view>
           <image

+ 2 - 2
charge-front/src/pages/user/user.vue

@@ -51,7 +51,7 @@
             @click="toPage(index)"
           >
             <view class="menu-icon">
-              <uni-icons v-if="item.iconType" :type="item.iconType" size="26" color="rgba(0,0,0,0.65)"></uni-icons>
+              <uni-icons v-if="item.iconType" :type="item.iconType" size="26" color="rgba(28,43,41,0.65)"></uni-icons>
               <image v-else :src="item.icon" mode="aspectFit"></image>
             </view>
             <view>{{ item.title }}</view>
@@ -59,7 +59,7 @@
               <uni-icons
                 type="right"
                 size="12"
-                color="rgba(0,0,0,0.4)"
+                color="rgba(28,43,41,0.4)"
               ></uni-icons>
             </view>
           </view>