Bottom.ZHG示范脚本

admin

Bottom.zhg
需加载hondy框架

DIV：
<div class="bottom pt-5">
    <div class="container pb-5">
        <div class="row">
            <div class="contact col-lg-5">$func_contact(show=urlqrcode|addr|tel|fax|mail)$</div>
            <div class="dmenu col-lg-7">$func_menu(pos=1,divi=none,sub=1)$</div>
        </div>
    </div>
    <div class="dark py-3">
        <div class="container">
            <div class="row justify-content-between">$func_copyright(type=3)$</div>
        </div>
    </div>
</div>

CSS：
.bottom{background:#f8f8f8}
.dark{background:#39424f;color:#fff}
.dark *{color:#fff;font-size:12px}
.dark a:hover{color:#3385ff}
.contact{padding-left:150px;position:relative;min-height:140px;font-size:87.5%;line-height:2.2em}.contact .address::before{display:inline-flex;content:'\f2b9';width:14px;margin-right:10px}
.contact .tel::before{display:inline-flex;content:'\f095';width:14px;margin-right:10px}
.contact .mail::before{display:inline-flex;content:'\f0e0';width:14px;margin-right:10px}
.contact .fax::before{display:inline-flex;content:'\f1e4';width:14px;margin-right:10px}
.LongDatePlus{background:#22a7f6;color:#fff}
.dmenu menu{margin-left:68px}
.dmenu menu ul li{display:block;flex:auto}
.dmenu menu ul li a{display:block;padding:5px 0;font-weight:700;padding-left:0}
.dmenu menu ul ul{display:flex;flex-flow:column wrap;position:inherit}
.dmenu menu ul ul li a{display:block;padding-bottom:5px;font-weight:400;font-size:87.5%;color:inherit}
.urlqrcode{display:inline-flex;position:absolute;left:0}
.urlqrcode .dt{display:none}
.urlqrcode .dd img{border:1px solid #f0f0f0}

admin

PC

手机


<div class="bottom bg-fst gray-400 py-4">
    <div class="container">
        <div class="container menu low d-none d-lg-block ul-fst-sec hover-white">$func_menu(pos=1,divi=none)$</div>
        <div class="contact col">$func_contact(show=address|mail|tel|wechat|mii)$</div>
    </div>
</div>

CSS:
.bottom {
    .wechat {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}
@include media-breakpoint-up(lg) {

    .bottom {
        background: url(features.png) no-repeat $fst center;

        .menu {
            padding-bottom: 10px;
            border-bottom: 1px dotted $gray-600;
        }

        .colon {
            display: none;
        }

        .contact .Margin {
            margin-top: 40px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            max-width: 900px;

            >div {
                display: flex;
                flex-direction: column;
                flex: 1;
                margin-left: 15px;
                margin-right: 15px;

                &::before {
                    display: flex;
                    width: 30px;
                    height: 30px;
                    justify-content: center;
                    align-items: center;
                    font-size: 30px;
                    margin-bottom: 10px;
                    margin-left: auto;
                    margin-right: auto;
                }

                &.Address::before {
                    content: '\f2b9';
                }

                &.Mail::before {
                    content: '\f0e0';
                }

                &.Tel::before {
                    content: '\f095';
                }

                &.wechat {
                    margin-top: 0;
                    margin-bottom: 0;
                    margin-left: 50px;

                    .dd {
                        display: flex;
                        flex-flow: row nowrap;

                        img {
                            margin-right: 10px;
                        }
                    }
                }

                &.mii {
                    margin-top: 30px;
                    display: flex;
                    flex-flow: row nowrap;
                    flex: 1 0 100%;
                    justify-content: center;

                    .colon {
                        display: inline;
                    }

                    .dt {
                        font-size: 1rem;
                    }
                }

                &.clear {
                    display: none;
                }

                .dt {
                    font-size: 1.125rem;
                    margin-bottom: 10px;

                    a {
                        font-size: 1.125rem;
                    }
                }

                .dd {
                    font-size: 1rem;

                    a {
                        font-size: 1rem;
                    }
                }
            }
        }
    }

}