feat: 优化小程序样式

app.json

@@ -10,7 +10,7 @@
   ],
   "tabBar": {
     "color": "#6e6d6b",
-    "selectedColor": "#ff9966",
+    "selectedColor": "#3B82F6",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
     "list": [
@@ -35,4 +35,4 @@
     "backgroundTextStyle": "dark"
   },
   "sitemapLocation": "sitemap.json"
-}
+}

component/v2/core.js

@@ -60,7 +60,7 @@ function calculatePrevMonthGrids(year, month, config) {
 function calculateExtraEmptyDate(year, month, config) {
   let extDate = 0
   if (+month === 2) {
-    extDate += 7
+    // extDate += 7
     let firstDayofMonth = dateUtil.getDayOfWeek(year, month, 1)
     if (config.firstDayOfWeek === 'Mon') {
       if (+firstDayofMonth === 1) extDate += 7
@@ -74,9 +74,9 @@ function calculateExtraEmptyDate(year, month, config) {
         extDate += 7
       }
     } else {
-      if (firstDayofMonth <= 5) {
+      /* if (firstDayofMonth <= 5) {
         extDate += 7
-      }
+      } */
     }
   }
   return extDate
@@ -90,6 +90,7 @@ function calculateNextMonthGrids(year, month, config) {
   let emptyGrids = []
   const datesCount = dateUtil.getDatesCountOfMonth(year, month)
   let lastDayWeek = dateUtil.getDayOfWeek(year, month, datesCount)
+  console.log('lastDayWeek', lastDayWeek);
   if (config.firstDayOfWeek === 'Mon') {
     if (lastDayWeek === 0) {
       lastDayWeek = 6
@@ -116,6 +117,7 @@ function calculateNextMonthGrids(year, month, config) {
       })
     }
   }
+  console.log('emptyGrids', emptyGrids);
   return emptyGrids
 }
 /**

component/v2/index.wxml

@@ -3,30 +3,34 @@
     <!-- 头部操作栏 -->
     <view
       wx:if="{{!config.hideHeader}}"
-      class="handle {{config.theme}}_handle-color fsnd b lr ac pc fsnd">
+      class="handle {{config.theme}}_handle-color fsnd b lr ac pc fsnd calendar_header">
       <view class="prev fsnd" wx:if="{{!config.weekMode}}">
-        <text class="prev-handle iconfont icon-doubleleft fsnd" bindtap="changeDate" data-type="prev_year"></text>
-        <text class="prev-handle iconfont icon-left" bindtap="changeDate" data-type="prev_month"></text>
+        <text class="prev-handle iconfont icon-doubleleft fsnd" bindtap="changeDate" data-type="prev_month"></text>
+        <!-- <text class="prev-handle iconfont icon-doubleleft fsnd" bindtap="changeDate" data-type="prev_year"></text> -->
+        <!-- <text class="prev-handle iconfont icon-left" bindtap="changeDate" data-type="prev_month"></text> -->
       </view>
-      <view class="flex date-in-handle b lr cc fsnd" bindtap="doubleClickJumpToToday">
+      <view class="calendar_title flex date-in-handle b lr cc fsnd" bindtap="doubleClickJumpToToday">
         {{calendar.curYear || "--"}} 年 {{calendar.curMonth || "--"}} 月 
       </view>
-      <view class="flex" bindtap="gotoSearch">
-         <i-icon type="search"  size="25" style="color: blue"></i-icon>
+      <view class="calender-search" bindtap="gotoSearch">
+         <i-icon class="icon" type="search"  size="26" style="color: #2563EB;"></i-icon>
       </view>
       <view class="next fsnd" wx:if="{{!config.weekMode}}">
-        <text class="next-handle iconfont icon-right" bindtap="changeDate" data-type="next_month"></text>
-        <text class="next-handle iconfont icon-doubleright" bindtap="changeDate" data-type="next_year"></text>
+        <!-- <text class="next-handle iconfont icon-right" bindtap="changeDate" data-type="next_month"></text> -->
+        <!-- <text class="next-handle iconfont icon-doubleright" bindtap="changeDate" data-type="next_year"></text> -->
+        <text class="next-handle iconfont icon-doubleright fsnd" bindtap="changeDate" data-type="next_month"></text>
       </view>
     </view>
     <!-- 星期栏 -->
     <view class="weeks b lr ac {{config.theme}}_week-color mt10">
-      <view class="week fsnd" wx:for="{{calendar.weeksCh}}" wx:key="index" data-idx="{{index}}">{{item}}</view>
+      <!-- fsnd -->
+      <view class="week" wx:for="{{calendar.weeksCh}}" wx:key="index" data-idx="{{index}}">{{item}}</view>
     </view>
     <!-- 日历面板主体 -->
-    <view class="b lr wrap" bindtouchstart="calendarTouchstart" catchtouchmove="calendarTouchmove" catchtouchend="calendarTouchend">
+    <!-- bindtouchstart="calendarTouchstart" catchtouchmove="calendarTouchmove" catchtouchend="calendarTouchend" -->
+    <view class="b lr wrap calendar_body" >
       <!-- 上月日期格子 -->
-      <view class="grid b ac pc {{config.theme}}_prev-month-date" wx:for="{{calendar.prevMonthGrids}}" wx:key="index" data-idx="{{index}}">
+      <view class="grid b ac pc {{config.theme}}_prev-month-date calendar_date" wx:for="{{calendar.prevMonthGrids}}" wx:key="index" data-idx="{{index}}">
         <view class="date-wrap b cc">
           <view class="date">
                 {{item.date}}
@@ -34,26 +38,32 @@
         </view>
       </view>
       <!-- 本月日期格子 -->
-      <view wx:for="{{calendar.dates}}" wx:key="index" data-idx="{{index}}" data-info="{{item}}" bindtap="tapDate" class="grid {{item.class ? item.class  : ''}} {{config.theme}}_normal-date b ac pc">
-        <view class="date-wrap b cc {{config.emphasisWeek && (item.week === 0 || item.week === 6) ? config.theme + '_weekend-color' : ''}}">
-          <view class="date b ac pc {{item.class ? item.class  : ''}} {{item.isToday && config.highlightToday ? config.theme + '_today' : ''}} {{item.choosed ? config.theme + '_choosed' : ''}} {{item.disable ? config.theme + '_date-disable' : ''}} {{config.chooseAreaMode ? 'date-area-mode' : ''}}  {{calendar.todoLabelCircle && item.showTodoLabel && !item.choosed ? config.theme + '_todo-circle todo-circle' : '' }}">
+      <view wx:for="{{calendar.dates}}" wx:key="index" data-idx="{{index}}" data-info="{{item}}" bindtap="tapDate" class="grid {{item.class ? item.class  : ''}} {{config.theme}}_normal-date b ac pc calendar_date">
+        <view class="date-wrap b cc {{config.emphasisWeek && (item.week === 0 || item.week === 6) ? config.theme + '_weekend-color' : ''}} {{item.choosed ? 'calendar_date_choosed' : ''}}">
+          <!-- {{item.choosed ? config.theme + '_choosed' : ''}} -->
+          <view class="date b ac pc {{item.class ? item.class  : ''}} {{item.isToday && config.highlightToday ? 'calendar_today' : ''}}  {{item.disable ? config.theme + '_date-disable' : ''}} {{config.chooseAreaMode ? 'date-area-mode' : ''}}  {{calendar.todoLabelCircle && item.showTodoLabel && !item.choosed ? config.theme + '_todo-circle todo-circle' : '' }}">
                 {{config.markToday && item.isToday ? config.markToday : item.date}}
-                <view
+                <!-- <view
                   wx:if="{{(config.showLunar && item.lunar && !item.showTodoLabel) || (item.showTodoLabel && calendar.todoLabelPos !== 'bottom') || config.showHolidays}}"
                   class="date-desc {{config.theme}}_date-desc date-desc-bottom {{(item.choosed || item.isToday) ? 'date-desc-bottom-always' : ''}} {{item.disable ? config.theme + '_date-desc-disable' : ''}}">
                   <text class="{{config.showHolidays && !item.showTodoLabel && item.label && !item.choosed ? config.theme + '_date-desc-lunar' : ''}} {{item.type === 'festival' ? config.theme + '_festival' : ''}}">{{item.label || item.lunar.Term || item.lunar.IDayCn}}</text>
-                </view>
-                <view
+                </view> -->
+                <!-- <view
                   wx:if="{{item.showTodoLabel && !calendar.todoLabelCircle}}"
                   class="{{item.todoText ? 'date-desc' : config.theme + '_todo-dot todo-dot'}} {{config.showLunar ? config.theme + '_date-desc-lunar' : ''}} {{calendar.todoLabelPos === 'bottom' ? 'date-desc-bottom todo-dot-bottom' : 'date-desc-top todo-dot-top'}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'bottom' ? 'date-desc-bottom-always todo-dot-bottom-always' : ''}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'top' ? 'date-desc-top-always todo-dot-top-always' : ''}}"
                   style="background-color: {{item.todoText ? '' : item.color || calendar.todoLabelColor}}; color: {{item.color}}">
                     {{item.todoText}}
-                </view>
+                </view> -->
+          </view>
+          <view class="calander-todos" wx:if="{{item.todoText}}">
+            <view class="calander-todo" wx:for="{{item.todoText}}" wx:for-item="todo" wx:for-index="todoIndex" wx:key="todoIndex" style="background-color: {{todo && todo[1] || ''}}">
+              {{todo[0]}}
+            </view>
           </view>
         </view>
       </view>
       <!-- 下月日期格子 -->
-      <view class="grid b ac pc {{config.theme}}_next-month-date" wx:for="{{calendar.nextMonthGrids}}" wx:key="index" data-idx="{{index}}">
+      <view class="grid b ac pc {{config.theme}}_next-month-date calendar_date" wx:for="{{calendar.nextMonthGrids}}" wx:key="index" data-idx="{{index}}">
         <view class="date-wrap b cc">
           <view class="date">
               {{item.date}}

component/v2/index.wxss

@@ -106,7 +106,8 @@
 
 .date-wrap {
     width: 100%;
-    height: 96rpx;
+    /* height: 96rpx; */
+    height: 104rpx;
     position: relative;
     left: 0;
     top: 0;
@@ -210,7 +211,8 @@
 
 .date-desc.date-desc-bottom {
     bottom: -32rpx;
-    color: #6495ED;
+    /* color: #6495ED; */
+    color: #3B82F6;
     font-size: 22rpx;
     font-weight: 400;
 }
@@ -222,3 +224,79 @@
 .date-desc.date-desc-bottom-always {
     bottom: -28rpx;
 }
+
+/* 补充 */
+.calendar {
+    background: #fff;
+    border: 1rpx solid #dddee1;
+    border-radius: 10rpx;
+}
+
+.calendar_title{
+    font-size: 36rpx;
+}
+
+.calendar_header{
+    border-bottom: 1rpx solid #dddee1;
+    position: relative;
+}
+
+.calendar_body{
+    padding: 4rpx;
+}
+
+
+.calendar_date .date-wrap{
+    box-sizing: border-box;
+    border: 4rpx solid transparent;
+}
+
+.calendar_date .date {
+    margin-top: -20rpx;
+}
+
+.calendar_today{
+    color: #2563EB;
+}
+
+.calendar_date .calendar_date_choosed{
+    border: 4rpx solid #3B82F6;
+    border-radius: 16rpx;
+}
+
+.calander-todos{
+    position: absolute;
+    top: 62rpx;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+}
+
+.calander-todo{
+    margin: 0 4rpx;
+    font-size: 20rpx;
+    line-height: 28rpx;
+    min-width: 28rpx;
+    border-radius: 15rpx;
+    color: #fff;
+    text-align: center;
+    background-color: #3B82F6;
+}
+
+.calender-search{
+    position: absolute;
+    height: 80rpx;
+    width: 80rpx;
+    right: 80rpx;
+    top: 0rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.calender-search .icon {
+    margin-top: -6rpx;
+}

component/v2/theme/theme-elegant.wxss

@@ -30,7 +30,7 @@
 }
 
 .elegant_normal-date {
-    color: ##080808;
+    color: #080808;
 }
 
 .elegant_todo-circle {

pages/rili/index.js

@@ -25,10 +25,11 @@ const conf = {
     toDate:'',
     calendarConfig: {
       theme: 'elegant',
-      showHolidays: true,
+      showHolidays: false,
       emphasisWeek: true,
       chooseAreaMode: false,
       autoChoosedWhenJump: true,
+      highlightToday: true,
       defaultDate: formatDate(new Date())
       // autoChoosedWhenJump: true
     },
@@ -116,7 +117,7 @@ const conf = {
     this.setData({curDate});
     this.filterData()
   },
-  onShow: function(){
+  onLoad: function(){
     this.initData();
     app.checkLogin(res=>{
       if( !res.userId ){
@@ -205,15 +206,18 @@ const conf = {
       let item = {year: d.getFullYear(), month: d.getMonth()+1, date: d.getDate()};
       switch( dateMap[date] ){
         case 1:
-          item.todoText = "出";
-          item.dotColor = "red"
+          // item.todoText = "出";
+          // item.dotColor = "red"
+          item.todoText = [['出', '#FBBF24']];
           break;
         case 2:
-         item.todoText = "临";
-         item.dotColor = "green"
-         break;
+        //  item.todoText = "临";
+        //  item.dotColor = "green"
+          item.todoText = [['临', '#34D399']];
+          break;
         default:
-          item.todoText = "临&出";
+          // item.todoText = "临&出";
+          item.todoText = [['临', '#34D399'], ['出', '#FBBF24']];
       }
       dates.push( item );
     }

pages/rili/index.wxml

@@ -1,4 +1,4 @@
-<view style="width: 95%;height:640rpx;overflow:hidden;margin: 0 auto 20rpx;">
+<view style="overflow:hidden;margin: 12px 16px;">
   <calendar
     id="calendar"
     config="{{calendarConfig}}"
@@ -11,19 +11,19 @@
   ></calendar>
 </view>
 
-<view wx:for="{{tableData}}" wx:key="index">
+<view class="card-wrapper" wx:for="{{tableData}}" wx:key="index">
   <view class="i-class i-card i-card-radus" data-id="{{item.id}}" data-out="{{item.isOut}}"  bindtap="gotoDetail" >
-    <view class="i-class i-card-header">
-      <view class="i-card-header-title mt10" style="font-size:30rpx">
+    <view class="i-class i-card-header mt10">
+      <view class="i-card-header-title" style="font-size:36rpx">
         {{item.username}} 
-        <text wx:if="{{item.isOut}}" style="color:orange;">【外出】</text>
-        <text wx:else style="color:green;">【莅临】</text>
+        <text wx:if="{{item.isOut}}" style="color:#F59E0B;font-size:28rpx;">【外出】</text>
+        <text wx:else style="color:#059669;font-size:28rpx;">【莅临】</text>
       </view>
-      <view class="i-card-header-extra" style="font-size:30rpx" >
+      <view class="i-card-header-extra" style="font-size:28rpx" >
         {{item.post}}
       </view>
     </view>
-    <view class="i-card-footer" style="font-size:35rpx">
+    <view class="i-card-footer" style="font-size:30rpx">
       {{item.fromDate}} 到 {{item.toDate}}  
     </view>
   </view>

pages/rili/index.wxss

@@ -5,6 +5,11 @@
    margin-top: 10rpx;
    background-color: #fff;
 }
+
 page{
   background-color: #fafafa;
-}
+}
+
+.card-wrapper{
+  margin-bottom: 12px;
+}

pages/search/index.wxml

@@ -4,26 +4,26 @@
   </view>
 </view>
 
-<view style="margin-top:120rpx"></view>
+<view style="margin-top:128rpx"></view>
 
-<view wx:for="{{tableData}}" wx:key="index">
+<view class="card-wrapper" wx:for="{{tableData}}" wx:key="index">
   <view class="i-class i-card i-card-radus" data-id="{{item.id}}" data-out="{{item.isOut}}"  bindtap="gotoDetail" >
-    <view class="i-class i-card-header">
-      <view class="i-card-header-title mt10" style="font-size:30rpx">
+    <view class="i-class i-card-header mt10">
+      <view class="i-card-header-title" style="font-size:36rpx">
         {{item.username}} 
-        <text wx:if="{{item.isOut}}" style="color:orange;">【外出】</text>
-        <text wx:else style="color:green;">【莅临】</text>
+        <text wx:if="{{item.isOut}}" style="color:#F59E0B;font-size:28rpx;">【外出】</text>
+        <text wx:else style="color:#059669;font-size:28rpx;">【莅临】</text>
       </view>
-      <view class="i-card-header-extra" style="font-size:30rpx" >
+      <view class="i-card-header-extra" style="font-size:28rpx" >
         {{item.post}}
       </view>
     </view>
-    <view class="i-card-footer" style="font-size:35rpx">
+    <view class="i-card-footer" style="font-size:30rpx">
       {{item.fromDate}} 到 {{item.toDate}}  
     </view>
   </view>
 </view>
 
-<view wx:if="{{from==-1}}"  style="text-align:center;margin-top:40rpx">
+<view wx:if="{{from==-1}}"  style="text-align:center;margin:40rpx 0;color:#80848f;">
   <view class="padding">没有更多了</view>
 </view>