项目采用Vue+vant并改变根节点为37.5(postcss-px2rem-exclude)
先上界面
布局（采用公共css+vant组件）
<template>
<div>
<div class="mon-dis-flex mon-item-center">
<div class="mon-bg-FE3E46 mon-fc-ffffff mon-fs32 mon-width-80 mon-text-center">Daily</div>
<div class="mon-fs28 mon-fc-292929 mon-margin-left15">{{ dateTime }}</div>
<img @click="selectDateBox = !selectDateBox" src="../assets/image/business/ic_default.png"
class="mon-width-32 mon-height-32 mon-margin-left15"/>
</div>
<div class="mon-dis-flex">
<div class="mon-fs28 mon-fc-5C5C5C mon-weight-400 mon-margin-top20">{{ tipsText }}</div>
<div class="mon-flex-1"></div>
<div class="mon-margin-top-30 mon-margin-bottom30" v-show="dateType==0||dateType==1||dateType==4||dateType==5">
<van-button @click="beforeChange" color="#F5F5F5" size="small" icon="arrow-left" type="primary"
class="mon-margin-right15"/>
<van-button :disabled="beforeDateNumber==0?beforeWeekMonthNumber==1:false" @click="endChange"
color="#F5F5F5" size="small"
icon="arrow" type="primary"/>
</div>
</div>
<div v-show="selectDateBox"
class="mon-dis-flex mon-just-sb mon-fc-5C5C5C mon-fs24 mon-weight-400 mon-padding25 mon-box-show mon-margin-25">
<div :class="dateType==0?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(0)">实时</div>
<div :class="dateType==1?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(1)">1天</div>
<div :class="dateType==2?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(2)">7天</div>
<div :class="dateType==3?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(3)">30天</div>
<div :class="dateType==4?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(4)">周</div>
<div :class="dateType==5?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(5)">月</div>
</div>
</div>
</template>
js代码
<script>
export default {
name: "selectDate",
components: {},
data() {
return {
// 选择时间组件
selectDateBox: false,
// 获取当前时间
dateTime: this.common.formatDate(new Date()),
//时间类型
dateType: 0,
// 向前几天
beforeDateNumber: 0,
// 向前多少周或多少月
beforeWeekMonthNumber: 1,
// 提示文字
tipsText: '相比昨日',
}
},
mounted() {
},
methods: {
// 父组件传值
sendFatherData() {
this.$emit('changeDate', this.dateTime)
},
// 向左按钮
beforeChange() {
if (this.dateType < 2) {
this.beforeDateNumber -= 1
this.dateTime = this.common.funDate(this.beforeDateNumber)
} else {
if (this.dateType == 4) {
this.beforeWeekMonthNumber += 1
this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
} else {
this.beforeWeekMonthNumber -= 1
this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
}
}
this.sendFatherData()
},
// 向后按钮
endChange() {
if (this.dateType < 2) {
this.beforeDateNumber += 1
if (this.beforeDateNumber == 0) {
this.dateTime = this.common.formatDate(new Date())
} else {
this.dateTime = this.common.funDate(this.beforeDateNumber)
}
} else {
if (this.dateType == 4) {
this.beforeWeekMonthNumber -= 1
this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
} else {
this.beforeWeekMonthNumber += 1
this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
}
}
this.sendFatherData()
},
// 筛选时间
selectDate(dateType) {
this.dateType = dateType
switch (dateType) {
case 0:
this.dateTime = this.common.formatDate(new Date())
this.beforeDateNumber = 0
this.beforeWeekMonthNumber = 1
this.sendFatherData()
this.tipsText = "相比昨日"
break
case 1:
this.dateTime = this.common.funDate(-1)
this.beforeDateNumber = -1
this.beforeWeekMonthNumber = 1
this.sendFatherData()
this.tipsText = "相比昨日"
break
case 2:
this.dateTime = this.common.funDate(-7) + '~' + this.common.funDate(-1)
this.sendFatherData()
this.tipsText = "前7天相比"
break
case 3:
this.dateTime = this.common.funDate(-30) + '~' + this.common.funDate(-1)
this.sendFatherData()
this.tipsText = "前30天相比"
break
case 4:
this.beforeDateNumber = 0
this.beforeWeekMonthNumber = 1
this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
this.sendFatherData()
this.tipsText = "前一周相比"
break
case 5:
this.beforeDateNumber = 0
this.beforeWeekMonthNumber = 1
this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
this.sendFatherData()
this.tipsText = `前一月相比`
break
}
this.selectDateBox = false
}
}
}
</script>
工具类
// 时间戳转时间格式
const formatDate = (now) => {
let d = new Date(now);
let year = d.getFullYear();
let month = d.getMonth() + 1;
let date = d.getDate();
let hours = d.getHours();
let min = d.getMinutes();
// let sec = d.getSeconds();
return year + "-" + (month < 10 ? "0" + month : month)
+ "-" + (date < 10 ? "0" + date : date)
+ ' ' + (hours < 10 ? "0" + hours : hours)
+ ':' + (min < 10 ? "0" + min : min);
};
// 获取月日
const getMonthDate = (now) => {
let d = new Date(now);
let month = d.getMonth() + 1;
let date = d.getDate();
return (month < 10 ? "0" + month : month) + "-" + (date < 10 ? "0" + date : date)
}
// 获取前后几天的时间
const funDate = (aa) => {
let date1 = new Date(),
time1 = (date1.getMonth() + 1) + "~" + date1.getDate();//time1表示当前时间
let date2 = new Date(date1);
date2.setDate(date1.getDate() + aa);
let date3 = date2.getDate();
let month = date2.getMonth() + 1
return (month < 10 ? "0" + month : month) + "-" + (date3 < 10 ? "0" + date3 : date3)
}
// 获得上周周一~周日的年月日
export function getLastWeekData(number) {
let lastWeek = {};
let date = new Date();
// 上周一的日期
date.setDate(date.getDate() - (7 * number) - date.getDay() + 1);
let month_start = date.getMonth() + 1;
let date_start = date.getDate();
lastWeek.start_day = (month_start < 10 ? "0" + month_start : month_start) + "-" + (date_start < 10 ? "0" + date_start : date_start);
// 上周日的日期
date.setDate(date.getDate() + 6);
let month_end = date.getMonth() + 1;
let date_end = date.getDate();
lastWeek.end_day = (month_end < 10 ? "0" + month_end : month_end) + "-" + (date_end < 10 ? "0" + date_end : date_end);
return lastWeek
}
/**
* 获得相对当月AddMonthCount个月的起止日期
* AddMonthCount为0 代表当月 为-1代表上一个月 为1代表下一个月 以此类推
* ***/
function getMonthStartAndEnd(AddMonthCount) {
AddMonthCount -= 2
//获取当前时间
let currentDate = new Date();
let month = currentDate.getMonth() + AddMonthCount;
if (month < 0) {
let n = parseInt((-month) / 12);
month += n * 12;
currentDate.setFullYear(currentDate.getFullYear() - n);
}
currentDate = new Date(currentDate.setMonth(month));
//获得当前月份0-11
let currentMonth = currentDate.getMonth();
//获得当前年份4位年
let currentYear = currentDate.getFullYear();
//获得上一个月的第一天
let currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
//获得上一月的最后一天
let currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
//返回
return getDateStr3(currentMonthFirstDay) + '~' + getDateStr3(currentMonthLastDay);
}
//获取当前日期mm-dd
//date 为时间对象
function getDateStr3(date) {
var month = "";
var day = "";
var now = date;
if ((now.getMonth() + 1) < 10) {
month = "0" + (now.getMonth() + 1);
} else {
month = "" + (now.getMonth() + 1);
}
if ((now.getDate()) < 10) {
day = "0" + (now.getDate());
} else {
day = "" + (now.getDate());
}
return month + "-" + day;
}
/* font-size */
.mon-fs16{ font-size: 16px; }
.mon-fs22{ font-size: 22px; }
.mon-fs24{ font-size: 24px; }
.mon-fs26{ font-size: 26px; }
.mon-fs28{ font-size: 28px; }
.mon-fs30{ font-size: 30px; }
.mon-fs32{ font-size: 32px; }
.mon-fs34{ font-size: 34px; }
.mon-fs36{ font-size: 36px; }
.mon-fs38{ font-size: 38px; }
.mon-fs40{ font-size: 40px; }
.mon-fs60{ font-size: 60px; }
/* font-weight */
.mon-weight-100{ font-weight: 100; }
.mon-weight-400{ font-weight: 400; }
.mon-weight-bold{ font-weight: bold; }
/* font-family */
.mon-font-family{font-family: PingFang SC;}
/* color */
.mon-fc-333333{ color: #333333; }
.mon-fc-5C5C5C{ color: #5c5c5c; }
.mon-fc-999999{ color: #999999; }
.mon-fc-f5f5f5{ color: #f5f5f5; }
.mon-fc-ffffff{ color: #ffffff; }
.mon-fc-3FA5FC{ color: #3FA5FC; }
.mon-fc-FE3E46{ color: #FE3E46; }
.mon-fc-292929{ color: #292929; }
.mon-fc-58DD81{ color: #58DD81; }
/* background-color */
.mon-bg-333333{ background-color: #333333; }
.mon-bg-999999{ background-color: #999999; }
.mon-bg-f5f5f5{ background-color: #f5f5f5; }
.mon-bg-f7f7f7{ background-color: #f7f7f7; }
.mon-bg-ffffff{ background-color: #ffffff; }
.mon-bg-FE3E46{ background-color: #FE3E46; }
/* textAlign */
.mon-text-center{ text-align: center; }
.mon-text-left{ text-align: left; }
.mon-text-right{ text-align: right; }
/* width */
.mon-width100{ width: 100%; }
.mon-width-14{ width: 14px; }
.mon-width-18{ width: 18px; }
.mon-width-22{ width: 22px; }
.mon-width-32{ width: 32px; }
.mon-width-40{ width: 40px; }
.mon-width-80{ width: 80px; }
.mon-width-100{ width: 100px; }
.mon-width-150{ width: 150px; }
.mon-width-200{ width: 200px; }
.mon-width-300{ width: 300px; }
.mon-width-400{ width: 400px; }
.mon-width-500{ width: 500px; }
.mon-width-600{ width: 600px; }
/* height */
.mon-height100vh{ height: 100vh; }
.mon-height100{ height: 100%; }
.mon-height-14{ height: 14px; }
.mon-height-20{ height: 20px; }
.mon-height-24{ height: 24px; }
.mon-height-32{ height: 32px; }
.mon-height-40{ height: 40px; }
.mon-height-100{ height: 100px; }
.mon-height-150{ height: 150px; }
.mon-height-200{ height: 200px; }
.mon-height-300{ height: 300px; }
.mon-height-400{ height: 400px; }
.mon-height-500{ height: 500px; }
/* max-height */
.mon-max-height100vh{ max-height: 100vh; }
/* min-height */
.mon-min-height100vh{ min-height: 100vh; }
/* min-width*/
.mon-min-width-30{ min-width: 30px}
/*line-height*/
.mon-line-htight-20{ line-height: 20px; }
.mon-line-htight-30{ line-height: 30px; }
.mon-line-htight-35{ line-height: 35px; }
.mon-line-htight-36{ line-height: 36px; }
.mon-line-htight-37{ line-height: 37px; }
.mon-line-htight-38{ line-height: 38px; }
.mon-line-htight-40{ line-height: 40px; }
.mon-line-htight-60{ line-height: 60px; }
/* 限制输入行数 */
.mon-textoverflow-1{ overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.mon-textoverflow-2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mon-textoverflow-3{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/*box-shadow*/
.mon-box-show{ box-shadow: 0px 1px 6px 0px rgba(80, 80, 80, 0.42); }
/* border */
.mon-solid1black{ border: 1px solid #333333; }
.mon-solid2black{ border: 2px solid #333333; }
.mon-solid4black{ border: 4px solid #333333; }
.mon-solid1white{ border: 1px solid #ffffff; }
.mon-solid2white{ border: 2px solid #ffffff; }
.mon-solid4white{ border: 4px solid #ffffff; }
.mon-solid1gray{ border: 1px solid #eeeeee; }
/* borderRadius */
.mon-bra6{ border-radius: 6px; }
.mon-bra10{ border-radius: 10px; }
.mon-bra12{ border-radius: 12px; }
.mon-bra14{ border-radius: 14px; }
.mon-bra16{ border-radius: 16px; }
/* display */
.mon-dis-inline{ display: inline; }
.mon-dis-inBlock{ display: inline-block; }
.mon-dis-block{ display: block; }
.mon-dis-none{ display: none; }
.mon-dis-flex{ display: flex; }
.mon-flex-1{ flex: 1; }
.mon-dir-row{ flex-direction: row; }
.mon-dir-rowre{ flex-direction: row-reverse; }
.mon-dir-column{ flex-direction: column; }
.mon-dir-columnre{ flex-direction: column-reverse; }
.mon-rap-nowrap{ flex-flow: nowrap; }
.mon-rap-wrap{ flex-flow: wrap; }
.mon-rap-wrapre{ flex-flow: wrap-reverse; }
.mon-just-sa{ justify-content: space-around; }
.mon-just-sb{ justify-content: space-between; }
.mon-just-cen{ justify-content: center; }
.mon-ali-sa{ align-content: space-around; }
.mon-ali-sb{ align-content: space-between; }
.mon-ali-cen{ align-content: center; }
.mon-item-start{ align-items: flex-start; }
.mon-item-end{ align-items: flex-end; }
.mon-item-center{ align-items: center; }
.mon-item-baseline{ align-items: baseline; }
.mon-item-stretch{ align-items: stretch; }
/* position */
.mon-position-re{ position: relative; }
.mon-position-ab{ position: absolute; }
.mon-position-fe{ position: fixed; }
/* top */
.mon-top-4{ top: 4px; }
.mon-top-6{ top: 6px; }
.mon-top-8{ top: 8px; }
.mon-top-10{ top: 10px; }
.mon-top-12{ top: 12px; }
.mon-top-14{ top: 14px; }
.mon-top-16{ top: 16px; }
.mon-top-18{ top: 18px; }
.mon-top-20{ top: 20px; }
/* right */
.mon-right-4{ right: 4px; }
.mon-right-6{ right: 6px; }
.mon-right-8{ right: 8px; }
.mon-right-10{ right: 10px; }
.mon-right-12{ right: 12px; }
.mon-right-14{ right: 14px; }
.mon-right-16{ right: 16px; }
.mon-right-18{ right: 18px; }
.mon-right-20{ right: 20px; }
/* bottom */
.mon-bottom-2{ bottom: 2px; }
.mon-bottom-4{ bottom: 4px; }
.mon-bottom-6{ bottom: 6px; }
.mon-bottom-8{ bottom: 8px; }
.mon-bottom-10{ bottom: 10px; }
.mon-bottom-12{ bottom: 12px; }
.mon-bottom-14{ bottom: 14px; }
.mon-bottom-16{ bottom: 16px; }
.mon-bottom-18{ bottom: 18px; }
.mon-bottom-20{ bottom: 20px; }
/* left */
.mon-left-4{ left: 4px; }
.mon-left-6{ left: 6px; }
.mon-left-8{ left: 8px; }
.mon-left-10{ left: 10px; }
.mon-left-12{ left: 12px; }
.mon-left-14{ left: 14px; }
.mon-left-16{ left: 16px; }
.mon-left-18{ left: 18px; }
.mon-left-20{ left: 20px; }
/* margin */
.mon-margin4{ margin: 4px; }
.mon-margin5{ margin: 5px; }
.mon-margin6{ margin: 6px; }
.mon-margin10{ margin: 10px; }
.mon-margin12{ margin: 12px; }
.mon-margin15{ margin: 15px; }
.mon-margin20{ margin: 20px; }
.mon-margin25{ margin: 25px; }
.mon-margin30{ margin: 30px; }
.mon-margin-25{ margin: 0 -25px; }
.mon-margin-top5{ margin-top: 5px; }
.mon-margin-top10{ margin-top: 10px; }
.mon-margin-top12{ margin-top: 12px; }
.mon-margin-top15{ margin-top: 15px; }
.mon-margin-top20{ margin-top: 20px; }
.mon-margin-top30{ margin-top: 30px; }
.mon-margin-top-30{ margin-top: -30px; }
.mon-margin-bottom5{ margin-bottom: 5px; }
.mon-margin-bottom10{ margin-bottom: 10px; }
.mon-margin-bottom12{ margin-bottom: 12px; }
.mon-margin-bottom15{ margin-bottom: 15px; }
.mon-margin-bottom20{ margin-bottom: 20px; }
.mon-margin-bottom30{ margin-bottom: 30px; }
.mon-margin-bottom40{ margin-bottom: 40px; }
.mon-margin-bottom60{ margin-bottom: 60px; }
.mon-margin-left5{ margin-left: 5px; }
.mon-margin-left10{ margin-left: 10px; }
.mon-margin-left12{ margin-left: 12px; }
.mon-margin-left15{ margin-left: 15px; }
.mon-margin-left20{ margin-left: 20px; }
.mon-margin-right5{ margin-right: 5px; }
.mon-margin-right10{ margin-right: 10px; }
.mon-margin-right12{ margin-right: 12px; }
.mon-margin-right15{ margin-right: 15px; }
.mon-margin-right20{ margin-right: 20px; }
.mon-margin-right90{ margin-right: 90px; }
/* padding */
.mon-padding5{ padding: 5px; }
.mon-padding10{ padding: 10px; }
.mon-padding12{ padding: 12px; }
.mon-padding15{ padding: 15px; }
.mon-padding18{ padding: 18px; }
.mon-padding20{ padding: 20px; }
.mon-padding25{ padding: 25px; }
.mon-padding-top5{ padding-top: 5px; }
.mon-padding-top10{ padding-top: 10px; }
.mon-padding-top12{ padding-top: 12px; }
.mon-padding-top15{ padding-top: 15px; }
.mon-padding-top25{ padding-top: 25px; }
.mon-padding-top40{ padding-top: 40px; }
.mon-padding-bottom5{ padding-bottom: 5px; }
.mon-padding-bottom10{ padding-bottom: 10px; }
.mon-padding-bottom12{ padding-bottom: 12px; }
.mon-padding-bottom15{ padding-bottom: 15px; }
.mon-padding-bottom20{ padding-bottom: 20px; }
.mon-padding-bottom25{ padding-bottom: 25px; }
.mon-padding-bottom30{ padding-bottom: 30px; }
.mon-padding-bottom40{ padding-bottom: 40px; }
.mon-padding-left5{ padding-left: 5px; }
.mon-padding-left10{ padding-left: 10px; }
.mon-padding-left12{ padding-left: 12px; }
.mon-padding-left15{ padding-left: 15px; }
.mon-padding-left20{ padding-left: 20px; }
.mon-padding-left25{ padding-left: 25px; }
.mon-padding-left40{ padding-left: 40px; }
.mon-padding-right5{ padding-right: 5px; }
.mon-padding-right10{ padding-right: 10px; }
.mon-padding-right12{ padding-right: 12px; }
.mon-padding-right15{ padding-right: 15px; }
.mon-padding-right25{ padding-right: 25px; }
.mon-padding-right40{ padding-right: 40px; }
