样式
This commit is contained in:
@@ -1,75 +0,0 @@
|
|||||||
<template>
|
|
||||||
<header>
|
|
||||||
<div class="center_text">晟华大屏监控</div>
|
|
||||||
<div class="tag_block">
|
|
||||||
<div class="tag_left">
|
|
||||||
<!-- <div v-if="index == '0'" class="tag cur_tag">首页</div>
|
|
||||||
<router-link v-else to="/homepage" class="tag">首页</router-link> -->
|
|
||||||
<div v-if="index == '1'" class="tag cur_tag">生产统计</div>
|
|
||||||
<router-link v-else to="/prodcount" class="tag">生产统计</router-link>
|
|
||||||
</div>
|
|
||||||
<div class="tag_right">
|
|
||||||
<div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
|
|
||||||
<router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
|
|
||||||
<div v-if="index == '3'" class="tag cur_tag">设备监控</div>
|
|
||||||
<router-link v-else to="/devicemonitor" class="tag">设备监控</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Header',
|
|
||||||
data () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
index: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
@import '~@style/mixin'
|
|
||||||
header
|
|
||||||
_wh(100%, 84px)
|
|
||||||
overflow hidden
|
|
||||||
position relative
|
|
||||||
_bis('../assets/images/top.png',auto, 84px)
|
|
||||||
.center_text
|
|
||||||
_wh(400px, 40px)
|
|
||||||
position absolute
|
|
||||||
_font(36px, 40px, #fff,,center)
|
|
||||||
font-family "阿里妈妈数黑体" !important
|
|
||||||
left 50%
|
|
||||||
top 8px
|
|
||||||
margin-left -200px
|
|
||||||
letter-spacing 6px
|
|
||||||
.tag_block
|
|
||||||
_wh(100%, 100%)
|
|
||||||
_fj(row)
|
|
||||||
padding 25px 15px 0
|
|
||||||
.tag_left
|
|
||||||
_wh(50%, 100%)
|
|
||||||
_fj(row, flex-start)
|
|
||||||
.tag
|
|
||||||
margin-right 20px
|
|
||||||
.tag_right
|
|
||||||
_wh(50%, 100%)
|
|
||||||
_fj(row, flex-end)
|
|
||||||
.tag
|
|
||||||
margin-left 20px
|
|
||||||
.tag
|
|
||||||
display inline-block
|
|
||||||
_wh(132px, 36px)
|
|
||||||
_font(16px, 36px)
|
|
||||||
_bis('../assets/images/tag_1.png')
|
|
||||||
cursor pointer
|
|
||||||
&:hover
|
|
||||||
color #32C5FF
|
|
||||||
_bis('../assets/images/tag_2.png')
|
|
||||||
.cur_tag
|
|
||||||
color #32C5FF
|
|
||||||
_bis('../assets/images/tag_2.png')
|
|
||||||
</style>
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="select">
|
|
||||||
<div class="select-item pointer" @click="selectOption">
|
|
||||||
<div class="select-item-txt">{{defaultLabel}}</div>
|
|
||||||
<div class="select-item-button"> </div>
|
|
||||||
</div>
|
|
||||||
<ul v-show="active" class="options">
|
|
||||||
<li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'SelectOpt',
|
|
||||||
props: {
|
|
||||||
option: Array,
|
|
||||||
index: [Number, String]
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
active: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
defaultLabel () {
|
|
||||||
let val = ''
|
|
||||||
this.option.map(e => {
|
|
||||||
if (e.index === this.index) {
|
|
||||||
val = e.label
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
selectOption () {
|
|
||||||
this.active = true
|
|
||||||
},
|
|
||||||
change (e) {
|
|
||||||
this.$emit('change', e.index)
|
|
||||||
this.active = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
@import '~@style/mixin'
|
|
||||||
.select
|
|
||||||
position relative
|
|
||||||
_wh(100%, inherit)
|
|
||||||
background-color #fff
|
|
||||||
user-select none
|
|
||||||
.select-item
|
|
||||||
width 100%
|
|
||||||
_fj(row)
|
|
||||||
.select-item-txt
|
|
||||||
width calc(100% - 50px)
|
|
||||||
_font(15px, inherit, #999,,left)
|
|
||||||
// padding 0 10px
|
|
||||||
.select-item-button
|
|
||||||
position relative
|
|
||||||
_wh(50px, inherit)
|
|
||||||
vertical-align top
|
|
||||||
&::before
|
|
||||||
content ''
|
|
||||||
width 0
|
|
||||||
height 0
|
|
||||||
border-left 5px solid transparent
|
|
||||||
border-right 5px solid transparent
|
|
||||||
border-top 5px solid #999
|
|
||||||
position absolute
|
|
||||||
right 13px
|
|
||||||
top 17px
|
|
||||||
pointer-events none
|
|
||||||
z-index 3
|
|
||||||
.options
|
|
||||||
position absolute
|
|
||||||
z-index 100000
|
|
||||||
top 44px
|
|
||||||
width 100%
|
|
||||||
padding 10px 0
|
|
||||||
background-color #fff
|
|
||||||
border 1px solid #eee
|
|
||||||
border-radius 5px
|
|
||||||
li
|
|
||||||
width 100%
|
|
||||||
_font(15px, 38px, #999,,left)
|
|
||||||
padding 0 10px
|
|
||||||
user-select none
|
|
||||||
box-sizing border-box
|
|
||||||
&:hover
|
|
||||||
background-color #f5f7fa
|
|
||||||
.li-active
|
|
||||||
color #409eff
|
|
||||||
</style>
|
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<div class="exit_btn iconfont" @click="back"></div>
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>天能涂板暂存库可视化看板</h1>
|
<h1>天能涂板暂存库可视化看板</h1>
|
||||||
<v-time></v-time>
|
<v-time></v-time>
|
||||||
|
<div class="exit_btn iconfont" @click="back"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row content">
|
<div class="zd-row content">
|
||||||
<div class="zd-col-15 allHeight"><v-left></v-left></div>
|
<div class="zd-col-15 allHeight"><v-left></v-left></div>
|
||||||
@@ -63,9 +63,9 @@ h1
|
|||||||
text-align center
|
text-align center
|
||||||
margin-top 1%
|
margin-top 1%
|
||||||
.exit_btn
|
.exit_btn
|
||||||
position fixed
|
position absolute
|
||||||
left 8%
|
left 3%
|
||||||
top 4%
|
top 16%
|
||||||
z-index 100
|
z-index 100
|
||||||
height .3rem
|
height .3rem
|
||||||
width .3rem
|
width .3rem
|
||||||
|
|||||||
Reference in New Issue
Block a user