material-shop-user/pages/new-tabbar/findStore/index.vue

<template>
    <div class="findStore">
        <Nav>
            <template #title>
                <p>找店铺</p>
            </template>
        </Nav>
        <div class="market">
            <div class="mark-list">
                <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="marketScrollLeft" scroll-with-animation>
                    <view class="scroll-view-item_H" v-for="(item, index) in marketList" :key="index"
                        :class="index == idx ? 'active' : ''" @click="marketClick(index)">{{ item }}
                    </view>
                </scroll-view>
            </div>
            <div class="material-list">
                <scroll-view class="scroll-view-material" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
                    <view class="material-item" v-for="(item, index) in materialList" :key="index"
                        :class="index == materIdx ? 'active' : ''" @click="materialClick(index)">{{ item }}</view>
                </scroll-view>
            </div>
        </div>
        <main>
            <div class="shops-list">
                <div class="shop-item" v-for="item in 10" :key="item">
                    <div class="title">
                        <p>佛山市顺德区正一<span>五金工具</span>有限公司</p>
                        <div class="talk">洽谈</div>
                    </div>
                    <div class="info">
                        <div class="favorable">
                            <div class="finger">好评指数</div>
                            <div class="star">
                                <tui-rate :hollow="true" active="#EF530E" normal="#EF530E" :current="4" :score="0.5" :size="16" disabled></tui-rate>
                                <p>
                                    <span>5星工厂</span>
                                    <tui-icon name="arrowright" size="16" color="#EF530E"></tui-icon>
                                </p>
                            </div>
                        </div>
                        <div class="brand">
                            <div class="img-box">
                                <img src="../../../static/new-images/findStore/icon.png" alt="">
                                <p>品牌工厂</p>
                            </div>
                            <span>7年</span>
                        </div>
                    </div>
                    <div class="text">
                        <span>支持定制</span>
                        <span>批量采购</span>
                        <span>58%回头率</span>
                        <p>广东佛山</p>
                    </div>
                    <div class="product-list">
                        <div class="product-item" v-for="(item, index) in 6">
                            <template v-if="index <= 2">
                                <div class="img">
                                    <tui-lazyload-img width="100%" height="100%" radius="20rpx"
                                        :src="'../../../static/new-images/findStore/product.png' || ''"></tui-lazyload-img>
                                </div>
                                <p>兔拉拉环保型高 温中温低热54522温中温低热54522</p>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import Nav from "../components/Nav.vue"
export default {
    components: {
        Nav
    },
    data() {
        return {
            marketList: ['亚洲材料城', '亚太木业城', '水藤木材市场', '沙龙材料市场', '亚洲材料城', '亚太木业城', '水藤木材市场', '沙龙材料市场'],
            marketScrollLeft: 0,
            materialList: ['皮革', '布艺材料', '塑料五金', '石材', '木材', '化工涂料', '填充材料', '辅料', '快捷服务'],
            scrollLeft: 0,
            idx: 0, // 材料城的激活态
            materIdx: 0,  //  材料的激活态
        }
    },
    methods: {
        marketClick(index) {
            this.idx = index
            this.marketScrollLeft = index * 30
        },
        materialClick(index) {
            this.materIdx = index
            this.scrollLeft = index * 15
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #F5F5F5;
}

.findStore {
    .market {
        padding: 30rpx 25rpx;
        box-sizing: border-box;

        .mark-list {
            color: rgba(0, 0, 0, .5);

            .scroll-view_H {
                white-space: nowrap;
                width: 100%;

                .scroll-view-item_H {
                    display: inline-block;
                    margin-left: 40rpx;

                    &:first-of-type {
                        margin-left: 0;
                    }
                }

                .active {
                    font-size: 36rpx !important;
                    color: #000;
                    font-weight: 600;
                }

            }
        }

        .material-list {
            color: rgba(0, 0, 0, .5);
            white-space: nowrap;
            width: 100%;
            margin-top: 35rpx;

            .material-item {
                display: inline-block;
                padding: 4rpx 8rpx;
                background-color: #fff;
                margin-left: 15rpx;
                box-sizing: border-box;
                border: 1rpx solid transparent;

                &:first-of-type {
                    margin-left: 0;
                }
            }

            .active {
                background-color: #FBF4F4;
                border-color: #EF530E;
                color: #EF530E;
            }
        }
    }

    main {
        padding: 30rpx;

        .shops-list {
            display: flex;
            flex-direction: column;
            gap: 25rpx;

            .shop-item {
                padding: 30rpx;
                background-color: #fff;
                border-radius: 20rpx;

                .title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    p {
                        font-size: 32rpx;
                        color: #000;
                        font-weight: 550;
                        width: 82%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        span {
                            color: #EF530E;
                        }
                    }

                    .talk {
                        padding: 10rpx 25rpx;
                        background-color: #FFF2EC;
                        color: #EF530E;
                        font-size: 28rpx;
                        border-radius: 50rpx;
                    }
                }

                .info {
                    display: flex;
                    align-items: center;
                    padding-top: 30rpx;

                    .favorable {
                        display: flex;
                        align-items: center;
                        height: 50rpx;

                        .finger {
                            height: 100%;
                            background-color: #EF530E;
                            padding: 0 15rpx;
                            color: #fff;
                            font-weight: 500;
                            font-size: 28rpx;
                            text-align: center;
                            line-height: 50rpx;
                            border-radius: 10rpx;
                        }

                        .star {
                            display: flex;
                            align-items: center;
                            background-color: #FBF4F4;
                            height: 100%;
                            gap: 5rpx;
                            padding-left: 10rpx;
                            color: #EF530E;
                            font-size: 22rpx;
                            p {
                                display: flex;
                                gap: 5rpx;
                                align-items: center;
                            }
                        }
                    }

                    .brand {
                        display: flex;
                        align-items: center;
                        margin-left: 10rpx;
                        gap: 10rpx;

                        .img-box {
                            display: flex;
                            align-items: center;
                            gap: 3rpx;
                            font-size: 24rpx;
                            font-weight: 600;

                            img {
                                width: 25rpx;
                                height: 25rpx;
                                display: block;
                            }

                            p {
                                border-right: 1rpx solid #D8D8D8;
                                padding-right: 10rpx;
                            }
                        }
                    }
                }

                .text {
                    margin-top: 25rpx;
                    display: flex;
                    gap: 15rpx;
                    align-items: center;
                    font-size: 24rpx;
                    color: rgba(0, 0, 0, 0.5);

                    span {
                        position: relative;
                        padding-right: 10rpx;

                        &::after {
                            content: "";
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 1rpx;
                            height: 80%;
                            background-color: #D8D8D8;
                        }
                    }
                }

                .product-list {
                    display: flex;
                    align-items: center;
                    gap: 25rpx;
                    margin-top: 20rpx;

                    .product-item {
                        width: 200rpx;

                        .img {
                            width: 200rpx;
                            height: 200rpx;
                        }

                        p {
                            margin-top: 10rpx;
                            padding-right: 10rpx;
                            box-sizing: border-box;
                            font-size: 26rpx;
                            height: 72rpx;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
}
</style>