lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/monitor/components/box-2.vue
View File

@@ -588,6 +588,7 @@
</script>
<style lang="scss" scoped>
.new-title{
margin-bottom:vh(20);
color:#fff;
@@ -621,7 +622,7 @@
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
}
.pause {
@@ -642,34 +643,35 @@
:deep(.el-input__inner) {
background-color: rgba(0, 0, 0, 0) !important;
color: #fff;
font-size: font-vw(22) !important;
}
.box-2 {
margin-top: vh(120);
height: vh(950);
// height: vh(950);
display: flex;
flex: 1;
}
:deep(.el-input__inner) {
height: vh(36);
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
}
.left-nav {
margin: 0 vw(8);
width: vw(250);
width: vw(400);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
.bom-box {
margin-top: vh(20);
.search-box {
border-radius: vw(2);
height: vh(36);
height: vh(56);
border: 1px solid #0096ff;
margin: vh(10) auto;
display: flex;
align-items: center;
justify-content: space-between;
.search-icon {
width: vw(20);
height: vw(20);
@@ -679,12 +681,13 @@
.tree-box {
position: relative;
height: vh(490);
// height: vh(490);
padding: 0 vw(20);
padding-right:0;
padding-bottom:vw(10);
overflow-y: auto;
overflow-x: hidden;
margin-top:vh(30);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
@@ -701,7 +704,8 @@
.tree-item {
cursor: pointer;
position: relative;
padding-top: vh(20);
padding-top: vh(30);
// border-left: vw(2) solid #37d8fc;
&:nth-child(1) {
padding-top: 0;
@@ -724,7 +728,7 @@
padding: 0 vw(5);
display: block;
font-weight: 400;
font-size: vw(15);
font-size: font-vw(20);
color: #ffffff;
text-align: left;
font-style: normal;
@@ -755,7 +759,7 @@
cursor: pointer;
color: rgb(192,216,254);
font-weight: 400;
font-size: vw(15);
font-size: font-vw(18);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -773,9 +777,9 @@
}
.ul {
font-weight: 400;
font-size: vw(18);
font-size: font-vw(18);
color: #fff;
height: vh(340);
height: vh(740);
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
@@ -794,13 +798,14 @@
}
.li {
cursor: pointer;
width: vw(250);
height: vh(58);
line-height: vh(58);
// width: vw(250);
height: vh(98);
line-height: vh(98);
text-align: center;
margin-bottom: vh(15);
margin-bottom: vh(25);
background: url('/src/assets/images/m-nav-bg-1.png');
background-size: 100% 100%;
font-size: font-vw(22);
}
.active {
background: url('/src/assets/images/m-nav-bg-2.png');
@@ -813,7 +818,7 @@
&-wrapper {
position: relative;
width: 100%;
height: vh(960);
// height: vh(960);
padding: vh(30) vw(20);
box-sizing: border-box;
background-image: url('/src/assets/images/log-v-bg.png');
@@ -822,7 +827,7 @@
padding: vh(10) vw(30);
position: absolute;
right: vw(30);
bottom: vh(20);
bottom: vh(50);
}
}
&-list {
@@ -835,7 +840,7 @@
position: relative;
// width: vw(686);
width: 33%;
height: vh(380);
height: vh(920);
padding: vh(10) vw(10);
background-image: url('/src/assets/images/item-primary.png');
background-size: 100% 100%;
@@ -857,7 +862,7 @@
text-align: center;
line-height: vh(24);
font-weight: 400;
font-size: vw(16);
font-size: font-vw(16);
color: #ffffff;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
@@ -875,9 +880,9 @@
left: 0;
bottom: 0;
width: 100%;
padding: vh(10) vw(10);
padding: vh(20) vw(20);
color: #fff;
font-size: vw(14);
font-size: font-vw(20);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -889,11 +894,12 @@
}
&-item__title--primary {
@extend .video-item__title;
font-size: font-vw(20);
background-color: rgba(4, 30, 69, 0.72);
}
&-item__video {
width: 100%;
height: vh(366);
height: vh(900);
object-fit: cover;
}
&-detail {
@@ -905,7 +911,7 @@
position: relative;
padding: vh(40) vw(50);
width: vw(1660);
height: vh(960);
// height: vh(960);
background-image: url('/src/assets/images/one-video-bg.png');
background-size: 100% 100%;
}
@@ -916,7 +922,7 @@
top: 40 (vh);
z-index: 9;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #ffffff;
padding: vw(20);
display: flex;
@@ -925,14 +931,14 @@
}
&-detail__video {
width: 100%;
height: vh(820);
height: vh(1820);
object-fit: contain;
background-color: #000;
}
&-right {
margin-left: vw(8);
width: vw(440);
height: vh(956);
// height: vh(956);
background: #082f5a;
.back-box {
cursor: pointer;
@@ -946,14 +952,14 @@
}
& > span {
font-weight: bold;
font-size: vw(20);
font-size: font-vw(20);
color: #ffffff;
}
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(920);
height: vh(1920);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
@@ -991,7 +997,7 @@
width: 100%;
padding: vw(10);
color: #fff;
font-size: vw(14);
font-size: font-vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -1003,6 +1009,8 @@
}
&-title--primary {
@extend .item-title;
font-size: font-vw(20);
padding:vw(10);
background-color: rgba(4, 30, 69, 0.72);
}
&-img {
@@ -1054,7 +1062,7 @@
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
font-size: font-vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
@@ -1086,7 +1094,7 @@
border-radius: 0px 0px 0px 0px;
text-align: center;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #ffffff;
padding: vw(20);
text-align: left;