<div class="oe_top">
  <span f="select-city">
    <!--{if !empty($city.cityname)}-->
    <!--{$city.cityname}-->
    <!--{else}-->
    全国
    <!--{/if}-->
    <i class="iconfont">&#xe614;</i>
  </span>
  <p>
  <!--{if !empty($config.wap_name)}-->
  <!--{$config.wap_name}-->
  <!--{/if}-->
  </p>
</div>
<div class="oe_shade" style="left: 1024px; display: none;" f="city">
  <div class="oe_topser"> <i class="iconfont" f="city-back">&#xe616;</i>
    <p>选择城市</p>
  </div>
  <div class="oe_topsercn">
    <dl class="dl_1">
      <dt>热门城市</dt>
      <dd>
	    <!--{assign var="hotcity" value=vo_list("mod={city} where={v.ishot='1'}")}-->
		<!--{foreach $hotcity as $volist}-->
		<span onclick="goUrl('<!--{$oefile}-->&c=city&a=setcity&cityid=<!--{$volist.cityid}-->&forward=<!--{$forward|urlencode}-->')"<!--{if $volist.elite=='1'}--> class="_redlink"<!--{/if}-->><!--{$volist.cityname}--></span>
		<!--{/foreach}-->
        <div class="clear"></div>
      </dd>
    </dl>

	<!--{assign var="cityletter" value=vo_list("mod={cityletter}")}-->
    <dl class="dl_2">
      <dt>以字母顺序选择排序</dt>
      <dd>
          <!--{foreach $cityletter as $volist}-->
          <span f="letter" id="<!--{$volist.letter}-->" ><!--{$volist.letter}--></span>
          <!--{/foreach}-->
        <div class="clear"></div>
      </dd>
    </dl>

    <!--{foreach $cityletter as $volist}-->
    <dl class="dl_3">
      <dt id="<!--{$volist.letter}-->_box"><!--{$volist.letter}--></dt>
      <dd>
          <!--{assign var="citylist" value=vo_list("mod={city} where={v.letter='<!--{$volist.letter}-->'}")}-->
          <!--{foreach $citylist as $val}-->
          <span onclick="goUrl('<!--{$oefile}-->&c=city&a=setcity&cityid=<!--{$val.cityid}-->&forward=<!--{$forward|urlencode}-->')"<!--{if $val.elite=='1'}--> class="_redlink"<!--{/if}-->><!--{$val.cityname}--></span>
          <!--{/foreach}-->
      </dd>
      <div class="clear"></div>
    </dl>
    <!--{/foreach}-->
  </div>
</div>
<script>
    $(function(){
        $(document).on("click", '[f="select-city"]', function(){
            $('[f="city"]').show();
            $('[f="city"]').animate({ left: '0px' }, "100");
        });

        $(document).on("click", "[f='city-back']", function(){
            $('[f="city"]').animate(
                    { left: '1024px' },
                    "1000",
                    function(){
                        $('[f="city"]').hide();
                    }
            );
        });

        $(document).on("click", '[f="letter"]', function(){
            $id = $(this).attr("id");
            $.scrollTo("#"+$id+"_box", 500);
        });
    });
</script>
