556 lines
19 KiB
HTML
556 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>酒店列表</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
body{margin:0;background:#f4f4f4;font-family:Arial,"Microsoft YaHei",sans-serif;color:#111}
|
||
.wrap{max-width:1460px;margin:0 auto;padding:20px}
|
||
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
|
||
.top a{margin-left:10px;color:#0b5c7a;text-decoration:none}
|
||
.card{display:grid;grid-template-columns:438px 1fr 230px;background:#fff;border-radius:18px;margin-bottom:24px;overflow:hidden}
|
||
.img{width:438px;height:100%;object-fit:cover;background:#ddd}
|
||
.info{padding:28px}
|
||
.brand{display:inline-block;background:#0b684d;color:#fff;border-radius:4px;padding:6px 9px;margin-right:10px;font-weight:bold}
|
||
.code{display:inline-block;background:#eee;color:#333;border-radius:4px;padding:5px 8px;margin-left:8px;font-size:14px;font-weight:bold}
|
||
h2{display:inline;font-size:24px}
|
||
.addr{color:#444;margin:8px 0 6px;font-size:17px}
|
||
.dist{color:#555;margin-bottom:22px}
|
||
.features{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:13px 40px;font-size:18px;color:#333}
|
||
.features span:before{content:"◆";font-size:12px;color:#666;margin-right:9px}
|
||
.side{padding:36px 24px;text-align:right;display:flex;flex-direction:column;justify-content:center}
|
||
.price{font-size:32px;font-weight:bold}
|
||
.btn{background:#c9310c;color:#fff;border-radius:7px;padding:18px 24px;text-decoration:none;font-weight:bold;display:inline-block;margin-top:28px}
|
||
.tax{color:#555;margin-top:12px}
|
||
table{width:100%;border-collapse:collapse;background:#fff}
|
||
th,td{border:1px solid #ddd;padding:10px;vertical-align:top}
|
||
th{background:#eee}
|
||
.hotel-code{font-weight:bold;color:#0b5c7a}
|
||
.thumb{width:110px;height:78px;object-fit:cover}
|
||
.pager{margin:22px 0;text-align:center}
|
||
.pager a{margin:0 8px;color:#0b5c7a}
|
||
@media(max-width:900px){
|
||
.card{grid-template-columns:1fr}
|
||
.img{width:100%;height:240px}
|
||
.side{text-align:left}
|
||
}
|
||
.rating{margin:10px 0;color:#333;font-weight:bold}
|
||
.welcome{margin:14px 0 18px;color:#444;line-height:1.55;font-size:15px}
|
||
.welcome-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
||
.welcome.open .welcome-text{display:block}
|
||
.welcome-toggle{margin-top:6px;border:0;background:none;color:#0b5c7a;cursor:pointer;padding:0;font-size:14px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap"><div class="top"><div>找到 6300 家酒店</div><div><a href="table-301.html">表格模式</a></div></div>
|
||
<div class="card" id="hotel-XMNZZ" data-hotel-code="XMNZZ">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XMNZZ</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XMNZZ</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XNNHT" data-hotel-code="XNNHT">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XNNHT</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XNNHT</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XNNQT" data-hotel-code="XNNQT">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XNNQT</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XNNQT</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XNNRW" data-hotel-code="XNNRW">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XNNRW</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XNNRW</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XNTQC" data-hotel-code="XNTQC">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XNTQC</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XNTQC</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XNVUK" data-hotel-code="XNVUK">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XNVUK</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XNVUK</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XPTPS" data-hotel-code="XPTPS">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XPTPS</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XPTPS</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XQBBS" data-hotel-code="XQBBS">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XQBBS</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XQBBS</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XQDBF" data-hotel-code="XQDBF">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XQDBF</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XQDBF</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XQHEM" data-hotel-code="XQHEM">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XQHEM</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XQHEM</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XQHMA" data-hotel-code="XQHMA">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XQHMA</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XQHMA</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XQLCR" data-hotel-code="XQLCR">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XQLCR</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XQLCR</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XRECC" data-hotel-code="XRECC">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XRECC</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XRECC</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XRERD" data-hotel-code="XRERD">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XRERD</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XRERD</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XRYCA" data-hotel-code="XRYCA">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XRYCA</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XRYCA</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XSRSP" data-hotel-code="XSRSP">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XSRSP</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XSRSP</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XTYCR" data-hotel-code="XTYCR">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XTYCR</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XTYCR</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XUZCP" data-hotel-code="XUZCP">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XUZCP</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XUZCP</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XUZXY" data-hotel-code="XUZXY">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XUZXY</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XUZXY</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div>
|
||
<div class="card" id="hotel-XVASR" data-hotel-code="XVASR">
|
||
<img class="img" src="" loading="lazy">
|
||
<div class="info">
|
||
<div>
|
||
<span class="brand"></span>
|
||
<h2> </h2>
|
||
<span class="code">XVASR</span>
|
||
</div>
|
||
<div class="addr"> ｜ </div>
|
||
<div class="rating">评分：null</div>
|
||
<div class="welcome">
|
||
<div class="welcome-text"></div>
|
||
<button class="welcome-toggle" type="button">展开</button>
|
||
</div>
|
||
<div class="features"></div>
|
||
</div>
|
||
<div class="side">
|
||
<div>酒店 ID</div>
|
||
<div class="hotel-code">XVASR</div>
|
||
<div style="margin-top:14px">⚡ Only a few left from</div>
|
||
<div class="price">暂无价格</div>
|
||
<div class="tax"></div>
|
||
<a class="btn" href="#">选择酒店</a>
|
||
</div>
|
||
</div><div class="pager"><a href="page-300.html">上一页</a> 第 301 / 315 页 <a href="page-302.html">下一页</a></div></div>
|
||
<script>
|
||
document.addEventListener("click", function(e) {
|
||
if (!e.target.classList.contains("welcome-toggle")) return;
|
||
const box = e.target.closest(".welcome");
|
||
box.classList.toggle("open");
|
||
e.target.textContent = box.classList.contains("open") ? "收起" : "展开";
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |