sannongzixunwang_web/components/MoreService.vue

<template>
    <!-- 更多服务 -->
    <div class="moreServices">
        <div class="inner">
            <div class="title">
                <h1>更多服务</h1>
                <p> More services</p>
            </div>
            <ul class="serviceList">
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
                <li>
                    <img class="left"
                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                    <div class="left detail">
                        <img src="../static/images/Group 1560@2x.png" alt="">
                        <h3>会员服务</h3>
                        <p>查看详情
                            <span class="iconfont icon-youjiantou"></span>
                        </p>
                    </div>
                    <em class="iconfont icon-zhijiao-triangle"></em>
                </li>
            </ul>
        </div>
    </div>
</template>

<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: 32px;
                        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;
                    }

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

                >em {
                    display: inline-block;
                    display: inline-block;
                    width: 33px;
                    height: 13px;
                    position: absolute;
                    bottom: 0;
                    right: 140px;
                }


            }

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

        }
    }


}
</style>