contest & problem

src/components/contests/ContestList.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+v-row(dense="")
+  v-col(cols="12")
+    v-card(color="#385F73", dark="")
+      v-card-title.headline Unlimited music now
+      v-card-subtitle
+        | Listen to your favorite artists and albums whenever and wherever, online and offline.
+      v-card-actions
+        v-btn(text="") Listen Now
+  v-col(v-for="(item, i) in items", :key="i", cols="12")
+    v-card(:color="item.color", dark="")
+      .d-flex.flex-no-wrap.justify-space-between
+        div
+          v-card-title.headline(v-text="item.title")
+          v-card-subtitle(v-text="item.artist")
+        v-avatar.ma-3(size="125", tile="")
+          v-img(:src="item.src")
+</template>
+<script>
+export default {
+  data: () => ({
+    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"
+      }
+    ]
+  })
+};
+</script>

src/components/problems/ProblemList.vue

@@ -0,0 +1,126 @@
+<template lang="pug">
+div
+  v-data-table.elevation-1(
+    :headers="headers"
+    :items="desserts"
+    :page.sync="page"
+    :items-per-page="itemsPerPage"
+    hide-default-footer=""
+    @page-count="pageCount=$event"
+  )
+  div.text-center.pt-2
+    v-pagination(
+      v-model="page"
+      :length="pageCount"
+    )
+</template>
+<script>
+export default {
+  data() {
+    return {
+      page: 1,
+      pageCount: 0,
+      itemsPerPage: 10,
+      headers: [
+        {
+          text: "Dessert (100g serving)",
+          align: "left",
+          sortable: false,
+          value: "name"
+        },
+        { text: "Calories", value: "calories" },
+        { text: "Fat (g)", value: "fat" },
+        { text: "Carbs (g)", value: "carbs" },
+        { text: "Protein (g)", value: "protein" },
+        { text: "Iron (%)", value: "iron" }
+      ],
+      desserts: [
+        {
+          name: "Frozen Yogurt",
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: "1%"
+        },
+        {
+          name: "Ice cream sandwich",
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: "1%"
+        },
+        {
+          name: "Eclair",
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: "7%"
+        },
+        {
+          name: "Cupcake",
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: "8%"
+        },
+        {
+          name: "Gingerbread",
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: "16%"
+        },
+        {
+          name: "Jelly bean",
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: "0%"
+        },
+        {
+          name: "Lollipop",
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: "2%"
+        },
+        {
+          name: "Honeycomb",
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: "45%"
+        },
+        {
+          name: "Donut",
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: "22%"
+        },
+        {
+          name: "KitKat",
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: "6%"
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="stylus">
+tbody tr:nth-of-type(odd)
+  background-color: rgba(0, 0, 0, .05)
+</style>

src/router/index.ts

@@ -25,6 +25,18 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/About.vue")
   },
+  {
+    path: "/p",
+    name: "Problem",
+    component: () =>
+      import(/* webpackChunkName: "problem" */ "../views/problems/index.vue")
+  },
+  {
+    path: "/c",
+    name: "Problem",
+    component: () =>
+      import(/* webpackChunkName: "contest" */ "../views/contests/index.vue")
+  },
   {
     path: "/u",
     component: () => import(`@/layouts/Account.vue`),