Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
cf92e7ca by 杨炀
Options

no message

1 parent c2424795
Expand all
Inline Side-by-side
Showing 7 changed files with 85 additions and 94 deletions
src/assets/styles/ruoyi.scss
...@@ -58,18 +58,18 @@ ...@@ -58,18 +58,18 @@
58 margin-left: 10px; 58 margin-left: 10px;
59 } 59 }
60 .mt20 { 60 .mt20 {
61 margin-top: 20px; 61 margin-top: calc(20*100vw/1920);
62 } 62 }
63 .mr20 { 63 .mr20 {
64 margin-right: 20px; 64 margin-right: calc(20*100vw/1920);
65 } 65 }
66 .mb20 { 66 .mb20 {
67 margin-bottom: 20px; 67 margin-bottom:calc(20*100vw/1920);
68 } 68 }
69 .ml20 { 69 .ml20 {
70 margin-left: 20px; 70 margin-left: calc(20*100vw/1920);
71 } 71 }
72 .pd20{padding: 20px} 72 .pd20{padding:calc(20*100vw/1920)}
73 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 73 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
74 font-family: inherit; 74 font-family: inherit;
75 font-weight: 500; 75 font-weight: 500;
...@@ -915,8 +915,8 @@ img{display: block;} ...@@ -915,8 +915,8 @@ img{display: block;}
915 .fm{width: 100%;height: 100%;} 915 .fm{width: 100%;height: 100%;}
916 } 916 }
917 } 917 }
918 .mt30{margin-top: 30px} 918 .mt30{margin-top: calc(30*100vw/1920)}
919 .mb60{margin-bottom: 60px;} 919 .mb60{margin-bottom:calc(60*100vw/1920)}
920 920
921 .highlight{background: yellow;} 921 .highlight{background: yellow;}
922 .bannerImg{width: 100%;height: 100%;object-position: center;object-fit: cover;} 922 .bannerImg{width: 100%;height: 100%;object-position: center;object-fit: cover;}
......
src/layoutPc/components/AppBottom.vue
...@@ -19,34 +19,5 @@ const language = useStorage('language', 0) ...@@ -19,34 +19,5 @@ const language = useStorage('language', 0)
19 </script> 19 </script>
20 20
21 <style lang="scss" scoped> 21 <style lang="scss" scoped>
22 .footAll{background: #E0E3E5;;padding: 36px 0; 22
23 p{ font-size: 14px;
24 opacity: 0.88;
25 color: #4C5359;}
26 img{height: 80px;}
27 }
28 .gradient-text {font-family: FZJunHeiS-B-GB;
29 font-weight: 600;
30 font-size: 17px;
31 background: linear-gradient(0deg, #8226FC 0%, #483BEB 100%);
32 -webkit-background-clip: text;
33 -webkit-text-fill-color: transparent;
34 }
35 @media (max-width: 500px) {
36 .forWei{display: none;}
37 .footAll{padding:10px 0;
38 //display: none;
39 ul {
40 li {
41 font-size: 10px;line-height: 1.4;
42 }
43 }
44 img{height: 60px;}
45 p{font-size: 10px;line-height: 1.4;}
46 .copyright{font-size: 10px;line-height: 1.4;}
47 }
48 }
49 .ffoot{display: inline-flex;
50 img{width: 20px;height: 20px;display: inline-block;position: relative;top: 4px;margin-right: 4px;}
51 }
52 </style> 23 </style>
......
src/layoutPc/components/AppHeader.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 <h1 class="text-center m0">新吴区档案馆服务大厅</h1> 8 <h1 class="text-center m0">新吴区档案馆服务大厅</h1>
9 <div class="date"> 9 <div class="date">
10 <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg"> 10 <svg :width="`calc(300*100vw/1920)`" :height="`calc(100*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
11 <!-- 定义渐变色 --> 11 <!-- 定义渐变色 -->
12 <defs> 12 <defs>
13 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 13 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
...@@ -87,11 +87,11 @@ watch(() => useUserStore().visitor, (val) => { ...@@ -87,11 +87,11 @@ watch(() => useUserStore().visitor, (val) => {
87 </script> 87 </script>
88 88
89 <style scoped lang="scss"> 89 <style scoped lang="scss">
90 h1{font-family: 'YouSheBiaoTiHei';position: relative;top: 15px; 90 h1{font-family: 'YouSheBiaoTiHei';position: relative;top: calc(15*100vw/1920);
91 background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%); 91 background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);font-size: calc(32*100vw/1920);
92 -webkit-background-clip: text; 92 -webkit-background-clip: text;
93 -webkit-text-fill-color: transparent;} 93 -webkit-text-fill-color: transparent;}
94 .text-center{color: #fff;} 94 .text-center{color: #fff;}
95 .date{color: #fff;position: absolute;right: 30px;} 95 .date{color: #fff;position: absolute;right:calc(30*100vw/1920);}
96 </style> 96 </style>
97 97
......
src/viewsPc/vip/centerPage.vue
...@@ -14,50 +14,50 @@ ...@@ -14,50 +14,50 @@
14 <div class="partB"> 14 <div class="partB">
15 <div class="q1box qqbox"> 15 <div class="q1box qqbox">
16 <!-- 液体球--> 16 <!-- 液体球-->
17 <div ref="q1" style="width: 100%;height: 90px;"></div> 17 <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
18 <svg width="100%" height="80"> 18 <svg width="100%" :height="`calc(100*100vw/1920)`">
19 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 19 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
20 <stop offset="0%" stop-color="#03AEFD" /> 20 <stop offset="0%" stop-color="#03AEFD" />
21 <stop offset="10%" stop-color="#AEFFF3" /> 21 <stop offset="10%" stop-color="#AEFFF3" />
22 </linearGradient> 22 </linearGradient>
23 <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常满意</text> 23 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">非常满意</text>
24 <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常满意']}}</text> 24 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['非常满意']}}</text>
25 </svg> 25 </svg>
26 </div> 26 </div>
27 <div class="q2box qqbox"> 27 <div class="q2box qqbox">
28 <!-- 液体球--> 28 <!-- 液体球-->
29 <div ref="q2" style="width: 100%;height: 90px;"></div> 29 <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
30 <svg width="100%" height="100"> 30 <svg width="100%" :height="`calc(100*100vw/1920)`">
31 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 31 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
32 <stop offset="0%" stop-color="#03AEFD" /> 32 <stop offset="0%" stop-color="#03AEFD" />
33 <stop offset="10%" stop-color="#AEFFF3" /> 33 <stop offset="10%" stop-color="#AEFFF3" />
34 </linearGradient> 34 </linearGradient>
35 <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">满意</text> 35 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">满意</text>
36 <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['满意']}}</text> 36 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['满意']}}</text>
37 </svg> 37 </svg>
38 </div> 38 </div>
39 <div class="q3box qqbox"> 39 <div class="q3box qqbox">
40 <!-- 液体球--> 40 <!-- 液体球-->
41 <div ref="q3" style="width: 100%;height: 90px;"></div> 41 <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>
42 <svg width="100%" height="100"> 42 <svg width="100%" :height="`calc(100*100vw/1920)`">
43 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 43 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
44 <stop offset="0%" stop-color="#03AEFD" /> 44 <stop offset="0%" stop-color="#03AEFD" />
45 <stop offset="10%" stop-color="#AEFFF3" /> 45 <stop offset="10%" stop-color="#AEFFF3" />
46 </linearGradient> 46 </linearGradient>
47 <text x="50%" y="15" font-family="PingFang SC" text-anchor="middle" fill="#fff" font-size="14">基本满意</text> 47 <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">基本满意</text>
48 <text x="50%" y="40" font-family="DIN Alternate" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['基本满意']}}</text> 48 <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{list['基本满意']}}</text>
49 </svg> 49 </svg>
50 </div> 50 </div>
51 <div class="q4box qqbox"> 51 <div class="q4box qqbox">
52 <!-- 液体球--> 52 <!-- 液体球-->
53 <div ref="q4" style="width: 100%;height: 90px;"></div> 53 <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
54 <svg width="100%" height="80"> 54 <svg width="100%" :height="`calc(100*100vw/1920)`">
55 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%"> 55 <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
56 <stop offset="0%" stop-color="#03AEFD" /> 56 <stop offset="0%" stop-color="#03AEFD" />
57 <stop offset="10%" stop-color="#AEFFF3" /> 57 <stop offset="10%" stop-color="#AEFFF3" />
58 </linearGradient> 58 </linearGradient>
59 <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">不满意</text> 59 <text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">不满意</text>
60 <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{ list['不满意'] }}</text> 60 <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold" :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['不满意'] }}</text>
61 </svg> 61 </svg>
62 </div> 62 </div>
63 <!-- <div class="q5box qqbox">--> 63 <!-- <div class="q5box qqbox">-->
...@@ -187,7 +187,7 @@ const setQ1 = (ref, data, dom) => { ...@@ -187,7 +187,7 @@ const setQ1 = (ref, data, dom) => {
187 color: '#fff', 187 color: '#fff',
188 shadowColor: '#000', 188 shadowColor: '#000',
189 shadowBlur: 10, 189 shadowBlur: 10,
190 fontSize: 16, 190 fontSize: '2rem',
191 }, 191 },
192 formatter: (params) => { 192 formatter: (params) => {
193 return `${(params.value * 100).toFixed(2)}%`; 193 return `${(params.value * 100).toFixed(2)}%`;
...@@ -210,19 +210,17 @@ const setQ1 = (ref, data, dom) => { ...@@ -210,19 +210,17 @@ const setQ1 = (ref, data, dom) => {
210 background-size: 100% auto;position: relative; 210 background-size: 100% auto;position: relative;
211 } 211 }
212 212
213 .gif_bg{width: 100%;position: absolute;bottom: -100px; 213 .gif_bg{width: 100%;position: absolute;bottom: calc(-100*100vw/1920);;
214 img{width: 100%; 214 img{width: 100%;
215 transform: rotate3d(1,0,0,70deg); 215 transform: rotate3d(1,0,0,70deg);
216 } 216 }
217 } 217 }
218 218
219 .partB{display: flex;} 219 .partB{display: flex;}
220 .qqbox{width: 25%;position: relative;top: -20px; 220 .qqbox{width: 25%;position: relative;top: calc(-20*100vw/1920);
221 background: url("@/assets/img/q1.png") no-repeat bottom center; 221 background: url("@/assets/img/q1.png") no-repeat bottom center;
222 background-size: 70%; 222 background-size: 70%;
223 } 223 }
224 //.q1box,.q5box{top: -60px} 224 //.q1box,.q5box{top: -60px}
225 //.q2box,.q4box{top: -30px} 225 //.q2box,.q4box{top: -30px}
226
227
228 </style> 226 </style>
......
src/viewsPc/vip/leftPage.vue
...@@ -108,7 +108,8 @@ const setA = () => { ...@@ -108,7 +108,8 @@ const setA = () => {
108 data: kindList.value, 108 data: kindList.value,
109 axisLabel: { 109 axisLabel: {
110 inside: false, 110 inside: false,
111 color: '#7ECEF4' 111 color: '#7ECEF4',
112 fontSize: '1.5rem'
112 }, 113 },
113 axisTick: { 114 axisTick: {
114 show: false 115 show: false
...@@ -125,7 +126,7 @@ const setA = () => { ...@@ -125,7 +126,7 @@ const setA = () => {
125 name: '单位(K)', 126 name: '单位(K)',
126 nameTextStyle: { 127 nameTextStyle: {
127 color:'#7ECEF4', 128 color:'#7ECEF4',
128 fontSize:'9px' 129 fontSize:'1.2rem'
129 }, 130 },
130 axisLine: { 131 axisLine: {
131 show: false 132 show: false
...@@ -134,7 +135,8 @@ const setA = () => { ...@@ -134,7 +135,8 @@ const setA = () => {
134 show: false 135 show: false
135 }, 136 },
136 axisLabel: { 137 axisLabel: {
137 color: '#7ECEF4' 138 color: '#7ECEF4',
139 fontSize: '1.5rem'
138 }, 140 },
139 splitLine: { 141 splitLine: {
140 show: true, 142 show: true,
...@@ -146,7 +148,7 @@ const setA = () => { ...@@ -146,7 +148,7 @@ const setA = () => {
146 }, 148 },
147 tooltip:{ 149 tooltip:{
148 alwaysShowContent:true, 150 alwaysShowContent:true,
149 formatter: `<div style="text-align: center">{b}<br/>{c}</div>`, 151 formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
150 backgroundColor: 'transparent', 152 backgroundColor: 'transparent',
151 borderWidth: 0, 153 borderWidth: 0,
152 extraCssText:'box-shadow:none', 154 extraCssText:'box-shadow:none',
...@@ -154,7 +156,7 @@ const setA = () => { ...@@ -154,7 +156,7 @@ const setA = () => {
154 textStyle:{ 156 textStyle:{
155 color: '#fff', 157 color: '#fff',
156 fontWeight: 'bold', 158 fontWeight: 'bold',
157 fontSize: 14 159 fontSize: '1rem'
158 } 160 }
159 }, 161 },
160 series: [ 162 series: [
...@@ -208,7 +210,7 @@ const setB = () => { ...@@ -208,7 +210,7 @@ const setB = () => {
208 // ], 210 // ],
209 tooltip: { 211 tooltip: {
210 trigger: 'item', 212 trigger: 'item',
211 formatter: `<div style="text-align: center">{b}<br/>{c}</div>`, 213 formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
212 renderModer: 'html', 214 renderModer: 'html',
213 // alignItems: 'center', 215 // alignItems: 'center',
214 className:'downDot', 216 className:'downDot',
...@@ -219,7 +221,7 @@ const setB = () => { ...@@ -219,7 +221,7 @@ const setB = () => {
219 textStyle:{ 221 textStyle:{
220 color: '#fff', 222 color: '#fff',
221 fontWeight: 'bold', 223 fontWeight: 'bold',
222 fontSize: 14 224 fontSize: '10rem'
223 } 225 }
224 }, 226 },
225 xAxis: { 227 xAxis: {
...@@ -231,6 +233,7 @@ const setB = () => { ...@@ -231,6 +233,7 @@ const setB = () => {
231 }, 233 },
232 axisLabel: { 234 axisLabel: {
233 color: '#7ECEF4', 235 color: '#7ECEF4',
236 fontSize: '1.5rem'
234 }, 237 },
235 axisLine: { 238 axisLine: {
236 show: true, 239 show: true,
...@@ -243,9 +246,12 @@ const setB = () => { ...@@ -243,9 +246,12 @@ const setB = () => {
243 name: '单位(K)', 246 name: '单位(K)',
244 nameTextStyle: { 247 nameTextStyle: {
245 color:'#7ECEF4', 248 color:'#7ECEF4',
246 fontSize:'9px' 249 fontSize:'1.2rem'
247 }, 250 },
248 type: 'value', 251 type: 'value',
252 axisLabel: {
253 fontSize: '1.5rem'
254 },
249 axisLine: { 255 axisLine: {
250 lineStyle: { 256 lineStyle: {
251 color: '#03DAFD', 257 color: '#03DAFD',
...@@ -280,7 +286,7 @@ const setB = () => { ...@@ -280,7 +286,7 @@ const setB = () => {
280 show: false, 286 show: false,
281 position: 'bottom', 287 position: 'bottom',
282 formatter: '{c}', 288 formatter: '{c}',
283 fontSize: 12, 289 fontSize: '1rem',
284 color: '#03DAFD' 290 color: '#03DAFD'
285 } 291 }
286 } 292 }
...@@ -322,10 +328,16 @@ onUnmounted(() => { ...@@ -322,10 +328,16 @@ onUnmounted(() => {
322 </script> 328 </script>
323 329
324 <style scoped lang="scss"> 330 <style scoped lang="scss">
325 .title{padding: 12px 50px 0;font-family: 'YouSheBiaoTiHei'; 331 :deep(.el-radio-button--small .el-radio-button__inner){
332 font-size: calc(12*100vw/1920);
333 padding: calc(5*100vw/1920) calc(11*100vw/1920);
334 }
335
336 .title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;
337 font-family: 'YouSheBiaoTiHei';
326 color: #FFFFFF; 338 color: #FFFFFF;
327 //text-shadow: 0px 4px 3px #003F85; 339 //text-shadow: 0px 4px 3px #003F85;
328 font-size: 17px; 340 font-size: calc(17*100vw/1920);
329 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); 341 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
330 -webkit-background-clip: text; 342 -webkit-background-clip: text;
331 -webkit-text-fill-color: transparent;position: relative; 343 -webkit-text-fill-color: transparent;position: relative;
...@@ -333,7 +345,7 @@ onUnmounted(() => { ...@@ -333,7 +345,7 @@ onUnmounted(() => {
333 &::after{ 345 &::after{
334 content: '';width: 100%;height: 100%; 346 content: '';width: 100%;height: 100%;
335 background: url("@/assets/img/line2.png") no-repeat;background-size: contain; 347 background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
336 position: absolute;top: 20px;left: 0;animation: movelr 4s ease-in infinite; 348 position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
337 } 349 }
338 } 350 }
339 @keyframes movelr { 351 @keyframes movelr {
...@@ -341,13 +353,13 @@ onUnmounted(() => { ...@@ -341,13 +353,13 @@ onUnmounted(() => {
341 left: 0;opacity: 1; 353 left: 0;opacity: 1;
342 } 354 }
343 100% { 355 100% {
344 left: 220px;opacity: 0; 356 left: calc(220*100vw/1920);opacity: 0;
345 } 357 }
346 } 358 }
347 .chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left; 359 .chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left;
348 background-size: 100% 100%;position: relative;overflow: hidden; 360 background-size: 100% 100%;position: relative;overflow: hidden;
349 361
350 .po_right{position: absolute;right: 20px;top: 40px;z-index: 1; 362 .po_right{position: absolute;right: calc(20*100vw/1920);top: calc(40*100vw/1920);z-index: 1;
351 :deep(.el-radio-button){ 363 :deep(.el-radio-button){
352 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); 364 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
353 --el-radio-button-checked-text-color: #fff; 365 --el-radio-button-checked-text-color: #fff;
...@@ -363,7 +375,7 @@ onUnmounted(() => { ...@@ -363,7 +375,7 @@ onUnmounted(() => {
363 } 375 }
364 } 376 }
365 .downDot{position: relative; 377 .downDot{position: relative;
366 &::after{content: '';width: 6px;height: 6px; 378 &::after{content: '';width: calc(6*100vw/1920);height: calc(6*100vw/1920);
367 background: #fff;border-radius: 50%; 379 background: #fff;border-radius: 50%;
368 position: absolute;bottom: 0;} 380 position: absolute;bottom: 0;}
369 } 381 }
......
src/viewsPc/vip/rightPage.vue
...@@ -94,7 +94,8 @@ const setA = () => { ...@@ -94,7 +94,8 @@ const setA = () => {
94 data: kindList.value, 94 data: kindList.value,
95 axisLabel: { 95 axisLabel: {
96 inside: false, 96 inside: false,
97 color: '#7ECEF4' 97 color: '#7ECEF4',
98 fontSize: '1.5rem'
98 }, 99 },
99 axisTick: { 100 axisTick: {
100 show: false 101 show: false
...@@ -111,7 +112,7 @@ const setA = () => { ...@@ -111,7 +112,7 @@ const setA = () => {
111 name: '单位(K)', 112 name: '单位(K)',
112 nameTextStyle: { 113 nameTextStyle: {
113 color: '#7ECEF4', 114 color: '#7ECEF4',
114 fontSize: '9px' 115 fontSize: '1.2rem'
115 }, 116 },
116 axisLine: { 117 axisLine: {
117 show: false 118 show: false
...@@ -120,7 +121,8 @@ const setA = () => { ...@@ -120,7 +121,8 @@ const setA = () => {
120 show: false 121 show: false
121 }, 122 },
122 axisLabel: { 123 axisLabel: {
123 color: '#7ECEF4' 124 color: '#7ECEF4',
125 fontSize: '1.5rem'
124 }, 126 },
125 splitLine: { 127 splitLine: {
126 show: true, 128 show: true,
...@@ -132,7 +134,7 @@ const setA = () => { ...@@ -132,7 +134,7 @@ const setA = () => {
132 }, 134 },
133 tooltip: { 135 tooltip: {
134 alwaysShowContent: true, 136 alwaysShowContent: true,
135 formatter: '{c}', 137 formatter: '<div style="font-size: 1.5rem">{c}</div>',
136 backgroundColor: 'transparent', 138 backgroundColor: 'transparent',
137 borderWidth: 0, 139 borderWidth: 0,
138 extraCssText: 'box-shadow:none', 140 extraCssText: 'box-shadow:none',
...@@ -140,7 +142,7 @@ const setA = () => { ...@@ -140,7 +142,7 @@ const setA = () => {
140 textStyle: { 142 textStyle: {
141 color: '#fff', 143 color: '#fff',
142 fontWeight: 'bold', 144 fontWeight: 'bold',
143 fontSize: 14 145 fontSize: '1.5rem'
144 } 146 }
145 }, 147 },
146 series: [ 148 series: [
...@@ -193,7 +195,7 @@ const setB = () => { ...@@ -193,7 +195,7 @@ const setB = () => {
193 animation: true, 195 animation: true,
194 grid: { 196 grid: {
195 top: '15%', 197 top: '15%',
196 left: '80px', 198 left: '15%',
197 right: '10%', 199 right: '10%',
198 bottom: '12%' 200 bottom: '12%'
199 }, 201 },
...@@ -211,7 +213,7 @@ const setB = () => { ...@@ -211,7 +213,7 @@ const setB = () => {
211 // ], 213 // ],
212 tooltip: { 214 tooltip: {
213 trigger: 'item', 215 trigger: 'item',
214 formatter: '{c}', 216 formatter: '<div style="font-size: 1.5rem">{c}</div>',
215 renderModer: 'html', 217 renderModer: 'html',
216 className: 'downDot', 218 className: 'downDot',
217 backgroundColor: 'transparent', 219 backgroundColor: 'transparent',
...@@ -221,7 +223,7 @@ const setB = () => { ...@@ -221,7 +223,7 @@ const setB = () => {
221 textStyle: { 223 textStyle: {
222 color: '#fff', 224 color: '#fff',
223 fontWeight: 'bold', 225 fontWeight: 'bold',
224 fontSize: 14 226 fontSize: '1.5rem'
225 } 227 }
226 }, 228 },
227 xAxis: { 229 xAxis: {
...@@ -233,6 +235,7 @@ const setB = () => { ...@@ -233,6 +235,7 @@ const setB = () => {
233 }, 235 },
234 axisLabel: { 236 axisLabel: {
235 color: '#7ECEF4', 237 color: '#7ECEF4',
238 fontSize: '1.5rem'
236 }, 239 },
237 axisLine: { 240 axisLine: {
238 show: true, 241 show: true,
...@@ -245,9 +248,12 @@ const setB = () => { ...@@ -245,9 +248,12 @@ const setB = () => {
245 name: '单位(份)', 248 name: '单位(份)',
246 nameTextStyle: { 249 nameTextStyle: {
247 color: '#7ECEF4', 250 color: '#7ECEF4',
248 fontSize: '9px' 251 fontSize: '1.2rem'
249 }, 252 },
250 type: 'value', 253 type: 'value',
254 axisLabel: {
255 fontSize: '1.5rem'
256 },
251 axisLine: { 257 axisLine: {
252 lineStyle: { 258 lineStyle: {
253 color: '#03DAFD', 259 color: '#03DAFD',
...@@ -337,17 +343,21 @@ onUnmounted(() => { ...@@ -337,17 +343,21 @@ onUnmounted(() => {
337 </script> 343 </script>
338 344
339 <style scoped lang="scss"> 345 <style scoped lang="scss">
340 .title{padding: 12px 50px 0;font-family: 'YouSheBiaoTiHei'; 346 :deep(.el-radio-button--small .el-radio-button__inner){
347 font-size: calc(12*100vw/1920);
348 padding: calc(5*100vw/1920) calc(11*100vw/1920);
349 }
350 .title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;font-family: 'YouSheBiaoTiHei';
341 color: #FFFFFF; 351 color: #FFFFFF;
342 //text-shadow: 0px 4px 3px #003F85; 352 //text-shadow: 0px 4px 3px #003F85;
343 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%); 353 background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
344 -webkit-background-clip: text; 354 -webkit-background-clip: text;
345 font-size: 17px; 355 font-size: calc(17*100vw/1920);
346 -webkit-text-fill-color: transparent;position: relative; 356 -webkit-text-fill-color: transparent;position: relative;
347 &::after{ 357 &::after{
348 content: '';width: 100%;height: 100%; 358 content: '';width: 100%;height: 100%;
349 background: url("@/assets/img/line2.png") no-repeat;background-size: contain; 359 background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
350 position: absolute;top: 20px;left: 0;animation: movelr 4s ease-in infinite; 360 position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
351 } 361 }
352 } 362 }
353 @keyframes movelr { 363 @keyframes movelr {
...@@ -355,7 +365,7 @@ onUnmounted(() => { ...@@ -355,7 +365,7 @@ onUnmounted(() => {
355 left: 0;opacity: 1; 365 left: 0;opacity: 1;
356 } 366 }
357 100% { 367 100% {
358 left: 220px;opacity: 0; 368 left: calc(220*100vw/1920);opacity: 0;
359 } 369 }
360 } 370 }
361 371
...@@ -366,8 +376,8 @@ onUnmounted(() => { ...@@ -366,8 +376,8 @@ onUnmounted(() => {
366 376
367 .po_right { 377 .po_right {
368 position: absolute; 378 position: absolute;
369 right: 20px; 379 right: calc(20*100vw/1920);
370 top: 40px; 380 top: calc(40*100vw/1920);
371 z-index: 1; 381 z-index: 1;
372 382
373 :deep(.el-radio-button) { 383 :deep(.el-radio-button) {
...@@ -395,8 +405,8 @@ onUnmounted(() => { ...@@ -395,8 +405,8 @@ onUnmounted(() => {
395 405
396 &::after { 406 &::after {
397 content: ''; 407 content: '';
398 width: 6px; 408 width: calc(6*100vw/1920);
399 height: 6px; 409 height: calc(6*100vw/1920);
400 background: #fff; 410 background: #fff;
401 border-radius: 50%; 411 border-radius: 50%;
402 position: absolute; 412 position: absolute;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!