sqxp/docs/原型图/web/询价新增.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 新增询价单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 16px; }
        .form-item { margin-bottom: 16px; }
        .product-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
        .product-tag { padding: 6px 12px; background: #f5f7fa; border-radius: 16px; font-size: 13px; cursor: pointer; }
        .product-tag.selected { background: #ecf5ff; color: #1989fa; }
        .selected-products { margin-top: 16px; }
        .selected-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f9f9f9; border-radius: 8px; margin-bottom: 8px; }
        .selected-item .name { flex: 1; }
        .selected-item .category { font-size: 12px; color: #909399; }
        .action-bar { display: flex; gap: 12px; justify-content: center; padding-top: 20px; border-top: 1px solid #eee; }
    </style>
</head>
<body>
    <div class="topbar">
        <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
        <div class="topbar-user"><el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar><span>管理员</span></div>
    </div>
    <div class="main-container">
        <div class="sidebar">
            <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
            <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
            <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
            <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
            <div class="menu-item active"><el-icon><Search /></el-icon><span>询价管理</span></div>
            <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
            <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
            <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
            <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
            <div class="menu-item"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
        </div>
        <div class="content">
            <div class="breadcrumb">询价管理 / 新增询价单</div>
            <div class="card">
                <div class="card-header"><span class="card-title">创建询价单</span></div>
                <div class="form-section-title">基本信息</div>
                <div class="form-row">
                    <el-form-item label="询价单标题"><el-input placeholder="如：2026年3月第4周询价单" /></el-form-item>
                    <el-form-item label="所属区域">
                        <el-select placeholder="请选择区域" style="width:100%">
                            <el-option label="城东区域" value="cd" />
                            <el-option label="城西区域" value="cx" />
                            <el-option label="城南区域" value="cn" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="询价有效期">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%;" />
                    </el-form-item>
                    <el-form-item label="备注"><el-input type="textarea" :rows="2" placeholder="询价备注（选填）" /></el-form-item>
                </div>
            </div>
            <div class="card">
                <div class="form-section-title">选择询价商品</div>
                <el-form-item label="商品分类">
                    <el-radio-group>
                        <el-radio-button label="">全部分类</el-radio-button>
                        <el-radio-button label="CAT_001">蔬菜</el-radio-button>
                        <el-radio-button label="CAT_002">水果</el-radio-button>
                        <el-radio-button label="CAT_003">肉类</el-radio-button>
                        <el-radio-button label="CAT_004">生活用品</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <div class="form-section-title" style="font-size:14px;">可选商品（点击选择）</div>
                <div class="product-select">
                    <div class="product-tag selected">新鲜猪肉</div>
                    <div class="product-tag selected">新鲜蔬菜</div>
                    <div class="product-tag selected">新鲜水果</div>
                    <div class="product-tag">鸡蛋</div>
                    <div class="product-tag">大米</div>
                    <div class="product-tag">食用油</div>
                    <div class="product-tag">调味料</div>
                    <div class="product-tag">卫生纸</div>
                </div>
                <div class="selected-products">
                    <div class="form-section-title" style="font-size:14px;">已选商品（3种）</div>
                    <div class="selected-item"><span class="name">新鲜猪肉</span><span class="category">肉类</span><el-button type="danger" link size="small">移除</el-button></div>
                    <div class="selected-item"><span class="name">新鲜蔬菜</span><span class="category">蔬菜</span><el-button type="danger" link size="small">移除</el-button></div>
                    <div class="selected-item"><span class="name">新鲜水果</span><span class="category">水果</span><el-button type="danger" link size="small">移除</el-button></div>
                </div>
                <div class="action-bar">
                    <el-button @click="goBack">取消</el-button>
                    <el-button type="primary">保存草稿</el-button>
                    <el-button type="success">保存并发布</el-button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({ setup() { const goBack = () => window.history.back(); return { goBack }; } });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); }
        app.mount('#app');
    </script>
</body>
</html>