About功能版块示范脚本

admin

DIV:
<div class="about wrap">$func_about(para=About,title=10,plus=card,memo=2)$
<div class="btn">$func_submenu(para=Abouts,title=no,rows=3)$</div>
</div>
CSS:
.about{padding: 50px 0; height: 345px;}
.RowsTitle .Title .cn{font-size:24px; line-height: 1.5em; color: #00578F;}
.RowsTitle .Title .en{font-size:18px; line-height:1em; color:#2B74A2;text-transform:uppercase;}
.about{position: relative;}
.about .Margin{width: 660px; height: 150px; margin-top: 40px; overflow: hidden; font-size: 14px; }
.about .card{ position:absolute;width: 500px; height: 333px; top: 50px;right: 0;}
.about .card img{width: 100%;}
.about .Subject{ position: absolute; top: 334px;}
.about .Subject .Descript a{ display: inline-block; width: 150px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; background:#ffee99; border:1px solid transparent; border-radius:4px;}
.btn .Margin{ height:auto; margin-left:184px;}
.btn ul li {float: left; margin-right: 30px;}
.btn ul li a{ display: block;border:1px solid #ccc; width:150px; height:50px; line-height: 50px; text-align:center; font-size:16px; border-radius:4px;}
.btn ul li a:hover,.about .Subject .Descript a:hover{border:1px solid transparent;background:#ff5700; color:#fff;}

特别说明：此设计适用于1200px宽屏网站。

admin

DIV：
<div class="about">$func_about(para=About,title=10,plus=card,len=350,more=enter detail)$</div>

CSS：
.about{ padding: 60px 0; position: relative;}
.about #Navigator{position: relative; padding-bottom:100px;}
.RowsTitle{ background: url(tip.png) no-repeat center; text-align: center; margin-bottom: 30px;}
.RowsTitle .Title .cn{ font-size: 30px; line-height: 36px;}
.RowsTitle .Title .en{font-size: 18px; font-family: Arial, Helvetica, sans-serif;}
.about .RowsTitle .More{ position: absolute; bottom:20px; left: calc(50% + 50px);}
.about .RowsTitle .More a{ display: inline-block; width: 200px; line-height: 50px; font-size: 20px; background: #9A0000; color: #fff; text-transform: uppercase;}
.about .Margin{ font-size: 14px; line-height: 2em;}
.about .Margin br{ display:block; line-height: 3em;}
.about .Content .card{ float: left; width: 50%; max-height: 362px; overflow: hidden; margin-right: 50px;}
.about .Content .card img{ width: 100%;}
模板：zgghczy，案例：zgghczy，dwhx

admin

<div class="about">$func_about(navi=Navigator,para=About,plus=card,memo=1,len=250,more=enter)$</div>
CSS:
#Navigator .RowsTitle .Title{ font-size: 25px; line-height: 1.2em; letter-spacing: 2px; font-weight: bold;}
#Navigator .RowsTitle .More{ border-bottom: 1px dotted #ccc; height: 20px; margin-top:20px; margin-bottom: 40px;}
#Navigator .RowsTitle .More a{display: inline-block; color: #fff; width: 120px; height: 40px; border-top-left-radius: 60px 20px; border-bottom-left-radius: 60px 20px; border-top-right-radius: 60px 20px; border-bottom-right-radius: 60px 20px; line-height: 40px; font-size: 20px; text-transform:uppercase; background: #ccc;}
#Navigator .Descript{ font-size: 14px;}
#Navigator .Content{ padding-top: 30px;}
.about{ padding: 80px 0; text-align: center;}
.about .card{ margin-bottom: 30px;}
.about .Content{ padding: 0 100px;}

admin

DIV:
<div class="bg-dark p-t-b-60"><div class="container about">$func_about(navi=epen,para=About,plus=card,len=468,title=10,memo=1,show=title|memo|content|more,more=ENTER DETAIL)$</div></div>

CSS:
.p-t-b-60{ padding-top: 60px; padding-bottom: 60px;}
#epen .RowsTitle .Title{display: flex; flex-direction: row-reverse;flex-wrap: nowrap; justify-content: center; align-items: center;}
#epen .RowsTitle .Title .cn{ display: inline-block; font-size: x-large; font-weight: bold; margin:0 0.5em;}
#epen .RowsTitle .Title .en{ display: inline-block; font-size: xx-large; color:#FB0B28; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
#epen .Subject{ margin-bottom: 20px; text-align: center; text-shadow: 0px 0px 1px #fff;}
#epen .More{ text-align: center;}
#epen .More a{ display: inline-block; padding:10px 50px; background: #FB0B28; color:#fff; line-height:2em;}
#epen .More a:hover{ background:#161616; color:#fff;}

.about .Margin{ display: flex; flex-flow: row nowrap; justify-content:space-between; line-height: 2em; margin-bottom:30px;}
.about .Content .card{ width: 48%; max-height: 362px; overflow: hidden;}
.about .Content .card img{ width: 100%; height: 100%;}
.about .Content .intro{ width: 48%; line-height: 1.9em; text-indent: 2em; color:#aaa;}
.about .Content .intro br{ display:block; line-height: 2.5em;}
.about #epen .RowsTitle{ margin-bottom: 10px;}
.about #epen .RowsTitle .Title .cn{ color:#ccc; border-bottom:2px solid #B03840; line-height:48px; margin: 0; padding:0 10px;}
.about #epen .RowsTitle .Title .en{ border-bottom:2px solid #ccc; padding:0 10px;}
.about #epen .Subject{ color: #666; text-shadow: none; margin-bottom:30px;}
@media (max-width: 768px)  {
    .p-t-b-60{ padding-top: 40px; padding-bottom: 40px;}
    .about .Margin{ flex-direction: column;}
    .about .Content .intro,.about .Content .card{ width: auto; margin: 0 0 20px 0;}
    .about .RowsTitle .More{ left: 0; right: 0;}
}


模板：epen

admin

DIV:
<div class="about gray p-y-60"><div class="container">$func_about(para=About,title=10,plus=card,memo=2,show=title|content|memo)$</div></div>
CSS:
.gray{ background: #231915;}
.gray *{ color: #fff;}
.p-y-60{ padding: 60px 0;}
.RowsTitle{ background: url(tip.png) no-repeat center; text-align: center; margin-bottom: 30px;}
.RowsTitle .Title .cn{ font-size: 30px; line-height: 36px;}
.RowsTitle .Title .en{font-size: 18px; font-family: Arial, Helvetica, sans-serif;}
.about{ position: relative;}
.about #Navigator{position: relative; padding-bottom:100px;}
.about .RowsTitle .More{ position: absolute; bottom:20px; left: calc(50% + 50px);}
.about .RowsTitle .More a{ display: inline-block; width: 200px; line-height: 50px; font-size: 20px; background: #9A0000; color: #fff; text-transform: uppercase;}
.about .Margin{ display:flex; flex-flow: row nowrap; justify-content:space-between;}
.about .Margin .intro{ flex: 1;}
.about .Margin .card{ flex: 1; max-height: 362px; overflow: hidden; margin-right: 50px;}
.about .Margin .card img{ width: 100%;}
.about .Subject{ float: right; width: 48%; margin-top:-50px; background: #E50044; text-align: right}
.about .Descript a{ display: inline-block; background:#AF0726; line-height: 50px; padding: 0px 30px;}

admin

DIV：
<div class="about py-5">
    <div class="container">$func_about(para=About,plus=card,len=380,memo=2)$</div>
</div>
CSS:启用hondy.css框架
.about{background:#0074c5}
.about .Margin{display:flex;flex-flow: column-reverse wrap;color:#fff}
.about .RowsTitle{border-bottom:1px dotted #fff;text-align: left;height:34px}
.about .RowsTitle .Title{ display:inline-flex; color:#fff;font-size:large; border-bottom: 3px solid #fff;position: relative;}
.card{margin-top:20px;border:0;margin-left:-15px;margin-right:-15px}
@media (min-width: 992px) {
.about{background:linear-gradient(to right,#eee 0%,#eee 50%,#0074c5 50%)}
.about .RowsTitle{margin-left:57.5%}
.about .Margin{display:flex;flex-flow:row nowrap;}
.about .intro,.about .card{flex:1;position: relative;}
.about .card{margin-right:15%; margin-left:0;background:none}
.about .intro::before{position:absolute;z-index:10;width:0px;height:0px;content:"";border-width: 40px 40px 40px 0;border-style: solid;border-color: transparent #0074c5 transparent;left:-50px;top:50px;margin-left:-15%}
}

admin

DIV：
.bg-fst:首色背景
.b-red顶部边框红色
.about-1用于修饰.about
.rowstitle-1用于修饰RowsTitle
.slider提示用于滚动
<div class="bg-fst b-red">
    <div class="container px-md-0 py-4 about-1 rowstitle-1">
        <div class="about">$func_about(para=about,rows=380,title=10,plus=card)$</div>
    </div>
</div>
<div class="container px-md-0">
    <div class="photo slider pt-4">$func_article(para=sale,rows=10,list=2)$</div>
</div>
CSS:必须先调用hondy框架.b-red {
    border-top: 10px solid $sec;
}
@media (min-width:992px) {
    .photo {
        box-sizing: border-box;
        position: relative;
        padding-left: 330px;

        .RowsTitle {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 15px;

            &::before {
                width: 5px;
                height: 21px;
                background-color: $fth;
                content: "";
                margin-right: 10px;
            }

            h3 {
                font-size: 1.5rem;
                line-height: 100%;
                margin-bottom: 0
            }
        }
    }

    .about-1 {
        .RowsTitle {
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}

JS：需要调用弘帝框架

admin

DIV:
<div class="py-5">
    <div class="container rowstitle-2">
        <div class="about row mx-0 mx-lg-auto">$func_about(para=about,title=11,memo=1,img=1,more=2,show=3)$</div>
    </div>
</div>

CSS:
.about {
    .Title {
        display: flex;
        flex-flow: column wrap;
        background: $fst;
        padding: 10px 20px;
        margin: 0;
        border-left: 15px solid yellow;

        .cn a {
            color: white;
            font-weight: 100;
        }

        .en a {
            font-style: italic;
            color: $gray-100;
            font-weight: 100;
            font-size: smaller;
        }
    }

    .Descript {
        font-size: larger;
        line-height: 3em;
        padding: 20px 20px 0 0px;
    }

}


@include media-breakpoint-up(sm) {
    .about {
        .Title {
            flex-flow: row nowrap;
            border: 0;

            .cn a {
                border-left: 15px solid yellow;
                padding-left: 20px;
            }

            .en a {
                margin-left: 30px;
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    .about {

        .Title,
        .Descript,
        .intro {
            margin-left: -280px;
        }

        .Descript,
        .intro {
            background: rgba($color: #fff, $alpha: .95);
        }

        .Title {
            margin-top: 30px;
        }

        .Thumbs,
        .Content {
            display: flex;
            flex: 1;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 30px;
        }

        .Content {
            flex-flow: column wrap;
        }

        .Descript {
            padding-left: 20px;
        }

        .intro {
            line-height: 2em;
            padding: 0 20px 20px 20px;
        }

        .More {
            text-align: left;
            background-color: $gray-100;
        }
    }

}

admin

<div class="py-5">
    <div class="container">
        <div class="about row mx-0 mx-lg-auto">
            $func_about(navi=nav,title=11,para=about,more=2,plus=html,btn=1,rows=4,show=title|memo|content|img,ui=<div.row><div.col-lg-6><div>{title}</div><div.mt-5>{content}{btns}</div></div><div.col-lg-6>{card}</div></div>)$
        </div>
    </div>
</div>