CZKJ.YOUXUAN/src/pages/shop/index.vue

<template>
    <div class="page">
        <section class="shop-info">
            <div class="head-bg">
                <my-image
                    src="/static/test/bg.jpg"
                    :mode="'aspectFill'"
                    class="bg"
                ></my-image>
                <div class="search">
                    <i class="iconfont iconsearch search-icon"></i>
                    <input
                        type="text"
                        class="input"
                        placeholder="搜索店内商品"
                    />
                </div>
                <div class="info">
                    <div class="main">
                        <div class="info-l">
                            <div class="name">
                                永辉超市（苍溪县如已成店）永辉超市（苍溪县如已成店）
                            </div>
                            <ul class="tag-list">
                                <li class="tag-item">
                                    <i
                                        class="iconfont icontime icon"
                                        style="color: #de9838"
                                    ></i>
                                    配送45分钟
                                </li>
                                <li class="tag-item">
                                    <i
                                        class="iconfont iconwaimai icon"
                                        style="color: #e89b41"
                                    ></i>
                                    美团专送
                                </li>
                                <li class="tag-item">
                                    <i
                                        class="iconfont icontag icon"
                                        style="color: #39ad96"
                                    ></i>
                                    月售1952
                                </li>
                            </ul>
                        </div>
                        <div class="info-r">
                            <my-image
                                src="/static/test/avatar.jpg"
                                class="img"
                            ></my-image>
                        </div>
                    </div>
                    <div class="notice">公告：欢迎光临，很高兴为您服务~</div>
                </div>
            </div>
        </section>

        <section class="shop-other">
            <div class="discount">
                <div class="l">
                    <h3 class="name">优惠</h3>
                    <span class="tag">3折起</span>
                    <span class="tag">首单减20</span>
                </div>
                <i class="iconfont iconarrow r-icon"></i>
            </div>
            <scroll-view class="coupon-list" :scroll-x="true">
                <ul class="list-main">
                    <li class="coupon-item">
                        <div class="info">
                            <div class="money">
                                <span class="symbol">￥</span>
                                85
                            </div>
                            <div class="des">
                                <div class="text">满89可用</div>
                                <div class="type">店铺券</div>
                            </div>
                        </div>
                        <div class="tool">领取</div>
                    </li>
                    <li class="coupon-item ghost">
                        <div class="info">
                            <div class="money">
                                <span class="symbol">￥</span>
                                85
                            </div>
                            <div class="des">
                                <div class="text">满89可用</div>
                                <div class="type">店铺券</div>
                            </div>
                        </div>
                        <div class="tool">已领取</div>
                    </li>
                    <li class="coupon-item ghost">
                        <div class="info">
                            <div class="money">
                                <span class="symbol">￥</span>
                                85
                            </div>
                            <div class="des">
                                <div class="text">满89可用</div>
                                <div class="type">店铺券</div>
                            </div>
                        </div>
                        <div class="tool">去使用</div>
                    </li>
                </ul>
            </scroll-view>
            <div class="ranking">
                <span class="tag">榜单</span>
                广元超市便利人气榜第3名
            </div>

            <div class="score">
                <div class="l">
                    <div class="num">
                        4.6
                    </div>
                    <div class="info">
                        <div class="text">“很棒不错，包装也好”</div>
                        <div class="des">
                            <span>好评 926</span>
                            <span>满意 926</span>
                            <span>服务号 926</span>
                            <span>价格实惠 926</span>
                        </div> 
                    </div>
                </div>
                <i class="iconfont iconarrow r-icon"></i>
            </div>
        </section>

        <category></category>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import Category from "./category";

export default {
    name: "",
    components: { MyImage,Category },
    // 数据
    data() {
        return {};
    },
    filters: {},
    onLoad() {},
    async onShow() {},

    // onPullDownRefresh() {
    //     this.getList();
    // },

    // 函数
    methods: {},

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.page {
    background-color: #fff;
}
.shop-info {
    .head-bg {
        .bg {
            width: 100%;
            height: px(400);
            /deep/ {
                img {
                    width: 100%;
                    height: px(400);
                }
            }
        }
        .search {
            background: #fff;
            height: px(84);
            border-radius: px(42);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: px(-340) px(30) 0;
            padding: 0 px(45);
            box-shadow: 0 1px 10px -5px #a7a7a7;
            .input {
                width: 100%;
                font-size: px(40);
            }
            .search-icon {
                font-size: px(50);
                color: #666;
                margin-right: px(20);
            }
        }
        .info {
            background: #fff;
            margin: px(60) px(30) 0;
            border-radius: px(30);
            padding: px(40);
            box-shadow: 0 1px 10px -5px #a7a7a7;
            .main {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .name {
                font-size: px(50);
                margin-bottom: px(30);
                @include omits(1);
            }
            .tag-list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin: 0 px(-15);
                .tag-item {
                    font-size: px(32);
                    padding: px(0) px(15);
                    display: flex;
                    align-items: center;
                    & ~ .tag-item {
                        border-left: 1px solid #f1f1f1;
                    }
                }
                .icon {
                    font-size: px(36);
                    margin-right: px(10);
                }
            }
            .info-r {
                width: px(180);
                flex-shrink: 0;
                margin-left: px(20);
                .img {
                    display: block;
                    border-radius: px(20);
                    overflow: hidden;
                    width: px(180);
                    height: px(180);
                    /deep/ img {
                        width: px(180);
                        height: px(180);
                    }
                }
            }
            .notice {
                margin-top: px(25);
                font-size: px(36);
                color: #999;
            }
        }
    }
}
.shop-other {
    margin-top: px(60);
    .discount {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px(70);
        padding-bottom: px(30);
        .r-icon {
            color: #666;
            font-size: px(44);
            margin-left: px(10);
            transform: rotate(180deg);
        }
        .l {
            display: flex;
            align-items: center;
        }
        .name {
            font-size: px(44);
            margin-right: px(30);
        }
        .tag {
            height: px(44);
            font-size: px(32);
            line-height: px(44);
            padding: 0 px(8);
            display: inline-block;
            margin-right: px(15);
            color: $color;
            border: 1px solid $color;
            border-radius: px(5);
        }
    }
    .coupon-list {
        width: 100%;
        padding-bottom: px(30);
        .list-main {
            padding-left: px(70);
            padding-right: px(1);
            display: flex;
            width: 100%;
        }
        .coupon-item {
            flex-shrink: 0;
            background: #fd6967;
            border-radius: px(10);
            display: inline-flex;
            justify-content: space-between;
            align-items: stretch;
            color: #fff;
            // border: 1px solid #fd6967;
            box-shadow: 0 0 1px #fd6967 inset;
            & ~ .coupon-item {
                margin-left: px(20);
            }
            &.ghost {
                background-color: #fef2f2;
                color: #fd6967;
                .info {
                    &::after,
                    &::before {
                        box-shadow: 0 0 1px #fd6967 inset;
                    }
                }
            }
            .tool {
                width: px(120);
                height: px(120);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: px(34);
            }
            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: px(120);
                padding: px(10) px(45) px(10) px(30);
                overflow: hidden;
                position: relative;
                &::after,
                &::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    z-index: 1;
                    width: px(28);
                    height: px(28);
                    border-radius: px(50);
                    background-color: #fff;
                }
                &::after {
                    top: px(-15);
                }
                &::before {
                    bottom: px(-15);
                }
                .money {
                    font-size: px(44);
                    margin-right: px(20);
                    flex-shrink: 0;
                    .symbol {
                        font-size: px(34);
                        margin-right: px(5);
                    }
                }
                .des {
                    .text {
                        font-size: px(34);
                    }
                    .type {
                        margin-top: px(10);
                        font-size: px(32);
                    }
                }
            }
        }
    }
    .ranking {
        padding: px(30) px(70);
        font-size: px(40);
        line-height: px(56);
        border-top: 1px solid #f1f1f1;
        .tag {
            display: inline-block;
            font-size: px(36);
            height: px(56);
            padding: 0 px(10);
            background-color: #f0d3b3;
            color: #976c49;
            margin-right: px(30);
            border-radius: px(5);
        }
    }
    .score{
        padding: px(30) px(70);
        font-size: px(40);
        line-height: px(56);
        border-top: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .r-icon {
            color: #666;
            font-size: px(44);
            margin-left: px(10);
            transform: rotate(180deg);
        }
        .l{
            display: flex;
            align-items: center;
            .num{
                width: px(88);
                height: px(88);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: px(40);
                background-color: #fff4e6;
                color: #666;
                flex-shrink: 0;
                margin-right: px(30);
            }
            .info{
                .text{
                    font-size: px(40);
                    @include omits(1);
                }
                .des{
                    margin-top: px(10);
                    color: #999;
                    span{
                        display: inline-block;
                        padding: 0 px(8);
                        font-size: px(34);
                        line-height: 1;
                        &~span{
                            border-left: 1px solid #f1f1f1;
                        }
                    }
                }
            }
        }
    }
}
</style>