init
This commit is contained in:
45
src/components/circle.vue
Normal file
45
src/components/circle.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="circleProgress_wrapper">
|
||||
<div class="half_circleProgress abs_r">
|
||||
<div class="circleProgress rightcircle"></div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.circleProgress_wrapper
|
||||
position relative
|
||||
_wh(88px,88px)
|
||||
.half_circleProgress
|
||||
position absolute
|
||||
width 50%
|
||||
height 100%
|
||||
top 0
|
||||
overflow hidden
|
||||
.abs_l
|
||||
left 0
|
||||
.abs_r
|
||||
right 0
|
||||
.circleProgress
|
||||
_wh(88px,88px)
|
||||
border 2px dashed transparent
|
||||
border-radius 50%
|
||||
position absolute
|
||||
top 0
|
||||
.rightcircle
|
||||
border-top 2px dashed #3ba6f7
|
||||
border-right 2px dashed #3ba6f7
|
||||
right 0
|
||||
transform rotate(0deg)
|
||||
animation circleProgressLoad_right .5s ease-in-out
|
||||
@keyframes circleProgressLoad_right{
|
||||
0%{
|
||||
transform rotate(-129deg)
|
||||
}
|
||||
100%{
|
||||
transform rotate(0deg)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
src/components/dialog.vue
Normal file
118
src/components/dialog.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<transition name="bounce">
|
||||
<div class="alert-wrap">
|
||||
<div class="text">{{alertMsg}}</div>
|
||||
<div class="hairline--top">
|
||||
<button class="button--large" @click="onClose"><span>确认</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div class="overlay"></div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: mapState({
|
||||
alertMsg: state => state.com.alertMsg
|
||||
}),
|
||||
methods: {
|
||||
onClose () {
|
||||
this.$store.dispatch('showAlert', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.bounce-enter {
|
||||
opacity 0
|
||||
transform translate3d(-50%, -50%, 0) scale(0.7)
|
||||
}
|
||||
.bounce-leave-active {
|
||||
opacity 0
|
||||
transform translate3d(-50%, -50%, 0) scale(0.9)
|
||||
}
|
||||
.fade-enter-active
|
||||
animation 0.3s fade-in
|
||||
.fade-leave-active
|
||||
animation 0.3s fade-out
|
||||
.overlay
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
background-color rgba(0, 0, 0, 0.7)
|
||||
z-index 2012
|
||||
.alert-wrap
|
||||
position fixed
|
||||
top 50%
|
||||
left 50%
|
||||
width 20%
|
||||
transition .3s
|
||||
transform translate3d(-50%, -50%, 0)
|
||||
overflow hidden
|
||||
border-radius 4px
|
||||
border 1px solid #ebeef5
|
||||
background-color #fff
|
||||
box-shadow 0 2px 12px 0 rgba(0,0,0,.3)
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
color #929292
|
||||
z-index 2018
|
||||
.text
|
||||
padding .25rem
|
||||
max-height 60vh
|
||||
font-size .16rem
|
||||
color #333
|
||||
overflow-y auto
|
||||
text-align center
|
||||
-webkit-overflow-scrolling touch
|
||||
white-space pre-wrap
|
||||
[class*='hairline']
|
||||
position relative
|
||||
[class*='hairline']::after
|
||||
content ' '
|
||||
position absolute
|
||||
pointer-events none
|
||||
box-sizing border-box
|
||||
top -50%
|
||||
left -50%
|
||||
right -50%
|
||||
bottom -50%
|
||||
transform scale(0.5)
|
||||
border 0 solid #ebedf0
|
||||
.hairline--top::after
|
||||
border-top-width 1px
|
||||
.button--large
|
||||
width 100%
|
||||
height .5rem
|
||||
font-size .16rem
|
||||
line-height .5rem
|
||||
color #e74f1a
|
||||
background-color #2778f3
|
||||
</style>
|
||||
55
src/components/header.vue
Normal file
55
src/components/header.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="tag_block clearfix">
|
||||
<div class="fl">
|
||||
<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="/storagemonitor" class="tag">仓储监控</router-link>
|
||||
<div v-if="index == '2'" class="tag cur_tag">设备监控</div>
|
||||
<router-link v-else to="/devicemonitor" class="tag">设备监控</router-link>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<div v-if="index == '3'" class="tag cur_tag">物流工艺</div>
|
||||
<router-link v-else to="/logisticstech" class="tag">物流工艺</router-link>
|
||||
<div v-if="index == '4'" class="tag cur_tag">生产统计</div>
|
||||
<router-link v-else to="/prodcount" class="tag">生产统计</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
index: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
header
|
||||
_wh(100%, 84px)
|
||||
overflow hidden
|
||||
position relative
|
||||
_bis('../assets/images/top.png',auto, 84px)
|
||||
.tag_block
|
||||
margin 35px .54rem 0
|
||||
.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>
|
||||
83
src/components/time.vue
Normal file
83
src/components/time.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="data_box clearfix">
|
||||
<div class="date_item date">{{date}}</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 class="date_item week">{{week}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Time',
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
time: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
date: '',
|
||||
week: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = window.setInterval(this.updateTime, 1000)
|
||||
},
|
||||
methods: {
|
||||
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}`
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.timer)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.data_box
|
||||
position absolute
|
||||
right .3rem
|
||||
top 0
|
||||
height .75rem
|
||||
span
|
||||
display inline-block
|
||||
font-size .14rem
|
||||
line-height .75rem
|
||||
.time
|
||||
width 1rem
|
||||
text-align center
|
||||
.date_item
|
||||
float left
|
||||
line-height .75rem
|
||||
.tiem_item
|
||||
float left
|
||||
width .2rem
|
||||
.colon
|
||||
float left
|
||||
width .09rem
|
||||
text-align center
|
||||
</style>
|
||||
43
src/components/toast.vue
Normal file
43
src/components/toast.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="toast">
|
||||
<div class="toast-wrap">
|
||||
<div class="text">
|
||||
{{toastMsg}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: mapState({
|
||||
toastMsg: state => state.com.toastMsg
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.toast
|
||||
.toast-wrap
|
||||
position fixed
|
||||
z-index 10000
|
||||
width 100%
|
||||
height .32rem
|
||||
line-height .32rem
|
||||
text-align center
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%, -50%)
|
||||
.text
|
||||
display inline-block
|
||||
width auto
|
||||
padding 0 10px
|
||||
border-radius 10px
|
||||
background rgba(0, 0, 0, 0.6)
|
||||
font-size .16rem
|
||||
color #fff
|
||||
</style>
|
||||
Reference in New Issue
Block a user