frontend/src/App.vue

<template>
  <div>
    <router-view/>
    <global-message></global-message>
  </div>
</template>

<script>
import GlobalMessage from '@/components/GlobalMessage'

export default {
  components: { GlobalMessage },
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }

    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style lang="scss">
@import "~@/style/reset.scss";
@import "~@/style/theme.scss";

@font-face {
  font-family: 'iconfont';  /* project id 1598214 */
  src: url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.eot');
  src: url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.woff') format('woff'),
  url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1598214_qpa79fv4wuj.svg#iconfont') format('svg');
}

body {
  color: #3a4a5a;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 24px;
}

.sub-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
}

.no-content-warning {
  color: #aabaca;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.8;

  .no-content-warning-tip {
    padding: 24px 0;
  }
}

.tag {
  display: inline-block;
  position: relative;
  background-color: lighten($theme-blue, 30);
  color: $theme-blue;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 8px;
  vertical-align: middle;
  bottom: 2px;
}

.full-width {
  width: 100%;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 16px;
}

.mt-32 {
  margin-top: 16px;
}
</style>