yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏优化

Browse Source
This commit is contained in:
hrx 2026-01-26 14:48:18 +08:00
parent b6573704fa
commit e9ac9cbd6e
6 changed files with 211 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue
View File

@ -88,21 +88,21 @@ export default {
cityName: '北京', cityName: '北京',
direction: 'right-top', direction: 'right-top',
labelPosition: [121.40, 50.90], labelPosition: [121.40, 50.90],
position: { top: '12%', left: '73%' } position: { top: '16.5%', left: '74%' }
}, },
{ {
name: '内蒙集群', name: '内蒙集群',
cityName: '内蒙古', cityName: '内蒙古',
direction: 'left', direction: 'left',
labelPosition: [105.73, 50.83], labelPosition: [105.73, 50.83],
position: { top: '13%', left: '34%' } position: { top: '17%', left: '36.2%' }
}, },
{ {
name: '新疆集群', name: '新疆集群',
cityName: '新疆', cityName: '新疆',
direction: 'left', direction: 'left',
labelPosition: [88.68, 52.77], labelPosition: [88.68, 52.77],
position: { top: '8%', left: '8%' } position: { top: '13.5%', left: '10.2%' }
}, },
{ {
name: '长三角集群', name: '长三角集群',
@ -116,14 +116,14 @@ export default {
cityName: '广东', cityName: '广东',
direction: 'right', direction: 'right',
labelPosition: [125.5, 28.12], labelPosition: [125.5, 28.12],
position: { top: '57.3%', left: '80.9%' } position: { top: '60%', left: '80.9%' }
}, },
{ {
name: '川渝集群', name: '川渝集群',
cityName: '四川', cityName: '四川',
direction: 'left', direction: 'left',
labelPosition: [99.06, 24], labelPosition: [99.06, 24],
position: { top: '69.2%', left: '24%' } position: { top: '68.4%', left: '26%' }
} }
], ],
// 集群名称到data-manager中key的映射 // 集群名称到data-manager中key的映射
@ -397,58 +397,89 @@ export default {
<style scoped> <style scoped>
#vmcentercontainer { #vmcentercontainer {
position: relative; position: relative;
width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
} }
/* 修改背景样式 - 确保它们重叠 */
.bg1, .bg2, .bg3 { .bg1, .bg2, .bg3 {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-size: 100% 100%; background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none; /* 防止干扰点击事件 */
} }
/* 最底层背景 */
.bg1 { .bg1 {
height: 518px; height: 50vh;
width: 518px; min-height: 300px;
background: url(~@/assets/image/map.png); width: 50vh;
min-width: 300px;
background: url('../../../../../assets/image/map.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.3; opacity: 0.3;
z-index: 1;
} }
/* 中间层背景 */
.bg2 { .bg2 {
height: 643px; height: 60vh;
width: 643px; min-height: 360px;
background: url(~@/assets/image/lbx.png); width: 60vh;
min-width: 360px;
background: url('../../../../../assets/image/lbx.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.6; opacity: 0.6;
z-index: 2;
animation: rotate1 15s linear infinite; animation: rotate1 15s linear infinite;
} }
/* 最上层背景 */
.bg3 { .bg3 {
height: 566px; height: 55vh;
width: 566px; min-height: 330px;
background: url(~@/assets/image/jt.png); width: 55vh;
min-width: 330px;
background: url('../../../../../assets/image/jt.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8; opacity: 0.8;
z-index: 3;
animation: rotate2 15s linear infinite; animation: rotate2 15s linear infinite;
} }
/* 确保地图容器在最上层 */
.echart-map-container { .echart-map-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 10; /* 确保地图在背景之上 */
} }
.worldmap { .worldmap {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 5; z-index: 10;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.wrapper { .wrapper {
padding: 15px; padding: .15rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -469,9 +500,9 @@ export default {
.item { .item {
display: flex; display: flex;
width: 200px; width: 2rem;
color: #fff; color: #fff;
font-size: 10px; font-size: .1rem;
} }
.item .left { .item .left {
@ -479,44 +510,44 @@ export default {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
background-color: rgba(147, 112, 219, 0.3); background-color: rgba(147, 112, 219, 0.3);
padding: 8px; padding: .08rem;
} }
.left .title { .left .title {
padding-bottom: 16px; padding-bottom: .16rem;
font-size: 12px; font-size: .12rem;
line-height: 1.3; line-height: 1.3;
} }
.item .btn { .item .btn {
color: #FDBD00; color: #FDBD00;
cursor: pointer; cursor: pointer;
padding: 2px 8px; padding: .02rem .08rem;
border: 1px solid #FDBD00; border: .01rem solid #FDBD00;
border-radius: 4px; border-radius: .04rem;
text-align: center; text-align: center;
transition: all 0.3s; transition: all 0.3s;
font-size: 12px; font-size: .12rem;
font-weight: bold; font-weight: bold;
} }
.item .btn:hover { .item .btn:hover {
background: rgba(253, 189, 0, 0.1); background: rgba(253, 189, 0, 0.1);
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 10px rgba(253, 189, 0, 0.5); box-shadow: 0 0 .1rem rgba(253, 189, 0, 0.5);
} }
.item .right { .item .right {
text-align: center; text-align: center;
width: 20px; width: .2rem;
font-size: 12px; font-size: .12rem;
background-color: #000; background-color: #000;
writing-mode: vertical-lr; writing-mode: vertical-lr;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
letter-spacing: 0.5em; letter-spacing: 0.5em;
padding: 5px 0; padding: .05rem 0;
} }
.reset-container { .reset-container {
@ -528,44 +559,44 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: .1rem;
} }
.current-cluster-text { .current-cluster-text {
color: white; color: white;
font-size: 18px; font-size: .18rem;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); text-shadow: 0 0 .05rem rgba(255, 255, 255, 0.5);
padding: 8px 16px; padding: .08rem .16rem;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: .08rem;
min-width: 200px; min-width: 2rem;
} }
.reset-btn { .reset-btn {
background: #0A2463 ; background: #0A2463 ;
color: white; color: white;
padding: 10px 20px; padding: .1rem .2rem;
border-radius: 20px; border-radius: .2rem;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: .14rem;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s; transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.3); border: .01rem solid rgba(255, 255, 255, 0.3);
} }
.reset-btn:hover { .reset-btn:hover {
background: #0F3460; background: #0F3460;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 0 15px rgba(24, 144, 255, 0.7); box-shadow: 0 0 .15rem rgba(24, 144, 255, 0.7);
} }
.reset-btn span { .reset-btn span {
margin-right: 5px; margin-right: .05rem;
} }
.sortBox { .sortBox {
@ -576,39 +607,39 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 20px; padding: .2rem;
} }
.sortBox ul { .sortBox ul {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 15px; gap: .15rem;
margin-top: 20px; margin-top: .2rem;
padding: 0; padding: 0;
margin: 20px 0 0 0; margin: .2rem 0 0 0;
} }
.sortBox li { .sortBox li {
list-style: none; list-style: none;
border: 1px solid #2086ee; border: .01rem solid #2086ee;
border-radius: 5px; border-radius: .05rem;
width: 250px; width: 2.5rem;
height: 35px; height: .35rem;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
color: #d3d5ea; color: #d3d5ea;
padding-left: 10px; padding-left: .1rem;
font-weight: 700; font-weight: 700;
background-color: rgba(32, 134, 238, 0.1); background-color: rgba(32, 134, 238, 0.1);
} }
.go-back { .go-back {
font-weight: bold; font-weight: bold;
border: 1px solid white; border: .01rem solid white;
border-radius: 5px; border-radius: .05rem;
padding: 8px 16px; padding: .08rem .16rem;
margin-bottom: 30px; margin-bottom: .3rem;
cursor: pointer; cursor: pointer;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
@ -628,4 +659,11 @@ export default {
from { transform: translate(-50%, -50%) rotate(0deg); } from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); } to { transform: translate(-50%, -50%) rotate(-360deg); }
} }
/* 调试用：添加边框查看元素位置（如果需要调试可以取消注释） */
/*
.bg1, .bg2, .bg3 {
border: 1px solid red;
}
*/
</style> </style>

40
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/index.vue
View File

@ -235,8 +235,8 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 0; padding: .1rem 0;
padding-top: 40px; padding-top: .4rem;
flex-shrink: 0; flex-shrink: 0;
/* 防止被压缩 */ /* 防止被压缩 */
@ -251,15 +251,15 @@ export default {
color: #ffffff; color: #ffffff;
transform: skew(-8deg); transform: skew(-8deg);
-webkit-transform: skew(-8deg); -webkit-transform: skew(-8deg);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); text-shadow: .01rem .01rem .02rem rgba(0, 0, 0, 0.4);
letter-spacing: 1px; letter-spacing: .01rem;
.top-text { .top-text {
font-size: 26px; font-size: .26rem;
} }
.btm-text { .btm-text {
font-size: 16px; font-size: .16rem;
} }
} }
} }
@ -271,7 +271,7 @@ export default {
width: 100%; width: 100%;
min-height: 0; min-height: 0;
/* 防止flex item溢出 */ /* 防止flex item溢出 */
margin-top: -50px; margin-top: -0.5rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -280,24 +280,24 @@ export default {
z-index: 99; z-index: 99;
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 140px; bottom: 1.4rem;
left:0; left:0;
width: 100%; width: 100%;
height: 40px !important; height: .4rem !important;
.btm-tab { .btm-tab {
width: 100%; width: 100%;
display: flex; display: flex;
color: #fff; color: #fff;
font-size: 16px; font-size: .16rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.tab-item { .tab-item {
margin-right: 40px; margin-right: .4rem;
width: 140px; width: 1.4rem;
height: 40px; height: .4rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -313,26 +313,26 @@ export default {
filter: brightness(1.2); /* 背景提亮，不修改原有背景图 */ filter: brightness(1.2); /* 背景提亮，不修改原有背景图 */
color: #409eff; /* 激活态文字高亮 */ color: #409eff; /* 激活态文字高亮 */
font-weight: 600; font-weight: 600;
width: 150px; width: 1.5rem;
height: 50px; height: .5rem;
} }
.overview,.overview-two{ .overview,.overview-two{
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 50px; margin-top: .5rem;
.overview-item{ .overview-item{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
margin-left: 50px; margin-left: .5rem;
.overview-title{ .overview-title{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 16px; font-size: .16rem;
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 0%; top: 0%;
@ -340,8 +340,8 @@ export default {
transform: translate(-50%, -60%); transform: translate(-50%, -60%);
} }
.overview-img{ .overview-img{
width: 70px; width: .7rem;
height: 50px; height: .5rem;
img{ img{
width: 100%; width: 100%;
height: 100%; height: 100%;

40
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue
View File

@ -24,7 +24,7 @@
<div class="heterogeneous data-section" :style="{ animationDelay: '0.9s' }"> <div class="heterogeneous data-section" :style="{ animationDelay: '0.9s' }">
<div class="title">集群规模</div> <div class="title">集群规模</div>
<div class="content"> <div class="content">
<dv-decoration-9 class="data-item" :style="{ animationDelay: '1s' }" style="width:200px;height:200px;color: #fff;font-size: 20px; font-weight: 600;"> <dv-decoration-9 class="data-item" :style="{ animationDelay: '1s' }" style="width:2rem;height:2rem;color: #fff;font-size: .2rem; font-weight: 600;">
{{ chipData.total }}P {{ chipData.total }}P
</dv-decoration-9> </dv-decoration-9>
</div> </div>
@ -514,8 +514,8 @@ export default {
height: calc(100vh - 160px); height: calc(100vh - 160px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: .15rem;
padding: 10px 0; padding: .1rem 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -531,19 +531,19 @@ export default {
display: flex; display: flex;
.one{ .one{
position: absolute; position: absolute;
left: 24px; left: .24rem;
top: 24px; top: .24rem;
} }
.two{ .two{
position: absolute; position: absolute;
left: 100px; left: 1rem;
top: 24px; top: .24rem;
} }
.three{ .three{
position: absolute; position: absolute;
left: 170px; left: 1.7rem;
top: 24px; top: .24rem;
} }
.top-tit { .top-tit {
@ -565,17 +565,17 @@ export default {
} }
.conter-bottom { .conter-bottom {
margin-top: -16px; margin-top: -0.16rem;
display: flex; display: flex;
padding-left: 10px; padding-left: .1rem;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
.bottom-tit { .bottom-tit {
padding-right: 4px; padding-right: .04rem;
span { span {
font-size: 11px; font-size: .11rem;
} }
} }
} }
@ -603,7 +603,7 @@ export default {
.cluster, .cluster,
.heterogeneous { .heterogeneous {
.title { .title {
margin-bottom: 20px; margin-bottom: .2rem;
} }
} }
@ -614,7 +614,7 @@ export default {
.title { .title {
padding-left: 12%; padding-left: 12%;
height: 36px; height: .36rem;
} }
} }
@ -622,18 +622,18 @@ export default {
.title { .title {
background: url(../images/titleBg.png) no-repeat; background: url(../images/titleBg.png) no-repeat;
background-size: cover; background-size: cover;
height: 36px; height: .36rem;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20%; padding-left: 20%;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif; font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
font-size: 14px; font-size: .14rem;
font-weight: 600; font-weight: 600;
transform: skew(-12deg); transform: skew(-12deg);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 10px; margin-bottom: .1rem;
} }
/* 图表容器 */ /* 图表容器 */
@ -647,11 +647,11 @@ export default {
// 模型调用 // 模型调用
.model-chart { .model-chart {
height: calc(100% - 46px); height: calc(100% - 46px);
width: 240px; width: 2.4rem;
} }
.token-chart { .token-chart {
width: 420px; width: 4.2rem;
} }
.content { .content {

97
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue
View File

@ -373,8 +373,8 @@ export default {
height: 100%; height: 100%;
img { img {
width: 28px; width: .28rem;
height: 28px; height: .28rem;
object-fit: contain; object-fit: contain;
} }
} }
@ -386,8 +386,8 @@ export default {
height: calc(100vh - 160px); height: calc(100vh - 160px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: .15rem;
padding: 10px 0; padding: .1rem 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -419,8 +419,8 @@ export default {
justify-content: center; justify-content: center;
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
overflow: hidden; overflow: hidden;
padding: 5px; /* 添加内边距 */ padding: .05rem; /* 添加内边距 */
margin-top: -40px; margin-top: -0.4rem;
} }
.user-num .content img { .user-num .content img {
@ -439,24 +439,24 @@ export default {
.title { .title {
background: url(../images/titleBg.png) no-repeat; background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height: 40px; height: .4rem;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 12%; padding-left: 12%;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif; font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
font-size: 16px; font-size: .16rem;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
transform: skew(-12deg); transform: skew(-12deg);
-webkit-transform: skew(-12deg); -webkit-transform: skew(-12deg);
margin-bottom: 10px; margin-bottom: .1rem;
} }
.user-class .content { .user-class .content {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
font-size: 14px; font-size: .14rem;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
position: relative; position: relative;
@ -474,7 +474,7 @@ export default {
} }
.finance, .medical, .creative, .education, .intelligence { .finance, .medical, .creative, .education, .intelligence {
padding-top: 12px; padding-top: .12rem;
} }
} }
@ -484,7 +484,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 .05rem;
} }
.power-use-chart { .power-use-chart {
@ -508,39 +508,40 @@ export default {
/* 中心TOP1样式 */ /* 中心TOP1样式 */
.circle-center { .circle-center {
width: 120px; width: 1.2rem;
height: 120px; height: 1.2rem;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 92, 207, 0.3); background: rgba(0, 92, 207, 0.3);
border: 2px solid rgba(72, 176, 255, 0.8); border: .02rem solid rgba(72, 176, 255, 0.8);
box-shadow: 0 0 15px rgba(72, 176, 255, 0.6); box-shadow: 0 0 .15rem rgba(72, 176, 255, 0.6);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 14px; font-size: .14rem;
position: relative; position: relative;
z-index: 2; z-index: 2;
opacity: 0;
.rank { .rank {
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: .05rem;
} }
.name { .name {
font-size: 16px; font-size: .16rem;
} }
} }
/* 周围TOP项基础样式 */ /* 周围TOP项基础样式 */
.circle-item { .circle-item {
width: 74px; width: .82rem;
height: 74px; height: .82rem;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 92, 207, 0.2); background: rgba(0, 92, 207, 0.2);
border: 1px solid rgba(72, 176, 255, 0.6); border: .01rem solid rgba(72, 176, 255, 0.6);
box-shadow: 0 0 10px rgba(72, 176, 255, 0.4); box-shadow: 0 0 .1rem rgba(72, 176, 255, 0.4);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -550,35 +551,36 @@ export default {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
transform-origin: center center; transform-origin: center center;
opacity: 0;
.rank { .rank {
font-weight: bold; font-weight: bold;
margin-bottom: 3px; margin-bottom: .03rem;
} }
.name { .name {
font-size: 13px; font-size: .13rem;
} }
} }
/* 各TOP项定位 */ /* 各TOP项定位 */
.item-top2 { .item-top2 {
width: 70px; width: .7rem;
height: 70px; height: .7rem;
top: 2px; top: .02rem;
right: 2px; right: .02rem;
} }
.item-top3 { .item-top3 {
bottom: 2px; bottom: .02rem;
left: 2px; left: .02rem;
} }
.item-top4 { .item-top4 {
top: 4px; top: .04rem;
left: -4px; left: -0.04rem;
} }
.item-top5 { .item-top5 {
bottom: 2px; bottom: .02rem;
right: -2px; right: -0.02rem;
} }
/* 增强动画效果 - 增加旋转速度 */ /* 增强动画效果 - 增加旋转速度 */
@ -644,25 +646,25 @@ export default {
/* 为每个小圆添加明显的轨道运动 */ /* 为每个小圆添加明显的轨道运动 */
.item-top2 { .item-top2 {
animation: rotate2 4s ease-in-out infinite; animation: fadeInLeft 0.6s ease-out forwards, rotate2 4s ease-in-out infinite;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6); box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8); border: 2px solid rgba(72, 176, 255, 0.8);
} }
.item-top3 { .item-top3 {
animation: rotate3 5s ease-in-out infinite; animation: fadeInLeft 0.6s ease-out forwards, rotate3 5s ease-in-out infinite;
animation-delay: 0.5s; animation-delay: 0.5s, 0.5s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6); box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8); border: 2px solid rgba(72, 176, 255, 0.8);
} }
.item-top4 { .item-top4 {
animation: rotate4 6s ease-in-out infinite; animation: fadeInLeft 0.6s ease-out forwards, rotate4 6s ease-in-out infinite;
animation-delay: 1s; animation-delay: 1s, 1s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6); box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8); border: 2px solid rgba(72, 176, 255, 0.8);
} }
.item-top5 { .item-top5 {
animation: rotate5 7s ease-in-out infinite; animation: fadeInLeft 0.6s ease-out forwards, rotate5 7s ease-in-out infinite;
animation-delay: 1.5s; animation-delay: 1.5s, 1.5s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6); box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8); border: 2px solid rgba(72, 176, 255, 0.8);
} }
@ -684,7 +686,8 @@ export default {
} }
.circle-center { .circle-center {
animation: centerGlow 3s ease-in-out infinite; animation: fadeInLeft 0.6s ease-out forwards, centerGlow 3s ease-in-out infinite;
animation-delay: 0.3s, 0s;
} }
/* 增强小圆的发光效果 */ /* 增强小圆的发光效果 */
@ -703,7 +706,7 @@ export default {
animation-play-state: paused; animation-play-state: paused;
transform: scale(1.15) !important; transform: scale(1.15) !important;
z-index: 10; z-index: 10;
box-shadow: 0 0 20px rgba(72, 176, 255, 1); box-shadow: 0 0 .2rem rgba(72, 176, 255, 1);
border: 2px solid rgba(72, 176, 255, 1); border: 2px solid rgba(72, 176, 255, 1);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -714,8 +717,8 @@ export default {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 280px; width: 2.8rem;
height: 280px; height: 2.8rem;
background: radial-gradient( background: radial-gradient(
circle at center, circle at center,
rgba(72, 176, 255, 0.12) 0%, rgba(72, 176, 255, 0.12) 0%,
@ -734,7 +737,7 @@ export default {
transform: translateX(-20px); transform: translateX(-20px);
} }
.data-item { .data-item:not(.circle-item):not(.circle-center) {
animation: fadeInLeft 0.6s ease-out forwards; animation: fadeInLeft 0.6s ease-out forwards;
opacity: 0; opacity: 0;
transform: translateX(-10px); transform: translateX(-10px);

45
f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
View File

@ -28,7 +28,7 @@ import ScreenHeader from './screenHeader/index.vue';
import ScreenLeft from './ScreenLeft/index.vue'; import ScreenLeft from './ScreenLeft/index.vue';
import ScreenCenter from './ScreenCenter/index.vue'; import ScreenCenter from './ScreenCenter/index.vue';
import ScreenRight from './ScreenRight/index.vue'; import ScreenRight from './ScreenRight/index.vue';
import './media'
export default { export default {
components: { components: {
ScreenHeader, ScreenHeader,
@ -40,8 +40,22 @@ export default {
return { return {
} }
}, },
mounted() {
this.adapter();
window.addEventListener('resize', this.adapter);
},
beforeDestroy() {
window.removeEventListener('resize', this.adapter);
},
methods: { methods: {
adapter() {
// 获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
const dpWidth = document.documentElement.clientWidth;
// 计算根字体大小
const rootFontSize = (dpWidth * 100) / 1920;
// 设置根字体大小
document.documentElement.style.fontSize = rootFontSize + 'px';
}
} }
} }
</script> </script>
@ -59,7 +73,7 @@ export default {
width: 100vw; width: 100vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: url("../../../../assets/image/bg.jpg") no-repeat center ; background: url("../../../../assets/image/bg.jpg") no-repeat center;
background-size: cover; // 添加背景大小控制 background-size: cover; // 添加背景大小控制
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -67,36 +81,33 @@ export default {
.top { .top {
width: 100%; width: 100%;
min-height: 85px; min-height: .85rem;
height: 8vh; height: 8vh;
max-height: 120px; max-height: 1.2rem;
} }
img { img {
height: 300px; height: 3rem;
width: 300px; width: 3rem;
position: absolute; position: absolute;
right: 20px; right: .2rem;
} }
.center { .center {
display: flex; display: flex;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
.left{ .left {
width: 30%; width: 30%;
min-width: 300px;
max-width: 500px;
} }
.content{
.content {
width: 40%; width: 40%;
min-width: 400px;
max-width: 800px;
} }
.right{
.right {
width: 30%; width: 30%;
min-width: 300px;
max-width: 500px;
} }
} }

10
f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
View File

@ -1,10 +0,0 @@
function adapter(){
//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
const dpWidth = document.documentElement.clientWidth
//计算根字体大小
const rootFonstSize = (dpWidth * 100)/1920
//设置根字体大小
document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter