wuminjun
/
recycle-docker


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择机型</title>
<style>
body{
    margin:0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto;
    background:#f7f8fa;
}

.header{
    padding:12px 14px;
    background:#fff;
    border-bottom:1px solid #eee;
    font-size:16px;
    font-weight:600;
}

.tabs{
    display:flex;
    gap:10px;
    padding:10px 12px;
    background:#fff;
    border-bottom:1px solid #eee;
}

.tab{
    padding:6px 12px;
    border-radius:16px;
    background:#f1f3f5;
    font-size:13px;
}

.tab.active{
    background:#e6f0ff;
    color:#2563eb;
    font-weight:600;
}

.main{
    display:flex;
    height:calc(100vh - 96px);
}

.brand-col{
    width:90px;
    background:#fff;
    border-right:1px solid #eee;
    overflow-y:auto;
}

.brand-item{
    padding:12px 8px;
    text-align:center;
    font-size:13px;
    color:#333;
}

.brand-item a{
    text-decoration:none;
    color:inherit;
}

.brand-item.active{
    background:#f0f6ff;
    color:#2563eb;
    font-weight:600;
}

.machine-col{
    flex:1;
    background:#fff;
    overflow-y:auto;
}

.machine-item{
    padding:12px 14px;
    border-bottom:1px solid #f1f1f1;
    font-size:14px;
}

.machine-item a{
    text-decoration:none;
    color:#111;
}

.machine-item:hover{
    background:#f8fafc;
}
</style>
</head>
<body>

<div class="header">选择旧机</div>

<!-- 分类栏（只保留手机高亮，结构和你图一致） -->
<div class="tabs">
    <div class="tab active">手机</div>
    <div class="tab">平板</div>
    <div class="tab">笔记本</div>
    <div class="tab">手表</div>
</div>

<div class="main">

    <!-- 左：品牌 -->
    <div class="brand-col">
        {% for b in brands %}
        <div class="brand-item {% if current_brand==b.brand_name %}active{% endif %}">
            <a href="/estimate/select?brand={{b.brand_name}}">
                {{ b.brand_name }}
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- 右：机型 -->
    <div class="machine-col">
        {% for m in machines %}
        <div class="machine-item">
            <a href="/estimate/simulate_one?machine_id={{m.machine_id}}">
                {{ m.name }}
            </a>
        </div>
        {% endfor %}
    </div>

</div>

</body>
</html>