369 lines
7.6 KiB
SCSS
369 lines
7.6 KiB
SCSS
#index {
|
||
color: #d3d6dd;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transform-origin: left top;
|
||
--el-text-color-primary: #9b9b9b;
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 16px 16px 0 16px;
|
||
background-image: url("../../assets/pageBg.png");
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
.headerBox {
|
||
width: 100%;
|
||
height: 124px;
|
||
background-image: url("../../assets/download.png");
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
.secondLine {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 30px;
|
||
}
|
||
.host-body {
|
||
//头部样式
|
||
.dv-dec-10,
|
||
.dv-dec-10-s {
|
||
width: 33.3%;
|
||
height: 5px;
|
||
}
|
||
.dv-dec-10-s {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.dv-dec-8 {
|
||
width: 200px;
|
||
height: 50px;
|
||
}
|
||
.title {
|
||
position: relative;
|
||
width: 500px;
|
||
text-align: center;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
.title-text {
|
||
width: 100%;
|
||
font-size: 35px;
|
||
position: absolute;
|
||
line-height: 35px;
|
||
top: 10px;
|
||
left: 50%;
|
||
font-weight: 700;
|
||
transform: translate(-50%);
|
||
}
|
||
|
||
.dv-dec-6 {
|
||
position: absolute;
|
||
bottom: -30px;
|
||
left: 50%;
|
||
width: 250px;
|
||
height: 8px;
|
||
transform: translate(-50%);
|
||
}
|
||
}
|
||
|
||
// 第二行
|
||
|
||
.react-r-s,
|
||
.react-l-s {
|
||
background-color: #0f1325;
|
||
}
|
||
|
||
// 平行四边形
|
||
.react-right {
|
||
&.react-l-s {
|
||
text-align: right;
|
||
width: 150px;
|
||
}
|
||
font-size: 15px;
|
||
width: 200px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
transform: skewX(-45deg);
|
||
|
||
.react-after {
|
||
position: absolute;
|
||
right: -25px;
|
||
top: 0;
|
||
height: 24px;
|
||
width: 50px;
|
||
background-color: #0f1325;
|
||
transform: skewX(45deg);
|
||
}
|
||
|
||
.text {
|
||
display: inline-block;
|
||
transform: skewX(45deg);
|
||
}
|
||
}
|
||
|
||
// .react-left {
|
||
// &.react-l-s {
|
||
// width: 500px;
|
||
// text-align: left;
|
||
// }
|
||
// font-size: 18px;
|
||
// width: 100px;
|
||
// height: 50px;
|
||
// line-height: 50px;
|
||
// text-align: center;
|
||
// transform: skewX(45deg);
|
||
// background-color: #0f1325;
|
||
|
||
// .react-before {
|
||
// position: absolute;
|
||
// left: -25px;
|
||
// top: 0;
|
||
// height: 50px;
|
||
// width: 50px;
|
||
// background-color: #0f1325;
|
||
// transform: skewX(-45deg);
|
||
// }
|
||
|
||
// .text {
|
||
// display: inline-block;
|
||
// transform: skewX(-45deg);
|
||
// }
|
||
// }
|
||
|
||
.body-box {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
//下方区域的布局
|
||
.content-box {
|
||
display: grid;
|
||
gap: 5px;
|
||
grid-template-columns: 1fr 2fr 1fr;
|
||
}
|
||
|
||
// 底部数据
|
||
.bototm-box {
|
||
margin-top: 5px;
|
||
display: grid;
|
||
gap: 5px;
|
||
grid-template-columns: 1fr 2fr 1fr;
|
||
}
|
||
}
|
||
}
|
||
.dv-border-box-13 {
|
||
padding: 20px 10px 0 10px;
|
||
}
|
||
.writing {
|
||
text-decoration: underline;
|
||
color: #daa520;
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
white-space: nowrap;
|
||
}
|
||
.titleBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
// height: 30px;
|
||
|
||
line-height: 32px;
|
||
font-size: 18px;
|
||
padding-left: 20px;
|
||
margin: 0 auto;
|
||
background-image: url("@/assets/img/title.png");
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
/* 呼吸闪烁的容器样式 红色*/
|
||
.bg-red {
|
||
/* 设置初始的边框样式 */
|
||
// border: 1px solid rgba(255, 0, 0, 0.3);
|
||
/* 添加呼吸动画 */
|
||
animation: breathing_red 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* 定义呼吸动画 */
|
||
@keyframes breathing_red {
|
||
0% {
|
||
/* 开始时边框颜色较淡 */
|
||
border-color: rgba(255, 0, 0, 0.3);
|
||
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
|
||
}
|
||
50% {
|
||
/* 中间时边框颜色最深 */
|
||
border-color: rgba(255, 0, 0, 1);
|
||
box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8);
|
||
}
|
||
100% {
|
||
/* 结束时边框颜色回到较淡状态 */
|
||
border-color: rgba(255, 0, 0, 0.3);
|
||
box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
/* 呼吸闪烁的容器样式 */
|
||
.bg-yellow {
|
||
/* 设置初始的边框样式 */
|
||
// border: 1px solid rgba(255, 219, 0, 0.3);
|
||
/* 添加呼吸动画 */
|
||
animation: breathing_yellow 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* 定义呼吸动画 */
|
||
@keyframes breathing_yellow {
|
||
0% {
|
||
/* 开始时边框颜色较淡 */
|
||
border-color: rgba(255, 219, 0, 0.3);
|
||
box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
|
||
}
|
||
50% {
|
||
/* 中间时边框颜色最深 */
|
||
border-color: rgba(255, 219, 0, 1);
|
||
box-shadow: inset 0 0 100px rgba(255, 219, 0, 0.8);
|
||
}
|
||
100% {
|
||
/* 结束时边框颜色回到较淡状态 */
|
||
border-color: rgba(255, 219, 0, 0.3);
|
||
box-shadow: inset 0 0 50px rgba(255, 219, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
.scroll-box {
|
||
width: 1820px;
|
||
height: 40px;
|
||
padding: 10px 15px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
left: 50px;
|
||
}
|
||
|
||
.scroll-content {
|
||
position: absolute;
|
||
white-space: nowrap;
|
||
animation: scroll 0s linear infinite;
|
||
/* 根据内容长度调整动画时间 */
|
||
|
||
padding-left: 100%;
|
||
/* 初始位置偏移 */
|
||
}
|
||
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
|
||
/* 闪烁动画定义 */
|
||
@keyframes flash {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.3; /* 半透明效果实现闪烁 */
|
||
}
|
||
}
|
||
|
||
.animate-flash-red {
|
||
animation: flash 1s infinite; /* 1秒周期，无限循环 */
|
||
color: #ff2501;
|
||
cursor: pointer;
|
||
}
|
||
.animate-flash-yellow {
|
||
animation: flash 1s infinite; /* 1秒周期，无限循环 */
|
||
color: #bb7b00;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 悬停暂停效果 */
|
||
.scroll-box:hover .scroll-content {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
:deep(.el-divider--horizontal) {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
@keyframes step-scale {
|
||
0% {
|
||
transform: scale(1.2);
|
||
}
|
||
50% {
|
||
transform: scale(1.2);
|
||
} /* 突变时放大 */
|
||
100% {
|
||
transform: scale(1.2);
|
||
} /* 稳定后保持放大 */
|
||
}
|
||
.step-scale {
|
||
animation: step-scale 1s infinite; /* forwards保持最终状态 */
|
||
text-align: center;
|
||
color: #ff0000; /* 警告色 */
|
||
}
|
||
|
||
div {
|
||
&::-webkit-scrollbar {
|
||
width: 6px; /* 滚动条宽度 */
|
||
}
|
||
|
||
/* 滚动条轨道 */
|
||
// &::-webkit-scrollbar-track {
|
||
// background: #ccc; /* 轨道背景色 */
|
||
// border-radius: 10px; /* 轨道圆角 */
|
||
// }
|
||
|
||
// /* 滚动条滑块 */
|
||
&::-webkit-scrollbar-thumb {
|
||
// background: #1d83ce; /* 滑块颜色 */
|
||
border-radius: 10px; /* 滑块圆角 */
|
||
background: rgba(204, 204, 204, 0.8); /* 设置滚动条轨道背景色 */
|
||
cursor: pointer;
|
||
transition: var(--el-transition-duration) background-color;
|
||
}
|
||
|
||
/* 滚动条滑块hover状态 */
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
// background: #1d83ce; /* hover时的滑块颜色 */
|
||
background: rgba(204, 204, 204, 0.5); /* 设置滚动条轨道背景色 */
|
||
}
|
||
|
||
.el-divider--horizontal {
|
||
border-top: 1px var(--el-color-primary) var(--el-border-style);
|
||
}
|
||
}
|
||
|
||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||
background-color: #ffffff00;
|
||
}
|
||
:deep(.frontBox) {
|
||
background-color: var(--el-color-primary) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
::v-deep(.el-tabs__item) {
|
||
color: #fff;
|
||
}
|
||
::v-deep(.el-tabs__item.is-active) {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
::v-deep(.el-tabs__nav-wrap::after) {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
::v-deep(.el-tabs__active-bar) {
|
||
color: var(--el-color-primary);
|
||
}
|