Day25-實作

13th鐵人賽

hsiu753

團隊寫 code 需要講幹話

2021-10-10 19:12:30

821 瀏覽

分享至

終於到了30天的尾聲，該學的都學了! 接下來就是運用在實際的案例上。剩下的這幾天我要跟著「重新認識Vue.js」口罩地圖範例來製作，驗收一下所學的到底會不會用?

建立環境

建立一個新的專案

vue create mask-demo-app

套件選擇，vue版本選3.x

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 (*) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
>( ) Unit Testing
 ( ) E2E Testing

最後一步

npm run serve

專案結構

建立好的結構如下圖

Untitled

網頁元件結構

口罩地圖分成三個元間 : 列表(左)、地圖(右)、燈箱 (實際範例請見書中連結)

Untitled

建立基礎介面

在專案中的/public/index.html中加入需要的css

<head>
	<!--略-->
	
	<!-- reset -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<!-- font-awesome -->
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
	<!-- leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>

改寫src/App.vue (為了省去css與模板寫的時間書中提供參考文件)

<template>
<div id="app">
  <!-- aside-menu 左側欄 -->
  <div class="aside-menu">
    <div class="wraps">
      <label>
        縣市：<select><option>台北市</option></select>
      </label>
      <label>
        行政區：<select><option>北投區</option></select>
      </label>
    </div>

    <div class="wraps">
      <label>
        <i class="fas fa-search-location"></i> 關鍵字搜尋：
        <input type="text" placeholder="請輸入關鍵字">
      </label>
    </div>

    <ul class="store-lists">
      <li class="store-info wraps">
        <h1>ＸＸ藥局</h1>

        <div class="mask-info">
          <i class="fas fa-head-side-mask"></i>
          <span>大人口罩: 100 個</span>
        </div>

        <div class="mask-info">
          <i class="fas fa-baby"></i>
          <span>兒童口罩: 100 個</span>
        </div>

        <div class="mask-info">
          最後更新時間:
        </div>

        <button class="btn-store-detail">
          <i class="fas fa-info-circle"></i>
          看詳細資訊
        </button>
      </li>
      <li class="store-info wraps">
        <h1>ＸＸ藥局</h1>

        <div class="mask-info">
          <i class="fas fa-head-side-mask"></i>
          <span>大人口罩: 100 個</span>
        </div>

        <div class="mask-info">
          <i class="fas fa-baby"></i>
          <span>兒童口罩: 100 個</span>
        </div>

        <div class="mask-info">
          最後更新時間:
        </div>

        <button class="btn-store-detail">
          <i class="fas fa-info-circle"></i>
          看詳細資訊
        </button>
      </li>
      <li class="store-info wraps">
        <h1>ＸＸ藥局</h1>

        <div class="mask-info">
          <i class="fas fa-head-side-mask"></i>
          <span>大人口罩: 100 個</span>
        </div>

        <div class="mask-info">
          <i class="fas fa-baby"></i>
          <span>兒童口罩: 100 個</span>
        </div>

        <div class="mask-info">
          最後更新時間:
        </div>

        <button class="btn-store-detail">
          <i class="fas fa-info-circle"></i>
          看詳細資訊
        </button>
      </li>
    </ul>

  </div>

  <!-- 地圖區塊 -->
  <div class="mask-map" id="mask-map"></div>
</div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss" src="./style.scss"></style>

在src下建立一個style.scss

#app {
    display: block;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    * {
        box-sizing: border-box;
    }
    > div {
        float: left;
    }
}

.aside-menu {
    width: 25%;
    height: 100%;
    border-right: 1px solid #aaa;
    background-color: #f1f1f1;
    overflow-y: scroll;
    label {
        position: relative;
        margin-right: 2em;
        display: block;
        font-size: 1.2rem;
        line-height: 2;
    }
    select {
        position: absolute;
        margin-top: 0.3rem;
        left: 6rem;
        font-size: 1.2rem;
        width: auto;
        min-width: 110px;
    }
    input {
        padding: 2px 8px;
        font-size: 1.2rem;
        line-height: 2;
        width: 110%;
    }
}

.mask-map {
    position: relative;
    width: 75%;
    height: 100%;
    background-color: #aaa;
    z-index: 10;
    &.full {
        width: 100%;
    }
}

.wraps {
    padding: 1em;
    border-bottom: 1px solid #666;
}

.store-info {
    position: relative;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1.8;
    background-color: #fff;
    h1 {
        font-size: 1.5rem;
        font-weight: 500;
        color: #333;
        margin-bottom: 0.3em;
    }
    .mask-info {
        position: relative;
        > span {
            position: absolute;
            left: 1.8rem;
        }
    }
    &::v-deep .highlight {
        color: #f08d49;
    }
    &:hover {
        background-color: #eee;
    }
    .btn-store-detail {
        position: absolute;
        display: block;
        cursor: pointer;
        width: 80px;
        height: 80px;
        text-align: center;
        right: 1.2rem;
        top: 1.5rem;
        font-size: 0.8rem;
        > i {
            display: block;
            font-size: 2rem;
            margin-bottom: 5px;
        }
    }
}

.popup-name {
    font-size: 1.25rem;
}

就可以得到一個基礎模板的樣子了!!

Untitled