Skip to content

Q
qsh-wc
Commit 462e8ad2 authored by mahui's avatar mahui
Browse files
Options

init

parent 3d013f62
Hide whitespace changes
Inline Side-by-side
Showing with 787 additions and 175 deletions
pc/public/echarts.min.js 0 → 100644
View file @ 462e8ad2
This source diff could not be displayed because it is too large. You can view the blob instead.
pc/public/index.html
View file @ 462e8ad2
......@@ -8,6 +8,10 @@
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<script src="./echarts.min.js">
</script>
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=fklOeUwr7Y1amxhGFZL8lvE6QvIKpGNi&callback=initialize">
</script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
pc/src/assets/fonts/icomoon.svg
View file @ 462e8ad2
......@@ -36,4 +36,5 @@
<glyph unicode="&#xe91a;" glyph-name="27" d="M0.030 448.294l416.786 416.786 77.706-77.706-416.786-416.786-77.706 77.706zM77.726 526.001l416.786-416.786-77.706-77.706-416.786 416.786 77.706 77.706zM153.7 494.854h868.951v-109.893h-868.951v109.893z" />
<glyph unicode="&#xe91b;" glyph-name="28" d="M1022.667 448.335l-416.786-416.786-77.706 77.706 416.786 416.786 77.706-77.706zM944.971 370.618l-416.786 416.786 77.706 77.706 416.786-416.786-77.706-77.706zM868.951 401.745h-868.951v109.893h868.951v-109.893z" />
<glyph unicode="&#xe91c;" glyph-name="29" horiz-adv-x="835" d="M417.31-64.008l-417.336 417.336 77.808 77.808 417.336-417.336-77.808-77.808zM339.501 13.801l417.336 417.336 77.808-77.808-417.336-417.336-77.808 77.808zM370.727 89.903v870.097h110.038v-870.097h-110.038z" />
<glyph unicode="&#xe91d;" glyph-name="30" d="M511.959 960c-282.712-0.046-511.878-229.241-511.878-511.959 0-282.747 229.212-511.959 511.959-511.959s511.959 229.212 511.959 511.959v0c-0.046 282.757-229.277 511.959-512.041 511.959v0zM511.959 799.376c108.073 0 195.684-87.611 195.684-195.684s-87.611-195.684-195.684-195.684c-108.073 0-195.684 87.611-195.684 195.684v0c0 108.073 87.611 195.684 195.684 195.684v0zM511.959 56.509c-0.016 0-0.035 0-0.054 0-123.032 0-232.755 56.985-304.214 146l-0.592 0.763c72.128 89.679 181.849 146.585 304.86 146.585s232.732-56.906 304.272-145.829l0.588-0.756c-72.021-89.777-181.719-146.763-304.728-146.763-0.046 0-0.093 0-0.139 0h0.007z" />
</font></defs></svg>
\ No newline at end of file
pc/src/assets/icons.css
View file @ 462e8ad2
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?e6yl7u');
src: url('fonts/icomoon.eot?e6yl7u#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?e6yl7u') format('truetype'),
url('fonts/icomoon.woff?e6yl7u') format('woff'),
url('fonts/icomoon.svg?e6yl7u#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ecryv7');
src: url('fonts/icomoon.eot?ecryv7#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ecryv7') format('truetype'),
url('fonts/icomoon.woff?ecryv7') format('woff'),
url('fonts/icomoon.svg?ecryv7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-1:before {
content: "\e900";
content: "\e900";
}
.icon-2:before {
content: "\e901";
content: "\e901";
}
.icon-3:before {
content: "\e902";
content: "\e902";
}
.icon-4:before {
content: "\e903";
content: "\e903";
}
.icon-5:before {
content: "\e904";
content: "\e904";
}
.icon-6:before {
content: "\e905";
content: "\e905";
}
.icon-7:before {
content: "\e906";
content: "\e906";
}
.icon-8:before {
content: "\e907";
content: "\e907";
}
.icon-9:before {
content: "\e908";
content: "\e908";
}
.icon-10:before {
content: "\e909";
content: "\e909";
}
.icon-11:before {
content: "\e90a";
content: "\e90a";
}
.icon-12:before {
content: "\e90b";
content: "\e90b";
}
.icon-13:before {
content: "\e90c";
content: "\e90c";
}
.icon-14:before {
content: "\e90d";
content: "\e90d";
}
.icon-15:before {
content: "\e90e";
content: "\e90e";
}
.icon-16:before {
content: "\e90f";
content: "\e90f";
}
.icon-17:before {
content: "\e910";
content: "\e910";
}
.icon-18:before {
content: "\e911";
content: "\e911";
}
.icon-19:before {
content: "\e912";
content: "\e912";
}
.icon-20:before {
content: "\e913";
content: "\e913";
}
.icon-21:before {
content: "\e914";
content: "\e914";
}
.icon-22:before {
content: "\e915";
content: "\e915";
}
.icon-23:before {
content: "\e916";
content: "\e916";
}
.icon-24:before {
content: "\e917";
content: "\e917";
}
.icon-25:before {
content: "\e918";
content: "\e918";
}
.icon-26:before {
content: "\e919";
content: "\e919";
}
.icon-27:before {
content: "\e91a";
content: "\e91a";
}
.icon-28:before {
content: "\e91b";
content: "\e91b";
}
.icon-29:before {
content: "\e91c";
content: "\e91c";
}
.icon-30:before {
content: "\e91d";
}
pc/src/store/modules/app.js
View file @ 462e8ad2
......@@ -8,10 +8,7 @@ export const useStore = defineStore('app',{
},
info:{
username:'银河环卫工',
area:{
areaName:'青山湖街道'
}
username:'admin'
},
tabs:[
{
......
pc/src/utils/weather.js 0 → 100644
View file @ 462e8ad2
import axios from 'axios'
import { ref } from 'vue'
const weatherInfo = ref('');
const amapKey = '89e4bcbcfe9cbe7560782e22719d31a6';
export const useWeatherInfo = () => {
ip();
return weatherInfo
};
export const ip = async() => {
// key换成你自己的 https://console.amap.com/dev/index
if (amapKey === '') {
return false
}
const res = await axios.get('https://restapi.amap.com/v3/ip?key=' + amapKey)
if (res.data.adcode) {
getWeather(res.data.adcode)
}
};
const getWeather = async(code) => {
const response = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=' + amapKey + '&extensions=base&city=' + code)
if (response.data.status === '1') {
const s = response.data.lives[0];
// weatherInfo.value = s.city + ' 天气：' + s.weather + ' 温度：' + s.temperature + '摄氏度 风向：' + s.winddirection + ' 风力：' + s.windpower + '级 空气湿度：' + s.humidity
weatherInfo.value = s.weather
}
};
pc/src/views/home.vue
View file @ 462e8ad2
<template>
<div class="home">
<div class="top">
<div class="left">
<span class="time">{{time.split(' ')[0]}}</span>
<span class="date">{{time.split(' ')[1]}}</span>
</div>
<div class="right">
<div class="weather">
<img class="weather-logo" :src="weatherChange(weather)" alt="">
<span class="weather-text" >{{weather}}</span>
</div>
<div class="user">
<p class="icon-30 user-logo"></p>
<p class="user-name">{{user.username}}</p>
</div>
</div>
</div>
<div class="bottom">
<div class="body">
<div id="container"></div>
</div>
<div class="logo">@浙江丹靓环境工程有限公司</div>
<transition name="el-zoom-in-bottom">
<order-detail v-model="show" v-if="show" :order_id="order_id"></order-detail>
</transition>
</div>
</template>
<script>
import {reactive,toRefs,defineComponent,onMounted,computed} from 'vue'
import {reactive,toRefs,defineComponent,defineAsyncComponent,onMounted,computed,nextTick} from 'vue'
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import api from "@/api/methods/index"
import myPublic from "@/utils/public"
import {useStore} from '@/store/modules/app';
import { useWeatherInfo } from '@/utils/weather.js'
export default defineComponent({
name: "home",
setup(props, ctx) {
const router = useRouter();
const store = useStore();
const weather = useWeatherInfo();
const state = reactive({
count:100,
now:myPublic.dateFormat.format(Date.now(), 'YYYY-MM-DD'),
list:[]
map:null,
timer:null,
show:true,
order_id:'',
time:myPublic.dateFormat.format(Date.now(), 'HH:mm:ss YYYY年MM月DD日'),
list:[
{
longitude:119.779647,
latitude:30.24369,
name:'青山湖国家森林公园',
address:'浙江省杭州市临安区老圣园路北',
type:1
},
{
longitude:119.821796,
latitude:30.254114,
name:'青山湖街道',
address:'浙江省杭州市临安区',
type:1
},
{
longitude:119.790127,
latitude:30.255317,
name:'灵山',
address:'浙江省杭州市临安区',
type:2
},
{
longitude:119.852565,
latitude:30.2528,
name:'青山湖互通',
address:'浙江省杭州市临安区',
type:1
},
{
longitude:119.823904,
latitude:30.24808,
name:'青山中学',
address:'浙江省杭州市临安区',
type:1
},
]
});
const user = computed(()=>{
return store.info;
});
function initMap(){
state.map = new BMapGL.Map("container");
const point = new BMapGL.Point(119.779647,30.24369);
state.map.centerAndZoom(point, 15);
state.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
state.map.setMapStyleV2({
styleId: '4cb2a842cb0d5506df9020a9afc02a39'
});
getList();
}
function getList() {
for (let item of state.list) {
const marker = new BMapGL.Point(item.longitude, item.latitude);
mapShow(marker, item, function (i) {
});
}
}
function mapShow(coordinate, item, callBack) {
const now = Date.now();
let str = `<img src="${require("@/assets/img/e.png")}" />`;
str += `<p style="font-weight: 700">${item.name}${typeChange(item.type)}</p>`;
str += `<p>位置：${item.address}</p>`;
str += `<p id="${now}" style="color: #3396fb;cursor: pointer" onclick="">查看详情<span class="icon-4"></span></p>`;
const url = require(`@/assets/img/type-${item.type}.png`);
let myIcon = new BMapGL.Icon(url, new BMapGL.Size(51, 76), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(25, 76),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
// imageOffset: new BMap.Size(0, 0 - 81) // 设置图片偏移
});
let marker = new BMapGL.Marker(coordinate, {icon: myIcon});
state.map.addOverlay(marker); // 将标注添加到地图中
const infoOpts = {
width : 235, // 信息窗口宽度
height: 210, // 信息窗口高度
title : '' , // 信息窗口标题
message:"",
offset:new BMapGL.Size(0, -50)
};
const infoWindow = new BMapGL.InfoWindow(str, infoOpts); // 创建信息窗口对象
marker.addEventListener("click", function(){
state.map.openInfoWindow(infoWindow, coordinate); //开启信息窗口
});
infoWindow.addEventListener("open", function(e){
//开启信息窗口
document.getElementById(now).addEventListener("click", ()=>seeDetail(item));
});
infoWindow.addEventListener("close", function(e){
//开启信息窗口
document.getElementById(now).removeEventListener("click", ()=>seeDetail(item));
});
callBack(marker);
}
function typeChange(type=1){
switch (type) {
case 1:
return `<span style="display: inline-flex;line-height:20px;color:#fff;background-color: #fb6104;border-radius: 16px;padding:0 10px;margin-left:10px;font-weight: normal;font-size: 12px">有动力</span>`;
case 2:
return `<span style="display: inline-flex;line-height:20px;color:#fff;background-color: #c7ab97;border-radius: 16px;padding:0 10px;margin-left:10px;font-weight: normal;font-size: 12px">无动力</span>`;
}
}
function weatherChange(w) {
if (w.indexOf('晴')>=0) {
return require('@/assets/img/晴.png')
}
if (w.indexOf('多云')>=0) {
return require('@/assets/img/多云.png')
}
if (w.indexOf('雪')>=0) {
return require('@/assets/img/雪.png')
}
if (w.indexOf('雨')>=0) {
return require('@/assets/img/雨.png')
}
if (w.indexOf('阴')>=0) {
return require('@/assets/img/阴.png')
}
}
function seeDetail(item){
state.show = true;
state.order_id = item.order_id||'12';
}
onMounted(()=>{
nextTick(()=>{
initMap();
state.timer = setInterval(() => {
state.time = myPublic.dateFormat.format(Date.now(), 'HH:mm:ss YYYY年MM月DD日');
}, 1000)
});
});
return {
...toRefs(state),
weather,
weatherChange,
user
};
},
beforeRouteLeave(to,from,next){
clearInterval(this.timer);
next();
},
components:{
orderDetail:defineAsyncComponent(()=>import("@/views/order-detail.vue"))
}
})
</script>
<style scoped lang="less">
.home{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
.top{
flex: 1;
position: absolute;
top: 0;
left: 0;
width:100%;
height: 120px;
background: url('../assets/img/top.png') no-repeat center/cover;
z-index: 10;
display: flex;
flex-direction: column;
overflow: hidden;
.card{
flex-shrink: 0;
display: flex;
justify-content: space-around;
background-color: #fff;
border-radius: .08rem;
box-shadow: 0 0 .2rem rgba(0,0,0,.3);
margin: .6rem .25rem 0 .25rem;
padding: .2rem .1rem;
.card-one{
position: relative;
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
.box{
position: relative;
display: flex;
justify-content: center;
.badge{
position: absolute;
top: -5%;
left: 85%;
color: #fff;
background-color: #ff5048;
padding:0 .01rem;
font-size: .14rem;
line-height: .24rem;
height:.24rem;
z-index: 1;
&:before{
content:'';
position: absolute;
top: 0;
left: -.11rem;
width: .12rem;
height: .24rem;
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
background-color: #ff5048;
z-index: 0;
}
&:after{
content:'';
position: absolute;
top: 0;
right: -.11rem;
width: .12rem;
height: .24rem;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background-color: #ff5048;
z-index: 0;
}
}
.card-img{
width: .6rem;
height: .6rem;
}
}
.card-name{
margin-top: .1rem;
font-size: .16rem;
}
justify-content: space-between;
.left{
display: inline-flex;
align-items: center;
height: 80px;
color: #fff;
margin-left: 2%;
.time{
font-size: 24px;
margin-right: 15px;
}
}
.calendar{
flex-shrink: 0;
}
.list{
flex: 1;
background-color: #f2f5f7;
overflow-y: auto;
padding: .1rem .1rem 0 .1rem;
.list-one{
display: flex;
flex-direction: column;
border-radius: .04rem;
background-color: #fff;
margin-bottom:.1rem;
padding: .1rem;
.list-title{
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #333;
margin-bottom:.1rem;
font-size: .18rem;
font-weight: bolder;
.right{
display: inline-flex;
align-items: center;
height: 80px;
color: #fff;
margin-right: 2%;
.weather{
display: inline-flex;
align-items: center;
color: #fff;
.weather-logo{
margin-right: 10px;
}
.list-bottom{
display: flex;
align-items: center;
overflow: hidden;
.icon{
width: fit-content;
display: flex;
color: #b2b2b2;
margin-right: .1rem;
overflow: hidden;
span{
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #666666;
margin-left: .05rem;
font-size: .14rem;
}
}
.weather-text{
font-size: 16px;
}
&:active{
opacity: .8;
margin-right: 20px;
}
.user{
text-align: center;
.user-logo{
font-size: 18px;
}
}
}
}
.bottom{
flex-shrink: 0;
height: .5rem;
.body{
flex: 1;
#container{
width: 100%;
height: 100%;
}
}
.logo{
position: absolute;
bottom: 22px;
right: 24px;
color: #fff;
z-index: 10;
}
}
</style>
pc/src/views/order-detail.vue 0 → 100644
View file @ 462e8ad2
<template>
<div class="order-detail">
<div class="detail-header">
<span class="detail-title">公厕点位详情【{{detail.name}}】</span>
<span class="btn" @click="close">退出</span>
</div>
<div class="tabs">
<span class="tab-one" :class="{selected:tab==item.value}" v-for="(item,index) in tabs" :key="index"
@click="tabActive(item)">{{item.name}}</span>
</div>
<div class="detail-body">
<div class="body-one">
<div class="poster">
<div class="blur-mask" :style="`background-image:url('${detail.poster[detail.index]}')`"></div>
<div class="banner">
<el-carousel :interval="5000" arrow="never" style="height: 480px;"
@change="(val)=>{detail.index=val}">
<el-carousel-item style="height: 480px;" v-for="item in detail.poster" :key="item">
<div class="banner-bg" :style="`background-image:url('${item}')`"></div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="info">
<p class="info-title">公厕点位基本信息</p>
<div class="info-content">
<div class="table">
<div class="table-left">
<div class="table-row">
<div class="table-header-cell cell">
点位名称
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
公厕类型
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
管理人员
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
联系电话
</div>
<div class="table-content-cell cell">
</div>
</div>
<div class="table-row">
<div class="table-header-cell cell">
地址
</div>
<div class="table-content-cell cell">
</div>
</div>
</div>
<div class="table-right">
<div class="table-row">
<div class="table-header-cell cell">
液位
</div>
<div class="table-content-cell cell">
<div class="chart" ref="chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import {ref,reactive, toRefs, onMounted,nextTick} from "vue"
import {ElMessage} from "element-plus"
import api from "@/api/methods/index"
export default {
name: 'order-detail',
emits: ['update:modelValue'],
props: {
modelValue: {
type: Boolean,
default: false
},
order_id: {
type: String,
default: ''
},
},
setup(props, {emit}) {
const state = reactive({
detail: {
name: '三号路公共厕所GC-004',
poster: [
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
require("@/assets/img/banner-1.png"),
],
index: 0,
yewei:0.7
},
tabs: [
{
name: '点位基本信息',
value: 'base'
},
{
name: '历史数据',
value: 'history'
},
{
name: '监控画面',
value: 'monitor'
},
{
name: '工艺流程',
value: 'process'
},
{
name: '巡检工单',
value: 'order'
},
],
tab: 'base',
myChart:null
});
const chart = ref(null);
function getDetail() {
}
function close() {
emit('update:modelValue', false);
}
function tabActive(item) {
if (state.tab != item.value) {
state.tab = item.value;
}
}
function initGauge(){
state.myChart = echarts.init(chart.value);
let option = {
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18,
itemStyle:{
color:'#3396fb',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '60%',
offsetCenter: [0, '8%']
},
itemStyle:{
color:'#3396fb'
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: true,
distance: 0,
},
splitLine: {
distance: 5,
length: 8,
lineStyle: {
width: 1,
color: '#999'
}
},
axisLabel: {
distance: 22,
color: '#999',
fontSize: 12
},
anchor: {
show: true,
showAbove: true,
size: 20,
itemStyle: {
borderWidth: 4,
borderColor: '#3396fb',
color:'#fff',
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 24,
offsetCenter: [0, '85%'],
formatter(p){
return `{a|${p}m}\n{b|液位}`
},
rich: {
a: {
color: '#333',
lineHeight: 20,
fontSize:18
},
b: {
color: '#666',
lineHeight: 20,
fontSize:14
}
}
},
data: [
{
value: state.detail.yewei
}
],
radius:"95%",
max:1
}
]
};
state.myChart.setOption(option);
}
onMounted(async () => {
getDetail();
await nextTick(()=>{
initGauge();
})
});
return {
...toRefs(state),
close,
tabActive,
chart
}
},
components: {}
}
</script>
<style lang="less">
.order-detail {
position: absolute;
width: 100%;
height: 100%;
-webkit-user-select: none;
background-color: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 11;
.detail-header {
flex-shrink: 0;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #2d71e2;
color: #fff;
padding: 0 30px 0 20px;
.detail-title {
font-size: 20px;
}
.btn {
width: 80px;
line-height: 36px;
text-align: center;
background-color: #6c9ef1;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
&:hover {
opacity: .8;
}
}
}
.tabs {
flex-shrink: 0;
padding: 0 40px;
.tab-one {
display: inline-flex;
align-items: center;
height: 70px;
color: #666;
cursor: pointer;
padding: 0 10px;
}
.selected {
position: relative;
color: #3396fb;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #3396fb;
}
}
}
.detail-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ebedef;
padding: 20px;
.body-one {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #fff;
padding: 20px;
border-radius: 6px;
.poster {
flex-shrink: 0;
position: relative;
overflow: hidden;
.banner {
position: relative;
height: 480px;
z-index: 3;
.banner-bg {
display: block;
width: 1140px;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
}
}
.blur-mask {
position: absolute;
width: 100%;
display: block;
height: 480px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: blur(5px);
z-index: 2;
}
}
.info {
flex: 1;
display: flex;
flex-direction: column;
background-color: #fff;
padding-top: 10px;
overflow: hidden;
.info-title {
flex-shrink: 0;
font-weight: bolder;
padding: 15px 0;
}
.info-content{
flex: 1;
overflow-y: auto;
.table {
flex-shrink: 0;
display: flex;
.table-left, .table-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
.table-header-cell {
min-width: 120px;
max-width: 180px;
font-weight: bolder;
}
.table-content-cell {
flex: 1;
min-width: 120px;
}
}
.table-right {
border-left: none
}
.table-row {
height: 100%;
display: flex;
overflow: hidden;
&:nth-child(even) {
background-color: #f7f8f8;
}
}
.cell {
display: inline-flex;
align-items: center;
min-height: 45px;
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 0 14px;
}
.chart{
flex: 1;
height: 100%;
}
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment