feat 1
This commit is contained in:
duanliang
47
package-lock.json
generated
47
package-lock.json
generated
@@ -12,6 +12,7 @@
|
|||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"pinia": "^2.2.6",
|
"pinia": "^2.2.6",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-echarts": "^7.0.3",
|
||||||
"vue-router": "^4.4.5"
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -2313,6 +2314,7 @@
|
|||||||
"version": "5.5.1",
|
"version": "5.5.1",
|
||||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
|
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
|
||||||
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
|
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "2.3.0",
|
"tslib": "2.3.0",
|
||||||
"zrender": "5.6.0"
|
"zrender": "5.6.0"
|
||||||
@@ -4268,6 +4270,51 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-demi": {
|
||||||
|
"version": "0.13.11",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||||
|
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||||
|
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/antfu"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@vue/composition-api": "^1.0.0-rc.1",
|
||||||
|
"vue": "^3.0.0-0 || ^2.6.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/composition-api": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vue-echarts": {
|
||||||
|
"version": "7.0.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
|
||||||
|
"integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"vue-demi": "^0.13.11"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@vue/runtime-core": "^3.0.0",
|
||||||
|
"echarts": "^5.5.1",
|
||||||
|
"vue": "^2.7.0 || ^3.1.1"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@vue/runtime-core": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-router": {
|
"node_modules/vue-router": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"pinia": "^2.2.6",
|
"pinia": "^2.2.6",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
|
"vue-echarts": "^7.0.3",
|
||||||
"vue-router": "^4.4.5"
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
BIN
src/assets/images/t-ico-1.png
Normal file
BIN
src/assets/images/t-ico-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/assets/images/t-title-bg.png
Normal file
BIN
src/assets/images/t-title-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,329 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box-4-content">
|
||||||
|
<div class="content-1 content">
|
||||||
|
<!-- 1 -->
|
||||||
|
<div class="title">
|
||||||
|
游客画像
|
||||||
|
</div>
|
||||||
|
<!-- 2 -->
|
||||||
|
<div class="all-man">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<ul class="ul-1">
|
||||||
|
<li class="li ">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>年龄性别占比</span>
|
||||||
|
</div>
|
||||||
|
<div class="chart-1">
|
||||||
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
|
<span class="sky-1"></span>
|
||||||
|
</div>
|
||||||
|
<div class="li-man">总人数：123456</div>
|
||||||
|
</li>
|
||||||
|
<li class="li">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>客源分析TOP5</span>
|
||||||
|
</div>
|
||||||
|
<div class="press-box" v-for="item in 5" :key="i">
|
||||||
|
<div class="press-title">
|
||||||
|
<span>河北</span>
|
||||||
|
<span>55%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-box">
|
||||||
|
<div class="bg-width"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="li">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>购票来源</span>
|
||||||
|
</div>
|
||||||
|
<div class="round-press">
|
||||||
|
<div class="round-1">
|
||||||
|
<div class="round-width"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-chart class="chart" :option="option2" autoresize />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="content-2 content">
|
||||||
|
<!-- 1 -->
|
||||||
|
<div class="title">
|
||||||
|
停车信息
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="ul-1">
|
||||||
|
<li class="li">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>年龄性别占比</span>
|
||||||
|
</div>
|
||||||
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
|
<div class="li-man">总人数：123456</div>
|
||||||
|
</li>
|
||||||
|
<li class="li">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>客源分析TOP5</span>
|
||||||
|
</div>
|
||||||
|
<div class="press-box" v-for="item in 5" :key="i">
|
||||||
|
<div class="press-title">
|
||||||
|
<span>河北</span>
|
||||||
|
<span>55%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-box">
|
||||||
|
<div class="bg-width"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="li">
|
||||||
|
<div class="li-title">
|
||||||
|
<span>购票来源</span>
|
||||||
|
</div>
|
||||||
|
<div class="round-press">
|
||||||
|
<div class="round-1">
|
||||||
|
<div class="round-width"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-chart class="chart" :option="option2" autoresize />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { GaugeChart } from 'echarts/charts';
|
||||||
|
import { PieChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||||
|
import { ref, provide } from 'vue';
|
||||||
|
|
||||||
|
use([
|
||||||
|
GaugeChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
]);
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
|
||||||
|
const option1 = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
width:300,
|
||||||
|
height:100,
|
||||||
|
type: 'pie',
|
||||||
|
left:-50,
|
||||||
|
top:10,
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: true,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 200, name: '30-40%' },
|
||||||
|
{ value: 500, name: '19岁以下' },
|
||||||
|
{ value: 234, name: '18-30岁' },
|
||||||
|
{ value: 135, name: '60岁以上' },
|
||||||
|
{ value: 100, name: '30-40岁' },
|
||||||
|
],
|
||||||
|
labelLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const option2 = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-4-content{
|
||||||
|
width:vw(792);
|
||||||
|
height:vh(976);
|
||||||
|
background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
|
||||||
|
// background: green;
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
.content-2{
|
||||||
|
.all-2-infor{
|
||||||
|
|
||||||
|
.box-1{
|
||||||
|
display: flex;
|
||||||
|
width:vw(384);
|
||||||
|
height: vh(70);
|
||||||
|
background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||||
|
.info1{
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.t-ico-1{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.t-ico-1{
|
||||||
|
width:vw(45);
|
||||||
|
height:vh(47);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
.title{
|
||||||
|
width: vw(220);
|
||||||
|
height: vh(32);
|
||||||
|
line-height: vh(32);
|
||||||
|
background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
|
||||||
|
font-size:vw(16);
|
||||||
|
text-align: center;
|
||||||
|
margin: vh(20) auto;
|
||||||
|
}
|
||||||
|
.ul-1{
|
||||||
|
display:flex;
|
||||||
|
.chart-1{
|
||||||
|
width:vw(253);
|
||||||
|
height:vh(150);
|
||||||
|
position: relative;
|
||||||
|
.sky-1{
|
||||||
|
position: absolute;
|
||||||
|
top:vw(60);
|
||||||
|
left:50%;
|
||||||
|
width:vw(30);
|
||||||
|
height:vw(30);
|
||||||
|
transform: translate(-50%);
|
||||||
|
background-color: #00B1FF;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.li{
|
||||||
|
width:vw(253);
|
||||||
|
height:vh(225);
|
||||||
|
margin-right:vw(10);
|
||||||
|
background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||||
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||||
|
.li-man{
|
||||||
|
font-size:vw(14);
|
||||||
|
color:#fff;
|
||||||
|
margin:0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.round-press{
|
||||||
|
|
||||||
|
}
|
||||||
|
.press-box{
|
||||||
|
padding:vw(5) vw(10);
|
||||||
|
// margin-bottom:vh(10);
|
||||||
|
.press-title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color:rgba(255,255,255,0.9);
|
||||||
|
font-size:vw(12);
|
||||||
|
margin-bottom:vh(10)
|
||||||
|
}
|
||||||
|
.bg-box{
|
||||||
|
width: 100%;
|
||||||
|
height: vw(10);
|
||||||
|
background: rgba(0,150,255,0.15);
|
||||||
|
border-radius: vw(5);
|
||||||
|
}
|
||||||
|
.bg-width{
|
||||||
|
background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
|
||||||
|
border-radius: vw(5);
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
width:50%;
|
||||||
|
height:100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bg-width::before{
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
width:vw(10);
|
||||||
|
height:vw(10);
|
||||||
|
// border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
right:0;
|
||||||
|
top:0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: vw(10) solid red;
|
||||||
|
// border-right-width: vw(10);
|
||||||
|
// border-bottom-width: vw(10);
|
||||||
|
// border-left-width: vw(10);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-title{
|
||||||
|
background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
|
||||||
|
span{
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
|
||||||
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(18);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left:vw(20);
|
||||||
|
margin-bottom:vh(10);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-1-echat{
|
||||||
|
position: relative;
|
||||||
|
.sty-1{
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
width:50rpx;
|
||||||
|
height:50rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
// width: 100%;
|
||||||
|
// height: 300px;
|
||||||
|
.chart {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
width: vw(253);
|
||||||
|
height: vh(120);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -8,13 +8,14 @@
|
|||||||
<li></li>
|
<li></li>
|
||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<box4 />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import box1 from './components/box-1.vue'
|
import box1 from './components/box-1.vue'
|
||||||
|
import box4 from './components/box-4.vue'
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user