root/screenkb-gaoce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
caill
2024-07-26 17:01:20 +08:00
parent 7c9d13773d
commit c3a4b64933
2 changed files with 101 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/pages/modules/InStore.vue
View File

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

94
src/pages/modules/Prod.vue
View File

@@ -113,7 +113,7 @@ export default {
timer1: null, timer1: null,
timer2: null, timer2: null,
step: 0.4, // 数值越大速度滚动越快 step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
@@ -160,13 +160,10 @@ export default {
_wh(100%, 100%) _wh(100%, 100%)
overflow hidden overflow hidden
.container .container
// _wh(100%, calc(100% - 138px)) _wh(100%, 86%)
padding 30px 25.09px 0 padding 1.5% 25px 0
overflow hidden
clear both
.bottom .bottom
_wh(100%, 38px) _wh(100%, 6%)
// background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat
background center bottom / 100% 100% url(../../images/screen1/bottom.png) no-repeat background center bottom / 100% 100% url(../../images/screen1/bottom.png) no-repeat
.cblue .cblue
color #32C5FF !important color #32C5FF !important
@@ -231,78 +228,10 @@ export default {
_wh(calc(100% - 44px), 100%) _wh(calc(100% - 44px), 100%)
margin 60px auto margin 60px auto
float right float right
// .con4
// _wh(100%, calc(50% - 85px))
// margin-top 66px
// overflow hidden
// position relative
// .block_h2
// _wh(calc(100% - 0px), 32px)
// margin 17px 0 10px 0
// padding-left 18px
// background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
// color #fff
// h2
// _font(16px, 32px, #fff,,left)
// .list_scroll_title
// _wh(calc(100% - 0px), 32px)
// margin 0 auto
// background #262F52
// line-height 32px
// color #fff
// span
// display inline-block
// width 5%
// text-align center
// line-height 32px
// font-size 14px
// &:nth-child(4)
// width 16%
// &:nth-child(5)
// width 6.5%
// &:nth-child(6)
// width 6.5%
// &:nth-child(7)
// width 8%
// &:nth-child(14)
// width 9%
// &:nth-child(15)
// width 9%
// .content-block-scroll
// _wh(calc(100% - 0px), calc(100% - 113px))
// margin 0 auto 25px auto
// 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
// width 5%
// font-size 12px
// // padding 0 10px
// text-align center
// line-height 38px
// box-sizing border-box
// &:nth-child(4)
// width 16%
// &:nth-child(5)
// width 6.5%
// &:nth-child(6)
// width 6.5%
// &:nth-child(7)
// width 8%
// &:nth-child(14)
// width 9%
// &:nth-child(15)
// width 9%
.four_wrap .four_wrap
// _wh(100%, calc(39% - 20px)) _wh(100%, 49%)
// height 44% &:first-child
margin-bottom 2%
.scroll-ul_1 .scroll-ul_1
width 100% width 100%
li li
@@ -325,7 +254,7 @@ export default {
background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
.item_tip_left .item_tip_left
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(14px, inherit, #fff, 700, left) _font(16px, inherit, #fff, 700, left)
letter-spacing 2px letter-spacing 2px
text-shadow 0 0 9px #159AFF text-shadow 0 0 9px #159AFF
padding-left 34px padding-left 34px
@@ -340,9 +269,8 @@ export default {
background center left / 100% 100% url(../../images/screen1/number-bg.png) no-repeat background center left / 100% 100% url(../../images/screen1/number-bg.png) no-repeat
margin 0 2px margin 0 2px
.item_content .item_content
_wh(100%, calc(100% - 37px)) _wh(100%, calc(100% - 38px))
margin-top 7px margin-top 7px
margin-bottom 3px
.scroll_wrap .scroll_wrap
_wh(100%, 100%) _wh(100%, 100%)
border 1px solid rgba(8,205,248,0.3) border 1px solid rgba(8,205,248,0.3)
@@ -366,14 +294,14 @@ export default {
overflow hidden overflow hidden
.scroll-ul_2 .scroll-ul_2
li li
_wh(100%, 44px) _wh(100%, 32px)
border-bottom 1px solid rgba(8,205,248,0.3) border-bottom 1px solid rgba(8,205,248,0.3)
&:nth-child(even) &:nth-child(even)
background rgba(1,24,52,0.60) background rgba(1,24,52,0.60)
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div .scroll-ul_2_div
float left float left
_wh(19%, 44px) _wh(19%, 32px)
_fj(center) _fj(center)
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;