css
This commit is contained in:
@@ -4,46 +4,33 @@
|
||||
</t-header>
|
||||
<div class="container">
|
||||
<div class="sec sec1">
|
||||
<div class="four_wrap">
|
||||
<div class="four_wrap four_wrap_1">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">库存情况</div>
|
||||
</div>
|
||||
<div class="item_content con01">
|
||||
<div class="lbox">
|
||||
<!-- <div id="echart_d01" style="width: 100%; height: 100%"></div> -->
|
||||
<!-- <div class="three_w_item">
|
||||
<div class="item_content">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_2">
|
||||
<li style="width: 20%;">客户名称</li>
|
||||
<li style="width: 20%">规格型号</li>
|
||||
<li style="width: 15%">总根数</li>
|
||||
<li style="width: 15%">总托数</li>
|
||||
<li style="width: 15%">总重量（吨）</li>
|
||||
<li style="width: 15%">总长度（毫米）</li>
|
||||
</ul>
|
||||
<div class="scroll_container_2">
|
||||
<vue-seamless-scroll :data="kc.list" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<ul class="scroll-ul_2">
|
||||
<li v-for="(e, i) in kc.list" :key="i">
|
||||
<span class="scroll_th">名称:</span>
|
||||
<span>{{ e.name }}，</span>
|
||||
<span class="scroll_th">数量:</span>
|
||||
<span>{{ e.number }}，</span>
|
||||
<span class="scroll_th">占比:</span>
|
||||
<span>{{ e.percentage }}%</span>
|
||||
<div class="scroll-ul_2_div" style="width: 20%;">{{e.name}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 20%">{{e.number}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 15%">{{e.percentage}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 15%">{{e.percentage}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 15%">{{e.percentage}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 15%">{{e.percentage}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div> -->
|
||||
<div style="height: 130px;overflow:hidden">
|
||||
<div class="scroll_wrap" style="height: 130px">
|
||||
<ul class="scroll_tab_2">
|
||||
<li style="width: 50%;">名称</li>
|
||||
<li style="width: 25%">数量</li>
|
||||
<li style="width: 25%">占比</li>
|
||||
</ul>
|
||||
<div class="scroll_container_2">
|
||||
<vue-seamless-scroll :data="kc.list" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_2">
|
||||
<li v-for="(e, i) in kc.list" :key="i">
|
||||
<div class="scroll-ul_2_div" style="width: 50%;">{{e.name}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 25%">{{e.number}}</div>
|
||||
<div class="scroll-ul_2_div" style="width: 25%">{{e.percentage}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="rbox">
|
||||
@@ -64,45 +51,41 @@
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">货位占用</div>
|
||||
</div>
|
||||
<div class="item_content con01">
|
||||
<div class="lbox">
|
||||
<div class="list-con" style="width: 100%; height: 100%;">
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div>货位数</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointNumber }}</span><span>个</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div>已使用</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointUsed }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div>剩余数</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointRemain }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div>空托位数</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyNumber }}</span><span>个</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div>剩余</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyRemain }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div>空托盘垛</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyUsed }}</span><span>垛</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div>数量</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyQty }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_content item_content_1">
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div class="hwz_n">货位数</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointNumber }}</span><span>个</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div class="hwz_n">已使用</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointUsed }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div class="hwz_n">剩余数</div>
|
||||
<div class="hwz_num"><span>{{ hw.pointRemain }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div class="hwz_n">空托位数</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyNumber }}</span><span>个</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div class="hwz_n">剩余</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyRemain }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li">
|
||||
<div class="li-left">
|
||||
<div class="hwz_n">空托盘垛</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyUsed }}</span><span>垛</span></div>
|
||||
</div>
|
||||
<div class="li-right">
|
||||
<div class="hwz_n">数量</div>
|
||||
<div class="hwz_num"><span>{{ hw.emptyQty }}</span><span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="rbox">
|
||||
@@ -120,7 +103,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sec sec2">
|
||||
<div class="sec">
|
||||
<div class="bottom_wrap">
|
||||
<div class="item_tip item_tip_bg_m">
|
||||
<div class="item_tip_left">库内物料</div>
|
||||
@@ -202,7 +185,7 @@ export default {
|
||||
timer1: null,
|
||||
timer2: null,
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
|
||||
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
@@ -342,29 +325,23 @@ export default {
|
||||
_wh(100%, 100%)
|
||||
overflow hidden
|
||||
.container
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
flex-direction column
|
||||
// _wh(100%, calc(100% - 138px))
|
||||
padding 30px 25.09px 0
|
||||
_wh(100%, 86%)
|
||||
padding 1.5% 25px 0
|
||||
overflow hidden
|
||||
clear both
|
||||
.bottom_wrap
|
||||
width 100%
|
||||
height 100%
|
||||
.sec
|
||||
_fj()
|
||||
width 100%
|
||||
height 50%
|
||||
.sec1
|
||||
display flex
|
||||
justify-content space-between
|
||||
.sec2
|
||||
display flex
|
||||
padding-bottom 1.5%
|
||||
.bottom
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
_wh(100%, 38px)
|
||||
// background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
|
||||
_wh(100%, 6%)
|
||||
background center bottom / 100% 100% url(../../images/screen1/bottom.png) no-repeat
|
||||
.cblue
|
||||
color #32C5FF !important
|
||||
@@ -378,49 +355,18 @@ export default {
|
||||
color #F96700 !important
|
||||
.cred
|
||||
color #FF0000 !important
|
||||
.con01
|
||||
width 48%
|
||||
display flex
|
||||
.lbox
|
||||
width 100%
|
||||
.rbox
|
||||
width 25%
|
||||
.rbox-con
|
||||
// height 50%
|
||||
.title
|
||||
// font-size 32px
|
||||
font-size 14px
|
||||
background #548ddd
|
||||
color #ffffff
|
||||
text-indent 10px
|
||||
.desc
|
||||
font-size 14px
|
||||
span
|
||||
display inline-block
|
||||
line-height 24px
|
||||
&:nth-child(1)
|
||||
width 80%
|
||||
text-align left
|
||||
color #f7b502
|
||||
font-weight bold
|
||||
text-indent 10px
|
||||
&:nth-child(2)
|
||||
width 20%
|
||||
text-align center
|
||||
color #ffffff
|
||||
.four_wrap
|
||||
// _wh(100%, calc(39% - 20px))
|
||||
// margin-top 40px
|
||||
height 88%
|
||||
width 50%
|
||||
padding 0 1%
|
||||
height 100%
|
||||
width 34%
|
||||
.four_wrap_1
|
||||
width 65%
|
||||
.scroll-ul_1
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
line-height 40px
|
||||
span
|
||||
_font(16px, 1, #fff,,)
|
||||
_font(14px, 1, #fff,,)
|
||||
.scroll_th
|
||||
color #2ef6ff
|
||||
.item_tip
|
||||
@@ -436,18 +382,21 @@ export default {
|
||||
.item_tip_left
|
||||
_wh(60%, 100%)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(14px, inherit, #fff, 700, left)
|
||||
_font(16px, inherit, #fff, 700, left)
|
||||
letter-spacing 2px
|
||||
text-shadow 0 0 9px #159AFF
|
||||
padding-left 34px
|
||||
background center left / 22px 22px url(../../images/screen1/bg_title_tip.png) no-repeat
|
||||
.item_content
|
||||
_wh(100%, calc(100% - 37px))
|
||||
_wh(100%, calc(100% - 38px))
|
||||
margin-top 7px
|
||||
margin-bottom 3px
|
||||
overflow hidden
|
||||
.item_content_1
|
||||
_fj()
|
||||
flex-direction column
|
||||
.scroll_wrap
|
||||
_wh(100%, 100%)
|
||||
height 210px
|
||||
overflow hidden
|
||||
border 1px solid rgba(8,205,248,0.3)
|
||||
.scroll_tab_2
|
||||
_wh(100%, 30px)
|
||||
@@ -455,7 +404,7 @@ export default {
|
||||
li
|
||||
float left
|
||||
width 23%
|
||||
_font(12px,30px,#78B1DE,,center)
|
||||
_font(13px,30px,#78B1DE,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
@@ -469,52 +418,41 @@ export default {
|
||||
overflow hidden
|
||||
.scroll-ul_2
|
||||
li
|
||||
_wh(100%, 30px)
|
||||
_wh(100%, 32px)
|
||||
border-bottom 1px solid rgba(8,205,248,0.3)
|
||||
&:nth-child(even)
|
||||
background rgba(1,24,52,0.60)
|
||||
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
||||
.scroll-ul_2_div
|
||||
float left
|
||||
_wh(23%, 30px)
|
||||
_wh(23%, 32px)
|
||||
_fj(center)
|
||||
font-size: 12px;
|
||||
// line-height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 14px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
// white-space nowrap
|
||||
padding 0 2px
|
||||
// overflow hidden
|
||||
scale 0.9
|
||||
.lbox
|
||||
.list-con
|
||||
.li
|
||||
display flex
|
||||
color #fff
|
||||
font-weight bold
|
||||
// font-size 36px
|
||||
// line-height 100px
|
||||
font-size 13px
|
||||
line-height 34px
|
||||
justify-content space-between
|
||||
// padding 0 20px
|
||||
padding 0 10px
|
||||
.li-right
|
||||
margin-left 20px
|
||||
word-wrap break-word
|
||||
overflow-wrap break-word
|
||||
.li
|
||||
_fj()
|
||||
_wh(100%, 36px)
|
||||
.li-right
|
||||
margin-left 20px
|
||||
.li-left, .li-right
|
||||
_fj()
|
||||
width 49%
|
||||
background center / 100% 100% url(../../images/screen1/item_5.png) no-repeat
|
||||
padding 0 4%
|
||||
.hwz_n
|
||||
_font(14px, 36px, #fff,,left)
|
||||
.hwz_num
|
||||
_fj(flex-end)
|
||||
_font(12px, 36px, #fff, 700, right)
|
||||
span
|
||||
&:first-child
|
||||
color #f7b502
|
||||
margin-right 10px
|
||||
font-size 18px
|
||||
.three_w_item
|
||||
// _wh(calc(50% - 15px), 100%)
|
||||
width 100%
|
||||
|
||||
Reference in New Issue
Block a user