时间轴的样式
有三种状态
例如：后台给的时间是6.23
一.6.23那天是红色的
二.6.23左边的数字包括轴线的颜色都是橘色
三.6.23右边的数字包括轴线的颜色是灰色
html
<div class="date" ref="tabscroll">
<ul id="tabscroll" v-if="btnShow=='1'">
<li v-for="(item, index) in date_list" :key="index">
<p
:class="
item.state == 1
? 'day1'
: item.state == 2
? 'day2'
: 'day3'
"
>
{{ item.fmt_date }}
p>
<p
@click="dayInfo(item)"
:class="
item.state == 1
? 'point1'
: item.state == 2
? 'point2'
: 'point3'
"
>
<span>span>
p>
<p :class="item.state == 3 ? 'border2' : 'border1'">p>
li>
ul>
<ul id="btn-tabscroll" v-if="btnShow=='2'">
<li v-for="(item, index) in date_list" :key="index">
<p
:class="
item.state == 1
? 'day1'
: 'day3'
"
:id="btnDay==item.date?'btnDate1':''"
>
{{ item.fmt_date }}
p>
<p
@click="dayInfo(item)"
:class="
item.state == 1
? 'point1'
:'point3'
"
:id="btnDay==item.date?'btnPoint1':''"
>
<span>span>
p>
<p :class="item.state == 3 ? 'border2' : 'border1'">p>
li>
ul>
div>
css
.date {
margin-left: remit(31);
width: remit(675);
height: remit(59);
// overflow: scroll;
overflow: auto;
#tabscroll {
width: remit(2470);
height: remit(59);
overflow: auto;
display: flex;
li:nth-of-type(1) {
width: remit(43);
height: remit(59);
.border1 {
background-color: #ffffff;
}
.border2 {
background-color: #ffffff;
}
}
li {
width: remit(120);
height: remit(59);
list-style: none;
position: relative;
.day1 {
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #ffa91d;
}
.day2 {
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #ff6304;
}
.day3 {
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #999999;
}
.point1 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #ffa91d;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #ffe54c;
}
}
.point2 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #ff6304;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #ffffff;
}
}
.point3 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #d6d6d6;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #999999;
}
}
.border1 {
z-index: 1;
width: remit(100);
height: remit(2);
background-color: #ffa91d;
position: absolute;
bottom: remit(9);
left: 0;
}
.border2 {
z-index: 1;
width: remit(100);
height: remit(2);
background-color: #d6d6d6;
position: absolute;
bottom: remit(9);
left: 0;
}
}
}
#btn-tabscroll {
width: remit(2470);
height: remit(59);
overflow: auto;
display: flex;
li:nth-of-type(1) {
width: remit(43);
height: remit(59);
.border1 {
background-color: #ffffff;
}
.border2 {
background-color: #ffffff;
}
}
li {
width: remit(120);
height: remit(59);
list-style: none;
position: relative;
.day1 {
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #ffa91d;
}
.day3 {
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #999999;
}
#btnDate1{
position: absolute;
top: 0;
right: remit(-23);
font-size: remit(24);
font-weight: bold;
color: #ff6304;}
#btnPoint1 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #ff6304;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #ffffff;
}
}
.point1 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #ffa91d;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #ffe54c;
}
}
.point3 {
width: remit(20);
height: remit(20);
border-radius: 50%;
background-color: #d6d6d6;
position: absolute;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
span {
width: remit(10);
height: remit(10);
border-radius: 50%;
background-color: #999999;
}
}
.border1 {
z-index: 1;
width: remit(100);
height: remit(2);
background-color: #ffa91d;
position: absolute;
bottom: remit(9);
left: 0;
}
.border2 {
z-index: 1;
width: remit(100);
height: remit(2);
background-color: #d6d6d6;
position: absolute;
bottom: remit(9);
left: 0;
}
}
}
}
js
//tab栏的滑动事件
scrollleft() {
this.sameDay = this.date_list.filter((a, b) => {
return a.state == 2
})
console.log(this.sameDay[0].date)
this.btnDay=this.sameDay[0].date
if (20220614 > Number(this.sameDay[0].date) && Number(this.sameDay[0].date) > 20220610) {
this.$refs.tabscroll.scrollLeft = '200'
} else if (20220618 > Number(this.sameDay[0].date) && Number(this.sameDay[0].date) > 20220613) {
this.$refs.tabscroll.scrollLeft = '400'
} else if (20220622 > Number(this.sameDay[0].date) && Number(this.sameDay[0].date) > 20220617) {
this.$refs.tabscroll.scrollLeft = '650'
} else if (20220627 > Number(this.sameDay[0].date) && Number(this.sameDay[0].date) > 20220621) {
this.$refs.tabscroll.scrollLeft = '1100'
}
},