master

分支 (1)

管理

管理

master

beike
/
city.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="shortcut icon" href="./img/快捷找房.png" type="image/x-icon">
    <link rel="stylesheet" href="css/city.css">
    <script src="js/zepto.js"></script>
    <title>选择城市</title>
</head>
<body>
    <div class="content">
        <!-- 顶部搜索框 -->
        <div class="search_input">
            <a href="user_wzt.html">
                <i class="close_search_icon"></i>
            </a>
            <div class="search_input_wrap">
                <input type="text" placeholder="请输入城市名称">
                <i class="search_icon"></i>
            </div>
        </div>
        <!-- tab切换 -->
        <div class="tab_warp">
            <ul>
                <li class="inside_tab active" id="dom">国内城市</li>
                <li class="outside_tab " id="over">海外城市</li>
            </ul>
        </div>
        <!-- 城市 -->
        <!-- 国内 -->
        <div class="tab_content" id="dom-t">
            <!-- 侧栏 -->
            <div class="choose_city_wrap">
                <span>#</span>
                <span>热</span>
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
                <span>E</span>
                <span>F</span>
                <span>G</span>
                <span>H</span>
                <span>I</span>
                <span>J</span>
                <span>K</span>
                <span>L</span>
                <span>M</span>
                <span>N</span>
                <span>O</span>
                <span>P</span>
                <span>Q</span>
                <span>R</span>
                <span>S</span>
                <span>T</span>
                <span>W</span>
                <span>X</span>
                <span>Y</span>
                <span>Z</span>
            </div>
            <!-- 内容 -->
            <div class="group">
                <h6>热门城市</h6>
                <div class="block city_block citys">
                    <div class="city_block_item">北京</div>
                    <div class="city_block_item">上海</div>
                    <div class="city_block_item">郑州</div>
                    <div class="city_block_item">杭州</div>
                </div>
            </div>
            <div class="group">
                <h6>A</h6>
                <div class="block city_block citys">
                    <div class="city_block_item">安庆</div>
                    <div class="city_block_item">鞍山</div>
                    <div class="city_block_item">安顺</div>
                </div>
            </div>
            <div class="group">
                <h6>B</h6>
                <div class="block city_block citys">
                    <div class="city_block_item">北京</div>
                    <div class="city_block_item">北海</div>
                    <div class="city_block_item">保定</div>
                    <div class="city_block_item">包头</div>
                    <div class="city_block_item">宝山</div>
                    <div class="city_block_item">郝洲</div>
                </div>
            </div>
            <div class="group">
                <h6>C</h6>
                <div class="block city_block citys">
                    <div class="city_block_item">成都</div>
                    <div class="city_block_item">长沙</div>
                    <div class="city_block_item">长春</div>
                    <div class="city_block_item">沧州</div>
                    <div class="city_block_item">赤水</div>
                    <div class="city_block_item">潮州</div>
                </div>
                <div class="group">
                    <h6>D</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">大连</div>
                        <div class="city_block_item">东莞</div>
                        <div class="city_block_item">达州</div>
                        <div class="city_block_item">德阳</div>
                        <div class="city_block_item">大同</div>
                        <div class="city_block_item">邓州</div>
                    </div>
                </div>
                <div class="group">
                    <h6>E</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">鄂州</div>
                        <div class="city_block_item">鄂尔多斯</div>
                    </div>
                </div>
                <div class="group">
                    <h6>F</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">佛山</div>
                        <div class="city_block_item">福州</div>
                        <div class="city_block_item">抚顺</div>
                        <div class="city_block_item">福建</div>
                    </div>
                </div>
                <div class="group">
                    <h6>G</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">广州</div>
                        <div class="city_block_item">贵阳</div>
                        <div class="city_block_item">桂林</div>
                        <div class="city_block_item">广安</div>
                    </div>
                </div>
                <div class="group">
                    <h6>H</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">杭州</div>
                        <div class="city_block_item">合肥</div>
                        <div class="city_block_item">惠州</div>
                        <div class="city_block_item">海口</div>
                        <div class="city_block_item">哈尔滨</div>
                        <div class="city_block_item">淮阳</div>
                    </div>
                </div>
                <div class="group">
                    <h6>J</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">济南</div>
                        <div class="city_block_item">嘉兴</div>
                        <div class="city_block_item">吉林</div>
                        <div class="city_block_item">济宁</div>
                        <div class="city_block_item">焦作</div>
                        <div class="city_block_item">津门</div>
                    </div>
                </div>
                <div class="group">
                    <h6>K</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">开封</div>
                        <div class="city_block_item">昆明</div>
                        <div class="city_block_item">昆山</div>
                        <div class="city_block_item">开元</div>
                    </div>
                </div>
                <div class="group">
                    <h6>L</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">廊坊</div>
                        <div class="city_block_item">洛阳</div>
                        <div class="city_block_item">柳州</div>
                        <div class="city_block_item">兰州</div>
                        <div class="city_block_item">梁山</div>
                        <div class="city_block_item">漯河</div>
                    </div>
                </div>
                <div class="group">
                    <h6>M</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">绵阳</div>
                        <div class="city_block_item">马鞍山</div>
                        <div class="city_block_item">眉山</div>
                        <div class="city_block_item">梅州</div>
                        <div class="city_block_item">牡丹江</div>
                        <div class="city_block_item">孟州</div>
                    </div>
                </div>
                <div class="group">
                    <h6>N</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">南州</div>
                        <div class="city_block_item">宁波</div>
                        <div class="city_block_item">南京</div>
                        <div class="city_block_item">南通</div>
                        <div class="city_block_item">南阳</div>
                        <div class="city_block_item">南平</div>
                    </div>
                </div>
                <div class="group">
                    <h6>P</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">濮阳</div>
                        <div class="city_block_item">攀枝花</div>
                        <div class="city_block_item">平顶山</div>
                        <div class="city_block_item">莆田</div>
                        <div class="city_block_item">平湖</div>
                        <div class="city_block_item">普洱</div>
                    </div>
                </div>
                <div class="group">
                    <h6>Q</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">青岛</div>
                        <div class="city_block_item">泉州</div>
                        <div class="city_block_item">潜江</div>
                        <div class="city_block_item">青州</div>
                        <div class="city_block_item">齐齐哈尔</div>
                        <div class="city_block_item">庆阳</div>
                    </div>
                </div>
                <div class="group">
                    <h6>R</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">瑞安</div>
                        <div class="city_block_item">任丘</div>
                        <div class="city_block_item">日照</div>
                        <div class="city_block_item">瑞昌</div>
                        <div class="city_block_item">汝州</div>
                        <div class="city_block_item">荣成</div>
                    </div>
                </div>
                <div class="group">
                    <h6>S</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">上海</div>
                        <div class="city_block_item">石家庄</div>
                        <div class="city_block_item">沈阳</div>
                        <div class="city_block_item">苏州</div>
                        <div class="city_block_item">三亚</div>
                        <div class="city_block_item">绍兴</div>
                    </div>
                </div>
                <div class="group">
                    <h6>T</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">天津</div>
                        <div class="city_block_item">太原</div>
                        <div class="city_block_item">唐山</div>
                        <div class="city_block_item">台州</div>
                        <div class="city_block_item">泰州</div>
                        <div class="city_block_item">铁岭</div>
                    </div>
                </div>
                <div class="group">
                    <h6>R</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">瑞安</div>
                        <div class="city_block_item">任丘</div>
                        <div class="city_block_item">日照</div>
                        <div class="city_block_item">瑞昌</div>
                        <div class="city_block_item">汝州</div>
                        <div class="city_block_item">荣成</div>
                    </div>
                </div>
                <div class="group">
                    <h6>W</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">武汉</div>
                        <div class="city_block_item">无锡</div>
                        <div class="city_block_item">武昌</div>
                        <div class="city_block_item">威海</div>
                        <div class="city_block_item">温州</div>
                        <div class="city_block_item">芜湖</div>
                    </div>
                </div>
                <div class="group">
                    <h6>R</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">瑞安</div>
                        <div class="city_block_item">任丘</div>
                        <div class="city_block_item">日照</div>
                        <div class="city_block_item">瑞昌</div>
                        <div class="city_block_item">汝州</div>
                        <div class="city_block_item">荣成</div>
                    </div>
                </div>
                <div class="group">
                    <h6>X</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">厦门</div>
                        <div class="city_block_item">徐州</div>
                        <div class="city_block_item">新乡</div>
                        <div class="city_block_item">咸阳</div>
                        <div class="city_block_item">新乡</div>
                        <div class="city_block_item">西宁</div>
                    </div>
                </div>
                <div class="group">
                    <h6>Y</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">烟台</div>
                        <div class="city_block_item">宜昌</div>
                        <div class="city_block_item">银川</div>
                        <div class="city_block_item">营口</div>
                        <div class="city_block_item">义乌</div>
                        <div class="city_block_item">宜宾</div>
                    </div>
                </div>
                </div>
                <div class="group">
                    <h6>Z</h6>
                    <div class="block city_block citys">
                        <div class="city_block_item">郑州</div>
                        <div class="city_block_item">中山</div>
                        <div class="city_block_item">珠海</div>
                        <div class="city_block_item">镇江</div>
                        <div class="city_block_item">张家口</div>
                        <div class="city_block_item">株洲</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 国外 -->
        <div class="tab_content" id="over-t">
            <div class="group">
                <div class="block city_block citys">
                    <div class="city_block_item">美国</div>
                    <div class="city_block_item">澳大利亚</div>
                    <div class="city_block_item">加拿大</div>
                    <div class="city_block_item">英国</div>
                    <div class="city_block_item">日本</div>
                    <div class="city_block_item">新加坡</div>
                    <div class="city_block_item">德国</div>
                    <div class="city_block_item">印度</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //自适应字体大小
        (function () {
            function w() {
                var all = document.documentElement;
                var test = all.getBoundingClientRect().width;
                rem = test / 26;
                all.style.fontSize = rem + 'px'
            }
            w();
            window.addEventListener("resize", function () {
                w()
            }, false)
        })();
        // tab切换
        $("#over-t").hide()
        $("#dom").click(()=>{
            $("#over").removeClass('active')
            $("#dom").addClass('active')
            $("#over-t").hide()
            $("#dom-t").show()
        })
        $("#over").click(()=>{
            $("#dom").removeClass('active')
            $("#over").addClass('active')
            $("#dom-t").hide()
            $("#over-t").show()
        })
        // 点击城市
        $(".citys div").click((e)=>{
            console.log(e.target.innerHTML)
            sessionStorage.city=e.target.innerHTML
            window.history.go(-1)
        })
        //
    </script>
</body>
</html>