Kaynağa Gözat

样式调整

dev01 1 yıl önce
ebeveyn
işleme
40412d9381

+ 4 - 2
src/components/common/xx-calendar/xx-calendar.wxml

@@ -33,7 +33,7 @@
         <!-- <text class="day-text {{item.color?'color':''}}">{{item.date}}</text> -->
         <text class="day-text">{{item.date}}</text>
         <!-- day 后面会换成农历展示 -->
-        <text class="day-nongli">{{item.day}}</text>
+        <!-- <text class="day-nongli">{{item.day}}</text> -->
         <text class=" {{item.color==0?'day-dot3':item.color==1?'day-dot0':item.color==2?'day-dot1':item.color==3?'day-dot2':'not-dot'}}"></text>
        </view>
     </view>
@@ -45,6 +45,7 @@
         <text class="day-dot"></text>
     </view>
 </view>
+<!-- 
 <view class="tips-warp">
   <view class="tips-item">
     <view class="tips-drop0"></view>
@@ -62,4 +63,5 @@
     <view class="tips-drop3"></view>
     未到时限
   </view>
-</view>
+</view>
+ -->

+ 31 - 20
src/components/common/xx-calendar/xx-calendar.wxss

@@ -3,7 +3,7 @@
 .title-wrap{
     background-color: #fff;
     /* padding-top: 20rpx; */
-    border-bottom: 1px solid #D4DBDC;
+    /* border-bottom: 1px solid #D4DBDC; */
     padding-bottom: 10rpx;
 }
 .change-date{
@@ -34,19 +34,19 @@
 /* 头部样式end */
 /* 日期区域样式start */
 .date-wrap{
-    /* height: 500rpx; */
-    background-color: #F8F9F9;
+    /* background-color: #F8F9F9; */
     display: flex;
     flex-wrap: wrap;
+    margin-bottom: 20rpx;
 }
 .mouth-date{
     display: flex;
-    font-size: 24rpx;
+    font-size: 26rpx;
     flex-direction: column;
     align-items: center;
     width: calc(100% / 7);
-    border-bottom: 1rpx solid rgb(229, 234, 235);
-    padding-top: 10rpx;
+    /* border-bottom: 1rpx solid rgb(229, 234, 235); */
+    /* padding-top: 10rpx; */
 }
 .last-mouth text,.next-mouth text{
     opacity: 0;
@@ -66,51 +66,62 @@
     color: #8096F0;
 }
 .mouth-date  .day-dot0{
-    width: 8rpx;
-    height: 8rpx;
+    width: 10rpx;
+    height: 10rpx;
     border-radius: 50%;
     background-color: #21BA45;
 }
 .mouth-date  .day-dot1{
-    width: 8rpx;
-    height: 8rpx;
+    width: 10rpx;
+    height: 10rpx;
     border-radius: 50%;
     background-color: #E96A7A;
 }
 .mouth-date  .day-dot2{
-    width: 8rpx;
-    height: 8rpx;
+    width: 10rpx;
+    height: 10rpx;
     border-radius: 50%;
-    background-color: #F9C47E;
+    background-color: #FFC125;
 }
 .mouth-date  .day-dot3{
-    width: 8rpx;
-    height: 8rpx;
+    width: 10rpx;
+    height: 10rpx;
     border-radius: 50%;
     background-color: #B4B4B4;
 }
 .mouth-date .day-box{
-    border-radius: 50%;
     width: 86rpx;
     padding-top: 6rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 10rpx;
+    /* margin-bottom: 10rpx; */
     padding-bottom: 8rpx;
 }
+.mouth-date .day-text{
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-bottom: 5rpx;
+}
 .mouth-date .active{
-    background-color: #A1D7EE;
+    
+    
 }
 .mouth-date .active text{
     color: #fff;
 }
 .mouth-date .active .day-text{
+    background-color: #6190E8;
     font-weight: 600;
+
 }
 .not-dot{
-    width: 8rpx;
-    height: 8rpx;
+    width: 10rpx;
+    height: 10rpx;
 }
 .tips-warp{
     background-color: #D7D7D7;