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" v-for="badge in badges" :key="badge.id">
                <v-avatar>
                  <v-icon>{{ badge.icon }}</v-icon>
                </v-avatar>
                <h3>{{ badge.title }}</h3>
                <p>{{ badge.description }}</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 {
      badges: [
        { id: 1, title: '堅持七天', description: '連續堅持執行習慣七天', icon: 'mdi-star' },
        { id: 2, title: '完成挑戰', description: '成功完成習慣挑戰', icon: 'mdi-ribbon' },
        { id: 3, title: '超越目標', description: '超越設定的習慣目標', icon: 'mdi-medal' }
      ]
    };
  }
});