欢迎交流 小超哥 的博客

关键词：Swiper4（就是个js和css的控件，不用也可以，原生的js也不错，这个就是好看，好用）、Vue2.0、jQuery3.0

推荐次新或者最新版本，太老的东西没有太大价值；

Swiper4（各种超炫滑的效果-最强王者！）

Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

更多的介绍可以去官网地址：http://www.swiper.com.cn/查看。

也可以戳这里查看demo：http://www.swiper.com.cn/demo/index.html#

Vue2.0（目前国内最流行、将来很有潜力的前端框架，作者尤雨溪）

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- 注意： 目前我使用的是1280*1024的分辨率也支持1360*768的分辨率（看CSS的 @media screen and (min-width: 1360px) {}里面的东西这是个全局的混合器），不过1360的你需要配置

---

代码：少啰嗦，先看东西。

效果图：

以下的代码是一整个文件（为了讲解方便按照顺序切开）

template：

代码块语法遵循标准markdown代码，例如：

<template>
  <div v-if="modalType">              
    <div class="dialog-modal-mask "></div>
    <div class="dialog-modal-wrap">
      <div class="dialog-modal" :style="styles">
        <div class="header" v-if="headerVisible">
          <div class="titleMsg" v-if="titleMessageVisible">
            <span v-html="titleMessage"></span>
          </div>
          <div class="titileImg" v-if="titleImgVisible">
            <img src="../assets/img/icon-关闭.png" style="width: 32px;" v-on:click.stop="close" />
          </div>
        </div>
        <hr class="line-separator" />
        <div id="letter"  ></div> //这个地方就是点击右侧字幕菜单后 在正中间显示的淡入淡出的点击字母提示面板
        <base-swiper ref="mainSwiper" :options="swiperOption" class="baseSwiperScrollBox">
          <base-swiper-slide>//这是swiper插件没啥说的 也可以不用 直接使用原生js得scroll也是可以的
            <div class="scrollBox">
              <div class="sort_box">

                <div class="letter-popular"   id="popular"   >热门</div>
                <div  class="sort_list_popular"  v-for=" namess in itemsPopular.name.split('\,')" :key="namess+'popular'" @click="getInputName(namess) ">
                  <div  class="num_name_popular">{{namess}}</div>
                </div>

                <div class="sort_list" v-for=" names in items.name.split('\,')" :key="names" @click="getInputName(names)">
                  <div class="num_name">{{names}}</div>
                </div> //这里是左侧的银行列表
              </div>
            </div>
          </base-swiper-slide>
          <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
        </base-swiper>

        <div class="initialsClass">
          <ul class="ulClassClick">
          <li   :id="letterListOne"  class="letter" v-for="(letterListOne,index) in letterList.name.split('\,')" :key="letterListOne"    @click="getletterListName(letterListOne,index)">{{letterListOne}}</li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

js：

中间的js是网上一些很流行的字母排序和单行拼接的method，注释写的很详细：

<script>
import BaseSwiper from "../components/base-swiper.vue";
import BaseSwiperSlide from "../components/base-swiper-slide.vue";
import { ASSIGNATION_REMIT_MONEY_LIMIT } from "../store/mutation-types";

export default {
  name: "BaseDialog",
  components: {
    BaseSwiper,
    BaseSwiperSlide
  },

  data: function() {
    return {
      lastTimeLocation: { type: Number, default: 0 },
      itemsPopular:{
        id:"ZZ",
        name:"中国工商银行,中国银行,中国XX本行银行"
    },
   //热门的银行，我改造过网上jquery写法，变为vue的写法，这里可以很简单的加减热门银行
    letterList:{
     id: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26",
     name:"A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z",
    },
    //所有的银行
      items: {
        id: "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z",
        name:
          "中国XX本行银行,国家开发银行,中国进出口银行,中国农业发展银行,中国工商银行,中国农业银行,中国银行,中国建设银行,交通银行,中信银行,中国光大银行,华夏银行,中国民生银行,招商银行,兴业银行,广发银行,平安银行,上海浦东发展银行,恒丰银行,浙商银行,渤海银行,中国邮政储蓄银行,北京银行,天津银行,沧州银行,承德银行,廊坊银行,秦皇岛商行,河北银行,唐山商行,张家口商行,邢台商行,保定商行,邯郸商行,长治市商业银行,晋城商行,晋中市商业银行,晋商银行,大同市商业银行,阳泉市商业银行,内蒙古银行,包商银行,鄂尔多斯银行,乌海银行,盛京银行,鞍山银行,抚顺银行,本溪市商业银行,丹东银行,锦州银行,营口银行,阜新银行,辽阳银行,铁岭银行,朝阳银行,盘锦市商业银行,葫芦岛银行,营口沿海银行,吉林银行,哈尔滨银行,龙江银行,上海银行,江苏银行,南京银行,苏州银行,江苏长江商业银行,金华银行,稠州银行,杭州银行,湖州银行,嘉兴银行,宁波银行,绍兴银行,台州商行,温州银行,民泰商行,泰隆商行,徽商银行,福建海峡银行,泉州银行,景德镇市商业银行,北京银行南昌分行,赣州商行,九江银行,南昌银行,上饶银行,齐鲁银行,齐商银行,枣庄市商业银行,东营市商业银行,潍坊银行,济宁银行,泰山市商业银行,威海市商业银行,日照银行,莱商银行,临商银行,德州银行,烟台银行,山东省城市商业银行合作联盟有限公司,洛阳银行,郑州银行,开封市商业银行,南阳市商业银行,三门峡市商业银行,信阳银行,驻马店银行,焦作市商业银行,新乡银行,湖北银行,汉口银行,华融湘江银行股份有限公司,长沙银行股份有限公司,广州银行,东莞银行,广东南粤银行,广东华兴银行,珠海华润银行,广西北部湾银行,柳州银行,桂林银行,重庆银行,重庆三峡银行,成都银行,自贡市商业银行,攀枝花市商业银行,泸州市商业银行,德阳银行,绵阳市商业银行,乐山市商业银行,南充市商业银行,宜宾市商业银行,凉山州商业银行,遂宁市商业银行,雅安市商业银行,达州市商业银行,贵州银行,贵阳银行,富滇银行,曲靖市商业银行,玉溪市商业银行,西藏银行股份有限公司,长安银行,西安银行,兰州银行,青海银行股份有限公司,宁夏银行,昆仑银行股份有限公司,乌鲁木齐商行,大连银行,宁波银行股份有限公司,宁波东海银行股份有限公司,宁波通商银行股份有限公司,厦门银行股份有限公司,厦门国际银行,青岛银行,北京农村商业银行股份有限公司,天津农村商业银行,天津滨海农村商业银行,沧州融信农村商业银行股份有限公司,鄂尔多斯农村商业银行,沈阳农村商业银行,吉林九台农村商业银行股份有限公司,长春农村商业银行股份有限公司,上海农商行,江苏高淳农村商业银行,江苏溧水农村商业银行,徐州淮海农村商业银行,江苏新沂农村商业银行,江苏邳州农村商业银行,江苏宜兴农村商业银行,江苏扬中农村商业银行,江苏丹阳农村商业银行,江苏句容农村商业银行,江苏镇江农村商业银行,江苏宝应农村商业银行,江苏仪征农村商业银行,江苏高邮农村商业银行,江苏江都农村商业银行,江苏金湖农村商业银行,江苏盱眙农村商业银行,江苏涟水农村商业银行,江苏淮安农村商业银行,连云港东方农村商业银行,江苏赣榆农村商业银行,江苏沭阳农村商业银行,江苏泗洪农村商业银行,江苏泗阳农村商业银行,江苏民丰农村商业银行,江苏兴化农村商业银行,江苏泰州农村商业银行,江苏姜堰农村商业银行,江苏东台农村商业银行,江苏响水农村商业银行,江苏大丰农村商业银行,江苏阜宁农村商业银行,江苏建湖农村商业银行,江苏盐城黄海农村商业银行,江苏如东农村商业银行,江苏启东农村商业银行,江苏海安农村商业银行,江苏海门农村商业银行,江苏如皋农村商业银行,江苏南通农村商业银行,江苏紫金农村商业银行,无锡农村商业银行,江阴农村商业银行,常熟农村商业银行,张家港农村商业银行,吴江农村商业银行,昆山农村商业银行,太仓农村商业银行,江苏射阳农村商业银行,靖江农村商业银行,江南农村商业银行,杭州联合农村商业银行,浙江杭州余杭农村商业银行股份有限公司,浙江温州鹿城农村商业银行股份有限公司,浙江温州龙湾农村商业银行股份有限公司,浙江禾城农村商业银行股份有限公司,浙江嘉善农村商业银行股份有限公司,浙江德清农村商业银行股份有限公司,浙江绍兴瑞丰农村商业银行股份有限公司,浙江诸暨农村商业银行股份有限公司,浙江新昌农村商业银行股份有限公司,浙江义乌农村商业银行,浙江舟山定海农村商业银行股份有限公司,浙江舟山普陀农村商业银行股份有限公司,浙江南浔农村商业银行股份有限公司,蚌埠农村商业银行,巢湖农村商业银行,金寨农村商业银行,安徽定远农村商业银行,安徽庐江农村商业银行,安徽马鞍山农村商业银行,芜湖扬子农村商业银行,安徽青阳农村商业银行,合肥科技农村商业银行,铜陵农村商业银行,池州九华农村商业银行,安庆独秀农村商业银行,安徽肥西农村商业银行,宣城皖南农村商业银行,淮南淮河农村商业银行,安徽桐城农村商业银行,安徽无为农村商业银行,滁州皖东农村商业银行,安徽歙县农村商业银行,淮北农村商业银行,阜阳颍东农村商业银行,安徽南陵农村商业银行,淮南通商农村商业银行,安徽泾县农村商业银行,安徽旌德农村商业银行,安徽潜山农村商业银行,安徽繁昌农村商业银行,安徽石台农村商业银行,安徽望江农村商业银行,安徽太湖农村商业银行,铜陵皖江农村商业银行,毫州药都农村商业银行,景德镇农商银行,新余农商银行,九江农商银行,宜春农商银行,吉安农村商业银行,赣州农村商业银行,南昌农村商业银行股份有限公司,武汉农村商业银行,广州农村商业银行股份有限公司,佛山顺德农村商业银行股份有限公司,东莞农村商业银行股份有限公司,广东河源农村商业银行股份有限公司,肇庆端州农村商业银行股份有限公司,广东阳东农村商业银行股份有限公司,广东揭阳农村商业银行股份有限公司,广东揭西农村商业银行股份有限公司,广西资源农村商业银行股份有限公司,广西田东农村商业银行股份有限公司,广西融安农村商业银行股份有限公司,广西蒙山农村商业银行股份有限公司,广西田阳农村商业银行股份有限公司,广西恭城农村商业银行股份有限公司,广西龙胜农村商业银行股份有限公司,广西灌阳农村商业银行股份有限公司,广西昭平农村商业银行股份有限公司,广西凌云农村商业银行股份有限公司,重庆农村商业银行股份有限公司,成都农商银行,贵阳农村商业银行,宁夏黄河农村商业银行股份有限公司,厦门农村商业银行股份有限公司,青岛农商银行,深圳农村商业银行,呼和浩特金谷农村合作银行,江苏睢宁农村合作银行,江苏新沂农村合作银行,江苏灌云农村合作银行,浙江萧山农村合作银行,浙江富阳农村合作银行,浙江桐庐农村合作银行,浙江温州瓯海农村合作银行,浙江瑞安农村合作银行,浙江乐清农村合作银行,浙江永嘉农村合作银行,浙江苍南农村合作银行,浙江平湖农村合作银行,湖州吴兴农村合作银行,浙江长兴农村合作银行,浙江绍兴恒信农村合作银行,浙江上虞农村合作银行,浙江嵊州农村合作银行,浙江金华成泰农村合作银行,浙江兰溪农村合作银行,浙江永康农村合作银行,浙江武义农村合作银行,浙江江山农村合作银行,浙江台州椒江农村合作银行,浙江台州黄岩农村合作银行,浙江台州路桥农村合作银行,浙江温岭农村合作银行,浙江玉环农村合作银行,浙江天台农村合作银行,浙江丽水莲都农村合作银行,安徽霍山农村合作银行,安徽绩溪农村合作银行,安徽舒城农村合作银行,安徽天长农村合作银行,安徽黟县农村合作银行,安徽怀远农村合作银行,安徽广德农村合作银行,安徽休宁农村合作银行,安徽长丰农村合作银行,安徽肥东农村合作银行,安徽泗县农村合作银行,安徽东至农村合作银行,安徽叶集农村合作银行,芜湖津盛农村合作银行,安徽岳西农村合作银行,安徽宿松农村合作银行,黄山屯溪农村合作银行,安徽怀宁农村合作银行,黄山太平农村合作银行,黄山徽州农村合作银行,安徽宁国农村合作银行,安徽郎溪农村合作银行,安徽和县农村合作银行,安徽明光农村合作银行,安徽全椒农村合作银行,宁波鄞州农村合作银行,宁波慈溪农村合作银行,河北省农村信用社联合社,山西省农村信用社,内蒙古自治区农村信用社联合社,辽宁省农村信用社联合社,黑龙江省农村信用社联合社,铜山县农村信用合作联社,徐州市贾汪区农村信用合作联社,沛县农村信用合作联社,丰县农村信用合作联社,洪泽县农村信用合作联社,灌南县农村信用合作联社,东海县农村信用合作联社,泰兴市农村信用合作联社,滨海县农村信用合作联社,浙江省农村信用社联合社,临安市农村信用合作联社,平阳县农村信用合作联社,文成县农村信用合作联社,泰顺县农村信用合作联社,洞头县农村信用合作联社,海宁市农村信用合作联社,海盐县农村信用合作联社,桐乡市农村信用合作联社,安吉县农村信用合作联社,东阳市农村信用合作联社,浦江县农村信用合作联社,磐安县农村信用合作联社,衢州市柯城农村信用合作联社,衢州市衢江农村信用合作联社,龙游县农村信用合作联社,常山县农村信用合作联社,开化县农村信用合作联社,临海市农村信用合作联社,仙居县农村信用合作联社,三门县农村信用合作联社,青田县农村信用合作联社,龙泉市农村信用合作联社,缙云县农村信用合作联社,松阳县农村信用合作联社,景宁县农村信用合作联社,岱山县农村信用合作联社,嵊泗县农村信用合作联社,浙江松阳恒通村镇银行股份有限公司,建德市农村信用合作联社,淳安县农村信用合作联社,枞阳县联社,涡阳县联社,蒙城县联社,利辛县联社,阜阳市颍泉区联社,临泉县联社,庐江县联社,六安市郊区联社,寿县联社,濉溪县联社,宿州市区联社,含山县联社,凤台县联社,安徽省农村信用社联合社,福建省农信联社（福建农信网）,江西省农村信用社,山东省农村信用社联合社,湖北省农村信用社,广东农村信用社,广西壮族自治区农村信用联社,四川省农村信用联社,贵州省农村信用社,云南省农村信用社联社,陕西信合,宁波市市区农村信用合作联社,北京密云汇丰村镇银行有限责任公司,北京延庆村镇银行股份有限公司,北京怀柔融兴村镇银行有限责任公司,北京大兴九银村镇银行股份有限公司,北京昌平兆丰村镇银行股份有限公司,北京大兴华夏村镇银行有限责任公司,北京顺义银座村镇银行股份有限公司,北京通州国开村镇银行股份有限公司,北京门头沟珠江村镇银行,宝山富民村镇银行,金山惠民村镇银行,崇明长江村镇银行,奉贤浦发村镇银行,松江民生村镇银行,浦东江南村镇银行,浦东建信村镇银行,闵行上银村镇银行,嘉定民生村镇银行,江苏邳州陇海村镇银行,江苏丰县民丰村镇银行,江苏沛县汉源村镇银行,江苏铜山锡州村镇银行,江苏惠山民泰村镇银行,江阴浦发村镇银行,宜兴阳羡村镇银行,太仓民生村镇银行,苏州常熟建信村镇银行,江苏张家港华信村镇银行,昆山鹿城村镇银行,江苏武进建信村镇银行,溧阳浦发村镇银行,金坛常农商村镇银行,江苏丹徒蒙银村镇银行,扬中恒丰村镇银行,江苏丹阳保得村镇银行,句容茅山村镇银行,江苏仪征包商村镇银行,江苏扬州农村商业银行,江苏江都吉银村镇银行,江苏邗江民泰村镇银行,江苏涟水太商村镇银行,江苏金湖民泰村镇银行,江苏洪泽金阳光村镇银行,江苏盱眙珠江村镇银行,江苏赣榆通商村镇银行,江苏灌云民丰村镇银行,江苏灌南民丰村镇银行,江苏东海张农商村镇银行,江苏泗阳东吴村镇银行,江苏宿豫东吴村镇银行,江苏泗洪东吴村镇银行,江苏沭阳东吴村镇银行,姜堰锡州村镇银行,江苏泰兴建信村镇银行,兴化苏南村镇银行,江苏靖江润丰村镇银行,江苏东台稠州村镇银行,阜宁民生村镇银行,江苏大丰江南村镇银行,江苏射阳太商村镇银行,江苏启东珠江村镇银行,江苏如东融兴村镇银行,江苏海门建信村镇银行,江苏南通如皋包商村镇银行,江苏海安盐海村镇银行,江苏通州华商村镇银行,南京六合九银村镇银行,南京浦口靖发村镇银行,江苏高淳武家嘴建信村镇银行,江苏溧水民丰村镇银行,江苏江宁上银村镇银行,浙江建德湖商村镇银行,浙江永嘉恒升村镇银行股份有限公司,浙江苍南建信村镇银行股份有限公司,浙江乐清联合村镇银行股份有限公司,浙江平阳浦发村镇银行股份有限公司,浙江文成北银村镇银行股份有限公司,浙江泰顺温银村镇银行股份有限公司,瑞安市马屿镇汇民农村资金互助社,浙江平湖工银村镇银行股份有限公司,浙江嘉善联合村镇银行股份有限公司,浙江桐乡民泰村镇银行股份有限公司,平湖市当湖街道新当湖农村资金互助社,安吉交银村镇银行,长兴联合村镇银行,德清县乾元镇德农农村资金互助社,浙江嵊州瑞丰村镇银行股份有限公司,浙江新昌浦发村镇银行股份有限公司,浙江永康农银村镇银行有限责任公司,浙江磐安婺商村镇银行股份有限公司,浙江浦江嘉银村镇银行股份有限公司,浙江兰溪越商村镇银行股份有限公司,浙江武义建信村镇银行有限责任公司,浙江龙游义商村镇银行股份有限公司,浙江常山联合村镇银行股份有限公司,衢江上银村镇银行,浙江江山建信村镇银行有限责任公司,开化通济贷款有限责任公司,浙江玉环永兴村镇银行有限责任公司,浙江三门银座村镇银行股份有限公司,浙江临海湖星村镇银行股份有限公司,浙江温岭联合村镇银行股份有限公司,浙江天台民生村镇银行股份有限公司,浙江青田建信华侨村镇银行,浙江庆元泰隆村镇银行,浙江缙云杭银村镇银行股份有限公司,浙江龙泉民泰村镇银行股份有限公司,浙江丽水莲都建信村镇银行,缙云县五云镇欣禾农村资金互助社,浙江岱山稠州村镇银行股份有限公司,浙江舟山普陀稠州村镇银行股份有限公司,浙江淳安建信村镇银行有限责任公司,浙江义乌联合村镇银行股份有限公司,浙江德清湖商村镇银行股份有限公司,浙江余杭德商村镇银行股份有限公司,浙江遂昌富民村镇银行股份有限公司,浙江秀洲德商村镇银行股份有限公司,浙江萧山湖商村镇银行股份有限公司,浙江诸暨联合村镇银行股份有限公司,浙江绍兴县联合村镇银行股份有限公司,安徽长丰科源村镇银行,安徽凤阳利民村镇银行,安徽桐城江淮村镇银行,安徽当涂新华村镇银行,安徽繁昌建信村镇银行,安徽黄山金桥村镇银行,安徽舒城正兴村镇银行,安徽裕安盛平村镇银行,安徽肥西石银村镇银行,安徽绩溪农银村镇银行,安徽无为徽银村镇银行,安徽铜陵铜源村镇银行,安徽泾县铜源村镇银行,安徽郎溪新华村镇银行,淮南凤台通商村镇银行,安徽庐江惠民村镇银行,安徽含山惠民村镇银行,安徽肥东湖星村镇银行,安徽枞阳泰业村镇银行,安徽休宁大地村镇银行,安徽青阳九华村镇银行,安徽和县新华村镇银行,安徽定远民丰村镇银行,安徽潜山江淮村镇银行,安徽歙县嘉银村镇银行,安徽望江新华村镇银行,安徽宿松民丰村镇银行,安徽五河永泰村镇银行,安徽宿州淮海村镇银行,安徽明光民丰村镇银行,安徽全椒中银富登村镇银行,安徽来安中银富登村镇银行,芜湖泰寿村镇银行,怀远本富村镇银行,灵璧本富村镇银行,宁国民生村镇银行,池州贵池民生村镇银行,天长民生村镇银行,太湖县小池银燕农村资金互助社,澳洲联邦银行村镇银行有限责任公司,珠海横琴村镇银行,始兴大众村镇银行,东源泰业村镇银行,中山小榄村镇银行,广东恩平汇丰村镇银行,惠州仲恺东盈村镇银行,广东澄海潮商村镇银行,东莞长安村镇银行,佛山高明顺银村镇银行,三水珠江村镇银行,广州番禺新华村镇银行,德庆华润村镇银行,梅县客家村镇银行,鹤山珠江村镇银行,中山东凤珠江村镇银行,广州增城长江村镇银行,广西横县桂商村镇银行股份有限公司,武鸣漓江村镇银行有限公司,广西融水元宝山村镇银行股份有限公司,广西柳江柳银村镇银行股份有限公司,广西鱼峰信合村镇银行有限责任公司,广西兴安民兴村镇银行股份有限公司,桂林国民村镇银行有限责任公司,灵川深通村镇银行有限责任公司,广西藤县桂银村镇银行股份有限公司,岑溪市北部湾村镇银行有限责任公司,合浦国民村镇银行有限责任公司,东兴国民村镇银行有限责任公司,灵山泰业村镇银行股份有限公司,广西平南桂银村镇银行股份有限公司,广西桂平桂银村镇银行股份有限公司,广西容县桂银村镇银行股份有限公司,广西北流柳银村镇银行股份有限公司,广西兴业柳银村镇银行股份有限公司,广西博白柳银村镇银行股份有限公司,广西陆川柳银村镇银行股份有限公司,平果国民村镇银行有限责任公司,田东北部湾村镇银行有限责任公司,田阳兴阳村镇银行有限责任公司,宜州深通村镇银行有限责任公司,扶绥深通村镇银行有限责任公司,重庆大足汇丰村镇银行有限责任公司,开县泰业村镇银行股份有限公司,重庆梁平澳新村镇银行有限责任公司,重庆璧山工银村镇银行有限责任公司,重庆丰都汇丰村镇银行有限责任公司,重庆巴南浦发村镇银行股份有限公司,潼南民生村镇银行股份有限公司,綦江民生村镇银行股份有限公司,黔江区城东诚信农村资金互助社,重庆荣昌汇丰村镇银行有限责任公司,重庆市大渡口融兴村镇银行有限责任公司,重庆云阳恒丰村镇银行股份有限公司,重庆南川石银村镇银行股份有限公司,重庆市江津区白沙镇明星农村资金互助社,重庆北碚稠州村镇银行股份有限公司,重庆江津石银村镇银行股份有限公司,重庆江北恒丰村镇银行股份有限公司,重庆市武隆融兴村镇银行有限责任公司,重庆忠县稠州村镇银行股份有限公司,重庆北碚花旗贷款有限责任公司,重庆渝北银座村镇银行股份有限公司,重庆黔江银座村镇银行股份有限公司,重庆九龙坡民泰村镇银行股份有限公司,重庆市沙坪坝融兴村镇银行有限公司,重庆市酉阳融兴村镇银行有限责任公司,重庆彭水民泰村镇银行股份有限公司,重庆万州建信村镇银行有限责任公司,乐山嘉州民富村镇银行,内江兴隆村镇银行,新建珠江村镇银行,彭山珠江村镇银行,广汉珠江村镇银行,江油华夏村镇银行,巴中国开村镇银行,新都桂城村镇银行,郫县国开村镇银行,广元贵商村镇银行,蒲江民富村镇银行,名山锦程村镇银行,龙泉驿稠州村镇银行,崇州上银村镇银行,仁寿民富村镇银行,广元包商贵民村镇银行,什邡思源村镇银行,都江堰金都村镇银行,绵竹浦发村镇银行,双流诚民村镇银行,泸县元通村镇银行,西昌金信村镇银行,大竹渝农商村镇银行,夹江昆仑村镇银行,广安恒丰村镇银行,金堂汇金村镇银行,资阳民生村镇银行,自贡农商村镇银行,宜宾兴宜村镇银行,遂宁安居村镇银行,四川仪陇惠民村镇银行,四川仪陇惠民贷款公司,平武富民贷款公司,苍溪益民资金互助社,四川北川富民村镇银行,邛崃国民村镇银行,大邑交银兴民村镇银行,彭州民生村镇银行,宣汉诚民村镇银行,贵阳花溪建设村镇银行,息烽包商黔隆村镇银行,贵阳白云德信村镇银行,仁怀蒙银村镇银行,平坝鼎立村镇银行,龙里国丰村镇银行,都匀融通村镇银行,黄平振兴村镇银行,铜仁丰源村镇银行,毕节发展村镇银行,织金惠民村镇银行,黔西花都村镇银行,水城蒙银村镇银行,盘县万和村镇银行,兴义万丰村镇银行,六盘水钟山凉都村镇银行,施秉金鼎村镇银行,绥阳黔北村镇银行,文山民丰村镇银行有限公司,玉溪红塔区兴和村镇银行股份有限公司,昭通昭阳富滇村镇银行股份有限公司,曲靖惠民村镇银行股份有限公司,楚雄禄丰龙城富滇村镇银行股份有限公司,楚雄兴彝村镇银行股份有限公司,丽江古城区富滇村镇银行,大理海东村镇银行,昆明呈贡华夏村镇银行,曲靖富源富滇村镇银行,普洱民生村镇银行股份有限公司,景洪民生村镇银行股份有限公司,嵩明沪农商村镇银行,个旧沪农商村镇银行,弥勒沪农商村镇银行,开远沪农商村镇银行,瑞丽沪农商村镇银行,临沧临翔沪农商村镇银行,保山隆阳沪农商村镇银行,建水沪农商村镇银行,蒙自沪农商村镇银行,云南安宁稠州村镇银行,慈溪民生村镇银行股份有限公司,宁波镇海中银富登村镇银行有限公司,宁海中银富登村镇银行有限公司,厦门同安农银村镇银行有限责任公司,青岛即墨北农商村镇银行,青岛胶南海汇村镇银行,青岛莱西元泰村镇银行,青岛平度惠民村镇银行,青岛胶州中成村镇银行,青岛城阳珠江村镇银行,青岛崂山交银村镇银行,深圳宝安融兴村镇银行,深圳龙岗鼎业村镇银行,深圳福田银座村镇银行,深圳南山宝生村镇银行,深圳宝安桂银村镇银行,深圳龙岗国安村镇银行,深圳光明沪农商村镇银行,荷兰银行（中国）有限公司,企业银行（中国）有限公司,宁波国际银行,东方汇理银行（中国）有限公司,中信嘉华银行（中国）有限公司,外换银行（中国）有限公司,摩根大通银行（中国）有限公司,友利银行（中国）有限公司,韩亚银行（中国）有限公司,德意志银行（中国）有限公司,新韩银行（中国）有限公司,法国兴业银行（中国）有限公司,蒙特利尔银行（中国）有限公司,瑞士银行（中国）有限公司,国民银行（中国）有限公司,汇丰中国,渣打中国,花旗中国,东亚中国,瑞穗中国,恒生中国,星展中国,三菱中国,华侨中国,南商中国,大华中国,法巴中国,三井中国,汇理中国,盘谷中国,苏皇中国,澳新中国,华一银行,华美中国,正信银行,浦发硅谷银行,首都银行（中国）有限公司,摩根士丹利国际银行（中国）有限公司,协和银行有限公司,新联商业银行,华商银行,永亨银行（中国）有限公司,大新银行（中国）有限公司"
      },
      modalStatus: this.modalType,
      headerDis: this.headerVisible,
      contentDis: this.contentVisible,
      modalType: this.visible,
      swiperOption: {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        watchOverflow: true,
        scrollbar: {
          el: ".swiper-scrollbar",
          draggable: true
        }
      },
      //这是首字母拼音的数组
        strChineseFirstPY : "YDYQSXMWZSSXJBYMGCCCQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZFXXZHTRQHYBDLYCZSSYMMRFMYQZPWWJJYFCRWFDFCQPYDDWYXKYJAWJFFXYPSFTZYHHYZYSWCJYXSCLCXXWZZXNBGNNXBXLZSZSBSGPYSYZDHMDZBQBZCWDZZYYTZHBTSYYBZGNTNXQYWQSKBPHHLXGYBFMJEBJHHGQTJCYSXSTKZHLYCKGLYSMZXYALMELDCCXGZYRJXSDLTYZCQKCNNJWHJTZZCQLJSTSTBNXBTYXCEQXGKWJYFLCQLYHYXSPSFXLMPBYSXXXYDJCZYLLLSJXFHJXPJBTFFYABYXBHZZBJYZLWLCZGGBTSSMDTJZXPTHYQTGLJSCQFZKJZJQNLZWLSLHDZBWJNCJZYZSQQYCQYRZCJJWYBRTWPYFTWEXCSKDZCTBZHYZZYYJXZCFFZZMJYXXSDZZOTTBZLQWFCKSZSXFYRLNYJMBDTHJXSQQCCSBXYYTSYFBXDZTGBCNSLCYZZPSAZYZZSCJCSHCQYDXLBPJLLMQXTYDZXSQJTZPXLCGLQTZWJBHCTSYJSFXYEJJTLBGXSXJMYJQQPFZASYJNTYDJXKJCDJSZCBARTDCLYJQMWNQNCLLLKBYBZZSYHQQLTWLCCXTXLLZNTYLNEWYZYXCZXXGRKRMTCNDNJTSYYSSDQDGHSDBJGHRWRQLYBGLXHLGTGXBQJDZPYJSJYJCTMRNYMGRZJCZGJMZMGXMPRYXKJNYMSGMZJYMKMFXMLDTGFBHCJHKYLPFMDXLQJJSMTQGZSJLQDLDGJYCALCMZCSDJLLNXDJFFFFJCZFMZFFPFKHKGDPSXKTACJDHHZDDCRRCFQYJKQCCWJDXHWJLYLLZGCFCQDSMLZPBJJPLSBCJGGDCKKDEZSQCCKJGCGKDJTJDLZYCXKLQSCGJCLTFPCQCZGWPJDQYZJJBYJHSJDZWGFSJGZKQCCZLLPSPKJGQJHZZLJPLGJGJJTHJJYJZCZMLZLYQBGJWMLJKXZDZNJQSYZMLJLLJKYWXMKJLHSKJGBMCLYYMKXJQLBMLLKMDXXKWYXYSLMLPSJQQJQXYXFJTJDXMXXLLCXQBSYJBGWYMBGGBCYXPJYGPEPFGDJGBHBNSQJYZJKJKHXQFGQZKFHYGKHDKLLSDJQXPQYKYBNQSXQNSZSWHBSXWHXWBZZXDMNSJBSBKBBZKLYLXGWXDRWYQZMYWSJQLCJXXJXKJEQXSCYETLZHLYYYSDZPAQYZCMTLSHTZCFYZYXYLJSDCJQAGYSLCQLYYYSHMRQQKLDXZSCSSSYDYCJYSFSJBFRSSCQSBXXPXJYSDRCKGJLGDKZJZBDKTCSYQPYHSTCLDJDHMXMCGXYZHJDDTMHLTXZXYLYMOHYJCLTYFBQQXPFBDFHHTKSQHZYYWCNXXCRWHOWGYJLEGWDQCWGFJYCSNTMYTOLBYGWQWESJPWNMLRYDZSZTXYQPZGCWXHNGPYXSHMYQJXZTDPPBFYHZHTJYFDZWKGKZBLDNTSXHQEEGZZYLZMMZYJZGXZXKHKSTXNXXWYLYAPSTHXDWHZYMPXAGKYDXBHNHXKDPJNMYHYLPMGOCSLNZHKXXLPZZLBMLSFBHHGYGYYGGBHSCYAQTYWLXTCQCEZYDQDQMMHTKLLSZHLSJZWFYHQSWSCWLQAZYNYTLSXTHAZNKZZSZZLAXXZWWCTGQQTDDYZTCCHYQZFLXPSLZYGPZSZNGLNDQTBDLXGTCTAJDKYWNSYZLJHHZZCWNYYZYWMHYCHHYXHJKZWSXHZYXLYSKQYSPSLYZWMYPPKBYGLKZHTYXAXQSYSHXASMCHKDSCRSWJPWXSGZJLWWSCHSJHSQNHCSEGNDAQTBAALZZMSSTDQJCJKTSCJAXPLGGXHHGXXZCXPDMMHLDGTYBYSJMXHMRCPXXJZCKZXSHMLQXXTTHXWZFKHCCZDYTCJYXQHLXDHYPJQXYLSYYDZOZJNYXQEZYSQYAYXWYPDGXDDXSPPYZNDLTWRHXYDXZZJHTCXMCZLHPYYYYMHZLLHNXMYLLLMDCPPXHMXDKYCYRDLTXJCHHZZXZLCCLYLNZSHZJZZLNNRLWHYQSNJHXYNTTTKYJPYCHHYEGKCTTWLGQRLGGTGTYGYHPYHYLQYQGCWYQKPYYYTTTTLHYHLLTYTTSPLKYZXGZWGPYDSSZZDQXSKCQNMJJZZBXYQMJRTFFBTKHZKBXLJJKDXJTLBWFZPPTKQTZTGPDGNTPJYFALQMKGXBDCLZFHZCLLLLADPMXDJHLCCLGYHDZFGYDDGCYYFGYDXKSSEBDHYKDKDKHNAXXYBPBYYHXCQGAFFQYJXDMLJCSQZLLPCHBSXGJYNDYBYQSPZWJLZKSDDTACTBXZDYZYPJCQSJNKKTKNJDJGYYPGTLFYQKASDNTCYHBLWDZHBBYDWJRYGKZYHEYYFJMSDTYFZJJHGCXPLXHLDWXXJKYTCYKSSSMTWCTTQZLPBSZDZWZXGZAGYKTYWXLHLSPBCLLOQMMZSSLCMBJCSZZKYDCZJGQQDSMCYTCQQLWCQZXSSFPTTFQMDDZDSHDTDWFHTDYZJYQJQKYPBDJYYXTLJHDRQXXXHAYDHRJLKLYTWHLLRLLRCXYLBWSRSZZSYMKZZHHKYHXKSMDSYDYCJPBZBSQLFCXXXNXKXWYWSDZYQOGGQMMYHCDZTTFJYYBGSTTTYBYKJDHKYXBELHTYPJQNFXFDYKZHQKZBYJTZBXHFDXKDASWTAWAJLDYJSFHBLDNNTNQJTJNCHXFJSRFWHZFMDRYJYJWZPDJKZYJYMPCYZNYNXFBYTFYFWYGDBNZZZDNYTXZEMMQBSQEHXFZMBMFLZZSRXYMJGSXWZJSPRYDJSJGXHJJGLJJYNZZJXHGXKYMLPYYYCXYTWQZSWHWLYRJLPXSLSXMFSWWKLCTNXNYNPSJSZHDZEPTXMYYWXYYSYWLXJQCQXZDCLEEELMCPJPCLWBXSQHFWWTFFJTNQJHJQDXHWLBYZNFJLALKYYJLDXHHYCSTYYWNRJYXYWTRMDRQHWQCMFJDYZMHMYYXJWMYCQZXTLMRSPWWCHAQBXYGZYPXYYRRCLMPYMGKSJSZYSRMYJSNXTPLNBAPPYPYLXYYZKYNLDZYJZCZNNLMZHHARQMPGWQTZMXXMLLHGDZXYHXKYXYCJMFFYYHJFSBSSQLXXNDYCANNMTCJCYPRRNYTYQNYYMBMSXNDLYLYSLJRLXYSXQMLLYZLZJJJKYZZCSFBZXXMSTBJGNXYZHLXNMCWSCYZYFZLXBRNNNYLBNRTGCQYSATSWRYHYJZMZDHZGZDWYBSSCSKXSYHYTXXGCQGXZZSHYXJSCRHMKKBXCZJYJYMKQHZJFNBHMQHYSNJNZYBKNQMCLGQHWLZNZSWXKHLJHYYBQLBFCDSXDLDSPFZPSKJYZWZXZDDXJSMMEGJSCSSMGCLXXKYYYLNYPWWWGYDKZJGGGZGGSYCKNJWNJPCXBJJTQTJWDSSPJXZXNZXUMELPXFSXTLLXCLJXJJLJZXCTPSWXLYDHLYQRWHSYCSQYYBYAYWJJJQFWQCQQCJQGXALDBZZYJGKGXPLTZYFXJLTPADKYQHPMATLCPDCKBMTXYBHKLENXDLEEGQDYMSAWHZMLJTWYGXLYQZLJEEYYBQQFFNLYXRDSCTGJGXYYNKLLYQKCCTLHJLQMKKZGCYYGLLLJDZGYDHZWXPYSJBZKDZGYZZHYWYFQYTYZSZYEZZLYMHJJHTSMQWYZLKYYWZCSRKQYTLTDXWCTYJKLWSQZWBDCQYNCJSRSZJLKCDCDTLZZZACQQZZDDXYPLXZBQJYLZLLLQDDCQJYJYJZYXNYYYNYJXKXDAZWYRDLJYYYRJLXLLDYXJCYWYWNQCCLDDNYYYNYCKCZHXXCCLGCQJGKWPPCQQJYSBZZXYJSQPXJPZBSBDSFNSFPZXHDWZTDWPPTFLZZBZDMYYPQJRSDZSQZSQXBDGCPZSWDWCSQZGMDHZXMWWFYBPDGPHTMJTHZSMMBGZMBZJCFZWFZBBZMQCFMBDMCJXLGPNJBBXGYHYYJGPTZGZMQBQTCGYXJXLWZKYDPDYMGCFTPFXYZTZXDZXTGKMTYBBCLBJASKYTSSQYYMSZXFJEWLXLLSZBQJJJAKLYLXLYCCTSXMCWFKKKBSXLLLLJYXTYLTJYYTDPJHNHNNKBYQNFQYYZBYYESSESSGDYHFHWTCJBSDZZTFDMXHCNJZYMQWSRYJDZJQPDQBBSTJGGFBKJBXTGQHNGWJXJGDLLTHZHHYYYYYYSXWTYYYCCBDBPYPZYCCZYJPZYWCBDLFWZCWJDXXHYHLHWZZXJTCZLCDPXUJCZZZLYXJJTXPHFXWPYWXZPTDZZBDZCYHJHMLXBQXSBYLRDTGJRRCTTTHYTCZWMXFYTWWZCWJWXJYWCSKYBZSCCTCQNHXNWXXKHKFHTSWOCCJYBCMPZZYKBNNZPBZHHZDLSYDDYTYFJPXYNGFXBYQXCBHXCPSXTYZDMKYSNXSXLHKMZXLYHDHKWHXXSSKQYHHCJYXGLHZXCSNHEKDTGZXQYPKDHEXTYKCNYMYYYPKQYYYKXZLTHJQTBYQHXBMYHSQCKWWYLLHCYYLNNEQXQWMCFBDCCMLJGGXDQKTLXKGNQCDGZJWYJJLYHHQTTTNWCHMXCXWHWSZJYDJCCDBQCDGDNYXZTHCQRXCBHZTQCBXWGQWYYBXHMBYMYQTYEXMQKYAQYRGYZSLFYKKQHYSSQYSHJGJCNXKZYCXSBXYXHYYLSTYCXQTHYSMGSCPMMGCCCCCMTZTASMGQZJHKLOSQYLSWTMXSYQKDZLJQQYPLSYCZTCQQPBBQJZCLPKHQZYYXXDTDDTSJCXFFLLCHQXMJLWCJCXTSPYCXNDTJSHJWXDQQJSKXYAMYLSJHMLALYKXCYYDMNMDQMXMCZNNCYBZKKYFLMCHCMLHXRCJJHSYLNMTJZGZGYWJXSRXCWJGJQHQZDQJDCJJZKJKGDCQGJJYJYLXZXXCDQHHHEYTMHLFSBDJSYYSHFYSTCCQLPBDRFRZTZYKYWHSZYQKWDQZRKMSYNBCRXQBJYFAZPZZEDZCJYWBCJWHYJBQSZYWRYSZPTDKZPFPBNZTKLQYHBBZPNPPTYZZYBQNYDCPJMMCYCQMCYFZZDCMNLFPBPLNGQJTBTTNJZPZBBZNJKLJQYLNBCQHKSJZNGGQSZZKYXSHPZSNBCGZKDDCQANZHJKDRTLZLSWJLJZLYWTJNDJZJHXYAYNCBGTZCSSQMNJPJYTYSWXZFKWJQTKHTZPLBHSNJZSYZBWZZZZLSYLSBJHDWWQPSLMMFBJDWAQYZTCJTBNNWZXQXCDSLQGDSDPDZHJTQQPSWLYYJZLGYXYZLCTCBJTKTYCZJTQKBSJLGMGZDMCSGPYNJZYQYYKNXRPWSZXMTNCSZZYXYBYHYZAXYWQCJTLLCKJJTJHGDXDXYQYZZBYWDLWQCGLZGJGQRQZCZSSBCRPCSKYDZNXJSQGXSSJMYDNSTZTPBDLTKZWXQWQTZEXNQCZGWEZKSSBYBRTSSSLCCGBPSCQSZLCCGLLLZXHCQTHCZMQGYCQZNMCOCSZJMMZSQPJYGQLJYJPPLDXRGZYXCCSXHSHGTZNLZWZKJCXTCFCJXLBMQBCZZWPQDNHXLJCTHYZLGYLNLSZZPCXDSCQQHJQKSXZPBAJYEMSMJTZDXLCJYRYYNWJBNGZZTMJXLTBSLYRZPYLSSCNXPHLLHYLLQQCQLXYMRSYCXZLMMCZLTZSDWTJJLLNZGGQXPFSKYGYGHBFZPDKMWGHCXMSGDXJMCJZDYCABXJDLNBCDQYGSKYDQTXDJJYXMSCQAZDZFSLQXYJSJZYLBTXXWXQQZBJZUFBBLYLWDSLJHXJYZJWTDJCZFQCQZZDZSXZCQLZCDZFJHYSPYMPQZMLPPLFFXJJNZZYLSJEYQZFPFZKSYWJJJHRDJZZXTXXGLGHYDXCSKYSWMMZCWYBAZBJKSHFHJCXMHFQHYXXYZFTSJYZFXYXPZLCHMZMBXHZZSXYFYMNCWDABAZLXKTCSHHXKXJJZJSTHYGXSXYYHHHJWXKZXSSBZZWHHHCWTZZZPJXSNXQQJGZYZYWLLCWXZFXXYXYHXMKYYSWSQMNLNAYCYSPMJKHWCQHYLAJJMZXHMMCNZHBHXCLXTJPLTXYJHDYYLTTXFSZHYXXSJBJYAYRSMXYPLCKDUYHLXRLNLLSTYZYYQYGYHHSCCSMZCTCQXKYQFPYYRPFFLKQUNTSZLLZMWWTCQQYZWTLLMLMPWMBZSSTZRBPDDTLQJJBXZCSRCQQYGWCSXFWZLXCCRSZDZMCYGGDCQSGTJSWLJMYMMZYHFBJDGYXCCPSHXNZCSBSJYJGJMPPWAFFYFNXHYZXZYLREMZGZCYZSSZDLLJCSQFNXZKPTXZGXJJGFMYYYSNBTYLBNLHPFZDCYFBMGQRRSSSZXYSGTZRNYDZZCDGPJAFJFZKNZBLCZSZPSGCYCJSZLMLRSZBZZLDLSLLYSXSQCQLYXZLSKKBRXBRBZCYCXZZZEEYFGKLZLYYHGZSGZLFJHGTGWKRAAJYZKCQTSSHJJXDCYZUYJLZYRZDQQHGJZXSSZBYKJPBFRTJXLLFQWJHYLQTYMBLPZDXTZYGBDHZZRBGXHWNJTJXLKSCFSMWLSDQYSJTXKZSCFWJLBXFTZLLJZLLQBLSQMQQCGCZFPBPHZCZJLPYYGGDTGWDCFCCQYYYQYSSCLXZSKLZZZGFFCQNWGLHQYZJJCZLQZZYJPJZZBPDCCMHJGXDQDGDLCQMFGPSYTSDYFWWDJZJYSXYYCZCYHZWPBYKXRYLYBHKJKSFXTZJMMCKHLLTNYYMSYXYZPYJQYCSYCWMTJJKQYRHLLQXPSGTLYYCLJSCPXJYZFNMLRGJJTYZBXYZMSJYJHHFCQMSYXRSZCWTLRTQZSSTKXGQKGSPTGCZNJSJCQCXHMXGGZTQYDJKZDLBZSXJLHYQGGGTHQSZPYHJHHGYYGKGGCWJZZYLCZLXQSFTGZSLLLMLJSKCTBLLZZSZMMNYTPZSXQHJCJYQXYZXCQZCPSHKZZYSXCDFGMWQRLLQXRFZTLYSTCTMJCXJJXHJNXTNRZTZFQYHQGLLGCXSZSJDJLJCYDSJTLNYXHSZXCGJZYQPYLFHDJSBPCCZHJJJQZJQDYBSSLLCMYTTMQTBHJQNNYGKYRQYQMZGCJKPDCGMYZHQLLSLLCLMHOLZGDYYFZSLJCQZLYLCQJESHNYLLJXGJXLYSYYYXNBZLJSSZCQQCJYLLZLTJYLLZLLBNYLGQCHXYYXOXCXQKYJXXXYKLXSXXYQXCYKQXQCSGYXXYQXYGYTQOHXHXPYXXXULCYEYCHZZCBWQBBWJQZSCSZSSLZYLKDESJZWMYMCYTSDSXXSCJPQQSQYLYYZYCMDJDZYWCBTJSYDJKCYDDJLBDJJSODZYSYXQQYXDHHGQQYQHDYXWGMMMAJDYBBBPPBCMUUPLJZSMTXERXJMHQNUTPJDCBSSMSSSTKJTSSMMTRCPLZSZMLQDSDMJMQPNQDXCFYNBFSDQXYXHYAYKQYDDLQYYYSSZBYDSLNTFQTCQPZMCHDHCZCWFDXTMYQSPHQYYXSRGJCWTJTZCQMGWJJTJHTQJBBHWZPXXHYQFXXQYWYYHYSCDYDHHQMNMTMWCPBSZPPZZGLMZFOLLCFWHMMSJZTTDHZZYFFYTZZGZYSKYJXQYJCQBHMBZZLYGHGFMSHPZFZSNCLPBQSNJXZSLXXFPMTYJYGBXLLDLXPZJYZJYHHZCYWHJYLSJEXFSZZYWXKZJLUYDTMLYMQJPWXYHXSKTQJEZRPXXZHHMHWQPWQLYJJQJJZSZCPHJLCHHNXJLQWZJHBMZYXBDHHYPZLHLHLGFWLCHYYTLHJXCJMSCPXSTKPNHQXSRTYXXTESYJCTLSSLSTDLLLWWYHDHRJZSFGXTSYCZYNYHTDHWJSLHTZDQDJZXXQHGYLTZPHCSQFCLNJTCLZPFSTPDYNYLGMJLLYCQHYSSHCHYLHQYQTMZYPBYWRFQYKQSYSLZDQJMPXYYSSRHZJNYWTQDFZBWWTWWRXCWHGYHXMKMYYYQMSMZHNGCEPMLQQMTCWCTMMPXJPJJHFXYYZSXZHTYBMSTSYJTTQQQYYLHYNPYQZLCYZHZWSMYLKFJXLWGXYPJYTYSYXYMZCKTTWLKSMZSYLMPWLZWXWQZSSAQSYXYRHSSNTSRAPXCPWCMGDXHXZDZYFJHGZTTSBJHGYZSZYSMYCLLLXBTYXHBBZJKSSDMALXHYCFYGMQYPJYCQXJLLLJGSLZGQLYCJCCZOTYXMTMTTLLWTGPXYMZMKLPSZZZXHKQYSXCTYJZYHXSHYXZKXLZWPSQPYHJWPJPWXQQYLXSDHMRSLZZYZWTTCYXYSZZSHBSCCSTPLWSSCJCHNLCGCHSSPHYLHFHHXJSXYLLNYLSZDHZXYLSXLWZYKCLDYAXZCMDDYSPJTQJZLNWQPSSSWCTSTSZLBLNXSMNYYMJQBQHRZWTYYDCHQLXKPZWBGQYBKFCMZWPZLLYYLSZYDWHXPSBCMLJBSCGBHXLQHYRLJXYSWXWXZSLDFHLSLYNJLZYFLYJYCDRJLFSYZFSLLCQYQFGJYHYXZLYLMSTDJCYHBZLLNWLXXYGYYHSMGDHXXHHLZZJZXCZZZCYQZFNGWPYLCPKPYYPMCLQKDGXZGGWQBDXZZKZFBXXLZXJTPJPTTBYTSZZDWSLCHZHSLTYXHQLHYXXXYYZYSWTXZKHLXZXZPYHGCHKCFSYHUTJRLXFJXPTZTWHPLYXFCRHXSHXKYXXYHCQDXQWULHYHMJTBFLKHTXCWHJFWJCFPQRYQXCYYYQYGRPYWSGSUNGWCHKZDXYFLXXHJJBYZWTSXXNCYJJYMSWZJQRMHXZWFQSYLZJZGBHYNSLBGTTCSYBYXXWXYHXYYXNSQYXMQYWRGYQLXBBZLJSYLPSYTJZYHYZAWLRORJMKSCZJXXXYXCHDYXRYXXJDTSQFXLYLTSFFYXLMTYJMJUYYYXLTZCSXQCQHZXLYYXZHDNBRXXXJCTYHLBRLMBRLLAXKYLLLJLYXXLYCRYLCJTGJCMTLZLLCYZZPZPCYAWHJJFYBDYYZSMPCKZDQYQPBPCJPDCYZMDPBCYYDYCNNPLMTMLRMFMMGWYZBSJGYGSMCQQQZTXMKQWGXLLPJGZBQCDJJJFPKJKCXBLJMSWMDTQJXLDLPPBXCWRCQFBFQJCZAHZGMYKPHYYHZYKNDKZMBPJYXPXYHLFPNYYGXJDBKXNXHJMZJXSTRSTLDXSKZYSYBZXJLXYSLBZYSLHXJPFXPQNBYLLJQKYGZMCYZZYMCCSLCLHZFWFWYXZMWSXTYNXJHPYYMCYSPMHYSMYDYSHQYZCHMJJMZCAAGCFJBBHPLYZYLXXSDJGXDHKXXTXXNBHRMLYJSLTXMRHNLXQJXYZLLYSWQGDLBJHDCGJYQYCMHWFMJYBMBYJYJWYMDPWHXQLDYGPDFXXBCGJSPCKRSSYZJMSLBZZJFLJJJLGXZGYXYXLSCQYXBEXYXHGCXBPLDYHWETTWWCJMBTXCHXYQXLLXFLYXLLJLSSFWDPZSMYJCLMWYTCZPCHQEKCQBWLCQYDPLQPPQCQFJQDJHYMMCXTXDRMJWRHXCJZYLQXDYYNHYYHRSLSRSYWWZJYMTLTLLGTQCJZYABTCKZCJYCCQLJCQXALMZYHYWLWDXZXQDLLQSHGPJFJLJHJABCQZDJGTKHSSTCYJLPSWZLXZXRWGLDLZRLZXTGSLLLLZLYXXWGDZYGBDPHZPBRLWSXQBPFDWOFMWHLYPCBJCCLDMBZPBZZLCYQXLDOMZBLZWPDWYYGDSTTHCSQSCCRSSSYSLFYBFNTYJSZDFNDPDHDZZMBBLSLCMYFFGTJJQWFTMTPJWFNLBZCMMJTGBDZLQLPYFHYYMJYLSDCHDZJWJCCTLJCLDTLJJCPDDSQDSSZYBNDBJLGGJZXSXNLYCYBJXQYCBYLZCFZPPGKCXZDZFZTJJFJSJXZBNZYJQTTYJYHTYCZHYMDJXTTMPXSPLZCDWSLSHXYPZGTFMLCJTYCBPMGDKWYCYZCDSZZYHFLYCTYGWHKJYYLSJCXGYWJCBLLCSNDDBTZBSCLYZCZZSSQDLLMQYYHFSLQLLXFTYHABXGWNYWYYPLLSDLDLLBJCYXJZMLHLJDXYYQYTDLLLBUGBFDFBBQJZZMDPJHGCLGMJJPGAEHHBWCQXAXHHHZCHXYPHJAXHLPHJPGPZJQCQZGJJZZUZDMQYYBZZPHYHYBWHAZYJHYKFGDPFQSDLZMLJXKXGALXZDAGLMDGXMWCQYXXDXXPFDMMSSYMPFMDMMKXKSYZYSHDZKXSYSMMZZZMSYDNZZCZXFPLSTMZDNMXCKJMZTYYMZMZZMSXHHDCZJEMXXKLJSTLWLSQLYJZLLZJSSDPPMHNLZJCZYHMXXHGZCJMDHXTKGRMXFWMCGMWKDTKSXQMMMFZZYDKMSCLCMPCGMHSPXQPZDSSLCXKYXTWLWJYAHZJGCQMCSNXYYMMPMLKJXMHLMLQMXCTKZMJQYSZJSYSZHSYJZJCDAJZYBSDQJZGWCQQXFKDMSDJLFWEHKCQKJPEYPZYSZCDWYJFFMZZYLTTDZZEFMZLBNPPLPLPEPSZALLTYLKCKQZKGENQLWAGYXYDPXLHSXQQWQCQXQCLHYXXMLYCCWLYMQYSKGCHLCJNSZKPYZKCQCQLJPDMDZHLASXLBYDWQLWDNBQCRYDDZTJYBKBWSZDXDTNPJDTCTQDFXQQMGNXECLTTBKPWSLCTYQLPWYZZKLPYGZCQQPLLKCCYLPQMZCCQCLJSLQZDJXLDDHPCQDLJJXCQDXYCQKZLJCYQDYJPPYPQYKJYRMPCBYMCXKLLZLLFQPYLLLMBSGLCYSSLRSYSQTMXYXCQZFDZUYSYZTFFMZZSMCQHZSSCCMLYXWTPZGXZJGZGSJSGKDDHTQGGZLLBJDZLCBCHYXYZHZFYWXYZYMSDBZZYJGTSMTFXQYXQSTDGSLNXDLRYZZLRYYLXQHTXSRTZNGZXBNQQZFMYKMZJBZYMKBPNLYZPBLMCNQYZZZSJZHJCTZKHYZZJRDYZHNPXGLFZTLKGJTCTSSYLLGZRZBBQZZKLPKLCZYSSUYXBJFPNJZZXCDWXZYJXZZDJJKGGRSRJKMSMZJLSJYWQSKYHQJSXPJZZZLSNSHRNYPZTWCHKLPSRZLZXYJQXQKYSJYCZTLQZYBBYBWZPQDWWYZCYTJCJXCKCWDKKZXSGKDZXWWYYJQYYTCYTDLLXWKCZKKLCCLZCQQDZLQLCSFQCHQHSFSMQZZLNBJJZBSJHTSZDYSJQJPDLZCDCWJKJZZLPYCGMZWDJJBSJQZSYZYHHXJPBJYDSSXDZNCGLQMBTSFSBPDZDLZNFGFJGFSMPXJQLMBLGQCYYXBQKDJJQYRFKZTJDHCZKLBSDZCFJTPLLJGXHYXZCSSZZXSTJYGKGCKGYOQXJPLZPBPGTGYJZGHCQZZLBJLSQFZGKQQJZGYCZBCQTLDXRJXBSXXPZXHYZYCLWDXJJHXMFDZPFZHQHQMQGKSLYHTYCGFRZGNQXCLPDLBZCSCCQLLJBLHBZCYPZZPPDYMZZSGYHCKCPZJGSLJLNSCDSLDLXBMSTLDDFJMKDJDHZLZXLSCQPQPGJLLYBDSZGQLBZLSLKYYHZTTNTJYQTZZPSCQZTLLJTYYLLQLLQYCQLBDZLSLYYZYMDFSZSNHLXZNCCQZPBWSKRFBSYZMTHBLGJPMCZZLSTLXSHTCSYZLZBLFEQHLXFLCJLYLJQCBZLZJHHSSTBRMHXZHJZCLXFNBGXGTQJCZTMSFZKJMSSNXLJKBHSJXNTNLZDNTLMSJXGZJYJCZXYJYJWRWWQNZTNFJSZPZSHZJFYRDJSFSZJZBJFCQZZHZLXFYSBCQLZSGYFTZDCSZXZJBQMSZKJRHYJZCKMJKHCHGTXKXQGLXPXFXTRTYLXJXHDTSJXHJZJXZWZLCQSBTXWXGXTXXHXFTSDKFJHZYJFJXRZSDLLLTQSQQCQWZXSYQTWGWBZCGZLLYZBCLMQQTZHZXZXLJFRMYZFLXYSQXXJKXRMQDZDMMYYBSQBHGZMWFWXGMXLZPYYTGZYCCDXYZXYWGSYJYZNBHPZJSQSYXSXRTFYZGRHZTXSZZTHCBFCLSYXZLCQMZLMPLMXZJXSFLBYZMYQHXJSXRXSQZZZSSLYFRCZJRCRXHHZXQYDYHXSJJHZCXZBTYNSYSXJBQLPXCQPYMLXZKYXLXCJLCYSXXZZLXDLLLJJYHZXGYJWKJRWYHCPSGNRZLFZWFZZNSXGXFLZSXZZZBFCSYJDBRJKRDHHGXJLJJTGXJXXSTJTJXLYXQFCSGSWMSBCTLQZZWLZZKXJMLTMJYHSDDBXGZHDLBMYJFRZFSGCLYJBPMLYSMSXLSZJQQHJZFXGFQFQBPXZGYYQXGZTCQWYLTLGWSGWHRLFSFGZJMGMGBGTJFSYZZGZYZAFLSSPMLPFLCWBJZCLJJMZLPJJLYMQDMYYYFBGYGYZMLYZDXQYXRQQQHSYYYQXYLJTYXFSFSLLGNQCYHYCWFHCCCFXPYLYPLLZYXXXXXKQHHXSHJZCFZSCZJXCPZWHHHHHAPYLQALPQAFYHXDYLUKMCQGGGDDESRNNZLTZGCHYPPYSQJJHCLLJTOLNJPZLJLHYMHEYDYDSQYCDDHGZUNDZCLZYZLLZNTNYZGSLHSLPJJBDGWXPCDUTJCKLKCLWKLLCASSTKZZDNQNTTLYYZSSYSSZZRYLJQKCQDHHCRXRZYDGRGCWCGCQFFFPPJFZYNAKRGYWYQPQXXFKJTSZZXSWZDDFBBXTBGTZKZNPZZPZXZPJSZBMQHKCYXYLDKLJNYPKYGHGDZJXXEAHPNZKZTZCMXCXMMJXNKSCQNMNLWBWWXJKYHCPSTMCSQTZJYXTPCTPDTNNPGLLLZSJLSPBLPLQHDTNJNLYYRSZFFJFQWDPHZDWMRZCCLODAXNSSNYZRESTYJWJYJDBCFXNMWTTBYLWSTSZGYBLJPXGLBOCLHPCBJLTMXZLJYLZXCLTPNCLCKXTPZJSWCYXSFYSZDKNTLBYJCYJLLSTGQCBXRYZXBXKLYLHZLQZLNZCXWJZLJZJNCJHXMNZZGJZZXTZJXYCYYCXXJYYXJJXSSSJSTSSTTPPGQTCSXWZDCSYFPTFBFHFBBLZJCLZZDBXGCXLQPXKFZFLSYLTUWBMQJHSZBMDDBCYSCCLDXYCDDQLYJJWMQLLCSGLJJSYFPYYCCYLTJANTJJPWYCMMGQYYSXDXQMZHSZXPFTWWCQSWQRFKJLZJQQYFBRXJHHFWJJZYQAZMYFRHCYYBYQWLPEXCCZSTYRLTTDMQLYKMBBGMYYJPRKZNPBSXYXBHYZDJDNGHPMFSGMWFZMFQMMBCMZZCJJLCNUXYQLMLRYGQZCYXZLWJGCJCGGMCJNFYZZJHYCPRRCMTCQZXHFQGTJXCCJEAQCRJYHPLQLSZDJRBCQHQDYRHYLYXJSYMHZYDWLDFRYHBPYDTSSCNWBXGLPZMLZZTQSSCPJMXXYCSJYTYCGHYCJWYRXXLFEMWJNMKLLSWTXHYYYNCMMCWJDQDJZGLLJWJRKHPZGGFLCCSCZMCBLTBHBQJXQDSPDJZZGKGLFQYWBZYZJLTSTDHQHCTCBCHFLQMPWDSHYYTQWCNZZJTLBYMBPDYYYXSQKXWYYFLXXNCWCXYPMAELYKKJMZZZBRXYYQJFLJPFHHHYTZZXSGQQMHSPGDCQWBWPJHZJDYSCQWZKTXXSQLZYYMYSDZGRXCKKUJLWPYSYSCSYZLRMLQSYLJXBCXTLWDQZPCYCYKPPPNSXFYZJJRCEMHSZMSXLXGLRWGCSTLRSXBZGBZGZTCPLUJLSLYLYMTXMTZPALZXPXJTJWTCYYZLBLXBZLQMYLXPGHDSLSSDMXMBDZZSXWHAMLCZCPJMCNHJYSNSYGCHSKQMZCQDLLKABLWJXSFMOCDXJRRLYQZKJMYBYQLYHETFJZFRFKSRYXFJTWDSXXSYSQJYSLYXWJHSNLXYYXHBHAWHHJZXWMYLJCSSLKYDZTXBZSYFDXGXZJKHSXXYBSSXDPYNZWRPTQZCZENYGCXQFJYKJBZMLJCMQQXUOXSLYXXLYLLJDZBTYMHPFSTTQQWLHOKYBLZZALZXQLHZWRRQHLSTMYPYXJJXMQSJFNBXYXYJXXYQYLTHYLQYFMLKLJTMLLHSZWKZHLJMLHLJKLJSTLQXYLMBHHLNLZXQJHXCFXXLHYHJJGBYZZKBXSCQDJQDSUJZYYHZHHMGSXCSYMXFEBCQWWRBPYYJQTYZCYQYQQZYHMWFFHGZFRJFCDPXNTQYZPDYKHJLFRZXPPXZDBBGCQSTLGDGYLCQMLCHHMFYWLZYXKJLYPQHSYWMQQGQZMLZJNSQXJQSYJYCBEHSXFSZPXZWFLLBCYYJDYTDTHWZSFJMQQYJLMQXXLLDTTKHHYBFPWTYYSQQWNQWLGWDEBZWCMYGCULKJXTMXMYJSXHYBRWFYMWFRXYQMXYSZTZZTFYKMLDHQDXWYYNLCRYJBLPSXCXYWLSPRRJWXHQYPHTYDNXHHMMYWYTZCSQMTSSCCDALWZTCPQPYJLLQZYJSWXMZZMMYLMXCLMXCZMXMZSQTZPPQQBLPGXQZHFLJJHYTJSRXWZXSCCDLXTYJDCQJXSLQYCLZXLZZXMXQRJMHRHZJBHMFLJLMLCLQNLDXZLLLPYPSYJYSXCQQDCMQJZZXHNPNXZMEKMXHYKYQLXSXTXJYYHWDCWDZHQYYBGYBCYSCFGPSJNZDYZZJZXRZRQJJYMCANYRJTLDPPYZBSTJKXXZYPFDWFGZZRPYMTNGXCQBYXNBUFNQKRJQZMJEGRZGYCLKXZDSKKNSXKCLJSPJYYZLQQJYBZSSQLLLKJXTBKTYLCCDDBLSPPFYLGYDTZJYQGGKQTTFZXBDKTYYHYBBFYTYYBCLPDYTGDHRYRNJSPTCSNYJQHKLLLZSLYDXXWBCJQSPXBPJZJCJDZFFXXBRMLAZHCSNDLBJDSZBLPRZTSWSBXBCLLXXLZDJZSJPYLYXXYFTFFFBHJJXGBYXJPMMMPSSJZJMTLYZJXSWXTYLEDQPJMYGQZJGDJLQJWJQLLSJGJGYGMSCLJJXDTYGJQJQJCJZCJGDZZSXQGSJGGCXHQXSNQLZZBXHSGZXCXYLJXYXYYDFQQJHJFXDHCTXJYRXYSQTJXYEFYYSSYYJXNCYZXFXMSYSZXYYSCHSHXZZZGZZZGFJDLTYLNPZGYJYZYYQZPBXQBDZTZCZYXXYHHSQXSHDHGQHJHGYWSZTMZMLHYXGEBTYLZKQWYTJZRCLEKYSTDBCYKQQSAYXCJXWWGSBHJYZYDHCSJKQCXSWXFLTYNYZPZCCZJQTZWJQDZZCQZLJJXLSBHPYXXPSXSHHEZTXFPTLQYZZXHYTXNCFZYYHXGNXMYWXTZSJPTHHGYMXMXQZXTSBCZYJYXXTYYZYPCQLMMSZMJZZLLZXGXZAAJZYXJMZXWDXZSXZDZXLEYJJCQBHZWZZCQTZPSXZTDSXJJJZNYAZPHXYYSRNQDTHZHYYKYJHDZXZLSWCLYBZYECWCYCRYLCXNHZYDZYDYJDFRJJHTRSQTXYXJRJHOJYNXELXSFSFJZGHPZSXZSZDZCQZBYYKLSGSJHCZSHDGQGXYZGXCHXZJWYQWGYHKSSEQZZNDZFKWYSSTCLZSTSYMCDHJXXYWEYXCZAYDMPXMDSXYBSQMJMZJMTCQLPJYQZCGQHXJHHLXXHLHDLDJQCLDWBSXFZZYYSCHTYTYYBHECXHYKGJPXHHYZJFXHWHBDZFYZBCAPNPGNYDMSXHMMMMAMYNBYJTMPXYYMCTHJBZYFCGTYHWPHFTWZZEZSBZEGPFMTSKFTYCMHFLLHGPZJXZJGZJYXZSBBQSCZZLZCCSTPGXMJSFTCCZJZDJXCYBZLFCJSYZFGSZLYBCWZZBYZDZYPSWYJZXZBDSYUXLZZBZFYGCZXBZHZFTPBGZGEJBSTGKDMFHYZZJHZLLZZGJQZLSFDJSSCBZGPDLFZFZSZYZYZSYGCXSNXXCHCZXTZZLJFZGQSQYXZJQDCCZTQCDXZJYQJQCHXZTDLGSCXZSYQJQTZWLQDQZTQCHQQJZYEZZZPBWKDJFCJPZTYPQYQTTYNLMBDKTJZPQCQZZFPZSBNJLGYJDXJDZZKZGQKXDLPZJTCJDQBXDJQJSTCKNXBXZMSLYJCQMTJQWWCJQNJNLLLHJCWQTBCQYDZCZPZZDZYDDCYZZZCCJTTJFZDPRRTZTJDCQTQZDTJNPLZBCLLCTZSXKJCQZPZLBZRBTJDCXFCZDBCCJJLTQQPLDCGZDBBZJCQDCJWYNLLZYZCCDWLLXWZLXRXNTQQCZXKQLSGDFQTDDGLRLAJJTKUYMKQLLTZYTDYYCZGJWYXDXFRSKSTQTENQMRKQZHHQKDLDAZFKYPBGGPZREBZZYKZZSPEGJXGYKQZZZSLYSYYYZWFQZYLZZLZHWCHKYPQGNPGBLPLRRJYXCCSYYHSFZFYBZYYTGZXYLXCZWXXZJZBLFFLGSKHYJZEYJHLPLLLLCZGXDRZELRHGKLZZYHZLYQSZZJCQLJZFLNBHGWLCZCFJYSPYXZLZLXGCCPZBLLCYBBBBUBBCBPCRNNZCZYRBFSRLDCGQYYQXYGMQZWTZYTYJXYFWTEHZZJYWLCCNTZYJJZDEDPZDZTSYQJHDYMBJNYJZLXTSSTPHNDJXXBYXQTCQDDTJTDYYTGWSCSCQFLSHLGLBCZPHDLYZJYCKWTYTYLBNYTSDSYCCTYSZYYEBHEXHQDTWNYGYCLXTSZYSTQMYGZAZCCSZZDSLZCLZRQXYYELJSBYMXSXZTEMBBLLYYLLYTDQYSHYMRQWKFKBFXNXSBYCHXBWJYHTQBPBSBWDZYLKGZSKYHXQZJXHXJXGNLJKZLYYCDXLFYFGHLJGJYBXQLYBXQPQGZTZPLNCYPXDJYQYDYMRBESJYYHKXXSTMXRCZZYWXYQYBMCLLYZHQYZWQXDBXBZWZMSLPDMYSKFMZKLZCYQYCZLQXFZZYDQZPZYGYJYZMZXDZFYFYTTQTZHGSPCZMLCCYTZXJCYTJMKSLPZHYSNZLLYTPZCTZZCKTXDHXXTQCYFKSMQCCYYAZHTJPCYLZLYJBJXTPNYLJYYNRXSYLMMNXJSMYBCSYSYLZYLXJJQYLDZLPQBFZZBLFNDXQKCZFYWHGQMRDSXYCYTXNQQJZYYPFZXDYZFPRXEJDGYQBXRCNFYYQPGHYJDYZXGRHTKYLNWDZNTSMPKLBTHBPYSZBZTJZSZZJTYYXZPHSSZZBZCZPTQFZMYFLYPYBBJQXZMXXDJMTSYSKKBJZXHJCKLPSMKYJZCXTMLJYXRZCQSLXXQPYZXMKYXXXJCLJPRMYYGADYSKQLSNDHYZKQXZYZTCGHZTLMLWZYBWSYCTBHJHJFCWZTXWYTKZLXQSHLYJZJXTMPLPYCGLTBZZTLZJCYJGDTCLKLPLLQPJMZPAPXYZLKKTKDZCZZBNZDYDYQZJYJGMCTXLTGXSZLMLHBGLKFWNWZHDXUHLFMKYSLGXDTWWFRJEJZTZHYDXYKSHWFZCQSHKTMQQHTZHYMJDJSKHXZJZBZZXYMPAGQMSTPXLSKLZYNWRTSQLSZBPSPSGZWYHTLKSSSWHZZLYYTNXJGMJSZSUFWNLSOZTXGXLSAMMLBWLDSZYLAKQCQCTMYCFJBSLXCLZZCLXXKSBCQCLHJPSQPLSXXCKSLNHPSFQQYTXYJZLQLDXCQJZDYYDJNZPTUZDSKJFSLJHYLZSQZLBTXYDGTQFDBYAZXDZHZJNHHQBYKNXJJQCZMLLJZKSPLDYCLBBLXKLELXJLBQYCXJXGCNLCQPLZLZYJTZLJGYZDZPLTQCSXFDMNYCXGBTJDCZNBGBQYQJWGKFHTNPYQCQGBKPBBYZMTJDYTBLSQMPSXTBNPDXKLEMYYCJYNZCTLDYKZZXDDXHQSHDGMZSJYCCTAYRZLPYLTLKXSLZCGGEXCLFXLKJRTLQJAQZNCMBYDKKCXGLCZJZXJHPTDJJMCQYKQSECQZDSHHADMLZFMMZBGNTJNNLGBYJBRBTMLBYJDZXLCJLPLDLPCQDHLXZLYCBLCXZZJADJLNZMMSSSMYBHBSQKBHRSXXJMXSDZNZPXLGBRHWGGFCXGMSKLLTSJYYCQLTSKYWYYHYWXBXQYWPYWYKQLSQPTNTKHQCWDQKTWPXXHCPTHTWUMSSYHBWCRWXHJMKMZNGWTMLKFGHKJYLSYYCXWHYECLQHKQHTTQKHFZLDXQWYZYYDESBPKYRZPJFYYZJCEQDZZDLATZBBFJLLCXDLMJSSXEGYGSJQXCWBXSSZPDYZCXDNYXPPZYDLYJCZPLTXLSXYZYRXCYYYDYLWWNZSAHJSYQYHGYWWAXTJZDAXYSRLTDPSSYYFNEJDXYZHLXLLLCQZSJNYQYQQXYJGHZGZCYJCHZLYCDSHWSHJZYJXCLLNXZJJYYXNFXMWFPYLCYLLABWDDHWDXJMCXZTZPMLQZHSFHZYNZTLLDYWLSLXHYMMYLMBWWKYXYADTXYLLDJPYBPWUXJMWMLLSAFDLLYFLBHHHBQQLTZJCQJLDJTFFKMMMBYTHYGDCQRDDWRQJXNBYSNWZDBYYTBJHPYBYTTJXAAHGQDQTMYSTQXKBTZPKJLZRBEQQSSMJJBDJOTGTBXPGBKTLHQXJJJCTHXQDWJLWRFWQGWSHCKRYSWGFTGYGBXSDWDWRFHWYTJJXXXJYZYSLPYYYPAYXHYDQKXSHXYXGSKQHYWFDDDPPLCJLQQEEWXKSYYKDYPLTJTHKJLTCYYHHJTTPLTZZCDLTHQKZXQYSTEEYWYYZYXXYYSTTJKLLPZMCYHQGXYHSRMBXPLLNQYDQHXSXXWGDQBSHYLLPJJJTHYJKYPPTHYYKTYEZYENMDSHLCRPQFDGFXZPSFTLJXXJBSWYYSKSFLXLPPLBBBLBSFXFYZBSJSSYLPBBFFFFSSCJDSTZSXZRYYSYFFSYZYZBJTBCTSBSDHRTJJBYTCXYJEYLXCBNEBJDSYXYKGSJZBXBYTFZWGENYHHTHZHHXFWGCSTBGXKLSXYWMTMBYXJSTZSCDYQRCYTWXZFHMYMCXLZNSDJTTTXRYCFYJSBSDYERXJLJXBBDEYNJGHXGCKGSCYMBLXJMSZNSKGXFBNBPTHFJAAFXYXFPXMYPQDTZCXZZPXRSYWZDLYBBKTYQPQJPZYPZJZNJPZJLZZFYSBTTSLMPTZRTDXQSJEHBZYLZDHLJSQMLHTXTJECXSLZZSPKTLZKQQYFSYGYWPCPQFHQHYTQXZKRSGTTSQCZLPTXCDYYZXSQZSLXLZMYCPCQBZYXHBSXLZDLTCDXTYLZJYYZPZYZLTXJSJXHLPMYTXCQRBLZSSFJZZTNJYTXMYJHLHPPLCYXQJQQKZZSCPZKSWALQSBLCCZJSXGWWWYGYKTJBBZTDKHXHKGTGPBKQYSLPXPJCKBMLLXDZSTBKLGGQKQLSBKKTFXRMDKBFTPZFRTBBRFERQGXYJPZSSTLBZTPSCQZSJDHLJQLZBPMSMMSXLQQNHKNBLRDDNXXDHDDJCYYGYLXGZLXSYGMQQGKHBPMXYXLYTQWLWGCPBMQXCYZYDRJBHTDJYHQSHTMJSBYPLWHLZFFNYPMHXXHPLTBQPFBJWQDBYGPNZTPFZJGSDDTQSHZEAWZZYLLTYYBWJKXXGHLFKXDJTMSZSQYNZGGSWQSPHTLSSKMCLZXYSCQZXNCJDQGZDLFNYKLJCJLLZLMZZNHYDSSHTHZZLZZBBHQZWWYCRZHLYQQJBEYFXXXWHSRXWQHWPSLMSSKZTTYGYQQWRSLALHMJTQJSMXQBJJZJXZYZKXBYQXBJXSHZTSFJLXMXZXFGHKZSZGGYLCLSARJYHSLLLMZXELGLXYDJYTLFBHBPNLYZFBBHPTGJKWETZHKJJXZXXGLLJLSTGSHJJYQLQZFKCGNNDJSSZFDBCTWWSEQFHQJBSAQTGYPQLBXBMMYWXGSLZHGLZGQYFLZBYFZJFRYSFMBYZHQGFWZSYFYJJPHZBYYZFFWODGRLMFTWLBZGYCQXCDJYGZYYYYTYTYDWEGAZYHXJLZYYHLRMGRXXZCLHNELJJTJTPWJYBJJBXJJTJTEEKHWSLJPLPSFYZPQQBDLQJJTYYQLYZKDKSQJYYQZLDQTGJQYZJSUCMRYQTHTEJMFCTYHYPKMHYZWJDQFHYYXWSHCTXRLJHQXHCCYYYJLTKTTYTMXGTCJTZAYYOCZLYLBSZYWJYTSJYHBYSHFJLYGJXXTMZYYLTXXYPZLXYJZYZYYPNHMYMDYYLBLHLSYYQQLLNJJYMSOYQBZGDLYXYLCQYXTSZEGXHZGLHWBLJHEYXTWQMAKBPQCGYSHHEGQCMWYYWLJYJHYYZLLJJYLHZYHMGSLJLJXCJJYCLYCJPCPZJZJMMYLCQLNQLJQJSXYJMLSZLJQLYCMMHCFMMFPQQMFYLQMCFFQMMMMHMZNFHHJGTTHHKHSLNCHHYQDXTMMQDCYZYXYQMYQYLTDCYYYZAZZCYMZYDLZFFFMMYCQZWZZMABTBYZTDMNZZGGDFTYPCGQYTTSSFFWFDTCQSSYSTWXJHXYTSXXYLBYQHWWKXHZXWZNNZZJZJJQJCCCHYYXBZXZCYZTLLCQXYNJYCYYCYNZCQYYYEWYCZDCJYCCHYJLBTZYYCQWMPWPYMLGKDLDLGKQQBGYCHJXY",
        //多音字的编码对应关系，你在下方的方法找到对应的编码，然后自己可以定义字母开头，这个多音字网上说的很全事实上并不全我自己自定义了好几个
      oMultiDiff :{"20315":"FS","19969":"DZ","19975":"WM","19988":"QJ","20048":"LS","20056":"SC","20060":"NM","20094":"QG","20127":"QJ","20167":"QC","20193":"YG","20250":"KH","20256":"ZC","20282":"SC","20285":"QJG","20291":"TD","20314":"YD","20340":"NE","20375":"TD","20389":"YJ","20391":"CZ","20415":"PB","20446":"YS","20447":"SQ","20504":"TC","20608":"KG","20854":"QJ","20857":"ZC","20911":"PF","20504":"TC","20608":"KG","20854":"QJ","20857":"ZC","20911":"PF","20985":"AW","21032":"PB","21048":"XQ","21049":"SC","21089":"YS","21119":"JC","21242":"SB","21273":"SC","21305":"YP","21306":"QO","21330":"ZC","21333":"SDC","21345":"QK","21378":"CA","21397":"SC","21414":"XS","21442":"SC","21477":"JG","21480":"TD","21484":"ZS","21494":"YX","21505":"YX","21512":"HG","21523":"XH","21537":"PB","21542":"PF","21549":"KH","21571":"E","21574":"DA","21588":"TD","21589":"O","21618":"ZC","21621":"KHA","21632":"ZJ","21654":"KG","21679":"LKG","21683":"KH","21710":"A","21719":"YH","21734":"WOE","21769":"A","21780":"WN","21804":"XH","21834":"A","21899":"ZD","21903":"RN","21908":"WO","21939":"ZC","21956":"SA","21964":"YA","21970":"TD","22003":"A","22031":"JG","22040":"XS","22060":"ZC","22066":"ZC","22079":"MH","22129":"XJ","22179":"XA","22237":"NJ","22244":"TD","22280":"JQ","22300":"YH","22313":"XW","22331":"YQ","22343":"YJ","22351":"PH","22395":"DC","22412":"TD","22484":"PB","22500":"PB","22534":"ZD","22549":"DH","22561":"PB","22612":"TD","22771":"KQ","22831":"HB","22841":"JG","22855":"QJ","22865":"XQ","23013":"ML","23081":"WM","23487":"SX","23558":"QJ","23561":"YW","23586":"YW","23614":"YW","23615":"SN","23631":"PB","23646":"ZS","23663":"ZT","23673":"YG","23762":"TD","23769":"ZS","23780":"QJ","23884":"QK","24055":"XH","24113":"DC","24162":"ZC","24191":"GA","24273":"QJ","24324":"NL","24377":"TD","24378":"QJ","24439":"PF","24554":"ZS","24683":"TD","24694":"WE","24733":"LK","24925":"TN","25094":"ZG","25100":"XQ","25103":"XH","25153":"PB","25170":"PB","25179":"KG","25203":"PB","25240":"ZS","25282":"FB","25303":"NA","25324":"KG","25341":"ZY","25373":"WZ","25375":"XJ","25384":"A","25457":"A","25528":"SD","25530":"SC","25552":"TD","25774":"ZC","25874":"ZC","26044":"YW","26080":"WM","26292":"PB","26333":"PB","26355":"ZY","26366":"CZ","26397":"ZC","26399":"QJ","26415":"ZS","26451":"SB","26526":"ZC","26552":"JG","26561":"TD","26588":"JG","26597":"CZ","26629":"ZS","26638":"YL","26646":"XQ","26653":"KG","26657":"XJ","26727":"HG","26894":"ZC","26937":"ZS","26946":"ZC","26999":"KJ","27099":"KJ","27449":"YQ","27481":"XS","27542":"ZS","27663":"ZS","27748":"TS","27784":"SC","27788":"ZD","27795":"TD","27812":"O","27850":"PB","27852":"MB","27895":"SL","27898":"PL","27973":"QJ","27981":"KH","27986":"HX","27994":"XJ","28044":"YC","28065":"WG","28177":"SM","28267":"QJ","28291":"KH","28337":"CQ","28463":"TL","28548":"DC","28601":"TD","28689":"PB","28805":"JG","28820":"QG","28846":"PB","28952":"TD","28975":"ZC","29100":"A","29325":"QJ","29575":"SL","29602":"FB","30010":"TD","30044":"CX","30058":"PF","30091":"YSP","30111":"YN","30229":"XJ","30427":"SC","30465":"SX","30631":"YQ","30655":"QJ","30684":"QJG","30707":"SD","30729":"XH","30796":"LG","30917":"PB","31074":"NM","31085":"JZ","31109":"SC","31181":"ZC","31192":"MLB","31293":"JQ","31400":"YX","31584":"YJ","31896":"ZN","31909":"ZY","31995":"XJ","32321":"PF","32327":"ZY","32418":"HG","32420":"XQ","32421":"HG","32438":"LG","32473":"GJ","32488":"TD","32521":"QJ","32527":"PB","32562":"ZSQ","32564":"JZ","32735":"ZD","32793":"PB","33071":"PF","33098":"XL","33100":"YA","33152":"PB","33261":"CX","33324":"BP","33333":"TD","33406":"YA","33426":"WM","33432":"PB","33445":"JG","33486":"ZN","33493":"TS","33507":"QJ","33540":"QJ","33544":"ZC","33564":"XQ","33617":"YT","33632":"QJ","33636":"XH","33637":"YX","33694":"WG","33705":"PF","33728":"YW","33882":"SR","34067":"WM","34074":"YW","34121":"QJ","34255":"ZC","34259":"XL","34425":"JH","34430":"XH","34485":"KH","34503":"YS","34532":"HG","34552":"XS","34558":"YE","34593":"ZL","34660":"YQ","34892":"XH","34928":"SC","34999":"QJ","35048":"PB","35059":"SC","35098":"ZC","35203":"TQ","35265":"JX","35299":"JX","35782":"SZ","35828":"YS","35830":"E","35843":"TD","35895":"YG","35977":"MH","36158":"JG","36228":"QJ","36426":"XQ","36466":"DC","36710":"JC","36711":"ZYG","36767":"PB","36866":"SK","36951":"YW","37034":"YX","37063":"XH","37218":"ZC","37325":"CQ","38063":"PB","38079":"TD","38085":"QY","38107":"DC","38116":"TD","38123":"YD","38224":"HG","38241":"XTC","38271":"C","38415":"YE","38426":"KH","38461":"YD","38463":"AE","38466":"PB","38477":"XJ","38518":"YT","38551":"WK","38585":"ZC","38704":"XS","38739":"LJ","38761":"GJ","38808":"SQ","39048":"JG","39049":"XJ","39052":"HG","39076":"CZ","39271":"XT","39534":"TD","39552":"TD","39584":"PB","39647":"SB","39730":"LG","39748":"TPB","40109":"CQ","40479":"ND","40516":"HG","40536":"HG","40583":"QJ","40765":"YQ","40784":"QJ","40840":"YK","40863":"QJG"},

    };
  },
  props: {
    styles: {
      type: Object
    },
    headerVisible: { type: Boolean, default: true },
    contentVisible: { type: Boolean, default: true },
    titleMessageVisible: { type: Boolean, default: true },
    titleImgVisible: { type: Boolean, default: true },
    titleMessage: "",
    visible: { type: Boolean, default: false }
  },

  methods: {
    getInputName(names) {
      this.$emit("getInputSelectName", names);
      this.modalType = false;
    },
    //此处是淡入淡出和右侧点击事件左边产生滑动的jquery效果，vue的css特效这块不熟所以用jquery操作简单直观，不是特别建议穿插jquery，毕竟性能不好，但是经常用vue你会忘了jquery，练手了吧
    getletterListName(letterListOne,index){
         var Initials=$j('.initialsClass');

            let LetterBox = $j("#letter");
            let _this = $j(".Initials ul li");
            var LetterHtml=_this.text();
            LetterBox.html(letterListOne).fadeIn();//此处是字母提示面板淡入淡出

            Initials.css({'background':'rgba(145,145,145,0.6)'});           
             setTimeout(() => {
                Initials.css('background','rgba(145,145,145,0)');
                LetterBox.fadeOut();
            },500);

            let _index =index; 
            if (_index == 0) {
               $j(".swiper-wrapper").css({
                  transform: "translate3d(0px, 0px, 0px)"
                });
              $j(".baseSwiperScrollBox").scrollTop(0); //点击第一个滚到顶部
            } else {
              if(letterListOne=="I"||letterListOne=="O"||letterListOne=="U"||letterListOne=="V"){
              }else{
              if ($j("#" + letterListOne).length > 0) {
                let LetterTop = $j("#" + letterListOne).position().top;
                $j(".swiper-wrapper").css({
                  transform: "translate3d(0px, 0px, 0px)"
                });
                $j(".baseSwiperScrollBox").animate(
                  { scrollTop: LetterTop } ,0
                );
              }
              }
            }
    },
    close: function() {
      this.modalType = false;
      this.$emit("closeDialog");
    },
    open: function() {
       this.initials();
      this.modalType = true;

    },
    // 汉字拼音首字母列表 本列表包含了20902个汉字,用于配合 ToChineseSpell
    //函数使用,本表收录的字符的Unicode编码范围为19968至40869, XDesigner 整理

    //参数,中文字符串
    //返回值:拼音首字母串数组
    makePy(str) {
      if (typeof str != "string")
        throw new Error(-1, "函数makePy需要字符串类型参数!");
      let arrResult = new Array(); //保存中间结果的数组
      for (let i = 0, len = str.length; i < len; i++) {
        //获得unicode码
        let ch = str.charAt(i);
        //检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理
        arrResult.push(this.checkCh(ch));
      }
      //处理arrResult,返回所有可能的拼音首字母串数组
      return this.mkRslt(arrResult);
    },
    checkCh(ch) {
      let uni = ch.charCodeAt(0);
      //如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
      if (uni > 40869 || uni < 19968) {
         return ch;
      } //dealWithOthers(ch);
      //这里排查无法识别的多音字  只需要在定义的数组中把他的首字母定义为正确的就行了
      // if (ch == "长") {
      // console.log(uni);
      // }
      //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
      return this.oMultiDiff[uni]
        ? this.oMultiDiff[uni]
        : this.strChineseFirstPY.charAt(uni - 19968);
    },
    mkRslt(arr) {
      let arrRslt = [""];
      for (let i = 0, len = arr.length; i < len; i++) {
        let str = arr[i];
        let strlen = str.length;
        if (strlen == 1) {
          for (let k = 0; k < arrRslt.length; k++) {
            arrRslt[k] += str;
          }
        } else {
          let tmpArr = arrRslt.slice(0);
          arrRslt = [];
          for (let k = 0; k < strlen; k++) {
            //复制一个相同的arrRslt
            let tmp = tmpArr.slice(0);
            //把当前字符str[k]添加到每个元素末尾
            for (let j = 0; j < tmp.length; j++) {
              tmp[j] += str.charAt(k);
            }
            //把复制并修改后的数组连接到arrRslt上
            arrRslt = arrRslt.concat(tmp);
          }
        }
      }
      return arrRslt;
    },

    asc_sort(a, b) {
      return this.makePy(
        $j(b)
          .find(".num_name")
          .text()
          .charAt(0)
      )[0].toUpperCase() <
        this.makePy(
          $j(a)
            .find(".num_name")
            .text()
            .charAt(0)
        )[0].toUpperCase()
        ? 1
        : -1;
    },
    initials() {
      //首字母排序
      let SortList = $j(".sort_list");
      let SortBox = $j(".sort_box");
      SortList.sort(this.asc_sort).appendTo(".sort_box"); //按首字母排序

      let initialsArr = [];
      let num = 0;
      let component = this;
      SortList.each(function(i) {
        let initial = component
          .makePy(
            $j(this)
              .find(".num_name")
              .text()
              .charAt(0)
          )[0]
          .toUpperCase();
        if (initial >= "A" && initial <= "Z") {
          if (initialsArr.indexOf(initial) === -1) initialsArr.push(initial);
        } else {
          num++;
        }
      });

      $j.each(initialsArr, function(index, value) {
        //添加首字母标签
        SortBox.append(
          '<div class="sort_letter" id="' + value + '">' + value + "</div>"
        );
      });
      if (num != 0) {
        SortBox.append('<div class="sort_letter" id="default">#</div>');
      }

      for (let i = 0; i < SortList.length; i++) {
        //插入到对应的首字母后面
        let letter = component
          .makePy(
            SortList.eq(i)
              .find(".num_name")
              .text()
              .charAt(0)
          )[0]
          .toUpperCase();
        switch (letter) {
          case "A":
            $j("#A").after(SortList.eq(i));
            break;
          case "B":
            $j("#B").after(SortList.eq(i));
            break;
          case "C":
            $j("#C").after(SortList.eq(i));
            break;
          case "D":
            $j("#D").after(SortList.eq(i));
            break;
          case "E":
            $j("#E").after(SortList.eq(i));
            break;
          case "F":
            $j("#F").after(SortList.eq(i));
            break;
          case "G":
            $j("#G").after(SortList.eq(i));
            break;
          case "H":
            $j("#H").after(SortList.eq(i));
            break;
          case "I":
            $j("#I").after(SortList.eq(i));
            break;
          case "J":
            $j("#J").after(SortList.eq(i));
            break;
          case "K":
            $j("#K").after(SortList.eq(i));
            break;
          case "L":
            $j("#L").after(SortList.eq(i));
            break;
          case "M":
            $j("#M").after(SortList.eq(i));
            break;
          case "N":
            $j("#N").after(SortList.eq(i));
            break;
          case "O":
            $j("#O").after(SortList.eq(i));
            break;
          case "P":
            $j("#P").after(SortList.eq(i));
            break;
          case "Q":
            $j("#Q").after(SortList.eq(i));
            break;
          case "R":
            $j("#R").after(SortList.eq(i));
            break;
          case "S":
            $j("#S").after(SortList.eq(i));
            break;
          case "T":
            $j("#T").after(SortList.eq(i));
            break;
          case "U":
            $j("#U").after(SortList.eq(i));
            break;
          case "V":
            $j("#V").after(SortList.eq(i));
            break;
          case "W":
            $j("#W").after(SortList.eq(i));
            break;
          case "X":
            $j("#X").after(SortList.eq(i));
            break;
          case "Y":
            $j("#Y").after(SortList.eq(i));
            break;
          case "Z":
            $j("#Z").after(SortList.eq(i));
            break;
          default://这里你可以定义那些下划线等开头的非正常首字母开头的选项
            $j("#default").before(SortList.eq(i));
            break;
        }
      }

    }
  },
  beforeDestroy: function() {
    this.modalType = false;
  }
};
</script>

CSS：

下面的CSS没啥说的，浏览器选中自己改改吧：

<style lang="scss">
@import "../assets/css/common.scss";

ul li {
  list-style: none;
}

header {
  width: 100%;
  height: 45px;
  background: #ececea;
  border-bottom: 1px solid #ddd;
}
header.fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}
.header {
  margin: 0 20px;
  text-align: center;
  color: #4e4a49;
  font-size: 1em;
  height: 45px;
  line-height: 45px;
  position: relative;
}


.letter{
  font-size: 19px;
}
.letter-popular {
  // @include absolute-position(100px,100px,50px,0px);
  @media screen and (min-width: 1360px) {
    font-size: 20px;
  }
 width: 630px;
  height: 32px;
  background: rgba(0, 65, 119, 0.04);
  margin-left: 43px;
  line-height: 30px;
  padding-left: 20px;
  font-size: 1px;
  border-bottom: 1px solid #ddd;
}

.sort_box {
  width: 100%;
  // overflow-x: hidden;
  // overflow-y: scroll;
  height: 628px;
}

.sort_list {
  padding: 10px 60px 10px 80px;
  height: 60px;
  width: 630px;
  margin-left: 43px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}

.sort_list_popular {
  padding: 10px 60px 10px 80px;
  height: 60px;
  width: 630px;
  margin-left: 43px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}
.sort_list .num_name {
  color: #000;
  margin-left: -54px;
  @media screen and (min-width: 1360px) {
    font-size: 24px;
  }
}
.num_name_popular{
    color: #000;
  margin-left: -54px;
    @media screen and (min-width: 1360px) {
    font-size: 24px;
  }
}
#letter{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    font-size: 75px;
    color: #555;
    text-align: center;
    line-height: 100px;
    background: rgba(145,145,145,0.6);
    position: fixed;
    left: 38%;
    top: 50%;
    margin:-50px 0px 0px -50px;
    z-index: 999;
    display: none;
}
.sort_letter {
  width: 630px;
  height: 32px;
  background: rgba(0, 65, 119, 0.04);
  margin-left: 43px;
  line-height: 30px;
  padding-left: 20px;
  font-size: 14px;
   @media screen and (min-width: 1360px) {
    font-size: 18px;
   }
  border-bottom: 1px solid #ddd;
}
.initialsClass {
  top: 285px;
  width: 30px;
  text-align: center;
  font-size: 21px;
     @media screen and (min-width: 1360px) {
    font-size: 25px;
   }
  background: rgba(145, 145, 145, 0);
  position: fixed;
  left: 942px;
  z-index: 999;
    @media screen and (min-width: 1360px) {
 top:240px;
 }
}
.initialsClass li img {
  width: 14px;
}

.dialog-modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 1280px;
  height: 1024px;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
  overflow: hidden;
  @media screen and (min-width: 1360px) {
    width: 1360px;
  }
}
.dialog-modal-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  overflow: hidden;
}

.dialog-modal {
  background: white;
  box-shadow: 0 10px 30px 0 #3b4964;
  border-radius: 8px;
  @include absolute-position(736px,740px,272px,142px);
  @media screen and (min-width: 1360px) {
    height: 600px;
  }
}
.titleMsg {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 50%;
  float: left;
}
.titileImg {
  position: relative;
  left: 664px;
  top: 40px;
}

.header {
  height: 15%;
  color: rgba(118, 137, 182, 0.6);
  font-size: 28px;
  font-family: Microsoft YaHei;
  text-align: left;
  letter-spacing: 0;
  @include common-font(28,f);
}

.line-separator {
  width: 656px;
  height: 1px;
  opacity: 0.3;
  position: absolute;
  top: 100px;
  left: 40px;
  @media screen and (min-width: 1360px) {
    top: 75px;
  }
}

.scrollBox {
  @media screen and (min-width: 1360px) {
    height: 510px;
  }
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
</style>

脚注

网上找了好久都没有找到VUE实现通讯录的功能，其实自己写也差不多，希望后期有人去掉jquery实现全部的vue实现1.