init

src/components/DropdownMenu.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="dropdown-menu" :class="{'toggle_disabled': disabled === true}" ref="elemId">
+    <div v-if="inputed === false" class="fxrow dropdown-menu__item" @click="toggleItem">
+      <span class="dropdown-menu__title" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}"><div class="ellipsis chose_T">{{active === '' ? '请选择' : option[active].label}}</div></span>
+    </div>
+    <div v-if="inputed === true" class="fxrow dropdown-menu__item dropdown-menu__item_2">
+      <input
+      type="text"
+      placeholder="请输入"
+      class="fxcol drop_input"
+      :value="value"
+      @input="handleChange($event)">
+      <span class="fxcol dropdown-menu__title dropdown-menu__title_2" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}" @click="toggleItem"><div class="ellipsis">&nbsp;</div></span>
+    </div>
+    <div v-show="open" class="dropdown-item" :style="up === false ? 'top: 38px' : 'bottom: 38px'">
+      <div ref="dropdown" class="dropdown-item__content">
+        <div v-show="option.length > 0" v-for="(e, i) in option" :key="e.value" @click="$emit('dropdownMenu', i)" class="fxrow dropdown-item__option dropdown-item__option--active">
+          <div class="cell__title" :class="{'cell__title--active': i + '' === active}"><span>{{e.label}}</span></div>
+          <div class="iconfont check_icon" :class="{'check_icon--checked': i + '' === active}"></div>
+        </div>
+        <div v-show="option.length === 0" class="fxrow dropdown-item__option dropdown-item__option--active" @click="handleBlur">
+          <div class="cell__title"><span>无匹配数据</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DropdownMenu',
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: String,
+    option: Array,
+    active: String,
+    open: Boolean,
+    up: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    inputed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleItem () {
+      let cheight = document.body.clientHeight
+      let bottom = this.$refs.elemId.getBoundingClientRect().bottom
+      this.$refs.dropdown.style.maxHeight = (cheight - bottom - 20) + 'px'
+      this.$emit('toggleItem')
+    },
+    handleChange ($event) {
+      let cheight = document.body.clientHeight
+      let bottom = this.$refs.elemId.getBoundingClientRect().bottom
+      this.$refs.dropdown.style.maxHeight = (cheight - bottom - 20) + 'px'
+      this.$emit('input', $event.target.value)
+      this.$emit('handleChange', $event.target.value)
+    },
+    handleBlur () {
+      this.$emit('handleBlur')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.dropdown-menu
+  position relative
+  height inherit
+  font-size inherit
+  line-height inherit
+  background-color #fff
+  user-select none
+  width 100%
+.selectopt
+  // _font(.3rem, 38px, #606266)
+.selectbtn
+  position relative
+  flex 0 0 1rem
+  _wh(.8rem, .8rem)
+  vertical-align top
+  background-color #cccccc
+  &::before
+    content ''
+    width 0
+    height 0
+    border-left .5rem solid transparent
+    border-right .5rem solid transparent
+    border-top .5rem solid white
+    position absolute
+    right .15rem
+    top .15rem
+    pointer-events none
+    z-index 3
+.options
+  position absolute
+  z-index 100000
+  top 38px
+  width 100%
+  li
+    width 100%
+    _font(.12rem, .35rem, #000000)
+    background-color #cccccc
+    border-top 1px solid #ffffff
+    padding 0 .3rem 0 .1rem
+    user-select none
+    &:hover
+      background:#999
+.dropdown-menu__item
+  justify-content center
+  height inherit
+  font-size inherit
+  width 100%
+.dropdown-menu__item_2
+  align-items flex-start
+.drop_input
+  height .86rem
+  width calc(100% - 3rem)
+  padding 0 .15rem
+  color #606266
+  font-size .3rem
+  line-height .86rem
+.dropdown-menu__title
+  position relative
+  width 100%
+  padding 0 .15rem
+  color #606266
+  font-size inherit
+  line-height inherit
+  width 100%
+  display block
+  box-sizing border-box
+  &::after
+    position absolute
+    top 50%
+    right .16rem
+    margin-top -.1rem
+    border .06rem solid
+    border-color transparent transparent #999 #999
+    transform rotate(-45deg)
+    opacity 0.8
+    content ''
+.dropdown-menu__title_2
+  line-height 38px
+  max-width 1.4rem
+  &::after
+    right .16rem
+.dropdown-menu__title_up
+  &::after
+    transform rotate(135deg)
+    top calc(50% + .06rem)
+.dropdown-menu__title--active, .dropdown-menu__title--active div
+  color #2778f3 !important
+  &::after
+    border-color transparent transparent currentColor currentColor
+    margin-top -.02rem
+    transform rotate(135deg)
+.dropdown-menu__title--active_up, .dropdown-menu__title--active_up div
+  &::after
+    transform rotate(-45deg)
+    top calc(50% - .06rem)
+.dropdown-item
+  position absolute
+  left 0
+  width 100%
+  z-index 10
+  border-radius 4px
+  overflow hidden
+  box-shadow 0 0 .08rem 0.02rem rgba(160,160,160,0.9)
+.dropdown-item__content
+  position relative
+  width 100%
+  height auto
+  z-index 2047
+  overflow-y auto
+  background-color #fff
+  transition transform 0.3s
+.dropdown-item__option
+  width 100%
+  height 38px
+  padding 0 .15rem
+  overflow hidden
+.cell__title
+  height 38px
+  overflow hidden
+  span
+    _font(16px, 38px, #999)
+.cell__title--active span
+  color #2778f3
+.toggle_disabled
+  background-color #f5f7fa
+  border 0.02rem solid #e4e7ed
+  cursor not-allowed
+  .dropdown-menu__title
+    div
+      color #929292
+    &::after
+      border-color transparent transparent #929292 #929292
+.chose_T
+  width 100%
+  font-size inherit
+  overflow hidden
+  color #999
+</style>

src/components/dialog.vue

@@ -0,0 +1,123 @@
+<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%
+  min-width 260px
+  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 .22rem
+  line-height .3rem
+  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
+  border none
+  span
+    font-size .22rem
+</style>

src/components/header.vue

@@ -0,0 +1,100 @@
+<template>
+  <header>
+    <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 {
+      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: {
+    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>
+@import '~@css/mixin'
+header
+  position relative
+  width 100%
+  height 1rem
+  position relative
+  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
+  p
+    font-family "PangMenZhengDao"
+    _font(.4rem, 1rem, #ffffff, lighter, center)
+    letter-spacing .05rem
+    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 0
+  top .14rem
+  height .37rem
+.date, .week
+  padding-right .2rem
+.time
+  width 1.7rem
+  text-align center
+.date_item
+  float left
+  _font(.2rem, .37rem, #fff,,)
+.tiem_item
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.colon
+  float left
+  _font(.32rem, .37rem, #fff,,)
+</style>

src/components/toast.vue

@@ -0,0 +1,44 @@
+<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 .1rem
+      border-radius 10px
+      background rgba(0, 0, 0, 0.6)
+      font-size .22rem
+      line-height inherit
+      color #fff
+</style>