11の都市でVue2.5観光プロジェクトインスタンスの選択ページ - 検索ボックスのレイアウト

都市検索：ブランチを作成します

そして、ローカルブランチの切り替えを引っ張っ：

gitのプル
gitのチェックアウトの都市検索

新Search.vueファイル：

< テンプレート> 
< divのクラス= "検索" > 
  < 入力クラス= "検索入力" タイプ= "テキスト" プレースホルダ= "输入城市名或拼音"  /> 
</ DIV > 
</ テンプレート> 

< スクリプト> 
輸出デフォルト{ 
  名前：' Citysearchの' 
} 
</ スクリプト> 

< スタイルLANG = "スタイラス" スコープ> 
@import '〜スタイル/ varibles.styl'
.search  
  パディング：0 .1rem
  高さ：.72rem
  背景：$はbgColor 
  .search入力
    ボックスサイズ：境界ボックスの
    パディング：0 .1rem 
    幅：100％
    高さ：.62rem 
    行の高さ：.62rem 
    テキスト整列：中央
    境界半径：.06rem 
    色：＃666 
< / スタイル>

リターンCity.vueにコンポーネントを追加します。

< テンプレート> 
< divの> 
  < 都市ヘッダ> </ 都市ヘッダ> 
  < 都市-検索> </ 都市検索> 
</ DIV > 
</ テンプレート> 

< スクリプト> 
からの輸入CityHeader ' ./components/Header ' 
インポートCitysearchの' ./components/Search ' 
輸出デフォルト{ 
  ：名前' 市' 、
  コンポーネント：{ 
    CityHeader、
    Citysearchの
  } 
}
</ スクリプト>

この時のレンダリング時：

コードをアップロードし、マスターに組み込ま：

gitのアドオン。
-m「都市検索」コミットgitの
gitのプッシュ

gitのチェックアウトマスター
Gitのマージ市-検索
gitのプッシュ