deming/pages/shop/index.vue

<template>
    <view class="shop">
        <view class="top">
            <image class="local"></image>
            <view class="add">
                <text></text>
                <image></image>
            </view>
            <u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999"></u-search>
            <image class="mnue"></image>
        </view>
        <u-swiper :list="list"></u-swiper>
        <view class="chengnuo">
            <view>
                <image></image>
                <text>免费洗衣</text>
            </view>
            <view>
                <image></image>
                <text>全国包邮</text>
            </view>
            <view>
                <image></image>
                <text>延误必赔</text>
            </view>
            <view>
                <image></image>
                <text>上门取件</text>
            </view>
        </view>
        <view class="fenlei">
            <shopitem v-for="item in 5" class="item"></shopitem>
        </view>
        <view class="fenlei">
            <shopitem v-for="item in 5" class="item"></shopitem>
        </view>
        <view class="hr" style="margin-top:80rpx"></view>
        <recommend></recommend>
        <view class="hr" style="margin-top:40rpx"></view>
        <seckill></seckill>
        <view class="hr" style="margin-top:40rpx"></view>
        <recommend></recommend>
        <view class="hr" style="margin-top:40rpx"></view>
        <group></group>
        <image class="lingquan"></image>
        <youhq></youhq>
        <view class="hr" style="margin-top:40rpx"></view>
        <list></list>
    </view>
</template>
<script>
import shopitem from "@/components/shop/shop-item/index"
import recommend from "@/components/shop/recommend/index"
import seckill from "@/components/shop/seckill/index"
import group from "@/components/shop/group/index"
import youhq from "@/components/shop/youhq/index"
import list from "../../components/shop/list/index"

export default {
    name:"shop",
    components:{
        shopitem,
        recommend,
        seckill,
        group,
        youhq,
        list
    },
    data(){
        return {
            keyword:"",
            list:[{
						image: '/static/uView/swiper/swiper1.jpg',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},
					{
						image: '/static/uView/swiper/swiper2.jpg',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					},
					{
						image: '/static/uView/swiper/swiper3.jpg',
						title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
					}
				]
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/image{
    background-color: #0f0;
}
.shop{
    padding: 0 33rpx;
    .top{
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        .local{
            width: 31rpx;
            height: 37rpx;
        }
    }
    .add{
        width: 115rpx;
        height: 25rpx;
        display: flex;
        font-size: 26rpx;
        color: #333;
        justify-content: space-between;
        align-items: center;
        margin-left: 14rpx;
        margin-right: 37rpx;
        >image{
            width: 24rpx;
            height: 15rpx;
        }
    }
    .mnue{
        width: 35rpx;
        height: 26rpx;
        margin-left: 36rpx;
    }
    .chengnuo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24rpx;
        >view{
            display: flex;
            align-items: center;
            >image{
                width: 23rpx;
                height: 23rpx;
            }
            >text{
                font-size: 22rpx;
                color: #999;
                margin-left: 8rpx;
            }
        }
    }
    .fenlei{
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
    }
    .hr{
        width: 750rpx;
        margin-left: -33rpx;
        height: 20rpx;
        background-color: #ececec;
    }
    .lingquan{
        width: 750rpx;
        height: 177rpx;
        margin-left: -33rpx;
        margin-top: 29rpx;
        background-color: #ececec;
    }
}  
</style>