新建一个教程列表样式

2个月前 / 0 评论 / 2684 阅读 / 正在检测是否收录...

会员主题我预留的列表有图片,视频,商品,图文等!那么如何增加新的列表样式呢?我打算重写一个教程列表展示样式

https://pic.su1018.cn/7NUXd020220223151809.png

首先是CSS

.joe_census__basic {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:15px
}
.joe_census__basic-item.list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px
}
.joe_census__basic-item.list .list {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--background);
    box-shadow:var(--box-shadow);
    border-radius:var(--radius-inner) var(--radius-wrap) var(--radius-wrap) var(--radius-inner);
    padding:15px 12px
}
.joe_census__basic-item.list .list .count {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%
}
.joe_census__basic-item.list .list .count h6 {
    font-size:12px;
    color:var(--main)
}
.joe_census__basic-item.list .list .count p {
    font-size:20px;
    font-weight:700
}
.joe_census__basic-item.list .list .icon {
    fill:var(--main)
}
.joe_census__basic-item.list .list:nth-child(1) {
    border-left:5px solid #1cc88a;
    color:#1cc88a
}
.joe_census__basic-item.list .list:nth-child(2) {
    border-left:5px solid #36b9cc;
    color:#36b9cc
}
.joe_census__basic-item.list .list:nth-child(3) {
    border-left:5px solid #2196f3;
    color:#2196f3
}
.joe_census__basic-item.list .list:nth-child(4) {
    border-left:5px solid #9c27b0;
    color:#9c27b0
}
.joe_census__basic-item.category {
    background:var(--background);
    box-shadow:var(--box-shadow);
    padding:0 15px;
    border-radius:var(--radius-wrap)
}
.joe_census__basic-item.category .title {
    display:flex;
    align-items:center;
    height:45px;
    border-bottom:1px solid var(--classC);
    color:var(--main);
    justify-content:space-between;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin-bottom:15px;
}
.joe_census__basic-item.category input{
    width: 100%;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border:1px solid var(--classA);
    padding:10px 15px;
    border-radius:var(--radius-wrap);
}
.joe_census__basic-item.category button{
    width: 100%;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border:1px solid var(--classA);
    padding:10px 15px;
    border-radius:var(--radius-wrap);
    margin-top:10px;
    margin-bottom:10px;
}
.joe_census__basic-item.category button:hover{
    width: 100%;
    border: 0;
    background-color: var(--theme);
    outline: none;
    color:#FFF;
    padding:10px 15px;
    border-radius:var(--radius-wrap);
    margin-top:10px;
    margin-bottom:10px;
}
.joe_census__basic-item.category #category {
    height:170px
}
.joe_census__lately {
    background:var(--background);
    margin-bottom:15px;
    border-radius:var(--radius-wrap);
    box-shadow:var(--box-shadow)
}
.joe_census__lately .title {
    display:flex;
    align-items:center;
    height:45px;
    padding:0 12px;
    border-bottom:1px solid var(--classC);
    color:var(--main);
    justify-content:space-between;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.joe_census__lately .content {
    padding:15px
}
.joe_census__lately .content #lately {
    height:300px
}
.joe_census__server {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:15px
}
.joe_census__server-item {
    background:var(--background);
    box-shadow:var(--box-shadow);
    border-radius:var(--radius-wrap)
}
.joe_census__server-item .title {
    display:flex;
    align-items:center;
    height:45px;
    padding:0 12px;
    border-bottom:1px solid var(--classC);
    color:var(--main);
    justify-content:space-between;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.joe_census__server-item .title .count {
    color:var(--minor);
    font-size:12px
}
.joe_census__server-item .title .count .split {
    margin:0 5px
}
.joe_census__server-item .content {
    padding:15px
}
.joe_census__server-item .content #work,.joe_census__server-item .content #flow {
    height:315px
}
.joe_census__filing {
    background:var(--background);
    box-shadow:var(--box-shadow);
    border-radius:var(--radius-wrap)
}
.joe_census__filing .title {
    display:flex;
    align-items:center;
    height:45px;
    padding:0 12px;
    border-bottom:1px solid var(--classC);
    color:var(--main);
    justify-content:space-between;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.joe_census__filing .content {
    padding:15px
}
.joe_census__filing .content .item {
    position:relative
}
.joe_census__filing .content .item:last-child .wrapper {
    padding-bottom:0
}
.joe_census__filing .content .item .head {
    position:absolute;
    top:14px;
    width:13px;
    height:13px;
    background:var(--classC);
    border-radius:50%
}
.joe_census__filing .content .item .tail {
    position:absolute;
    left:6px;
    top:0;
    width:1px;
    height:100%;
    background:var(--classC)
}
.joe_census__filing .content .item .wrapper {
    padding-left:30px;
    padding-bottom:15px
}
.joe_census__filing .content .item .wrapper .panel {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--routine);
    cursor:pointer;
    background:var(--classD);
    padding:10px;
    height:40px;
    border-radius:4px
}
.joe_census__filing .content .item .wrapper .panel svg {
    width:10px;
    height:10px;
    fill:var(--minor);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    transition:-webkit-transform 0.25s;
    transition:transform 0.25s;
    transition:transform 0.25s,-webkit-transform 0.25s
}
.joe_census__filing .content .item .wrapper .panel.in svg {
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg)
}
.joe_census__filing .content .item .wrapper .panel::before {
    content:'';
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    left:-8px;
    width:0;
    height:0;
    border-right:8px solid var(--classD);
    border-top:8px solid transparent;
    border-bottom:8px solid transparent
}
.joe_census__filing .content .item .wrapper .panel-body {
    display:none;
    padding:15px 15px 0 15px
}
.joe_census__filing .content .item .wrapper .panel-body li {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:15px
}
.joe_census__filing .content .item .wrapper .panel-body li:last-child {
    margin-bottom:0
}
.joe_census__filing .content .item .wrapper .panel-body li a {
    color:var(--routine)
}
.joe_census__filing .content .item .wrapper .panel-body li a:hover {
    color:var(--theme)
}
.joe_census__filing .content .item.load {
    padding-top:15px
}
.joe_census__filing .content .item.load .head {
    top:25px;
    background:#2db7f5
}
.joe_census__filing .content .item.load .button {
    position:relative;
    margin-left:30px;
    border:none;
    background:#2db7f5;
    color:#fff;
    border-radius:4px;
    padding:0 12px;
    height:34px;
    font-size:13px
}
.joe_census__filing .content .item.load .button::before {
    content:'';
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    left:-8px;
    width:0;
    height:0;
    border-right:8px solid #2db7f5;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent
}
.aui-app-box {
    padding: 0.5rem;
}
.aui-app-flex-box {
    background:var(--classD);
    border-radius: 4px;
    padding: 0.8rem;
    margin-bottom: 10px;
    /* overflow: hidden; */
}
.aui-app-flex {
    /* padding: 15px; */
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: 10px;
}
.aui-app-flex-hd {
    margin-right: .8em;
    width: 80px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.aui-app-flex-hd img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    vertical-align: top;
}
.aui-app-flex-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.aui-app-flex-bd h2 {
    color: var(--main);
    font-size: 1rem;
    padding-bottom: 10px;
}
.aui-app-flex-bd h2 em {
    color: #ff9000;
    font-size: 0.7rem;
    border-radius: 3px;
    background:var(--classA);
    font-style: normal;
    padding: 0 0.2rem;
}
.aui-app-flex-fr {
    color: #fff;
    font-size: 0.8rem;
    border-radius: 3px;
    background: #ff9000;
    cursor:pointer;
    padding: 0.5rem 1.5rem;
}
.box-line {
    position: relative;
}
.box-line:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    border: 1px solid var(--classD);
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    color: rgba(207, 207, 207, 0.95);
    transform-origin: 0 0;
    border-radius: 5px;
}
.aui-app-flex:after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #d8d8d8;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.aui-app-flex-bd span {
    font-size: 0.6rem;
    background:var(--classA);
    padding:3px 5px;
    border-radius: 5px;
    cursor:pointer;
}
.aui-app-flex-bd a {
    font-size: 0.6rem;
    background:var(--classA);
    padding:3px 5px;
    border-radius: 5px;
    cursor:pointer;
}
.aui-app-flex-text {
    font-size: 0.8rem;
    color: #999;
    padding-top: 10px;
}

具体的样式可以自己改动CSS,我是放在了主题的 assets/css 目录,尼恩放在哪里随意,只要能引入就行

PHP代码

<?php
/**
 * 站点首页模板
 */
if (!defined('EMLOG_ROOT')) {exit('error!');}?>
<link rel="stylesheet" href="<?php echo TEMPLATE_URL; ?>assets/css/shouquan.css">
<div class="joe_container">
<div class="joe_main">
<div class="joe_census__lately">
    <div class="title">教程</div>
    <div class="content">
        <?php doAction('index_loglist_top');if($logs != NULL){}if (!empty($logs)):foreach($logs as $value):$leixing = $value['content'];$value['content'] = qinyin_sx($value['content']);?>
        <?php if(!empty($value['cover'])) {
            $imgurl = $value['cover'];
        } elseif(img_ns($value['content'])) {   
        if(strpos(img_ns($value['content']),$wzpeizhi['config_uy']) !== false){ 
             $imgurl = img_ns($value['content']).$wzpeizhi['config_suocaijian'];
        }else{
             $imgurl = img_ns($value['content']);
        }
        } else {
            $imgurl = $wzpeizhi['config_suolt1'];
        }
        ?>
        <div class="aui-app-flex-box box-line">
            <div class="aui-app-flex ">
                <div class="aui-app-flex-hd">
                    <img src="<?php echo $imgurl;?>" alt="<?php echo $value['log_title']; ?>">
                </div>
                <div class="aui-app-flex-bd">
                    <h2>
                        <?php echo $value['log_title']; ?>
                    </h2>
                        <?php echo $value['bendi'];?>
                        <a><?php blog_sort($value['logid']); ?></a>
                </div>
                <a class="aui-app-flex-fr" href="<?php echo $value['log_url']; ?>">查看</a>
            </div>
            <div class="aui-app-flex-text">
                <p><?php echo geshihua($value['log_description']); ?></p>
            </div>
        </div>
        <?php endforeach;else:?>
        <div class="joe_archive">
            <div class="joe_archive__empty">
                <svg class="joe_archive__empty-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="120" height="120"><path d="M483.322 136.98l-2.08-116.502A19.278 19.278 0 0 1 499.266 0h2.512c12.439.104 22.574 10.063 22.574 22.43l4.048 114.446a22.702 22.702 0 0 1-22.606 22.43c-10.136-1.952-22.479-10.079-22.479-22.326h.016zm165.034 16.943c-8.751 8.695-23.27 5.847-32.045 0a22.638 22.638 0 0 1 0-31.702L700.8 44.156a23.006 23.006 0 0 1 31.933 0c8.76 8.703 8.76 23.118 0 28.958l-84.377 80.793zm-287.215 0l-84.369-80.921c-8.767-5.824-8.767-20.135 0-28.95a23.006 23.006 0 0 1 31.917 0l84.497 78.058a22.606 22.606 0 0 1 0 31.7c-8.775 5.944-23.278 8.8-32.045.113zm488.686 679.445v9.84l-8.871 3.663-306.238 125.43-5.76 2.64V645l9.904 17.15 60.283 105.063a15.206 15.206 0 0 0 13.03 7.327 14.879 14.879 0 0 0 7.952-2.055L850.17 658.047V833.36h-.328l-.016.008zm-671.486 13.503l-9.44-3.655V654.824l.448.456 236.396 117.086a23.86 23.86 0 0 0 7.96 2.047 17.15 17.15 0 0 0 14.158-7.759l59.715-104.615 9.92-17.158V977.46l-13.152-5.28-306.005-125.317zm-21.998-415.308l4.72-8.8 323.411 162.85 4.84 2.616-2.76 4.696-77.57 138.932-2.655 4.24-4.72-2.056L77.15 572.663l5.888-10.4 73.298-130.708h.008zM484.93 304.646l12.56-4.12V552.41h-6.336l-1.608-1.024-295.063-147.868 9.92-3.663 280.527-95.208zm328.716 95.784l14.175 4.695-291.487 146.708-7.375 3.663V303.054l5.303 1.6 279.392 95.792v-.016zM935.82 562.256l7.367 13.503-320.293 159.306-4.847 2.056-2.52-4.12-77.113-139.508-2.528-4.688 4.704-2.64L858.722 426.98l2.192 3.664 74.922 131.62h-.016zm49.1 12.463L884.863 397.334v-1.016a16.047 16.047 0 0 0-6.775-7.327l-359.05-133.797-1.04-.56-1.031-.464a14.967 14.967 0 0 0-7.968-2.176 13.71 13.71 0 0 0-7.84 2.176l-1.023.464-1.144.56-357.881 134.253a25.649 25.649 0 0 0-9.455 8.815l-100.04 178.52a19.414 19.414 0 0 0 8.88 24.958l81.249 40.053 8.43 4.231v207.15a18.91 18.91 0 0 0 10.48 17.151l358.45 151.42c2.99 1.487 6.223 2.159 9.438 2.159 3.248 0 6.48-.672 9.455-2.16l356.498-151.987h1.04a18.022 18.022 0 0 0 11.99-17.158V644.417l7.84-4.128 78.593-40.157 3.232-1.503 3.008-2.048a15.807 15.807 0 0 0 4.72-21.87v.008z"></path></svg>
                <span>没有找到相关结果...</span>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>
<ul class="joe_pagination">
<?php echo sheli_fy($lognum,$index_lognum,$page,$pageurl);?>
</ul>
</div>
<?php include View::getView('side'); ?>
<?php
include View::getView('footer');
?>

我是放在了主题的 log 目录,保存名 jiaocheng ,后台分类模板输入的是 log/jiaocheng

评论

取消