You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
585 lines
19 KiB
585 lines
19 KiB
11 months ago
|
<template>
|
||
|
|
<transition :name="transition">
|
||
|
|
<div class="calendar-tz" v-if="isShow" :class="isFixed&&'fixed'">
|
||
|
|
<slot name="header"></slot>
|
||
|
|
<div class="week-number">
|
||
|
|
<span v-for="(item,index) in weekList" :style="{color:(index==0||index==weekList.length-1)&&themeColor}" :key="index">{{item}}</span>
|
||
|
|
</div>
|
||
|
|
<p class="tips" v-if="title">{{title}}</p>
|
||
|
|
<div class="content" id="scrollWrap">
|
||
|
|
<div class="con" v-for="(item,index) in calendar" :key="index" :id="item.year+''+item.month">
|
||
|
|
<h3 v-text="item.year + '年' + item.month + '月'"></h3>
|
||
|
|
<span class="month-bg" :style="{color:getBetweenColor}">{{item.month}}</span>
|
||
|
|
<ul class="each-month">
|
||
|
|
<li class="each-day" v-for="(day,idx) in item.dayList" :key="idx" :class="[addClassBg(day, item.month, item.year)]" :style="{background:themeOpacityBg(day, item.month, item.year)}" @click="chooseDate(day, item.month, item.year)">
|
||
|
|
<div :class="[addClassName(day, item.month, item.year)]" :style="{background:themeBg(day, item.month, item.year)}">
|
||
|
|
<p class="day-tip" :style="{color:themeColor}"><i v-text="setTip(day, item.month, item.year,1)"></i></p>
|
||
|
|
<p class="day">{{day?day:''}}</p>
|
||
|
|
<p class="recent"><i v-text="setTip(day, item.month, item.year,2)"></i></p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
isShow: {//是否显示
|
||
|
|
type: [Boolean],
|
||
|
|
default() {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
isFixed: {//是否定位全屏
|
||
|
|
type: [Boolean],
|
||
|
|
default() {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
transition: {//动画类型slide
|
||
|
|
type: [String],
|
||
|
|
default() {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {//头部的一段文本
|
||
|
|
type: [String, Object],
|
||
|
|
default() {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mode: {//模式：1普通日历，2酒店，3飞机往返
|
||
|
|
type: [String, Number],
|
||
|
|
default() {
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
startDate: {//开始日期
|
||
|
|
type: [String, Object, Date]
|
||
|
|
},
|
||
|
|
endDate: {//结束日期
|
||
|
|
type: [String, Object, Date]
|
||
|
|
},
|
||
|
|
betweenStart: {//日历可选范围开始
|
||
|
|
type: [String, Object, Date],
|
||
|
|
default() {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
betweenEnd: { //日历可选结束日期
|
||
|
|
type: [String, Object, Date],
|
||
|
|
default() {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initMonth: {//初始化的月数
|
||
|
|
type: [String, Number],
|
||
|
|
default() {
|
||
|
|
return 6;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
themeColor: {//主题色
|
||
|
|
type: [String],
|
||
|
|
default: "#1C75FF"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
startDates: "",
|
||
|
|
endDates: "",
|
||
|
|
betweenStarts: "",
|
||
|
|
betweenEnds: "",
|
||
|
|
calendar: [],
|
||
|
|
weekList: ["日", "一", "二", "三", "四", "五", "六"]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
isShow() {
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
betweenStart() {
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
betweenEnd() {
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
//设置主题色入住离开之间的背景色
|
||
|
|
getBetweenColor() {
|
||
|
|
if (!this.themeColor) return;
|
||
|
|
var hex = this.themeColor;
|
||
|
|
if (hex.length == 4) {
|
||
|
|
hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
|
||
|
|
}
|
||
|
|
var str = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ",0.1)";
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
var date = new Date();
|
||
|
|
this.year = date.getFullYear();
|
||
|
|
this.month = date.getMonth() + 1;
|
||
|
|
this.day = date.getDate();
|
||
|
|
this.today = new Date(this.year + "/" + this.month + "/" + this.day) * 1;
|
||
|
|
if (!this.startDate) {
|
||
|
|
const year = date.getFullYear(),
|
||
|
|
month = date.getMonth() + 1,
|
||
|
|
day = date.getDate();
|
||
|
|
this.startDates = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
this.startYear = year;
|
||
|
|
this.startMonth = month;
|
||
|
|
} else {
|
||
|
|
this.startDates = this.resetTime(this.startDate);
|
||
|
|
var dd = this.startDate.replace(/-/g, "/").split("/");
|
||
|
|
this.startYear = dd[0];
|
||
|
|
this.startMonth = dd[1];
|
||
|
|
}
|
||
|
|
if (!this.endDate) {
|
||
|
|
// var temp = this.startDates + 24 * 60 * 60 * 1000;
|
||
|
|
// var dateTemp = new Date(temp);
|
||
|
|
// const year = dateTemp.getFullYear(),
|
||
|
|
// month = dateTemp.getMonth() + 1,
|
||
|
|
// day = dateTemp.getDate();
|
||
|
|
// this.endDates = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
// this.endYear = year;
|
||
|
|
// this.endMonth = month;
|
||
|
|
} else {
|
||
|
|
this.endDates = this.resetTime(this.endDate);
|
||
|
|
var dd = this.endDate.replace(/-/g, "/").split("/");
|
||
|
|
this.endYear = dd[0];
|
||
|
|
this.endMonth = dd[1];
|
||
|
|
}
|
||
|
|
this.betweenStarts = this.resetTime(this.betweenStart);
|
||
|
|
this.betweenEnds = this.resetTime(this.betweenEnd);
|
||
|
|
this.createClendar(); //创建日历数据
|
||
|
|
},
|
||
|
|
//创建每个月日历数据，传入月份1号前面用null填充
|
||
|
|
createDayList(month, year) {
|
||
|
|
const count = this.getDayNum(month, year),
|
||
|
|
_week = new Date(year + "/" + month + "/1").getDay();
|
||
|
|
let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
|
||
|
|
for (let i = 29; i <= count; i++) {
|
||
|
|
list.push(i);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < _week; i++) {
|
||
|
|
list.unshift(null);
|
||
|
|
}
|
||
|
|
return list;
|
||
|
|
},
|
||
|
|
//计算传入月份有多少天
|
||
|
|
getDayNum(month, year) {
|
||
|
|
let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||
|
|
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
|
||
|
|
dayNum[1] = 29;
|
||
|
|
}
|
||
|
|
return dayNum[month - 1];
|
||
|
|
},
|
||
|
|
//根据当天和结束日期创建日历数据
|
||
|
|
createClendar() {
|
||
|
|
var yearTemp = this.year;
|
||
|
|
var monthTemp = this.month;
|
||
|
|
if (!!this.betweenStarts) {
|
||
|
|
//如果有范围起始日期，可选范围从betweenStart开始
|
||
|
|
yearTemp = new Date(this.betweenStarts).getFullYear();
|
||
|
|
monthTemp = new Date(this.betweenStarts).getMonth() + 1;
|
||
|
|
}
|
||
|
|
this.calendar = [];
|
||
|
|
for (let i = 0; i < this.initMonth; i++) {
|
||
|
|
let year = yearTemp;
|
||
|
|
let month = monthTemp + i;
|
||
|
|
let _monthData = {
|
||
|
|
dayList: [],
|
||
|
|
month: "",
|
||
|
|
year: ""
|
||
|
|
};
|
||
|
|
var m = Math.ceil(month / 12);
|
||
|
|
if (m > 0) {
|
||
|
|
year += m - 1;
|
||
|
|
} else {
|
||
|
|
year += m - 1;
|
||
|
|
}
|
||
|
|
if (month > 12) {
|
||
|
|
month = month % 12 == 0 ? 12 : month % 12;
|
||
|
|
}
|
||
|
|
if (month <= 0) {
|
||
|
|
month = 12 + month % 12;
|
||
|
|
}
|
||
|
|
_monthData.year = year;
|
||
|
|
_monthData.month = month;
|
||
|
|
_monthData.dayList = this.createDayList(month, year);
|
||
|
|
this.calendar.push(_monthData);
|
||
|
|
}
|
||
|
|
//h5默认页面加载到当前日期start-date的位置
|
||
|
|
if (document) {
|
||
|
|
this.scrollTop(this.startYear, this.startMonth);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scrollTop(year, month) {
|
||
|
|
var id = year + "" + parseInt(month)
|
||
|
|
setTimeout(() => {
|
||
|
|
var obj = document.getElementById(id)
|
||
|
|
if(!obj) return
|
||
|
|
var wrap = document.getElementById("scrollWrap");
|
||
|
|
wrap.scrollTop = obj.offsetTop - 40;
|
||
|
|
}, 0);
|
||
|
|
},
|
||
|
|
//添加日历样式
|
||
|
|
addClassName(day, month, year) {
|
||
|
|
if (!day) return;
|
||
|
|
const _date = new Date(year + "/" + month + "/" + day);
|
||
|
|
let className = [];
|
||
|
|
// if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
|
||
|
|
// className.push('weekend')
|
||
|
|
// }
|
||
|
|
if (_date * 1 == this.today) {
|
||
|
|
className.push("today");
|
||
|
|
}
|
||
|
|
if (this.mode == 1) {
|
||
|
|
if (_date * 1 == this.startDates) {
|
||
|
|
className.push("trip-time");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (_date * 1 == this.startDates || _date * 1 == this.endDates) {
|
||
|
|
className.push("trip-time");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.betweenStarts) {
|
||
|
|
_date * 1 < this.betweenStarts && className.push("disabled");
|
||
|
|
} else {
|
||
|
|
_date * 1 < this.today && className.push("disabled"); //当天和结束日期之外不可选
|
||
|
|
}
|
||
|
|
_date * 1 > this.betweenEnds && className.push("disabled");
|
||
|
|
return className.join(" ");
|
||
|
|
},
|
||
|
|
//入住离开的区间背景色
|
||
|
|
addClassBg(day, month, year) {
|
||
|
|
if (!day) return;
|
||
|
|
const _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
let className = [];
|
||
|
|
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
|
||
|
|
className.push("between");
|
||
|
|
}
|
||
|
|
return className.join(" ");
|
||
|
|
},
|
||
|
|
//theme入住离开的区间背景色
|
||
|
|
themeOpacityBg(day, month, year) {
|
||
|
|
if (!this.themeColor) return;
|
||
|
|
if (!day) return;
|
||
|
|
const _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
|
||
|
|
return this.getBetweenColor;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//theme获取普通日期选中样式背景
|
||
|
|
themeBg(day, month, year) {
|
||
|
|
if (!this.themeColor) return;
|
||
|
|
const _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
//正常模式
|
||
|
|
if (this.mode == 1) {
|
||
|
|
if (_date == this.startDates) {
|
||
|
|
return this.themeColor;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
//酒店和往返模式
|
||
|
|
if (_date == this.startDates || _date == this.endDates) {
|
||
|
|
return this.themeColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//清除时间 时 分 秒 毫秒
|
||
|
|
resetTime(dateStr) {
|
||
|
|
var date = new Date(dateStr.replace(/-/g, "/"));
|
||
|
|
date.setHours(0);
|
||
|
|
date.setMinutes(0);
|
||
|
|
date.setSeconds(0);
|
||
|
|
date.setMilliseconds(0);
|
||
|
|
return date * 1;
|
||
|
|
},
|
||
|
|
//flag==1（返回今天，明天，后天)，flag==2（返回入住，离开，去返)
|
||
|
|
setTip(day, month, year,flag) {
|
||
|
|
if (!day) return
|
||
|
|
var tip = ""
|
||
|
|
var _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
if(flag==1){
|
||
|
|
if (_date == this.today) {
|
||
|
|
tip = "今天";
|
||
|
|
} else if (_date - this.today == 24 * 3600 * 1000) {
|
||
|
|
tip = "明天";
|
||
|
|
} else if (_date - this.today == 2 * 24 * 3600 * 1000) {
|
||
|
|
tip = "后天";
|
||
|
|
}
|
||
|
|
return tip
|
||
|
|
}else{
|
||
|
|
if (this.mode == 2) {
|
||
|
|
if (_date == this.endDates) {
|
||
|
|
tip = "结束";
|
||
|
|
} else if (_date == this.startDates) {
|
||
|
|
tip = "开始";
|
||
|
|
}
|
||
|
|
} else if (this.mode == 3) {
|
||
|
|
if (_date == this.startDates && !this.endDates) {
|
||
|
|
tip = "去/返";
|
||
|
|
} else {
|
||
|
|
if (_date == this.endDates) {
|
||
|
|
tip = "返程";
|
||
|
|
} else if (_date == this.startDates) {
|
||
|
|
tip = "去程";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return tip;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//是否是选中当天，或者入住离开当天
|
||
|
|
isCurrent(day, month, year) {
|
||
|
|
if (!day) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
const _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
//正常模式
|
||
|
|
if (this.mode == 1) {
|
||
|
|
if (_date == this.startDates) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
//酒店和往返模式
|
||
|
|
if (_date == this.startDates || _date == this.endDates) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dateFormat(times) {
|
||
|
|
let date = new Date(times);
|
||
|
|
let recent = "";
|
||
|
|
if (times == this.today) {
|
||
|
|
recent = "今天";
|
||
|
|
} else if (times - this.today === 24 * 3600 * 1000) {
|
||
|
|
recent = "明天";
|
||
|
|
} else if (times - this.today === 2 * 24 * 3600 * 1000) {
|
||
|
|
recent = "后天";
|
||
|
|
}
|
||
|
|
var year = date.getFullYear()
|
||
|
|
var month = parseInt(date.getMonth() + 1) > 9 ? parseInt(date.getMonth() + 1) : '0' + parseInt(date.getMonth() + 1)
|
||
|
|
var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
|
||
|
|
return {
|
||
|
|
dateStr: year + "-" + month + "-" + day,
|
||
|
|
week: "周" + this.weekList[date.getDay()],
|
||
|
|
recent
|
||
|
|
};
|
||
|
|
},
|
||
|
|
chooseDate(day, month, year) {
|
||
|
|
const _date = this.resetTime(year + "/" + month + "/" + day);
|
||
|
|
const week = this.weekList[new Date(_date).getDay()];
|
||
|
|
//判断日期区域是否可点击
|
||
|
|
if (!day) return;
|
||
|
|
if (this.betweenStarts) {
|
||
|
|
if (_date * 1 < this.betweenStarts) return;
|
||
|
|
} else {
|
||
|
|
if (_date < this.today) return;
|
||
|
|
}
|
||
|
|
if (_date > this.betweenEnds) return;
|
||
|
|
//判断酒店或者往返模式的选择逻辑
|
||
|
|
if (this.startDates && this.endDates && _date > this.endDates) {
|
||
|
|
this.startDates = _date;
|
||
|
|
this.endDates = "";
|
||
|
|
} else if (this.endDates && _date > this.endDates) {
|
||
|
|
this.endDates = _date;
|
||
|
|
} else if (_date >= this.startDates && _date <= this.endDates) {
|
||
|
|
this.startDates = _date;
|
||
|
|
this.endDates = "";
|
||
|
|
} else if (_date < this.startDates) {
|
||
|
|
this.startDates = _date;
|
||
|
|
this.endDates = "";
|
||
|
|
} else if (_date > this.startDates) {
|
||
|
|
if (this.mode == 1) {
|
||
|
|
this.startDates = _date;
|
||
|
|
} else {
|
||
|
|
this.endDates = _date;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const choose = {
|
||
|
|
startStr: this.dateFormat(this.startDates)
|
||
|
|
};
|
||
|
|
if (this.mode == 1) {
|
||
|
|
this.$emit("callback", choose);
|
||
|
|
} else if (this.mode == 2 && this.startDates && this.endDates) {
|
||
|
|
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
|
||
|
|
choose.endStr = this.dateFormat(this.endDates);
|
||
|
|
this.$emit("callback", choose);
|
||
|
|
} else if (this.mode == 3) {
|
||
|
|
if (this.startDates && this.endDates) {
|
||
|
|
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
|
||
|
|
choose.endStr = this.dateFormat(this.endDates);
|
||
|
|
} else if (this.startDates && !this.endDates) {
|
||
|
|
choose.dayCount = 0;
|
||
|
|
choose.endStr = this.dateFormat(this.startDates);
|
||
|
|
}
|
||
|
|
this.$emit("callback", choose);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
@color: #1C75FF;
|
||
|
|
.calendar-tz {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: #fff;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: flex;
|
||
|
|
-webkit-flex-direction: column;
|
||
|
|
flex-direction: column;
|
||
|
|
&.fixed{
|
||
|
|
position: fixed;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
left:0;
|
||
|
|
top:0;
|
||
|
|
z-index: 900;
|
||
|
|
}
|
||
|
|
.week-number {
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 1%;
|
||
|
|
box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1);
|
||
|
|
span {
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
padding: 12px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
width: 14.28%;
|
||
|
|
&:first-child,
|
||
|
|
&:last-child {
|
||
|
|
color: @color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tips {
|
||
|
|
padding: 6px 10px;
|
||
|
|
background: #fff7dc;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #9e8052;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
flex:1;
|
||
|
|
overflow-y: scroll;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
.con {
|
||
|
|
color: #333;
|
||
|
|
padding-top: 10px;
|
||
|
|
position: relative;
|
||
|
|
h3 {
|
||
|
|
width: 100%;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
.month-bg{
|
||
|
|
position: absolute;
|
||
|
|
text-align: center;
|
||
|
|
opacity: 0.4;
|
||
|
|
left:0;
|
||
|
|
right:0;
|
||
|
|
bottom:0;
|
||
|
|
top:20%;
|
||
|
|
font-size:220px;
|
||
|
|
font-weight: bold;
|
||
|
|
color:#f8f8f8;
|
||
|
|
}
|
||
|
|
.each-month {
|
||
|
|
display: block;
|
||
|
|
width: 98%;
|
||
|
|
font-size: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
.each-day {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
width: 14.28%;
|
||
|
|
font-size: 16px;
|
||
|
|
height: 50px;
|
||
|
|
margin:2px auto;
|
||
|
|
div {
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 14px;
|
||
|
|
width:98%;
|
||
|
|
height:100%;
|
||
|
|
justify-content: space-around;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: flex;
|
||
|
|
-webkit-flex-direction: column;
|
||
|
|
flex-direction: column;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
&.between {
|
||
|
|
background: rgba(75, 217, 173, 0.1);
|
||
|
|
}
|
||
|
|
.day{
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.day-tip,.recent{
|
||
|
|
font-size:10px;
|
||
|
|
height:14px;
|
||
|
|
i{
|
||
|
|
font-size:10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.recent {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
.disabled {
|
||
|
|
color: #ccc !important;
|
||
|
|
.day-tip{
|
||
|
|
color: #ccc !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.today {
|
||
|
|
background: rgba(100,100,100,0.1);
|
||
|
|
}
|
||
|
|
.trip-time {
|
||
|
|
background: @color;
|
||
|
|
color: #fff !important;
|
||
|
|
.recent,.day-tip{
|
||
|
|
color: #fff!important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.weekend {
|
||
|
|
color: @color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/***右侧进入动画***/
|
||
|
|
.slide-enter-active,
|
||
|
|
.slide-leave-active {
|
||
|
|
-webkit-transition: all 0.2s ease;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
.slide-enter,
|
||
|
|
.slide-leave-to {
|
||
|
|
-webkit-transform: translateX(100%);
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
</style>
|