编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>沙集e站</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
            font-size: 14px;
        }
        .app {
            height: 100%;
            max-width: 430px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            background: #f5f5f5;
        }
        
        /* 顶部品牌栏 */
        .brand-bar {
            background: #fff;
            padding: 10px 15px 12px;
            display: flex;
            align-items: flex-start;
            flex-shrink: 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .brand-left {
            display: flex;
            flex-direction: column;
        }
        .brand-name {
            font-size: 18px;
            font-weight: 600;
            color: #e54d4d;
            line-height: 1.2;
        }
        .brand-slogan {
            font-size: 10px;
            color: #fff;
            background: #e54d4d;
            padding: 2px 8px;
            border-radius: 10px;
            margin-top: 4px;
            display: inline-block;
        }
        
        /* 搜索框 */
        .search-bar {
            background: #fff;
            padding: 10px 15px;
        }
        .search-box {
            height: 36px;
            background: #f5f5f5;
            border-radius: 18px;
            display: flex;
            align-items: center;
            padding: 0 14px;
            gap: 8px;
        }
        .search-box svg {
            width: 16px;
            height: 16px;
            stroke: #999;
            stroke-width: 2;
            fill: none;
            flex-shrink: 0;
        }
        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 13px;
            background: transparent;
            color: #333;
        }
        .search-box input::placeholder {
            color: #999;
        }
        
        /* 页面容器 */
        .page-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 55px;
        }
        .page { display: none; height: 100%; }
        .page.active { display: flex; flex-direction: column; }
        
        /* 首页 */
        .home-page { background: #fff; }
        
        /* Banner轮播 */
        .banner {
            width: 100%;
            height: 120px;
            position: relative;
            overflow: hidden;
        }
        .banner-slider {
            display: flex;
            height: 100%;
            transition: transform 0.3s ease;
        }
        .banner-slide {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
        }
        .banner-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .banner-dots {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        .banner-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
        }
        .banner-dot.active {
            background: #fff;
            width: 16px;
            border-radius: 3px;
        }
        
        /* 3*2卡片区域 */
        .nav-grid {
            background: #fff;
            padding: 15px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .nav-item {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 12px 8px;
            text-align: center;
            cursor: pointer;
        }
        .nav-item-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        .nav-item-desc {
            font-size: 10px;
            color: #999;
            margin-top: 2px;
        }
        
        /* 最新热门切换 */
        .tab-switch {
            background: #fff;
            padding: 12px 15px;
            display: flex;
            gap: 20px;
            border-bottom: 1px solid #f5f5f5;
        }
        .tab-switch-item {
            font-size: 15px;
            color: #999;
            cursor: pointer;
            position: relative;
            padding-bottom: 2px;
        }
        .tab-switch-item.active {
            color: #e54d4d;
            font-weight: 600;
        }
        .tab-switch-item.active::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e54d4d;
        }
        
        /* 信息列表 */
        .post-list { flex: 1; overflow-y: auto; }
        .post-card {
            background: #fff;
            padding: 12px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
        }
        .post-header { display: flex; justify-content: space-between; align-items: flex-start; }
        .post-title { font-size: 14px; color: #333; flex: 1; line-height: 1.4; }
        .post-tag { 
            font-size: 10px; 
            color: #fff; 
            background: #e54d4d;
            padding: 2px 5px; 
            border-radius: 2px; 
            margin-left: 6px;
            flex-shrink: 0;
        }
        .post-content { display: flex; gap: 10px; margin-top: 8px; }
        .post-img {
            width: 70px;
            height: 70px;
            background: #f5f5f5;
            border-radius: 4px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .post-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .post-desc {
            font-size: 12px;
            color: #999;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .post-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
        .post-price { font-size: 14px; font-weight: 600; color: #e54d4d; }
        .post-time { font-size: 11px; color: #999; }
        
        /* 分类页 */
        .category-page { background: #fff; }
        .list-header {
            background: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .back-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #333;
            font-size: 18px;
        }
        .list-title { font-size: 16px; font-weight: 600; color: #333; flex: 1; }
        
        /* 分类Tab */
        .category-tabs {
            background: #fff;
            display: flex;
            border-bottom: 1px solid #f0f0f0;
            overflow-x: auto;
        }
        .category-tab {
            padding: 12px 14px;
            text-align: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
        }
        .category-tab.active { color: #e54d4d; font-weight: 600; }
        .category-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 2px;
            background: #e54d4d;
        }
        
        /* 发布页 */
        .publish-page { background: #fff; }
        .publish-header {
            background: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .publish-form { padding: 15px; flex: 1; overflow-y: auto; }
        .form-group { margin-bottom: 18px; }
        .form-label {
            font-size: 14px;
            color: #333;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .form-label span { color: #e54d4d; }
        .form-input {
            width: 100%;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
            outline: none;
            color: #333;
        }
        .form-input:focus { border-color: #e54d4d; }
        textarea.form-input { min-height: 100px; resize: vertical; }
        .category-select {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .category-option {
            padding: 10px 8px;
            border: 1px solid #eee;
            border-radius: 8px;
            text-align: center;
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }
        .category-option.active { border-color: #e54d4d; background: #fff5f5; color: #e54d4d; }
        .publish-submit {
            width: 100%;
            height: 44px;
            background: #e54d4d;
            color: #fff;
            border: none;
            border-radius: 22px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* 关于页 */
        .about-page { background: #f5f5f5; }
        .about-banner {
            height: 120px;
            background: linear-gradient(135deg, #e54d4d 0%, #ff6b6b 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .about-banner h2 { font-size: 22px; margin-bottom: 6px; }
        .about-banner p { font-size: 12px; opacity: 0.9; }
        .about-content { padding: 15px; }
        .about-section {
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .about-section h3 {
            font-size: 15px;
            color: #333;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .about-section h3 svg {
            width: 18px;
            height: 18px;
            stroke: #e54d4d;
            stroke-width: 1.5;
            fill: none;
        }
        .about-section p {
            font-size: 13px;
            color: #666;
            line-height: 1.7;
        }
        .about-contact {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        .about-contact-item {
            flex: 1;
            background: #f5f5f5;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
        .about-contact-item .label { font-size: 11px; color: #999; }
        .about-contact-item .value { font-size: 13px; color: #333; font-weight: 500; margin-top: 4px; }
        
        /* 我的页面 */
        .user-page { background: #f5f5f5; }
        .user-header {
            background: #fff;
            padding: 25px 20px;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
        }
        .user-info { display: flex; align-items: center; gap: 15px; }
        .user-avatar {
            width: 56px;
            height: 56px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-avatar svg {
            width: 26px;
            height: 26px;
            stroke: #999;
            stroke-width: 1.5;
            fill: none;
        }
        .user-name { font-size: 16px; font-weight: 500; }
        .user-id { font-size: 12px; color: #999; margin-top: 3px; }
        
        /* 配额信息 */
        .quota-info {
            margin: 10px 15px;
            background: #fff;
            padding: 14px;
            border-radius: 8px;
        }
        .quota-title { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 10px; }
        .quota-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .quota-item { text-align: center; }
        .quota-item .num { font-size: 17px; font-weight: 600; color: #e54d4d; }
        .quota-item .label { font-size: 11px; color: #999; margin-top: 2px; }
        
        /* 用户菜单 */
        .user-menu {
            margin: 0 15px 15px;
            background: #fff;
            border-radius: 8px;
        }
        .menu-item {
            padding: 14px 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item .icon {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .menu-item .icon svg {
            width: 18px;
            height: 18px;
            stroke: #666;
            stroke-width: 1.5;
            fill: none;
        }
        .menu-item .text { flex: 1; font-size: 14px; color: #333; }
        .menu-item .arrow { color: #ccc; font-size: 14px; }
        
        /* 客服弹窗 */
        .service-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .service-modal.show { display: flex; }
        .service-modal-content {
            width: 90%;
            max-width: 310px;
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
        .service-modal-icon {
            width: 56px;
            height: 56px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
        }
        .service-modal-icon svg {
            width: 28px;
            height: 28px;
            stroke: #e54d4d;
            stroke-width: 1.5;
            fill: none;
        }
        .service-modal-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; }
        .service-modal-desc { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 14px; }
        .service-modal-qr {
            margin-bottom: 14px;
        }
        .service-modal-qr .qr-placeholder {
            width: 160px;
            height: 160px;
            background: #f5f5f5;
            border: 1px dashed #ccc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 13px;
            color: #999;
        }
        .service-modal-btn {
            width: 100%;
            height: 42px;
            background: #e54d4d;
            border: none;
            border-radius: 21px;
            font-size: 14px;
            color: #fff;
            font-weight: 500;
            cursor: pointer;
        }
        .service-modal-close {
            margin-top: 10px;
            font-size: 13px;
            color: #999;
            cursor: pointer;
        }
        
        /* 详情页 */
        .detail-page { background: #fff; }
        .detail-header {
            background: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-banner {
            height: 160px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .detail-banner svg {
            width: 50px;
            height: 50px;
            stroke: #ccc;
            stroke-width: 1.5;
            fill: none;
        }
        .detail-content { flex: 1; overflow-y: auto; padding-bottom: 65px; }
        .detail-info { padding: 14px; border-bottom: 8px solid #f5f5f5; }
        .detail-title { font-size: 16px; color: #333; line-height: 1.4; }
        .detail-price-row { margin-top: 10px; display: flex; align-items: baseline; gap: 4px; }
        .detail-price { font-size: 18px; font-weight: 600; color: #e54d4d; }
        .detail-price-unit { font-size: 13px; color: #e54d4d; }
        .detail-tags { margin-top: 10px; display: flex; gap: 6px; }
        .detail-tags span { font-size: 11px; color: #666; }
        .detail-desc-section { padding: 14px; }
        .detail-desc-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; }
        .detail-desc-text { font-size: 13px; color: #666; line-height: 1.7; }
        .detail-contact { padding: 14px; background: #fafafa; margin-top: 12px; border-radius: 8px; }
        .contact-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
        .contact-icon {
            width: 34px;
            height: 34px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .contact-icon svg {
            width: 16px;
            height: 16px;
            stroke: #666;
            stroke-width: 1.5;
            fill: none;
        }
        .contact-text { flex: 1; }
        .contact-name { font-size: 13px; color: #333; }
        .contact-value { font-size: 12px; color: #999; margin-top: 2px; }
        .detail-bottom {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: #fff;
            padding: 10px 15px;
            display: flex;
            gap: 12px;
            border-top: 1px solid #f0f0f0;
        }
        .detail-bottom .btn {
            flex: 1;
            height: 42px;
            border-radius: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        .btn-collect { background: #f5f5f5; color: #666; }
        .btn-contact { background: #e54d4d; color: #fff; }
        
        /* Toast */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.65);
            color: #fff;
            padding: 10px 22px;
            border-radius: 8px;
            font-size: 13px;
            z-index: 9999;
            display: none;
        }
        .toast.show { display: block; }
        
        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 55px;
            background: #fff;
            display: flex;
            border-top: 1px solid #f0f0f0;
            z-index: 100;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .tab-item svg {
            width: 22px;
            height: 22px;
            stroke: #999;
            stroke-width: 1.5;
            fill: none;
        }
        .tab-item.active svg { stroke: #e54d4d; }
        .tab-item .label { font-size: 10px; color: #999; margin-top: 2px; }
        .tab-item.active .label { color: #e54d4d; }
    </style>
</head>
<body>
    <div class="app">
        <!-- 顶部品牌栏 -->
        <div class="brand-bar">
            <div class="brand-left">
                <div class="brand-name">沙集E站</div>
                <div class="brand-slogan">招人才 代加工 找货源</div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div class="search-bar">
            <div class="search-box" onclick="openSearchPage()">
                <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path></svg>
                <input type="text" placeholder="搜索 招工、厂房、货源、代加工......" readonly>
            </div>
        </div>
        
        <!-- 页面容器 -->
        <div class="page-container">
            <!-- 首页 -->
            <div class="page home-page active" id="page-home">
                <!-- Banner轮播 -->
                <div class="banner" id="homeBanner">
                    <div class="banner-slider" id="bannerSlider"></div>
                    <div class="banner-dots" id="bannerDots"></div>
                </div>
                
                <!-- 3*2导航卡片 -->
                <div class="nav-grid">
                    <div class="nav-item" onclick="goToCategory('招工')">
                        <div class="nav-item-title">招工</div>
                        <div class="nav-item-desc">找工作</div>
                    </div>
                    <div class="nav-item" onclick="goToCategory('代加工')">
                        <div class="nav-item-title">代加工</div>
                        <div class="nav-item-desc">需求/加工方</div>
                    </div>
                    <div class="nav-item" onclick="goToCategory('找货源')">
                        <div class="nav-item-title">找货源</div>
                        <div class="nav-item-desc">发货/需求方</div>
                    </div>
                    <div class="nav-item" onclick="goToCategory('厂房')">
                        <div class="nav-item-title">厂房</div>
                        <div class="nav-item-desc">机械租赁</div>
                    </div>
                    <div class="nav-item" onclick="goToCategory('原材料')">
                        <div class="nav-item-title">原材料</div>
                        <div class="nav-item-desc">采购</div>
                    </div>
                    <div class="nav-item" onclick="goToCategory('代运营')">
                        <div class="nav-item-title">代运营</div>
                        <div class="nav-item-desc">电商运营</div>
                    </div>
                </div>
                
                <!-- 最新热门切换 -->
                <div class="tab-switch">
                    <div class="tab-switch-item active" onclick="switchHomeTab('new', this)">最新</div>
                    <div class="tab-switch-item" onclick="switchHomeTab('hot', this)">热门</div>
                </div>
                
                <!-- 信息列表 -->
                <div class="post-list" id="homePostList"></div>
            </div>
            
            <!-- 分类页 -->
            <div class="page category-page" id="page-category">
                <div class="list-header">
                    <div class="back-btn" onclick="switchTab('home')">←</div>
                    <div class="list-title">信息列表</div>
                </div>
                <div class="category-tabs">
                    <div class="category-tab active" onclick="filterCategory('全部')">全部</div>
                    <div class="category-tab" onclick="filterCategory('招工')">招工</div>
                    <div class="category-tab" onclick="filterCategory('代加工')">代加工</div>
                    <div class="category-tab" onclick="filterCategory('找货源')">找货源</div>
                    <div class="category-tab" onclick="filterCategory('厂房')">厂房</div>
                    <div class="category-tab" onclick="filterCategory('原材料')">原材料</div>
                    <div class="category-tab" onclick="filterCategory('代运营')">代运营</div>
                </div>
                <div class="post-list" id="categoryPostList"></div>
            </div>
            
            <!-- 发布页 -->
            <div class="page publish-page" id="page-publish">
                <div class="publish-header">
                    <div class="back-btn" onclick="switchTab('home')">←</div>
                    <span style="font-size:16px;font-weight:600;color:#333">发布信息</span>
                </div>
                <div class="publish-form">
                    <div class="form-group">
                        <div class="form-label">信息类型 <span>*</span></div>
                        <div class="category-select">
                            <div class="category-option" onclick="selectPublishCat(this, '招工')">招工</div>
                            <div class="category-option" onclick="selectPublishCat(this, '代加工')">代加工</div>
                            <div class="category-option" onclick="selectPublishCat(this, '找货源')">找货源</div>
                            <div class="category-option" onclick="selectPublishCat(this, '厂房')">厂房</div>
                            <div class="category-option" onclick="selectPublishCat(this, '原材料')">原材料</div>
                            <div class="category-option" onclick="selectPublishCat(this, '代运营')">代运营</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-label">信息标题 <span>*</span></div>
                        <input type="text" class="form-input" id="publishTitle" placeholder="请输入信息标题">
                    </div>
                    <div class="form-group">
                        <div class="form-label">详细描述 <span>*</span></div>
                        <textarea class="form-input" id="publishDesc" placeholder="请详细描述信息内容">
编辑页面

沙集E站

平台介绍

我们的服务

联系我们
