fenleixinxi/application/admin/view/fc/category/add.html

<style>
    .fc-form-container {
        padding: 16px 16px 0;
        background: #f7faf9;
    }
    /* 分区卡片 */
    .fc-section {
        background: #ffffff;
        border: 1px solid #eef2f6;
        border-radius: 14px;
        padding: 18px 18px 4px;
        margin-bottom: 14px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
    }
    .fc-section-title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #eef2f6;
    }
    .fc-sec-icon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #e6fbf1;
        color: #00a854;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        flex: 0 0 auto;
    }
    .fc-sec-tip {
        margin-left: auto;
        font-size: 11px;
        font-weight: 400;
        color: #94a3b8;
    }
    /* 分类类型：分段选择器 */
    .fc-kind-seg {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .fc-kind-seg label {
        position: relative;
        margin: 0;
        cursor: pointer;
        flex: 1;
        min-width: 180px;
    }
    .fc-kind-seg input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .fc-kind-seg .fc-pill {
        display: block;
        padding: 11px 14px;
        border-radius: 12px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafc;
        transition: all 0.15s ease;
    }
    .fc-kind-seg .fc-pill b {
        display: block;
        font-size: 13.5px;
        color: #334155;
        margin-bottom: 2px;
    }
    .fc-kind-seg .fc-pill small {
        display: block;
        font-size: 11px;
        color: #94a3b8;
        line-height: 1.5;
    }
    .fc-kind-seg input:checked + .fc-pill {
        border-color: #00d26a;
        background: #f2fef7;
        box-shadow: 0 0 0 2px rgba(0, 210, 106, 0.18);
    }
    .fc-kind-seg input:checked + .fc-pill.general b { color: #00a854; }
    .fc-kind-seg input:checked + .fc-pill.farm b { color: #d97706; }
    .fc-kind-seg input:focus-visible + .fc-pill { outline: 2px solid #00d26a; outline-offset: 2px; }

    /* 主题色：原生取色器 */
    .fc-color-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .fc-color-row .form-control { flex: 1; }
    .fc-color-native {
        width: 42px;
        height: 36px;
        padding: 2px 3px;
        border: 1px solid #e2e8f0;
        border-radius: 9px;
        background: #ffffff;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .fc-color-preview {
        width: 42px;
        height: 36px;
        border-radius: 9px;
        border: 1px solid #e2e8f0;
        flex: 0 0 auto;
        box-shadow: inset 0 0 0 2px #ffffff;
    }
    /* 当前选中的图标微卡片展示区 */
    .fc-current-icon-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 8px 14px;
        min-height: 58px;
    }
    .fc-current-icon-info {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0; /* 关键：允许flex子项收缩，防止内容撑破布局 */
        overflow: hidden;
    }
    .fc-current-icon-info img {
        width: 44px;
        height: 44px;
        flex: 0 0 44px; /* 固定尺寸，不参与收缩 */
        object-fit: cover;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        padding: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .fc-current-icon-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0; /* 允许文字区域收缩 */
        overflow: hidden;
    }
    .fc-current-icon-name {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fc-current-icon-tip {
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fc-icon-actions {
        display: flex;
        gap: 8px;
        flex: 0 0 auto; /* 按钮区域不收缩 */
        flex-wrap: nowrap;
    }
    .fc-icon-actions .btn { border-radius: 9px; font-weight: 600; }
    .fc-btn-main {
        background: linear-gradient(135deg, #00e070, #00c860) !important;
        border: none !important;
        color: #04301e !important;
        font-weight: 700 !important;
        box-shadow: 0 3px 8px rgba(0, 210, 106, 0.28);
    }
    .fc-btn-main:hover {
        background: linear-gradient(135deg, #00d26a, #00b856) !important;
        color: #ffffff !important;
    }
    /* 推荐调色板 */
    .fc-color-presets {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
    }
    .fc-color-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #d5d5d5;
        transition: transform 0.15s ease;
    }
    .fc-color-dot:hover { transform: scale(1.2); }

    /* 右侧迷你小程序模拟器 */
    .fc-preview-box {
        position: sticky;
        top: 15px;
        background: linear-gradient(150deg, #f2fef7 0%, #e6fbf1 100%);
        border: 1px solid #c8f2de;
        border-radius: 16px;
        padding: 20px 16px;
        text-align: center;
        box-shadow: 0 4px 14px rgba(4, 48, 30, 0.05);
    }
    .fc-preview-title {
        font-size: 12px;
        color: #00a854;
        font-weight: 700;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .fc-preview-badge {
        width: 68px;
        height: 68px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        overflow: hidden;
        padding: 6px;
        transition: all 0.2s ease;
    }
    .fc-preview-badge img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
    .fc-preview-name {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 6px;
    }
    .fc-preview-kind-pill {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .fc-preview-kind-pill.general {
        background: #e6fbf1;
        color: #00a854;
        border: 1px solid #a7f3d0;
    }
    .fc-preview-kind-pill.farm {
        background: #fef3c7;
        color: #b45309;
        border: 1px solid #fde68a;
    }
    .fc-preview-note {
        font-size: 11px;
        color: #64748b;
        line-height: 1.6;
        border-top: 1px dashed #d1fae5;
        padding-top: 10px;
    }

    /* 图标挑选模态窗口 */
    .fc-icon-modal-wrap {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1999;
    }
    .fc-icon-modal-wrap.open {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .fc-modal-overlay {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(2px);
    }
    .fc-modal-card {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        width: 760px;
        max-width: 95%;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
        padding: 18px 22px 16px;
        z-index: 2000;
        animation: fcModalZoom 0.2s ease-out;
    }
    .fc-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 12px;
    }
    .fc-modal-title {
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .fc-modal-title small {
        font-size: 12px;
        color: #94a3b8;
        font-weight: 400;
        margin-left: 6px;
    }
    .fc-modal-close {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        font-size: 16px;
        transition: all 0.15s ease;
    }
    .fc-modal-close:hover {
        background: #e2e8f0;
        color: #0f172a;
    }

    /* 模态窗工具栏：搜索与分类标签 */
    .fc-modal-toolbar {
        margin-bottom: 12px;
    }
    .fc-modal-search-box {
        position: relative;
        margin-bottom: 10px;
    }
    .fc-modal-search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 13px;
    }
    .fc-modal-search-input {
        width: 100%;
        padding: 7px 12px 7px 34px;
        font-size: 12.5px;
        border: 1px solid #e2e8f0;
        border-radius: 9px;
        outline: none;
        background: #f8fafc;
        transition: all 0.15s ease;
    }
    .fc-modal-search-input:focus {
        border-color: #00d26a;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(0, 210, 106, 0.15);
    }
    .fc-modal-tabs {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .fc-icon-tab-btn {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #64748b;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .fc-icon-tab-btn:hover {
        color: #00a854;
        border-color: #a7f3d0;
    }
    .fc-icon-tab-btn.active {
        background: #00d26a;
        color: #ffffff;
        border-color: #00d26a;
        box-shadow: 0 2px 6px rgba(0, 210, 106, 0.25);
    }

    /* 图标芯片网格 */
    .fc-modal-grid-box {
        flex: 1;
        overflow-y: auto;
        padding: 4px 2px 10px;
        min-height: 240px;
        max-height: 380px;
    }
    .fc-modal-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .fc-icon-chip {
        flex: 0 0 calc(20% - 8px);
        min-width: 110px;
        height: 96px;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer;
        padding: 8px 6px;
        position: relative;
        transition: all 0.15s ease;
    }
    .fc-icon-chip:hover {
        border-color: #00E070;
        background: #f0fdf4;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 210, 106, 0.15);
    }
    .fc-icon-chip.active {
        border-color: #00D26A;
        background: #e6fbf1;
        box-shadow: 0 0 0 2px #00D26A;
    }
    .fc-icon-chip.active::after {
        content: "\f00c";
        font-family: FontAwesome;
        position: absolute;
        right: 4px;
        top: 4px;
        font-size: 10px;
        color: #ffffff;
        background: #00D26A;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fc-icon-chip img {
        width: 52px;
        height: 52px;
        object-fit: cover;
        border-radius: 10px;
    }
    .fc-icon-chip.is-category-top img {
        object-fit: contain;
    }
    .fc-icon-chip .fc-chip-name {
        font-size: 11px;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .fc-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
        margin-top: 6px;
    }
    .fc-modal-footer-tip {
        font-size: 11.5px;
        color: #94a3b8;
    }

    @keyframes fcModalZoom {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }
</style>

<form id="add-form" class="form-horizontal fc-form-container" role="form" data-toggle="validator" method="POST" action="">
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <!-- 区块一：归属与类型 -->
            <div class="fc-section">
                <div class="fc-section-title">
                    <span class="fc-sec-icon"><i class="fa fa-sitemap"></i></span> 归属与类型
                    <span class="fc-sec-tip">决定前台分类层级与发布表单</span>
                </div>
                <div class="form-group" style="margin-bottom:14px;">
                    <label class="control-label col-xs-12 col-sm-3">上级分类:</label>
                    <div class="col-xs-12 col-sm-9">
                        {:build_select('row[pid]', $parentList, 0, ['class'=>'form-control selectpicker', 'id'=>'c-pid', 'data-rule'=>'required'])}
                        <span class="help-block text-muted" style="margin-top:4px;margin-bottom:0;font-size:11px;">选「顶级分类」创建一级大类频道；选指定分类（如「招聘专区」「肉蛋家禽」）则创建下属二级品类。</span>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:10px;">
                    <label class="control-label col-xs-12 col-sm-3">分类类型:</label>
                    <div class="col-xs-12 col-sm-9">
                        <div class="fc-kind-seg">
                            <label>
                                <input type="radio" name="row[kind]" value="general" checked>
                                <span class="fc-pill general"><b><i class="fa fa-briefcase"></i> 通用生活信息</b><small>招聘求职、便民服务、房产二手等常用分类</small></span>
                            </label>
                            <label>
                                <input type="radio" name="row[kind]" value="farm">
                                <span class="fc-pill farm"><b><i class="fa fa-leaf"></i> 农特果蔬产品</b><small>发布时可填写种植面积、采摘时间、产量等</small></span>
                            </label>
                        </div>
                        <span class="help-block text-muted" style="margin-top:8px;margin-bottom:0;font-size:11px;">二级分类自动跟随上级分类的类型，无需单独设置。</span>
                    </div>
                </div>
            </div>

            <!-- 区块二：基本信息 -->
            <div class="fc-section">
                <div class="fc-section-title">
                    <span class="fc-sec-icon"><i class="fa fa-pencil-square-o"></i></span> 基本信息
                </div>
                <div class="form-group" style="margin-bottom:14px;">
                    <label class="control-label col-xs-12 col-sm-3">分类名称:</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" placeholder="例如：招聘求职、骑手配送、鲜土鸡蛋 或 苹果、白菜" value="">
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:14px;">
                    <label class="control-label col-xs-12 col-sm-3">分类图标/图片:</label>
                    <div class="col-xs-12 col-sm-9">
                        <div class="fc-current-icon-box">
                            <div class="fc-current-icon-info">
                                <img id="current-icon-img" src="/static/categories/cat-job.png?v=2" alt="当前图标">
                                <div class="fc-current-icon-text">
                                    <span class="fc-current-icon-name" id="current-icon-label">招聘专区</span>
                                    <span class="fc-current-icon-tip">用于前台金刚区及分类列表展示</span>
                                </div>
                            </div>
                            <div class="fc-icon-actions">
                                <button type="button" class="btn btn-success fc-btn-main" id="btn-open-icon-picker">
                                    <i class="fa fa-th-large"></i> 挑选预设图片
                                </button>
                                <button type="button" id="faupload-icon_key" class="btn btn-default faupload" data-input-id="c-icon_key" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/svg+xml" data-maxsize="500KB" data-multiple="false">
                                    <i class="fa fa-upload text-primary"></i> 上传自定义实拍图
                                </button>
                            </div>
                        </div>
                        <span class="help-block text-muted" style="margin-top:4px;margin-bottom:0;font-size:11px;">推荐从平台预设图片库中直接选用；也支持上传高清实拍方形图（建议 200×200 以上，单张不超过 <b class="text-danger">500KB</b>）。</span>
                        <input type="hidden" name="row[icon_key]" id="c-icon_key" value="cat-job">
                    </div>
                </div>
            </div>

            <!-- 区块三：视觉与排序 -->
            <div class="fc-section">
                <div class="fc-section-title">
                    <span class="fc-sec-icon"><i class="fa fa-paint-brush"></i></span> 视觉与排序
                </div>
                <div class="form-group" style="margin-bottom:14px;">
                    <label class="control-label col-xs-12 col-sm-3">主题色:</label>
                    <div class="col-xs-12 col-sm-9">
                        <div class="fc-color-row">
                            <input id="c-color" data-rule="required" class="form-control" name="row[color]" type="text" value="#00E070" placeholder="例如：#00E070">
                            <input type="color" id="c-color-native" class="fc-color-native" value="#00E070" title="点选颜色">
                            <span class="fc-color-preview" id="color-preview-addon" style="background:#00E070;"></span>
                        </div>
                        <div class="fc-color-presets">
                            <span style="font-size:11px;color:#64748b;">推荐：</span>
                            <div class="fc-color-dot" style="background:#00E070;" title="春绿(品牌主色)" data-color="#00E070"></div>
                            <div class="fc-color-dot" style="background:#3498DB;" title="晴空蓝" data-color="#3498DB"></div>
                            <div class="fc-color-dot" style="background:#F5A623;" title="阳光金" data-color="#F5A623"></div>
                            <div class="fc-color-dot" style="background:#FF7A59;" title="活力橙" data-color="#FF7A59"></div>
                            <div class="fc-color-dot" style="background:#10B981;" title="翡翠绿" data-color="#10B981"></div>
                            <div class="fc-color-dot" style="background:#8B5CF6;" title="典雅紫" data-color="#8B5CF6"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:14px;">
                    <label class="control-label col-xs-12 col-sm-3">排序权重:</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="c-sort" data-rule="required" class="form-control" name="row[sort]" type="number" value="10">
                        <span class="help-block text-muted" style="margin-top:4px;margin-bottom:0;font-size:11px;">数值越小越靠前，决定小程序端的排列次序。</span>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:10px;">
                    <label class="control-label col-xs-12 col-sm-3">启用状态:</label>
                    <div class="col-xs-12 col-sm-9">
                        <input id="c-enabled" name="row[enabled]" type="hidden" value="1">
                        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-enabled" data-yes="1" data-no="0">
                            <i class="fa fa-toggle-on text-success fa-2x"></i>
                        </a>
                    </div>
                </div>
            </div>

            <input id="c-post_count" name="row[post_count]" type="hidden" value="0">
        </div>

        <!-- 右侧：小程序端实时预览 -->
        <div class="col-xs-12 col-sm-4 hidden-xs">
            <div class="fc-preview-box">
                <div class="fc-preview-title">
                    <i class="fa fa-mobile fa-lg"></i> 小程序端 · 实时效果预览
                </div>
                <div class="fc-preview-badge" id="preview-badge" style="background: rgba(0, 224, 112, 0.15); border: 1px solid rgba(0, 224, 112, 0.35);">
                    <img id="preview-icon" src="/static/categories/cat-job.png?v=2" alt="分类图标">
                </div>
                <div class="fc-preview-name" id="preview-name">未命名分类</div>
                <div><span class="fc-preview-kind-pill general" id="preview-kind">通用便民类目</span></div>
                <div class="fc-preview-note">修改名称 / 图标 / 主题色时<br>此预览卡片将实时同步更新</div>
            </div>
        </div>
    </div>

    <div class="form-group layer-footer" style="margin-top:10px;padding-top:14px;border-top:1px solid #eef2f6;">
        <label class="control-label col-xs-12 col-sm-3"></label>
        <div class="col-xs-12 col-sm-9">
            <button type="submit" class="btn btn-success btn-embossed disabled fc-btn-main"><i class="fa fa-check"></i> 确认保存分类</button>
            <button type="reset" class="btn btn-default btn-embossed" style="margin-left:10px;">重置</button>
        </div>
    </div>
</form>

<!-- 预设图标选择模态窗口（常用图标库，含搜索与分组） -->
<div class="fc-icon-modal-wrap" id="fc-icon-modal" style="display:none !important;">
    <div class="fc-modal-overlay"></div>
    <div class="fc-modal-card">
        <div class="fc-modal-header">
            <div class="fc-modal-title">
                <i class="fa fa-th-large text-success"></i> 挑选分类图标 / 实拍图
                <small>点击卡片即可选用</small>
            </div>
            <button type="button" class="fc-modal-close" id="btn-close-icon-modal">&times;</button>
        </div>

        <!-- 搜索与分类导航标签 -->
        <div class="fc-modal-toolbar">
            <div class="fc-modal-search-box">
                <i class="fa fa-search"></i>
                <input type="text" id="fc-icon-search" class="fc-modal-search-input" placeholder="输入名称快速筛选，例如：招聘、骑手、苹果、白菜...">
            </div>
            <div class="fc-modal-tabs">
                <button type="button" class="fc-icon-tab-btn active" data-group="all">全部</button>
                <button type="button" class="fc-icon-tab-btn" data-group="top">一级大类 (8)</button>
                <button type="button" class="fc-icon-tab-btn" data-group="job">招聘职位 (8)</button>
                <button type="button" class="fc-icon-tab-btn" data-group="poultry">肉蛋水产 (5)</button>
                <button type="button" class="fc-icon-tab-btn" data-group="fruit">新鲜水果 (15)</button>
                <button type="button" class="fc-icon-tab-btn" data-group="veg">时令蔬菜 (8)</button>
            </div>
        </div>

        <!-- 图标网格卡片 -->
        <div class="fc-modal-grid-box">
            <div class="fc-modal-grid">
                <!-- 1. 一级大类频道 (8) -->
                <div class="fc-icon-chip is-category-top active" data-group="top" data-key="cat-job" data-name="招聘专区" data-color="#00D26A" title="招聘专区"><img src="/static/categories/cat-job.png" alt="icon"><span class="fc-chip-name">招聘专区</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-poultry" data-name="肉蛋家禽" data-color="#FF7A59" title="肉蛋家禽"><img src="/static/categories/cat-poultry.png" alt="icon"><span class="fc-chip-name">肉蛋家禽</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-veg" data-name="蔬菜专区" data-color="#00E070" title="蔬菜专区"><img src="/static/categories/cat-veg.png" alt="icon"><span class="fc-chip-name">蔬菜专区</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-fruit" data-name="水果专区" data-color="#F5A623" title="水果专区"><img src="/static/categories/cat-fruit.png" alt="icon"><span class="fc-chip-name">水果专区</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-service" data-name="便民服务" data-color="#10B981" title="便民服务"><img src="/static/icons/cat-service.png" alt="icon"><span class="fc-chip-name">便民服务</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-house" data-name="房产租售" data-color="#3498DB" title="房产租售"><img src="/static/icons/cat-house.png" alt="icon"><span class="fc-chip-name">房产租售</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-goods" data-name="二手闲置" data-color="#F5A623" title="二手闲置"><img src="/static/icons/cat-goods.png" alt="icon"><span class="fc-chip-name">二手闲置</span></div>
                <div class="fc-icon-chip is-category-top" data-group="top" data-key="cat-car" data-name="车辆交易" data-color="#FF7A59" title="车辆交易"><img src="/static/icons/cat-car.png" alt="icon"><span class="fc-chip-name">车辆交易</span></div>

                <!-- 2. 招聘职位 (8) -->
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/3fb1eee6654e4d5e7c1b5d3189643fae.jpg" data-name="骑手配送" data-color="#F5A623" title="骑手配送"><img src="/uploads/20261028/3fb1eee6654e4d5e7c1b5d3189643fae.jpg" alt="icon"><span class="fc-chip-name">骑手配送</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/f5e2927ba040dd1b917b6fbd6b053458.jpg" data-name="司机出行" data-color="#3498DB" title="司机出行"><img src="/uploads/20261028/f5e2927ba040dd1b917b6fbd6b053458.jpg" alt="icon"><span class="fc-chip-name">司机出行</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/cb17be7476ce1c59e14944f9fe60438c.jpg" data-name="普工技工" data-color="#00D26A" title="普工技工"><img src="/uploads/20261028/cb17be7476ce1c59e14944f9fe60438c.jpg" alt="icon"><span class="fc-chip-name">普工技工</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/4e4f911ac45e9dc5471597a8ff7862f7.jpg" data-name="餐饮服务" data-color="#EF4444" title="餐饮服务"><img src="/uploads/20261028/4e4f911ac45e9dc5471597a8ff7862f7.jpg" alt="icon"><span class="fc-chip-name">餐饮服务</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/915423715a937ad7ba4b737690c963d2.jpg" data-name="家政保洁" data-color="#10B981" title="家政保洁"><img src="/uploads/20261028/915423715a937ad7ba4b737690c963d2.jpg" alt="icon"><span class="fc-chip-name">家政保洁</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/d0cc33f85a8580be2f526eb360448867.jpg" data-name="销售客服" data-color="#8B5CF6" title="销售客服"><img src="/uploads/20261028/d0cc33f85a8580be2f526eb360448867.jpg" alt="icon"><span class="fc-chip-name">销售客服</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/99c32f9508e3429ea02a4ce1c34f9df2.jpg" data-name="教育培训" data-color="#06B6D4" title="教育培训"><img src="/uploads/20261028/99c32f9508e3429ea02a4ce1c34f9df2.jpg" alt="icon"><span class="fc-chip-name">教育培训</span></div>
                <div class="fc-icon-chip" data-group="job" data-key="/uploads/20261028/0c913f9d7d72a10c0c598c36eea89b14.jpg" data-name="兼职短工" data-color="#EC4899" title="兼职短工"><img src="/uploads/20261028/0c913f9d7d72a10c0c598c36eea89b14.jpg" alt="icon"><span class="fc-chip-name">兼职短工</span></div>

                <!-- 3. 肉蛋水产 (5) -->
                <div class="fc-icon-chip" data-group="poultry" data-key="/uploads/20261028/69b65e455081d5aa8834b48bd879009d.jpg" data-name="鲜土鸡蛋" data-color="#F5A623" title="鲜土鸡蛋"><img src="/uploads/20261028/69b65e455081d5aa8834b48bd879009d.jpg" alt="icon"><span class="fc-chip-name">鲜土鸡蛋</span></div>
                <div class="fc-icon-chip" data-group="poultry" data-key="/uploads/20261028/cafbe884f6616622dcdd5650bbbce3b3.jpg" data-name="散养土鸡" data-color="#F97316" title="散养土鸡"><img src="/uploads/20261028/cafbe884f6616622dcdd5650bbbce3b3.jpg" alt="icon"><span class="fc-chip-name">散养土鸡</span></div>
                <div class="fc-icon-chip" data-group="poultry" data-key="/uploads/20261028/d2a3226fd6ffa12d24db06c9342a9118.jpg" data-name="生鲜猪肉" data-color="#EA580C" title="生鲜猪肉"><img src="/uploads/20261028/d2a3226fd6ffa12d24db06c9342a9118.jpg" alt="icon"><span class="fc-chip-name">生鲜猪肉</span></div>
                <div class="fc-icon-chip" data-group="poultry" data-key="/uploads/20261028/70cafc924bc7e4018bfefbe883e27c78.jpg" data-name="高山牛肉" data-color="#DC2626" title="高山牛肉"><img src="/uploads/20261028/70cafc924bc7e4018bfefbe883e27c78.jpg" alt="icon"><span class="fc-chip-name">高山牛肉</span></div>
                <div class="fc-icon-chip" data-group="poultry" data-key="/uploads/20261028/bb63e21dae84dc15056a0b50753577d9.jpg" data-name="鲜活水产" data-color="#0284C7" title="鲜活水产"><img src="/uploads/20261028/bb63e21dae84dc15056a0b50753577d9.jpg" alt="icon"><span class="fc-chip-name">鲜活水产</span></div>

                <!-- 4. 新鲜水果 (15) -->
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/d29f6003464df81337954f2e3b9213de.jpg" data-name="红富士苹果" data-color="#E11D48" title="红富士苹果"><img src="/uploads/20261020/d29f6003464df81337954f2e3b9213de.jpg" alt="icon"><span class="fc-chip-name">苹果</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/0c0115e6946ec7ac4c2fe7088bdbe0d7.jpg" data-name="柑橘橙子" data-color="#F97316" title="柑橘橙子"><img src="/uploads/20261020/0c0115e6946ec7ac4c2fe7088bdbe0d7.jpg" alt="icon"><span class="fc-chip-name">柑橘</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/74d6e0301b727fe2c48638ebd7989fa8.jpg" data-name="新鲜猕猴桃" data-color="#65A30D" title="新鲜猕猴桃"><img src="/uploads/20261020/74d6e0301b727fe2c48638ebd7989fa8.jpg" alt="icon"><span class="fc-chip-name">猕猴桃</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/ebb126f270081d28162e90fd240cd481.jpg" data-name="鲜采草莓" data-color="#F43F5E" title="鲜采草莓"><img src="/uploads/20261020/ebb126f270081d28162e90fd240cd481.jpg" alt="icon"><span class="fc-chip-name">草莓</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/0e6e5dbbbd77f31315e643c2e4915d9a.jpg" data-name="甜脆西瓜" data-color="#16A34A" title="甜脆西瓜"><img src="/uploads/20261020/0e6e5dbbbd77f31315e643c2e4915d9a.jpg" alt="icon"><span class="fc-chip-name">西瓜</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/b0af7b62d055688ef020e9dab794373d.jpg" data-name="提子葡萄" data-color="#7E22CE" title="提子葡萄"><img src="/uploads/20261020/b0af7b62d055688ef020e9dab794373d.jpg" alt="icon"><span class="fc-chip-name">葡萄</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/2b709d7c76d07516758df3558d83a56a.jpg" data-name="鲜桃蜜桃" data-color="#EC4899" title="鲜桃蜜桃"><img src="/uploads/20261020/2b709d7c76d07516758df3558d83a56a.jpg" alt="icon"><span class="fc-chip-name">蜜桃</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261020/c994cb47610ed3514571db794b1ee724.jpg" data-name="新鲜百香果" data-color="#9333EA" title="新鲜百香果"><img src="/uploads/20261020/c994cb47610ed3514571db794b1ee724.jpg" alt="icon"><span class="fc-chip-name">百香果</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/f1a4f3c123c81aea2f0fd24c8688d988.jpg" data-name="香甜芒果" data-color="#F5A623" title="香甜芒果"><img src="/uploads/20261028/f1a4f3c123c81aea2f0fd24c8688d988.jpg" alt="icon"><span class="fc-chip-name">芒果</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/d8b5420c12f7921e325050be088a011f.jpg" data-name="香蕉" data-color="#FBBF24" title="香蕉"><img src="/uploads/20261028/d8b5420c12f7921e325050be088a011f.jpg" alt="icon"><span class="fc-chip-name">香蕉</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/75dd5971bdfa99d64a62c5b1e72cac11.jpg" data-name="蓝莓" data-color="#3B82F6" title="蓝莓"><img src="/uploads/20261028/75dd5971bdfa99d64a62c5b1e72cac11.jpg" alt="icon"><span class="fc-chip-name">蓝莓</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/e71ba37749da829c50d098168dbb4fa2.jpg" data-name="车厘子樱桃" data-color="#DC2626" title="车厘子"><img src="/uploads/20261028/e71ba37749da829c50d098168dbb4fa2.jpg" alt="icon"><span class="fc-chip-name">车厘子</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/65d91dba8121f8b49356f356aa6a3b28.jpg" data-name="红心火龙果" data-color="#EC4899" title="火龙果"><img src="/uploads/20261028/65d91dba8121f8b49356f356aa6a3b28.jpg" alt="icon"><span class="fc-chip-name">火龙果</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/0391292554cf8efd457c44caedf67867.jpg" data-name="新鲜柠檬" data-color="#EAB308" title="柠檬"><img src="/uploads/20261028/0391292554cf8efd457c44caedf67867.jpg" alt="icon"><span class="fc-chip-name">柠檬</span></div>
                <div class="fc-icon-chip" data-group="fruit" data-key="/uploads/20261028/49b39ce93043ec8a6f24bcef9bc45f96.jpg" data-name="新鲜荔枝" data-color="#EF4444" title="荔枝"><img src="/uploads/20261028/49b39ce93043ec8a6f24bcef9bc45f96.jpg" alt="icon"><span class="fc-chip-name">荔枝</span></div>

                <!-- 5. 时令蔬菜 (8) -->
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/11fe77af7af7a4b2239a20a189fca471.jpg" data-name="高山白菜" data-color="#00D26A" title="高山白菜"><img src="/uploads/20261020/11fe77af7af7a4b2239a20a189fca471.jpg" alt="icon"><span class="fc-chip-name">白菜</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/22e041f997661fbcbcf10ce86da3c01b.jpg" data-name="有机花菜" data-color="#00D26A" title="有机花菜"><img src="/uploads/20261020/22e041f997661fbcbcf10ce86da3c01b.jpg" alt="icon"><span class="fc-chip-name">花菜</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/2bee40730c9f23595deecdfa24b206cf.jpg" data-name="新鲜青菜" data-color="#16A34A" title="新鲜青菜"><img src="/uploads/20261020/2bee40730c9f23595deecdfa24b206cf.jpg" alt="icon"><span class="fc-chip-name">青菜</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/0604d246fb42bb569e8031b3a1c3c9ad.jpg" data-name="熟透西红柿" data-color="#EF4444" title="熟透西红柿"><img src="/uploads/20261020/0604d246fb42bb569e8031b3a1c3c9ad.jpg" alt="icon"><span class="fc-chip-name">西红柿</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/8aac76e021aea0dd999ba5689ae86577.jpg" data-name="鲜红辣椒" data-color="#DC2626" title="鲜红辣椒"><img src="/uploads/20261020/8aac76e021aea0dd999ba5689ae86577.jpg" alt="icon"><span class="fc-chip-name">辣椒</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/f7a5d6be1d58be88cdd0915c050f6028.jpg" data-name="脆甜白萝卜" data-color="#22C55E" title="脆甜白萝卜"><img src="/uploads/20261020/f7a5d6be1d58be88cdd0915c050f6028.jpg" alt="icon"><span class="fc-chip-name">萝卜</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/1ad84fe2cef8ef22ef29ac45a898081c.jpg" data-name="新鲜紫甘蓝" data-color="#9333EA" title="新鲜紫甘蓝"><img src="/uploads/20261020/1ad84fe2cef8ef22ef29ac45a898081c.jpg" alt="icon"><span class="fc-chip-name">紫甘蓝</span></div>
                <div class="fc-icon-chip" data-group="veg" data-key="/uploads/20261020/b2cabf7db99e86a8ee8da424e19ebf9d.jpg" data-name="新鲜青甘蓝" data-color="#10B981" title="新鲜青甘蓝"><img src="/uploads/20261020/b2cabf7db99e86a8ee8da424e19ebf9d.jpg" alt="icon"><span class="fc-chip-name">青甘蓝</span></div>
            </div>
        </div>

        <div class="fc-modal-footer">
            <span class="fc-modal-footer-tip"><i class="fa fa-info-circle text-success"></i> 点击任意图片卡片将自动设定，并可智能推荐分类名称与主题色</span>
            <button type="button" class="btn btn-default btn-sm" id="btn-cancel-modal" onclick="$('#btn-close-icon-modal').click();">关闭</button>
        </div>
    </div>
</div>