Skip to content

杨炀 / dangan_dataV

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

no message

1 parent c2424795
Inline Side-by-side
Showing 7 changed files with 149 additions and 156 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;
......
src/viewsPc/vip/rotatePart.vue
...@@ -74,16 +74,18 @@ function unpauseAn() { ...@@ -74,16 +74,18 @@ function unpauseAn() {
74 background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%); 74 background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
75 -webkit-background-clip: text; 75 -webkit-background-clip: text;
76 -webkit-text-fill-color: transparent; 76 -webkit-text-fill-color: transparent;
77 font-size: 20px; 77 font-size: calc(20*100vw/1920);
78 line-height: 1.6;
78 } 79 }
79 :deep(.el-statistic__number){ 80 :deep(.el-statistic__number){
80 font-size: 26px; 81 font-size: calc(26*100vw/1920);
81 font-family: 'DIN Alternate'; 82 font-family: 'DIN Alternate';
82 background: linear-gradient(180deg, #fff 20%, #9CD2FF 100%); 83 background: linear-gradient(180deg, #fff 20%, #9CD2FF 100%);
83 -webkit-background-clip: text; 84 -webkit-background-clip: text;
84 -webkit-text-fill-color: transparent; 85 -webkit-text-fill-color: transparent;
85 } 86 }
86 .statistic{--el-statistic-title-color: #fff;text-align: center;position: relative;top: -15px;} 87 .statistic{--el-statistic-title-color: #fff;text-align: center;position: relative;top: calc(-15*100vw/1920);
88 }
87 .ellipse { 89 .ellipse {
88 position: relative; 90 position: relative;
89 left: -3%; 91 left: -3%;
...@@ -96,8 +98,8 @@ function unpauseAn() { ...@@ -96,8 +98,8 @@ function unpauseAn() {
96 &:hover .circle{ animation-play-state: paused!important;} 98 &:hover .circle{ animation-play-state: paused!important;}
97 } 99 }
98 .ellipse .circle { 100 .ellipse .circle {
99 width: 300px; 101 width: calc(300*100vw/1920);
100 height: 400px; 102 height: calc(400*100vw/1920);
101 top: 0; 103 top: 0;
102 left: 0; 104 left: 0;
103 right: 0; 105 right: 0;
...@@ -114,9 +116,9 @@ function unpauseAn() { ...@@ -114,9 +116,9 @@ function unpauseAn() {
114 background-size: contain; 116 background-size: contain;
115 //box-shadow: 0 0 20px #000; 117 //box-shadow: 0 0 20px #000;
116 display: block; 118 display: block;
117 height: 340px; width: 290px; 119 height: calc(340*100vw/1920); width:calc(290*100vw/1920);
118 transform: rotateZ(-90deg); /* 再次旋转 */ 120 transform: rotateZ(-90deg); /* 再次旋转 */
119 img{width: 70%;position: relative;top:0px;margin: 0 auto 60px;} 121 img{width: 70%;position: relative;top:0;margin: 0 auto calc(60*100vw/1920);}
120 } 122 }
121 123
122 .ellipse .circle1{ 124 .ellipse .circle1{
...@@ -137,231 +139,231 @@ function unpauseAn() { ...@@ -137,231 +139,231 @@ function unpauseAn() {
137 139
138 @keyframes moveA { 140 @keyframes moveA {
139 0% { 141 0% {
140 transform: rotateZ(0) translateX(300px) rotateZ(0) rotateY(-70deg) scale(1); 142 transform: rotateZ(0) translateX(calc(300*100vw/1920)) rotateZ(0) rotateY(-70deg) scale(1);
141 filter: brightness(100%); 143 filter: brightness(100%);
142 } 144 }
143 5% { 145 5% {
144 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 146 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
145 filter: brightness(80%); 147 filter: brightness(80%);
146 } 148 }
147 20% { 149 20% {
148 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 150 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
149 filter: brightness(80%); 151 filter: brightness(80%);
150 } 152 }
151 25% { 153 25% {
152 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 154 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
153 filter: brightness(60%); 155 filter: brightness(60%);
154 } 156 }
155 40% { 157 40% {
156 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 158 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
157 filter: brightness(60%); 159 filter: brightness(60%);
158 } 160 }
159 45% { 161 45% {
160 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 162 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
161 filter: brightness(60%); 163 filter: brightness(60%);
162 } 164 }
163 60% { 165 60% {
164 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 166 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
165 filter: brightness(60%); 167 filter: brightness(60%);
166 } 168 }
167 65% { 169 65% {
168 transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8); 170 transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
169 filter: brightness(80%); 171 filter: brightness(80%);
170 } 172 }
171 80% { 173 80% {
172 transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8); 174 transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
173 filter: brightness(80%); 175 filter: brightness(80%);
174 } 176 }
175 85% { 177 85% {
176 transform: rotateZ(360deg) translateX(300px) rotateZ(-360deg) rotateY(-70deg) scale(1); 178 transform: rotateZ(360deg) translateX(calc(300*100vw/1920)) rotateZ(-360deg) rotateY(-70deg) scale(1);
177 filter: brightness(100%); 179 filter: brightness(100%);
178 } 180 }
179 100% { 181 100% {
180 transform: rotateZ(360deg) translateX(300px) rotateZ(-360deg) rotateY(-70deg) scale(1); 182 transform: rotateZ(360deg) translateX(calc(300*100vw/1920)) rotateZ(-360deg) rotateY(-70deg) scale(1);
181 filter: brightness(100%); 183 filter: brightness(100%);
182 } 184 }
183 } 185 }
184 @keyframes moveB { 186 @keyframes moveB {
185 0% { 187 0% {
186 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8); 188 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
187 filter: brightness(80%); 189 filter: brightness(80%);
188 } 190 }
189 5% { 191 5% {
190 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 192 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
191 z-index: 99;filter: brightness(100%); 193 z-index: 99;filter: brightness(100%);
192 } 194 }
193 20% { 195 20% {
194 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 196 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
195 z-index: 99;filter: brightness(100%); 197 z-index: 99;filter: brightness(100%);
196 } 198 }
197 25% { 199 25% {
198 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 200 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
199 filter: brightness(80%); 201 filter: brightness(80%);
200 } 202 }
201 40% { 203 40% {
202 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 204 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
203 filter: brightness(80%); 205 filter: brightness(80%);
204 } 206 }
205 45% { 207 45% {
206 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 208 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
207 filter: brightness(60%); 209 filter: brightness(60%);
208 } 210 }
209 60% { 211 60% {
210 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 212 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
211 filter: brightness(60%); 213 filter: brightness(60%);
212 } 214 }
213 65% { 215 65% {
214 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 216 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
215 filter: brightness(60%); 217 filter: brightness(60%);
216 } 218 }
217 80% { 219 80% {
218 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 220 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
219 filter: brightness(60%); 221 filter: brightness(60%);
220 } 222 }
221 85% { 223 85% {
222 transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8); 224 transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
223 filter: brightness(80%); 225 filter: brightness(80%);
224 } 226 }
225 100% { 227 100% {
226 transform: rotateZ(280deg) translateX(300px) rotateZ(-280deg) rotateY(-70deg) scale(0.8); 228 transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
227 filter: brightness(80%); 229 filter: brightness(80%);
228 } 230 }
229 } 231 }
230 @keyframes moveC { 232 @keyframes moveC {
231 0% { 233 0% {
232 transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7); 234 transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
233 filter: brightness(60%); 235 filter: brightness(60%);
234 } 236 }
235 5% { 237 5% {
236 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8); 238 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
237 filter: brightness(80%); 239 filter: brightness(80%);
238 } 240 }
239 20% { 241 20% {
240 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8); 242 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
241 filter: brightness(80%); 243 filter: brightness(80%);
242 } 244 }
243 25% { 245 25% {
244 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 246 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
245 filter: brightness(100%);z-index: 99; 247 filter: brightness(100%);z-index: 99;
246 } 248 }
247 40% { 249 40% {
248 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 250 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
249 filter: brightness(100%);z-index: 99; 251 filter: brightness(100%);z-index: 99;
250 } 252 }
251 45% { 253 45% {
252 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 254 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
253 filter: brightness(80%); 255 filter: brightness(80%);
254 } 256 }
255 60% { 257 60% {
256 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 258 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
257 filter: brightness(80%); 259 filter: brightness(80%);
258 } 260 }
259 65% { 261 65% {
260 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 262 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
261 filter: brightness(60%); 263 filter: brightness(60%);
262 } 264 }
263 80% { 265 80% {
264 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 266 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
265 filter: brightness(60%); 267 filter: brightness(60%);
266 } 268 }
267 85% { 269 85% {
268 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 270 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
269 filter: brightness(60%); 271 filter: brightness(60%);
270 } 272 }
271 100% { 273 100% {
272 transform: rotateZ(200deg) translateX(300px) rotateZ(-200deg) rotateY(-70deg) scale(0.7); 274 transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
273 filter: brightness(60%); 275 filter: brightness(60%);
274 } 276 }
275 } 277 }
276 @keyframes moveD { 278 @keyframes moveD {
277 0% { 279 0% {
278 transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7); 280 transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
279 filter: brightness(60%); 281 filter: brightness(60%);
280 } 282 }
281 5% { 283 5% {
282 transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7); 284 transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
283 filter: brightness(60%); 285 filter: brightness(60%);
284 } 286 }
285 20% { 287 20% {
286 transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7); 288 transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
287 filter: brightness(60%); 289 filter: brightness(60%);
288 } 290 }
289 25% { 291 25% {
290 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8); 292 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
291 filter: brightness(80%); 293 filter: brightness(80%);
292 } 294 }
293 40% { 295 40% {
294 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.8); 296 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
295 filter: brightness(80%); 297 filter: brightness(80%);
296 } 298 }
297 45% { 299 45% {
298 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 300 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
299 filter: brightness(100%);z-index: 99; 301 filter: brightness(100%);z-index: 99;
300 } 302 }
301 60% { 303 60% {
302 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 304 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
303 filter: brightness(100%);z-index: 99; 305 filter: brightness(100%);z-index: 99;
304 } 306 }
305 65% { 307 65% {
306 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 308 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
307 filter: brightness(80%); 309 filter: brightness(80%);
308 } 310 }
309 80% { 311 80% {
310 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 312 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
311 filter: brightness(80%); 313 filter: brightness(80%);
312 } 314 }
313 85% { 315 85% {
314 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 316 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
315 filter: brightness(60%); 317 filter: brightness(60%);
316 } 318 }
317 100% { 319 100% {
318 transform: rotateZ(160deg) translateX(300px) rotateZ(-160deg) rotateY(-70deg) scale(0.7); 320 transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
319 filter: brightness(60%); 321 filter: brightness(60%);
320 } 322 }
321 } 323 }
322 @keyframes moveE { 324 @keyframes moveE {
323 0% { 325 0% {
324 transform: rotateZ(-280deg) translateX(300px) rotateZ(280deg) rotateY(-70deg) scale(0.8); 326 transform: rotateZ(-280deg) translateX(calc(300*100vw/1920)) rotateZ(280deg) rotateY(-70deg) scale(0.8);
325 filter: brightness(80%); 327 filter: brightness(80%);
326 } 328 }
327 5% { 329 5% {
328 transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7); 330 transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
329 filter: brightness(60%); 331 filter: brightness(60%);
330 } 332 }
331 20% { 333 20% {
332 transform: rotateZ(-200deg) translateX(300px) rotateZ(200deg) rotateY(-70deg) scale(0.7); 334 transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
333 filter: brightness(60%); 335 filter: brightness(60%);
334 } 336 }
335 25% { 337 25% {
336 transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7); 338 transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
337 filter: brightness(60%); 339 filter: brightness(60%);
338 } 340 }
339 40% { 341 40% {
340 transform: rotateZ(-160deg) translateX(300px) rotateZ(160deg) rotateY(-70deg) scale(0.7); 342 transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
341 filter: brightness(60%); 343 filter: brightness(60%);
342 } 344 }
343 45% { 345 45% {
344 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.7); 346 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.7);
345 filter: brightness(80%); 347 filter: brightness(80%);
346 } 348 }
347 60% { 349 60% {
348 transform: rotateZ(-80deg) translateX(300px) rotateZ(80deg) rotateY(-70deg) scale(0.7); 350 transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.7);
349 filter: brightness(80%); 351 filter: brightness(80%);
350 } 352 }
351 65% { 353 65% {
352 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 354 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
353 filter: brightness(100%);z-index: 99; 355 filter: brightness(100%);z-index: 99;
354 } 356 }
355 80% { 357 80% {
356 transform: rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateY(-70deg) scale(1); 358 transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
357 filter: brightness(100%);z-index: 99; 359 filter: brightness(100%);z-index: 99;
358 } 360 }
359 85% { 361 85% {
360 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 362 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
361 filter: brightness(80%); 363 filter: brightness(80%);
362 } 364 }
363 100% { 365 100% {
364 transform: rotateZ(80deg) translateX(300px) rotateZ(-80deg) rotateY(-70deg) scale(0.8); 366 transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
365 filter: brightness(80%); 367 filter: brightness(80%);
366 } 368 }
367 } 369 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!