|
|
@@ -0,0 +1,814 @@
|
|
|
+<template>
|
|
|
+ <div class="main">
|
|
|
+ <img class="bgImg" src="@/assets/bgView/platformSystemBg.png" alt="">
|
|
|
+ <div class="header">
|
|
|
+ <img class="bgHeadImg" src="@/assets/bgView/headBg.png" alt="">
|
|
|
+ <div class="header-opt">
|
|
|
+ <div class="opt">标题222</div>
|
|
|
+ <div>标题222</div>
|
|
|
+ </div>
|
|
|
+ <div class="header-center">时代思康展示平台系统</div>
|
|
|
+ <div class="header-opt">
|
|
|
+ <div>标题222</div>
|
|
|
+ <div>标题222</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <a-icon type="clock-circle" />
|
|
|
+ <div>10:25:32</div>
|
|
|
+ <div class="date">
|
|
|
+ <div>2020-03-06</div>
|
|
|
+ <div>星期五</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="left">
|
|
|
+ <div>
|
|
|
+ <div class="title">
|
|
|
+ <span></span>
|
|
|
+ <div>维修统计</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart2" class="chart"></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="title">
|
|
|
+ <span></span>
|
|
|
+ <div>统计</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="statistics">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ <div class="statistics-list">
|
|
|
+ <div class="statistics-list-title">
|
|
|
+ <span>1</span>
|
|
|
+ 维修
|
|
|
+ </div>
|
|
|
+ <div class="statistics-list-info">
|
|
|
+ <div>数量：<span>90</span>/辆</div>
|
|
|
+ <div> 占比：<span>30</span>/%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ <div class="statistics-list">
|
|
|
+ <div class="statistics-list-title" style="color:#07C1FD">
|
|
|
+ <span style="background:#07C1FD;">1</span>
|
|
|
+ 计量
|
|
|
+ </div>
|
|
|
+ <div class="statistics-list-info">
|
|
|
+ <div>数量：<span style="color:#07C1FD">90</span>/个</div>
|
|
|
+ <div> 占比：<span style="color:#07C1FD">30</span>/%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ <div class="statistics-list">
|
|
|
+ <div class="statistics-list-title" style="color:#FFCD02">
|
|
|
+ <span style="background:#FFCD02">1</span>
|
|
|
+ 特种
|
|
|
+ </div>
|
|
|
+ <div class="statistics-list-info">
|
|
|
+ <div>数量：<span style="color:#FFCD02">90</span>/个</div>
|
|
|
+ <div> 占比：<span style="color:#FFCD02">30</span>/%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistics">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ <div class="statistics-list">
|
|
|
+ <div class="statistics-list-title" style="color:#FF5B01 ">
|
|
|
+ <span style="background:#FF5B01 ">1</span>
|
|
|
+ 隐患
|
|
|
+ </div>
|
|
|
+ <div class="statistics-list-info">
|
|
|
+ <div>数量：<span style="color:#FF5B01 ">90</span>/个</div>
|
|
|
+ <div> 占比：<span style="color:#FF5B01 ">30</span>/%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">
|
|
|
+ <span></span>
|
|
|
+ <div>报修统计</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart1" style="height:280px;"></div>
|
|
|
+ <div ref="chart3" style="height:270px;"></div>
|
|
|
+ <div class="title">
|
|
|
+ <span></span>
|
|
|
+ <div>报修统计</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart4" style="height:280px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <VueDragResize
|
|
|
+ v-for="(item,i) in lists"
|
|
|
+ :key="i"
|
|
|
+ :isActive="false"
|
|
|
+ :w="35"
|
|
|
+ :h="35"
|
|
|
+ :minh="20"
|
|
|
+ :x="item.x"
|
|
|
+ :y="item.y"
|
|
|
+ :isDraggable="false"
|
|
|
+ :isResizable="false"
|
|
|
+ :stickSize="5"
|
|
|
+ >
|
|
|
+ <div class="badge" @click="handleView(item)">
|
|
|
+ <a-badge :count="item.count" />
|
|
|
+ <div style="width:8px;height:8px;border-radius:50%;background:red;" />
|
|
|
+ </div>
|
|
|
+ </VueDragResize>
|
|
|
+ <VueDragResize
|
|
|
+ v-show="visible"
|
|
|
+ :isActive="true"
|
|
|
+ :w="540"
|
|
|
+ :h="420"
|
|
|
+ :minh="420"
|
|
|
+ :x="opt.x"
|
|
|
+ :y="opt.y"
|
|
|
+ :isDraggable="true"
|
|
|
+ :isResizable="false"
|
|
|
+ :stickSize="5"
|
|
|
+ >
|
|
|
+ <div class="detail">
|
|
|
+ <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
|
|
|
+ <div class="title">
|
|
|
+ <div>
|
|
|
+ <span></span>
|
|
|
+ <div>甲八车间</div>
|
|
|
+ </div>
|
|
|
+ <a-button type="link" @click="visible=false">
|
|
|
+ <a-icon type="close" style="color:#fff" />
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="detail-info">
|
|
|
+ <div class="detail-info-title">
|
|
|
+ <div>基本信息</div>
|
|
|
+ <div>查看更多</div>
|
|
|
+ </div>
|
|
|
+ <table class="tables">
|
|
|
+ <tr>
|
|
|
+ <td>设备名称:</td>
|
|
|
+ <td>异丙苯装置区</td>
|
|
|
+ <td>危险程度:</td>
|
|
|
+ <td>三级</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>设备名称:</td>
|
|
|
+ <td>异丙苯装置区</td>
|
|
|
+ <td>危险程度:</td>
|
|
|
+ <td>三级</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>设备名称:</td>
|
|
|
+ <td>异丙苯装置区</td>
|
|
|
+ <td>危险程度:</td>
|
|
|
+ <td>三级</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>设备名称:</td>
|
|
|
+ <td>异丙苯装置区</td>
|
|
|
+ <td>危险程度:</td>
|
|
|
+ <td>三级</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>设备名称:</td>
|
|
|
+ <td>异丙苯装置区</td>
|
|
|
+ <td>危险程度:</td>
|
|
|
+ <td>三级</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div class="detail-info-title">
|
|
|
+ <div>设备记录</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 设备设施
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 报警数据
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 巡检记录
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 应急预案
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 设备设施
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 报警数据
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 巡检记录
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 应急预案
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 设备设施
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 报警数据
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 巡检记录
|
|
|
+ </a-button>
|
|
|
+ <a-button ghost icon="search">
|
|
|
+ 应急预案
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </VueDragResize>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VueDragResize from 'vue-drag-resize'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VueDragResize
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ lists: [
|
|
|
+ {
|
|
|
+ x: 650,
|
|
|
+ y: 625,
|
|
|
+ count: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: 1310,
|
|
|
+ y: 440,
|
|
|
+ count: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: 680,
|
|
|
+ y: 460,
|
|
|
+ count: 7
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ opt: {
|
|
|
+ x: 750,
|
|
|
+ y: 625
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ chartData1: [
|
|
|
+ { name: '分类一', value: 27 },
|
|
|
+ { name: '分类二', value: 25 },
|
|
|
+ { name: '分类三', value: 18 },
|
|
|
+ { name: '分类四', value: 15 },
|
|
|
+ { name: '分类五', value: 10 },
|
|
|
+ { name: 'Other', value: 5 }
|
|
|
+ ],
|
|
|
+ chartData2: [
|
|
|
+ { name: '分类一', value: 27 },
|
|
|
+ { name: '分类二', value: 25 },
|
|
|
+ { name: '分类三', value: 18 },
|
|
|
+ { name: '分类四', value: 15 },
|
|
|
+ { name: '分类五', value: 10 },
|
|
|
+ { name: 'Other', value: 5 }
|
|
|
+ ],
|
|
|
+ colors: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#9a60b4', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.createChart1(this.chartData1)
|
|
|
+ this.createChart2(this.chartData2)
|
|
|
+ this.createChart3(this.chartData2)
|
|
|
+ this.createChart4(this.chartData2)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resizeImg (newRect) {
|
|
|
+ console.log(newRect)
|
|
|
+ },
|
|
|
+ handleView (val) {
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ createChart1 (data) {
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ item.label = { color: this.colors[index] }
|
|
|
+ })
|
|
|
+ const myChart = echarts.init(this.$refs.chart1)
|
|
|
+ const option = {
|
|
|
+ color: this.colors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Nightingale Chart',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [20, 80],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ roseType: 'area',
|
|
|
+ label: {
|
|
|
+ formatter: `{c}\n{b}`,
|
|
|
+ textBorderColor: '#000',
|
|
|
+ textBorderWidth: 0,
|
|
|
+ fontSize: 10,
|
|
|
+ overflow: 'breakAll',
|
|
|
+ labelLine: {
|
|
|
+ length: 3
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data: data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ option && myChart.setOption(option)
|
|
|
+ },
|
|
|
+ createChart2 (data) {
|
|
|
+ const myChart = echarts.init(this.$refs.chart2)
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ccc'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 3,
|
|
|
+ max: 40,
|
|
|
+ inRange: {
|
|
|
+ colorLightness: [0, 1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: data.sort(function (a, b) {
|
|
|
+ return a.value - b.value
|
|
|
+ }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255, 255, 0.3)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 10,
|
|
|
+ length2: 20
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#c23531',
|
|
|
+ shadowBlur: 200,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ option && myChart.setOption(option)
|
|
|
+ },
|
|
|
+ createChart3 (data) {
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ item.label = { color: this.colors[index] }
|
|
|
+ })
|
|
|
+ const myChart = echarts.init(this.$refs.chart3)
|
|
|
+ const option = {
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [120, 200, 150, 80, 70, 110],
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 14,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 7,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#4C68EB'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#01F4FF'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
+ { offset: 0, color: '#01F4FF' },
|
|
|
+ { offset: 1, color: '#4C68EB' }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: `{c}%`,
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ option && myChart.setOption(option)
|
|
|
+ },
|
|
|
+ createChart4 (data) {
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ item.label = { color: this.colors[index] }
|
|
|
+ })
|
|
|
+ const myChart = echarts.init(this.$refs.chart4)
|
|
|
+ const option = {
|
|
|
+ color: ['#FA742B', '#FFE434', '#56A3F1', '#FF917C'],
|
|
|
+ radar: [
|
|
|
+ {
|
|
|
+ indicator: [
|
|
|
+ { text: '分类1' },
|
|
|
+ { text: '分类2' },
|
|
|
+ { text: '分类3' },
|
|
|
+ { text: '分类4' },
|
|
|
+ { text: '分类5' }
|
|
|
+ ],
|
|
|
+ radius: 80,
|
|
|
+ startAngle: 90,
|
|
|
+ splitNumber: 4,
|
|
|
+ shape: 'circle',
|
|
|
+ axisName: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(211, 253, 250, 0.9)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(211, 253, 250, 0.9)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'radar',
|
|
|
+ emphasis: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: [60, 5, 0.3, -100, 500],
|
|
|
+ areaStyle: {
|
|
|
+ color: 'rgba(255, 228, 52, 0.6)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ option && myChart.setOption(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ background: #2b53ca;
|
|
|
+ box-shadow: 0px 0px 400px 200px #040C28 inset ;
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px;
|
|
|
+ color:#fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ .bgImg{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top:50%;
|
|
|
+ transform: translate(-50%,-40%);
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 37px;
|
|
|
+ .bgHeadImg{
|
|
|
+ position: absolute;
|
|
|
+ top:40%;
|
|
|
+ }
|
|
|
+ .header-center{
|
|
|
+ padding:30px 0;
|
|
|
+ }
|
|
|
+ .header-opt{
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ div{
|
|
|
+ margin:15px 50px;
|
|
|
+ padding:17px 40px;
|
|
|
+ width: 156px;
|
|
|
+ height: 54px;
|
|
|
+ background: url(~@/assets/bgView/titleListBg.png) no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opt{
|
|
|
+ color:#009EE9;
|
|
|
+ }
|
|
|
+}
|
|
|
+.time{
|
|
|
+ font-size: 24px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ top:90px;
|
|
|
+ z-index: 0;
|
|
|
+ .date{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.info{
|
|
|
+ margin:30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left, .right{
|
|
|
+ height: 880px;
|
|
|
+ width: 360px;
|
|
|
+ .title{
|
|
|
+ height: 50px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ width: 2px;
|
|
|
+ height: 23px;
|
|
|
+ background: #00E8E8;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ flex:1;
|
|
|
+ padding:5px;
|
|
|
+ margin-left:10px;
|
|
|
+ border-bottom:1px solid #384B7E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+.chart{
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
+.statistics{
|
|
|
+ position: relative;
|
|
|
+position: relative;
|
|
|
+height: 105px;
|
|
|
+background: rgba(4,12,40,0.4);
|
|
|
+margin: 20px 0;
|
|
|
+.statistics-list{
|
|
|
+ .statistics-list-title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ margin-right:10px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color:#000;
|
|
|
+ background:#0CFEB8;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistics-list-info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 12px;
|
|
|
+ color:#fff;
|
|
|
+ span{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #0CFEB8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ padding:20px;
|
|
|
+ font-size: 18px;
|
|
|
+ color:#0CFEB8;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+}
|
|
|
+ }
|
|
|
+}
|
|
|
+.detail{
|
|
|
+ width: 540px;
|
|
|
+height: 420px;
|
|
|
+background: #484848;
|
|
|
+opacity: 0.73;
|
|
|
+padding: 15px;
|
|
|
+.title{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ width: 10px;
|
|
|
+ height: 23px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background: #00E8E8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.detail-info{
|
|
|
+ margin-top:10px;
|
|
|
+ .detail-info-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #496CEC ;
|
|
|
+ font-size: 16px;
|
|
|
+font-weight: 400;
|
|
|
+color: #45E2F3;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin:10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+.top-left-two{
|
|
|
+ width: 30px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ border-top: 2px solid #02E8FF;
|
|
|
+ border-left: 2px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ .bottom-left-two{
|
|
|
+ width: 30px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ border-bottom: 2px solid #02E8FF;
|
|
|
+ border-left: 2px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2px;;
|
|
|
+ left: -2px;;
|
|
|
+ }
|
|
|
+ .top-right-two{
|
|
|
+ width: 100px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ border-top: 2px solid #02E8FF;
|
|
|
+ border-right: 2px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;;
|
|
|
+ right: -2px;;
|
|
|
+ }
|
|
|
+ .bottom-right-two {
|
|
|
+ width: 100px;
|
|
|
+ height: 15px;
|
|
|
+ display: block;
|
|
|
+ border-bottom: 2px solid #02E8FF;
|
|
|
+ border-right: 2px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2px;;
|
|
|
+ right: -2px;;
|
|
|
+ }
|
|
|
+ .top-left{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ border-top: 5px solid #02E8FF;
|
|
|
+ border-left: 5px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+ .bottom-left{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ border-bottom: 5px solid #02E8FF;
|
|
|
+ border-left: 5px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2px;;
|
|
|
+ left: -2px;;
|
|
|
+ }
|
|
|
+ .top-right{
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ border-top: 5px solid #02E8FF;
|
|
|
+ border-right: 5px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;;
|
|
|
+ right: -2px;;
|
|
|
+ }
|
|
|
+ .bottom-right {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ border-bottom: 5px solid #02E8FF;
|
|
|
+ border-right: 5px solid #02E8FF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -2px;;
|
|
|
+ right: -2px;;
|
|
|
+ }
|
|
|
+ .badge{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .tables{
|
|
|
+ margin: 10px auto;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ overflow-x:auto;
|
|
|
+ table {
|
|
|
+ min-width:100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #45E2F3;
|
|
|
+ border-radius: 6px;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-weight: 400;
|
|
|
+ table-layout:fixed;
|
|
|
+ }
|
|
|
+ tr {
|
|
|
+ height:26px;
|
|
|
+ }
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ border: 1px solid #45E2F3;
|
|
|
+ text-align: center;
|
|
|
+ padding: 3px 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
