yifeng_integration/yifengdian-company-report/src/views/home.vue

<template>
    <div class="home">
        <div class="header">
            <div class="tel_box flex flex-center2 flex-end">
                <span>服务热线：</span><span class="m-right7">0532-58773877</span>
                <a :href='`tel:0532-58773877`'>拨打</a>
            </div>
        </div>
        <section class="container">
            <div class="card">
                <div class="title">
                    <span>移风菜篮子 <span>（单位：吨）</span></span>
                    <div @click="$router.push('/vegetable')">
                        更多 <img class="img-12" src="@/assets/images/home/right.png" alt="">
                    </div>

                </div>
                <div class="scroll-box m-top18">
                    <div class="scroll-title flex flex-mean flex-center2" style="padding: 0 26px;">
                        <span class="flex1 text-anign-left">品名</span>
                        <span class="flex1 text-anign-right">产量 <span>(吨)</span></span>
                    </div>
                    <section style="overflow: hidden;">
                        <vue-seamless-scroll :class-option="optionHover" :data="vegetableList">
                            <div class="scroll-content">
                                <div class="flex flex-end item" v-for="(item, index) in vegetableList"
                                    :key="'vegetable' + index" style="padding: 0 26px;">
                                    <!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/>
                                <img src="../../assets/images/dyfc.png" v-else alt=""> -->
                                    <div class="flex1 van-ellipsis text-anign-left">{{ item.name }} </div>
                                    <div class="vegetable-item-row2 van-ellipsis text-anign-right flex1">{{ item.num }}
                                    </div>
                                </div>
                            </div>

                        </vue-seamless-scroll>
                    </section>
                </div>
            </div>
            <div class="card m-top10">
                <div class="title">
                    <span>今日市场 <span>（单位：元/公斤）</span></span>
                    <div @click="$router.push('/bazaar')">
                        更多 <img class="img-12" src="@/assets/images/home/right.png" alt="">
                    </div>
                </div>
                <div class="scroll-box m-top18">
                    <div class="scroll-title flex flex-mean flex-center2 text-anign-center">
                        <span class="flex1">品名</span>
                        <span class="flex1">均价</span>
                        <span class="flex1">较昨日</span>
                    </div>
                    <section style="overflow: hidden;">
                        <vue-seamless-scroll :class-option="optionHover" :data="priceList">
                            <div class="scroll-content">
                                <div class="flex flex-mean  item" v-for="(item, index) in priceList"
                                    :key="'price' + index">
                                    <div class="flex1 van-ellipsis">{{ item.name }} </div>
                                    <div class="flex1 van-ellipsis">{{ item.price }} </div>
                                    <div class="vegetable-item-row2 flex1 van-ellipsis">{{ item.old }} <img
                                            src="@/assets/up.png" alt="" style="width: 11px;height: 15px;"></div>
                                </div>
                            </div>

                        </vue-seamless-scroll>
                    </section>
                </div>
            </div>
            <div class="card m-top10">
                <div class="title">
                    <span>政策资讯</span>
                    <span>更多 <img class="img-12" src="@/assets/images/home/right.png" alt=""></span>
                </div>
                <div class="flex-y">
                    <div class="van-multi-ellipsis--l2 font-bold" style="font-weight: 500;">
                        市农业农村局开展智慧农业、设施农业建设工作指导
                    </div>
                    <div class="flex flex-end m-top12">
                        <div class="flex font-size14 flex-center2">
                            <img src="@/assets/images/home/unit.png" class="img-13" alt=""><span
                                class="blue">青岛市人民政府</span>
                        </div>
                        <span class="gray">2024-03-05</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            optionHover: {
                step: 1, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
            },
            vegetableList: [
                {
                    name: '土豆',
                    num: 100000,
                },
                {
                    name: '土豆',
                    num: 100,
                },
                {
                    name: '土豆',
                    num: 100,
                },
                {
                    name: '土豆',
                    num: 100,
                }, {
                    name: '土豆',
                    num: 100,
                }
                , {
                    name: '土豆',
                    num: 100,
                },
                {
                    name: '土豆',
                    num: 100,
                },
                {
                    name: '土豆',
                    num: 100,
                }, {
                    name: '土豆',
                    num: 100,
                }
                , {
                    name: '土豆',
                    num: 100,
                }
            ],
            priceList: [
                {
                    name: '哇啊哇擦哇啊哇擦哇啊哇擦哇啊哇擦',
                    price: 100,
                    old: '1.1'
                },
                {
                    name: '土豆',
                    price: 100,
                    old: '1.1'
                },
                {
                    name: '土豆',
                    price: 100,
                    old: '1.1'
                },
                {
                    name: '土豆',
                    price: 100,
                    old: '1.1'
                }, {
                    name: '土豆',
                    price: 100,
                    old: '1.1'
                },
            ]
        };
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.home {
    position: relative;

    .header {
        height: 135px;
        background: url('@/assets/images/home/header.png');
        background-size: 100% 100%;

        .tel_box {
            padding: 79px 25px 0;
            box-sizing: border-box;
            font-style: italic;

            :nth-child(1) {
                color: #cce6fd;
                height: 35px;
                font-size: 17px;
                font-family: fangzheng-bold;
                line-height: 39px;

            }

            :nth-child(2) {
                font-weight: 300;
                font-family: Impact;
                color: #ffffff;
                font-size: 25px;
                height: 35px;
                line-height: 35px;
            }

            a {
                text-align: center;
                color: #ffffff;
                width: 63px;
                height: 30px;
                border-radius: 17px;
                font-style: normal;
                line-height: 30px;
                background: linear-gradient(45deg, #ffd14d, #f78919);
            }
        }
    }

    >section {
        position: absolute;
        top: 110px;
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    .scroll-box {
        height: 225px;
        overflow: hidden;

        .scroll-title {
            height: 45px;
            background: url('@/assets/images/home/table_header.png') no-repeat;
            background-size: 100% 100%;
            padding: 0 5px;
            box-sizing: border-box;
            color: #0082f0;
        }

        .scroll-content {
            height: 225px;
            overflow: hidden;

            .item {
                padding: 0 5px;
                box-sizing: border-box;
                height: 45px;
                border: 1px solid #E0E9F5;
                border-bottom: none;
                line-height: 45px;
                text-align: center;
            }

            .vegetable-item-row2 {
                color: #ff9805;
            }
        }
    }
}
</style>