|
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <v-container>
- <v-row dense>
- <v-col v-for="(item, i) in items" :key="i" cols="12">
- <v-card class="mx-auto my-12" max-width="500">
- <div class="d-flex flex-no-wrap justify-space-between">
- <div>
- <v-card-title class="headline" v-text="item.title"></v-card-title>
-
- <v-card-subtitle v-text="item.amount"></v-card-subtitle>
- <v-btn class="mx-2" fab dark small color="pink" @click="increment">
- <v-icon>mdi-plus</v-icon>
- </v-btn>
- <v-btn class="mx-2" fab dark small color="pink" @click="decreament">
- <v-icon>mdi-minus</v-icon>
- </v-btn>
- </div>
- <v-avatar class="ma-3" size="125" tile>
- <v-img :src="item.src"></v-img>
- </v-avatar>
- </div>
- <!-- Nutrion Distribution
- <v-sparkline
- :labels="labels"
- :fill="fill"
- :gradient="gradient"
- :line-width="width"
- :padding="padding"
- :smooth="radius || false"
- :value="value"
- auto-draw
- style="top: -10px; position:relative"
- ></v-sparkline>-->
- <v-divider class="mx-4"></v-divider>
- <v-card-actions>
- <v-btn color="deep-purple lighten-2" text @click="reserve">Edit</v-btn>
- <v-btn color="deep-purple lighten-2" text @click="reserve">Remove</v-btn>
- </v-card-actions>
- </v-card>
- </v-col>
- </v-row>
- <!-- //###################################################################################################### -->
- </v-container>
- </template>
-
- <script>
- export default {
- name: "Home",
- computed: {
- items() {
- return this.$store.state.items;
- }
- },
- data: () => ({
- gradients: [
- ["#222"],
- ["#42b3f4"],
- ["red", "orange", "yellow"],
- ["purple", "violet"],
- ["#00c6ff", "#F0F", "#FF0"],
- ["#f72047", "#ffd200", "#1feaea"]
- ],
- fill: false,
- gradient: ["#00c6ff", "#F0F", "#FF0"],
- radius: 5,
- labels: [" ", "Protein", "Fat", "Carbohydrate", "Water", "Vitamins"],
- value: [200, 675, 410, 390, 310, 460]
- // count: this.$store.state.count,
- // items: store.state.items,
- // items: [
- // {
- // color: '#1F7087',
- // src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
- // title: 'Supermodel',
- // artist: 'Foster the People',
- // },
- // {
- // color: '#952175',
- // src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png',
- // title: 'Halcyon Days',
- // artist: 'Ellie Goulding',
- // },
- // ],
- }),
- methods: {
- increament() {
- this.$store.commit('increament')
- },
- decreament() {
- this.$store.commit('decreament')
- }
- }
- };
- </script>
|