root/kanban-hl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式

Browse Source
This commit is contained in:
caill
2023-04-14 16:01:35 +08:00
parent db4c4e0d83
commit 6a008d923a
2 changed files with 286 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/pages/management/TuiWan.vue
View File

@@ -10,7 +10,36 @@
<div class="item_tip_left">盘管下料</div>
</div>
<div class="item_content item_content_1">
<div class="item_wrap_l item_wrap_flex">
<div class="top_item_content_wrap">
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color1"></i></span>
<span>双斜切计划</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>100</span>
<span>个</span>
</div>
</div>
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color2"></i></span>
<span>已生产</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>200</span>
<span>个</span>
</div>
</div>
</div>
<div class="progress_wrap">
<div class="progress_txt_wrap">进度</div>
<div class="progress_line_wrap">
<div class="progress_line" style="width: 50%">100</div>
<div class="progress_line progress_line_r" style="width: 50%">50</div>
</div>
</div>
<!-- <div class="item_wrap_l item_wrap_flex">
<div class="item_td_box">
<div class="item_td_inner">
<div class="item_td_txt1">计划生产</div>
@@ -26,7 +55,7 @@
<div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@@ -503,12 +532,12 @@ export default {
_wh(100%, .38rem)
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
.fir_wrap
_wh(100%, 25%)
_wh(100%, 15%)
.sec_wrap
_wh(100%, 35%)
clear both
.bottom_wrap
_wh(100%, calc(40% - .3rem))
_wh(100%, calc(50% - .3rem))
margin-top .3rem
.left_wrap
float left
@@ -520,8 +549,6 @@ export default {
_wh(100%, 50%)
.item_wrap_l
_wh(100%, 100%)
.item_wrap_flex
_fj(flex-start)
.item_tip
_wh(100%, .32rem)
line-height .32rem
@@ -540,39 +567,17 @@ export default {
_wh(100%, calc(100% - .32rem))
padding .17rem .17rem .24rem .17rem
background-color #011834
.item_content_1
clear both
.item_td_box_l
float left
_wh(50%, 100%)
padding-right .5rem
padding-right .3rem
_fj()
.item_td_box_r
float right
_wh(50%, 100%)
padding-left .5rem
padding-left .3rem
_fj()
background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
.item_td_box
width auto
_fj()
.item_td_inner
_wh(1.8rem, .7rem)
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
padding .05rem
&:nth-child(2)
margin-left .2rem
.item_td_txt1
font-family "SourceHanSansCN"
_font(.14rem, .3rem, #78b1de,bold,center)
.item_td_txt2
font-family "SourceHanSansCN"
_font(.18rem, .3rem, #fff,bold,center)
span
font-size .12rem
padding 0 .05rem
.echart_zpg_wrap_1
_wh(80%, 80%)
.item_td_box_1
_wh(1.6rem, 1.6rem)
_fj(center, center)
@@ -624,7 +629,7 @@ export default {
_wh(100%, .44rem)
.scroll-ul_1_div
float left
_font(.18rem, .44rem, #fff,,center)
_font(.14rem, .44rem, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
@@ -683,4 +688,73 @@ export default {
left 25%
_wh(7px, 7px)
border-radius 50%
.top_item_content_wrap
width 50%
_fj()
.top_item_content_wrap_item
_wh(50%, .4rem)
_fj()
background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
padding-right .4rem
.color1
background-color #07E083
.color2
background-color #B68845
.top_item_content_wrap_item_l
_wh(50%, 100%)
overflow hidden
clear both
span
display block
float left
&:nth-child(1)
_wh(.1rem, .4rem)
margin-left .2rem
_fj()
overflow hidden
i
display block
_wh(.09rem, .09rem)
border-radius 100%
&:nth-child(2)
font-family "SourceHanSansCN"
_font(.14rem, .4rem, #fff,400,)
margin-left .1rem
overflow hidden
text-overflow ellipsis
white-space nowrap
.top_item_content_wrap_item_r
_wh(50%, 100%)
line-height .4rem
overflow hidden
text-align right
span
font-family "SourceHanSansCN"
_font(.12rem, .4rem, #fff,700,)
&:nth-child(1)
font-family "SourceHanSansCN"
_font(.18rem, .4rem, #00D5FF,700,)
overflow hidden
text-overflow ellipsis
white-space nowrap
.item_content_1
_fj()
.progress_wrap
width 50%
_fj()
.progress_txt_wrap
_wh(.5rem, .44rem)
font-family "SourceHanSansCN"
_font(.14rem, .44rem, #84B0DA, 700,)
letter-spacing .02rem
.progress_line_wrap
_wh(calc(100% - .5rem), .4rem)
background-color rgba(0,213,255,0.20)
_fj()
.progress_line
height .27rem
_font(.16rem, .27rem, #fff,,center)
background-color #07E083
.progress_line_r
background-color #B68845
</style>

248
src/pages/management/ZhiPanGuan.vue
View File

@@ -6,48 +6,76 @@
<div class="container">
<div class="top_wrap">
<div class="left_wrap">
<div class="item_wrap">
<div class="item_wrap_1">
<div class="item_tip">
<div class="item_tip_left">盘管下料</div>
</div>
<div class="item_content item_content_1">
<div class="item_td_box_l">
<div class="item_td_box">
<div class="item_td_inner">
<div class="item_td_txt1">双斜切计划</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap">
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color1"></i></span>
<span>双斜切计划</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>100</span>
<span>个</span>
</div>
</div>
<div class="item_td_inner">
<div class="item_td_txt1">已生产</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color2"></i></span>
<span>已生产</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>200</span>
<span>个</span>
</div>
</div>
</div>
<div class="item_td_box item_td_box_1">
<div class="echart_zpg_wrap_1">
<div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
<div class="progress_wrap">
<div class="progress_txt_wrap">进度</div>
<div class="progress_line_wrap">
<div class="progress_line" style="width: 50%">100</div>
<div class="progress_line progress_line_r" style="width: 50%">50</div>
</div>
</div>
</div>
<div class="item_td_box_r">
<div class="item_td_box">
<div class="item_td_inner">
<div class="item_td_txt1">无屑计划</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap">
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color1"></i></span>
<span>无屑计划</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>100</span>
<span>个</span>
</div>
</div>
<div class="item_td_inner">
<div class="item_td_txt1">已生产</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color2"></i></span>
<span>已生产</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>200</span>
<span>个</span>
</div>
</div>
</div>
<div class="item_td_box item_td_box_1">
<div class="echart_zpg_wrap_1">
<div id="echart_zpg_2" style="width: 100%; height: 100%"></div>
<div class="progress_wrap">
<div class="progress_txt_wrap">进度</div>
<div class="progress_line_wrap">
<div class="progress_line" style="width: 50%">100</div>
<div class="progress_line progress_line_r" style="width: 50%">50</div>
</div>
</div>
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_wrap_2">
<div class="item_tip">
<div class="item_tip_left">设备报警信息</div>
</div>
@@ -67,30 +95,73 @@
</div>
</div>
<div class="right_wrap">
<div class="item_wrap">
<div class="item_wrap_1">
<div class="item_tip">
<div class="item_tip_left">直管下料</div>
</div>
<div class="item_content item_content_1">
<div class="item_td_box_l">
<div class="item_td_box">
<div class="item_td_inner">
<div class="item_td_txt1">双斜切计划</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap">
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color1"></i></span>
<span>双斜切计划</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>100</span>
<span>个</span>
</div>
</div>
<div class="item_td_inner">
<div class="item_td_txt1">已生产</div>
<div class="item_td_txt2">10000<span>个</span></div>
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color2"></i></span>
<span>已生产</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>200</span>
<span>个</span>
</div>
</div>
</div>
<div class="item_td_box item_td_box_1">
<div class="echart_zpg_wrap_1">
<div id="echart_zpg_3" style="width: 100%; height: 100%"></div>
<div class="progress_wrap">
<div class="progress_txt_wrap">进度</div>
<div class="progress_line_wrap">
<div class="progress_line" style="width: 50%">100</div>
<div class="progress_line progress_line_r" style="width: 50%">50</div>
</div>
</div>
</div>
<div class="item_td_box_r">
<div class="item_td_box">
<div class="top_item_content_wrap">
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color1"></i></span>
<span>无屑计划</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>100</span>
<span>个</span>
</div>
</div>
<div class="top_item_content_wrap_item">
<div class="top_item_content_wrap_item_l">
<span><i class="color2"></i></span>
<span>已生产</span>
</div>
<div class="top_item_content_wrap_item_r">
<span>200</span>
<span>个</span>
</div>
</div>
</div>
<div class="progress_wrap">
<div class="progress_txt_wrap">进度</div>
<div class="progress_line_wrap">
<div class="progress_line" style="width: 50%">100</div>
<div class="progress_line progress_line_r" style="width: 50%">50</div>
</div>
</div>
<!-- <div class="item_td_box">
<div class="item_td_inner">
<div class="item_td_txt1">无屑计划</div>
<div class="item_td_txt2">10000<span>个</span></div>
@@ -102,13 +173,13 @@
</div>
<div class="item_td_box item_td_box_1">
<div class="echart_zpg_wrap_1">
<div id="echart_zpg_4" style="width: 100%; height: 100%"></div>
<div id="echart_zpg_2" style="width: 100%; height: 100%"></div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_wrap_2">
<div class="item_tip">
<div class="item_tip_left">设备状态</div>
</div>
@@ -570,8 +641,10 @@ export default {
.right_wrap
float right
width 49%
.item_wrap
_wh(100%, 50%)
.item_wrap_1
_wh(100%, 45%)
.item_wrap_2
_wh(100%, 55%)
.item_wrap_l
_wh(100%, 100%)
.item_tip
@@ -597,37 +670,12 @@ export default {
.item_td_box_l
float left
_wh(50%, 100%)
padding-right .5rem
_fj()
padding-right .3rem
.item_td_box_r
float right
_wh(50%, 100%)
padding-left .5rem
_fj()
padding-left .3rem
background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
.item_td_box
width 50%
.item_td_inner
_wh(1.8rem, .7rem)
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
padding .05rem
&:nth-child(2)
margin-top .2rem
.item_td_txt1
font-family "SourceHanSansCN"
_font(.14rem, .3rem, #78b1de,bold,center)
.item_td_txt2
font-family "SourceHanSansCN"
_font(.18rem, .3rem, #fff,bold,center)
span
font-size .12rem
padding 0 .05rem
.echart_zpg_wrap_1
_wh(80%, 80%)
.item_td_box_1
_wh(1.6rem, 1.6rem)
_fj(center, center)
background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
.item_content_2
position relative
padding 0
@@ -674,7 +722,7 @@ export default {
_wh(100%, .44rem)
.scroll-ul_1_div
float left
_font(.18rem, .44rem, #fff,,center)
_font(.14rem, .44rem, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
@@ -733,4 +781,70 @@ export default {
left 25%
_wh(7px, 7px)
border-radius 50%
.progress_wrap
width 100%
_fj()
.progress_txt_wrap
_wh(.5rem, .44rem)
font-family "SourceHanSansCN"
_font(.14rem, .44rem, #84B0DA, 700,)
letter-spacing .02rem
.progress_line_wrap
_wh(calc(100% - .5rem), .4rem)
background-color rgba(0,213,255,0.20)
_fj()
.progress_line
height .27rem
_font(.16rem, .27rem, #fff,,center)
background-color #07E083
.progress_line_r
background-color #B68845
.top_item_content_wrap
width 100%
.top_item_content_wrap_item
_wh(100%, .4rem)
_fj()
margin-bottom .2rem
background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
.color1
background-color #07E083
.color2
background-color #B68845
.top_item_content_wrap_item_l
_wh(50%, 100%)
overflow hidden
clear both
span
display block
float left
&:nth-child(1)
_wh(.1rem, .4rem)
margin-left .2rem
_fj()
overflow hidden
i
display block
_wh(.09rem, .09rem)
border-radius 100%
&:nth-child(2)
font-family "SourceHanSansCN"
_font(.14rem, .4rem, #fff,400,)
margin-left .1rem
overflow hidden
text-overflow ellipsis
white-space nowrap
.top_item_content_wrap_item_r
_wh(50%, 100%)
line-height .4rem
overflow hidden
text-align right
span
font-family "SourceHanSansCN"
_font(.12rem, .4rem, #fff,700,)
&:nth-child(1)
font-family "SourceHanSansCN"
_font(.18rem, .4rem, #00D5FF,700,)
overflow hidden
text-overflow ellipsis
white-space nowrap
</style>