Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
787223b9 by zhangmeng
Options

饼图

1 parent 65d3b4bb
Inline Side-by-side
Showing 3 changed files with 237 additions and 85 deletions
src/layoutPc/components/AppHeader.vue
......@@ -105,7 +105,7 @@ h1 {
.text-top {
background: url('@/assets/image/top@2x.png') no-repeat top center;
background-size: 100%;
height: calc(50 * 100vw / 1920);
height: calc(63 * 100vw / 1920);
margin: 0;
font-size: calc(17 * 100vw / 1920);
font-weight: 400;
......
src/layoutPc/index.vue
......@@ -22,6 +22,7 @@ import {AppMain, AppHeader, AppBottom} from './components'
.bg {
width: 100vw;
height: 100vh;
min-width: 1000px;
//overflow: hidden;
//background: rgba(0,0,0,0.75)
background: url("@/assets/image/bg@2x.png") no-repeat top center;
......
src/viewsPc/vip/centerPage.vue
<template>
<div class="partA">
<rotate-part>
</rotate-part>
<div class="gif_bg">
<img src="@/assets/img/rote.png">
</div>
</div>
<div class="center">
<div class="top">
<div class="left">
<div class="titleTop">懂事会得分</div>
<div class="titleCenter">预计得分 <span class="tex1">5</span></div>
<div class="titleCenter">标准得分 <span class="tex2">10</span>
</div>
</div>
<div class="right">
<div class="rTop">
<div>领导重点关注</div>
<div><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
</div>
<div class="rBotton">
<div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
<div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>
<!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
<!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
<!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
<!-- <div class="row-text"><span/> 这里是文案内容这里是文案内容这里是文案内容</div>-->
</div>
<!-- -->
<div class="partB">
<div class="q1box qqbox">
<!-- 液体球-->
<div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg :height="`calc(100*100vw/1920)`" width="100%">
<linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
非常满意
</text>
<text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"
text-anchor="middle" x="50%">{{ list['非常满意'] }}
</text>
</svg>
</div>
</div>
<div class="q2box qqbox">
<!-- 液体球-->
<div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
<svg :height="`calc(100*100vw/1920)`" width="100%">
<linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
满意
</text>
<text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"
text-anchor="middle" x="50%">{{ list['满意'] }}
</text>
</svg>
<div class="bottom">
<div ref="boardRef1" style="width: 100%;height: 20vh;">
看板11
</div>
<div ref="boardRef2" style="width: 100%;height: 20vh;">
看板11
</div>
<div ref="boardRef3" style="width: 100%;height: 20vh;">
看板11
</div>
<div ref="boardRef4" style="width: 100%;height: 20vh;">
看板11
</div>
</div>
<!-- <div class="q3box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <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="`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>-->
<!-- &lt;!&ndash; &ndash;&gt;-->
<!-- <div class="partB">-->
<!-- <div class="q1box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q1" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 非常满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['非常满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <div class="q2box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="q3box qqbox">&ndash;&gt;-->
<!-- &lt;!&ndash; &lt;!&ndash; 液体球&ndash;&gt;&ndash;&gt;-->
<!-- &lt;!&ndash; <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <svg width="100%" :height="`calc(100*100vw/1920)`">&ndash;&gt;-->
<!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD"/>&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" :y="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"&ndash;&gt;-->
<!-- &lt;!&ndash; :font-size="`calc(14*100vw/1920)`">基本满意&ndash;&gt;-->
<!-- &lt;!&ndash; </text>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"&ndash;&gt;-->
<!-- &lt;!&ndash; :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}&ndash;&gt;-->
<!-- &lt;!&ndash; </text>&ndash;&gt;-->
<!-- &lt;!&ndash; </svg>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- <div class="q4box qqbox">-->
<!-- &lt;!&ndash; 液体球&ndash;&gt;-->
<!-- <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>-->
<!-- <svg :height="`calc(100*100vw/1920)`" width="100%">-->
<!-- <linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">-->
<!-- <stop offset="0%" stop-color="#03AEFD"/>-->
<!-- <stop offset="10%" stop-color="#AEFFF3"/>-->
<!-- </linearGradient>-->
<!-- <text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">-->
<!-- 不满意-->
<!-- </text>-->
<!-- <text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"-->
<!-- text-anchor="middle" x="50%">{{ list['不满意'] }}-->
<!-- </text>-->
<!-- </svg>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="q5box qqbox">&ndash;&gt;-->
<!-- &lt;!&ndash; <div ref="q5" style="width: 100%;height: 90px;"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <svg width="100%" height="100">&ndash;&gt;-->
<!-- &lt;!&ndash; <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="0%" stop-color="#03AEFD" />&ndash;&gt;-->
<!-- &lt;!&ndash; <stop offset="10%" stop-color="#AEFFF3" />&ndash;&gt;-->
<!-- &lt;!&ndash; </linearGradient>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>&ndash;&gt;-->
<!-- &lt;!&ndash; <text x="50%" y="40" text-anchor="middle" font-weight="bold" font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>&ndash;&gt;-->
<!-- &lt;!&ndash; </svg>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<div class="q4box qqbox">
<!-- 液体球-->
<div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
<svg :height="`calc(100*100vw/1920)`" width="100%">
<linearGradient id="gradient" x1="100%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#03AEFD"/>
<stop offset="10%" stop-color="#AEFFF3"/>
</linearGradient>
<text :font-size="`calc(14*100vw/1920)`" :y="`calc(15*100vw/1920)`" fill="#fff" text-anchor="middle" x="50%">
不满意
</text>
<text :font-size="`calc(16*100vw/1920)`" :y="`calc(40*100vw/1920)`" fill="url(#gradient)" font-weight="bold"
text-anchor="middle" x="50%">{{ list['不满意'] }}
</text>
</svg>
</div>
<!-- <div class="q5box qqbox">-->
<!-- <div ref="q5" style="width: 100%;height: 90px;"></div>-->
<!-- <svg width="100%" height="100">-->
<!-- <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>-->
<!-- </svg>-->
<!-- </div>-->
</div>
</template>
<script setup>
import rotatePart from './rotatePart'
import {onMounted, ref, watch} from 'vue'
import {ArrowRight} from '@element-plus/icons-vue'
import {szToHz} from '@/utils/ruoyi'
import 'echarts-liquidfill'
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const statisticStyle = ref({'color': '#fff'})
const boardRef1 = ref(null)
const boardRef2 = ref(null)
const boardRef3 = ref(null)
const boardRef4 = ref(null)
const q1 = ref(null)
const q2 = ref(null)
const q3 = ref(null)
......@@ -223,6 +262,118 @@ const setQ1 = (ref, data) => {
</script>
<style lang="scss" scoped>
.center {
.top {
padding-top: calc(20 * 100vw / 1920);
display: flex;
justify-content: space-between;
align-items: center;
.left {
background: url("@/assets/image/box02@2x.png") no-repeat center;
background-size: 100% 100%;
width: calc(140 * 100vw / 1920);
height: calc(100 * 100vw / 1920);
.titleTop {
text-align: center;
font-family: PingFang SC, serif;
font-weight: 600;
font-size: calc(20 * 100vw / 1920);
color: #FFFFFF;
text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.titleCenter {
//text-align: center;
padding-left: calc(21 * 100vw / 1920);
font-family: PingFang SC, serif;
font-weight: 400;
font-size: calc(15 * 100vw / 1920);
color: #FFFFFF;
margin-top: calc(11 * 100vw / 1920);
span {
margin-left: calc(10 * 100vw / 1920);
font-size: calc(17 * 100vw / 1920);
}
.tex1 {
color: #F4AB09
}
.tex2 {
color: #1DFBD1;
}
}
}
.right {
background: url("@/assets/image/box03@2x.png") no-repeat center;
background-size: 100% 100%;
width: calc(480 * 100vw / 1920);
height: calc(110 * 100vw / 1920);
padding: calc(13 * 100vw / 1920) calc(35 * 100vw / 1920);
.rTop {
display: flex;
justify-content: space-between;
font-family: PingFang SC, serif;
font-weight: 600;
font-size: calc(20 * 100vw / 1920);
color: #FFFFFF;
text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.rTop-img {
width: calc(30 * 100vw / 1920);
height: calc(12 * 100vw / 1920);
}
}
.rBotton {
height: calc(60 * 100vw / 1920);
//overflow-y: scroll;
.row-text {
font-family: PingFang SC, serif;
font-weight: 400;
font-size: calc(17 * 100vw / 1920);
color: #FFFFFF;
height: calc(20 * 100vw / 1920);
margin: calc(8 * 100vw / 1920) 0;
span {
display: inline-block;
width: calc(12 * 100vw / 1920);
height: calc(12 * 100vw / 1920);
background-color: #01D7F0;
transform: rotate(45deg);
margin-left: calc(3 * 100vw / 1920);
border-radius: calc(3 * 100vw / 1920);
}
}
}
}
}
.bottom {
background: url("@/assets/image/box04@2x.png") no-repeat center;
background-size: 100% 100%;
margin-top: calc(20 * 100vw / 1920);
height: 76vh;
padding: calc(10 * 100vw / 1920);
}
}
.partA {
min-height: 340px;
height: 70vh;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!