uniapp商城基础示例

第一章:首页

首先咱们要知道一个事情，Unicode都支持

可是那两个，有时候你会发现部分手机或者浏览器乱码

---

下载后会有一个包，名字基本相同"iconfont"
咱们只拿走2样东西，iconfont.css和iconfont.ttf
如图:home里面header就是顶部搜索栏，iconfont就是咱们刚才下载的css

把css调试成这样，等会直接在app.vue里全局使用

---

less或sass安装

以前我提过，建立uniapp以后须要安装less组件
可是安装他默认关闭！须要本身开启。

---

咱们将这里建立以后！就把这些跟Vue同样

<template>
    <view class="header">
        <view class="addr">
            <view class="icon iconfont">
                &#xe650;
            </view>
            {{city}}
        </view>
        <!--↑这个是当前坐标， 以及左侧图标-->
        
        <view class="input-box">
            <input type="text" placeholder="请搜索你想要的" placeholder-style="color:    #c0c0c0" />
            <view class="icon iconfont">
                &#xe65c;
            </view>
        </view>
        
        <view class="icon-btn">
            <view class="icon iconfont">
                &#xe70a;
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                city:"北京"
            }
        }
    }
</script>

<style lang="less">
    .header {
        width: 92%;
        padding: 0 4%;
        height: 100upx;
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 10;
        background-color: #fff;
        top: 0;
        /*  #ifdef  APP-PLUS  */
        top: var(--status-bar-height);
        /*  #endif  */
    
        .addr {
            width: 120upx;
            height: 60upx;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-size: 28upx;
            .icon {
                height: 60upx;
                margin-right: 5upx;
                display: flex;
                align-items: center;
                font-size: 42upx;
                color: #ffc50a;
            }
        }
        .input-box {
            width: 100%;
            height: 60upx;
            background-color: #f5f5f5;
            border-radius: 30upx;
            position: relative;
            display: flex;
            align-items: center;
            .icon {
                display: flex;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                width: 60upx;
                height: 60upx;
                font-size: 34upx;
                color: #c0c0c0;
            }
            input {
                padding-left: 28upx;
                height: 28upx;
                font-size: 28upx;
            }
        }
        .icon-btn {
            width: 60upx;
            height: 60upx;
            flex-shrink: 0;
            display: flex;
            .icon {
                width: 60upx;
                height: 60upx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 42upx;
            }
        }
    }
    .place {
        background-color: #ffffff;
        height: 100upx;
        /*  #ifdef  APP-PLUS  */
        margin-top: var(--status-bar-height);
        /*  #endif  */
    }
</style>

---

上面的header.vue引过来
在Home这里会有一个问题，该死的顶部有标题严重错位

<template>
    <xHeader></xHeader>
</template>

<script>
    import xHeader from "./header.vue"
    export default{
        data(){
            return{
                
            }
        },
        components:{
            "xHeader":xHeader
        }
    }
</script>