WishlistPage.vue

<template>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16">
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>Your Offer Information</span>
          </div>
        </template>

        <div class="common-layout">
          <el-container>
            <!-- Aside Coding Area -->
            <el-aside width="300px">
              <el-space direction="vertical" width="100%">
                <el-card
                  v-for="wishlistListItem in wishlistList"
                  shadow="hover"
                  style="width: 280px"
                >
                  <span>{{ wishlistListItem.cityName }}</span>
                  <div class="bottom">
                    <time class="time">"2077-7-77 to 2077-7-77"</time>
                  </div>
                </el-card>
                <el-card shadow="hover" style="width: 280px">
                  <el-icon><Plus /></el-icon
                  ><span> + Add New Item To Wishlist</span>
                </el-card>
              </el-space>
            </el-aside>
            <!-- Main Coding Area -->
            <el-main>Main</el-main>
          </el-container>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>

<script>
import { reactive } from "vue";

let wishlistList = reactive([
  {
    wishlistItem_Id: 1,
    cityName: "Example City Name1",
    state: "Example State",
    startTime: "date1",
    endTime: "date2",
    details: "Plans",
  },
  {
    wishlistItem_Id: 2,
    cityName: "Example City Name2",
    state: "Example State",
    startTime: "date1",
    endTime: "date2",
    details: "Plans",
  },
]);

export default {
  name: "WishListPage",
  data() {
    return { wishlistList };
  },
};
</script>

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>