漫漫鐵人三十天挑戰，終於也快到了尾聲呢，就用待購清單來收尾吧！

開發紀錄

畫面初始化

首先先把初始畫面弄出來，這邊分成主頁面及每一張看板卡的 component：

@/views/Buy/index.vue

<template>
  <div class="pg-to-buy-list">
    <h2 class="pg-to-buy-list__title">待購清單</h2>
    <el-card>
      <div class="pg-to-buy-list__card-container">
        <to-buy-list-card class="pg-to-buy-list__card"
                          :key="item.id"
                          v-for="item in cardList"
                          :title="item.title"
                          :list="item.list" />
      </div>
    </el-card>
  </div>
</template>

@/components/ToBuyListCard/index.vue

<template>
  <div class="cp-to-buy-list-card">
    <div class="cp-to-buy-list-card__title">
      <h3>{{title}}</h3>
    </div>
    <div class="cp-to-buy-list-card__item-container"
         :id="title">
      <div class="cp-to-buy-list-card__item"
           :key="item"
           v-for="item in list">
        <p>{{item}}</p>
      </div>
    </div>
  </div>
</template>

資料結構

其中上面的資料結構由父層頁面傳給四個卡片 component：

data() {
  return {
    cardList: [
      {
        id: 'want',
        title: '想要',
        list: ['iPhone 11 Pro Max', 'BOSE Lifestyle 600']
      },
      {
        id: 'need',
        title: '需要',
        list: ['筆電背包', '眼鏡', '手錶']
      },
      {
        id: 'satisfy',
        title: '滿足',
        list: ['空氣清淨機', '電磁爐', 'Brita 濾水壺']
      },
      {
        id: 'sublimate',
        title: '昇華',
        list: ['任天堂 Switch', 'PS4', 'AirPods']
      }
    ]
  }
},

樣式排版

這邊主要利用 Flexbox 做排版：

@/views/Buy/index.vue

.pg-to-buy-list {
  &__title {
    margin-bottom: 1.5rem;
  }
  &__card-container {
    max-width: 960px;
    min-height: 320px;
    margin: 2rem auto;
    display: flex;
    justify-content: space-around;
  }
}

@/components/ToBuyListCard/index.vue

.cp-to-buy-list-card {
  width: 200px;
  background-color: #aaa;
  &__title {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #999;
    line-height: 4rem;
    vertical-align: middle;
  }
  &__item-container {
    display: flex;
    flex-direction: column;
  }
  &__item {
    width: 90%;
    height: 3rem;
    background-color: #ddd;
    margin: 0.5rem auto;
    text-align: center;
    line-height: 3rem;
    vertical-align: middle;
  }
}

今日成果

今天先把初始畫面、資料結構及元件切好，並做一下簡單的排版，明天要來使用 dragula 這個套件完成拖拉操作。

今天先到這，我們明天見！