Vue.js+Koa2移動電商實戰5

首頁搜索區域的佈局

　解決小問題

　　但頁面很大的時候，咱們做的移動適配方案會呈現很大的字體，這不是咱們想要的。因此加一個判斷，解決頁面字體過大的問題。
　　在 index.html的script里加入判斷頁面的語句。

 if(htmlWidth>750){htmlWidth=750}

　　當頁面寬度大於750px時，咱們就把頁面的寬度設置成750像素。

　　搜索條的佈局（search bar）

　　*** 1. icon圖標的下載 ***

　　利用van-row和van-col咱們快速佈局一個搜索條的html骨架出來，代碼以下。

 
<!--search bar layout-->
<div class="search-bar">
    <van-row>
        <van-col span="3">icon</van-col>
        <van-col span="16">serach input</van-col>
        <van-col span="5">button</van-col>
    </van-row>
</div>
 

　　*** 2. icon圖標的下載 ***

　　圖標的下載咱們依然在iconfont(網址：http://www.iconfont.cn/)進行下載，
　　找到本身喜歡的圖標後，咱們新建images文件夾，目錄爲src/assets/images,之後會把全部的項目圖片都放到這裏。

　　*** 3. 正確引入圖片 ***
　　有不少小夥伴都在引入圖片時摘了跟頭，有的是開發時引入錯誤，有的是開發完成後，build時路徑不對了。若是用require引入圖片，在不做任何配置的狀況下就能夠基本解決你的圖片路徑問題。
　　先把圖片用require引進到頁面中：

export default {
    data() {
        return {
            locationIcon: require('../../assets/images/location.png')
        }
    },
}
 

　　而後經過綁定屬性的方法插入圖片

<van-col span="3"><img :src="locationIcon" width="100%" /></van-col>

　　這時候進行預覽，圖片已經正常顯示在瀏覽器中了。

　　*** 4. 寫input和button ***

　　這裏都是CSS樣式和基本的html結構，因此直接上代碼了。視頻中我會做講解說明，你能夠徹底拷貝下面的代碼來看效果，而後進行修改學習。

<template>
    <div>
<!--search bar layout-->
<div class="search-bar">
    <van-row gutter="5">
        <van-col span="3"><img :src="locationIcon" width="80%" class="location-icon" /></van-col>
        <van-col span="16">
          <input type="text" class="search-input"/>
        </van-col>
        <van-col span="5"><van-button size="mini">查找</van-button></van-col>
       
    </van-row>
</div>
    </div>
</template>
 
<script>
 
 
export default {
    data() {
        return {
            locationIcon: require('../../assets/images/location.png')
        }
    },
}
</script>
 
<style scoped>
  .search-bar{
      height: 2.2rem;
      background-color: #e5017d;
      line-height:2.2rem;
 
  }
  .search-input{
      width:100%;
      height: 1.3rem;
      border-top:0px;
      border-left:0px;
      border-right:0px;
      border-bottom: 1px solid 1px !important ;
      background-color: #e5017d;
      color:#fff;
  }
  .location-icon{
      padding-top: .2rem;
      padding-left: .3rem;
  }
 
</style>