Web/bigscreenWeb
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码提交

Browse Source
This commit is contained in:
name
2025-09-25 13:32:47 +08:00
parent 63022ffecd
commit 66b650750a
132 changed files with 35432 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/assets/scss/SagTraceResult_WX.scss Normal file
View File

@@ -0,0 +1,198 @@
#index {
color: #d3d6dd;
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
.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: 18px;
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: 3fr 1fr;
// grid-template-columns: 1fr 2fr 1fr;
}
//下方区域的布局
.content-left {
display: grid;
gap: 5px;
grid-template-rows: 1fr, 2fr;
// 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: #ffcc00;
cursor: pointer;
margin-right: 20px;
white-space: nowrap;
}
.titleBox {
display: flex;
justify-content: space-between;
width: 100%;
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;
background: linear-gradient(
90deg,
#cccccc80 0%,
#1d83ce70 1%,
#1d83ce50 35%,
#1d83ce30 70%,
#1d83ce10 100% /* 活力橙 */
);
}
}

97
src/assets/scss/_variables.scss Normal file
View File

@@ -0,0 +1,97 @@
// 颜色
$colors: (
"primary": #db9e3f,
"info-1": #4394e4,
"info": #4b67af,
"white": #ffffff,
"light": #f9f9f9,
"grey-1": #999999,
"grey": #666666,
"dark-1": #5f5f5f,
"dark": #222222,
"black-1": #171823,
"black": #000000,
);
// 字体大小
$base-font-size: 16px;
$font-sizes: (
xxs: 0.1,
//8px
xs: 0.125,
//10px
sm: 0.2875,
//12px
md: 0.1625,
//13px
lg: 0.175,
//14px
xl: 0.2,
//16px
xxl: 0.225,
//18px
xxxl: 0.25 //20px,,,,
);
// 宽高
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
//flex
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
.flex-1 {
flex: 1;
}
//.mt-1 => margin top
//spacing
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-base-size: 16px;
$spacing-sizes: (
0: 0,
1: 0.25,
2: 0.5,
3: 1,
4: 1.5,
5: 3,
);

101
src/assets/scss/element.scss Normal file
View File

@@ -0,0 +1,101 @@
:deep(.el-dialog__body) {
color: #fff !important;
padding: 10px;
}
:deep(.el-form-item__label) {
color: #fff !important;
}
:deep(.el-dialog__header) {
padding: 10px;
background-color: #21232b;
border-bottom: 1px solid #fff;
}
:deep(.el-dialog__footer) {
padding: 0 10px 10px !important;
}
:deep(.el-descriptions__label.el-descriptions__cell) {
background: #0a73ff40 !important;
color: #fff !important;
font-weight: bold;
}
:deep(.el-descriptions) {
--el-descriptions-table-border: 1px solid #0a73ff;
.el-descriptions__content.el-descriptions__cell.is-bordered-content {
color: #fff;
}
.el-descriptions__body {
background-color: #00000050;
}
}
:deep(.tableBox) {
padding: 10px;
.el-table {
--el-table-border-color: #0a73ff;
--el-table-row-hover-bg-color: #0a73ff20;
--el-table-header-bg-color: #0a73ff40;
--el-table-bg-color: #ffffff00;
text-align: center;
// th {
// background-color: #0a73ff;
// color: #fff;
// }
tr {
background-color: #00000050 !important;
color: #fff;
}
}
}
:deep(
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell
) {
background: #5aa1ff29;
}
.titles {
display: flex;
align-items: center;
text-align: center;
margin-left: 20px;
div {
background-color: #0a73ff70;
color: #ccc;
cursor: pointer;
&:nth-child(1) {
margin-right: 10px;
}
}
.titleClick {
background-color: #0a73ff;
color: #fff;
}
}
:deep(.el-dialog) {
--el-dialog-bg-color: #343849c7 !important;
padding: 0px;
--el-dialog-margin-top: 8vh;
.el-dialog__title,
.el-dialog__close {
color: #fff;
}
}
:deep(.el-drawer) {
--el-drawer-bg-color: #343849c7;
color: #fff;
.el-drawer__header {
// background-color: #21232b;
background-color: #9f1700;
}
}
:deep(.el-pagination) {
.el-pagination__total,
.el-pagination__goto,
.el-pagination__classifier {
color: #fff;
}
// --el-text-color-regular: #fff;
}

348
src/assets/scss/index.css Normal file
View File

@@ -0,0 +1,348 @@
@charset "UTF-8";
#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;
}
#index .bg {
width: 100%;
height: 100%;
padding: 16px 16px 0 16px;
background-image: url("../../assets/pageBg.png");
background-size: cover;
background-position: center center;
}
#index .headerBox {
width: 100%;
height: 124px;
background-image: url("../../assets/download.png");
background-size: cover;
background-position: center center;
}
#index .secondLine {
position: absolute;
right: 20px;
top: 30px;
}
#index .host-body .dv-dec-10,
#index .host-body .dv-dec-10-s {
width: 33.3%;
height: 5px;
}
#index .host-body .dv-dec-10-s {
transform: rotateY(180deg);
}
#index .host-body .dv-dec-8 {
width: 200px;
height: 50px;
}
#index .host-body .title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
}
#index .host-body .title .title-text {
width: 100%;
font-size: 35px;
position: absolute;
line-height: 35px;
top: 10px;
left: 50%;
font-weight: 700;
transform: translate(-50%);
}
#index .host-body .title .dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
#index .host-body .react-r-s,
#index .host-body .react-l-s {
background-color: #0f1325;
}
#index .host-body .react-right {
font-size: 15px;
width: 200px;
line-height: 30px;
text-align: center;
transform: skewX(-45deg);
}
#index .host-body .react-right.react-l-s {
text-align: right;
width: 150px;
}
#index .host-body .react-right .react-after {
position: absolute;
right: -25px;
top: 0;
height: 24px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
#index .host-body .react-right .text {
display: inline-block;
transform: skewX(45deg);
}
#index .host-body .body-box {
margin-top: 10px;
display: flex;
flex-direction: column;
}
#index .host-body .body-box .content-box {
display: grid;
gap: 5px;
grid-template-columns: 1fr 2fr 1fr;
}
#index .host-body .body-box .bototm-box {
margin-top: 5px;
display: grid;
gap: 5px;
grid-template-columns: 1fr 2fr 1fr;
}
#index .dv-border-box-13 {
padding: 20px 10px 0 10px;
}
#index .writing {
text-decoration: underline;
color: #daa520;
cursor: pointer;
margin-right: 20px;
white-space: nowrap;
}
#index .titleBox {
display: flex;
justify-content: space-between;
width: 100%;
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 {
/* 设置初始的边框样式 */
/* 添加呼吸动画 */
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: red;
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 {
/* 设置初始的边框样式 */
/* 添加呼吸动画 */
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: #ffdb00;
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 {
/* 滚动条轨道 */
/* 滚动条滑块hover状态 */
}
div::-webkit-scrollbar {
width: 6px;
/* 滚动条宽度 */
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
/* 滑块圆角 */
background: rgba(204, 204, 204, 0.8);
/* 设置滚动条轨道背景色 */
cursor: pointer;
transition: var(--el-transition-duration) background-color;
}
div::-webkit-scrollbar-thumb:hover {
background: rgba(204, 204, 204, 0.5);
/* 设置滚动条轨道背景色 */
}
div .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);
}

1
src/assets/scss/index.min.css vendored Normal file
View File

@@ -0,0 +1 @@
#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}#index .bg{width:100%;height:100%;padding:16px 16px 0 16px;background-image:url("../../assets/pageBg.png");background-size:cover;background-position:center center}#index .headerBox{width:100%;height:124px;background-image:url("../../assets/download.png");background-size:cover;background-position:center center}#index .secondLine{position:absolute;right:20px;top:30px}#index .host-body .dv-dec-10,#index .host-body .dv-dec-10-s{width:33.3%;height:5px}#index .host-body .dv-dec-10-s{transform:rotateY(180deg)}#index .host-body .dv-dec-8{width:200px;height:50px}#index .host-body .title{position:relative;width:500px;text-align:center;background-size:cover;background-repeat:no-repeat}#index .host-body .title .title-text{width:100%;font-size:35px;position:absolute;line-height:35px;top:10px;left:50%;font-weight:700;transform:translate(-50%)}#index .host-body .title .dv-dec-6{position:absolute;bottom:-30px;left:50%;width:250px;height:8px;transform:translate(-50%)}#index .host-body .react-r-s,#index .host-body .react-l-s{background-color:#0f1325}#index .host-body .react-right{font-size:15px;width:200px;line-height:30px;text-align:center;transform:skewX(-45deg)}#index .host-body .react-right.react-l-s{text-align:right;width:150px}#index .host-body .react-right .react-after{position:absolute;right:-25px;top:0;height:24px;width:50px;background-color:#0f1325;transform:skewX(45deg)}#index .host-body .react-right .text{display:inline-block;transform:skewX(45deg)}#index .host-body .body-box{margin-top:10px;display:flex;flex-direction:column}#index .host-body .body-box .content-box{display:grid;gap:5px;grid-template-columns:1fr 2fr 1fr}#index .host-body .body-box .bototm-box{margin-top:5px;display:grid;gap:5px;grid-template-columns:1fr 2fr 1fr}#index .dv-border-box-13{padding:20px 10px 0 10px}#index .writing{text-decoration:underline;color:#daa520;cursor:pointer;margin-right:20px;white-space:nowrap}#index .titleBox{display:flex;justify-content:space-between;width:100%;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{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:red;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{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:#ffdb00;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;color:#ff2501;cursor:pointer}.animate-flash-yellow{animation:flash 1s infinite;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;text-align:center;color:#ff0000}div::-webkit-scrollbar{width:6px}div::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(204,204,204,0.8);cursor:pointer;transition:var(--el-transition-duration) background-color}div::-webkit-scrollbar-thumb:hover{background:rgba(204,204,204,0.5)}div .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)}

368
src/assets/scss/index.scss Normal file
View File

@@ -0,0 +1,368 @@
#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);
}

253
src/assets/scss/style.scss Normal file
View File

@@ -0,0 +1,253 @@
@import "./variables";
// 全局样式
* {
margin: 0;
padding: 0;
list-style-type: none;
box-sizing: border-box;
outline: none;
--el-color-primary: #0a73ff;
--el-color-success: #2e8b57;
--el-color-warning: #daa520;
--el-color-danger: #a52a2a;
--el-scrollbar-bg-color: #ccc;
--el-scrollbar-opacity: 0.7;
// --el-fill-color-blank: #ffffff00;
}
html {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.2em;
background-color: #f1f1f1;
margin: 0;
padding: 0;
overflow: hidden;
/* 滚动条整体 */
::-webkit-scrollbar {
width: 8px; /* 垂直滚动条宽度 */
height: 8px; /* 水平滚动条高度 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: var(--el-color-primary); /* 滑块颜色 */
border-radius: 4px; /* 滑块圆角 */
transition: background 0.3s; /* 滑块 hover 过渡效果 */
}
}
a {
color: #343440;
text-decoration: none;
box-sizing: border-box;
}
.clearfix {
&::after {
content: "";
display: table;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
// 图标
.iconfont {
font-size: 20px !important;
color: #5cd9e8;
}
//浮动
.float-r {
float: right;
}
//浮动
.float-l {
float: left;
}
// 字体加粗
.fw-b {
font-weight: bold;
}
//文章一行显示，多余省略号显示
.title-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bg-color-black {
background-color: rgba(19, 25, 47, 0.6);
}
.bg-color-blue {
background-color: #1a5cd7;
}
.colorBlack {
color: #272727 !important;
&:hover {
color: #272727 !important;
}
}
.colorGrass {
color: #33cea0;
&:hover {
color: #33cea0 !important;
}
}
.colorRed {
color: #ff5722;
&:hover {
color: #ff5722 !important;
}
}
.colorText {
color: #d3d6dd !important;
&:hover {
color: #d3d6dd !important;
}
}
.colorBlue {
color: #257dff !important;
&:hover {
color: #257dff !important;
}
}
//颜色
@each $colorkey, $color in $colors {
.text-#{$colorkey} {
color: $color;
}
.bg-#{$colorkey} {
background-color: $color;
}
}
//对齐
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
//flex
@each $key, $value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key, $value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
//字体
@each $fontkey, $fontvalue in $font-sizes {
.fs-#{$fontkey} {
font-size: $fontvalue * $base-font-size;
}
}
//.mt-1 => margin top
//spacing
@each $typekey, $type in $spacing-types {
//.m-1
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}-#{$sizekey} {
#{$type}: $size * $spacing-base-size;
}
}
//.mx-1
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}x-#{$sizekey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typekey}y-#{$sizekey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
//.mt-1
@each $directionkey, $direction in $spacing-directions {
@each $sizekey, $size in $spacing-sizes {
.#{$typekey}#{$directionkey}-#{$sizekey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
.#{$typekey} {
#{$type}: 0;
}
@for $i from 0 through 100 {
.md#{$i} {
margin: #{$i}px !important;
}
.mt#{$i} {
margin-top: #{$i}px !important;
}
.mr#{$i} {
margin-right: #{$i}px !important;
}
.mb#{$i} {
margin-bottom: #{$i}px !important;
}
.ml#{$i} {
margin-left: #{$i}px !important;
}
.pd#{$i} {
padding: #{$i}px !important;
}
.pt#{$i} {
padding-top: #{$i}px !important;
}
.pr#{$i} {
padding-right: #{$i}px !important;
}
.pb#{$i} {
padding-bottom: #{$i}px !important;
}
.pl#{$i} {
padding-left: #{$i}px !important;
}
}
}