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

<template>
    <div class="hall">
        <header>
            <div class="title">信息大厅</div>
            <div class="info">
                <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
                    <view class="scroll-view-item_H" v-for="(item, index) in infoList" :key="index"
                        :class="index == idx ? 'active' : ''" @click="infoClick(index)">{{ item }}</view>
                </scroll-view>
                <div class="release">
                    <span><tui-icon name="add-fill" size="18" color="#000"></tui-icon></span>
                    <p>发布</p>
                </div>
            </div>
        </header>
        <main>
            <div class="communicate-list">
                <div class="communicate-item" v-for="(item,index) in 10" :key="index">
                    <div class="release">
                        <div class="prople">
                            <div class="img-box">
                                <tui-lazyload-img width="100%" height="100%" radius="50%"
                                    src="../../../static/new-images/hall/head.png"></tui-lazyload-img>
                            </div>
                            <div class="text">
                                <span>发布人</span>
                                <span>陈先生</span>
                                <p>会员</p>
                            </div>
                        </div>
                        <div class="time">
                            <span>佛山 01 - 22 9:00</span>
                        </div>
                    </div>
                    <div class="ask">
                        <div class="ask-box">
                            问
                        </div>
                        <div class="ask-text">需采购大批量皮革真实有效</div>
                        <div class="ask-state">
                            <span>急需</span>
                        </div>
                    </div>
                    <div class="answer">
                        <p>
                            代先生
                            <span>的回答</span>
                        </p>
                        <p>需要多少，我这可提供需要多少，我这可提供需要多少，我这可提供需要多少，我这可提供需要多少，我这可提供需要多少，我这可提供...</p>
                    </div>
                    <div class="mation">
                        <div class="list">
                            <div class="item">
                                <span>1235+</span>
                                <p><tui-icon name="seen"  size="20"></tui-icon></p>
                            </div>
                            <div class="item">
                                <span>123</span>
                                <p><tui-icon name="community"  size="20"></tui-icon></p>
                            </div>
                            <div class="item">
                                <span>123</span>
                                <p><tui-icon name="share"  size="20"></tui-icon></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            scrollLeft: 0,
            //  供应信息激活态
            idx: 0,
            infoList: ['供应信息', '采购信息', '库存信息', '店铺信息', '人才招聘', '行业新闻', '其他信息']
        }
    },
    methods: {
        infoClick(val) {
            this.idx = val
            this.scrollLeft = val * 40
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>