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

Compare commits

base: yumoqing:d5cd8fac00dc0464f6356d447c04d5b1a1ac7bc9
Branches Tags
yumoqing:main
yumoqing:prod
yumoqing:dev1
..
compare: yumoqing:4601e30cb233348a2d4a482987841fdf0bc60fe4
Branches Tags
yumoqing:prod
yumoqing:main
yumoqing:dev1

No commits in common. "d5cd8fac00dc0464f6356d447c04d5b1a1ac7bc9" and "4601e30cb233348a2d4a482987841fdf0bc60fe4" have entirely different histories.
d5cd8fac00 ... 4601e30cb2

6 changed files with 170 additions and 212 deletions
Show Stats Expand all files Collapse all files

150
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: '16.5%', left: '74%' } position: { top: '18%', left: '73%' }
}, },
{ {
name: '内蒙集群', name: '内蒙集群',
cityName: '内蒙古', cityName: '内蒙古',
direction: 'left', direction: 'left',
labelPosition: [105.73, 50.83], labelPosition: [105.73, 50.83],
position: { top: '17%', left: '36.2%' } position: { top: '19%', left: '34%' }
}, },
{ {
name: '新疆集群', name: '新疆集群',
cityName: '新疆', cityName: '新疆',
direction: 'left', direction: 'left',
labelPosition: [88.68, 52.77], labelPosition: [88.68, 52.77],
position: { top: '13.5%', left: '10.2%' } position: { top: '15.4%', left: '8%' }
}, },
{ {
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: '60%', left: '80.9%' } position: { top: '57.3%', left: '80.9%' }
}, },
{ {
name: '川渝集群', name: '川渝集群',
cityName: '四川', cityName: '四川',
direction: 'left', direction: 'left',
labelPosition: [99.06, 24], labelPosition: [99.06, 21.8],
position: { top: '68.4%', left: '26%' } position: { top: '69.2%', left: '24%' }
} }
], ],
// 集群名称到data-manager中key的映射 // 集群名称到data-manager中key的映射
@ -397,89 +397,58 @@ 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: contain; background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
pointer-events: none; /* 防止干扰点击事件 */
} }
/* 最底层背景 */
.bg1 { .bg1 {
height: 50vh; height: 518px;
min-height: 300px; width: 518px;
width: 50vh; background: url(~@/assets/image/map.png);
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: 60vh; height: 643px;
min-height: 360px; width: 643px;
width: 60vh; background: url(~@/assets/image/lbx.png);
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: 55vh; height: 566px;
min-height: 330px; width: 566px;
width: 55vh; background: url(~@/assets/image/jt.png);
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: 10; z-index: 5;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.wrapper { .wrapper {
padding: .15rem; padding: 15px;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -500,9 +469,9 @@ export default {
.item { .item {
display: flex; display: flex;
width: 2rem; width: 200px;
color: #fff; color: #fff;
font-size: .1rem; font-size: 10px;
} }
.item .left { .item .left {
@ -510,44 +479,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: .08rem; padding: 8px;
} }
.left .title { .left .title {
padding-bottom: .16rem; padding-bottom: 16px;
font-size: .12rem; font-size: 12px;
line-height: 1.3; line-height: 1.3;
} }
.item .btn { .item .btn {
color: #FDBD00; color: #FDBD00;
cursor: pointer; cursor: pointer;
padding: .02rem .08rem; padding: 2px 8px;
border: .01rem solid #FDBD00; border: 1px solid #FDBD00;
border-radius: .04rem; border-radius: 4px;
text-align: center; text-align: center;
transition: all 0.3s; transition: all 0.3s;
font-size: .12rem; font-size: 12px;
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 .1rem rgba(253, 189, 0, 0.5); box-shadow: 0 0 10px rgba(253, 189, 0, 0.5);
} }
.item .right { .item .right {
text-align: center; text-align: center;
width: .2rem; width: 20px;
font-size: .12rem; font-size: 12px;
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: .05rem 0; padding: 5px 0;
} }
.reset-container { .reset-container {
@ -559,44 +528,44 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: .1rem; gap: 10px;
} }
.current-cluster-text { .current-cluster-text {
color: white; color: white;
font-size: .18rem; font-size: 18px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-shadow: 0 0 .05rem rgba(255, 255, 255, 0.5); text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
padding: .08rem .16rem; padding: 8px 16px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: .08rem; border-radius: 8px;
min-width: 2rem; min-width: 200px;
} }
.reset-btn { .reset-btn {
background: #0A2463 ; background: #0A2463 ;
color: white; color: white;
padding: .1rem .2rem; padding: 10px 20px;
border-radius: .2rem; border-radius: 20px;
cursor: pointer; cursor: pointer;
font-size: .14rem; font-size: 14px;
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: .01rem solid rgba(255, 255, 255, 0.3); border: 1px 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 .15rem rgba(24, 144, 255, 0.7); box-shadow: 0 0 15px rgba(24, 144, 255, 0.7);
} }
.reset-btn span { .reset-btn span {
margin-right: .05rem; margin-right: 5px;
} }
.sortBox { .sortBox {
@ -607,39 +576,39 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: .2rem; padding: 20px;
} }
.sortBox ul { .sortBox ul {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: .15rem; gap: 15px;
margin-top: .2rem; margin-top: 20px;
padding: 0; padding: 0;
margin: .2rem 0 0 0; margin: 20px 0 0 0;
} }
.sortBox li { .sortBox li {
list-style: none; list-style: none;
border: .01rem solid #2086ee; border: 1px solid #2086ee;
border-radius: .05rem; border-radius: 5px;
width: 2.5rem; width: 250px;
height: .35rem; height: 35px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
color: #d3d5ea; color: #d3d5ea;
padding-left: .1rem; padding-left: 10px;
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: .01rem solid white; border: 1px solid white;
border-radius: .05rem; border-radius: 5px;
padding: .08rem .16rem; padding: 8px 16px;
margin-bottom: .3rem; margin-bottom: 30px;
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;
@ -659,11 +628,4 @@ 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: .1rem 0; padding: 10px 0;
padding-top: .4rem; padding-top: 40px;
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: .01rem .01rem .02rem rgba(0, 0, 0, 0.4); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing: .01rem; letter-spacing: 1px;
.top-text { .top-text {
font-size: .26rem; font-size: 26px;
} }
.btm-text { .btm-text {
font-size: .16rem; font-size: 16px;
} }
} }
} }
@ -271,7 +271,7 @@ export default {
width: 100%; width: 100%;
min-height: 0; min-height: 0;
/* 防止flex item溢出 */ /* 防止flex item溢出 */
margin-top: -0.5rem; margin-top: -50px;
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: 1.4rem; bottom: 140px;
left:0; left:0;
width: 100%; width: 100%;
height: .4rem !important; height: 40px !important;
.btm-tab { .btm-tab {
width: 100%; width: 100%;
display: flex; display: flex;
color: #fff; color: #fff;
font-size: .16rem; font-size: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.tab-item { .tab-item {
margin-right: .4rem; margin-right: 40px;
width: 1.4rem; width: 140px;
height: .4rem; height: 40px;
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: 1.5rem; width: 150px;
height: .5rem; height: 50px;
} }
.overview,.overview-two{ .overview,.overview-two{
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: .5rem; margin-top: 50px;
.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: .5rem; margin-left: 50px;
.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: .16rem; font-size: 16px;
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: .7rem; width: 70px;
height: .5rem; height: 50px;
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:2rem;height:2rem;color: #fff;font-size: .2rem; font-weight: 600;"> <dv-decoration-9 class="data-item" :style="{ animationDelay: '1s' }" style="width:200px;height:200px;color: #fff;font-size: 20px; 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: .15rem; gap: 15px;
padding: .1rem 0; padding: 10px 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: .24rem; left: 24px;
top: .24rem; top: 24px;
} }
.two{ .two{
position: absolute; position: absolute;
left: 1rem; left: 100px;
top: .24rem; top: 24px;
} }
.three{ .three{
position: absolute; position: absolute;
left: 1.7rem; left: 170px;
top: .24rem; top: 24px;
} }
.top-tit { .top-tit {
@ -565,17 +565,17 @@ export default {
} }
.conter-bottom { .conter-bottom {
margin-top: -0.16rem; margin-top: -16px;
display: flex; display: flex;
padding-left: .1rem; padding-left: 10px;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
.bottom-tit { .bottom-tit {
padding-right: .04rem; padding-right: 4px;
span { span {
font-size: .11rem; font-size: 11px;
} }
} }
} }
@ -603,7 +603,7 @@ export default {
.cluster, .cluster,
.heterogeneous { .heterogeneous {
.title { .title {
margin-bottom: .2rem; margin-bottom: 20px;
} }
} }
@ -614,7 +614,7 @@ export default {
.title { .title {
padding-left: 12%; padding-left: 12%;
height: .36rem; height: 36px;
} }
} }
@ -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: .36rem; height: 36px;
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: .14rem; font-size: 14px;
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: .1rem; margin-bottom: 10px;
} }
/* 图表容器 */ /* 图表容器 */
@ -647,11 +647,11 @@ export default {
// 模型调用 // 模型调用
.model-chart { .model-chart {
height: calc(100% - 46px); height: calc(100% - 46px);
width: 2.4rem; width: 240px;
} }
.token-chart { .token-chart {
width: 4.2rem; width: 420px;
} }
.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: .28rem; width: 28px;
height: .28rem; height: 28px;
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: .15rem; gap: 15px;
padding: .1rem 0; padding: 10px 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: .05rem; /* 添加内边距 */ padding: 5px; /* 添加内边距 */
margin-top: -0.4rem; margin-top: -40px;
} }
.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: .4rem; height: 40px;
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: .16rem; font-size: 16px;
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: .1rem; margin-bottom: 10px;
} }
.user-class .content { .user-class .content {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
font-size: .14rem; font-size: 14px;
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: .12rem; padding-top: 12px;
} }
} }
@ -484,7 +484,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 .05rem; padding: 0 5px;
} }
.power-use-chart { .power-use-chart {
@ -508,40 +508,39 @@ export default {
/* 中心TOP1样式 */ /* 中心TOP1样式 */
.circle-center { .circle-center {
width: 1.2rem; width: 120px;
height: 1.2rem; height: 120px;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 92, 207, 0.3); background: rgba(0, 92, 207, 0.3);
border: .02rem solid rgba(72, 176, 255, 0.8); border: 2px solid rgba(72, 176, 255, 0.8);
box-shadow: 0 0 .15rem rgba(72, 176, 255, 0.6); box-shadow: 0 0 15px 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: .14rem; font-size: 14px;
position: relative; position: relative;
z-index: 2; z-index: 2;
opacity: 0;
.rank { .rank {
font-weight: bold; font-weight: bold;
margin-bottom: .05rem; margin-bottom: 5px;
} }
.name { .name {
font-size: .16rem; font-size: 16px;
} }
} }
/* 周围TOP项基础样式 */ /* 周围TOP项基础样式 */
.circle-item { .circle-item {
width: .82rem; width: 74px;
height: .82rem; height: 74px;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 92, 207, 0.2); background: rgba(0, 92, 207, 0.2);
border: .01rem solid rgba(72, 176, 255, 0.6); border: 1px solid rgba(72, 176, 255, 0.6);
box-shadow: 0 0 .1rem rgba(72, 176, 255, 0.4); box-shadow: 0 0 10px rgba(72, 176, 255, 0.4);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -551,36 +550,35 @@ 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: .03rem; margin-bottom: 3px;
} }
.name { .name {
font-size: .13rem; font-size: 13px;
} }
} }
/* 各TOP项定位 */ /* 各TOP项定位 */
.item-top2 { .item-top2 {
width: .7rem; width: 70px;
height: .7rem; height: 70px;
top: .02rem; top: 2px;
right: .02rem; right: 2px;
} }
.item-top3 { .item-top3 {
bottom: .02rem; bottom: 2px;
left: .02rem; left: 2px;
} }
.item-top4 { .item-top4 {
top: .04rem; top: 4px;
left: -0.04rem; left: -4px;
} }
.item-top5 { .item-top5 {
bottom: .02rem; bottom: 2px;
right: -0.02rem; right: -2px;
} }
/* 增强动画效果 - 增加旋转速度 */ /* 增强动画效果 - 增加旋转速度 */
@ -646,25 +644,25 @@ export default {
/* 为每个小圆添加明显的轨道运动 */ /* 为每个小圆添加明显的轨道运动 */
.item-top2 { .item-top2 {
animation: fadeInLeft 0.6s ease-out forwards, rotate2 4s ease-in-out infinite; animation: 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: fadeInLeft 0.6s ease-out forwards, rotate3 5s ease-in-out infinite; animation: rotate3 5s ease-in-out infinite;
animation-delay: 0.5s, 0.5s; animation-delay: 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: fadeInLeft 0.6s ease-out forwards, rotate4 6s ease-in-out infinite; animation: rotate4 6s ease-in-out infinite;
animation-delay: 1s, 1s; animation-delay: 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: fadeInLeft 0.6s ease-out forwards, rotate5 7s ease-in-out infinite; animation: rotate5 7s ease-in-out infinite;
animation-delay: 1.5s, 1.5s; animation-delay: 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);
} }
@ -686,8 +684,7 @@ export default {
} }
.circle-center { .circle-center {
animation: fadeInLeft 0.6s ease-out forwards, centerGlow 3s ease-in-out infinite; animation: centerGlow 3s ease-in-out infinite;
animation-delay: 0.3s, 0s;
} }
/* 增强小圆的发光效果 */ /* 增强小圆的发光效果 */
@ -706,7 +703,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 .2rem rgba(72, 176, 255, 1); box-shadow: 0 0 20px 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;
} }
@ -717,8 +714,8 @@ export default {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 2.8rem; width: 280px;
height: 2.8rem; height: 280px;
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%,
@ -737,7 +734,7 @@ export default {
transform: translateX(-20px); transform: translateX(-20px);
} }
.data-item:not(.circle-item):not(.circle-center) { .data-item {
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,22 +40,8 @@ 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>
@ -73,7 +59,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;
@ -81,33 +67,36 @@ export default {
.top { .top {
width: 100%; width: 100%;
min-height: .85rem; min-height: 85px;
height: 8vh; height: 8vh;
max-height: 1.2rem; max-height: 120px;
} }
img { img {
height: 3rem; height: 300px;
width: 3rem; width: 300px;
position: absolute; position: absolute;
right: .2rem; right: 20px;
} }
.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

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