|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="centerImg"></div>
|
|
|
|
|
|
<BoardTopNav nowMenu="4"></BoardTopNav>
|
|
|
|
|
|
<div class="collapse">
|
|
|
|
|
|
<el-collapse v-model="activeName" accordion>
|
|
|
|
|
|
<el-collapse-item name="1">
|
|
|
|
|
|
<template slot="title">
|
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
|
<div class="title"> 大厅-摄像头</div>
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
|
|
|
<div class="info1">位置:</div>
|
|
|
|
|
|
<div class="info2">深圳</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
|
|
|
<div class="info1">日期:</div>
|
|
|
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-radio-group v-model="radio">
|
|
|
|
|
|
<el-radio-button label="日统计报表"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="月统计报表"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div style="position: absolute; right: 30px;">
|
|
|
|
|
|
<span style="color: #fff;"> 开始时间：</span>
|
|
|
|
|
|
<div style="display: inline-block;width: 200px;margin-right: 12px;">
|
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
|
<el-button>导出</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
|
:header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
|
|
|
|
|
|
:cell-style="setStyle">
|
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
<el-collapse-item name="2">
|
|
|
|
|
|
<template slot="title">
|
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
|
<div class="title"> 大厅-摄像头</div>
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
|
|
|
<div class="info1">位置:</div>
|
|
|
|
|
|
<div class="info2">深圳</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
|
|
|
<div class="info1">日期:</div>
|
|
|
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-radio-group v-model="radio">
|
|
|
|
|
|
<el-radio-button label="日统计报表"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="月统计报表"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div style="position: absolute; right: 30px;">
|
|
|
|
|
|
<span style="color: #fff;"> 开始时间：</span>
|
|
|
|
|
|
<div style="display: inline-block;width: 200px;margin-right: 12px;">
|
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
|
<el-button>导出</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
<el-collapse-item name="3">
|
|
|
|
|
|
<template slot="title">
|
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
|
<div class="title"> 大厅-摄像头</div>
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
|
|
|
<div class="info1">位置:</div>
|
|
|
|
|
|
<div class="info2">深圳</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
|
|
|
<div class="info1">日期:</div>
|
|
|
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-radio-group v-model="radio">
|
|
|
|
|
|
<el-radio-button label="日统计报表"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="月统计报表"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div style="position: absolute; right: 30px;">
|
|
|
|
|
|
<span style="color: #fff;"> 开始时间：</span>
|
|
|
|
|
|
<div style="display: inline-block;width: 200px;margin-right: 12px;">
|
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
|
<el-button>导出</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
<el-collapse-item name="4">
|
|
|
|
|
|
<template slot="title">
|
|
|
|
|
|
<div class="itemBg">
|
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
|
<div class="icon1"></div>
|
|
|
|
|
|
<div class="icon2"></div>
|
|
|
|
|
|
<div class="title"> 大厅-摄像头</div>
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="info1">所属区域</div>
|
|
|
|
|
|
<div class="info2">大厅</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 70vh;">
|
|
|
|
|
|
<div class="info1">位置:</div>
|
|
|
|
|
|
<div class="info2">深圳</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info" style="left: 80vh;">
|
|
|
|
|
|
<div class="info1">日期:</div>
|
|
|
|
|
|
<div class="info2">2023-01-01 00:00:00</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-radio-group v-model="radio">
|
|
|
|
|
|
<el-radio-button label="日统计报表"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="月统计报表"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<div style="position: absolute; right: 30px;">
|
|
|
|
|
|
<span style="color: #fff;"> 开始时间：</span>
|
|
|
|
|
|
<div style="display: inline-block;width: 200px;margin-right: 12px;">
|
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">搜索</el-button>
|
|
|
|
|
|
<el-button>重置</el-button>
|
|
|
|
|
|
<el-button>导出</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;margin-top: 12px;"
|
|
|
|
|
|
:header-cell-style="{ textAlign: 'center' }"
|
|
|
|
|
|
:cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
|
|
|
|
|
|
<el-table-column prop="date1" label="设备ID">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date2" label="传感器编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date3" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date4" label="编号">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date5" label="xx">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date6" label="温度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date7" label="湿度">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="date8" label="时间">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-pagination background layout="prev, pager, next" :total="1000">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
</el-collapse>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import BoardTopNav from '@/components/BoardTopNav'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
BoardTopNav
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
radio: '日统计报表',
|
|
|
|
|
|
tableData: [{
|
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
|
date4: '12',
|
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
|
date6: '111',
|
|
|
|
|
|
date7: '222',
|
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
|
}, {
|
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
|
date4: '12',
|
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
|
date6: '111',
|
|
|
|
|
|
date7: '222',
|
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
|
}, {
|
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
|
date4: '12',
|
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
|
date6: '111',
|
|
|
|
|
|
date7: '222',
|
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
|
}, {
|
|
|
|
|
|
date1: '1233454576',
|
|
|
|
|
|
date2: '1233454576',
|
|
|
|
|
|
date3: 'DFHDGHJK',
|
|
|
|
|
|
date4: '12',
|
|
|
|
|
|
date5: 'QSD',
|
|
|
|
|
|
date6: '111',
|
|
|
|
|
|
date7: '222',
|
|
|
|
|
|
date8: new Date().getDate(),
|
|
|
|
|
|
}]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
setStyle(e) {
|
|
|
|
|
|
if (e.rowIndex % 2 === 0) {
|
|
|
|
|
|
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
|
|
|
|
|
|
}else{
|
|
|
|
|
|
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.container {
|
|
|
|
|
|
background-image: url("~@/assets/board/senso/bg.jpg");
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100vh);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.collapse {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 9%;
|
|
|
|
|
|
left: 2%;
|
|
|
|
|
|
width: 96%;
|
|
|
|
|
|
height: 87%;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
|
|
/deep/.el-collapse-item__wrap {
|
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/.el-table {
|
|
|
|
|
|
background-color: #FFF0 !important;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/.el-table tr {
|
|
|
|
|
|
background-color: #FFF0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-table th.el-table__cell.is-leaf,{
|
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-table::before, .el-table--group::after, .el-table--border::after{
|
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
|
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-collapse-item__header {
|
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-collapse {
|
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table td.el-table__cell{
|
|
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th {
|
|
|
|
|
|
color: #05ecf3;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.itemBg {
|
|
|
|
|
|
background-image: url("~@/assets/board/senso/itemBg.png");
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 17vh;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
background-image: url("~@/assets/board/senso/iconBg.png");
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 2vh;
|
|
|
|
|
|
left: 5vh;
|
|
|
|
|
|
width: 13vh;
|
|
|
|
|
|
height: 13vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon1 {
|
|
|
|
|
|
background-image: url("~@/assets/board/senso/iconBottom.png");
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 2vh;
|
|
|
|
|
|
left: 5vh;
|
|
|
|
|
|
width: 13vh;
|
|
|
|
|
|
height: 13vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon2 {
|
|
|
|
|
|
background-image: url("~@/assets/board/senso/icon.png");
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 10vh;
|
|
|
|
|
|
width: 2.6vh;
|
|
|
|
|
|
height: 3.3vh;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 25vh;
|
|
|
|
|
|
color: #1fabf3;
|
|
|
|
|
|
line-height: 17vh;
|
|
|
|
|
|
font-size: 2.5vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 60vh;
|
|
|
|
|
|
color: #1fabf3;
|
|
|
|
|
|
font-size: 1.5vh;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
|
|
|
|
.info1 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 55%;
|
|
|
|
|
|
color: #fffc
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info2 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 55%;
|
|
|
|
|
|
color: #fff
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
