feat:完善样式
This commit is contained in:
@@ -75,6 +75,8 @@
|
|||||||
.btn-prev:disabled,
|
.btn-prev:disabled,
|
||||||
.btn-next,
|
.btn-next,
|
||||||
.btn-prev {
|
.btn-prev {
|
||||||
|
width: vw(40) !important;
|
||||||
|
height: vh(40) !important;
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
background-color: #004dc2 !important;
|
background-color: #004dc2 !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="video-box">
|
<div class="video-box">
|
||||||
<ul class="videos">
|
<ul class="videos">
|
||||||
<li class="video-item" v-for="item in 8" :key="item">
|
<li class="video-item" v-for="item in 8" :key="item">
|
||||||
<img src="@/assets/images/four-t-1.png" alt="" />
|
<img src="@/assets/images/sxzd.png" alt="" />
|
||||||
<p>
|
<p>
|
||||||
<span>核心路段:这是一条信息说明</span>
|
<span>核心路段:这是一条信息说明</span>
|
||||||
</p>
|
</p>
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
.video-item {
|
.video-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: vw(610);
|
width: vw(610);
|
||||||
height: vh(420);
|
height: vh(380);
|
||||||
padding: vh(12) vw(12);
|
padding: vh(12) vw(12);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-image: url('@/assets/images/item-primary.png');
|
background-image: url('@/assets/images/item-primary.png');
|
||||||
@@ -45,21 +45,21 @@
|
|||||||
> p {
|
> p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(100% - vw(24));
|
width: calc(100% - vw(24));
|
||||||
height: vh(32);
|
height: vh(40);
|
||||||
bottom: vh(12);
|
bottom: vh(12);
|
||||||
background: rgba(4, 30, 69, 0.72);
|
background: rgba(4, 30, 69, 0.72);
|
||||||
> span {
|
> span {
|
||||||
padding-left: vw(10);
|
padding-left: vw(20);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: vw(14);
|
font-size: vw(14);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: vh(32);
|
line-height: vh(40);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pagination-box {
|
.pagination-box {
|
||||||
margin-top: vh(10);
|
margin-top: vh(30);
|
||||||
margin-right: vw(50);
|
margin-right: vw(50);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|||||||
@@ -633,13 +633,10 @@
|
|||||||
&-item {
|
&-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: vw(686);
|
width: vw(686);
|
||||||
height: vh(420);
|
height: vh(380);
|
||||||
padding: vw(10);
|
padding: vh(10) vw(10);
|
||||||
background-image: url('/src/assets/images/item-primary.png');
|
background-image: url('/src/assets/images/item-primary.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
&:nth-child(3n) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.video-item__follow {
|
.video-item__follow {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
@@ -694,9 +691,8 @@
|
|||||||
}
|
}
|
||||||
&-item__video {
|
&-item__video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: vh(406);
|
height: vh(366);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
// background-color: #000;
|
|
||||||
}
|
}
|
||||||
&-detail {
|
&-detail {
|
||||||
margin-left: vw(10);
|
margin-left: vw(10);
|
||||||
|
|||||||
Reference in New Issue
Block a user