8.28 修改事件详情相关概念模块样式，增加股票详情信息来源展示

pages/invest/invest.vue

@@ -4,14 +4,14 @@
 		<view class="navTitle fixed" :style="'top:'+menuTop+'px;line-height:'+menuH+'px;'">投资</view>
 		<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
 			<image class="icon" src="/static/icon/home/search.png" mode="widthFix"></image>
-			<input class="flex1" type="text" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
+			<input class="flex1" type="text" v-model="keywords" placeholder="搜索话题/股票名称" placeholder-style="color:#94989A"/>
 			<view class="line"></view>
-			<view class="search">搜索</view>
+			<view class="search" @click="clickSearch()">搜索</view>
 		</view>
-		<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
+		<scroll-view scroll-y class="contentC fixed" :style="'top:'+contentTop+'px;'" @scrolltolower="loadMoreData()">
 			<view class="">
 				<view class="todayC flex" >
-					<view class="todayDateC flex" @click="clickExpandOrRetract()">
+					<view class="todayDateC flex" @click="clickSelectMonth()">
 						<view class="date">{{selectDate}}</view>
 						<image class="icon" src="/static/icon/invest/calendar.png" mode="widthFix"></image>
 					</view>
@@ -64,7 +64,8 @@
 				<view class="expandBgC flexCenter">
 					<view class="expandC flex" @click="clickExpandOrRetract()">
 						<text>{{isExpand?'收起':'展开'}}</text> 
-						<image class="arrow" src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
+						<image v-if="isExpand" class="arrow" src="/static/icon/invest/upArrow.png" mode="widthFix"></image>
+						<image v-else class="arrow" src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
 					</view>
 				</view>
 			</view>
@@ -81,9 +82,9 @@
 				<view class="item" v-for="(item,index) in eventList" :key="index" @click="clickEventItem(item.id)">
 					<view class="flex">
 						<view class="time flex1">{{getLocaleHourMinute(item.start_time)}}</view>
-						<view class="starC relative">
+						<view class="starC">
 							<view class="starList flex" >
-								<image class="icon" :src="(sindex<(item.star)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
+								<image class="icon" :src="(sindex<(item.category.star_rating)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
 							</view>
 						</view>
 					</view>
@@ -91,19 +92,19 @@
 						<view class="category">{{item.category.event_type}}</view>
 						<view class="title flex1">{{item.title}}</view>
 					</view>
-					<view class="labelC">
-						<view class="label">
-							
+					<scroll-view scroll-x class="labelC">
+						<view class="label" v-for="(titem,tindex) in item.tags" :key="tindex">
+							{{titem}}
 						</view>
-					</view>
+					</scroll-view>
 					<view class="content">
-						<text>{{item.description}}</text>	
+						<ua-markdown :source="replaceAnswerLabel(item.description)" />
 					</view>
-					<scroll-view v-if="item.concepts" scroll-x class="percentList">
-						<view class="percentItem" v-for="(citem,cindex) in JSON.parse(item.concepts)" :key="cindex">
-							{{citem[0]}}
-							<zui-progress-circle :position="citem[2]" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F97316','#E3E3E3']">
-								<view class="num">{{citem[2]*100}}%</view>
+					<scroll-view v-if="item.related_concepts" scroll-x class="percentList">
+						<view class="percentItem" v-for="(citem,cindex) in item.related_concepts" :key="cindex">
+							{{citem.name}}
+							<zui-progress-circle :position="citem.score" :range="[270,630]" :size="26" :ring-width="2" :texture="['#F97316','#E3E3E3']">
+								<view class="num">{{citem.score*100}}%</view>
 							</zui-progress-circle>
 						</view>
 					</scroll-view>
@@ -114,30 +115,58 @@
 					<view class="flex">
 						<view class="time flex1">{{getLocaleHourMinute(item.created_at)}}</view>
 						<view class="starC relative">
-							<view class="starBgList flex">
-								<image class="icon" src="/static/icon/invest/star.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
-							</view>
-							<view class="starList absolute flex">
-								<image class="icon" src="/static/icon/invest/star_s.png" mode="widthFix" v-for="(item,index) in 5" :key="index"></image>
+							<view class="starList flex" >
+								<image class="icon" :src="(sindex<(item.star)?'/static/icon/invest/star_s.png':'/static/icon/invest/star.png')" mode="widthFix" v-for="(sitem,sindex) in 5" :key="index"></image>
 							</view>
 						</view>
 					</view>
 					<view class="title">{{item.title}}</view>
 					<view class="valueList flex between">
-						<view class="pre">前值 -7.1</view>
-						<view class="prediction">预测 93</view>
-						<view class="actual">实际 ————</view>
+						<view class="pre">前值 {{item.former}}</view>
+						<view class="prediction">预测 {{item.forecast?item.forecast:'--'}}</view>
+						<view class="actual">实际 {{item.fact?item.fact:'--'}}</view>
 					</view>
 				</view>
 			</view>
-		</view>
+		</scroll-view>
+		<uni-popup ref="popup" type="top">
+			<view class="popup" :style="'margin-top:'+navH+'px;'">
+				<view class="yearMonthC flex">
+					<view class="preC btn flexCenter" @click="clickPreMonth()">
+						<image class="icon" src="/static/icon/home/monthLeftArrow.png" mode="widthFix"></image>
+					</view>
+					<view class="yearMonth flex1">{{selectMonth}}</view>
+					<view class="nextC btn flexCenter" @click="clickNextMonth()">
+						<image class="icon" src="/static/icon/home/monthRightArrow.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="weekList flex">
+					<view class="item flex1" v-for="(item,index) in weekList" :key="index">{{item}}</view>
+				</view>
+				<view class="monthDateList flexWrap">
+					<view class="item flexColumnCenter" v-for="(item,index) in calendarDateList[selectMonthIndex]" :key="index" @click="clickSelectDate(item)">
+						<block v-if="item.isToday||item.date==selectDate">
+							<view class="date today">{{item.day}}</view>
+						</block>
+						<block v-else>
+							<block v-if="!item.isCurrentMonth">
+								<view class="date notCurrentMonth">{{item.day}}</view>
+							</block>
+							<block v-else>
+								<view class="date">{{item.day}}</view>
+							</block>
+						</block>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import { inject } from 'vue'
 	import { stockCategoryList, calendarEventList, calendarDataList, calendarEventCount,  } from '@/request/api'
-	import { getLocaleHourMinute } from '@/utils/util'
+	import { getLocaleHourMinute, replaceAnswerLabel } from '@/utils/util'
 	
 	export default {
 		data() {
@@ -147,7 +176,11 @@
 				navH:inject('navHeight'),
 				windowWidth:inject('windowWidth'),
 				contentTop:'',
-				todayDate:'',	//今日日期
+				keywords:'',		//搜索关键字
+				todayDate:'',		//今日日期
+				calendarDateList:[],	//日历日期
+				selectMonth:'',			//选中月份
+				selectMonthIndex:0,		//选中月份下标
 				weekList:['一','二','三','四','五','六','日'],
 				weekDateList:[],		//当前周日期
 				monthDateList:[],		//当前月日期
@@ -162,73 +195,104 @@
 				progress: 75,
 				eventList:[],	//事件列表
 				dataList:[],	//数据列表
-				getLocaleHourMinute:getLocaleHourMinute
+				page:1,
+				loadAll:false,
+				getLocaleHourMinute:getLocaleHourMinute,
+				replaceAnswerLabel:replaceAnswerLabel
 			}
 		},
 		onLoad() {
 			let date = new Date()
 			this.contentTop = this.navH + (75+20)/750*inject('windowWidth')
-			let year = date.getFullYear()
-			let month = date.getMonth()+1
-			let day = date.getDate()
-			this.todayDate = this.selectDate = date.getFullYear()+'-'+(month>9?month:('0'+month))+'-'+(day>9?day:('0'+day))
+			let currentYear = date.getFullYear()
+			let currentMonth = date.getMonth()+1
+			let currentDay = date.getDate()
+			this.todayDate = this.selectDate = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(currentDay>9?currentDay:('0'+currentDay))
 			let week = date.getDay() || 7
 			let diff = week - 1
 			let daysOfWeek = [];
 			for (var i = 0; i < 7; i++) {
 				let newDate = new Date()
-				newDate.setDate(day - diff + i); // 设置日期为当前周的相应日期
+				newDate.setDate(currentDay - diff + i); // 设置日期为当前周的相应日期
 				let newDay = newDate.getDate()
-				let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
-				daysOfWeek.push({date:date,day:newDay,isToday:newDay==day?true:false});
+				let date = currentYear+'-'+(currentMonth>9?currentMonth:('0'+currentMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+				daysOfWeek.push({date:date,day:newDay,isToday:newDay==currentDay?true:false});
 			}
 			this.weekDateList = daysOfWeek
-			let firstDayOfMonth = new Date();
-			firstDayOfMonth.setDate(1);
-			//获取当前月天数
-			let currentMonthDay = new Date(year, month, 0).getDate()
-			let firstDayWeek = firstDayOfMonth.getDay() || 7
-			let daysOfMonth = []
-			for (var i = 1; i <= currentMonthDay; i++) {
-				let newDate = new Date()
-				newDate.setDate(i); // 设置日期为当前月的相应日期
-				let newDay = newDate.getDate()
-				let date = year+'-'+(month>9?month:('0'+month))+'-'+(newDay>9?newDay:('0'+newDay))
-				daysOfMonth.push({date:date,day:newDay,isToday:newDay==day?true:false,isCurrentMonth:true});
-			}
-			for (var i = 0; i < firstDayWeek-1; i++) {
-				//获取上月天数 
-				let lastMonthDay = new Date(year, month-1, 0).getDate()	
-				//获取上月日期
-				let newDate = new Date(year,month-2,lastMonthDay-i)
-				let newMonth = newDate.getMonth()+1 
-				let newDay = newDate.getDate() 
-				let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
-				daysOfMonth.unshift({date:date,day:newDay,isToday:false,isCurrentMonth:false});
-			}
-			// 下一个月的第一天
-			let nextMonthFirstDay = new Date(year, month, 1);
-			// 然后减去一天就是当前月的最后一天
-			let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
-			let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
-			for (var i = 1; i < 8-lastDayWeek; i++) {
-				if(month>11)
-				{
-					month = -1
-					year ++
+			let calendarDateList = []
+			this.selectMonthIndex = 20*12+currentMonth-1
+			this.selectMonth = currentYear + '-' + (currentMonth>9?currentMonth:('0'+currentMonth))
+			for (var i = currentYear-20; i < currentYear+20; i++) {
+				for (var j = 0; j < 12; j++) {
+					let date = new Date(i,j+1,0)
+					let firstDayOfMonth = new Date(i,j+1,0);
+					firstDayOfMonth.setDate(1);
+					//获取当前月天数
+					let currentMonthDay = date.getDate()
+					let firstDayWeek = firstDayOfMonth.getDay() || 7
+					let daysOfMonth = []
+					for (var k = 1; k <= currentMonthDay; k++) {
+						let newDate = new Date(i,j+1,0)
+						newDate.setDate(k); // 设置日期为当前月的相应日期
+						let newMonth = newDate.getMonth()+1
+						let newDay = newDate.getDate()
+						let time = newDate.getTime()
+						let date = i+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+						daysOfMonth.push({date:date,year:i,month:newMonth,day:newDay,isToday:(i==currentYear&&newMonth==currentMonth&&newDay==currentDay)?true:false,isCurrentMonth:true,timestamp:time});
+					}
+					for (var k = 0; k < firstDayWeek-1; k++) {
+						//获取上月天数 
+						let year = i
+						let month = j
+						if(j<1)
+						{
+							year = i - 1
+							month = 12
+						}
+						let lastMonthDay = new Date(year, month, 0).getDate()	
+						//获取上月日期
+						let newDate = new Date(year,month-1,lastMonthDay-k) 
+						let newMonth = newDate.getMonth()+1 
+						let newDay = newDate.getDate() 
+						let time = newDate.getTime()
+						let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+						daysOfMonth.unshift({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
+					}
+					// 下一个月的第一天
+					let nextMonthFirstDay = new Date(i, j+1, 1);
+					// 然后减去一天就是当前月的最后一天
+					let lastDayOfMonth = new Date(nextMonthFirstDay - (24 * 60 * 60 * 1000)); // 减去一天的毫秒数
+					let lastDayWeek = lastDayOfMonth.getDay() || 7; // 返回0（星期天）到6（星期六）之
+					for (var k = 1; k < 8-lastDayWeek; k++) {
+						let year = i
+						let month = j
+						if(month>11)
+						{
+							month = 0
+							year ++
+						}
+						//获取下月日期
+						let newDate = new Date(year,month + 1,k)
+						let newMonth = newDate.getMonth()+1 
+						let newDay = newDate.getDate() 
+						let time = newDate.getTime()
+						let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
+						daysOfMonth.push({date:date,year:year,month:newMonth,day:newDay,isToday:false,isCurrentMonth:false,timestamp:time});
+					}
+					calendarDateList.push(daysOfMonth)
 				}
-				//获取下月日期
-				let newDate = new Date(year,month + 1,i)
-				let newMonth = newDate.getMonth()+1 
-				let newDay = newDate.getDate() 
-				let date = year+'-'+(newMonth>9?newMonth:('0'+newMonth))+'-'+(newDay>9?newDay:('0'+newDay))
-				daysOfMonth.push({date:date,day:newDay,isToday:false,isCurrentMonth:false});
 			}
-			this.monthDateList = daysOfMonth
+			this.calendarDateList = calendarDateList
+			this.monthDateList = calendarDateList[this.selectMonthIndex]
 			this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*inject('windowWidth')
-			this.getStockCategoryListData()
-			this.getEventListData()
-			this.getCurrentMonthEventCountData()
+			Promise.all([this.getStockCategoryListData(),this.getCurrentMonthEventCountData()]).then(res=>{
+				this.getEventListData()
+			}).catch(error=>{
+				
+			})
+		},
+		onPullDownRefresh() {
+			this.reloadData()
 		},
 		computed: {
 		    circumference() {
@@ -236,6 +300,42 @@
 		    }
 		},
 		methods: {
+			reloadData()
+			{
+				this.page = 1 
+				this.loadAll = false
+				if(this.selectTab==0)
+				{
+					this.getEventListData()
+				}else 
+					this.getDataListData()
+			},
+			loadMoreData()
+			{
+				if(!this.loadAll)
+				{
+					this.page ++
+					if(this.selectTab==0)
+					{
+						this.getEventListData()
+					}else 
+						this.getDataListData()
+				}
+			},
+			/**
+			 * 点击搜索
+			 */
+			clickSearch()
+			{
+				this.reloadData()
+			},
+			/**
+			 * 点击选择月份
+			 */
+			clickSelectMonth()
+			{
+				this.$refs['popup'].open()
+			},
 			/**
 			 * 点击今日日期
 			 */
@@ -244,11 +344,10 @@
 				if(this.selectDate!=this.todayDate)
 				{
 					this.selectDate = this.todayDate
-					if(this.selectTab==0)
-					{
-						this.getEventListData()
-					}else 
-						this.getDataListData()
+					let date = new Date()
+					let currentMonth = date.getMonth()+1
+					this.selectMonthIndex = 20*12+currentMonth-1
+					this.reloadData()
 				}
 			},
 			/**
@@ -263,6 +362,46 @@
 				}else
 					this.listTop = this.contentTop + (68+40+96+74+70+74+22)/750*this.windowWidth
 			},
+			/**
+			 * 点击上个月
+			 */
+			clickPreMonth()
+			{
+				if(this.selectMonthIndex>0)
+				{
+					this.selectMonthIndex --
+					let monthList = this.calendarDateList[this.selectMonthIndex]
+					let month = ''
+					for (let item of monthList) {
+						if(item.isCurrentMonth)
+						{
+							month = item.month
+							break
+						}
+					}					
+					this.selectMonth = this.calendarDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
+				}
+			},
+			/**
+			 * 点击下个月
+			 */
+			clickNextMonth()
+			{
+				if(this.selectMonthIndex<this.calendarDateList.length-1)
+				{
+					this.selectMonthIndex ++
+					let monthList = this.calendarDateList[this.selectMonthIndex]
+					let month = ''
+					for (let item of monthList) {
+						if(item.isCurrentMonth)
+						{
+							month = item.month
+							break
+						}
+					}
+					this.selectMonth = this.calendarDateList[this.selectMonthIndex][0].year+'-'+(month>9?month:('0'+month))
+				}
+			},
 			/**
 			 * 选中日期
 			 * @param {Object} item
@@ -272,11 +411,7 @@
 				if(this.selectDate!=item.date)
 				{
 					this.selectDate = item.date
-					if(this.selectTab==0)
-					{
-						this.getEventListData()
-					}else 
-						this.getDataListData()
+					this.reloadData()
 				}
 			},
 			/**
@@ -287,11 +422,7 @@
 				if(this.selectTab!=index)
 				{
 					this.selectTab = index 
-					if(this.selectTab==0)
-					{
-						this.getEventListData()
-					}else 
-						this.getDataListData()
+					this.reloadData()
 				}
 			},
 			/**
@@ -302,11 +433,7 @@
 				if(this.selectTopCategory!=index)
 				{
 					this.selectTopCategory = index 
-					if(this.selectTab==0)
-					{
-						this.getEventListData()
-					}else 
-						this.getDataListData()
+					this.reloadData()
 				}
 			},
 			/**
@@ -323,41 +450,58 @@
 			 */
 			getStockCategoryListData()
 			{
-				stockCategoryList().then(res=>{
-					if(res.code==200)
-					{
-						res.data.unshift({primary_sector:'全部',sub_sectors:[]})
-						this.stockCategoryList = res.data
-					}else
-						uni.showToast({
-							title:res.message,
-							icon:'none'
-						})
-				}).catch(error=>{
-					
+				return new Promise((resolve,reject)=>{
+					stockCategoryList().then(res=>{
+						if(res.code==200)
+						{
+							res.data.unshift({primary_sector:'全部',sub_sectors:[]})
+							this.stockCategoryList = res.data
+							resolve(1)
+						}else
+						{
+							uni.showToast({
+								title:res.message,
+								icon:'none'
+							})
+							reject(1)
+						}
+							
+					}).catch(error=>{
+						reject(1)
+					})
 				})
+				
 			},
 			/**
 			 * 获取事件列表数据
 			 */
 			getEventListData()
 			{
-				let param = {start:this.selectDate}
+				let param = {start:this.selectDate,q:this.keywords,page:this.page}
 				if(this.selectTopCategory>0)
 				{
 					param.category = this.stockCategoryList[this.selectTopCategory].primary_sector
 				}
 				calendarEventList(param).then(res=>{
+					uni.stopPullDownRefresh()
 					if(res.code==200)
 					{
-						this.eventList = res.data.events
+						if(res.data.page==1)
+						{
+							this.eventList = res.data.events
+						}else 
+							this.eventList = this.eventList.concat(res.data.events)
+						if(res.data.page==res.data.total_pages)
+						{
+							this.loadAll = true
+						}
 					}else 
 						uni.showToast({
 							title:res.message,
 							icon:'none'
 						})
 				}).catch(error=>{
-					
+					uni.stopPullDownRefresh()
 				})
 			},
 			/**
@@ -365,7 +509,11 @@
 			 */
 			getDataListData()
 			{
-				let param = {start:this.selectDate}
+				let param = {start:this.selectDate,q:this.keywords,page:this.page}
+				if(this.selectTopCategory>0)
+				{
+					param.category = this.stockCategoryList[this.selectTopCategory].primary_sector
+				}
 				calendarDataList(param).then(res=>{
 					if(res.code==200)
 					{
@@ -376,7 +524,7 @@
 							icon:'none'
 						})
 				}).catch(error=>{
-					
+					uni.stopPullDownRefresh()
 				})
 			},
 			/**
@@ -384,26 +532,29 @@
 			 */
 			getCurrentMonthEventCountData()
 			{
-				calendarEventCount().then(res=>{
-					for (let item of res) {
-						let date = item.start
-						for (let s of this.weekDateList) {
-							if(s.date == date)
-							{
-								 s.eventCount = item.title
-								 s.className = item.className
+				return new Promise((resolve,reject)=>{
+					calendarEventCount().then(res=>{
+						for (let item of res) {
+							let date = item.start
+							for (let s of this.weekDateList) {
+								if(s.date == date)
+								{
+									 s.eventCount = item.title
+									 s.className = item.className
+								}
+							}
+							for (let s of this.monthDateList) {
+								if(s.date == date)
+								{
+									s.eventCount = item.title
+									s.className = item.className
+								}
 							}
 						}
-						for (let s of this.monthDateList) {
-							if(s.date == date)
-							{
-								s.eventCount = item.title
-								s.className = item.className
-							}
-						}
-					}
-				}).catch(error=>{
-					
+						resolve(1)
+					}).catch(error=>{
+						reject(1)
+					})
 				})
 			}
 		}
@@ -723,14 +874,22 @@
 		}
 		.labelC
 		{
-			display: inline-block;
+			margin-top: 12rpx;
 			.label 
 			{
+				display: inline-block;
+				margin-right: 10rpx;
+				padding: 0 10rpx;
+				line-height: 30rpx;
+				font-size: 20rpx;
+				font-weight: 500;
 				border-radius: 5rpx;
+				border: solid 1rpx #333;
 			}
 		}
 		.content 
 		{
+			margin-top: 20rpx;
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 3;
@@ -824,4 +983,89 @@
 		}
 	}
 }
+.popup
+{
+	background-color: white;
+	padding: 30rpx 0;
+	.yearMonthC
+	{
+		padding: 0 30rpx;
+		.yearMonth
+		{
+			text-align: center;
+			font-size: 24rpx;
+		}
+		.btn 
+		{
+			background-color: #f8f8f8;
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 50%;
+			.icon 
+			{
+				display: block;
+				width: 24rpx;
+				height: auto;
+			}
+		}
+	}
+	.weekList
+	{
+		margin-top: 20rpx;
+		padding: 0 30rpx;
+		.item 
+		{
+			line-height: 40rpx;
+			font-size: 24rpx;
+			color: #a1a1a1;
+			text-align: center;
+		}
+	}
+	.monthDateList
+	{
+		padding: 0 30rpx;
+		.item 
+		{
+			margin-bottom: 10rpx;
+			width: calc(100%/7);
+			.date 
+			{
+				background-color: #f8f8f8;
+				width: calc(100% - 10rpx);
+				line-height: 64rpx;
+				border-radius: 15rpx;
+				font-size: 24rpx;
+				font-weight: bold;
+				color: #333;
+				text-align: center;
+			}
+			.date.today 
+			{
+				background-color: #FF7E1A;
+				color: white;
+			}
+			.date.inRange 
+			{
+				background-color: #FFF2EB;
+			}
+			.date.notCurrentMonth
+			{
+				background-color: #fdfdfd;
+				color: #c3c3c3;
+			}
+			.eventNum
+			{
+				margin-top: 12rpx;
+				width: 80rpx;
+				height: 30rpx;
+				line-height: 30rpx;
+				border-radius: 5rpx;
+				font-size: 16rpx;
+				font-weight: 500;
+				color: white;
+				text-align: center;
+			}
+		}
+	}
+}
 </style>