样式
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<section>
|
||||
<t-header index='2'></t-header>
|
||||
<div class="content clearfix">
|
||||
<div class="con1">
|
||||
<div class="top_wrapper">
|
||||
<div class="yard-wrap">
|
||||
<div class="corridor_2">原料仓储监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="corridor_2">成品仓储监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_1">
|
||||
<div class="yard_group_ul yard_group_ul_2">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
@@ -93,35 +93,37 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>原料库存</h2>
|
||||
<div class="bottom_wrapper">
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>原料库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -159,8 +161,8 @@ export default {
|
||||
// }
|
||||
classOption () {
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
||||
step: 0.6, // 数值越大速度滚动越快
|
||||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
@@ -319,232 +321,240 @@ export default {
|
||||
.status2
|
||||
color #F7B502
|
||||
.content
|
||||
width calc(100% - 108px)
|
||||
height calc(100% - 108px)
|
||||
margin 12px auto
|
||||
.top_wrapper
|
||||
position relative
|
||||
height 50%
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
top 25px
|
||||
right .3rem
|
||||
_fj(row)
|
||||
.tag_type
|
||||
_fj(row)
|
||||
padding-left .3rem
|
||||
.type_color
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
.tag_text
|
||||
font-size .12rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 100%
|
||||
padding .15rem .54rem 0
|
||||
.con1
|
||||
position relative
|
||||
// height 5.7rem
|
||||
height 570px
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
top 25px
|
||||
right .3rem
|
||||
.tag_type
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
height calc(50% - 46px)
|
||||
clear both
|
||||
&:nth-child(1)
|
||||
margin-bottom 20px
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_2
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(3, 90px)
|
||||
.yard_group_ul_3
|
||||
width 40%
|
||||
grid-template-columns repeat(8, 100% / 8)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(3, 90px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 100%
|
||||
box-sizing border-box
|
||||
border 1px solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.machine_2
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
_wh(100%,22px)
|
||||
_font(16px, 22px, #fff,,left)
|
||||
margin 12px 12px 12px 0
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
bottom -40%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.9rem
|
||||
height 2.56rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
||||
padding .36rem .15rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .13rem
|
||||
line-height .36rem
|
||||
height .36rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.bottom_wrapper
|
||||
width 100%
|
||||
height 50%
|
||||
padding-top 20px
|
||||
_fj(row)
|
||||
.bottom_wrapper_l
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
.block_h2
|
||||
_wh(100%, 22px)
|
||||
margin 12px
|
||||
h2
|
||||
font-size 16px
|
||||
line-height 22px
|
||||
.list_scroll_title
|
||||
width calc(100% - 30px)
|
||||
margin 0 15px
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
text-align center
|
||||
line-height 32px
|
||||
font-size 12px
|
||||
color rgba(255,255,255,0.60)
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.content-block-scroll
|
||||
width calc(100% - 30px)
|
||||
margin 0 15px 4px 15px
|
||||
height calc(100% - 82px)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
height 38px
|
||||
_fj(row, center)
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
padding-left .3rem
|
||||
.type_color
|
||||
display inline-block
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
.tag_text
|
||||
display inline-block
|
||||
font-size .14rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 100%
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
// height 1.8rem
|
||||
height 180px
|
||||
clear both
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_2
|
||||
width 90%
|
||||
grid-template-columns repeat(18, 100% / 18)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_3
|
||||
width 40%
|
||||
grid-template-columns repeat(8, 100% / 8)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
width 18%
|
||||
padding 0 10px
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height 38px
|
||||
box-sizing border-box
|
||||
border .01rem solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.machine_2
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
width 100%
|
||||
height 60px
|
||||
line-height 60px
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.9rem
|
||||
height 2.56rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
||||
padding .36rem .15rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .13rem
|
||||
line-height .36rem
|
||||
height .36rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.con-b
|
||||
width 49%
|
||||
// height 3.45rem
|
||||
height 345px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
margin-top .1rem
|
||||
float left
|
||||
.con2
|
||||
margin-right .2rem
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
.con3
|
||||
padding 0 .27rem 0 .27rem
|
||||
.block_h2
|
||||
h2
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
margin .15rem 0 .15rem 0
|
||||
.list_scroll_title
|
||||
width 100%
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
text-align center
|
||||
line-height .32rem
|
||||
font-size 14px
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.content-block-scroll
|
||||
width 100%
|
||||
height calc(100% - 0.6rem)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
li
|
||||
width 100%
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
padding 0 .1rem
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height .38rem
|
||||
box-sizing border-box
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.foldcricle0
|
||||
position absolute
|
||||
z-index 102
|
||||
@@ -681,4 +691,10 @@ export default {
|
||||
// transform rotate(-120deg)
|
||||
// bottom -2px
|
||||
// left 138px
|
||||
.yard_group_p
|
||||
_wh(100%, 100%)
|
||||
.fontselect
|
||||
_font(12px, 30px, #fff,,)
|
||||
// transform scale(0.8)
|
||||
white-space:nowrap
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user