gowhere

489

import 'css/reset.css'

reset.css
html{
 font-size:50px;
}
a{
 text-decoration: none;
}

cnpm i fastclick -S

main.js
import FastClick from 'fastclick'
FastClick.attach(document.body)

iconfont

font文件夹
.svg
.eot
.ttf
.woff

修改引用路径


import 'css/iconfont.css'

490


App.vue
<router-view>

router.js
import Home from '@/components/home/Home'

routers:[
	{
		path:'/',
		name:'Home',
		component:Home
	}
]

491

<template>
        <div class="header">
            <div class="header-left">
                <span class="iconfont">&#xe624;</span>
            </div>
            <div class="header-search"><span class='iconfont'>
            &#xe632;
         </span>输入城市/景点/游玩主题
            </div>
            <div class="header-right">北京<span class='iconfont'>&#xe6aa;</span></div>
        </div>
</template>

<style scoped>
    .header {
        display: flex;
        width: 100%;
        background: #00bcd4;
        color: #fff;
        font-size: .36rem;
        line-height: .88rem;
    }

    .header-left {
        width: .4rem;
        padding: 0 .2rem;
        text-align: center;
        font-weight: bold;
    }

    .header-search {
        flex: 1;
        background: #ffffff;
        height: .6rem;
        margin: .14rem 0;
        border-radius: .1rem;
        color: #e4e7ea;
        line-height: .6rem;
        font-size: .28rem;
        padding-left: .2rem;
    }

    .header-right {
        font-size: .28rem;
        padding: 0 .2rem;
    }
    .header-right a {
        color: #ffffff;
    }

</style>

来源：oschina

链接：https://my.oschina.net/u/4243251/blog/4259317