可滑动的日历组件
根据现实需求自行调整其他
rili.wxml页面
<!--pages/rili/rili.wxml-->
<view class="rili">
</view>
<view class='month'>
<!-- <view class='arrow' bindtap='prevMonth'>《 </view> -->
<view class="shijian">
<!-- <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange"> -->
<view class="flex">
<view style="color: #1677FF;margin-right: 20rpx;font-weight: bold;">く</view>{{date}}
</view>
<!-- </picker> -->
<view class="jintian" bindtap="jintian">回今天</view>
</view>
<!-- <view class='arrow' bindtap='nextMonth'> 》</view> -->
</view>
<view class='container'>
<view class='calendar flex column s-center'>
<view class='week-row flex m-around wid100'>
<view class='grid weeks' wx:for="{{week}}" wx:key='key'>{{item}}</view>
</view>
<swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'>
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='key'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<view class='views {{x.date === today ? "view" :""}} {{ bindDayTap === x.date ? "view" :""}} {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}}'>
<!-- <view class="weizhi">{{x.date === today?'今天':x.day}}</view> -->
<view class="weizhi">{{x.day}}</view>
<view class="tods" wx:if="{{x.date === today}}">今天</view>
</view>
<!-- <block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="key">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<!-- 当前月 -->
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='key'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'>
<view class='views {{x.date === today || x.date === date+"-05" ? "view" :""}} {{ bindDayTap === x.date ? "view" :""}} {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} '>
<!-- <view class="weizhi">{{x.date === today?'今天':x.day}}</view> -->
<view class="weizhi">{{x.day}}</view>
<view class="tods" wx:if="{{x.date === today}}">今天</view>
<!-- {{x.date === today?'今天':x.day}} -->
</view>
<!-- <block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="key">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<swiper-item class='flex m-around days-table'>
<view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='key'
class='grid fw {{x.date === today?"today":""}} {{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<!-- <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}{{x.month === month?"":"notCurrent"}}'>{{x.date === today?'今天':x.day}}</view> -->
<!-- <view style="color: #1677FF;">{{date+"-01"}}</view> -->
<!-- <view>1{{bindDayTap}}</view> -->
<view class='views {{x.date === date+"-01" ? "view" :""}} {{ bindDayTap === x.date ? "view" :""}} {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}} {{x.month === month?"":"notCurrent"}}'>
<view class="weizhi">{{x.day}}</view>
<view class="tods" wx:if="{{x.date === today}}">今天</view>
</view>
<!-- <block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="key">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='key'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date === beSelectDate ? "choice":"" || bindDayTap === x.date ? "choice" :"" }}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<!-- <view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}'>{{x.date === today?'今天':x.day}}</view> -->
<view class='views {{x.date === today ? "view" :""}} {{ bindDayTap === x.date ? "view" :""}} {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"yellow":""}} {{x.year+"-"+x.month+"-"+x.day === date+"-02"?"blue":""}}'>
<view class="weizhi">{{x.day}}</view>
<view class="tods" wx:if="{{x.date === today}}">今天</view>
</view>
<!-- <block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="key">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">记</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block> -->
</view>
</swiper-item>
</swiper>
<view class="lunbo_yue">
<view><view class="cicle"></view>{{lastMonth}}月</view>
<view class="center"><view class="cicle"></view>{{month}}月</view>
<view><view class="cicle"></view>{{nextMonth}}月</view>
</view>
</view>
<!-- <view class="lists">
<view class="lis">
<view class="my_class">我的排课</view>
<view class="conts">
<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOzTNc?w=40&h=40&q=60&m=6&f=png&u=t"></image>
<view class="con">
<view class="con_title">心理测量与数据分析Psychological measurement san data</view>
<view class="con_type">analysiszoom 线上·直播2</view>
</view>
</view>
<view class="class_date">上课日期：<view>2021-11-11</view></view>
<view class="last_cont">
<view class="study">学习形式：<view>录播</view></view>
<view class="sty_type dian_sty">点我签到</view>
</view>
</view>
<view class="lis">
<view class="my_class">我的排课</view>
<view class="conts">
<image src="https://assets.msn.com/statics/icons/favicon_newtabpage.png"></image>
<view class="con">
<view class="con_title">心理测量与数据分析Psychological measurement san data</view>
<view class="con_type">analysiszoom 线上·直播2</view>
</view>
</view>
<view class="class_date">上课日期：<view>2021-11-11</view></view>
<view class="last_cont">
<view class="study">学习形式：<view>录播</view></view>
<view class="sty_type yi_sty">已签到</view>
</view>
</view>
<view class="lis">
<view class="my_class">我的排课</view>
<view class="conts">
<image src="https://f10.baidu.com/it/u=4136243218,164074552&fm=30&app=106&f=PNG&access=215967316?w=534&h=421&s=C0738F704D1FC9CE5CFD79CA0000E0B2"></image>
<view class="con">
<view class="con_title">心理测量与数据分析Psychological measurement san data</view>
<view class="con_type">analysiszoom 线上·直播2</view>
</view>
</view>
<view class="class_date">上课日期：<view>2021-11-11</view></view>
<view class="last_cont">
<view class="study">学习形式：<view>录播</view></view>
<view class="sty_type deng_sty">待核准</view>
</view>
</view>
<view class="lis">
<view class="my_class">我的排课</view>
<view class="conts">
<image src="https://f10.baidu.com/it/u=4136243218,164074552&fm=30&app=106&f=PNG&access=215967316?w=534&h=421&s=C0738F704D1FC9CE5CFD79CA0000E0B2"></image>
<view class="con">
<view class="con_title">心理测量与数据分析Psychological measurement san data</view>
<view class="con_type">analysiszoom 线上·直播2</view>
</view>
</view>
<view class="class_date">上课日期：<view>2021-11-11</view></view>
<view class="last_cont">
<view class="study">学习形式：<view>录播</view></view>
<view class="sty_type que_sty">缺勤</view>
</view>
</view>
</view> -->
</view>
rili.js页面
// pages/rili/rili.js
Page({
/**
* 页面的初始数据
*/
data: {
day: '',
year: '',
month: '',
date: '2017-01',
today: '',
time:'',
lastMonth:'',
nextMonth:'',
week: ['日', '一', '二', '三', '四', '五', '六'],
calendar: {
first: [],
second: [],
third: [],
fourth: []
},
swiperMap: ['first', 'second', 'third', 'fourth'],
swiperIndex: 1,
showCaldenlar: false,
},
getinit() { //初始化
const date = new Date()
, month = this.formatMonth(date.getMonth() + 1)
, year = date.getFullYear()
, day = this.formatDay(date.getDate())
, today = `${year}-${month}-${day}`
let calendar = this.generateThreeMonths(year, month)
// console.log(calendar)
// 上月
let lastMonth=this.formatMonth(date.getMonth())
// 下月
let nextMonth=this.formatMonth(date.getMonth() + 2)
this.setData({
calendar,
month,
year,
day,
today,
beSelectDate: today,
date: `${year}-${month}`,
lastMonth,
nextMonth
})
// console.log(this.data.date+'-01');
// console.log(this.data.calendar);//整体的日子 数组
// console.log(this.data.month);//当前月
// console.log(this.data.year);//当前年
// console.log(this.data.day);//当前日
// console.log(this.data.today);//今天
// console.log(this.data.beSelectDate);//今天
// console.log(this.data.date);//当前年月
},
showCaldenlar() {
this.setData({
showCaldenlar: !this.data.showCaldenlar
})
},
// 点击 回今天
jintian:function(){
let date = new Date()
,month = this.formatMonth(date.getMonth() + 1)
, year = date.getFullYear()
, day = this.formatDay(date.getDate())
let bindDayTap = year + '-' + month + '-' + day;
console.log(bindDayTap);
this.setData({
bindDayTap:bindDayTap
})
//发送事件监听
this.triggerEvent('bindDayTap', bindDayTap);
console.log(this.data.bindDayTap);
//初始化日历组件UI
this.getinit(year, month, day);
},
/**
*
* 左右滑动
* @param {any} e
*/
swiperChange(e) {
console.log(e);
const lastIndex = this.data.swiperIndex
, currentIndex = e.detail.current
let source = e.detail.source
// console.log(source);
let flag = false
, { year, month, day, today, date, calendar, swiperMap } = this.data
, change = swiperMap[(lastIndex + 2) % 4]
, time = this.countMonth(year, month)
, key = 'lastMonth'
console.log('上一个索引',lastIndex,'当前索引',currentIndex)
console.log(time);
// 回今天
let bindDayTap = year + '-' + month + '-' + day;
//发送事件监听
this.triggerEvent('bindDayTap', bindDayTap);
// console.log(bindDayTap);
if (lastIndex > currentIndex) {
lastIndex === 3 && currentIndex === 0
? flag = true
: null
} else {
lastIndex === 0 && currentIndex === 3
? null
: flag = true
}
if (flag) {
key = 'nextMonth'
}
console.log(key);
console.log(time[key].year)
year = time[key].year
month = time[key].month
date = `${year}-${month}`
day = ''
if (today.indexOf(date) !== -1) {
day = today.slice(-2)
}
time = this.countMonth(year, month)
calendar[change] = null
calendar[change] = this.generateAllDays(time[key].year, time[key].month)
// 上月
let lastMonth=month-1
if (lastMonth==0) {
lastMonth=12
} else if(lastMonth==1){
lastMonth=`01`
} else if(lastMonth==2){
lastMonth=`02`
} else if(lastMonth==3){
lastMonth=`03`
} else if(lastMonth==4){
lastMonth=`04`
} else if(lastMonth==5){
lastMonth=`05`
} else if(lastMonth==6){
lastMonth=`06`
} else if(lastMonth==7){
lastMonth=`07`
} else if(lastMonth==8){
lastMonth=`08`
} else if(lastMonth==9){
lastMonth=`09`
}
// console.log(lastMonth);
// 下月
let nextMonth=month-1+2
if (nextMonth==13) {
nextMonth=1
} else if(nextMonth==1){
nextMonth=`01`
} else if(nextMonth==2){
nextMonth=`02`
} else if(nextMonth==3){
nextMonth=`03`
} else if(nextMonth==4){
nextMonth=`04`
} else if(nextMonth==5){
nextMonth=`05`
} else if(nextMonth==6){
nextMonth=`06`
} else if(nextMonth==7){
nextMonth=`07`
} else if(nextMonth==8){
nextMonth=`08`
} else if(nextMonth==9){
nextMonth=`09`
}
// console.log(nextMonth);
// 解决真机无限滑动问题
if (source === 'touch') {
this.setData({
swiperIndex: currentIndex,
})
}
this.setData({
// swiperIndex: currentIndex,
//文档上不推荐这么做，但是滑动并不会改变current的值，所以随之而来的计算会出错
year,
month,
date,
day,
calendar,
lastMonth,
nextMonth
})
// console.log(calendar)
},
/**
*
* 点击切换月份，生成本月视图以及临近两个月的视图
* @param {any} year
* @param {any} month
* @returns {object} calendar
*/
generateThreeMonths(year, month) {
let { swiperIndex, swiperMap, calendar } = this.data
, thisKey = swiperMap[swiperIndex]
, lastKey = swiperMap[swiperIndex - 1 === -1 ? 3 : swiperIndex - 1]
, nextKey = swiperMap[swiperIndex + 1 === 4 ? 0 : swiperIndex + 1]
, time = this.countMonth(year, month)
delete calendar[lastKey]
calendar[lastKey] = this.generateAllDays(time.lastMonth.year, time.lastMonth.month)
delete calendar[thisKey]
calendar[thisKey] = this.generateAllDays(time.thisMonth.year, time.thisMonth.month)
delete calendar[nextKey]
calendar[nextKey] = this.generateAllDays(time.nextMonth.year, time.nextMonth.month)
return calendar
},
bindDayTap(e) {
let { month, year } = this.data
, time = this.countMonth(year, month)
, tapMon = e.currentTarget.dataset.month
, day = e.currentTarget.dataset.day
if (tapMon == time.lastMonth.month) {
this.changeDate(time.lastMonth.year, time.lastMonth.month)
} else if (tapMon == time.nextMonth.month) {
this.changeDate(time.nextMonth.year, time.nextMonth.month)
} else {
this.setData({
day
})
}
// 回今天
let bindDayTap = year + '-' + month + '-' + day;
//发送事件监听
this.triggerEvent('bindDayTap', bindDayTap);
console.log(bindDayTap);
let beSelectDate = e.currentTarget.dataset.date;
this.setData({
beSelectDate,
showCaldenlar: false,
bindDayTap
})
// console.log(beSelectDate)
},
bindDateChange(e) {
if (e.detail.value === this.data.date) {
return
}
const month = e.detail.value.slice(-2)
, year = e.detail.value.slice(0, 4)
this.changeDate(year, month)
},
prevMonth(e) {
let { year, month } = this.data
, time = this.countMonth(year, month)
this.changeDate(time.lastMonth.year, time.lastMonth.month)
},
nextMonth(e) {
let { year, month } = this.data
, time = this.countMonth(year, month)
this.changeDate(time.nextMonth.year, time.nextMonth.month)
},
/**
*
* 直接改变日期
* @param {any} year
* @param {any} month
*/
changeDate(year, month) {
let { day, today } = this.data
, calendar = this.generateThreeMonths(year, month)
, date = `${year}-${month}`
date.indexOf(today) === -1
? day = '01'
: day = today.slice(-2)
this.setData({
calendar,
day,
date,
month,
year,
})
},
/**
*
* 月份处理
* @param {any} year
* @param {any} month
* @returns
*/
countMonth(year, month) {
let lastMonth = {
month: this.formatMonth(parseInt(month) - 1)
}
, thisMonth = {
year,
month,
num: this.getNumOfDays(year, month)
}
, nextMonth = {
month: this.formatMonth(parseInt(month) + 1)
}
lastMonth.year = parseInt(month) === 1 && parseInt(lastMonth.month) === 12
? `${parseInt(year) - 1}`
: year + ''
lastMonth.num = this.getNumOfDays(lastMonth.year, lastMonth.month)
nextMonth.year = parseInt(month) === 12 && parseInt(nextMonth.month) === 1
? `${parseInt(year) + 1}`
: year + ''
nextMonth.num = this.getNumOfDays(nextMonth.year, nextMonth.month)
// console.log(nextMonth.month);
return {
lastMonth,
thisMonth,
nextMonth
}
},
currentMonthDays(year, month) {
const numOfDays = this.getNumOfDays(year, month)
return this.generateDays(year, month, numOfDays)
},
/**
* 生成上个月应显示的天
* @param {any} year
* @param {any} month
* @returns
*/
lastMonthDays(year, month) {
const lastMonth = this.formatMonth(parseInt(month) - 1)
, lastMonthYear = parseInt(month) === 1 && parseInt(lastMonth) === 12
? `${parseInt(year) - 1}`
: year
, lastNum = this.getNumOfDays(lastMonthYear, lastMonth) //上月天数
let startWeek = this.getWeekOfDate(year, month - 1, 1) //本月1号是周几
, days = []
if (startWeek == 7) {
return days
}
const startDay = lastNum - startWeek
return this.generateDays(lastMonthYear, lastMonth, lastNum, { startNum: startDay, notCurrent: true })
},
/**
* 生成下个月应显示天
* @param {any} year
* @param {any} month
* @returns
*/
nextMonthDays(year, month) {
const nextMonth = this.formatMonth(parseInt(month) + 1)
, nextMonthYear = parseInt(month) === 12 && parseInt(nextMonth) === 1
? `${parseInt(year) + 1}`
: year
, nextNum = this.getNumOfDays(nextMonthYear, nextMonth) //下月天数
let endWeek = this.getWeekOfDate(year, month) //本月最后一天是周几
, days = []
, daysNum = 14
// if (endWeek == 6) {
// return days
// } else if (endWeek == 7) {
// daysNum = 6
// } else {
// daysNum = 6 - endWeek
// }
return this.generateDays(nextMonthYear, nextMonth, daysNum, { startNum: 1, notCurrent: true })
},
/**
*
* 生成一个月的日历
* @param {any} year
* @param {any} month
* @returns Array
*/
generateAllDays(year, month) {
let lastMonth = this.lastMonthDays(year, month)
, thisMonth = this.currentMonthDays(year, month)
, nextMonth = this.nextMonthDays(year, month)
, days = [].concat(lastMonth, thisMonth, nextMonth)
// console.log("jin")
// console.log(year, month, days)
return days
},
/**
*
* 生成日详情
* @param {any} year
* @param {any} month
* @param {any} daysNum
* @param {boolean} [option={
* startNum:1,
* grey: false
* }]
* @returns Array 日期对象数组
*/
generateDays(year, month, daysNum, option = {
startNum: 1,
notCurrent: false
}) {
const weekMap = ['一', '二', '三', '四', '五', '六', '日']
let days = []
for (let i = option.startNum; i <= daysNum; i++) {
let week = weekMap[new Date(year, month - 1, i).getUTCDay()]
let day = this.formatDay(i)
days.push({
date: `${year}-${month}-${day}`,
event: false,
day,
week,
month,
year
})
}
return days
},
/**
*
* 获取指定月第n天是周几 |
* 9月第1天： 2017, 08, 1 |
* 9月第31天：2017, 09, 0
* @param {any} year
* @param {any} month
* @param {number} [day=0] 0为最后一天，1为第一天
* @returns number 周 1-7,
*/
getWeekOfDate(year, month, day = 0) {
let dateOfMonth = new Date(year, month, 0).getUTCDay() + 1;
dateOfMonth == 7 ? dateOfMonth = 0 : '';
return dateOfMonth;
},
/**
*
* 获取本月天数
* @param {number} year
* @param {number} month
* @param {number} [day=0] 0为本月0最后一天的
* @returns number 1-31
*/
getNumOfDays(year, month, day = 0) {
return new Date(year, month, day).getDate()
},
/**
*
* 月份处理
* @param {number} month
* @returns format month MM 1-12
*/
formatMonth(month) {
let monthStr = ''
if (month > 12 || month < 1) {
monthStr = Math.abs(month - 12) + ''
} else {
monthStr = month + ''
}
monthStr = `${monthStr.length > 1 ? '' : '0'}${monthStr}`
return monthStr
},
formatDay(day) {
return `${(day + '').length > 1 ? '' : '0'}${day}`
},
// 列表
// riliList: function(){
// // /home/home/get_class_date_list
// let arr = {
// classId:6,
// year:2021,
// type:0,
// month:12
// }
// wx.request({
// url:'/home/home/get_class_date_list',
// method:"post",
// register:true,
// data:{
// data:arr
// },
// success (res) {
// console.log(res)
// }
// })
// },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.riliList()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.getinit()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
rili.wxss页面
/* pages/rili/rili.wxss */
.container{
width: 100%;
height: auto;
padding: 6rpx;
font-size: 28rpx;
background: #F9F9F9;
}
.month{
width: 100%;
/* height: 50rpx; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
font-size: 32rpx;
color:#333333;
font-weight: 700;
border-bottom: 1px solid #f5f5f5;
padding: 19rpx 30rpx;
box-sizing: border-box;
}
.shijian{
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 50rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.jintian{
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B4222D;
line-height: 30rpx;
padding: 7rpx 22rpx;
border: 1px solid #B4222D;
border-radius: 22rpx;
}
.days-table {
flex-wrap: wrap;
align-content: flex-start;
}
.wid100{
width: 100%;
}
.calendar{
z-index:10000;
}
.grid {
height:85rpx;
padding: 3rpx 0;
text-align: center;
font-size:32rpx;
color:#333333;
flex: 1;
}
.weeks{
height: auto !important;
background: #F6F6F6;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
/* color: #A1A1A1; */
line-height: 37rpx;
}
.today {
/* color: red; */
}
.grid .views {
height:85rpx;
width:106rpx;
flex: 1;
position: relative;
background: #fff;
}
.yellow{
color: #fff !important;
background: #F5B31A !important;
}
.blue{
color: #fff !important;
background: #84B8FF !important;
}
.weizhi{
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 45rpx;
/* color: #666; */
position: absolute;
top: 7rpx;
left: 14rpx;
}
.tods{
position: absolute;
bottom: 3rpx;
right: 4rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333;
}
.red{
border: 1rpx solid #B4222D !important;
}
.choice .view{
flex: 1;
/* border-radius: 50%; */
/* background: #88a1fd; */
border: 1px solid #B4222D !important;
background-position:center;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.fw {
font-weight: 700;
font-size: 28rpx;
position: relative;
border-right: 1px solid #F6F6F6;
}
.grid text.da{
display: flex;
width: 32rpx;
height: 32rpx;
position: absolute;
right:12rpx;
top:1rpx;
font-weight: 1000;
background: red;
border-radius: 50%;
overflow: hidden;
text-align: center;
line-height: 24rpx;
color: #ffffff;
font-size: 8px;
align-items: center;
justify-content: center
}
.grid text.da2 {
width: 100%;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 800;
color: red;
position: absolute;
bottom:-25rpx;
display: flex;
left: -4rpx;
align-items: center;
justify-content: center;
}
/* 非本月日期 */
.notCurrent {
color: silver;
font-weight: normal;
position: relative;
}
.day-hover {
background: red;
}
.container .corred {
color: red;
}
.swpier-box {
/* height: 600rpx; */
height: 520rpx;
width: 100%;
}
.arrow {
width: 100rpx;
color: #88a1fd;
text-align: center;
}
.flex {
display: flex;
}
/* 轴向 */
.column {
flex-direction: column;
}
/* 主轴方向 */
.m-start {
justify-content: flex-start;
}
.m-end {
justify-content: flex-end;
}
.m-around {
justify-content: space-around;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.m-between {
justify-content: space-between;
}
.m-center {
justify-content: center;
}
/* 侧轴方向 */
.s-start {
align-items: flex-start;
}
.s-end {
align-items: flex-end;
}
.s-around {
align-items: space-around;
}
.s-between {
align-items: space-between;
}
.s-center {
align-items: center;
}
/* 轮播月 */
.lunbo_yue{
/* width: 50%; */
display: flex;
justify-content: center;
/* width: auto; */
/* height: 20rpx; */
}
.lunbo_yue view{
display: flex;
align-items: center;
width: auto;
margin-right: 13rpx ;
color: #A1A1A1;
}
.lunbo_yue .center{
color: #B4222D;
margin: 0 48rpx;
}
.lunbo_yue .center .cicle{
background: #B4222D;
}
.lunbo_yue .cicle{
width: 12rpx;
height: 12rpx;
background: #DDDDDD;
border-radius: 50%;
}
/* 列表 */
.lis{
background-color: #fff;
margin: 14rpx 26rpx 0;
padding: 26rpx 24rpx 22rpx;
box-sizing: border-box;
border-radius: 6rpx;
}
.lis .my_class{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 45rpx;
}
.lis .conts{
margin-top: 24rpx;
display: flex;
justify-content: space-between;
}
.lis .conts image{
width: 210rpx;
height: 118rpx;
margin-right: 26rpx;
}
.lis .conts .con{
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 37rpx;
width: 414rpx;
}
.lis .class_date{
font-size: 26rpx;
color: #333333;
margin-top: 23rpx;
display: flex;
font-family: PingFangSC-Regular, PingFang SC;
}
.lis .class_date view{
color: #666 !important;
}
.lis .last_cont{
display: flex;
justify-content: space-between;
align-items: center;
}
.lis .last_cont .study{
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 37rpx;
display: flex;
}
.lis .last_cont .study view{
color: #666 !important;
}
.lis .last_cont .sty_type{
/* padding: 12rpx 32rpx; */
width: 172rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 37rpx;
letter-spacing: 1rpx;
}
.lis .last_cont .dian_sty{
background: #B4222D;
/* background: #ffde00ff; */
/* background: #de2910ff; */
}
.lis .last_cont .yi_sty{
background: #B0B0B0;
}
.lis .last_cont .deng_sty{
background: #99C7FF;
}
.lis .last_cont .que_sty{
background: #D2636B;
}
2万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
