Bläddra i källkod

修改适应屏幕

fengxu 2 år sedan
förälder
incheckning
26fa7dfc8d
3 ändrade filer med 65 tillägg och 61 borttagningar
  1. 15 15
      cokingCoal/index.html
  2. 30 27
      cokingCoal/js/newIndex.js
  3. 20 19
      cokingCoal/styles/newIndex.css

+ 15 - 15
cokingCoal/index.html

@@ -466,7 +466,7 @@
                 </div>
             </div>
             <div class="box_right">
-                <div class="left_item" style="height: calc(50% - 20px);padding: 10px 40px 40px;">
+                <div class="left_item" style="height: calc(45% - 20px);padding: 10px 40px 40px;">
                     <div class="title_else flex_sb">
                         <span>薪酬分配</span>
                         <span class="icon_tit">
@@ -541,50 +541,50 @@
                         </div>
                     </div>
                 </div>
-                <div class="right_item flex_column">
+                <div class="right_item flex_column" style="height: calc(30% - 20px);">
                     <div class="title_else">员工效率</div>
                     <div class="w_100_right ">
                         <div class="right_item_item flex_column">
-                            <div class="left_user_title">
+                            <div class="left_user_title" style="height: 60px;">
                                 <div class="icon_title">
                                     <div class="icon">
                                         <img src="./images/icon_title.png" alt="">
                                     </div>
-                                    <div class="title">全员劳动生产率</div>
+                                    <div class="title" style="line-height: 80px;">全员劳动生产率</div>
                                 </div>
                                 <div class="line">
                                     <img src="./images/line.png" alt="">
                                 </div>
                             </div>
-                            <div class="right_item_main" ref="works"></div>
+                            <div class="right_item_main" ref="works"  style="height: calc(100% - 100px);"></div>
                         </div>
                         <div class="right_item_item flex_column">
-                            <div class="left_user_title">
+                            <div class="left_user_title" style="height: 60px;">
                                 <div class="icon_title">
                                     <div class="icon">
                                         <img src="./images/icon_title.png" alt="">
                                     </div>
-                                    <div class="title">原煤工效</div>
+                                    <div class="title" style="line-height: 80px;">原煤工效</div>
                                 </div>
                                 <div class="line">
                                     <img src="./images/line.png" alt="">
                                 </div>
                             </div>
-                            <div class="right_item_main" ref="efficiency"></div>
+                            <div class="right_item_main" ref="efficiency" style="height: calc(100% - 100px);"></div>
                         </div>
                         <div class="right_item_item flex_column">
-                            <div class="left_user_title">
+                            <div class="left_user_title" style="height: 60px;">
                                 <div class="icon_title">
                                     <div class="icon">
                                         <img src="./images/icon_title.png" alt="">
                                     </div>
-                                    <div class="title">全员效率</div>
+                                    <div class="title" style="line-height: 80px;">全员效率</div>
                                 </div>
                                 <div class="line">
                                     <img src="./images/line.png" alt="">
                                 </div>
                             </div>
-                            <div class="right_item_main" ref="whole"></div>
+                            <div class="right_item_main" ref="whole" style="height: calc(100% - 100px);"></div>
                         </div>
                     </div>
                 </div>
@@ -597,14 +597,14 @@
                                     <div class="left_user_number" style="width: 50%;">
                                         <div class="text_box" style="padding-left: 280px;">
                                             <img style="width: 20%;" src="./images/newImage/school.png" alt="">
-                                            <span class="text_num" style="color: #65FAFF;">9 <span>所</span></span>
+                                            <span class="text_num" style="color: #65FAFF;">35 <span>所</span></span>
                                             <span class="text_title">实习实训高校</span>
                                         </div>
                                     </div>
                                     <div class="left_user_number" style="width: 50%;">
                                         <div class="text_box" style="padding-left: 280px;">
                                             <img style="width: 20%;" src="./images/newImage/pink.png" alt="">
-                                            <span class="text_num" style="color: #EC8AED;">213<span>人</span></span>
+                                            <span class="text_num" style="color: #EC8AED;">1714<span>人</span></span>
                                             <span class="text_title">实习实训</span>
                                         </div>
                                     </div>
@@ -632,14 +632,14 @@
                                     <div class="left_user_number" style="width: 50%;">
                                         <div class="text_box" style="padding-left: 280px;">
                                             <img style="width: 20%;" src="./images/newImage/yellow.png" alt="">
-                                            <span class="text_num" style="color: #FF9915;">12<span>所</span></span>
+                                            <span class="text_num" style="color: #FF9915;">7<span>所</span></span>
                                             <span class="text_title">产学研合作高校</span>
                                         </div>
                                     </div>
                                     <div class="left_user_number" style="width: 50%;">
                                         <div class="text_box" style="padding-left: 280px;">
                                             <img style="width: 20%;" src="./images/newImage/green.png" alt="">
-                                            <span class="text_num" style="color: #39F656;">20 <span>个</span></span>
+                                            <span class="text_num" style="color: #39F656;">120 <span>个</span></span>
                                             <span class="text_title">产学研成果</span>
                                         </div>
                                     </div>

+ 30 - 27
cokingCoal/js/newIndex.js

@@ -115,7 +115,7 @@ let app = new Vue({
         waitTime: 2000,
         rowNum: 2,
         data: [
-          ["金融资本公司", '山焦担保', '组织划转', '2023-06-01'],
+          ["金融资本公司", '山焦担保', '组织合并', '2023-06-01'],
           ["山焦统配", '山焦统配', '组织新设', '2023-05-01'],
           ["汾西矿业集团", '灵石县富威橡胶', '组织更名', '2023-05-01'],
           ["焦煤置业", '海南科思实业有限公司', '组织停用', '2023-04-04'],
@@ -457,8 +457,9 @@ let app = new Vue({
             interval: 0,
             // rotate: 40,
             textStyle: {
-              color: "white",
-              fontSize: 26,
+              fontSize: 30,
+              color: '#A3E2F4',
+              fontWeight: 0,
             },
           },
           //y轴线的颜色以及宽度
@@ -606,8 +607,9 @@ let app = new Vue({
             interval: 0,
             // rotate: 40,
             textStyle: {
-              color: "white",
-              fontSize: 26,
+              fontSize: 30,
+            color: '#fff',
+            fontWeight: 0,
             },
           },
           //y轴线的颜色以及宽度
@@ -755,14 +757,16 @@ let app = new Vue({
           },
           axisLine: {
             lineStyle: {
-              color: "#7ECEF4",
+              fontSize: 30,
+            color: '#fff',
+            fontWeight: 0,
             },
           },
           axisLabel: {
             interval: 0,
             rotate: 25,
             textStyle: {
-              fontSize: 26,
+              fontSize: 32,
               color: "#fff",
             },
           },
@@ -933,7 +937,7 @@ let app = new Vue({
             rotate: 40,
             margin: 10,
             textStyle: {
-              fontSize: 26,
+              fontSize: 30,
               color: "#fff",
             },
           },
@@ -1092,9 +1096,9 @@ let app = new Vue({
             },
           },
           axisLabel: {
-            interval: 0,
+            interval: 1,
             textStyle: {
-              fontSize: 26,
+              fontSize: 30,
               color: "#fff",
             },
           },
@@ -1228,12 +1232,12 @@ let app = new Vue({
           textStyle: {
             rich: {
               title: {
-                fontSize: 26,
+                fontSize: 30,
                 lineHeight: 50,
                 color: "#fff",
               },
               value: {
-                fontSize: 26,
+                fontSize: 30,
                 fontWeight: "bolder",
                 lineHeight: 50,
                 color: "#FFAD05",
@@ -1596,13 +1600,12 @@ let app = new Vue({
             boundaryGap: true,//坐标轴两边留白
             data: data.x,
             axisLabel: { //坐标轴刻度标签的相关设置。
-              interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
-              margin: 15,
+              interval: 1,//设置为 1,表示『隔一个标签显示一个标签』
               textStyle: {
                 color: '#fff',
                 fontStyle: 'normal',
                 fontFamily: '微软雅黑',
-                fontSize: 26,
+                fontSize: 30,
               }
             },
             axisTick: {//坐标轴刻度相关设置。
@@ -1830,13 +1833,13 @@ let app = new Vue({
             boundaryGap: true,//坐标轴两边留白
             data: data.x,
             axisLabel: { //坐标轴刻度标签的相关设置。
-              interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
+              interval: 1,//设置为 1,表示『隔一个标签显示一个标签』
               margin: 15,
               textStyle: {
                 color: '#fff',
                 fontStyle: 'normal',
                 fontFamily: '微软雅黑',
-                fontSize: 26,
+                fontSize: 30,
               }
             },
             axisTick: {//坐标轴刻度相关设置。
@@ -2029,7 +2032,7 @@ let app = new Vue({
             padding: [15, 0, 0, 0],
             textStyle: {
               color: "#fff",
-              fontSize: 26,
+              fontSize: 30,
             }
           },
           axisTick: {
@@ -2168,7 +2171,7 @@ let app = new Vue({
             padding: [15, 0, 0, 0],
             textStyle: {
               color: "#fff",
-              fontSize: 26,
+              fontSize: 30,
             }
           },
           axisTick: {
@@ -2296,7 +2299,7 @@ let app = new Vue({
         },
         grid: {
           top: 30,
-          bottom: 30,
+          bottom: 50,
           left: 90,
           right: 90,
           textStyle: {
@@ -2309,7 +2312,7 @@ let app = new Vue({
           top: '4%',
           textStyle: {
             color: '#fff',
-            fontSize: 26
+            fontSize: 30
           },
           data: ['缓冲池', '待岗池', '共享池']
         },
@@ -2334,7 +2337,7 @@ let app = new Vue({
             // inside: true,
             textStyle: {
               color: "#fff",
-              fontSize: 26,
+              fontSize: 30,
             }
           },
           data: data.x,
@@ -2985,8 +2988,8 @@ let app = new Vue({
           map: 'shanxi',
           layoutCenter: ['50.5%', '52%'], //地图位置
           layoutSize: '100%',
-
-          zoom: 1.1, //当前视角的缩放比例
+          aspectScale: 0.75,
+          zoom: 1.25, //当前视角的缩放比例
           // roam: true, //是否开启平游或缩放
           scaleLimit: { //滚轮缩放的极限控制
             min: 1,
@@ -3090,7 +3093,7 @@ let app = new Vue({
             aspectScale: 0.75,
             layoutCenter: ["50%", "50%"], //地图位置
             layoutSize: '100%',
-            zoom: 1.1, //当前视角的缩放比例
+            zoom: 1.25, //当前视角的缩放比例
             // roam: true, //是否开启平游或缩放
             scaleLimit: { //滚轮缩放的极限控制
               min: 1,
@@ -3196,7 +3199,7 @@ let app = new Vue({
           axisLabel: {
             color: '#e2e9ff',
             textStyle: {
-              fontSize: 26
+              fontSize: 30
             },
           },
         }],
@@ -3206,7 +3209,7 @@ let app = new Vue({
             formatter: '{value}',
             color: '#e2e9ff',
             textStyle: {
-              fontSize: 20,
+              fontSize: 24,
             },
           },
           axisLine: {

+ 20 - 19
cokingCoal/styles/newIndex.css

@@ -1,14 +1,15 @@
 html,
 body {
-    width: 7168px !important;
-    min-height: 2576px;
+    width: 100% !important;
+    /* width: 6145px !important; */
+    min-height: 2592px;
     height: 100%;
     font-size: 20px;
     color: #fff;
     font-family: 'Microsoft YaHei';
-    /* background-image: url("../images/indexBg.png"); */
+    background-image: url("../images/indexBg.png");
     /* background-image: url("../images/newImage/4ca24a27-c946-4f59-90a5-af00530ddb59.png"); */
-    background-image: url("../images/newImage/62dbe366-d64f-434e-ad1c-c57312a3d11d.png");
+    /* background-image: url("../images/newImage/62dbe366-d64f-434e-ad1c-c57312a3d11d.png"); */
     background-repeat: no-repeat;
     background-size: 100% 100%;
     /* overflow-y: hidden; */
@@ -141,11 +142,11 @@ a {
     width: 700px;
     height: 700px;
     transform-origin: center top;
-    transform: rotateX(70deg) scale(1.95);
+    transform: rotateX(70deg) scale(1.75);
     text-align: center;
     position: absolute;
-    bottom: -337px;
-    left: 360px;
+    bottom: -379px;
+    left: 255px;
 
 }
 
@@ -240,7 +241,7 @@ a {
 
 .left_user_top {
     width: 100%;
-    height: calc(14% - 10px);
+    height: calc(10% - 10px);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -265,11 +266,11 @@ a {
 }
 
 .text_box img {
-    width: 30%;
-    height: 100%;
+    width: 25%;
+    height: 65%;
     position: absolute;
     top: 50%;
-    left: 30%;
+    left: 40%;
     transform: translate(-50%, -50%);
 }
 
@@ -687,7 +688,7 @@ a {
 }
 
 .echarts_else_top_item {
-    width: calc(50% - 150px);
+    width: calc(50% - 120px);
     height: 100%;
     background: rgba(0, 179, 254, 0.25);
     border: 1px solid #69C0FF;
@@ -698,7 +699,7 @@ a {
 }
 
 .echarts_else_top_item_on {
-    width: calc(50% - 150px);
+    width: calc(50% - 120px);
     height: 100%;
     background: rgba(0, 254, 199, 0.25);
     border: 1px solid #00ffff;
@@ -714,7 +715,7 @@ a {
 }
 
 .item_right_t {
-    padding-left: 30px;
+    padding-left: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -722,21 +723,21 @@ a {
 }
 
 .item_right_t div:nth-child(1) {
-    font-size: 26px;
+    font-size: 20px;
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #FFFFFF;
 }
 
 .item_right_t div:nth-child(2) {
-    font-size: 30px;
+    font-size: 26px;
     font-family: HelveticaNeueLT;
     font-weight: bolder;
     color: #69C0FF;
 }
 
 .item_right_t div:nth-child(2) span {
-    font-size: 24px;
+    font-size: 20px;
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #69C0FF;
@@ -955,7 +956,7 @@ img {
 }
 
 .mark_box {
-    width: 7168px !important;
+    width: 100% !important;
     min-height: 2576px;
     height: 100%;
     background-color: #1b1b1b6b;
@@ -1156,7 +1157,7 @@ img {
     height: 370px;
     z-index: 99999;
     position: absolute;
-    left: 130px;
+    left: 80px;
     top: calc(50% - 183px);
     animation: fadenum 8s infinite linear;
 }