Vuetify Basic

by rolence0515

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.0.5/cytoscape-cose-bilkent.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <v-card-title>
            <h2>習慣統計報告</h2>
          </v-card-title>
          <v-card-text>
            <v-row>
              <v-col cols="6" sm="4">
                <h3>每日執行次數</h3>
                <p>{{ dailyFrequency }}</p>
              </v-col>
              <v-col cols="6" sm="4">
                <h3>持續天數</h3>
                <p>{{ continuousDays }}</p>
              </v-col>
              <v-col cols="6" sm="4">
                <h3>目標達成率</h3>
                <p>{{ goalCompletionRate }}%</p>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

CSS

#app {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      dailyFrequency: 3, // 每日執行次數
      continuousDays: 10, // 持續天數
      goalCompletionRate: 75 // 目標達成率
    };
  }
});