场景，年假不知道去哪里? 可以随手做一个网页，集成进个人APP，
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国地级行政区划</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #56CCF2 0%, #2F80ED 50%, #56CCF2 100%); min-height: 100vh; padding: 10px; } .container { max-width: 1200px; margin: 0 auto; background: rgba(255, 255, 255, 0.98); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; } .header { background: linear-gradient(135deg, #56CCF2 0%, #2F80ED 100%); color: white; padding: 15px; text-align: center; } h1 { font-size: 20px; font-weight: 600; letter-spacing: 1px; } .subtitle { font-size: 12px; margin-top: 3px; opacity: 0.9; } .content { padding: 15px; min-height: 400px; } .province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .province-card { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 12px 8px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .province-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #2F80ED; } .province-name { font-weight: 600; font-size: 13px; color: #2d3436; margin-bottom: 3px; } .province-count { font-size: 11px; color: #636e72; } .city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; } .city-item { background: white; padding: 8px 6px; border-radius: 8px; text-align: center; border: 1px solid #e9ecef; transition: all 0.2s ease; position: relative; font-size: 12px; } .city-item:hover { background: #f8f9fa; transform: scale(1.03); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .city-number { position: absolute; top: 1px; left: 4px; font-size: 9px; color: #2F80ED; font-weight: 600; } .city-name { font-size: 12px; color: #2d3436; font-weight: 500; line-height: 1.3; } .back-button { background: #2F80ED; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; margin-bottom: 12px; transition: all 0.3s ease; } .back-button:hover { background: #56CCF2; transform: translateY(-1px); } .province-title { font-size: 16px; font-weight: 600; color: #2d3436; margin-bottom: 12px; text-align: center; } .province-subtitle { font-size: 12px; color: #636e72; margin-bottom: 15px; text-align: center; } /* 省份详情页面样式 */ .province-detail .city-item { padding: 12px 8px; } .province-detail .city-name { font-size: 14px; font-weight: 600; } .province-detail .city-number { font-size: 10px; } .province-detail .province-title { font-size: 18px; } .province-detail .province-subtitle { font-size: 13px; } @media (max-width: 768px) { .province-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .city-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } .province-card { padding: 10px 5px; } .province-name { font-size: 12px; } .province-count { font-size: 10px; } .city-item { padding: 6px 4px; font-size: 11px; } .city-name { font-size: 11px; } h1 { font-size: 18px; } .subtitle { font-size: 11px; } /* 省份详情页面移动端样式 */ .province-detail .city-item { padding: 10px 6px; } .province-detail .city-name { font-size: 13px; } } @media (max-width: 480px) { .province-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } .city-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; } .province-card { padding: 8px 3px; } .province-name { font-size: 11px; } .province-count { font-size: 9px; } .city-item { padding: 5px 3px; font-size: 10px; } .city-name { font-size: 10px; line-height: 1.2; } .city-number { font-size: 8px; top: 0; left: 2px; } .content { padding: 10px; } /* 省份详情页面小屏幕样式 */ .province-detail .city-item { padding: 8px 4px; } .province-detail .city-name { font-size: 12px; } .province-detail .city-number { font-size: 9px; } .province-detail .province-title { font-size: 16px; } .province-detail .province-subtitle { font-size: 12px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>🏛️ 中国地级行政区划</h1> <div class="subtitle">全国333个地级行政区</div> </div> <div class="content" id="content"> <!-- 内容将动态加载 --> </div> </div> <script> // 按照从北到南的顺序排列省份 const provincesData = { heilongjiang: { name: '黑龙江省', cities: ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭'] }, jilin: { name: '吉林省', cities: ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边州'] }, liaoning: { name: '辽宁省', cities: ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'] }, neimenggu: { name: '内蒙古', cities: ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'] }, xinjiang: { name: '新疆', cities: ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉州', '博尔塔拉州', '巴音郭楞州', '阿克苏地区', '克孜勒苏州', '喀什地区', '和田地区', '伊犁州', '塔城地区', '阿勒泰地区'] }, gansu: { name: '甘肃省', cities: ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏州', '甘南州'] }, ningxia: { name: '宁夏', cities: ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'] }, qinghai: { name: '青海省', cities: ['西宁市', '海东市', '海北州', '黄南州', '海南州', '果洛州', '玉树州', '海西州'] }, shaanxi: { name: '陕西省', cities: ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'] }, shanxi: { name: '山西省', cities: ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'] }, hebei: { name: '河北省', cities: ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'] }, shandong: { name: '山东省', cities: ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'] }, henan: { name: '河南省', cities: ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'] }, jiangsu: { name: '江苏省', cities: ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'] }, anhui: { name: '安徽省', cities: ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'] }, zhejiang: { name: '浙江省', cities: ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'] }, hubei: { name: '湖北省', cities: ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施州'] }, sichuan: { name: '四川省', cities: ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝州', '甘孜州', '凉山州'] }, hunan: { name: '湖南省', cities: ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西州'] }, jiangxi: { name: '江西省', cities: ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'] }, fujian: { name: '福建省', cities: ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'] }, guangdong: { name: '广东省', cities: ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'] }, guangxi: { name: '广西', cities: ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'] }, hainan: { name: '海南省', cities: ['海口市', '三亚市', '三沙市', '儋州市', '五指山市', '文昌市', '琼海市', '万宁市', '东方市'] }, yunnan: { name: '云南省', cities: ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄州', '红河州', '文山州', '西双版纳州', '大理州', '德宏州', '怒江州', '迪庆州'] }, guizhou: { name: '贵州省', cities: ['贵阳市', '六盘水市', '遵义市', '安顺市', '毕节市', '铜仁市', '黔西南州', '黔东南州', '黔南州'] }, xizang: { name: '西藏', cities: ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'] } }; function showOverview() { const content = document.getElementById('content'); let html = '<div class="province-grid">'; // 按照从北到南的顺序显示省份 const provinceOrder = [ 'heilongjiang', 'jilin', 'liaoning', 'neimenggu', 'xinjiang', 'gansu', 'ningxia', 'qinghai', 'shaanxi', 'shanxi', 'hebei', 'shandong', 'henan', 'jiangsu', 'anhui', 'zhejiang', 'hubei', 'sichuan', 'hunan', 'jiangxi', 'fujian', 'guangdong', 'guangxi', 'hainan', 'yunnan', 'guizhou', 'xizang' ]; for (const key of provinceOrder) { const province = provincesData[key]; html += ` <div class="province-card" onclick="showProvince('${key}')"> <div class="province-name">${province.name}</div> <div class="province-count">${province.cities.length}个</div> </div> `; } html += '</div>'; content.innerHTML = html; content.classList.remove('province-detail'); } function showProvince(provinceKey) { const province = provincesData[provinceKey]; const content = document.getElementById('content'); let html = ` <button class="back-button" onclick="showOverview()">← 返回</button> <div class="province-title">${province.name}</div> <div class="province-subtitle">共${province.cities.length}个地级行政区</div> <div class="city-grid"> `; province.cities.forEach((city, index) => { html += ` <div class="city-item"> <div class="city-number">${index + 1}</div> <div class="city-name">${city}</div> </div> `; }); html += '</div>'; content.innerHTML = html; content.classList.add('province-detail'); } // 初始化显示总览 showOverview(); </script> </body> </html>
