Skip to content
Snippets Groups Projects
MainPage.vue 1.84 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bart Chou's avatar
    Bart Chou committed
    <template>
      <el-container class="container">
        <el-header>Navbar goes here</el-header>
        <el-main>
          <el-row :gutter="10" justify="center">
            <el-col
              :span="10"
              style="display: flex; justify-content: center;"
            >
              <el-card
                onclick=""
              >
                <img
                  src="../assets/mainPage/offer.png"
                  class="image"
                />
                <div>
                  <p style="font-size: 50px;">Offer</p>
                  <p>Match results go here</p>
                </div>
              </el-card>
            </el-col>
            <el-col
              :span="10"
              style="display: flex; justify-content: center;"
            >
              <el-card
                onclick=""
              >
                <img
                  src="../assets/mainPage/wishlist.jpg"
                  class="image"
                />
                <div>
                  <p style="font-size: 50px;">Wish List</p>
                  <p>User's wish list go here</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row style="margin-top: 5%;">
            <el-col
              style="display: flex; justify-content: center;"
            >
              <el-card>
                <img
                  src="../assets/mainPage/flight.jpeg"
                  class="image"
                />
                <div>
                  <p style="font-size: 50px;">Flight Ticket</p>
                  <p>Find your flight!</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>
      
    <script setup lang="ts">
      import { ref } from 'vue'
      const currentDate = ref(new Date())
    </script>
    
    <style>
      .image {
        width: 25vw;
        display: block;
      }
      .container {
        width: 100%;
        height: 100%;
        color: #fff;
        background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
        font-size: 24px;
      }
    </style>