一个判断自定义字段的样式分享

【客服】小秋 01-19 11:12:07 网站优化

默认

摘要： 本文分享一个判断自定义字段的样式，通过eyou:notempty标签实现，展示如何根据自定义字段显示模板文件列表，包含具体代码实现和样式效果图。

(图1)

(图2)

  {eyou:notempty name='$eyou.field.mbxz'}
<div class="article-mxxz">
    <h3 class="article-mxxz-title">本模板包含以下模板文件：</h3>
    <ul class="mbxz-ul">
        {eyou:diyfield type='checkboxs' id='mbxz' name='$eyou.field.mbxz'}
        <li class="mbxz-li">{$mbxz.value}</li>
        {/eyou:diyfield}
    </ul>
    <span class="mbxz-span">【重要提示】：若模板的并未包含该类模型需求，仅代表如需匹配该类模型需求，需自行另行设计模板；此情况与功能权限无关，所有功能的使用权限均由授权资质决定，与模板本身无任何关联。</span>
</div>
{/eyou:notempty}

{eyou:empty name='$eyou.field.mbxz'}
<div class="article-mxxz article-mxxz-empty">
    <h2 class="mbxz-empty-tishi">温馨提示：</h2>
    <p class="mbxz-empty-content">
        您所下载的模板均以演示站展示效果为参考依据，该模板无论基于何种模型设计开发，最终呈现的全部效果均以后台实际配置设置为准；本演示效果不作为因个人需求差异产生相关诉求的依据。因模板持续升级优化迭代，演示页面呈现效果与下载后的实际模板存在细微偏差，均属正常现象。
    </p>
</div>
{/eyou:empty}

<style type="text/CSS">
/* 核心容器 - 统一样式 简约基调 */
.article-mxxz {
    margin: 24px 0;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
/* 标题样式 层级分明 简约加粗 */
.article-mxxz-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 18px 0;
    color: #2d2d2d;
    line-height: 1.4;
}
/* 列表样式 流式布局 适配所有屏幕 */
.mbxz-ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    gap: 12px;
}
/* 列表项 简约胶囊样式 柔和hover动效 */
.mbxz-li {
    padding: 9px 18px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 24px;
    font-size: 14px;
    color: #555555;
    transition: all 0.25s ease-in-out;
    cursor: default;
}
/* hover动效 柔和不刺眼 高级感 */
.mbxz-li:hover {
    border-color: #9c7a54;
    color: #9c7a54;
    background-color: #fffbf8;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(156,122,84,0.08);
}
/* 提示文本 小字浅灰 不抢占视觉焦点 */
.mbxz-span {
    display: block;
    font-size: 12px;
    color: #999999;
    line-height: 1.6;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid #f5f5f5;
}
/* 空数据提示区 单独样式 统一排版 */
.article-mxxz-empty {
    background-color: #fdfdfd;
}
.mbxz-empty-tishi {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    margin: 0 0 12px 0;
    line-height: 1.3;
}
.mbxz-empty-content {
    font-size: 14px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
}

/* ===== 完美响应式适配 移动端+平板+PC ===== */
@media (max-width: 768px) {
    .article-mxxz {
        margin: 16px 0;
        padding: 16px;
    }
    .mbxz-ul {
        gap: 10px;
    }
    .mbxz-li {
        padding: 8px 16px;
        font-size: 13px;
        flex: 1 1 auto;
        text-align: center;
    }
    .article-mxxz-title {
        font-size: 15px;
    }
    .mbxz-empty-tishi {
        font-size: 14px;
    }
    .mbxz-empty-content {
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    .article-mxxz {
        padding: 14px;
    }
    .mbxz-ul {
        gap: 8px;
    }
}
</style>

标签： CSS CSS特效学习CSS样式 css基础学习 css风格 CSS相关模板css div如何隐藏css Cursor ai 设计模板

文章版权及转载声明：

编辑:小秋同学本文地址：https://qiuhai.com/study/5767.html发布于 01-19 11:12:07
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明，均采集网上收集，若要转载请务必注明出处，尊重他人劳动成果共创和谐网络环境。声明：某些文章来源于网络，所采集的到信息本站只为传递信息和分享，不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站客服删除！

施舍