Jelajahi Sumber

style: 公共表单/弹层组件与自定义tabBar对齐设计token

输入框浅青底大圆角;底部弹层遮罩减重+滑入动效;复选框青调边框+过渡;tabBar文字青调灰、充电遮罩渐变减重并修复transition缺单位
skyline 3 minggu lalu
induk
melakukan
de6318b40b

+ 2 - 1
charge-front/src/components/style-checkbox/style-checkbox.vue

@@ -7,8 +7,9 @@
       height: `${size}rpx`,
       border: checked
         ? '1rpx solid var(--color-primary)'
-        : '1rpx solid rgba(0,0,0,0.15)',
+        : '1rpx solid #c9d4d2',
       backgroundColor: checked ? 'var(--color-primary)' : 'rgba(0,0,0,0)',
+      transition: 'background-color 0.15s ease-out, border-color 0.15s ease-out',
     }"
   >
     <uni-icons

+ 14 - 3
charge-front/src/components/style-dialog/style-dialog.vue

@@ -7,7 +7,7 @@
         </view>
         <view class="fw-500 color-000 fs-32">{{ title }}</view>
         <view class="close" @click.stop="close">
-          <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
+          <uni-icons type="closeempty" size="24" color="#1c2b29"></uni-icons>
         </view>
       </view>
       <view class="style-dialog_body">
@@ -51,14 +51,15 @@ export default {
   right: 0;
   top: 0;
   z-index: 999;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(12, 24, 22, 0.45);
   display: flex;
   align-items: flex-end;
   & > view {
     width: 100%;
     overflow: hidden;
-    border-radius: 20rpx 20rpx 0px 0px;
+    border-radius: 24rpx 24rpx 0px 0px;
     box-sizing: content-box;
+    animation: style-dialog-slide 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
   &_head {
     height: 92rpx;
@@ -84,4 +85,14 @@ export default {
     overflow-y: auto;
   }
 }
+
+@keyframes style-dialog-slide {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
 </style>

+ 3 - 3
charge-front/src/components/style-input/style-input.vue

@@ -51,8 +51,8 @@ export default {
 <style lang="scss">
 .input {
   height: 84rpx;
-  background: #f7f7f7;
-  border-radius: 10rpx;
+  background: var(--color-sec);
+  border-radius: 20rpx;
   font-size: 30rpx;
   display: flex;
   align-items: center;
@@ -60,7 +60,7 @@ export default {
 }
 
 .placeholder {
-  color: rgba(0, 0, 0, 0.3);
+  color: #a9b6b4;
 }
 
 .input-ele {

+ 3 - 3
charge-front/src/custom-tab-bar/index.wxss

@@ -75,7 +75,7 @@ button::after {
 .tab-bar-item .text {
   font-size: 20rpx;
   font-weight: 400;
-  color: #646E7E;
+  color: #5c6b69;
 }
 
 .tab-bar-item .selected-color {
@@ -90,8 +90,8 @@ button::after {
   height: 100vh;
   width: 100vw;
   z-index: 98;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000000 100%);
-  transition: all 0.3;
+  background: linear-gradient(180deg, rgba(12, 24, 22, 0.25) 0%, rgba(12, 24, 22, 0.85) 100%);
+  transition: all 0.3s ease-out;
   overflow: hidden;
   display: flex;
   align-items: flex-end;