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 @@
margin-left: 10px;
}
.mt20 {
margin-top: 20px;
margin-top: calc(20*100vw/1920);
}
.mr20 {
margin-right: 20px;
margin-right: calc(20*100vw/1920);
}
.mb20 {
margin-bottom: 20px;
margin-bottom:calc(20*100vw/1920);
}
.ml20 {
margin-left: 20px;
margin-left: calc(20*100vw/1920);
}
.pd20{padding: 20px}
.pd20{padding:calc(20*100vw/1920)}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-weight: 500;
......@@ -915,8 +915,8 @@ img{display: block;}
.fm{width: 100%;height: 100%;}
}
}
.mt30{margin-top: 30px}
.mb60{margin-bottom: 60px;}
.mt30{margin-top: calc(30*100vw/1920)}
.mb60{margin-bottom:calc(60*100vw/1920)}
.highlight{background: yellow;}
.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)
</script>
<style lang="scss" scoped>
.footAll{background: #E0E3E5;;padding: 36px 0;
p{ font-size: 14px;
opacity: 0.88;
color: #4C5359;}
img{height: 80px;}
}
.gradient-text {font-family: FZJunHeiS-B-GB;
font-weight: 600;
font-size: 17px;
background: linear-gradient(0deg, #8226FC 0%, #483BEB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 500px) {
.forWei{display: none;}
.footAll{padding:10px 0;
//display: none;
ul {
li {
font-size: 10px;line-height: 1.4;
}
}
img{height: 60px;}
p{font-size: 10px;line-height: 1.4;}
.copyright{font-size: 10px;line-height: 1.4;}
}
}
.ffoot{display: inline-flex;
img{width: 20px;height: 20px;display: inline-block;position: relative;top: 4px;margin-right: 4px;}
}
</style>
......
src/layoutPc/components/AppHeader.vue
......@@ -7,7 +7,7 @@
<h1 class="text-center m0">新吴区档案馆服务大厅</h1>
<div class="date">
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<svg :width="`calc(300*100vw/1920)`" :height="`calc(100*100vw/1920)`" xmlns="http://www.w3.org/2000/svg">
<!-- 定义渐变色 -->
<defs>
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
......@@ -87,11 +87,11 @@ watch(() => useUserStore().visitor, (val) => {
</script>
<style scoped lang="scss">
h1{font-family: 'YouSheBiaoTiHei';position: relative;top: 15px;
background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
h1{font-family: 'YouSheBiaoTiHei';position: relative;top: calc(15*100vw/1920);
background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);font-size: calc(32*100vw/1920);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.text-center{color: #fff;}
.date{color: #fff;position: absolute;right: 30px;}
.date{color: #fff;position: absolute;right:calc(30*100vw/1920);}
</style>
......
src/viewsPc/vip/centerPage.vue
......@@ -14,50 +14,50 @@
<div class="partB">
<div class="q1box qqbox">
<!-- 液体球-->
<div ref="q1" style="width: 100%;height: 90px;"></div>
<svg width="100%" height="80">
<div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常满意</text>
<text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常满意']}}</text>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">非常满意</text>
<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>
</svg>
</div>
<div class="q2box qqbox">
<!-- 液体球-->
<div ref="q2" style="width: 100%;height: 90px;"></div>
<svg width="100%" height="100">
<div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">满意</text>
<text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['满意']}}</text>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">满意</text>
<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>
</svg>
</div>
<div class="q3box qqbox">
<!-- 液体球-->
<div ref="q3" style="width: 100%;height: 90px;"></div>
<svg width="100%" height="100">
<div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" y="15" font-family="PingFang SC" text-anchor="middle" fill="#fff" font-size="14">基本满意</text>
<text x="50%" y="40" font-family="DIN Alternate" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['基本满意']}}</text>
<text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">基本满意</text>
<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>
</svg>
</div>
<div class="q4box qqbox">
<!-- 液体球-->
<div ref="q4" style="width: 100%;height: 90px;"></div>
<svg width="100%" height="80">
<div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg width="100%" :height="`calc(100*100vw/1920)`">
<linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#03AEFD" />
<stop offset="10%" stop-color="#AEFFF3" />
</linearGradient>
<text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">不满意</text>
<text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{ list['不满意'] }}</text>
<text x="50%" :y="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">不满意</text>
<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>
</svg>
</div>
<!-- <div class="q5box qqbox">-->
......@@ -187,7 +187,7 @@ const setQ1 = (ref, data, dom) => {
color: '#fff',
shadowColor: '#000',
shadowBlur: 10,
fontSize: 16,
fontSize: '2rem',
},
formatter: (params) => {
return `${(params.value * 100).toFixed(2)}%`;
......@@ -210,19 +210,17 @@ const setQ1 = (ref, data, dom) => {
background-size: 100% auto;position: relative;
}
.gif_bg{width: 100%;position: absolute;bottom: -100px;
.gif_bg{width: 100%;position: absolute;bottom: calc(-100*100vw/1920);;
img{width: 100%;
transform: rotate3d(1,0,0,70deg);
}
}
.partB{display: flex;}
.qqbox{width: 25%;position: relative;top: -20px;
.qqbox{width: 25%;position: relative;top: calc(-20*100vw/1920);
background: url("@/assets/img/q1.png") no-repeat bottom center;
background-size: 70%;
}
//.q1box,.q5box{top: -60px}
//.q2box,.q4box{top: -30px}
</style>
......
src/viewsPc/vip/leftPage.vue
......@@ -108,7 +108,8 @@ const setA = () => {
data: kindList.value,
axisLabel: {
inside: false,
color: '#7ECEF4'
color: '#7ECEF4',
fontSize: '1.5rem'
},
axisTick: {
show: false
......@@ -125,7 +126,7 @@ const setA = () => {
name: '单位(K)',
nameTextStyle: {
color:'#7ECEF4',
fontSize:'9px'
fontSize:'1.2rem'
},
axisLine: {
show: false
......@@ -134,7 +135,8 @@ const setA = () => {
show: false
},
axisLabel: {
color: '#7ECEF4'
color: '#7ECEF4',
fontSize: '1.5rem'
},
splitLine: {
show: true,
......@@ -146,7 +148,7 @@ const setA = () => {
},
tooltip:{
alwaysShowContent:true,
formatter: `<div style="text-align: center">{b}<br/>{c}</div>`,
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText:'box-shadow:none',
......@@ -154,7 +156,7 @@ const setA = () => {
textStyle:{
color: '#fff',
fontWeight: 'bold',
fontSize: 14
fontSize: '1rem'
}
},
series: [
......@@ -208,7 +210,7 @@ const setB = () => {
// ],
tooltip: {
trigger: 'item',
formatter: `<div style="text-align: center">{b}<br/>{c}</div>`,
formatter: `<div style="text-align: center;font-size: 1.5rem">{b}<br/>{c}</div>`,
renderModer: 'html',
// alignItems: 'center',
className:'downDot',
......@@ -219,7 +221,7 @@ const setB = () => {
textStyle:{
color: '#fff',
fontWeight: 'bold',
fontSize: 14
fontSize: '10rem'
}
},
xAxis: {
......@@ -231,6 +233,7 @@ const setB = () => {
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.5rem'
},
axisLine: {
show: true,
......@@ -243,9 +246,12 @@ const setB = () => {
name: '单位(K)',
nameTextStyle: {
color:'#7ECEF4',
fontSize:'9px'
fontSize:'1.2rem'
},
type: 'value',
axisLabel: {
fontSize: '1.5rem'
},
axisLine: {
lineStyle: {
color: '#03DAFD',
......@@ -280,7 +286,7 @@ const setB = () => {
show: false,
position: 'bottom',
formatter: '{c}',
fontSize: 12,
fontSize: '1rem',
color: '#03DAFD'
}
}
......@@ -322,10 +328,16 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.title{padding: 12px 50px 0;font-family: 'YouSheBiaoTiHei';
:deep(.el-radio-button--small .el-radio-button__inner){
font-size: calc(12*100vw/1920);
padding: calc(5*100vw/1920) calc(11*100vw/1920);
}
.title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;
font-family: 'YouSheBiaoTiHei';
color: #FFFFFF;
//text-shadow: 0px 4px 3px #003F85;
font-size: 17px;
font-size: calc(17*100vw/1920);
background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;position: relative;
......@@ -333,7 +345,7 @@ onUnmounted(() => {
&::after{
content: '';width: 100%;height: 100%;
background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
position: absolute;top: 20px;left: 0;animation: movelr 4s ease-in infinite;
position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
}
}
@keyframes movelr {
......@@ -341,13 +353,13 @@ onUnmounted(() => {
left: 0;opacity: 1;
}
100% {
left: 220px;opacity: 0;
left: calc(220*100vw/1920);opacity: 0;
}
}
.chartCard{background: url("@/assets/img/box_bg.png") no-repeat top left;
background-size: 100% 100%;position: relative;overflow: hidden;
.po_right{position: absolute;right: 20px;top: 40px;z-index: 1;
.po_right{position: absolute;right: calc(20*100vw/1920);top: calc(40*100vw/1920);z-index: 1;
:deep(.el-radio-button){
--el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
--el-radio-button-checked-text-color: #fff;
......@@ -363,7 +375,7 @@ onUnmounted(() => {
}
}
.downDot{position: relative;
&::after{content: '';width: 6px;height: 6px;
&::after{content: '';width: calc(6*100vw/1920);height: calc(6*100vw/1920);
background: #fff;border-radius: 50%;
position: absolute;bottom: 0;}
}
......
src/viewsPc/vip/rightPage.vue
......@@ -94,7 +94,8 @@ const setA = () => {
data: kindList.value,
axisLabel: {
inside: false,
color: '#7ECEF4'
color: '#7ECEF4',
fontSize: '1.5rem'
},
axisTick: {
show: false
......@@ -111,7 +112,7 @@ const setA = () => {
name: '单位(K)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '9px'
fontSize: '1.2rem'
},
axisLine: {
show: false
......@@ -120,7 +121,8 @@ const setA = () => {
show: false
},
axisLabel: {
color: '#7ECEF4'
color: '#7ECEF4',
fontSize: '1.5rem'
},
splitLine: {
show: true,
......@@ -132,7 +134,7 @@ const setA = () => {
},
tooltip: {
alwaysShowContent: true,
formatter: '{c}',
formatter: '<div style="font-size: 1.5rem">{c}</div>',
backgroundColor: 'transparent',
borderWidth: 0,
extraCssText: 'box-shadow:none',
......@@ -140,7 +142,7 @@ const setA = () => {
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
fontSize: '1.5rem'
}
},
series: [
......@@ -193,7 +195,7 @@ const setB = () => {
animation: true,
grid: {
top: '15%',
left: '80px',
left: '15%',
right: '10%',
bottom: '12%'
},
......@@ -211,7 +213,7 @@ const setB = () => {
// ],
tooltip: {
trigger: 'item',
formatter: '{c}',
formatter: '<div style="font-size: 1.5rem">{c}</div>',
renderModer: 'html',
className: 'downDot',
backgroundColor: 'transparent',
......@@ -221,7 +223,7 @@ const setB = () => {
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 14
fontSize: '1.5rem'
}
},
xAxis: {
......@@ -233,6 +235,7 @@ const setB = () => {
},
axisLabel: {
color: '#7ECEF4',
fontSize: '1.5rem'
},
axisLine: {
show: true,
......@@ -245,9 +248,12 @@ const setB = () => {
name: '单位(份)',
nameTextStyle: {
color: '#7ECEF4',
fontSize: '9px'
fontSize: '1.2rem'
},
type: 'value',
axisLabel: {
fontSize: '1.5rem'
},
axisLine: {
lineStyle: {
color: '#03DAFD',
......@@ -337,17 +343,21 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.title{padding: 12px 50px 0;font-family: 'YouSheBiaoTiHei';
:deep(.el-radio-button--small .el-radio-button__inner){
font-size: calc(12*100vw/1920);
padding: calc(5*100vw/1920) calc(11*100vw/1920);
}
.title{padding: calc(12*100vw/1920) calc(50*100vw/1920) 0;font-family: 'YouSheBiaoTiHei';
color: #FFFFFF;
//text-shadow: 0px 4px 3px #003F85;
background: linear-gradient(180deg, #fff 50%, #9CD2FF 100%);
-webkit-background-clip: text;
font-size: 17px;
font-size: calc(17*100vw/1920);
-webkit-text-fill-color: transparent;position: relative;
&::after{
content: '';width: 100%;height: 100%;
background: url("@/assets/img/line2.png") no-repeat;background-size: contain;
position: absolute;top: 20px;left: 0;animation: movelr 4s ease-in infinite;
position: absolute;top: calc(20*100vw/1920);left: 0;animation: movelr 4s ease-in infinite;
}
}
@keyframes movelr {
......@@ -355,7 +365,7 @@ onUnmounted(() => {
left: 0;opacity: 1;
}
100% {
left: 220px;opacity: 0;
left: calc(220*100vw/1920);opacity: 0;
}
}
......@@ -366,8 +376,8 @@ onUnmounted(() => {
.po_right {
position: absolute;
right: 20px;
top: 40px;
right: calc(20*100vw/1920);
top: calc(40*100vw/1920);
z-index: 1;
:deep(.el-radio-button) {
......@@ -395,8 +405,8 @@ onUnmounted(() => {
&::after {
content: '';
width: 6px;
height: 6px;
width: calc(6*100vw/1920);
height: calc(6*100vw/1920);
background: #fff;
border-radius: 50%;
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!