优化日历组件calendar显示

components/calendar/calendar.js

@@ -11,6 +11,7 @@ Component({
    * 组件的初始数据
    */
   data: {
+    now_selectedDate:'',   //当前是几月几号
     selectedDate:'',   //选中的几月几号
     selectedWeek:'',   //选中的是星期几
     curYear:2017,   //当前年份
@@ -33,6 +34,7 @@ Component({
         curYear,
         curMonth,
         selectedDate,
+        now_selectedDate:selectedDate,
         selectedWeek
       })
       this.getDateList(curYear,curMonth-1);

components/calendar/calendar.wxml

@@ -20,7 +20,7 @@
     </view>
     <view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week"
       style="{{index==0?'justify-content:flex-end':''}}">
-      <view class="weekday_label {{item.value==selectedDate?'active_date':''}}" wx:for="{{week}}">
+      <view class="weekday_label {{(item.value==selectedDate)?'active_date':''}} {{(item.value==now_selectedDate)?'active_dates':''}}" wx:for="{{week}}">
         <view class="" bindtap="selectDate" data-date="{{item}}">
           {{item.date}}</view>
       </view>

components/calendar/calendar.wxss

@@ -29,14 +29,14 @@
   overflow: hidden;
   display: flex;
   height: calc(100% / 6);
-  border-radius: 50%;
+  align-items: center;
 }
 .weekday_label{
   width: calc(100% / 7);
   /* float: left; */
   /* text-align: center; */
   font-size: 27rpx;
-  /* padding: 10rpx 0; */
+  padding: 12rpx 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -53,11 +53,27 @@
 }
 .active_date{
   background: rgba(0,0,0,.12);
-  color: #fff;
+  color: rgba(0,0,0,.6);
   /* border-radius: 50%; */
-  padding: 12rpx;
-  box-sizing: border-box;
+  /* padding: 12rpx;
+  box-sizing: border-box; */
+  overflow: hidden;
+  position: relative;
+}
+.active_dates{
+  background: rgba(0,0,0,.12);
+  color: rgba(0,0,0,.6);
   overflow: hidden;
+  position: relative;
+}
+.active_dates::before{
+  content: "今天";
+  position: absolute;
+  top: -2rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  color: blue;
+  font-size: 20rpx;
 }
 .show_box{
   padding: 20rpx;

pages/calendar/calendar.wxml

-<view style="width:50%;height:500rpx;border:1rpx solid red;">
+<view>
   <y-calendar bind:timeload="timeload" bind:timechanged="timechanged"></y-calendar>
 </view>
\ No newline at end of file