init

src/components/alert.vue

@@ -0,0 +1,116 @@
+<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 45%
+  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 .28rem
+  line-height .42rem
+  color #929292
+  z-index 2018
+.text
+  padding .1rem
+  max-height 60vh
+  overflow-y auto
+  text-align center
+  -webkit-overflow-scrolling touch
+  white-space pre-wrap
+  color #606266
+[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
+  line-height .5rem
+  color #e74f1a
+  background-color #2778f3
+</style>