sannongzixunwang_web/components/home/MoreService.vue

<template>
    <!-- 首页更多服务 -->
    <div class="moreServices">
        <div class="inner">
            <div class="title">
                <h1>更多服务</h1>
                <p> More services</p>
            </div>
            <ul class="serviceList">
                <li v-for="(item, index) in arr" :key="index">
                    <img class="left" :src="item.leftImg">
                    <div class="left detail">
                        <img :src="item.titleTopImg" alt="">
                        <h3>{{ item.title }}</h3>
                        <p>
                            <!-- 外链数据 -->
                            <NuxtLink :to="item.url" target="_blank">
                                查看详情
                                <span class="iconfont icon-youjiantou"></span>
                            </NuxtLink>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
let arr = [
    {
        id: 1,
        title: "会员服务",
        titleTopImg: "/images/Group 1560.png",
        leftImg: "/images/djdhdhsjk46448_Endless_rice_fields_565ffc17-1845-4d9d-be71-3c745b1ab6bb.png",
        url:"http://dy.qgsnfzzx.org.cn/list-hyfw.html",
    },
    {
        id: 2,
        title: "人员查询",
        titleTopImg: "/images/Group 1819.png",
        leftImg: "/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_a23e4b96-a6d7-49e1-a283-68c395f277f9(3).png",
        url:"http://dy.qgsnfzzx.org.cn/list-renyuanchaxun.html",
    },
    {
        id: 3,
        title: "调研选题",
        titleTopImg: "/images/Group 1820.png",
        leftImg: "/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7(2).png",
        url:"http://dy.qgsnfzzx.org.cn/list-diaoyanxuanti.html",
    },
    {
        id: 4,
        title: "车辆查询",
        titleTopImg: "/images/Group 1821.png",
        leftImg: "/images/rgmezdvz_19982_On_a_vast_and_boundless_wheat_field_many_harvest_5b5cfeda-ef17-4551-a935-5f8e3f799b69(2).png",
        url:"http://dy.qgsnfzzx.org.cn/list-cheliangchaxun.html",
    },
    {
        id: 5,
        title: "地市中心",
        titleTopImg: "/images/Group 1822.png",
        leftImg: "/images/htjskikess_Harvester_harvesting_in_wheat_fields_619469a3-bdc0-40ca-9ac8-e2f17a0ae33f.png",
        url:"http://dy.qgsnfzzx.org.cn/list-difangzhongxin.html",
    },
    {
        id: 6,
        title: "介绍信查询",
        titleTopImg: "/images/Group 1823.png",
        leftImg: "/images/rgmezdvz_19982_A_Chinese_farmer_carrying_a_hoe_is_hoeing_the_fi_75ccecda-5a25-4a4b-be60-d950bb8a2666(2).png",
        url:"http://dy.qgsnfzzx.org.cn/list-jieshaoxinchaxun.html",
    }
]
</script>

<style lang="less">
//更多服务
.moreServices {
    width: 100%;
    height: 646px;

    .inner {
        position: relative;

        // 标题
        .title {
            width: 300px;
            text-align: center;
            margin: 0 auto;
            font-family: PingFang SC, PingFang SC;

            >h1 {
                font-weight: 600;
                font-size: 36px;
                color: #000000;
                line-height: 42px;
                letter-spacing: 3px;
                font-style: normal;
                text-transform: none;
            }

            >p {
                height: 34px;
                font-weight: 600;
                font-size: 24px;
                color: #F4F4F4;
                line-height: 24px;
                letter-spacing: 2px;
                font-style: normal;
                text-transform: none;
            }
        }

        .title::before {
            content: " ";
            display: inline-block;
            position: absolute;
            top: 14px;
            left: 34px;
            width: 366px;
            height: 23px;
            background: url("../../static/images/Frame 486.png") no-repeat;
        }

        .title::after {
            content: " ";
            display: inline-block;
            position: absolute;
            top: 14px;
            right: 34px;
            width: 366px;
            height: 23px;
            background: url("../../static/images/Frame 485.png") no-repeat;
        }

        >.serviceList {
            >li {
                width: 380px;
                float: left;
                position: relative;
                margin: 17px 30px 40px 0;

                >img {
                    width: 240px;
                    height: 240px;
                }

                >.detail {
                    width: 170px;
                    height: 240px;
                    position: absolute;
                    background-color: #fff;
                    top: -12px;
                    right: 0;
                    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.1);
                    border: 1px solid #F0F0F0;

                    >img {
                        width: 52px;
                        height: 52px;
                        margin: 54px 57px 14px 61px
                    }

                    >h3 {
                        font-family: PingFang SC;
                        font-weight: 600;
                        font-size: 20px;
                        color: #000000;
                        line-height: 23px;
                        letter-spacing: 2px;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }

                    >p {
                        width: 116px;
                        height: 32px;
                        line-height: 30px;
                        border: 1px solid #eee;
                        margin: 26px 25px 34px 29px;
                        border-radius: 18px;
                        font-weight: 400;
                        font-size: 12px;
                        color: #139602;
                        letter-spacing: 1px;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                        a{
                            color: #139602;
                        }
                    }

                    >p:hover {
                        background-color: #139602;
                    }
                    >p:hover a{
                        color: #fff;
                    }
                }

                >.detail::after {
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 31px solid transparent;
                    border-top: 10px solid #e1e1e1;
                    position: absolute;
                    top: - 70px;
                    left: - 40px;
                }
            }

            >li:nth-child(3),
            >li:nth-child(6) {
                margin-right: 0;
            }

        }
    }


}
</style>