canary_fe/src/views/Account/Account.vue

<template>
  <div class="home" ref="home">
    <md-app md-waterfall md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <div class="md-toolbar-section-start">
          <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
            <md-icon>menu</md-icon>
          </md-button>
          <span class="md-title">Codebook</span>
        </div>
        <div class="md-toolbar-section-end">
          <md-button class="md-icon-button">
            <md-icon>search</md-icon>
          </md-button>
          <md-menu md-align-trigger>
            <md-button md-menu-trigger class="md-icon-button">
              <md-icon>more_vert</md-icon>
            </md-button>
            <md-menu-content>
              <md-menu-item>Alphabetically</md-menu-item>
              <md-menu-item>Recently Used</md-menu-item>
            </md-menu-content>
          </md-menu>
        </div>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible">
        <div class="drawer-banner">
          <md-icon class="default-avatar md-size-2x">face</md-icon>
          <p class="md-title">Canary Codebook</p>
          <p class="md-caption">zhaoyingbo@live.cn</p>
        </div>

        <md-list>
          <md-list-item>
            <md-icon>person</md-icon>
            <span class="md-list-item-text">Account</span>
          </md-list-item>

          <md-list-item>
            <md-icon>help</md-icon>
            <span class="md-list-item-text">FAQ</span>
          </md-list-item>

          <md-list-item>
            <md-icon>question_answer</md-icon>
            <span class="md-list-item-text">Provide Feedback</span>
          </md-list-item>

          <md-list-item>
            <md-icon>settings</md-icon>
            <span class="md-list-item-text">Settings</span>
          </md-list-item>
          <md-list-item>
            <md-icon>reply</md-icon>
            <span class="md-list-item-text">Share</span>
          </md-list-item>
        </md-list>
      </md-app-drawer>

      <md-app-content>
        <md-empty-state
          md-icon="devices_other"
          md-label="Create your first code"
          md-description="Creating code, you'll be able to upload your information to the server and save it."
          v-if="test_data.length == 0"
        >
          <md-button class="md-primary md-raised">Create first code</md-button>
        </md-empty-state>

        <div class="code-card" v-for="(code, index) in test_data" :key="index">
          <p class="md-title">{{code.title}}</p>
          <p class="md-caption">{{code.user_name}}</p>
        </div>

        <md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
          <md-speed-dial-target>
            <md-icon>add</md-icon>
          </md-speed-dial-target>
        </md-speed-dial>
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState, mapActions } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      menuVisible: false,
      has_data: false,
      clientHeight: "",
      test_data: [
        {
          open_count:0,
          title:'QQ',
          user_name:'1144131090',
          password:'test',
          node:'测试用',
        },{
          open_count:0,
          title:'微信',
          user_name:'15143211127',
          password:'test',
          node:'测试用',
        },{
          open_count:0,
          title:'QQ',
          user_name:'1144131090',
          password:'test',
          node:'测试用',
        },{
          open_count:0,
          title:'QQ',
          user_name:'1144131090',
          password:'test',
          node:'测试用',
        },
      ]
    };
  },
  computed: {
    ...mapState([])
  },
  methods: {
    ...mapActions([]),
    changeFixed(clientHeight) {
      //动态修改样式
      // console.log(clientHeight);
      this.$refs.home.children[0].style.minHeight = clientHeight + "px";
    }
  },
  created() {},
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`;
    //document.body.clientWidth;
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  beforeDestroy() {},
  components: {}
};
</script>

<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.home {
  width: 100%;
  // max-width: 500px;
  min-height: 100%;
  background: #fff;
  // margin: 0 auto;
  .drawer-banner {
    padding: 1rem 0.3rem 0.3rem 0.3rem;
    box-sizing: border-box;
    background: $main-color;
    color: #fff;
    .default-avatar {
      color: #fff;
      margin-bottom: 0.3rem;
    }
    .md-caption {
      color: #fbfbfb;
    }
  }
  .code-card {
    padding: .3rem 0;
    border-bottom: 1px #eee solid;
  }
}
// Demo purposes only
.md-drawer {
  width: 240px;
  max-width: calc(100vw - 125px);
}
</style>