williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

安全管理-1

Browse Source
This commit is contained in:
熊丽君
2021-12-09 16:24:48 +08:00
parent c75d598a04
commit 3796e257e6
37 changed files with 2941 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/views/bigScreen/securityManage/center2.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div>
<container4 title="今日动态">
<vue-seamless-scroll
:data="listData"
class="warp"
:class-option="{
singleHeight: 42,
}"
>
<ul class="item">
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/1.png" />今日收入</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/2.png" />今日支出</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/3.png" />今日新签合同</el-col>
<el-col :span="5">1234份</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/4.png" />今日安全问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/5.png" />今日质量问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/6.png" />今日设备数</el-col>
<el-col :span="5">123台</el-col>
<el-col :span="7">运行率：88%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/7.png" />今日职工数</el-col>
<el-col :span="5">890人</el-col>
<el-col :span="7">出勤率：73%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/8.png" />今日生产任务</el-col>
<el-col :span="5">890个</el-col>
<el-col :span="7">完成率：66%</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</container4>
</div>
</template>
<script>
import container4 from './components/container4/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
mixins: [resize],
name: 'left1',
components: {
container4,
rocketTit,
vueSeamlessScroll,
},
data() {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
}
},
mounted() {},
beforeDestroy() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.tit {
padding: 16px 24px;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.data {
display: flex;
margin: 0 15px;
background: rgba(2, 18, 63, 0.4);
color: #ffffff;
font-size: 18px;
.data-item {
flex: 1;
> div {
margin: 5px 0;
text-align: center;
}
.num {
font-size: 28px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: 600;
color: #55c5a2;
vertical-align: sub;
padding-right: 3px;
}
}
}
.warp {
height: 280px;
width: 440px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 30px;
line-height: 30px;
background: rgba(2, 18, 63, 0.33);
padding-left: 20px;
margin: 5px 0;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
</style>