feat:完善样式

This commit is contained in:
张先生
2025-03-18 19:04:11 +08:00
parent aeadb4d704
commit 05d6770121
3 changed files with 11 additions and 13 deletions

View File

@@ -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;
} }

View File

@@ -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;

View File

@@ -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);