467 lines
310 KiB
Vue
467 lines
310 KiB
Vue
|
<template>
|
|||
|
|
<!-- 打卡日历页面 -->
|
|||
|
|
<view class='all'>
|
|||
|
|
<view class="bar">
|
|||
|
|
<view class="icon">
|
|||
|
|
<image src="../../static/images/suo.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<!-- 上一个月,只能往前翻一个月 -->
|
|||
|
|
<view class="previous" :class="Number(toMonth-nowMonth) ===0 ? 'newCol' : 'next'" @click="changeMonth(-1)">
|
|||
|
|
<text class="iconfont icon-xiangzuo"></text>
|
|||
|
|
<!-- <button class="barbtn">{{langType=='ch'?'上一月':'Last'}}</button> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- 显示年月 toMonth-->
|
|||
|
|
<view class="date">{{nowYear || "--"}} 年 {{nowMonth || "--"}} 月</view>
|
|||
|
|
<!-- 下一个月, 往后翻的月份不能大于当前月份-->
|
|||
|
|
<view class="previous" :class="Number(toMonth-nowMonth) ===0 ? 'next' : 'newCol'" @click="changeMonth(1)">
|
|||
|
|
<text class="iconfont icon-xiangyou"></text>
|
|||
|
|
<!-- <button class="barbtn">{{langType=='ch'?'下一月':'Nex/'}}</button> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 显示星期 -->
|
|||
|
|
<view class="week-area">
|
|||
|
|
<view class="week-txt" v-for="(item,index) in weeksTxt[langType]" :key="index">{{item}}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="myDateTable">
|
|||
|
|
<view v-for="(item,j) in calendarDays" :key="j" class='dateCell'>
|
|||
|
|
<view v-if="item.date==undefined||item.date == null" class='cell'></view>
|
|||
|
|
<template v-else>
|
|||
|
|
<!-- 今日签到 @click="clickSign(item.date,1)"-->
|
|||
|
|
<view class="cell whiteColor todayChanged"
|
|||
|
|
v-if="item.isSign&&item.date==today&&nowMonth==toMonth&&nowYear==toYear">
|
|||
|
|
{{item.date}}
|
|||
|
|
<view class="redDot"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 已签到日期 -->
|
|||
|
|
<view v-if="item.isSign == true" class='cell changed bgWhite'>
|
|||
|
|
{{item.date}}
|
|||
|
|
</view>
|
|||
|
|
<!-- 漏签，如有二开需求，漏签示例代码自行修改，本项目无漏签功能 -->
|
|||
|
|
<!-- <view @click="clickSign(item.date,0)" class="cell outSignStyle"
|
|||
|
|
v-else-if="item.isBeforeToday&&item.isThisMonth">
|
|||
|
|
{{item.date}}
|
|||
|
|
<view class="redDot"></view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 当前日期之后 -->
|
|||
|
|
<view class="whiteColor cell" v-else>
|
|||
|
|
{{item.date}}
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pic">
|
|||
|
|
<image src="../../static/images/fanye.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
calendarDays: [],
|
|||
|
|
SignData: [], // 已经签到的数据
|
|||
|
|
nowYear: 0, //当前选的年
|
|||
|
|
nowMonth: 0, //当前选的月
|
|||
|
|
today: parseInt(new Date().getDate()), //系统本日
|
|||
|
|
toMonth: parseInt(new Date().getMonth() + 1), //系统本月
|
|||
|
|
toYear: parseInt(new Date().getFullYear()), //系统本年
|
|||
|
|
weeksTxt: {
|
|||
|
|
ch: ['日', '一', '二', '三', '四', '五', '六'],
|
|||
|
|
en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
isReplenishSign: { // 是否允许过期补签
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
isFullCalendar: { // 是否需要填满日历，前后空的格子填入上/下个月的日期
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
yearMonth: { // 2022-01 这种格式，默认当前年月
|
|||
|
|
type: String,
|
|||
|
|
default: new Date().getFullYear() + '-' + new Date().getMonth() + 1
|
|||
|
|
},
|
|||
|
|
dataSource: { //已签到的数据源，例： 5、6号已签到： ["2022-01-05","2022-01-06"]，兼容个位数前可加可不加0
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
langType: { //只是示例一个翻译而已，要想所有都翻译自己可以再加加
|
|||
|
|
type: String,
|
|||
|
|
default: "ch" //en
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
if (!(/en|ch/g.test(this.langType))) {
|
|||
|
|
this.langType = 'ch'; // 非中英，则固定中文
|
|||
|
|
}
|
|||
|
|
const ymArr = this.yearMonth.split('-');
|
|||
|
|
this.buildCalendar(ymArr[0], ymArr[1]);
|
|||
|
|
this.onSignDataChange(this.dataSource);
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
dataSource: 'onSignDataChange',
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
clickSign(date, type) { //type=0补签，type=1当日签到
|
|||
|
|
var strTip = "签到";
|
|||
|
|
|
|||
|
|
if (type == 0) {
|
|||
|
|
if (!this.isReplenishSign) { // 未开启补签，阻止继续执行
|
|||
|
|
console.log("————补签功能未开启————");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
strTip = "补签";
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: date + "号" + strTip + "成功",
|
|||
|
|
icon: 'success',
|
|||
|
|
position: "bottom",
|
|||
|
|
});
|
|||
|
|
this.$emit('clickChange', this.nowYear + "-" + this.nowMonth + "-" + date); //传给调用模板页面
|
|||
|
|
// 父页面要在clickChange里去修改输入的数据源dataSource，否则视图不更新的!
|
|||
|
|
},
|
|||
|
|
//构建日历数据
|
|||
|
|
buildCalendar(y, m) {
|
|||
|
|
this.nowYear = y;
|
|||
|
|
this.nowMonth = m;
|
|||
|
|
this.calculateEmptyGrids(y, m);
|
|||
|
|
this.calculateDays(y, m);
|
|||
|
|
if (this.isFullCalendar) {
|
|||
|
|
this.fullCell()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 监听到签到数据源改变
|
|||
|
|
onSignDataChange(newData, oldData = []) {
|
|||
|
|
this.SignData = newData;
|
|||
|
|
this.matchSign();
|
|||
|
|
},
|
|||
|
|
//匹配标记已经签到的日子
|
|||
|
|
matchSign() {
|
|||
|
|
var signs = this.SignData;
|
|||
|
|
var daysArr = this.calendarDays;
|
|||
|
|
for (var i = 0; i < signs.length; i++) {
|
|||
|
|
var current = new Date(this.toIOSDate(signs[i])).getTime(); // ios只认/格式的日期
|
|||
|
|
for (var j = 0; j < daysArr.length; j++) {
|
|||
|
|
if (current == new Date(this.toIOSDate(daysArr[j].fullDate)).getTime()) {
|
|||
|
|
daysArr[j].isSign = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.calendarDays = daysArr;
|
|||
|
|
},
|
|||
|
|
// 计算当月1号前空了几个格子，把它填充在calendarDays数组的前面
|
|||
|
|
calculateEmptyGrids(year, month) {
|
|||
|
|
//计算每个月时要清零
|
|||
|
|
this.calendarDays = [];
|
|||
|
|
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
|
|||
|
|
if (firstDayOfWeek > 0) {
|
|||
|
|
for (let i = 0; i < firstDayOfWeek; i++) {
|
|||
|
|
this.calendarDays.push({
|
|||
|
|
date: null, // 显示的日期
|
|||
|
|
fullDate: null, // 日期yyyy-mm-dd格式
|
|||
|
|
isBeforeToday: true, // 今日之前
|
|||
|
|
isSign: false, // 是否签到
|
|||
|
|
isThisMonth: false, // 是本月
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 绘制当月天数占的格子，并把它放到days数组中
|
|||
|
|
calculateDays(year, month) {
|
|||
|
|
const thisMonthDays = this.getMonthDayLength(year, month);
|
|||
|
|
const toDate = new Date(this.toYear + '/' + this.toMonth + '/' + this.today);
|
|||
|
|
for (let i = 1; i <= thisMonthDays; i++) {
|
|||
|
|
const fullDate = year + '-' + month + '-' + i;
|
|||
|
|
const isBeforeToday = new Date(this.toIOSDate(fullDate)) < toDate;
|
|||
|
|
this.calendarDays.push({
|
|||
|
|
date: i,
|
|||
|
|
fullDate,
|
|||
|
|
isBeforeToday,
|
|||
|
|
isSign: false,
|
|||
|
|
isThisMonth: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 切换控制年月，上一个月，下一个月
|
|||
|
|
changeMonth(type) {
|
|||
|
|
// 往后翻的月份不能大于当前月份,往前只能翻一个月
|
|||
|
|
if (type === 1 & (this.toMonth - this.nowMonth) === 0) return;
|
|||
|
|
if (type === -1 & (parseInt(this.toMonth) - parseInt(this.nowMonth)) !== 0) return;
|
|||
|
|
const nowYear = parseInt(this.nowYear);
|
|||
|
|
const nowMonth = parseInt(this.nowMonth);
|
|||
|
|
const newObj = this.getOperateMonthDate(nowYear, nowMonth, type);
|
|||
|
|
this.buildCalendar(newObj.year, newObj.month); // 重新构建日历数据
|
|||
|
|
let pre = Number(this.nowMonth)
|
|||
|
|
if (pre < 10) {
|
|||
|
|
this.nowMonth = '0' + pre
|
|||
|
|
} else {
|
|||
|
|
this.nowMonth = pre
|
|||
|
|
}
|
|||
|
|
this.$emit('dateChange', this.nowYear + "-" + this.nowMonth); //传给调用模板页面去拿新数据
|
|||
|
|
},
|
|||
|
|
// 获取当月共多少天，也就是获取月的最后一天
|
|||
|
|
getMonthDayLength(year, month) {
|
|||
|
|
return new Date(year, month, 0).getDate()
|
|||
|
|
},
|
|||
|
|
// 获取当月第一天星期几
|
|||
|
|
getFirstDayOfWeek(year, month, day = 1) {
|
|||
|
|
return new Date(Date.UTC(year, month - 1, day)).getDay();
|
|||
|
|
},
|
|||
|
|
toIOSDate(strDate) { // iso不认识"-"拼接的日期，所以转/
|
|||
|
|
return strDate ? strDate.replace(/-/g, '/') : strDate;
|
|||
|
|
},
|
|||
|
|
// 需要填满格子，上/下个月的日期拉出来填满格子
|
|||
|
|
fullCell() {
|
|||
|
|
// const endDay = this.getMonthDayLength(this.nowYear, this.nowMonth);
|
|||
|
|
// const beforeEmptyLength = this.getFirstDayOfWeek(this.nowYear, this.nowMonth);
|
|||
|
|
// const afterEmptyLength = 6 - this.getFirstDayOfWeek(this.nowYear, this.nowMonth, endDay);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// const last = this.getOperateMonthDate(this.nowYear, this.nowMonth, -1);
|
|||
|
|
// const lastMonthEndDay = this.getMonthDayLength(last.year, last.month);
|
|||
|
|
// for (let i = 0; i < beforeEmptyLength; i++) {
|
|||
|
|
// const date = lastMonthEndDay - beforeEmptyLength + i + 1;
|
|||
|
|
// this.calendarDays[i].date = date;
|
|||
|
|
// this.calendarDays[i].fullDate = last.year + "-" + last.month + "-" + date;
|
|||
|
|
// }
|
|||
|
|
// const next = this.getOperateMonthDate(this.nowYear, this.nowMonth, 1);
|
|||
|
|
// for (let i = 1; i <= afterEmptyLength; i++) {
|
|||
|
|
// this.calendarDays.push({
|
|||
|
|
// date: i, // 显示的日期
|
|||
|
|
// fullDate: next.year + "-" + next.month + "-" + i, // 日期yyyy-mm-dd格式
|
|||
|
|
// isBeforeToday: false, // 今日之前
|
|||
|
|
// isSign: false, // 是否签到
|
|||
|
|
// isThisMonth: false, // 是本月
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
// 获取加/减一个月的日期
|
|||
|
|
getOperateMonthDate(yy, mm, num) {
|
|||
|
|
let month = parseInt(mm) + parseInt(num);
|
|||
|
|
let year = parseInt(yy);
|
|||
|
|
if (month > 12) {
|
|||
|
|
month = 1;
|
|||
|
|
year++;
|
|||
|
|
} else if (month < 1) {
|
|||
|
|
month = 12;
|
|||
|
|
year--;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
month,
|
|||
|
|
year,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.next {
|
|||
|
|
background-color: #CCCCCC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newCol {
|
|||
|
|
@include main_bg_color(theme);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.previous {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
opacity: 1;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-xiangyou {
|
|||
|
|
margin-right: -2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-xiangzuo {
|
|||
|
|
margin-left: -2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-xiangyou,
|
|||
|
|
.icon-xiangzuo {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.all {
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
top: -84rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.bar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 152rpx;
|
|||
|
|
border-radius: 24rpx 24rpx 0px 0px;
|
|||
|
|
opacity: 1;
|
|||
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABWQAAAEwCAYAAAAw3XhDAAAAAXNSR0IArs4c6QAAIABJREFUeF7svVusZcl5HlZr7bXP6dv09HW6Z3o4Vw5HJEXRlGldKIWS5SRKoCBSIMtS7EAJ8pI8+CEJkMAIEAN5CJLAiPOSBHBeHNmwdbFoBZatyKYsmopCSiIlURKv4og0SQ05HHKmZ6b79Dln77XXCv5b1V+1qtZ9n3OG2nsu+6xdq25/Vf3111df/ZWZM/z53z90//ZT1xdvu/bQ3juunK/fc2HfPHuuyK7tL7KHl4W5fGGZ3TjDxd8VbSeBnQR2EthJYCeBnQR2EthJYCeBnQR2EthJYCeBnQR2EthJYCeBnQS2IIF6s/mm2VRv1Jv69XpTvWo25QvVg/UnMlN+8vjuwQuX3vn0S1vIdpYks1lSmSGRv/PBVx9+4vGH3vPopfz9j1yqf+iRy4v3LXKznCHpXRI7CewksJPATgI7CewksJPATgI7CewksJPATgI7CewksJPATgI7Cewk8GdJAnW9qh8cf2R9+ODX86PVbxQHxe9l33bz3lkQwakCsn/3Q/W5tz+5+svP3Cz+y5uX8u88CwLZlWEngZ0EdhLYSWAngZ0EdhLYSWAngZ0EdhLYSWAngZ0EdhLYSWAngZ0EvvUkUB0e/279xr3/ZfGnN34xe2+2Pq0angog++HPHL/rmdvL/+7Ry9mPLnKzd1qV3+W7k8BOAjsJ7CSwk8BOAjsJ7CSwk8BOAjsJ7CSwk8BOAjsJ7CSwk8BOAn/GJFDXR9X9w18oX7v3t/afuP3Jk679iQKyH3lh/b633V787esXs+8+6Yru8ttJYCeBnQR2EthJYCeBnQR2EthJYCeBnQR2EthJYCeBnQR2EthJYCeBnQS0BOrD1W9t7t3/r5a3rn/0pCRzIoDsb39x/cPPP7L4Xx++kL39pCq2y2cngZ0EdhLYSWAngZ0EdhLYSWAngZ0EdhLYSWAngZ0EdhLYSWAngZ0EdhLoI4F6tf705rV7/8Xy1vUP9nl/yjtbBWR/6eNHz/7A2/c+cPVC9u4xhXzjyHz1YFW/friuDh6s6oODlTm4v6oO3niQ3X/1sDz4xr363mFZlbnJTWlKY0xuKlMZeK7ykr75uZTf1bfJc2NM5cULnyG+TTeH0MT7FeVPH8qXnuWby5f7zy7cpUtphPH7P4MEpsTH8tty9s/Xr29F4jW1MQa6WfM7zxc9yknynFqfKfFz1U/GpkM9I10P6DEN+VWFX++gvxYqXPq57r+Fyi8WDuND91d8rsL+7fozjScokhtXJhh3sfFUVc16++UJ6glZVDSOnbx9+UF4a79o9F8Zny6en76fni5fnhc4ngvjyqnDoaRSXmnHypQmr5yEQU5QJHyvJvlB+8B79A21od8XJjd1ZvDb6jN4P+d4/C3vF6o96H3WU/o9kFeem5LlKvqpriqTcT+A9DZ1aTJTGPl9wz0Ey1cZU+aVyasC00H5V5RjVZG+xZy5PNBPdLjIyZgC3zcVyNVvF/gdUjJlieWtytKUlTGrcm0M6AvIr9yY6uCBubzMzRO3L5i/8K5HzZ1HqKCroxX1GShP7jQy9SPVz7D48fGIEmR5+eNd9DJ20GR8aHcZV2P1xRzxcKxOmEe0PpiSzlT93TZOw/l1m+XsV452vdSptzraKzZPDJXvHPUQvd+QN+vdpv0Tmd/C+TAyT4xvT9YrHfYWBk+0L/Q8m7InY3Ze3/knVr5wPg/boxment8kfV2etL3Qbi932dN97AXQn1Pzh3JMq8/GFCYzlalNforfxmy8dYy2B/T6Ztu/izyb+fjrLLR7ArtF7Map5aXZm9d3o7+dnSX9o6tcaI8ZspM2yfr1L5dOT9I96W9qzznk2b/eMTmn+1X/dMEun94vUv2WyoF2r1rXO/s9Xc6mXe7b8w15sD3a1R+3HT643NHx3r/9htUH7HqRo55Vof2gH8hsVhmqh3um8G2Va3vpot6z/U/XJ6zf2X+GdZOvd2auz2JRLC/sPVQvi4v53vKSKYqLpsgvZYvFhbxYXDR7xZWsWDw6Bo+sjlefWH/9pR8/9+STXxgTv0+crQCyf/sj9fl//63V//TMjfyvZ7La71GaTVWvv3G//sIXv1l9/uMvrv/41YP6QSoaTGD6AwPN+4Us7eCdZmp27ZzIKMwF1+oyyHlNTiCVTKkU3lwKc4ltfAAuaE2vTWWKx51W1vzR9BQmEAnHdBLxpapt4YylMKjK9QnT63jGyVawiUh50DRSmIiVh8gFv52A4uEOc9haOGM3qfT7/Q6glcNwsFqqnkXwjHIpM+ofup/oZ9iKSGFHAEZFsQEAq6QDM2LldUDdYAJauQ5WSXvYDq5GiKRjO5jF7OJLXluvcGkKoF+4hPWhCMTc2pbSeTskEELAbZC/dGINr+oBTuOfKm1rIvK32zSIxtJ7CGY6mSqJ25+h34tytnCtehH/5OemqmMoLkiYfiXw2GXPtdJKy1UHl6NSN6tj2dDBNuC0bIoqHQHiq5rec9ArAK68dPPKIuIhOZG4QE/WZgNALOQLv60qU5SVWZrK7JmVuXElN889+5B58s4VUxSgO8E4g9zoHVl82DZDwywmdZJKegsJFmUQLt/xrSaSVzp91/jb/aurnOl6Ur2cvLZbzq7U+0myOd93pTs0vF852lPVQ39o/nP1qjnq4aycoBaceJ/WaJSjT6TeQoPezbtIWtkG47KpO4dLB+aS0/9MF97wmo+pdXc5I6b74Iym16VthhhcnNEReAt8dPy5IqblGRgOdtLoaoGu8GbJ55GFn2+fUuh3glXmKPH2yXNUwgMiURm6x+KAJEe9OocsGnb5qJK0y0JwAv1WV9kH67Fc2V2j6jBPpMHlnifbnqnAolFeDXVPMLajTdrVaj2LcYKvod578xU7KqF8qgE8g9wX5/YuLG5cflt++eJz2bn9Z7IsWw5Itipfe+N/K776p/919s53Avtn1s/sgOyHP1O/671P1x+8sJ/d6lPS49K88dXXq8+/8PLm87/1xfULFtNRhr0/ITpEHdJ3i8rYVKlGZI+FQhc4S1OYP8otqcNObzzVSccLQZFcSgzcMwj0YSWXfhpumoMB28U8mYch26yfl28H89RNtB3pDGSehnLvkuccDFkaC44pDHvubc/Ysyt/eGpwm+yp4calb4Q1tbxn3ESApcYc18Om0wAgySHMN3yOjWX1DmFs7Z8Oq2LI/EbtHys3/2YnGXoP/89d1i0iGGTGdxmYDTQAtSn/L3ctsWBVIEwTvAVR6TMNCFj9yZoKn1XH0cCpiBGSwrSFwavEa9mizBKh4ilznkFTASGx5TAdKSC1ZVXTBpQ1obhvVUB/ZVmRLmV2fsnxgEgL4Dp8A3O3ZDZutTbAr89XD0xuVubyhcLcvHnBPP/8LXPjWmVyTLc0RVmaBbKTaXMIz1Mg41n0NG+SSG+CMqrOUVfGZNoARIG6zueHk+BUL2hsill1z/mFm2JzhoMEY+XTw68tHJuDiMru4zoYdddgU27O8kv6sFllm2fgpqArH7VZYxNyQHoojwHvx/Jj4vfo+mD/miiPrcpTNi8T/VvLryFP3oSZWj99MqcChqE+WYJ6QNkT2L/dvAybP0Of9ybGH5pf/H2yJ/EERkt928JpDojHt8yiWcJlonP56fTpxAgzjji/oc+WeTcyvj25Mjr+tPJbhjCe9Jguj6Hyi7W37h8uXMrHDMOkvMTGoP41pjy4iT65PcgecvLtLo+cTEKm5AztodObXp+W8kM9E/KyTLXJ8uyWX1t7YzlG9gfpj4u8sAxmPNmVO0Zz/2c4GZbTybBI/A0zFPGEmWay6vIjYcDVB5nQQ8oTY9eEJ7FO4Nmjx5xAflFWlhiSjfxLY9CAYRscw2U+KbyTa3hSzYvvh8sJv2H5ByfjTkA+2N2EXXUC+W1THrk1gHkhcar1IYN+eev6swDO5hfPPZctFg93IAsYXJebl7KvfuPfzJ589FN93u/7zqyA7Ge+uvkbb7ud/Q955pawqYI8WNevfvzLmw//xgurT
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
background-color: #fff;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 43rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 518rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 2;
|
|||
|
|
top: -16rpx;
|
|||
|
|
left: 116rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date {
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pic {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 240rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 2;
|
|||
|
|
right: 30rpx;
|
|||
|
|
bottom: 0;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.changed {
|
|||
|
|
width: 58rpx;
|
|||
|
|
height: 58rpx;
|
|||
|
|
@include main_rgba_color(theme);
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bar .barbtn {
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.all .week-area {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #FFF;
|
|||
|
|
padding: 35rpx 0;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.all .week-txt {
|
|||
|
|
text-align: center;
|
|||
|
|
width: 13vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.myDateTable {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #FFF;
|
|||
|
|
border-radius: 0 0 24rpx 24rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.myDateTable .dateCell {
|
|||
|
|
width: 13vw;
|
|||
|
|
height: 58rpx;
|
|||
|
|
line-height: 58rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dateCell .cell {
|
|||
|
|
display: flex;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.whiteColor {}
|
|||
|
|
|
|||
|
|
.greenColor {
|
|||
|
|
color: #01b90b;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bgWhite {
|
|||
|
|
//background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bgGray {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.42);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.todayChanged {
|
|||
|
|
width: 58rpx;
|
|||
|
|
height: 58rpx;
|
|||
|
|
@include main_bg_color(theme);
|
|||
|
|
margin: auto;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #FFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.redColor {
|
|||
|
|
color: #ff0000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.redDot {
|
|||
|
|
width: 3px;
|
|||
|
|
height: 3px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 68rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|