集群规模
-
+
{{ chipData.total }}P
@@ -514,8 +514,8 @@ export default {
height: calc(100vh - 160px);
display: flex;
flex-direction: column;
- gap: 15px;
- padding: 10px 0;
+ gap: .15rem;
+ padding: .1rem 0;
box-sizing: border-box;
}
@@ -531,19 +531,19 @@ export default {
display: flex;
.one{
position: absolute;
- left: 24px;
- top: 24px;
+ left: .24rem;
+ top: .24rem;
}
.two{
position: absolute;
- left: 100px;
- top: 24px;
+ left: 1rem;
+ top: .24rem;
}
.three{
position: absolute;
- left: 170px;
- top: 24px;
+ left: 1.7rem;
+ top: .24rem;
}
.top-tit {
@@ -565,17 +565,17 @@ export default {
}
.conter-bottom {
- margin-top: -16px;
+ margin-top: -0.16rem;
display: flex;
- padding-left: 10px;
+ padding-left: .1rem;
align-items: center;
justify-content: space-around;
.bottom-tit {
- padding-right: 4px;
+ padding-right: .04rem;
span {
- font-size: 11px;
+ font-size: .11rem;
}
}
}
@@ -603,7 +603,7 @@ export default {
.cluster,
.heterogeneous {
.title {
- margin-bottom: 20px;
+ margin-bottom: .2rem;
}
}
@@ -614,7 +614,7 @@ export default {
.title {
padding-left: 12%;
- height: 36px;
+ height: .36rem;
}
}
@@ -622,18 +622,18 @@ export default {
.title {
background: url(../images/titleBg.png) no-repeat;
background-size: cover;
- height: 36px;
+ height: .36rem;
color: #fff;
display: flex;
align-items: center;
padding-left: 20%;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
- font-size: 14px;
+ font-size: .14rem;
font-weight: 600;
transform: skew(-12deg);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing: 1px;
- margin-bottom: 10px;
+ margin-bottom: .1rem;
}
/* 图表容器 */
@@ -647,11 +647,11 @@ export default {
// 模型调用
.model-chart {
height: calc(100% - 46px);
- width: 240px;
+ width: 2.4rem;
}
.token-chart {
- width: 420px;
+ width: 4.2rem;
}
.content {
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue
index ef6b586..8cc0eef 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue
@@ -373,8 +373,8 @@ export default {
height: 100%;
img {
- width: 28px;
- height: 28px;
+ width: .28rem;
+ height: .28rem;
object-fit: contain;
}
}
@@ -386,8 +386,8 @@ export default {
height: calc(100vh - 160px);
display: flex;
flex-direction: column;
- gap: 15px;
- padding: 10px 0;
+ gap: .15rem;
+ padding: .1rem 0;
box-sizing: border-box;
}
@@ -419,8 +419,8 @@ export default {
justify-content: center;
align-items: center; /* 垂直居中 */
overflow: hidden;
- padding: 5px; /* 添加内边距 */
- margin-top: -40px;
+ padding: .05rem; /* 添加内边距 */
+ margin-top: -0.4rem;
}
.user-num .content img {
@@ -439,24 +439,24 @@ export default {
.title {
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
- height: 40px;
+ height: .4rem;
color: #fff;
display: flex;
align-items: center;
padding-left: 12%;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
- font-size: 16px;
+ font-size: .16rem;
font-weight: 600;
color: #ffffff;
transform: skew(-12deg);
-webkit-transform: skew(-12deg);
- margin-bottom: 10px;
+ margin-bottom: .1rem;
}
.user-class .content {
width: 100%;
height: calc(100% - 50px);
- font-size: 14px;
+ font-size: .14rem;
font-weight: bold;
color: #fff;
position: relative;
@@ -474,7 +474,7 @@ export default {
}
.finance, .medical, .creative, .education, .intelligence {
- padding-top: 12px;
+ padding-top: .12rem;
}
}
@@ -484,7 +484,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
- padding: 0 5px;
+ padding: 0 .05rem;
}
.power-use-chart {
@@ -508,39 +508,40 @@ export default {
/* 中心TOP1样式 */
.circle-center {
- width: 120px;
- height: 120px;
+ width: 1.2rem;
+ height: 1.2rem;
border-radius: 50%;
background: rgba(0, 92, 207, 0.3);
- border: 2px solid rgba(72, 176, 255, 0.8);
- box-shadow: 0 0 15px rgba(72, 176, 255, 0.6);
+ border: .02rem solid rgba(72, 176, 255, 0.8);
+ box-shadow: 0 0 .15rem rgba(72, 176, 255, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
- font-size: 14px;
+ font-size: .14rem;
position: relative;
z-index: 2;
+ opacity: 0;
.rank {
font-weight: bold;
- margin-bottom: 5px;
+ margin-bottom: .05rem;
}
.name {
- font-size: 16px;
+ font-size: .16rem;
}
}
/* 周围TOP项基础样式 */
.circle-item {
- width: 74px;
- height: 74px;
+ width: .82rem;
+ height: .82rem;
border-radius: 50%;
background: rgba(0, 92, 207, 0.2);
- border: 1px solid rgba(72, 176, 255, 0.6);
- box-shadow: 0 0 10px rgba(72, 176, 255, 0.4);
+ border: .01rem solid rgba(72, 176, 255, 0.6);
+ box-shadow: 0 0 .1rem rgba(72, 176, 255, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
@@ -550,35 +551,36 @@ export default {
position: absolute;
z-index: 1;
transform-origin: center center;
+ opacity: 0;
.rank {
font-weight: bold;
- margin-bottom: 3px;
+ margin-bottom: .03rem;
}
.name {
- font-size: 13px;
+ font-size: .13rem;
}
}
/* 各TOP项定位 */
.item-top2 {
- width: 70px;
- height: 70px;
- top: 2px;
- right: 2px;
+ width: .7rem;
+ height: .7rem;
+ top: .02rem;
+ right: .02rem;
}
.item-top3 {
- bottom: 2px;
- left: 2px;
+ bottom: .02rem;
+ left: .02rem;
}
.item-top4 {
- top: 4px;
- left: -4px;
+ top: .04rem;
+ left: -0.04rem;
}
.item-top5 {
- bottom: 2px;
- right: -2px;
+ bottom: .02rem;
+ right: -0.02rem;
}
/* 增强动画效果 - 增加旋转速度 */
@@ -644,25 +646,25 @@ export default {
/* 为每个小圆添加明显的轨道运动 */
.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);
border: 2px solid rgba(72, 176, 255, 0.8);
}
.item-top3 {
- animation: rotate3 5s ease-in-out infinite;
- animation-delay: 0.5s;
+ animation: fadeInLeft 0.6s ease-out forwards, rotate3 5s ease-in-out infinite;
+ animation-delay: 0.5s, 0.5s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8);
}
.item-top4 {
- animation: rotate4 6s ease-in-out infinite;
- animation-delay: 1s;
+ animation: fadeInLeft 0.6s ease-out forwards, rotate4 6s ease-in-out infinite;
+ animation-delay: 1s, 1s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8);
}
.item-top5 {
- animation: rotate5 7s ease-in-out infinite;
- animation-delay: 1.5s;
+ animation: fadeInLeft 0.6s ease-out forwards, rotate5 7s ease-in-out infinite;
+ animation-delay: 1.5s, 1.5s;
box-shadow: 0 0 12px rgba(72, 176, 255, 0.6);
border: 2px solid rgba(72, 176, 255, 0.8);
}
@@ -684,7 +686,8 @@ export default {
}
.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;
transform: scale(1.15) !important;
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);
transition: all 0.3s ease;
}
@@ -714,8 +717,8 @@ export default {
position: absolute;
top: 50%;
left: 50%;
- width: 280px;
- height: 280px;
+ width: 2.8rem;
+ height: 2.8rem;
background: radial-gradient(
circle at center,
rgba(72, 176, 255, 0.12) 0%,
@@ -734,7 +737,7 @@ export default {
transform: translateX(-20px);
}
-.data-item {
+.data-item:not(.circle-item):not(.circle-center) {
animation: fadeInLeft 0.6s ease-out forwards;
opacity: 0;
transform: translateX(-10px);
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
index 6cbecee..f325805 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
@@ -28,7 +28,7 @@ import ScreenHeader from './screenHeader/index.vue';
import ScreenLeft from './ScreenLeft/index.vue';
import ScreenCenter from './ScreenCenter/index.vue';
import ScreenRight from './ScreenRight/index.vue';
-import './media'
+
export default {
components: {
ScreenHeader,
@@ -40,8 +40,22 @@ export default {
return {
}
},
+ mounted() {
+ this.adapter();
+ window.addEventListener('resize', this.adapter);
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.adapter);
+ },
methods: {
-
+ adapter() {
+ // 获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
+ const dpWidth = document.documentElement.clientWidth;
+ // 计算根字体大小
+ const rootFontSize = (dpWidth * 100) / 1920;
+ // 设置根字体大小
+ document.documentElement.style.fontSize = rootFontSize + 'px';
+ }
}
}
@@ -59,7 +73,7 @@ export default {
width: 100vw;
display: flex;
flex-direction: column;
- background: url("../../../../assets/image/bg.jpg") no-repeat center ;
+ background: url("../../../../assets/image/bg.jpg") no-repeat center;
background-size: cover; // 添加背景大小控制
overflow: hidden;
position: relative;
@@ -67,36 +81,33 @@ export default {
.top {
width: 100%;
- min-height: 85px;
+ min-height: .85rem;
height: 8vh;
- max-height: 120px;
+ max-height: 1.2rem;
}
img {
- height: 300px;
- width: 300px;
+ height: 3rem;
+ width: 3rem;
position: absolute;
- right: 20px;
+ right: .2rem;
}
+
.center {
display: flex;
flex: 1;
min-height: 0;
- .left{
+ .left {
width: 30%;
- min-width: 300px;
- max-width: 500px;
}
- .content{
+
+ .content {
width: 40%;
- min-width: 400px;
- max-width: 800px;
}
- .right{
+
+ .right {
width: 30%;
- min-width: 300px;
- max-width: 500px;
}
}
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js b/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
index ea594ca..e69de29 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
@@ -1,10 +0,0 @@
- function adapter(){
- //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
- const dpWidth = document.documentElement.clientWidth
- //计算根字体大小
- const rootFonstSize = (dpWidth * 100)/1960
- //设置根字体大小
- document.documentElement.style.fontSize = rootFonstSize + 'px'
- }
- adapter()
- window.onresize = adapter