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

<template>
    <div class="findServices">
        <header>
            <div class="title">找服务</div>
            <div class="service-list">
                <div class="service-item">
                    <img src="../../../static/new-images/findServices/give_1.png" alt="">
                    <span class="act">材料检测</span>
                </div>
                <div class="service-item">
                    <img src="../../../static/new-images/findServices/give_2.png" alt="">
                    <span>跨境支付</span>
                </div>
                <div class="service-item">
                    <img src="../../../static/new-images/findServices/give_3.png" alt="">
                    <span>跨境物流</span>
                </div>
                <div class="service-item">
                    <img src="../../../static/new-images/findServices/give_4.png" alt="">
                    <span>国内物流</span>
                </div>
                <div class="service-item">
                    <img src="../../../static/new-images/findServices/give_5.png" alt="">
                    <span>金融服务</span>
                </div>
            </div>
        </header>
        <main>
            <div class="left">
                <scroll-view scroll-top="0" scroll-y="true" class="detection-list">
                    <view class="detection-item" v-for="(item, index) in detectionList" :key="index"
                        :class="index == leftIdx ? 'active' : ''" @click="leftClick(index)">{{ item }}</view>
                </scroll-view>
            </div>
            <div class="right">
                <div class="bg-box"></div>
                <scroll-view scroll-top="0" scroll-y="true" class="institution-list">
                    <view class="institution-item" v-for="(item, index) in 10" :key="index">
                        <div class="img-box">
                            <tui-lazyload-img width="100%" height="100%"
                                :src="'../../../static/new-images/findServices/institution_1.png' || ''"></tui-lazyload-img>
                        </div>
                        <div class="text-box">
                            <div class="title">天鉴检测机构</div>
                            <ul>
                                <li>专业鉴定</li>
                                <li>官方机构</li>
                            </ul>
                            <span><tui-rate :current="5" :quantity="5" active="#FFC01F" :size="15"></tui-rate></span>
                            <p>广东 · 佛山</p>
                        </div>
                        <template v-if="index < 3">
                            <div class="top">
                                <img :src="'../../../static/new-images/findServices/top_' + (index + 1) + '.png'" alt="">
                            </div>
                        </template>
                    </view>
                </scroll-view>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //  左边侧边栏的激活态
            leftIdx: 0,
            detectionList: ['棉花检测', '金属检测', '石材检测', '木材检测', '涂料检测', '甲醛检测', '皮革检测', '房屋检测', '其他检测']
        }
    },
    methods: {
        leftClick(val) {
            this.leftIdx = val
        }
    }
}
</script>

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

.findServices {
    display: flex;
    flex-direction: column;
    height: 100%;

    header {
        padding: 30rpx 30rpx 25rpx;
        background-color: #fff;

        .title {
            font-size: 42rpx;
            font-weight: 700;
        }

        .service-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20rpx;
            box-sizing: border-box;
            margin-top: 50rpx;
            gap: 40rpx;

            .service-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 20rpx;
                color: rgba(0, 0, 0, 0.5);
                font-size: 24rpx;

                img {
                    width: 80rpx;
                    height: 80rpx;
                }

                .act {
                    color: #000;
                }
            }
        }
    }

    main {
        width: 100%;
        flex: 1;
        display: flex;
        overflow: hidden;

        .left {
            width: 175rpx;
            height: 100%;
            box-sizing: border-box;
            font-size: 26rpx;
            color: rgba(0, 0, 0, 0.5);
            padding-bottom: 50rpx;
            background-color: #fff;

            .detection-list {
                white-space: nowrap;
                height: 100%;
                padding-bottom: 100rpx;

                .detection-item {
                    height: 65rpx;
                    text-align: center;
                    line-height: 65rpx;
                    margin-top: 25rpx;
                }

                .active {
                    color: #000000;
                    font-weight: 600;
                    position: relative;

                    &::after {
                        content: "";
                        width: 8rpx;
                        height: 70%;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 0;
                        background-color: #EF530E;
                    }
                }
            }
        }

        .right {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            position: relative;
            padding-top: 15rpx;
            .bg-box {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                height: 500rpx;
                background: linear-gradient(to bottom, #fde9d5, #00000000);
            }

            .institution-list {
                white-space: nowrap;
                height: 100%;
                padding: 0 30rpx;
                box-sizing: border-box;
                padding-bottom: 20rpx;

                .institution-item {
                    display: flex;
                    align-items: flex-start;
                    background-color: #fff;
                    border-radius: 20rpx;
                    margin-top: 30rpx;
                    padding: 20rpx;
                    position: relative;

                    .img-box {
                        width: 175rpx;
                        height: 175rpx;
                        box-sizing: border-box;
                        background-color: #fff;
                        border-radius: 20rpx;
                        margin-right: 20rpx;
                    }

                    .text-box {
                        display: flex;
                        flex-direction: column;
                        gap: 10rpx;

                        .title {
                            font-size: 32rpx;
                            font-weight: 600;
                            width: 270rpx;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        ul {
                            list-style: none;
                            padding: 0;
                            display: flex;
                            gap: 12rpx;

                            li {
                                font-size: 20rpx;
                                color: #EF530E;
                                padding: 4rpx 12rpx;
                                background-color: #FFF0DE;
                                border-radius: 8rpx;
                            }
                        }

                        >p {
                            font-size: 24rpx;
                        }
                    }

                    .top {
                        width: 68rpx;
                        height: 83rpx;
                        position: absolute;
                        top: -15rpx;
                        left: 20rpx;

                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                }
            }
        }
    }
}

uni-page-body {
    height: 100%;
}</style>