4fb93e91-ff63-4539-818c-ea904cb77182.png

498adf4c-cbf8-47cd-b276-23f3bcb4d49a.png


  {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>


未经允许不得转载! 作者:小秋同学,转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站

原文地址:《一个判断自定义字段的样式分享》发布于:2026-01-19 11:12:07

加载中~