Day25-实作

终於到了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/[email protected]/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