Explorar o código

style(ui): 更新控件样式和选中状态视觉效果

统一调整选中状态的背景色和文字样式,移除不必要的圆角图片元素
修改选项容器的宽度以保持一致性
allen hai 4 días
pai
achega
f26da9ea8f
Modificáronse 2 ficheiros con 10 adicións e 33 borrados
  1. 5 4
      pages/cb/shuifeizsFirst/autoSetting.vue
  2. 5 29
      pages/cb/shuifeizsFirst/control.vue

+ 5 - 4
pages/cb/shuifeizsFirst/autoSetting.vue

@@ -16,7 +16,7 @@
               </view>
               <text class="text" :class="FertType == '1'?'text-active':''">定时</text>
             </view>
-            <view class="group-check-container" @click="selectFertType('2')" :class="{'active': FertType == '2'}" style="width: 150rpx;">
+            <view class="group-check-container" @click="selectFertType('2')" :class="{'active': FertType == '2'}" style="width: 160rpx;">
               <view class="group-check-radius" :class="{'active': FertType == '2'}">
                 <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertType == '2'"/>
               </view>
@@ -41,7 +41,7 @@
               </view>
               <text class="text" :class="FertPidType == '1'?'text-active':''">PID</text>
             </view>
-            <view class="group-check-container"  @click="selectFertPidType('2')"  :class="{'active': FertPidType == '2'}" style="width: 150rpx;">
+            <view class="group-check-container"  @click="selectFertPidType('2')"  :class="{'active': FertPidType == '2'}" style="width: 160rpx;">
               <view class="group-check-radius" :class="{'active': FertPidType == '2'}">
                 <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertPidType == '2'"/>
               </view>
@@ -577,11 +577,12 @@ export default {
         color: #666;
         border-left-top-radius: 16rpx;
         border-left-bottom-radius: 16rpx;
-
         &.active {
-          background: #F5F6FA;
+          background: #0bbc581a;
           color:#0BBC58;
           font-weight: 700;
+          color: #0bbc58;
+          font-family: "Source Han Sans CN VF";
         }
 
         &:last-child {

+ 5 - 29
pages/cb/shuifeizsFirst/control.vue

@@ -12,17 +12,7 @@
           @click="controlClick(index)"
           :class="{ 'control-list-left-item-active': index === activeIndex }"
         >
-          <image
-            :src="borderRadius"
-            class="borderTopRadius"
-            v-if="index === activeIndex"
-          />
           {{ item.sfDisplayname }}
-          <image
-            :src="borderRadius"
-            class="borderBottomRadius"
-            v-if="index === activeIndex"
-          />
         </view>
       </view>
       <view class="control-list-right">
@@ -407,25 +397,11 @@ uni-page-body {
         position: relative;
       }
       .control-list-left-item-active {
-        background: #ffffff;
-        border-radius: 0 -16rpx -16rpx 0;
-      }
-      .borderTopRadius {
-        position: absolute;
-        width: 40rpx;
-        height: 40rpx;
-        right: 10rpx;
-        top: -32rpx;
-        transform: rotate(90deg);
-        z-index: 100;
-      }
-      .borderBottomRadius {
-        position: absolute;
-        z-index: 100;
-        width: 40rpx;
-        height: 40rpx;
-        bottom: -32rpx;
-        right: 10rpx;
+        background: #0bbc581a;
+        color:#0BBC58;
+        font-family: "Source Han Sans CN VF";
+        font-size: 32rpx;
+        font-weight: 700;
       }
     }
     .control-list-right {