feat 1
This commit is contained in:
duanliang
@@ -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>
|
||||
</ul>
|
||||
<box4 />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
|
||||
import box4 from './components/box-4.vue'
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user