重庆探索 – 微信小程序设计
我将设计一个展示重庆旅游、美食和文化的微信小程序,让用户全方位了解这座美丽的山城。

设计思路
- 突出重庆特色:山城、火锅、夜景、洪崖洞等元素
- 简洁现代的界面设计,配合红色主题
- 分区展示重庆的景点、美食、文化和天气
- 响应式布局适配微信小程序环境
下面是完整的实现代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">重庆探索 - 微信小程序</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: #333;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1593693392686-5d7c5c1f0d8f?q=80&w=1000') no-repeat center center;
background-size: cover;
opacity: 0.05;
z-index: -1;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.92);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 20px;
margin-bottom: 60px;
position: relative;
}
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px 0;
position: relative;
}
.header h1 {
color: #e60012;
font-size: 2.8rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.header p {
color: #666;
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 30px;
background: linear-gradient(90deg, #e60012, #ff7733);
border-radius: 50px;
padding: 5px;
box-shadow: 0 4px 15px rgba(230, 0, 18, 0.2);
}
.tab {
padding: 12px 25px;
margin: 0 5px;
border-radius: 50px;
background: transparent;
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.tab.active {
background: white;
color: #e60012;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.2);
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section-title {
position: relative;
margin-bottom: 25px;
padding-bottom: 15px;
font-size: 1.8rem;
color: #e60012;
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #e60012, #ff7733);
border-radius: 2px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.4rem;
margin-bottom: 10px;
color: #222;
}
.card-text {
color: #666;
margin-bottom: 15px;
font-size: 0.95rem;
}
.card-rating {
display: flex;
align-items: center;
color: #ffc107;
margin-bottom: 15px;
}
.card-tag {
display: inline-block;
background: #ffeded;
color: #e60012;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
margin-right: 8px;
margin-bottom: 8px;
}
.weather-container {
background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
border-radius: 15px;
color: white;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.weather-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.weather-location {
font-size: 1.6rem;
font-weight: bold;
}
.weather-temp {
font-size: 3.5rem;
font-weight: bold;
text-align: center;
margin: 20px 0;
}
.weather-desc {
text-align: center;
font-size: 1.3rem;
margin-bottom: 20px;
}
.weather-details {
display: flex;
justify-content: space-around;
text-align: center;
}
.weather-detail {
display: flex;
flex-direction: column;
align-items: center;
}
.weather-detail i {
font-size: 1.8rem;
margin-bottom: 10px;
}
.map-container {
height: 300px;
background: #e9ecef;
border-radius: 15px;
overflow: hidden;
margin-bottom: 30px;
position: relative;
}
.map-placeholder {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
font-size: 1.5rem;
text-align: center;
padding: 20px;
}
.footer {
text-align: center;
padding: 25px 0;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #eee;
margin-top: 30px;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-around;
padding: 12px 0;
z-index: 100;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: #888;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.nav-item.active {
color: #e60012;
}
.nav-item i {
font-size: 1.4rem;
margin-bottom: 5px;
}
.nav-item:hover {
color: #e60012;
transform: translateY(-3px);
}
@media (max-width: 600px) {
.container {
padding: 15px;
margin-top: 10px;
}
.header h1 {
font-size: 2.2rem;
}
.tabs {
flex-wrap: wrap;
}
.tab {
padding: 10px 15px;
margin: 5px;
font-size: 1rem;
}
.card-grid {
grid-template-columns: 1fr;
}
.weather-temp {
font-size: 2.8rem;
}
}
.hot-pot {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #e60012;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
box-shadow: 0 5px 15px rgba(230, 0, 18, 0.3);
z-index: 10;
}
.mountain {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,20 Q25,10 50,15 T100,20 Z" fill="%23e60012"/></svg>') repeat-x bottom;
opacity: 0.1;
z-index: -1;
}
</style>
</head>
<body>
<div class="hot-pot">
<i class="fas fa-utensils"></i>
</div>
<div class="container">
<div class="header">
<h1>重庆探索</h1>
<p>发现山城的魅力 - 景点、美食、文化与生活</p>
</div>
<div class="tabs">
<div class="tab active" data-tab="attractions">景点推荐</div>
<div class="tab" data-tab="food">特色美食</div>
<div class="tab" data-tab="culture">重庆文化</div>
<div class="tab" data-tab="weather">天气信息</div>
</div>
<!-- 景点推荐 -->
<div class="tab-content active" id="attractions">
<h2 class="section-title">必游景点</h2>
<div class="card-grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1593693392686-5d7c5c1f0d8f?q=80&w=1000" alt="洪崖洞" class="card-img">
<div class="card-content">
<h3 class="card-title">洪崖洞</h3>
<p class="card-text">重庆标志性建筑,夜景美不胜收,现实版千与千寻。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>4.7 (8.2万评价)</span>
</div>
<div>
<span class="card-tag">夜景</span>
<span class="card-tag">免费</span>
<span class="card-tag">网红打卡</span>
</div>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=1000" alt="解放碑" class="card-img">
<div class="card-content">
<h3 class="card-title">解放碑步行街</h3>
<p class="card-text">重庆最繁华的商业中心,购物美食天堂。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>4.8 (7.5万评价)</span>
</div>
<div>
<span class="card-tag">购物</span>
<span class="card-tag">美食</span>
<span class="card-tag">市中心</span>
</div>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1622445275471-36e35c2dafc1?q=80&w=1000" alt="磁器口" class="card-img">
<div class="card-content">
<h3 class="card-title">磁器口古镇</h3>
<p class="card-text">千年古镇,重庆缩影,感受巴渝文化。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<span>4.5 (6.3万评价)</span>
</div>
<div>
<span class="card-tag">古镇</span>
<span class="card-tag">文化</span>
<span class="card-tag">特产</span>
</div>
</div>
</div>
</div>
<h2 class="section-title">重庆地图</h2>
<div class="map-container">
<div class="map-placeholder">
<div>
<i class="fas fa-map-marked-alt fa-3x"></i>
<p>重庆景点分布地图</p>
<p>点击查看各景点位置</p>
</div>
</div>
</div>
</div>
<!-- 特色美食 -->
<div class="tab-content" id="food">
<h2 class="section-title">重庆味道</h2>
<div class="card-grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1603901626233-4b6bd53c1e7c?q=80&w=1000" alt="重庆火锅" class="card-img">
<div class="card-content">
<h3 class="card-title">重庆火锅</h3>
<p class="card-text">麻辣鲜香,九宫格火锅是重庆的代表。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>必吃美食</span>
</div>
<div>
<span class="card-tag">麻辣</span>
<span class="card-tag">牛油</span>
<span class="card-tag">毛肚</span>
</div>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?q=80&w=1000" alt="重庆小面" class="card-img">
<div class="card-content">
<h3 class="card-title">重庆小面</h3>
<p class="card-text">麻辣鲜香,重庆人一天生活的开始。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>地道早餐</span>
</div>
<div>
<span class="card-tag">早餐</span>
<span class="card-tag">麻辣</span>
<span class="card-tag">实惠</span>
</div>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1591814468924-caf88ad1234e?q=80&w=1000" alt="酸辣粉" class="card-img">
<div class="card-content">
<h3 class="card-title">酸辣粉</h3>
<p class="card-text">酸辣开胃,红薯粉制作,重庆街头小吃代表。</p>
<div class="card-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<span>人气小吃</span>
</div>
<div>
<span class="card-tag">小吃</span>
<span class="card-tag">酸辣</span>
<span class="card-tag">街头</span>
</div>
</div>
</div>
</div>
<h2 class="section-title">美食地图</h2>
<div class="map-container">
<div class="map-placeholder">
<div>
<i class="fas fa-utensils fa-3x"></i>
<p>重庆美食分布地图</p>
<p>点击查看各美食街区位置</p>
</div>
</div>
</div>
</div>
<!-- 重庆文化 -->
<div class="tab-content" id="culture">
<h2 class="section-title">巴渝文化</h2>
<div class="card">
<img src="https://images.unsplash.com/photo-1587334274533-8c6d6c5c4f1b?q=80&w=1000" alt="重庆文化" class="card-img">
<div class="card-content">
<h3 class="card-title">山城特色</h3>
<p class="card-text">重庆,简称"渝",别称山城,是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市,国务院批复确定的中国重要的中心城市之一、长江上游地区经济中心、国家重要的现代制造业基地、西南地区综合交通枢纽。</p>
<p class="card-text">重庆地处中国内陆西南部,是长江上游地区的经济、金融、科创、航运和商贸物流中心,国家物流枢纽,西部大开发重要的战略支点、"一带一路"和长江经济带重要联结点及内陆开放高地、山清水秀美丽之地;既以江城、雾都、桥都著称,又以山城扬名。</p>
</div>
</div>
<div class="card-grid" style="margin-top: 25px;">
<div class="card">
<div class="card-content">
<h3 class="card-title"><i class="fas fa-mountain"></i> 山城地貌</h3>
<p class="card-text">重庆以山地为主,坡地面积较大,有"山城"之称,城市建筑依山而建,道路高低起伏,形成了独特的城市景观。</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title"><i class="fas fa-water"></i> 两江交汇</h3>
<p class="card-text">长江、嘉陵江两江交汇于重庆,造就了独特的码头文化和江城特色,朝天门是两江交汇的最佳观景点。</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title"><i class="fas fa-bridge"></i> 桥都</h3>
<p class="card-text">重庆有"中国桥都"之称,拥有各种桥梁4500多座,主城嘉陵江和长江上已有大桥数十座,数量和密度远远超过中国其他城市。</p>
</div>
</div>
</div>
</div>
<!-- 天气信息 -->
<div class="tab-content" id="weather">
<h2 class="section-title">重庆天气</h2>
<div class="weather-container">
<div class="weather-header">
<div class="weather-location">
<i class="fas fa-location-dot"></i> 重庆市
</div>
<div class="weather-date">
2023年10月15日
</div>
</div>
<div class="weather-temp">
23°C
</div>
<div class="weather-desc">
<i class="fas fa-cloud-sun"></i> 多云
</div>
<div class="weather-details">
<div class="weather-detail">
<i class="fas fa-wind"></i>
<div>东南风</div>
<div>2级</div>
</div>
<div class="weather-detail">
<i class="fas fa-tint"></i>
<div>湿度</div>
<div>65%</div>
</div>
<div class="weather-detail">
<i class="fas fa-sun"></i>
<div>紫外线</div>
<div>中等</div>
</div>
</div>
</div>
<h2 class="section-title">未来三天预报</h2>
<div class="card-grid">
<div class="card">
<div class="card-content">
<h3 class="card-title">明天</h3>
<div style="display: flex; align-items: center; margin: 15px 0;">
<i class="fas fa-sun" style="font-size: 2.5rem; color: #ff9800; margin-right: 15px;"></i>
<div>
<div style="font-size: 1.5rem; font-weight: bold;">24°C / 18°C</div>
<div>晴转多云</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">后天</h3>
<div style="display: flex; align-items: center; margin: 15px 0;">
<i class="fas fa-cloud" style="font-size: 2.5rem; color: #607d8b; margin-right: 15px;"></i>
<div>
<div style="font-size: 1.5rem; font-weight: bold;">22°C / 17°C</div>
<div>多云</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">大后天</h3>
<div style="display: flex; align-items: center; margin: 15px 0;">
<i class="fas fa-cloud-rain" style="font-size: 2.5rem; color: #2196f3; margin-right: 15px;"></i>
<div>
<div style="font-size: 1.5rem; font-weight: bold;">20°C / 16°C</div>
<div>小雨</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>重庆探索微信小程序 © 2023 版权所有</p>
<p>数据更新时间:2023-10-15</p>
</div>
</div>
<div class="mountain"></div>
<div class="bottom-nav">
<div class="nav-item active">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="nav-item">
<i class="fas fa-compass"></i>
<span>探索</span>
</div>
<div class="nav-item">
<i class="fas fa-map-marked-alt"></i>
<span>地图</span>
</div>
<div class="nav-item">
<i class="fas fa-heart"></i>
<span>收藏</span>
</div>
<div class="nav-item">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</div>
<script>
// 标签切换功能
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有活动标签
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
// 添加活动类到当前标签
tab.classList.add('active');
// 隐藏所有内容
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// 显示当前内容
const tabId = tab.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// 底部导航交互
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
});
});
// 模拟微信小程序加载
document.addEventListener('DOMContentLoaded', () => {
document.body.style.opacity = 0;
setTimeout(() => {
document.body.style.transition = 'opacity 0.5s ease';
document.body.style.opacity = 1;
}, 300);
});
</script>
</body>
</html>
设计特点
-
整体风格:
- 采用红色作为主色调,象征重庆的热情和火锅文化
- 简洁现代的UI设计,符合微信小程序的设计规范
- 响应式布局,适配各种屏幕尺寸
-
功能分区:

- 景点推荐:展示洪崖洞、解放碑、磁器口等重庆著名景点
- 特色美食:介绍重庆火锅、小面、酸辣粉等特色美食
- 重庆文化:展示山城地貌、两江交汇和桥都特色
- 天气信息:提供重庆当前天气和未来三天预报
-
交互体验:
- 标签页切换浏览不同内容
- 底部导航栏模拟微信小程序原生导航
- 卡片悬停效果增强用户体验
- 平滑的过渡动画
-
重庆元素:
- 火锅图标作为视觉焦点
- 山形底部装饰
- 特色景点和美食图片
这个设计完整展示了微信小程序中重庆主题应用的开发方案,包含了内容展示、交互设计和视觉呈现等核心要素,可以直接在微信小程序框架中实现。

图片来源于AI模型,如侵权请联系管理员。作者:酷小编,如若转载,请注明出处:https://www.kufanyun.com/ask/285731.html

