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

960*540改样式

Browse Source
This commit is contained in:
xiangxy
2024-04-24 18:00:17 +08:00
parent d73c611831
commit dbc3868793
8 changed files with 209 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -21,6 +21,6 @@ npm run build --report
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
# 注意事项 # 注意事项
+ 华弘大屏分辨率都为 1920 * 1200 + 高测
+ 看板分辨率为 1920 * 1080 + 生产看板分辨率为 960 * 540
+ 接口文档地址：https://apifox.com/apidoc/shared-7fca569c-0233-402a-92da-74188764d4fc + 接口文档地址：https://apifox.com/apidoc/shared-7fca569c-0233-402a-92da-74188764d4fc

BIN
dist.zip Normal file
View File

Binary file not shown.

143
src/components/header00.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<header>
<div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
<div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
<div class="exit_arrow" v-text="!expand ? '&gt;&gt;' : '&lt;&lt;'" @click.stop="expand = !expand"></div>
</div>
<p>{{title}}</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div>
<div class="date_item time clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div>
</div>
<slot></slot>
</header>
</template>
<script>
export default {
name: 'Header',
data () {
return {
expand: false,
timer: null,
time: '',
hours: '',
minutes: '',
seconds: '',
date: '',
week: ''
}
},
props: {
title: String
},
created () {
this.updateTime()
this.timer = window.setInterval(this.updateTime, 1000)
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: {
expandTooltip () {
this.expand = !this.expand
},
updateTime () {
let cd = new Date()
let year = cd.getFullYear()
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let myddy = new Date().getDay()
let week = weekday[myddy]
this.time = `${hh}:${mm}:${ss}`
this.hours = `${hh}`
this.minutes = `${mm}`
this.seconds = `${ss}`
this.date = `${year}年${month}月${date}日`
this.week = `${week}`
}
}
}
</script>
<style lang="stylus" scoped>
header
position relative
width 100%
height 8%
position relative
background center center / 100% 100% url(../images/screen1/header.png) no-repeat
p
// font-family "PangMenZhengDao"
font-family "YouSheBiaoTiHei"
font-size 50px
line-height 100px
color #fff
font-weight lighter
text-align center
letter-spacing 5px
text-shadow 0 8px 8px rgba(0,0,0,0.30)
.data_box
position absolute
right 0
top 14px
height 37px
.date, .week
padding-right 20px
.time
width 170px
text-align center
.date_item
float left
font-size 20px
line-height 37px
color #fff
.tiem_item
float left
font-size 32px
line-height 37px
color #fff
.colon
float left
font-size 32px
line-height 37px
color #fff
.exit_btn
position: absolute;
left: 0;
top: 30px;
height 50px;
display: flex;
justify-content: space-between;
.exit_txt
font-size: 20px;
line-height: 50px;
color: #e6e7e1;
text-align: center;
font-weight: bold;
transition width .3s ease
overflow hidden
background-color: rgba(30, 182, 203, 80%);
.exit_arrow
width: 46px;
font-size: 20px;
line-height: 50px;
color: #e6e7e1;
text-align: center;
background-color: rgba(30, 182, 203, 60%);
border-top-right-radius: 30px;
border-bottom-right-radius: 30px
</style>

24
src/components/header3.vue
View File

@@ -83,8 +83,8 @@ header
p p
// font-family "PangMenZhengDao" // font-family "PangMenZhengDao"
font-family "YouSheBiaoTiHei" font-family "YouSheBiaoTiHei"
font-size 50px font-size 26px
line-height 100px line-height 45px
color #fff color #fff
font-weight lighter font-weight lighter
text-align center text-align center
@@ -93,27 +93,27 @@ header
.data_box .data_box
position absolute position absolute
right 0 right 0
top 14px top 4px
height 37px height 26px
.date, .week .date, .week
padding-right 20px padding-right 10px
.time .time
width 170px width 80px
text-align center text-align center
.date_item .date_item
float left float left
font-size 20px font-size 14px
line-height 37px line-height 26px
color #fff color #fff
.tiem_item .tiem_item
float left float left
font-size 32px font-size 14px
line-height 37px line-height 26px
color #fff color #fff
.colon .colon
float left float left
font-size 32px font-size 14px
line-height 37px line-height 26px
color #fff color #fff
.exit_btn .exit_btn
position: absolute; position: absolute;

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

@@ -140,8 +140,8 @@
<script> <script>
import THeader from '@components/header3.vue' import THeader from '@components/header3.vue'
import { rk } from '@js/getData1' // import { rk } from '@js/getData1'
// import {rk} from '@js/mork00.js' import {rk} from '@js/mork00.js'
export default { export default {
name: 'InStore', name: 'InStore',
components: { components: {
@@ -244,12 +244,12 @@ export default {
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
orient: 'horizontal', orient: 'horizontal',
top: '3%', top: '0%',
// right: 0, // right: 0,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 16 fontSize: 12
}, },
itemGap: 10.86, itemGap: 10.86,
itemWidth: 14.16, itemWidth: 14.16,
@@ -304,7 +304,7 @@ export default {
align-items center align-items center
justify-content center justify-content center
flex-direction column flex-direction column
_wh(100%, calc(100% - 138px)) // _wh(100%, calc(100% - 138px))
padding 30px 25.09px 0 padding 30px 25.09px 0
overflow hidden overflow hidden
clear both clear both
@@ -318,7 +318,8 @@ export default {
display flex display flex
.bottom .bottom
_wh(100%, 38px) _wh(100%, 38px)
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat // background center bottom / 1906px 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
.cgreen .cgreen
@@ -335,21 +336,22 @@ export default {
width 48% width 48%
display flex display flex
.lbox .lbox
width 70% width 75%
.rbox .rbox
width 30% width 25%
.rbox-con .rbox-con
height 50% // height 50%
.title .title
font-size 32px // font-size 32px
font-size 14px
background #548ddd background #548ddd
color #ffffff color #ffffff
text-indent 10px text-indent 10px
.desc .desc
font-size 30px font-size 14px
span span
display inline-block display inline-block
line-height 62px line-height 24px
&:nth-child(1) &:nth-child(1)
width 80% width 80%
text-align left text-align left
@@ -362,7 +364,7 @@ export default {
color #ffffff color #ffffff
.four_wrap .four_wrap
// _wh(100%, calc(39% - 20px)) // _wh(100%, calc(39% - 20px))
margin-top 40px // margin-top 40px
height 88% height 88%
width 50% width 50%
padding 0 1% padding 0 1%
@@ -384,7 +386,7 @@ export default {
.item_tip_left .item_tip_left
_wh(60%, 100%) _wh(60%, 100%)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left) _font(14px, 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
@@ -392,16 +394,18 @@ export default {
.item_content .item_content
_wh(100%, calc(100% - 37px)) _wh(100%, calc(100% - 37px))
margin-top 7px margin-top 7px
margin-bottom 3px
.scroll_wrap .scroll_wrap
_wh(100%, 100%) _wh(100%, 100%)
height 210px
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%, 40px) _wh(100%, 30px)
border-bottom 1px solid rgba(8,205,248,0.3) border-bottom 1px solid rgba(8,205,248,0.3)
li li
float left float left
width 14% width 14%
_font(14px,40px,#78B1DE,,center) _font(12px,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
@@ -415,14 +419,14 @@ export default {
overflow hidden overflow hidden
.scroll-ul_2 .scroll-ul_2
li li
_wh(100%, 44px) _wh(100%, 30px)
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(14%, 44px) _wh(14%, 30px)
_fj(center) _fj(center)
_font(12px, 44px, #fff,,center) _font(12px, 44px, #fff,,center)
word-wrap break-word word-wrap break-word
@@ -430,16 +434,20 @@ export default {
white-space nowrap white-space nowrap
padding 0 2px padding 0 2px
overflow hidden overflow hidden
scale 0.8
.lbox .lbox
.list-con .list-con
.li .li
display flex display flex
color #fff color #fff
font-weight bold font-weight bold
font-size 36px // font-size 36px
line-height 100px // line-height 100px
font-size 13px
line-height 34px
justify-content space-between justify-content space-between
padding 0 20px // padding 0 20px
padding 0 10px
span span
color #f7b502 color #f7b502
margin 0 20px margin 0 20px

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

@@ -84,8 +84,8 @@
<script> <script>
import THeader from '@components/header3.vue' import THeader from '@components/header3.vue'
import { sc } from '@js/getData1' // import { sc } from '@js/getData1'
// import {sc} from '@js/mork00.js' import {sc} from '@js/mork00.js'
export default { export default {
name: 'Prod', name: 'Prod',
components: { components: {
@@ -150,13 +150,14 @@ export default {
_wh(100%, 100%) _wh(100%, 100%)
overflow hidden overflow hidden
.container .container
_wh(100%, calc(100% - 138px)) // _wh(100%, calc(100% - 138px))
padding 30px 25.09px 0 padding 30px 25.09px 0
overflow hidden overflow hidden
clear both clear both
.bottom .bottom
_wh(100%, 38px) _wh(100%, 38px)
background center bottom / 1906px 100% url(../../images/screen1/bottom.png) no-repeat // background center bottom / 1906px 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
.cgreen .cgreen
@@ -169,49 +170,6 @@ export default {
color #F96700 !important color #F96700 !important
.cred .cred
color #FF0000 !important color #FF0000 !important
.con1
width 100%
height 123px
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
margin 5px 0
text-align center
display flex
justify-content space-between
align-items center
.cbox
width 30%
display flex
align-items center
justify-content center
div
font-size 24px
color #32C5FF
.icon1
display inline-block
width 19px
height 19px
overflow hidden
position relative
background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
margin-right 20px
.num
display flex
align-items center
.bg
width 44px
height 60px
background rgba(50,197,255,0.10)
display flex
align-items center
justify-content center
margin-right 10px
font-size 50px
color #F7B502
.dot
background none
width 14px
.center_wrapper .center_wrapper
_wh(100%, calc(50% - 69px)) _wh(100%, calc(50% - 69px))
_fj(row) _fj(row)
@@ -334,13 +292,7 @@ export default {
// width 9% // width 9%
.four_wrap .four_wrap
// _wh(100%, calc(39% - 20px)) // _wh(100%, calc(39% - 20px))
margin-top 40px // height 44%
height 44%
// padding 10px 15px
// background-image linear-gradient(to bottom, #050c1b, #16243c)
// border 2px solid #16243c
// border-top-left-radius 10px
// border-top-right-radius 10px
.scroll-ul_1 .scroll-ul_1
width 100% width 100%
li li
@@ -359,7 +311,7 @@ export default {
.item_tip_left .item_tip_left
_wh(60%, 100%) _wh(60%, 100%)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left) _font(14px, 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
@@ -367,16 +319,17 @@ export default {
.item_content .item_content
_wh(100%, calc(100% - 37px)) _wh(100%, calc(100% - 37px))
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)
.scroll_tab_2 .scroll_tab_2
_wh(100%, 40px) _wh(100%, 30px)
border-bottom 1px solid rgba(8,205,248,0.3) border-bottom 1px solid rgba(8,205,248,0.3)
li li
float left float left
width 11% width 11%
_font(14px,40px,#78B1DE,,center) _font(12px,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
@@ -386,7 +339,7 @@ export default {
.scroll_container_2 .scroll_container_2
width 100% width 100%
// height calc(100% - 40px) // height calc(100% - 40px)
height 230px height 140px
overflow hidden overflow hidden
.scroll-ul_2 .scroll-ul_2
li li
@@ -399,7 +352,7 @@ export default {
float left float left
_wh(11%, 44px) _wh(11%, 44px)
_fj(center) _fj(center)
_font(14px, 44px, #fff,,center) _font(12px, 44px, #fff,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
white-space nowrap white-space nowrap

20
src/router/index.js
View File

@@ -3,8 +3,8 @@ import Router from 'vue-router'
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup') const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
const home = r => require.ensure([], () => r(require('@page/modules/home/index')), 'home') const home = r => require.ensure([], () => r(require('@page/modules/home/index')), 'home')
const PressProd = r => require.ensure([], () => r(require('@page/modules/PressProd')), 'PressProd') // const PressProd = r => require.ensure([], () => r(require('@page/modules/PressProd')), 'PressProd')
const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/SortWorkMonitor')), 'SortWorkMonitor') // const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/SortWorkMonitor')), 'SortWorkMonitor')
const Weight = r => require.ensure([], () => r(require('@page/modules/Weight')), 'Weight') const Weight = r => require.ensure([], () => r(require('@page/modules/Weight')), 'Weight')
const InStore = r => require.ensure([], () => r(require('@page/modules/InStore')), 'InStore') const InStore = r => require.ensure([], () => r(require('@page/modules/InStore')), 'InStore')
const Prod = r => require.ensure([], () => r(require('@page/modules/Prod')), 'Prod') const Prod = r => require.ensure([], () => r(require('@page/modules/Prod')), 'Prod')
@@ -26,10 +26,10 @@ export default new Router({
path: '/home', path: '/home',
component: home component: home
}, },
{ // {
path: '/pressprod', // path: '/pressprod',
component: PressProd // component: PressProd
}, // },
{ {
path: '/Weight', path: '/Weight',
component: Weight component: Weight
@@ -41,10 +41,10 @@ export default new Router({
{ {
path: '/Prod', path: '/Prod',
component: Prod component: Prod
},
{
path: '/SortWorkMonitor',
component: SortWorkMonitor
} }
// {
// path: '/SortWorkMonitor',
// component: SortWorkMonitor
// }
] ]
}) })

6
src/style/reset.css
View File

@@ -69,12 +69,8 @@ li {
} }
html, body { html, body {
width: 1920px; width: 100%;
height: 100%; height: 100%;
min-height: 1080px;
/* height: 1200px; */
/* height: 1080px; 看板 */
/* height: 1200px; 大屏 */
} }
body { body {