3个看板
This commit is contained in:
蔡玲
46
src/components/flowsvg.vue
Normal file
46
src/components/flowsvg.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="svg_wraper dashRight">
|
||||
<svg width="100%" height="100%">
|
||||
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop stop-color="#ffe505"/>
|
||||
</linearGradient>
|
||||
<path :class="direction" d="M 0 7 L 1862 7" stroke="rgba(0, 206, 208, .7)" style="stroke-dasharray: 20, 8;stroke-width: 4;" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
direction: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.svg_wraper
|
||||
width calc(100% - 20px)
|
||||
height 16px
|
||||
margin 0 auto
|
||||
// border-top 2px solid rgba(0, 206, 208, .7)
|
||||
// border-bottom 2px solid rgba(0, 206, 208, .7)
|
||||
background-color rgba(0, 206, 208, .3)
|
||||
// background-color: #02344d;
|
||||
// border: 2px solid #186189;
|
||||
@keyframes dashLeft {
|
||||
to {
|
||||
stroke-dashoffset: 100;
|
||||
}
|
||||
}
|
||||
@keyframes dashRight {
|
||||
to {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
.pathLeft {
|
||||
animation: dashLeft 1s linear infinite;
|
||||
}
|
||||
.pathRight {
|
||||
animation: dashRight 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
78
src/components/header.vue
Normal file
78
src/components/header.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="n_header">
|
||||
<div class="n_header_h1">
|
||||
<h1>{{ title1 }}</h1>
|
||||
</div>
|
||||
<p class="p_title">{{ title2 }}</p>
|
||||
<div class="exit_btn iconfont" @click="back"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
title1: String,
|
||||
title2: String
|
||||
},
|
||||
methods: {
|
||||
back () {
|
||||
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
|
||||
if (flag) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
}
|
||||
this.$router.push('/setup')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.n_header
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 88px
|
||||
background center / 100% url('../images/header_bg_s.png') no-repeat
|
||||
.n_header_h1
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top 12px
|
||||
h1
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
text-align center;
|
||||
letter-spacing 3px
|
||||
.p_title
|
||||
position absolute
|
||||
left 1%
|
||||
top 11%
|
||||
font-size 14px
|
||||
color #AECAF5
|
||||
.exit_btn
|
||||
position absolute
|
||||
right 1%
|
||||
top 11%
|
||||
z-index 100
|
||||
height 16px
|
||||
width 16px
|
||||
line-height 16px
|
||||
font-size 16px
|
||||
color #AECAF5
|
||||
text-align: center;
|
||||
</style>
|
||||
97
src/components/select.vue
Normal file
97
src/components/select.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<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>
|
||||
74
src/components/time.vue
Normal file
74
src/components/time.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="data_box">
|
||||
<div class="time">{{time}}</div>
|
||||
<div class="date_item">
|
||||
<div class="year">{{year}}</div>
|
||||
<div class="year">{{ date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Time',
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
time: '',
|
||||
year: '',
|
||||
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.year = `${year}`
|
||||
this.date = `${month}.${date}`
|
||||
this.week = `${week}`
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.timer)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.data_box
|
||||
position absolute
|
||||
right 15px
|
||||
top 30px
|
||||
width 300px
|
||||
height 39px
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
.time
|
||||
font-size: 39px;
|
||||
line-height: 29px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
color: #AECAF5;
|
||||
.date_item
|
||||
margin-left 10px
|
||||
.year
|
||||
font-size: 16px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
color: #AECAF5;
|
||||
line-height: 16px;
|
||||
opacity: 0.7;
|
||||
</style>
|
||||
Reference in New Issue
Block a user