修改首屏大图
This commit is contained in:
熊丽君
@ -1,232 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./conter2.jpg" style="width: 100%;height:100%">
|
||||
<rocketTit class="tit">今日动态</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div>收入</div>
|
||||
<div><span class="num">3380</span>万</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>支出</div>
|
||||
<div><span class="num">3380</span>万</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>合同</div>
|
||||
<div><span class="num">3380</span>份</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>装药任务</div>
|
||||
<div><span class="num">3380</span>件</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>职工出勤数</div>
|
||||
<div><span class="num">3380</span>人</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div>职工出勤数</div>
|
||||
<div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="con_right">
|
||||
<div class="con_title">
|
||||
<img src="./conter1-1.png" alt="">
|
||||
<span style="margin-left:2px">正在工作</span>
|
||||
</div>
|
||||
<div class="con_height"></div>
|
||||
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
|
||||
</div>
|
||||
<div class="con_right con_two">
|
||||
<div class="con_title">
|
||||
<img src="./conter1-1.png" alt="">
|
||||
<span>正在工作</span>
|
||||
</div>
|
||||
<div class="con_height"></div>
|
||||
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
|
||||
</div>
|
||||
<div class="con_left">
|
||||
<div class="con_left_title">
|
||||
<img src="./conter2-1.png" alt="">
|
||||
<div class="con_card">
|
||||
<div>
|
||||
<span>当日生产任务</span>
|
||||
<span>2890</span>
|
||||
</div>
|
||||
<div style="margin:7px 0">
|
||||
<span>正在执行中任务</span>
|
||||
<span>542</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>已完成</span>
|
||||
<span>2348</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con_h_two">
|
||||
<div class="con_bottom">
|
||||
<img src="./conter2-2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</container3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./conter.png" style="width: 100%; height: 100%" />
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><img src="./icon1.png" alt="" /><span>收入</span></div>
|
||||
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon2.png" alt="" /><span>利润</span></div>
|
||||
<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.png" alt="" /><span>装药量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon4.png" alt="" /><span>交付数量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="padding: 0 15px">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container3 from "../components/container3/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import container3 from '../components/container3/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
margin: 0 15px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
flex: 1;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container3{
|
||||
position: relative;
|
||||
.con_right{
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00FFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.con_title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height{
|
||||
width:2px;
|
||||
height:20px;
|
||||
background-color:#00FFFF;
|
||||
}
|
||||
}
|
||||
.con_two{
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left{
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img{
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title{
|
||||
position: relative;
|
||||
.con_card{
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1){
|
||||
opacity: .9;
|
||||
}
|
||||
span:nth-child(2){
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two{
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #FA8C16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom{
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%,-50%);
|
||||
img{
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.con_title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #00ffff;
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left {
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title {
|
||||
position: relative;
|
||||
.con_card {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #fa8c16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom {
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%, -50%);
|
||||
img {
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user