|
|
@@ -18,7 +18,17 @@
|
|
|
isToday: item.date == today,
|
|
|
isSelected: item.date == selectedDate,
|
|
|
isMarked: markDates.includes(item.date)
|
|
|
- }" @click="clickDate(item)">{{ item.date == today ? '今' : item.day }}</li>
|
|
|
+ }" @click="clickDate(item)">
|
|
|
+ <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
|
|
+ <div style="font-size: 20px;">
|
|
|
+ {{ item.date == today ? '今' : item.day }}
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 12px;color: #1e80ff;">
|
|
|
+ {{ markDates.includes(item.date) ? '已签到' : '' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
@@ -123,9 +133,9 @@ export default {
|
|
|
// 星期
|
|
|
weeks() {
|
|
|
if (this.mondayStart) {
|
|
|
- return ['一', '二', '三', '四', '五', '六', '日']
|
|
|
+ return ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
} else {
|
|
|
- return ['日', '一', '二', '三', '四', '五', '六']
|
|
|
+ return ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
|
}
|
|
|
},
|
|
|
dateStyle() {
|
|
|
@@ -294,11 +304,12 @@ $activeBgColor: var(--active-bg-color);
|
|
|
flex-wrap: wrap;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 12px;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
li {
|
|
|
- width: 42px;
|
|
|
- height: 42px;
|
|
|
- margin: 20px calc((100% / 7 - 42px) / 2);
|
|
|
+ width: 62px;
|
|
|
+ height: 62px;
|
|
|
+ margin: 5px calc((100% / 7 - 62px) / 2);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
@@ -332,6 +343,7 @@ $activeBgColor: var(--active-bg-color);
|
|
|
cursor: pointer;
|
|
|
font-size: 20px;
|
|
|
color: $fontColor;
|
|
|
+ background: #f2f3f6;
|
|
|
|
|
|
// 今天
|
|
|
&.isToday {
|
|
|
@@ -339,16 +351,20 @@ $activeBgColor: var(--active-bg-color);
|
|
|
}
|
|
|
|
|
|
// 标记
|
|
|
- &.isMarked::after {
|
|
|
- transition: all ease .25s;
|
|
|
- background: $markColor;
|
|
|
+ &.isMarked {
|
|
|
+ background-color: #e8f3ff;
|
|
|
}
|
|
|
+
|
|
|
+ // &.isMarked::after {
|
|
|
+ // transition: all ease .25s;
|
|
|
+ // background: $markColor;
|
|
|
+ // }
|
|
|
|
|
|
// 选中、hover
|
|
|
&:hover,
|
|
|
&.isSelected {
|
|
|
- background: $activeBgColor;
|
|
|
- color: $activeColor;
|
|
|
+ // background: $activeBgColor;
|
|
|
+ // color: $activeColor;
|
|
|
|
|
|
&:after {
|
|
|
display: none;
|