<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="container">
        <el-row>
          <el-col :span="4" class="sideBar">
            <el-link :underline="false" href="">京东秒杀</el-link>
            <el-link :underline="false" href="">特色优选</el-link>
            <el-link :underline="false" href="">频道广场</el-link>
            <el-link :underline="false" href="">为你推荐</el-link>
            <el-link :underline="false" href="">
              <i class="el-icon-user-solid"></i>
              客服
            </el-link>
            <el-link :underline="false" href="">
              <i class="el-icon-edit"></i>
              反馈
            </el-link>
            <el-link :underline="false" href="">
              <i class="el-icon-arrow-up"></i>
              顶部
            </el-link>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="top1">
            <div class="w_1200">
              <el-col class="top1_img" v-if="show">
                <el-col class="top1_close" @click.native="close()">X</el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="top2">
            <div class="w_1200">
              <el-col :span="6" class="top2_left">
                <div class="wrap_location">
                  <i class="el-icon-location"></i>
                  <span class="location">{{ locationName }}</span>
                  <el-col :span="8" class="location_map">
                    <span class="location_bar"></span>
                    <span class="location_name" v-for="(item, index) in locationList" :key="index">
                      <el-link :underline="false" class="location_link" @click="clickName(index, item.name)" :class="{ location_active: nameIndex == index }">{{
                        item.name
                      }}</el-link>
                    </span>
                    <el-col :span="24" class="jd_location">
                      <el-col :span="24" class="exclusive">
                        <el-col :span="24" class="xian"></el-col>
                        <div class="title">地区专享版本</div>
                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国港澳</el-link></el-col>
                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">中国台湾</el-link></el-col>
                        <el-col :span="12"><el-link class="exclusive_link" :underline="false">京东全球</el-link></el-col>
                      </el-col>
                      <el-col :span="24" class="exclusive">
                        <el-col :span="24" class="xian"></el-col>
                        <div class="title">Available Sites</div>
                        <el-col :span="12"
                          ><el-link class="exclusive_link" :underline="false">
                            <span class="exclusive_img img1"></span><span class="contry_name">Global Site</span>
                          </el-link></el-col
                        ><el-col :span="12"
                          ><el-link class="exclusive_link" :underline="false">
                            <span class="exclusive_img img2"></span><span class="contry_name">Global Site</span>
                          </el-link></el-col
                        ><el-col :span="12"
                          ><el-link class="exclusive_link" :underline="false">
                            <span class="exclusive_img img3"></span><span class="contry_name">Global Site</span>
                          </el-link></el-col
                        ><el-col :span="12"
                          ><el-link class="exclusive_link" :underline="false">
                            <span class="exclusive_img img4"></span><span class="contry_name">Global Site</span>
                          </el-link></el-col
                        ><el-col :span="12"
                          ><el-link class="exclusive_link" :underline="false">
                            <span class="exclusive_img img5"></span><span class="contry_name">Global Site</span>
                          </el-link></el-col
                        >
                      </el-col>
                    </el-col>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="15" class="top2_right">
                <el-col :span="5" class="to2_login">
                  <el-link :underline="false" class="hello">你好，请登录<span style="margin-left:5px;color:#f10215">免费注册</span></el-link>
                </el-col>
                <el-col :span="19" class="menu">
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">我的订单</span>
                  </p>
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">我的京东 <i class="el-icon-arrow-down"></i></span>
                    <el-col :span="3" class="myJd">
                      <span class="jdBar"></span>
                      <el-col :span="24">
                        <el-col :span="24" v-for="(item, index) in myJdList" :key="index" class="myJd_text">
                          <el-col :span="12" v-for="(val, index1) in item.con" :key="index1">
                            <el-link :underline="false" :href="val.url">
                              <span>{{ val.name }}</span>
                            </el-link>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-col>
                  </p>
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">京东会员</span>
                  </p>
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">企业采购 <i class="el-icon-arrow-down"></i></span>
                    <el-col :span="3" class="myJd procur">
                      <span class="jdBar"></span>
                      <el-col :span="24" class="myJd_text">
                        <el-col :span="12" v-for="(item, index) in procurList" :key="index">
                          <el-link :underline="false">{{ item.name }}</el-link>
                        </el-col>
                      </el-col>
                    </el-col>
                  </p>
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">客户服务<i class="el-icon-arrow-down"></i></span>
                    <el-col :span="3" class="myJd customer">
                      <span class="jdBar customerBar"></span>
                      <el-col :span="24">
                        <el-col :span="24" v-for="(item, index) in customerList" :key="index" class="myJd_text">
                          <el-col :span="24" class="title">{{ item.title }}</el-col>
                          <el-col :span="12" v-for="(val, index1) in item.con" :key="index1">
                            <el-link :underline="false" :href="val.url">
                              <span>{{ val.name }}</span>
                            </el-link>
                          </el-col>
                        </el-col>
                      </el-col>
                    </el-col>
                  </p>
                  <p>
                    <span class="shu"></span>
                    <span class="menuName">网站导航<i class="el-icon-arrow-down"></i></span>
                    <el-col :span="24" class="myJd website">
                      <span class="jdBar websiteBar"></span>
                      <el-row :gutter="20">
                        <el-col :span="6" v-for="(item, index) in websiteList" :key="index" class="myJd_text">
                          <el-col :span="24" class="title">{{ item.title }}</el-col>
                          <el-col :span="6" v-for="(val, index1) in item.con" :key="index1">
                            <el-link :underline="false" :href="val.url">
                              <span>{{ val.name }}</span>
                            </el-link>
                          </el-col>
                        </el-col>
                      </el-row>
                      <!-- </el-col> -->
                    </el-col>
                  </p>
                  <p class="phoneJd">
                    <span class="shu"></span>
                    <span class="menuName">手机京东</span>
                    <el-col :span="3" class="er_code">
                      <img src="../assets/er.png" style="width:100%;height: 100%;" />
                      <i class="el-icon-caret-top"></i>
                    </el-col>
                    <el-col :span="9" class="code_con">
                      <i class="el-icon-caret-top big"></i>
                      <el-col :span="24" v-for="(item, index) in codeConList" :key="index" class="code_text">
                        <el-image class="code_img" :src="item.url" style="width:100% height: 100%"></el-image>
                        <el-col :span="12" class="code_choose">
                          <p class="pp" style="font-weight:bold;color:#666">{{ item.title }}</p>
                          <p class="pp" style="font-weight:bold;color:#666" v-if="item.website">{{ item.website }}</p>
                          <p class="pp" style="color:#f10214;" v-if="item.con">{{ item.con }}</p>
                          <p class="pp" v-if="item.iconImg">
                            <el-link :underline="false" :href="item.iconUrl"></el-link>
                            <el-link :underline="false" :href="item.iconUrl"></el-link>
                            <el-link :underline="false" :href="item.iconUrl"></el-link>
                          </p>
                        </el-col>
                      </el-col>
                    </el-col>
                  </p>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="top3">
            <div class="w_1200">
              <el-col :span="3">
                <el-link href="" :underline="false" class="top3_logo"> </el-link>
              </el-col>
              <el-col :span="16">
                <el-col :span="24" class="search">
                  <!-- <el-col :span="18" class="search_left"> -->
                  <el-input class="search_left" placeholder="请输入内容" v-model="input3">
                    <i slot="append" class="el-icon-camera"></i>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                  <!-- </el-col> -->
                  <el-col :span="6" class="cart">
                    <i class="el-icon-shopping-cart-2"></i>
                    <span>{{ num }}</span>
                    <span>我的购物车</span>
                  </el-col>
                  <el-col :span="24" class="searchLine">
                    <el-col :span="2" v-for="(item, index) in serachTextList" :key="index" class="search_text">
                      <el-link :href="item.url" :underline="false" class="search_link">{{ item.text }}</el-link>
                    </el-col>
                  </el-col>
                  <el-col :span="24" class="serach_nav">
                    <span class="seckill">秒杀</span>
                    <el-link class="discount" v-for="(item, index) in searchNavList" :key="index" :href="item.url" :underline="false">{{ item.text }}</el-link>
                  </el-col>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle1">
            <div class="w_1200">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="4"
                    ><div class="middle_left1">
                      <el-col :span="24" class="bigShow">
                        <el-col :span="24" v-for="(item, index) in bigShowList" :key="index" class="bigshowCon">
                          <el-row :gutter="0">
                            <el-col :span="19">
                              <span v-for="(item1, index1) in item.showTitleList" :key="index1" class="bigShowTitle">
                                {{ item1.title }}<span style="margin-left:8px">></span>
                              </span>
                              <el-col :span="24" class="showText">
                                <el-col :span="24" v-for="(item2, index2) in item.showTextList" :key="index2">
                                  <el-link :href="item.url" :underline="false" class="showText_title"
                                    >{{ item2.title }}<i class="el-icon-arrow-right"></i
                                  ></el-link>
                                  <el-link :href="item.url" :underline="false" v-for="(val, index3) in item2.con" :key="index3" class="showText_con">{{
                                    val
                                  }}</el-link>
                                </el-col>
                              </el-col>
                            </el-col>
                            <el-col :span="5" class="bigShow_img">
                              <!-- <el-col v-for="(item4, index4) in item.showImgList" :key="index4"> -->
                              <el-link v-for="(item4, index4) in item.showImgList" :key="index4" :href="item4.url" :underline="false" class="showImg"
                                ><el-image :src="item4.imgUrl" style="width:100%;height:100%"></el-image
                              ></el-link>
                              <!-- </el-col> -->
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="electric" v-for="(item, index) in middleNavList" :key="index" @mouseenter.native="bigshowEnter(index)">
                        <el-link :href="item.url" :underline="false" v-for="(val, index1) in item.text" :key="index1" class="electric_text"
                          >{{ val }}<span class="slant">/</span></el-link
                        >
                      </el-col>
                    </div>
                  </el-col>
                  <el-col :span="12"
                    ><div>
                      <el-carousel height="470px">
                        <el-carousel-item v-for="(item, index) in swiperList" :key="index">
                          <el-link :href="item.link" :underline="false"><el-image :src="item.url" style="width:100%;height:100%"></el-image></el-link>
                        </el-carousel-item>
                      </el-carousel></div
                  ></el-col>
                  <el-col :span="4"
                    ><div>
                      <el-link :href="link1" :underline="false">
                        <el-image :src="img1Url" class="img1"></el-image>
                      </el-link>
                      <el-row :gutter="0">
                        <el-col :span="24" style="margin-top: 4px;">
                          <el-carousel height="150px">
                            <el-carousel-item v-for="(item, index) in imgList" :key="index">
                              <!-- <el-image :src="item.url" style="width:190px;height:150px"></el-image> -->
                              <el-link :href="item.link" :underline="false">
                                <el-image :src="item.url" style="width:190px;height:150px"></el-image>
                              </el-link>
                            </el-carousel-item>
                          </el-carousel>
                        </el-col>
                      </el-row>
                      <el-link :href="link2" :underline="false">
                        <el-image :src="img1Url2" class="img1" style="margin-top:10px"></el-image>
                      </el-link>
                    </div>
                  </el-col>
                  <el-col :span="4"
                    ><div>
                      <el-row :gutter="0">
                        <el-col :span="24" class="middle_right">
                          <el-col :span="6">
                            <el-link class="jd_dog" :href="dogHref" :underline="false"
                              ><el-image :src="dogUrl" style="width:100%;height:100%"></el-image
                            ></el-link>
                          </el-col>
                          <el-col :span="18" class="right_link">
                            <el-link href="" :underline="false" class="hi">hi~欢迎逛京东</el-link>
                            <p class="right_login">
                              <el-link href="" :underline="false">登录</el-link>
                              <span>|</span>
                              <el-link href="" :underline="false">注册</el-link>
                            </p>
                          </el-col>
                          <el-col :span="24" style="padding-bottom: 10px;border-bottom:1px solid #eee">
                            <el-link href="" :underline="false" class="newUser">
                              <span>新人福利</span>
                              <span>PLUS会员</span>
                            </el-link>
                          </el-col>
                          <el-col :span="24" class="jd_news">
                            <el-col :span="17" class="right_title">京东快报</el-col>
                            <el-col :span="7" class="right_more">
                              <el-link href="" :underline="false"
                                >更多
                                <i class="el-icon-arrow-right"></i>
                              </el-link>
                            </el-col>
                            <el-col :span="24" class="news">
                              <el-col :span="24" v-for="(item, index) in rightNewsList" :key="index">
                                <span class="new_title">{{ item.title }}</span
                                ><el-link href="" :underline="false" class="rightNews">{{ item.news }}</el-link>
                              </el-col>
                            </el-col>
                          </el-col>
                          <el-col :span="24" class="jd_icon">
                            <el-col :span="8" v-for="(item, index) in rightIconList" :key="index" class="samllIcon" @mouseenter.native="showActive(index)">
                              <el-link :href="item.href" :underline="false">
                                <span class="iconCon">
                                  <el-image :src="item.imgSrc1" style="width:100%;height:100%"></el-image>
                                  <!-- <el-image style="width:100%;height:100%;display: none;" :src="item.imgSrc2"></el-image> -->
                                </span>
                                <p class="iconText">{{ item.text }}</p>
                              </el-link>
                            </el-col>
                            <el-col :span="24" class="rightBox">
                              <el-col :span="24" class="iconBox">
                                <el-link
                                  :href="item.href"
                                  :class="{ iconLink1_active: iconLinkData == index }"
                                  @mouseenter.native="linkHover(index)"
                                  class="iconTitle"
                                  :underline="false"
                                  v-for="(item, index) in iconTitleList"
                                  :key="index"
                                  >{{ item.text }}</el-link
                                >
                              </el-col>
                              <el-col :span="24" class="prepaid" v-if="iconLinkData === 0">
                                <el-link
                                  href=""
                                  :underline="false"
                                  class="links"
                                  v-for="(item, index) in iconLinkList"
                                  :key="index"
                                  @mouseenter.native="linkClick(index)"
                                  :class="{ icon1_active: hoverData == index }"
                                  >{{ item.link }}</el-link
                                >
                                <el-form :model="prepaidForm" label-width="40px">
                                  <el-form-item label="号码" class="rightFormItem">
                                    <el-input v-model="prepaidForm.phone" class="phone" placeholder="移动/联通/电信"></el-input>
                                  </el-form-item>
                                  <div class="rechargeCon" v-if="hoverData === 0">
                                    <el-form-item label="面值" class="rightFormItem">
                                      <el-select v-model="prepaidForm.faceValue" placeholder="请选择活动区域" class="rightSelect">
                                        <el-option v-for="(item, index) in faceValueList" :label="item.text" :value="item.text" :key="index"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <p class="money">¥ 98.0 - ¥100.0</p>
                                    <p class="recharge">快速充值</p>
                                    <el-link href="" :underline="false" class="coupons">抢90减40元话费券</el-link>
                                    <p class="close1">X</p>
                                  </div>
                                  <div class="rechargeCon" v-else>
                                    <el-form-item label="流量" class="rightFormItem">
                                      <el-select v-model="prepaidForm.loactionValue" placeholder="请选择活动区域" class="rightSelect spcile">
                                        <el-option v-for="(item, index) in contryOption" :label="item.text" :value="item.text" :key="index"></el-option>
                                      </el-select>
                                      <el-select v-model="prepaidForm.faceValue" placeholder="请选择活动区域" class="rightSelect spcile">
                                        <el-option v-for="(item, index) in flowOption" :label="item.text" :value="item.text" :key="index"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <p class="money">¥ 7.5 - ¥10</p>
                                    <p class="recharge" style="display:inline-block">快速充值</p>
                                    <el-link href="" :underline="false" class="coupons" style="margin-left:5px"> APP Store充值卡</el-link>
                                    <p class="close1">X</p>
                                  </div>
                                </el-form>
                              </el-col>
                              <el-col :span="24" class="prepaid" v-else-if="iconLinkData === 1">
                                <el-link
                                  style="width:30%;margin-right:0px;margin-bottom:3px"
                                  href=""
                                  :underline="false"
                                  class="links"
                                  v-for="(item, index) in planeTicketList"
                                  :key="index"
                                  @mouseenter.native="linkClick2(index)"
                                  :class="{ icon1_active: hoverData2 == index }"
                                  >{{ item.link }}</el-link
                                >
                                <el-form :model="prepaidForm2" label-width="40px">
                                  <el-form-item class="rightFormItem" style="margin-bottom:5px" v-if="hoverData2 === 0 || hoverData2 === 1">
                                    <el-radio-group v-model="prepaidForm2.oneWay">
                                      <el-radio label="单程"></el-radio>
                                      <el-radio label="往返"></el-radio>
                                    </el-radio-group>
                                  </el-form-item>
                                  <div class="rechargeCon" v-if="hoverData2 === 0 || hoverData2 === 1">
                                    <el-form-item label="出发" class="rightFormItem plane">
                                      <el-select v-model="prepaidForm2.s_contry" placeholder="请选择" class="rightSelect plane2">
                                        <el-option v-for="(item, index) in locationList" :label="item.name" :value="item.name" :key="index"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="到达" class="rightFormItem plane">
                                      <el-select v-model="prepaidForm2.e_contry" placeholder="请选择" class="rightSelect plane2">
                                        <el-option v-for="(item, index) in locationList" :label="item.name" :value="item.name" :key="index"></el-option>
                                      </el-select>
                                      <!-- <p class="countrImg"><el-image  :src="countrImg"></el-image></p> -->
                                      <el-image class="countrImg" :src="countrImg" @click.native="changeLocation()"></el-image>
                                    </el-form-item>
                                    <el-form-item label="日期" class="rightFormItem" style="margin-top: 10px;" v-if="prepaidForm2.oneWay == '单程'">
                                      <el-date-picker type="date" placeholder="选择日期" v-model="prepaidForm2.date1" class="rightSelect date"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="日期" class="rightFormItem" style="margin-top: 10px;" v-if="prepaidForm2.oneWay == '往返'">
                                      <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="prepaidForm2.date1"
                                        class="rightSelect date2"
                                      ></el-date-picker>
                                      <span class="back">返程</span>
                                    </el-form-item>
                                    <p class="recharge" style="display:inline-block">机票查询</p>
                                    <el-link v-if="hoverData2 === 0" href="" :underline="false" class="coupons" style="margin-left:5px"
                                      >当季热门特惠机票</el-link
                                    >
                                    <el-link v-if="hoverData2 === 1" href="" :underline="false" class="coupons" style="margin-left:5px">国际机票任性搜</el-link>
                                    <p class="close1">X</p>
                                  </div>
                                  <div class="rechargeCon" v-else-if="hoverData2 === 2">
                                    <span class="preferential"><el-image :src="plane1Src" style="width:100%;height:100%"></el-image></span>
                                    <span class="preferential" style="margin-left:10px"
                                      ><el-image :src="plane2Src" style="width:100%;height:100%"></el-image
                                    ></span>
                                    <p class="close1">X</p>
                                  </div>
                                </el-form>
                              </el-col>
                              <el-col :span="24" class="prepaid" v-else-if="iconLinkData === 2">
                                <el-link
                                  style="margin-right:0px;margin-bottom:3px"
                                  href=""
                                  :underline="false"
                                  class="links"
                                  v-for="(item, index) in hotelList"
                                  :key="index"
                                  @mouseenter.native="linkClick3(index)"
                                  :class="{ icon1_active: hoverData3 == index }"
                                  >{{ item.link }}</el-link
                                >
                                <div class="rechargeCon" v-if="hoverData3 === 0">
                                  <el-form :model="prepaidForm3" label-width="60px">
                                    <el-form-item label="目的地" class="rightFormItem hotel">
                                      <el-input v-model="prepaidForm3.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="入住日期" class="rightFormItem hotel" style="margin-top: 10px;">
                                      <el-date-picker type="date" placeholder="选择日期" v-model="prepaidForm3.date1" class="rightSelect date"></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="离店日期" class="rightFormItem hotel" style="margin-top: 10px;">
                                      <el-date-picker type="date" placeholder="选择日期" v-model="prepaidForm3.date" class="rightSelect date"></el-date-picker>
                                    </el-form-item>

                                    <p class="hotelTag">酒店/商圈/地标</p>
                                    <p class="recharge" style="display:inline-block">酒店查询</p>
                                    <el-link href="" :underline="false" class="coupons" style="margin-left:5px">订酒店上京东</el-link>
                                    <p class="close1">X</p>
                                  </el-form>
                                </div>
                                <div class="rechargeCon" v-else>
                                  <span class="preferential"><el-image :src="plane1Src" style="width:100%;height:100%"></el-image></span>
                                  <span class="preferential" style="margin-left:10px"
                                    ><el-image :src="plane2Src" style="width:100%;height:100%"></el-image
                                  ></span>
                                  <p class="close1">X</p>
                                </div>
                              </el-col>
                            </el-col>
                          </el-col>
                        </el-col>
                      </el-row>
                    </div></el-col
                  >
                </el-row>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle2">
            <div class="w_1200">
              <el-col :span="24">
                <el-col :span="3" class="count_down">
                  <el-link :underline="false" href="">
                    <el-image :src="countSrc" style="width:100%;height: 100%"></el-image>
                    <p class="jdDown_title">京东秒杀</p>
                    <p class="jd_in">16:00 <span>进场 倒计时</span></p>
                    <p class="jdDown">
                      <span class="jd_hour date">00</span><span class="spot">:</span> <span class="jd_minite date">00</span><span class="spot">:</span>
                      <span class="jd_miao date">16</span>
                    </p>
                  </el-link>
                </el-col>
                <el-col :span="3" class="middle2_right">
                  <el-link :underline="false" href="">
                    <el-carousel height="220px" @change="swiperChange">
                      <el-carousel-item v-for="(item, index) in rightSwiperList" :key="index">
                        <el-image :src="item.src"></el-image>
                      </el-carousel-item>
                      <div v-if="initialIndex == 0" class="middle2Right_text">
                        <p>美妆品类盛典</p>
                        <p>低至19.9元</p>
                        <p>品类秒杀<i class="el-icon-arrow-right"></i></p>
                      </div>
                      <div v-else class="middle2Right_text">
                        <p>珠宝类类盛典</p>
                        <p>低至1900元</p>
                        <p>大牌抢购<i class="el-icon-arrow-right"></i></p>
                      </div>
                    </el-carousel>
                  </el-link>
                </el-col>
                <el-col :span="18" class="mideel2_swiper">
                  <el-carousel height="240px" :autoplay="false">
                    <el-carousel-item v-for="(item, index) in middle2List" :key="index">
                      <el-col :span="6" v-for="(val, index1) in item.imgList" :key="index1" class="middel2Con">
                        <el-link :underline="false" :href="val.link" class="middel2Link">
                          <span>
                            <el-image :src="val.imgUrl"></el-image>
                          </span>
                          <p class="title">{{ val.title }}</p>
                          <el-col :span="24" class="price">
                            <el-col :span="12" class="text1">¥ {{ val.price }}</el-col>
                            <el-col :span="12" class="text2"
                              >¥ {{ val.oldPrice }}
                              <span class="xian"></span>
                            </el-col>
                          </el-col>
                        </el-link>
                      </el-col>
                    </el-carousel-item>
                  </el-carousel>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle3">
            <div class="w_1200">
              <el-col :span="12" class="middle3-1">
                <!-- <el-col :span="24" class="middel3_title"> -->
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >每日特价<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                  <!-- <span class="arrow"><i class="el-icon-arrow-right"></i></span> -->
                </p>
                <el-col :span="24" class="middle3Tab">
                  <template>
                    <el-tabs v-model="activeName">
                      <el-tab-pane :label="item.tabTitle" :name="item.name" v-for="(item, index) in dailyList" :key="index"
                        ><el-col :span="7" class="middle3Con">
                          <el-link :underline="false" :href="item.href">
                            <p class="days">{{ item.days }}</p>
                            <el-image :src="item.imgSrc" class="imgSrc"></el-image>
                            <p class="imgTitle">{{ item.imgTitle }}</p>
                            <p class="price">
                              <span>¥ {{ item.price }}</span>
                              <span>¥ {{ item.oldPrice }}<span class="xian"></span></span>
                            </p>
                            <p class="num">
                              已抢<span>{{ item.num }}</span
                              >件
                            </p></el-link
                          ></el-col
                        >
                        <el-col :span="17" class="middle3Con2">
                          <el-col :span="12" class="textCon" v-for="(val, index1) in item.textConList" :key="index1">
                            <el-link :underline="false" :href="val.href">
                              <el-col :span="12" class="conImg">
                                <el-image :src="val.imgSrc" style="100%;height:100%"></el-image>
                                <p class="footText">{{ val.footText }}</p>
                              </el-col>
                              <el-col :span="12" class="conText">
                                <p>{{ val.title }}</p>
                                <p>¥ {{ val.price }}</p>
                                <p>¥ {{ val.oldPrice }}<span class="xian"></span></p>
                                <p v-if="val.num">
                                  以抢<span>{{ val.num }}</span>
                                </p>
                              </el-col>
                            </el-link>
                          </el-col>
                        </el-col>
                      </el-tab-pane>
                      <!-- <el-tab-pane label="美食" name="second">配置管理</el-tab-pane>
                      <el-tab-pane label="百货" name="third">角色管理</el-tab-pane>
                      <el-tab-pane label="个护" name="fourth">个护</el-tab-pane>
                      <el-tab-pane label="预告" name="five">预告</el-tab-pane> -->
                    </el-tabs>
                  </template>
                </el-col>
                <!-- </el-col> -->
              </el-col>
              <el-col :span="12" class="middle3-2">
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >每日特价<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                </p>
                <el-col :span="24" class="middle3-2_con">
                  <el-col :span="4" class="left">
                    <el-link :underline="false" href="">
                      <el-image :src="leftSrc" style="widtgh: 70px;height:35px"></el-image>
                      <p>臣源水泵闪购专场</p>
                      <p>每满300减30<span>|</span>仅剩<span>2</span>天</p>
                      <el-image :src="leftSrc2" style="width: 130px;height:130px"></el-image>
                    </el-link>
                  </el-col>
                  <el-col :span="20" class="right">
                    <el-col :span="12" v-for="(item, index) in rightImgList" :key="index" class="rightCon">
                      <el-link :underline="false" :href="item.link">
                        <el-image :src="item.imgSrc" style="width:100px;height:50px"></el-image>
                        <p>{{ item.title }}</p>
                      </el-link>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle4">
            <div class="w_1200">
              <el-col :span="24" class="middle4Con">
                <el-col :span="4" class="findGoods">
                  <el-link :underline="false" href="">
                    <el-image :src="findSrc" class="findCon"></el-image>
                    <span class="newLife"
                      >探索新生活<span class="arrow"><i class="el-icon-arrow-right"></i></span
                    ></span>
                  </el-link>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middel5">
            <div class="w_1200">
              <el-col :span="6" class="con left1">
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >新品首发<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                </p>
                <el-col :span="24" class="cardSwiper">
                  <template>
                    <el-carousel :interval="4000" type="card" height="250px" @change="cardSwiper">
                      <el-carousel-item v-for="(item, index) in cardList" :key="index">
                        <el-col :span="24" class="cradCon">
                          <el-link :underline="false" href="">
                            <el-image :src="item.imgSrc" style="width: 130px;height: 130px"></el-image>
                            <template v-if="carIndex == index">
                              <p class="title">{{ item.title }}</p>
                              <p class="more">{{ item.more }}</p>
                              <p class="price">¥ {{ item.price }}起</p>
                            </template>
                          </el-link>
                        </el-col>
                        <!-- <el-image :src="item.imgSrc"></el-image> -->
                      </el-carousel-item>
                    </el-carousel>
                  </template>
                </el-col>
              </el-col>
              <el-col :span="6" class="con left2">
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >排行榜<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                </p>
                <el-col :span="24" class="tabs">
                  <template>
                    <el-tabs v-model="activeName2" @tab-click="handleClick1">
                      <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="item.name">
                        <el-col :span="24" class="tabsCon">
                          <el-link :underline="false" :href="val.link" v-for="(val, index1) in item.tabCon" :key="index1">
                            <el-col :span="5" class="top">
                              <el-image :src="val.topImg" style="width: 28.8px;height: 40.8px"> </el-image>
                              <span class="ranking">{{ val.ranking }}</span>
                              <span class="topText">TOP</span>
                            </el-col>
                            <el-col :span="7" class="img">
                              <el-image :src="val.conImg" style="width:70px;height:70px"></el-image>
                            </el-col>
                            <el-col :span="12" class="title">
                              {{ val.title }}
                            </el-col>
                          </el-link>
                        </el-col>
                      </el-tab-pane>
                      <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
                    </el-tabs>
                  </template>
                </el-col>
              </el-col>
              <el-col :span="6" class="con left3">
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >逛好店<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                </p>
                <el-col :span="24" class="left3Con">
                  <el-col :span="24" class="support" v-for="(item, index) in supportList" :key="index">
                    <el-link :underline="false" :href="item.link">
                      <el-col :span="15" class="left">
                        <p class="title">{{ item.title }}</p>
                        <p class="tab">
                          <span>{{ item.support }}</span
                          ><span>{{ item.category }}</span>
                        </p>
                        <p class="num">{{ item.num }}万人关注</p>
                      </el-col>
                      <el-col :span="9" class="right">
                        <el-col :span="24" class="rightImg">
                          <el-image :src="item.imgSrc" style="width:100%;height:100%"></el-image>
                        </el-col>
                      </el-col>
                    </el-link>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="6" class="con left4">
                <p class="daily">
                  <el-link :underline="false" href="" class="bargin"
                    >领券中心<span class="arrow"><i class="el-icon-arrow-right"></i></span
                  ></el-link>
                </p>
                <el-col :span="24" class="left4Con">
                  <el-link :underline="false" :href="item.link" class="con11" v-for="(item, index) in coupontsList" :key="index">
                    <el-col :span="4" class="con1Img">
                      <el-image :src="item.imgSrc" style="width:100%;height: 100%"></el-image>
                    </el-col>
                    <el-col :span="18" class="text">
                      <p class="price">
                        ¥ <span>{{ item.price }}</span>
                      </p>
                      <p class="money">{{ item.money }}</p>
                      <p class="buy">{{ item.buy }}</p>
                    </el-col>
                    <el-col :span="2" class="more">
                      <el-link :underline="false" href="" class="conLink">更多好券<i class="el-icon-arrow-right"></i></el-link>
                      <!-- <span>更多好券<i class="el-icon-arrow-right"></i></span> -->
                    </el-col>
                  </el-link>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle6">
            <div class="w_1200">
              <el-col :span="24" class="title">
                <p class="channel">频道广场</p>
              </el-col>
              <el-col :span="24" class="middle6Con1">
                <el-col :span="6" class="con">
                  <el-link :underline="false" href=""> <el-image :src="imgSrc61" style="width:100%;height:100%"></el-image></el-link>
                </el-col>
                <el-col :span="6" class="con">
                  <el-link :underline="false" href=""><el-image :src="imgSrc62" style="width:100%;height:100%"></el-image></el-link>
                </el-col>
                <el-col :span="6" class="con">
                  <el-col :span="24" class="box" style="margin-bottom: 10px">
                    <el-link :underline="false" href="">
                      <p class="title">
                        <span>新机首发</span>
                        <span>有新机更有范</span>
                      </p>
                      <el-col :span="24" class="boxImg">
                        <el-image :src="boxImg" style="width:100px;height:100px;margin-right: 30px"></el-image>
                        <el-image :src="boxImg2" style="width:100px;height:100px"></el-image>
                      </el-col>
                    </el-link>
                  </el-col>
                  <el-col :span="24" class="box">
                    <el-link :underline="false" href="">
                      <p class="title">
                        <span>新机首发</span>
                        <span>有新机更有范</span>
                      </p>
                      <el-col :span="24" class="boxImg">
                        <el-image :src="boxImg" style="width:100px;height:100px;margin-right: 30px"></el-image>
                        <el-image :src="boxImg2" style="width:100px;height:100px"></el-image>
                      </el-col>
                    </el-link>
                  </el-col>
                </el-col>
                <el-col :span="6" class="con">
                  <el-col :span="24" class="box" style="margin-bottom: 10px">
                    <el-link :underline="false" href="">
                      <p class="title">
                        <span>新机首发</span>
                        <span>有新机更有范</span>
                      </p>
                      <el-col :span="24" class="boxImg">
                        <el-image :src="boxImg" style="width:100px;height:100px;margin-right: 30px"></el-image>
                        <el-image :src="boxImg2" style="width:100px;height:100px"></el-image>
                      </el-col>
                    </el-link>
                  </el-col>
                  <el-col :span="24" class="box">
                    <el-link :underline="false" href="">
                      <p class="title">
                        <span>新机首发</span>
                        <span>有新机更有范</span>
                      </p>
                      <el-col :span="24" class="boxImg">
                        <el-image :src="boxImg" style="width:100px;height:100px;margin-right: 30px"></el-image>
                        <el-image :src="boxImg2" style="width:100px;height:100px"></el-image>
                      </el-col>
                    </el-link>
                  </el-col>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="middle7">
            <div class="w_1200">
              <el-col :span="24" class="middle7Con">
                <el-col :span="24" class="title">
                  <p class="channel">为你推荐</p>
                </el-col>
              </el-col>
              <el-col :span="24" class="tab">
                <el-col :span="24" class="tabTitle">
                  <el-col :span="4" v-for="(item, index) in recommendList" :key="index" class="tabText" @click.native="tabClick(index)">
                    <el-link :underline="false" :href="item.link">
                      <span :class="{ card_active: cardIndex == index }">{{ item.text1 }}</span>
                      <span>{{ item.text2 }}</span>
                    </el-link>
                  </el-col>
                </el-col>
                <el-col :span="24" class="tabCon" v-if="cardIndex == 0">
                  <el-col :span="4" class="tabBox" v-for="(item, index) in tabConList" :key="index">
                    <el-link :underline="false" :href="item.link">
                      <el-col :span="24" class="BoxImg">
                        <el-image :src="item.imgSrc" style="width:150px;height:150px"></el-image>
                      </el-col>
                      <p class="title">{{ item.title }}</p>
                      <p class="price">¥ {{ item.price }}</p>
                      <p class="close">X</p>
                      <p class="sameCon">
                        <span class="same"><i class="el-icon-view"></i>找相似</span>
                      </p>
                    </el-link>
                  </el-col>
                </el-col>
                <el-col :span="24" class="tabCon" v-else>
                  <el-col :span="4" class="tabBox" v-for="(item, index) in tabConListTwo" :key="index">
                    <el-link :underline="false" :href="item.link">
                      <el-col :span="24" class="BoxImg">
                        <el-image :src="item.imgSrc" style="width:150px;height:150px"></el-image>
                      </el-col>
                      <p class="title">{{ item.title }}</p>
                      <p class="price">¥ {{ item.price }}</p>
                      <p class="close">X</p>
                      <p class="sameCon">
                        <span class="same"><i class="el-icon-view"></i>找相似</span>
                      </p>
                    </el-link>
                  </el-col>
                </el-col>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      activeName2: 'first',
      activeName3: '11',
      cardIndex: 0,
      leftSrc: require('../assets/chenLogo.jpg'),
      leftSrc2: require('../assets/rightBG.jpg'),
      findSrc: require('../assets/find.jpg'),
      imgSrc61: require('../assets/channei2.jpg'),
      imgSrc62: require('../assets/channel3.jpg'),
      boxImg: require('../assets/box1.jpg'),
      boxImg2: require('../assets/box2.jpg'),
      locationName: '吉林',
      //地区名称
      locationList: [
        { name: '北京' },
        { name: '上海' },
        { name: '天津' },
        { name: '重庆' },
        { name: '河北' },
        { name: '山西' },
        { name: '河南' },
        { name: '辽宁' },
        { name: '吉林' },
        { name: '黑龙江' },
        { name: '内蒙古' },
        { name: '江苏' },
        { name: '山东' },
        { name: '安徽' },
        { name: '浙江' },
        { name: '福建' },
        { name: '湖北' },
        { name: '湖南' },
        { name: '广东' },
        { name: '广西' },
        { name: '江西' },
        { name: '四川' },
        { name: '海南' },
        { name: '贵州' },
        { name: '云南' },
        { name: '西藏' },
        { name: '陕西' },
        { name: '甘肃' },
        { name: '青海' },
        { name: '宁夏' },
        { name: '新疆' },
        { name: '港澳' },
        { name: '台湾' },
        { name: '钓鱼岛' },
        { name: '海外' },
      ],
      nameIndex: -1,
      //导航菜单名称
      // menuList: [
      //   { name: '我的订单' },
      //   { name: '我的京东' },
      //   { name: '京东会员' },
      //   { name: '企业采购' },
      //   { name: '客户服务' },
      //   { name: '网站导航' },
      //   { name: '手机京东' },
      // ],
      //我的京东
      myJdList: [
        {
          con: [
            { name: '待处理订单', url: '' },
            { name: '消息', url: '' },
            { name: '返修退换货', url: '' },
            { name: '我的问答', url: '' },
            { name: '降价商品', url: '' },
            { name: '我的关注', url: '' },
          ],
        },
        {
          con: [
            { name: '我的京豆', url: '' },
            { name: '我的优惠券', url: '' },
            { name: '我的白条', url: '' },
            { name: '我的理财', url: '' },
          ],
        },
      ],
      //企业采购
      procurList: [
        { name: '企业购' },
        { name: '商用场景馆' },
        { name: '工业品' },
        { name: '丰客多商城' },
        { name: '礼品卡' },
        { name: '企业微信购' },
        { name: '大中型企业采购' },
      ],
      //客户服务
      customerList: [
        {
          title: '客户',
          con: [
            { name: '帮助中心', url: '' },
            { name: '售后服务', url: '' },
            { name: '在线客户', url: '' },
            { name: '意见建议', url: '' },
            { name: '电话客服', url: '' },
            { name: '邮箱客服', url: '' },
            { name: '金融资讯', url: '' },
            { name: '全球售客服', url: '' },
            { name: '企业客服', url: '' },
          ],
        },
        {
          title: '商户',
          con: [
            { name: '合作招商', url: '' },
            { name: '成长中心', url: '' },
            { name: '商家后台', url: '' },
            { name: '京麦工作台', url: '' },
            { name: '商家帮助', url: '' },
            { name: '规则平台', url: '' },
          ],
        },
      ],
      //网站导航
      websiteList: [
        {
          title: '特色主题',
          con: [
            { name: '新品首发', url: '' },
            { name: '京东金融', url: '' },
            { name: '全球售', url: '' },
            { name: '国际站', url: '' },
            { name: '京东会员', url: '' },
            { name: '京东预售', url: '' },
            { name: '台湾售', url: '' },
            { name: '俄语站', url: '' },
            { name: '装机大师', url: '' },
            { name: '0元测评', url: '' },
            { name: '港澳售', url: '' },
            { name: '优惠券', url: '' },
            { name: '秒杀', url: '' },
            { name: '闪购', url: '' },
            { name: '印尼站', url: '' },
            { name: '陪伴计划', url: '' },
            { name: '出海招商', url: '' },
            { name: '拍拍二手', url: '' },
            { name: '买什么', url: '' },
          ],
        },
        {
          title: '特色主题',
          con: [
            { name: '新品首发', url: '' },
            { name: '京东金融', url: '' },
            { name: '全球售', url: '' },
            { name: '国际站', url: '' },
            { name: '京东会员', url: '' },
            { name: '京东预售', url: '' },
            { name: '台湾售', url: '' },
            { name: '俄语站', url: '' },
            { name: '装机大师', url: '' },
            { name: '0元测评', url: '' },
            { name: '港澳售', url: '' },
            { name: '优惠券', url: '' },
            { name: '秒杀', url: '' },
            { name: '闪购', url: '' },
            { name: '印尼站', url: '' },
            { name: '陪伴计划', url: '' },
            { name: '出海招商', url: '' },
            { name: '拍拍二手', url: '' },
            { name: '买什么', url: '' },
          ],
        },
        {
          title: '特色主题',
          con: [
            { name: '新品首发', url: '' },
            { name: '京东金融', url: '' },
            { name: '全球售', url: '' },
            { name: '国际站', url: '' },
            { name: '京东会员', url: '' },
            { name: '京东预售', url: '' },
            { name: '台湾售', url: '' },
            { name: '俄语站', url: '' },
            { name: '装机大师', url: '' },
            { name: '0元测评', url: '' },
            { name: '港澳售', url: '' },
            { name: '优惠券', url: '' },
            { name: '秒杀', url: '' },
            { name: '闪购', url: '' },
            { name: '印尼站', url: '' },
            { name: '陪伴计划', url: '' },
            { name: '出海招商', url: '' },
            { name: '拍拍二手', url: '' },
            { name: '买什么', url: '' },
          ],
        },
        {
          title: '特色主题',
          con: [
            { name: '新品首发', url: '' },
            { name: '京东金融', url: '' },
            { name: '全球售', url: '' },
            { name: '国际站', url: '' },
            { name: '京东会员', url: '' },
            { name: '京东预售', url: '' },
            { name: '台湾售', url: '' },
            { name: '俄语站', url: '' },
            { name: '装机大师', url: '' },
            { name: '0元测评', url: '' },
            { name: '港澳售', url: '' },
            { name: '优惠券', url: '' },
            { name: '秒杀', url: '' },
            { name: '闪购', url: '' },
            { name: '印尼站', url: '' },
            { name: '陪伴计划', url: '' },
            { name: '出海招商', url: '' },
            { name: '拍拍二手', url: '' },
            { name: '买什么', url: '' },
          ],
        },
      ],
      input3: '',
      num: 0,
      serachTextList: [
        { text: '音频巅峰日', url: '' },
        { text: '家具换新', url: '' },
        { text: '二手手机', url: '' },
        { text: '音频巅峰日', url: '' },
        { text: '家具换新', url: '' },
        { text: '二手手机', url: '' },
        { text: '音频巅峰日', url: '' },
        { text: '家具换新', url: '' },
      ],
      searchNavList: [
        { text: '优惠券', url: '' },
        { text: 'plus会员', url: '' },
        { text: '品牌闪购', url: '' },
        { text: '拍卖', url: '' },
        { text: '京东家电', url: '' },
        { text: '京东超市', url: '' },
        { text: '京东生鲜', url: '' },
        { text: '京东国际', url: '' },
        { text: '京东金融', url: '' },
      ],
      show: true,
      //大的二维码内容
      codeConList: [
        {
          url: require('../assets/er.png'),
          iconImg: require('../assets/icon.png'),
          iconUrl: '',
          title: '手机京东',
          con: '新人专享大礼包',
        },
        {
          url: require('../assets/er3.png'),
          title: '关注京东',
          website: 'JD.COM',
          con: '抢5元红包',
        },
        {
          url: require('../assets/er2.png'),
          iconImg: require('../assets/icon.png'),
          iconUrl: '',
          title: '京东金融客户端',
          con: '新人专享大礼包',
        },
        {
          url: require('../assets/er4.jpg'),
          iconImg: require('../assets/icon.png'),
          iconUrl: '',
          title: '京东健康客户端',
        },
      ],
      //侧向导航菜单
      middleNavList: [
        { text: ['家用电器'], url: '' },
        {
          text: ['手机', '运营商', '数码'],
          url: '',
        },
        {
          text: ['电脑', '办公'],
          url: '',
        },
        {
          text: ['家居', '家具', '家装', '厨具'],
          url: '',
        },
        {
          url: '',
          text: ['男装', '女装', '童装', '内衣'],
        },
        {
          url: '',
          text: ['美妆', '个户清洁', '宠物'],
        },
        { text: ['家用电器'], url: '' },
        {
          url: '',
          text: ['手机', '运营商', '数码'],
        },
        {
          url: '',
          text: ['电脑', '办公'],
        },
        {
          url: '',
          text: ['家居', '家具', '家装', '厨具'],
        },
        {
          url: '',
          text: ['男装', '女装', '童装', '内衣'],
        },
        {
          url: '',
          text: ['美妆', '个户清洁', '宠物'],
        },
        {
          url: '',
          text: ['电脑', '办公'],
        },
        {
          url: '',
          text: ['家居', '家具', '家装', '厨具'],
        },
        {
          url: '',
          text: ['男装', '女装', '童装', '内衣'],
        },
        {
          url: '',
          text: ['美妆', '个户清洁', '宠物'],
        },
        {
          url: '',
          text: ['男装', '女装', '童装', '内衣'],
        },
        { text: ['工业品'], url: '' },
      ],
      //侧向导航栏的内容
      bigShowList: [
        {
          //导航出的title
          showTitleList: [
            { title: '家电馆' },
            { title: '家电专卖店' },
            { title: '家电服务' },
            { title: '企业采购' },
            { title: '商用电器' },
            { title: '高价回收' },
          ],
          //导航内容
          showTextList: [
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
          ],
          //导航里面得图片
          showImgList: [
            {
              url: '',
              imgUrl: require('../assets/bigshow1.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow2.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow3.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow4.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow5.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow6.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow7.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow8.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow9.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow10.png'),
            },
          ],
        },
        {
          //导航出的title
          showTitleList: [
            { title: '玩3C' },
            { title: '手机频道' },
            { title: '网上营业厅' },
            { title: '配件频道' },
            { title: '智能数码' },
            { title: '影像Club' },
          ],
          //导航内容
          showTextList: [
            {
              url: '',
              title: '手机通讯',
              con: ['手机', '游戏手机', '5G手机', '拍照手机', '全面屏手机', '老人机', '对讲机', '以旧换新', '手机维修'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
            {
              url: '',
              title: '电视',
              con: ['超薄电视', '全面屏电视', '智能电视', '教育电视', 'OLED电视', '智慧屏', '4k超清电视', '55英寸', '65英寸', '配件'],
            },
          ],
          //导航里面得图片
          showImgList: [
            {
              url: '',
              imgUrl: require('../assets/bigshow1.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow2.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow3.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow4.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow5.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow6.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow7.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow8.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow9.png'),
            },
            {
              url: '',
              imgUrl: require('../assets/bigshow10.png'),
            },
          ],
        },
      ],
      //轮播图列表
      swiperList: [
        {
          url: require('../assets/swiper1.png'),
          link: '',
        },
        {
          link: '',
          url: require('../assets/swiper2.png'),
        },
        {
          link: '',
          url: require('../assets/swiper3.png'),
        },
        {
          link: '',
          url: require('../assets/swiper4.png'),
        },
        {
          link: '',
          url: require('../assets/swiper5.png'),
        },
        {
          link: '',
          url: require('../assets/swiper6.png'),
        },
        {
          link: '',
          url: require('../assets/swiper7.png'),
        },
        {
          link: '',
          url: require('../assets/swiper8.png'),
        },
      ],
      img1Url: require('../assets/img1.jpg'),
      link1: '',
      img1Url2: require('../assets/img5.jpg'),
      link2: '',
      imgList: [
        {
          url: require('../assets/img2.jpg'),
          link: '',
        },
        {
          link: '',
          url: require('../assets/img3.jpg'),
        },
        {
          link: '',
          url: require('../assets/img4.jpg'),
        },
      ],
      dogUrl: require('../assets/dog.png'),
      dogHref: '',
      //右侧新闻
      rightNewsList: [
        {
          title: '推荐',
          news: '2019年度WTS真的是哈哈',
        },
        {
          title: '热门',
          news: '这是来自未来的手机好',
        },
        {
          title: '热门',
          news: '2019年度WTS真的是哈哈',
        },
        {
          title: '热门',
          news: '这是来自未来的手机好',
        },
      ],
      //右侧图标
      rightIconList: [
        {
          href: '',
          imgSrc1: require('../assets/icon1.jpg'),
          imgSrc2: require('../assets/icon1_active.jpg'),
          text: '话费',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon2.jpg'),
          imgSrc2: require('../assets/icon2_active.jpg'),
          text: '机票',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon3.jpg'),
          imgSrc2: require('../assets/icon3_active.jpg'),
          text: '酒店',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon4.jpg'),
          imgSrc2: require('../assets/icon4_active.jpg'),
          text: '游戏',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon5.jpg'),
          imgSrc2: require('../assets/icon5_active.jpg'),
          text: '加油卡',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon6.jpg'),
          imgSrc2: require('../assets/icon6_active.jpg'),
          text: '火车票',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon7.jpg'),
          imgSrc2: require('../assets/icon7_active.jpg'),
          text: '众筹',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon8.jpg'),
          imgSrc2: require('../assets/icon8_active.jpg'),
          text: '理财',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon9.jpg'),
          imgSrc2: require('../assets/icon9_active.jpg'),
          text: '话费',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon10.jpg'),
          imgSrc2: require('../assets/icon10_active.jpg'),
          text: '白条',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon11.jpg'),
          imgSrc2: require('../assets/icon11_active.jpg'),
          text: '电影票',
        },
        {
          href: '',
          imgSrc1: require('../assets/icon12.jpg'),
          imgSrc2: require('../assets/icon12_active.jpg'),
          text: '企业购',
        },
        // {
        //   href: '',
        //   imgSrc1: require('../assets/icon12.jpg'),
        //   imgSrc2: require('../assets/icon12_active.jpg'),
        //   text: '礼品卡',
        // },
      ],
      prepaidForm: {},
      //面值选项
      faceValueList: [{ text: '10元' }, { text: '20元' }, { text: '30元' }, { text: '40元' }, { text: '50元' }, { text: '100元' }],
      //link
      iconLinkList: [
        {
          link: '话费充值',
        },
        {
          link: '流量充值',
        },
      ],
      contryOption: [
        {
          text: '全国',
        },
        {
          text: '省内',
        },
      ],
      //流量
      flowOption: [
        {
          text: '50M',
        },
        {
          text: '100M',
        },
        {
          text: '200M',
        },
        {
          text: '300M',
        },
      ],
      hoverData: 0,
      iconTitleList: [
        {
          href: '',
          text: '话费',
        },
        {
          href: '',
          text: '机票',
        },
        {
          href: '',
          text: '酒店',
        },
      ],
      iconIndex: 0,
      iconLinkData: 0,
      //机票列表
      planeTicketList: [
        {
          link: '国内机票',
        },
        {
          link: '港澳台',
        },
        {
          link: '特惠',
        },
      ],
      prepaidForm2: {},
      hoverData2: 0,
      countrImg: require('../assets/conver.jpg'),
      plane1Src: require('../assets/plane1.jpg'),
      plane2Src: require('../assets/plane2.jpg'),
      hotelList: [{ link: '国内/港澳台' }, { link: '促销活动' }],
      hoverData3: 0,
      prepaidForm3: {},
      countSrc: require('../assets/count.png'),
      rightSwiperList: [
        {
          src: require('../assets/rightSwiper1.jpg'),
        },
        {
          src: require('../assets/rightSwiper2.jpg'),
        },
      ],
      initialIndex: 0,
      //大轮播图
      middle2List: [
        {
          imgList: [
            {
              imgUrl: require('../assets/sImg1.jpg'),
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
              link: '',
            },
            {
              imgUrl: require('../assets/sImg2.jpg'),
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              link: '',
              oldPrice: 4599.0,
            },
            {
              imgUrl: require('../assets/sImg1.jpg'),
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              link: '',
              oldPrice: 4599.0,
            },
            {
              imgUrl: require('../assets/sImg1.jpg'),
              link: '',
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
            },
          ],
        },
        {
          imgList: [
            {
              imgUrl: require('../assets/sImg3.jpg'),
              link: '',
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
            },
            {
              link: '',
              imgUrl: require('../assets/sImg1.jpg'),
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
            },
            {
              imgUrl: require('../assets/sImg2.jpg'),
              link: '',
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
            },
            {
              imgUrl: require('../assets/sImg1.jpg'),
              link: '',
              title: '努比亚 nubia 红魔5G售后机',
              price: 4399.0,
              oldPrice: 4599.0,
            },
          ],
        },
      ],
      activeName: 'first',
      //每日特惠
      dailyList: [
        {
          tabTitle: '精选',
          href: '',
          days: '80天最低价',
          imgSrc: require('../assets/daily1.png'),
          imgTitle: '冰锐 新鲜生鹌鹑蛋 火锅',
          price: 19.9,
          oldPrice: 29.9,
          num: 266,
          name: 'first',
          textConList: [
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              href: '',
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 233,
            },
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              href: '',
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 111,
            },
          ],
        },
        {
          tabTitle: '美食',
          href: '',
          days: '80天最低价',
          imgSrc: require('../assets/daily6.png'),
          imgTitle: '冰锐 新鲜生鹌鹑蛋 火锅',
          price: 19.9,
          oldPrice: 29.9,
          name: 'second',
          num: 266,
          textConList: [
            {
              imgSrc: require('../assets/conImg3.jpg'),
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              href: '',
            },
            {
              imgSrc: require('../assets/conImg4.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 233,
            },
            {
              imgSrc: require('../assets/conImg3.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
            },
            {
              imgSrc: require('../assets/conImg4.jpg'),
              href: '',
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 111,
            },
          ],
        },
        {
          tabTitle: '百货',
          href: '',
          days: '80天最低价',
          imgSrc: require('../assets/daily1.png'),
          imgTitle: '冰锐 新鲜生鹌鹑蛋 火锅',
          price: 19.9,
          oldPrice: 29.9,
          name: 'third',
          num: 266,
          textConList: [
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              href: '',
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 233,
            },
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              href: '',
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 111,
            },
          ],
        },
        {
          tabTitle: '个护',
          href: '',
          days: '80天最低价',
          imgSrc: require('../assets/daily6.png'),
          imgTitle: '冰锐 新鲜生鹌鹑蛋 火锅',
          price: 19.9,
          oldPrice: 29.9,
          name: 'fourth',
          num: 266,
          textConList: [
            {
              imgSrc: require('../assets/conImg3.jpg'),
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              href: '',
            },
            {
              imgSrc: require('../assets/conImg4.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 233,
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
            },
            {
              imgSrc: require('../assets/conImg3.jpg'),
              href: '',
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 111,
            },
          ],
        },
        {
          tabTitle: '预告',
          name: 'five',
          href: '',
          days: '80天最低价',
          imgSrc: require('../assets/daily1.png'),
          imgTitle: '冰锐 新鲜生鹌鹑蛋 火锅',
          price: 19.9,
          oldPrice: 29.9,
          num: 266,
          textConList: [
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              href: '',
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 233,
            },
            {
              imgSrc: require('../assets/conImg1.jpg'),
              footText: '268天最低价',
              href: '',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
            },
            {
              imgSrc: require('../assets/conImg2.jpg'),
              href: '',
              footText: '268天最低价',
              title: '洁牙慕斯 抖音同款正品',
              price: 58,
              oldPrice: 138,
              num: 111,
            },
          ],
        },
      ],
      rightImgList: [
        {
          link: '',
          imgSrc: require('../assets/right1.jpg'),
          title: '欧迪芬大牌闪购',
        },
        {
          link: '',
          imgSrc: require('../assets/right2.jpg'),
          title: '双肩背包大牌闪购',
        },
        {
          link: '',
          imgSrc: require('../assets/right1.jpg'),
          title: '欧迪芬大牌闪购',
        },
        {
          link: '',
          imgSrc: require('../assets/right2.jpg'),
          title: '欧迪芬大牌闪购',
        },
        {
          link: '',
          imgSrc: require('../assets/right2.jpg'),
          title: '欧迪芬大牌闪购',
        },
        {
          link: '',
          imgSrc: require('../assets/right1.jpg'),
          title: '欧迪芬大牌闪购',
        },
      ],
      //卡片轮播图
      cardList: [
        {
          imgSrc: require('../assets/car1.jpg'),
          title: '华为 HUAWEI Mate Xs 5G麒麟990 SoC旗舰芯片 8英寸可折叠全面屏8GB+512GB星际蓝 5G全网通 来这里发现更多新品 16999.00元起',
          more: '来这里发现更多新品',
          price: 16999.0,
        },
        {
          imgSrc: require('../assets/card2.jpg'),
          title: '荣耀30 50倍远摄 麒麟985 5G 4000万超广角AI四摄 3200W美颜自拍 全网通版6GB+128GB 钛空银 全面屏手机 来这里发现更多新品 2999.00元起',
          more: '来这里发现更多新品',
          price: 2900.0,
        },
        {
          imgSrc: require('../assets/card3.jpg'),
          title: '华为 HUAWEI Mate Xs 5G麒麟990 SoC旗舰芯片 8英寸可折叠全面屏8GB+512GB星际蓝 5G全网通 来这里发现更多新品 16999.00元起',
          more: '来这里发现更多新品',
          price: 16999.0,
        },
        {
          imgSrc: require('../assets/card4.jpg'),
          title: '华为 HUAWEI Mate Xs 5G麒麟990 SoC旗舰芯片 8英寸可折叠全面屏8GB+512GB星际蓝 5G全网通 来这里发现更多新品 16999.00元起',
          more: '来这里发现更多新品',
          price: 16999.0,
        },
      ],
      carIndex: 0,
      tabsList: [
        {
          label: '卧室家具',
          name: 'first',
          tabCon: [
            {
              link: '',
              topImg: require('../assets/top1.png'),
              ranking: '01',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top2.png'),
              ranking: '02',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top3.png'),
              ranking: '03',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
          ],
        },
        {
          label: '休闲食品',
          name: 'second',
          tabCon: [
            {
              link: '',
              topImg: require('../assets/top1.png'),
              ranking: '01',
              conImg: require('../assets/furn1.jpg'),
              title: '111111',
            },
            {
              link: '',
              topImg: require('../assets/top2.png'),
              ranking: '02',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top3.png'),
              ranking: '03',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
          ],
        },
        {
          label: '影音娱乐',
          name: 'three',
          tabCon: [
            {
              link: '',
              topImg: require('../assets/top1.png'),
              ranking: '01',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top2.png'),
              ranking: '02',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top3.png'),
              ranking: '03',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
          ],
        },
        {
          label: '手机',
          name: 'fourg',
          tabCon: [
            {
              link: '',
              topImg: require('../assets/top1.png'),
              ranking: '01',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top2.png'),
              ranking: '02',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
            {
              link: '',
              topImg: require('../assets/top3.png'),
              ranking: '03',
              conImg: require('../assets/furn1.jpg'),
              title: '联想(Lenovo)小新Pro14性能轻薄本 英特尔酷睿i5全面屏办公笔记本电脑(i5-1135G7 16G 512G 2.2K屏 锐炬显卡',
            },
          ],
        },
      ],
      supportList: [
        {
          link: '',
          title: '老板电器京东自营旗舰店',
          support: '自营',
          category: '家电集结',
          num: 387.6,
          imgSrc: require('../assets/support1.jpg'),
        },
        {
          link: '',
          title: '老板电器京东自营旗舰店',
          support: '自营',
          category: '家电集结',
          num: 387.6,
          imgSrc: require('../assets/support1.jpg'),
        },
      ],
      //领好券
      coupontsList: [
        {
          link: '',
          imgSrc: require('../assets/coup.jpg'),
          price: 100,
          money: '满299元可以使用',
          buy: '仅可购买部分生鲜商品',
        },
        {
          link: '',
          imgSrc: require('../assets/coup.jpg'),
          price: 100,
          money: '满299元可以使用',
          buy: '仅可购买部分生鲜商品',
        },
        {
          link: '',
          imgSrc: require('../assets/coup.jpg'),
          price: 100,
          money: '满299元可以使用',
          buy: '仅可购买部分生鲜商品',
        },
      ],
      //为你推荐
      recommendList: [
        {
          text1: '精选',
          text2: '猜你喜欢',
        },
        {
          text1: '智能先锋',
          text2: '大电器城',
        },
        {
          text1: '居家优品',
          text2: '品质生活',
        },
        {
          text1: '精选',
          text2: '猜你喜欢',
        },
        {
          text1: '精选',
          text2: '猜你喜欢',
        },
        {
          text1: '精选',
          text2: '猜你喜欢',
        },
      ],
      tabConList: [
        {
          link: '',
          imgSrc: require('../assets/recommend1.jpg'),
          title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
          price: 29.9,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend2.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend1.jpg'),
          title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
          price: 29.9,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend2.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend2.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
      ],
      tabConListTwo: [
        {
          link: '',
          imgSrc: require('../assets/recommend3.jpg'),
          title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
          price: 29.9,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend4.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend4.jpg'),
          title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
          price: 29.9,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend3.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
        {
          link: '',
          imgSrc: require('../assets/recommend2.jpg'),
          title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充  8+128 星河入梦 全网通手机',
          price: 3399.0,
        },
      ],
    };
  },
  async created() {
    // await this.handleData();
  },
  methods: {
    //点击名字动态添加class
    clickName(index, name) {
      this.nameIndex = index;
      // console.log(name);
      this.locationName = name;
    },
    //top的关闭按钮
    close() {
      console.log('关闭');
      this.show = !this.show;
    },
    bigshowEnter(index) {
      // this.$set(this, `bigShowList`, [this.bigShowList[index]]);
    },
    //右侧图标显示红色的
    showActive(index) {
      let data = this.rightIconList[index];
      data.imgSrc1 = data.imgSrc2;
    },
    handleClick(tab) {
      console.log(tab);
    },
    //话费充值或者流量充值
    linkClick(index) {
      this.$set(this, `hoverData`, index);
    },
    linkHover(index) {
      this.$set(this, `iconLinkData`, index);
    },
    linkClick2(index) {
      this.$set(this, `hoverData2`, index);
    },
    //交换地区
    changeLocation() {
      let s_contry = this.prepaidForm2.s_contry;
      let e_contry = this.prepaidForm2.e_contry;
      this.$set(this.prepaidForm2, `s_contry`, e_contry);
      this.$set(this.prepaidForm2, `e_contry`, s_contry);
    },
    //酒店
    linkClick3(index) {
      this.$set(this, `hoverData3`, index);
    },
    //轮播图
    swiperChange(index) {
      this.$set(this, `initialIndex`, index);
    },
    cardSwiper(index) {
      this.$set(this, `carIndex`, index);
    },
    handleClick1(data) {
      // console.log(data.index);
    },
    //为你推荐
    tabClick(index) {
      // console.log(index);cardIndex
      this.$set(this, `cardIndex`, index);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f4f4f4;
  .sideBar {
    width: 58px;
    height: 420px;
    position: fixed;
    top: 10px;
    right: 0px;
    background-color: #fff;
    z-index: 1000;
    /deep/.el-link {
      width: 100%;
      height: 60px;
      padding: 10px;
      box-sizing: border-box;
      color: #333;
      position: relative;
      .el-link--inner {
        font-size: 14px;
        line-height: 19px;
        text-align: center;
        i {
          color: #333;
          font-size: 20px;
        }
      }
    }
    /deep/.el-link::after {
      position: absolute;
      display: inline-block;
      width: 40px;
      height: 1px;
      left: 50%;
      bottom: 0;
      margin-left: -20px;
      background: linear-gradient(270deg, white, #eeeeee, #eeeeee, white);
      z-index: 1;
      content: '';
    }
    /deep/.el-link:hover {
      background-color: #c81623;
      .el-link--inner {
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
    /deep/.el-link:hover::after {
      // background-color: #c81623;
      display: none;
    }
    /deep/.el-link:nth-child(4) {
      .el-link--inner {
        color: #c81623;
      }
    }
    /deep/.el-link:nth-child(4):hover {
      background-color: #c81623;
      .el-link--inner {
        color: #fff;
      }
    }
  }
  .top1 {
    background-color: rgb(248, 242, 242);
    // background-color: rgb(25, 74, 160);
    // position: relative;
    .top1_img {
      background: url('../assets/top.webp');
      background-size: 100%;
      height: 80px;
      position: relative;
      .top1_close {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        right: 3px;
        color: #918d8d;
        text-align: center;
        background: black;
        line-height: 20px;
      }
      .top1_close:hover {
        cursor: pointer;
      }
    }
  }
  .top2 {
    background-color: #e3e4e5;
    height: 30px;
    line-height: 27px;
    // line-height: 30px;
    .top2_left {
      position: relative;
      .wrap_location {
        width: 60px;
        height: 30px;
        border: 1px solid transparent;
        position: relative;
        border: 1px solid #e3e4e5;
        .el-icon-location {
          color: #f10215;
        }
        .location {
          font-size: 12px;
          color: #999;
          vertical-align: top;
          margin-left: 3px;
        }
        .location_map {
          width: 300px;
          background-color: #fff;
          box-sizing: border-box;
          border: 1px solid #ccc;
          // border: 1px solid transparent;
          padding: 10px;
          position: absolute;
          top: 29px;
          left: -1px;
          display: none;
          z-index: 999;
          .location_name {
            display: inline-block;
            width: 20%;
            line-height: 24px;
            box-sizing: border-box;
            .location_link {
              padding: 0px 8px;
              font-size: 12px;
              color: #666;
              // background-color: red;
            }
            .location_link:hover {
              background-color: #f4f4f4;
              color: #e33333;
              cursor: pointer;
            }
          }
          .jd_location {
            margin: 10px 0px 10px 10px;
            .exclusive {
              margin-top: 10px;
              .xian {
                width: 245px;
                height: 1px;
                background-color: #eee;
              }
              font-size: 12px;
              color: #666;
              .title {
                margin: 9px 0px;
              }
              .exclusive_link {
                font-size: 12px;
                .exclusive_img {
                  width: 17px;
                  height: 14px;
                  // background: red;
                  display: inline-block;
                  vertical-align: middle;
                  // background-size: 17px auto;
                  background-position: 0 0;
                }
                .img1 {
                  background: url('../assets/contry.png');
                }
                .img2 {
                  background: url(../assets/contry.png) no-repeat -17px 0px;
                }
                .img3 {
                  background: url(../assets/contry.png) no-repeat 0px -14px;
                }
                .img4 {
                  background: url(../assets/contry.png) no-repeat -36px 0px;
                }
                .img5 {
                  background: url(../assets/contry.png) no-repeat -17px -14px;
                }

                .contry_name {
                  vertical-align: middle;
                  margin-left: 8px;
                }
              }
            }
          }
          // .location_bar {
          //   display: inline-block;
          //   height: 1px
          // }
        }
      }
      .wrap_location:hover {
        background-color: #ffffff;
        border: 1px solid #ccc;
        border-bottom: none;
        cursor: pointer;
      }
      // .wrap_location:hover + .location_map {
      //   display: block;
      // }
      .wrap_location:hover .location_map {
        display: block;
        // border: 1px solid #ccc;
      }
      .wrap_location:hover::after {
        content: '';
        width: 60px;
        height: 7px;
        background-color: #fff;
        position: absolute;
        top: 24px;
        left: 0px;
        z-index: 999;
      }
    }
    .top2_right {
      float: right;
      height: 30px;
      .to2_login {
        width: 127px;
        margin-right: 5px;
        /deep/.hello:hover {
          color: #e33333;
          cursor: pointer;
        }
      }
      .menu {
        p {
          display: inline-block;
          position: relative;
          font-size: 12px;
          .shu {
            width: 1px;
            height: 10px;
            display: inline-block;
            background-color: #ccc;
            margin: 0px 7px;
            padding: 0px;
          }
          .menuName {
            font-size: 12px;
            color: #999999;
            border: 1px solid #e3e4e5;
            display: inline-block;
            padding: 0px 5px;
            box-sizing: border-box;
            height: 30px;
            .el-icon-arrow-down {
              font-size: 12px;
              transform: scale(0.63, 0.73);
              color: #999999;
              margin-left: 1px;
            }
          }
          .er_code {
            width: 76px;
            // height: 76px;
            // background-color: #e1251b;
            position: absolute;
            top: 33px;
            right: -18px;
            z-index: 222;
            padding: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            .el-icon-caret-top {
              position: absolute;
              color: #fff;
              top: -8px;
              left: 30px;
              font-size: 14px;
            }
          }
          .code_con {
            width: 190px;
            // height: 120px;
            border: 1px solid #e7e7e7;
            background-color: #fff;
            position: absolute;
            top: 28px;
            right: -18px;
            display: block;
            z-index: 333;
            border-bottom: 1px solid #e7e7e7;
            padding: 15px 0px 5px 5px;
            line-height: 20px;
            display: none;
            .el-icon-caret-top.big {
              position: absolute;
              top: -13px;
              left: 134px;
              font-size: 18px;
              color: #fff;
            }
            .code_text {
              margin-bottom: 10px;
              .code_img {
                width: 74px;
                height: 74px;
                border: 1px solid #ccc;
                float: left;
              }
              .code_choose {
                .pp {
                  line-height: 0px;
                  margin-left: 5px;
                }
                .pp:last-child {
                  .el-link {
                    display: inline-block;
                    width: 25px;
                    height: 24px;
                    margin-right: 2px;
                    // background-color: green;
                    background: url('../assets/icon.png');
                    overflow: hidden;
                  }
                  .el-link:nth-child(1) {
                    background-position: 0px 0px;
                  }
                  .el-link:nth-child(2) {
                    background-position: 0px -25px;
                  }
                  .el-link:nth-child(3) {
                    background-position: 0px 25px;
                  }
                }
              }
            }
            .code_text:nth-child(4),
            .code_text:nth-child(5) .code_choose {
              .pp:last-child {
                .el-link:last-child {
                  display: none;
                }
              }
            }
          }
          .myJd {
            width: 280px;
            position: absolute;
            top: 28px;
            left: 15px;
            font-size: 12px;
            border: 1px solid #ccc;
            background-color: #ffffff;
            border-bottom: none;
            display: none;
            z-index: 999;
            .myJd_text {
              border-bottom: 1px solid #ccc;
              padding: 10px;

              /deep/.el-link--inner {
                color: #999999;
              }
              /deep/.el-link--inner:hover {
                color: #e33333;
              }
            }
            .jdBar {
              display: inline-block;
              position: absolute;
              top: -1px;
              left: 0px;
              background-color: #fff;
              height: 1px;
              width: 74px;
            }
            .jdBar.customerBar {
              left: 97px;
              width: 71px;
            }
            .jdBar.websiteBar {
              left: 999px;
              width: 71px;
            }
          }
          .procur.myJd {
            width: 157px;
          }
          .customer.myJd {
            width: 170px;
          }
          .myJd.website {
            width: 1200px;
            left: -984px;
            padding: 10px;
            border: 1px solid #ccc;
            .myJd_text {
              border: 0;
              border-right: 1px solid #ccc;
              padding: 0;
            }
            .myJd_text:last-child {
              border-right: 0;
              margin-left: 0;
            }
          }
        }
        .phoneJd:hover .code_con {
          display: block;
        }
        p:last-child:hover .code_con {
          display: block;
        }
        p:nth-child(1):hover .menuName,
        p:nth-child(2):hover .menuName,
        p:nth-child(3):hover .menuName {
          color: #e33333;
          cursor: pointer;
          // border: 1px solid #ccc;
        }
        p:nth-child(2):hover .menuName,
        p:nth-child(4):hover .menuName,
        p:nth-child(5):hover .menuName,
        p:nth-child(6):hover .menuName {
          border: 1px solid #ccc;
          background-color: #fff;
        }
        p:nth-child(2):hover .myJd {
          display: block;
        }
        p:nth-child(4):hover .myJd.procur {
          display: block;
        }
        p:nth-child(5):hover .myJd.customer {
          display: block;
          left: -82px;
        }
        p:nth-child(6):hover .myJd.website {
          display: block;
        }
        p:nth-child(4) .menuName {
          color: #e33333;
        }
      }
    }
  }
  .top3 {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 0px 5px 0px;
    .top3_logo {
      width: 134px;
      height: 120px;
      // height: 100px;
      // background-color: #e33333;
      background: url(../assets/jd_logo.png);
    }
    .search {
      margin-top: 15px;
      padding-left: 70px;
      /deep/.search_left {
        // height: 3px;
        border: 2px solid #e2231a;
        width: 539px;
        margin-left: 40px;
        position: relative;
        /deep/.el-icon-camera {
          position: absolute;
          top: 12px;
          right: 69px;
          font-size: 20px;
        }
      }
      .cart {
        width: 130px;
        border: 1px solid #ccc;
        height: 40px;
        float: right;
        line-height: 40px;
        position: relative;
        padding-left: 10px;
        .el-icon-shopping-cart-2 {
          color: #e1251b;
          font-size: 21px;
        }
        span:nth-child(2) {
          font-weight: bolder;
          color: #fff;
          font-size: 12px;
          position: absolute;
          top: 2px;
          left: 24px;
          display: inline-block;
          width: 16px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          border-radius: 50%;
          background-color: #e1251b;
        }
        span:nth-child(3) {
          font-size: 14px;
          color: #e1251b;
          margin-left: 10px;
        }
      }
      .cart:hover {
        border: 1px solid #e1251b;
        cursor: pointer;
      }
      .searchLine {
        margin-left: 40px;
        margin-top: 5px;
      }
      .search_text {
        font-size: 12px;
        margin-right: 5px;
        text-align: center;
        color: #999;
        // /deep/.search_link:nth-child(1) {
        //   background-color: green;
        // }
        /deep/.search_link:hover {
          cursor: pointer;
          color: #e1251b;
        }
      }
      /deep/.search_text:nth-child(1) .search_link {
        color: #e1251b;
      }
      .serach_nav {
        margin-top: 20px;
        font-size: 16px;
        /deep/.discount {
          margin: 0px 10px;
          .el-link--inner {
            font-size: 15px;
          }
        }
        /deep/.discount:nth-child(2) .el-link--inner {
          color: #e1251b;
          font-weight: bold;
        }
        /deep/.discount:last-child {
          margin-right: 0px;
        }
        .seckill {
          font-size: 15px;
          color: #e1251b;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
  }
  .middle1 {
    background-color: #f4f4f4;
    padding-top: 10px;
    .middle_left1 {
      position: relative;
      // margin-top: 10px;
      padding: 10px 0px;
      box-sizing: border-box;
      background-color: #fff;
      height: 470px;
      padding-left: 18px;
      // overflow: hidden;
      .electric {
        .electric_text {
          .slant {
            margin: 2px;
          }
          /deep/.el-link--inner {
            font-size: 14px;
            color: #636363;
            line-height: 25px;
          }
          /deep/.el-link--inner:hover {
            color: #e1251b;
          }
        }
        .electric_text:last-child {
          .slant {
            display: none;
          }
        }
      }
      .electric:hover {
        background-color: #ccc;
        cursor: pointer;
      }
      .bigShow {
        position: absolute;
        width: 998px;
        height: 470px;
        background-color: #fff;
        top: 0px;
        left: 193px;
        z-index: 22;
        padding: 20px 10px 10px 20px;
        display: none;
        .bigshowCon {
          display: none;
          .bigShowTitle {
            display: inline-block;
            font-size: 12px;
            padding: 0px 15px 0px 10px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #333;
            margin-left: 10px;
            color: #fff;
          }
          .showText {
            padding: 10px 0px 0px 20px;
            /deep/.showText_title {
              width: 70px;
              height: 19px;
              line-height: 19px;
              // background: #e1251b;
              color: #666;
              font-weight: bold;
              text-align: right;
              .el-icon-arrow-right {
                margin-left: 5px;
                font-weight: bold;
              }
              /deep/.el-link--inner {
                width: 100%;
                display: inline-block;
              }
            }
            .showText_con {
              margin: 10px;
            }
            // .showText_con:last-child {
            //   margin-right: 0px;
            // }
          }
          .bigShow_img {
            width: 168px;
            float: right;
            // margin-left: 10px;
            /deep/.showImg {
              width: 83px;
              height: 35px;
              margin: 0px 1px 1px 0px;
            }
            /deep/.showImg:nth-child(9),
            /deep/.showImg:nth-child(10) {
              width: 168px;
              height: 134px;
              margin-bottom: 1px;
            }
            /deep/.showImg:nth-child(9) {
              margin-top: 15px;
            }
          }
        }
      }
    }
    .middle_left1:hover .bigShow {
      display: block;
    }
    .img1 {
      width: 190px;
      height: 150px;
    }
    .middle_right {
      height: 470px;
      background-color: #fff;
      padding: 15px 10px;
      /deep/.jd_dog {
        display: inline-block;
        overflow: hidden;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }
      .right_link {
        padding-left: 15px;
        .hi {
          font-size: 12px;
          color: #666666;
        }
        .right_login {
          color: #333;
          span {
            font-size: 12px;
            color: #333;
            margin: 5px;
          }
        }
      }
      /deep/.newUser {
        display: inline-block;
        margin-top: 15px;
        /deep/.el-link--inner {
          span {
            display: inline-block;
            width: 70px;
            height: 25px;
            border-radius: 13px;
            line-height: 25px;
            text-align: center;
          }
          span:nth-child(1) {
            background-color: #e1251b;
            color: #fff;
          }
          span:nth-child(1):hover {
            background: #c81623;
          }
          span:nth-child(2) {
            background-color: #e5d790;
            color: #363634;
            margin-left: 10px;
          }
          span:nth-child(2):hover {
            background: #c81623;
            color: #fff;
          }
        }
      }
      .right_splite {
        display: inline-block;
        width: 100%;
        height: 1px;
        background-color: #eee;
      }
      .jd_news {
        padding: 10px 0px 5px 0px;
        border-bottom: 1px solid #eee;
        .right_title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
        .right_more {
          font-size: 12px;
          color: #999;
        }
        .news {
          padding: 7px 0px;
          .new_title {
            width: 35px;
            height: 16px;
            display: inline-block;
            color: #e1251b;
            line-height: 16px;
            text-align: center;
            font-size: 12px;
            background-color: rgba(225, 37, 27, 0.08);
            margin-right: 6px;
          }
          .rightNews {
            display: inline-block;
            width: 72%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .jd_icon {
        // margin-top: 10px;
        position: relative;
        .samllIcon {
          text-align: center;
          .iconCon {
            width: 28px;
            height: 28px;
            display: inline-block;
          }
          .iconText {
            margin: 1px 0px 2px 0px;
          }
        }
        .samllIcon:hover {
        }
        .rightBox {
          height: 200px;
          // background-color: greenyellow;
          background-color: #fff;
          z-index: 111;
          position: absolute;
          top: 0px;
          left: 0px;

          .iconBox {
            text-align: center;
            position: relative;
            height: 28px;
            .iconTitle {
              width: 30%;
            }
            // .iconTitle:hover::after {
            //   content: '';
            //   width: 24px;
            //   height: 2px;
            //   background-color: #e1251b;
            //   position: absolute;
            //   top: 25px;
            //   left: 17px;
            // }
          }
          .prepaid {
            .links {
              margin: 10px 4px;
              text-align: center;
            }
            // .links:nth-child(1) {
            //   color: #e40015;
            // }

            /deep/.plane.rightFormItem {
              margin-bottom: 0px;
              /deep/.el-form-item__content {
                line-height: 18px;
                .el-radio__label {
                  font-size: 12px;
                }
                /deep/.phone.el-input {
                  line-height: 18px;
                  /deep/.el-input__inner {
                    // border: 1px solid #ccc;
                    height: 18px;
                    line-height: 18px;
                  }
                }
              }
              .countrImg {
                position: absolute;
                top: -8px;
                right: 16px;
              }
            }
            // /deep/.rightFormItem.date {
            //   /deep/.el-form-item__content {
            //     line-height: 20px;
            //     /deep/.phone.el-input {
            //       border: 1px solid #ccc;
            //       height: 21px;
            //       line-height: 20px;
            //       font-size: 12px;
            //       width: 80%;
            //     }
            //   }
            // }
            /deep/.hotel.rightFormItem {
              /deep/.el-form-item__content {
                /deep/.el-input {
                  width: 67%;
                  border: 1px solid #ccc;
                  height: 21px;
                  line-height: 20px;
                  font-size: 12px;
                }
              }
            }
            /deep/.rightFormItem {
              margin-bottom: 5px;
              /deep/.el-form-item__content {
                line-height: 0px;
              }
              .el-form-item__label {
                height: 20px;
                line-height: 20px;
              }
              /deep/.el-form-item__content {
                line-height: 20px;
                /deep/.phone.el-input {
                  border: 1px solid #ccc;
                  height: 21px;
                  line-height: 20px;
                  font-size: 12px;
                  width: 80%;
                  /deep/.el-input__inner {
                    // border: 1px solid #ccc;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #c2c2c2;
                    width: 100%;
                  }
                }
              }
              .spcile.rightSelect {
                width: 37.5%;
                margin-right: 5px;
                /deep/.el-input--suffix .el-input__inner {
                  height: 18px;
                  font-size: 12px;
                }
              }
              .plane2.rightSelect {
                width: 65%;
              }
              .spcile.rightSelect:last-child {
                margin-right: 0px;
              }
              .date.rightSelect {
                width: 80%;
              }
              .date2.rightSelect {
                width: 50%;
              }
              .rightSelect {
                width: 80%;
                border: 1px solid #ccc;
                /deep/.el-input--suffix .el-input__inner {
                  height: 20px;
                  font-size: 12px;
                  padding-right: 0px;
                }
                /deep/.el-input__icon {
                  line-height: 20px;
                }
              }
              /deep/.el-input__inner {
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: #c2c2c2;
                width: 100%;
              }
              .back {
                line-height: 21px;
                display: inline-block;
                width: 40px;
                height: 21px;
                text-align: center;
                font-size: 12px;
                border: 1px solid #ccc;
                color: rgb(170, 170, 170);
              }
            }
            .rechargeCon {
              .preferential {
                display: inline-block;
                width: 75px;
                height: 96px;
              }
              p {
                font-size: 12px;
              }
              .money {
                color: #e40015;
              }
              .recharge {
                color: #fff;
                width: 60px;
                height: 20px;
                background: #e40015;
                border-radius: 10px;
                text-align: center;
                line-height: 20px;
                margin-top: 5px;
              }
              .coupons {
                color: #5475db;
              }
              .close1 {
                position: absolute;
                left: 50%;
                bottom: -18px;
                font-size: 14px;
                color: #666;
              }
              .hotelTag {
                width: 100%;
                height: 18px;
                border: 1px solid #ccc;
                line-height: 18px;
                text-align: center;
                color: rgb(170, 170, 170);
              }
            }
          }
        }
      }
    }
  }
  .middle2 {
    margin-top: 30px;
    height: 260px;
    .count_down {
      width: 190px;
      height: 260px;
      position: relative;
      .jdDown_title {
        font-weight: 700;
        position: absolute;
        top: 40px;
        font-size: 30px;
        color: #fff;
        left: 38px;
      }
      .jd_in {
        position: absolute;
        top: 160px;
        color: #fff;
        left: 30px;
        font-size: 18px;
        font-weight: 600;
        span {
          font-weight: 100;
          font-size: 16px;
        }
      }
      .jdDown {
        position: absolute;
        left: 30px;
        top: 214px;
        .date {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #2f3430;
          vertical-align: middle;
          font-size: 20px;
          color: #fff;
        }
        .spot {
          margin: 0px 5px;
          font-size: 18px;
          color: #fff;
        }
      }
    }
    .middle2_right {
      width: 200px;
      padding: 10px;
      height: 260px;
      position: relative;
      float: right;
      background-color: #fff;
      .el-link.el-link--default {
        width: 100%;
        height: 100%;
        /deep/.el-link--inner {
          width: 100%;
          height: 100%;
          text-align: center;
          .el-carousel {
            height: 100%;
            /deep/.el-carousel__indicator--horizontal.is-active {
              .el-carousel__button {
                background-color: #e1251b;
              }
            }
            /deep/.el-carousel__indicator--horizontal {
              /deep/.el-carousel__button {
                width: 5px;
                height: 5px;
              }
            }
          }
        }
      }
      .middle2Right_text {
        position: absolute;
        left: 55px;
        bottom: 8px;
        z-index: 999;
        p {
          margin-bottom: 5px;
        }
        p:nth-child(1) {
          font-size: 14px;
          color: #666;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #333;
          font-weight: 700;
        }
        p:nth-child(3) {
          width: 82px;
          height: 24px;
          border: 1px solid #e1251b;
          line-height: 24px;
          text-align: center;
          color: #e1251b;
          border-radius: 14px;
        }
        p:nth-child(3):hover {
          color: #fff;
          background-color: #c81623;
          border-color: transparent;
        }
      }
    }
    .mideel2_swiper {
      height: 260px;
      width: 810px;
      padding: 30px 20px;
      background-color: #fff;
      /deep/.el-carousel__arrow {
        top: 29%;
      }
      /deep/.el-carousel__arrow--right {
        right: 2%;
      }
      .middel2Con {
        text-align: center;
        .middel2Link {
          .title {
            color: #333;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 17px;
          }
          .price {
            border: 1px solid #e1251b;
            line-height: 24px;
            overflow: hidden;
            position: relative;
            margin-top: 10px;
            .text1 {
              display: inline-block;
              width: 92px;
              height: 22px;
              color: #fff;
              font-weight: 700;
              background-color: #e1251b;
              font-size: 16px;
              text-align: center;
            }
            .text2 {
              display: inline-block;
              width: 66px;
              height: 22px;
              text-align: center;
              color: #999;
              background-color: #fff;
              font-size: 12px;
              position: relative;
              .xian {
                position: absolute;
                width: 70%;
                height: 1px;
                background-color: #999;
                top: 50%;
                left: 20px;
              }
            }
          }
          .price::after {
            content: '';
            width: 0;
            height: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;
            position: absolute;
            top: 0;
            left: 84px;
          }
        }
      }
    }
  }
  .middle3 {
    margin-top: 20px;
    .middle3-1,
    .middle3-2 {
      background-color: #fff;
      width: 590px;
      float: left;
      position: relative;
      padding: 20px;
      width: 590px;
      .daily {
        left: 20px;
        width: 25%;
        position: absolute;
        top: 20px;
        .bargin {
          /deep/.el-link--inner {
            font-weight: 700;
            font-size: 24px;
            color: #333;
            line-height: 32px;
            vertical-align: middle;
          }
        }
        .arrow {
          display: inline-block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid #e1251b;
          text-align: center;
          line-height: 16px;
          font-size: 12px;
          margin-left: 5px;
          font-weight: 700;
          vertical-align: middle;
          .el-icon-arrow-right {
            margin-left: 3px;
          }
        }
        .arrow:hover {
          background-color: #c81623;
        }
        .arrow:hover .el-icon-arrow-right {
          color: #fff;
        }
      }
      .middle3Tab {
        /deep/.el-tabs__header {
          margin: 0px;
          width: 60%;
          float: right;
          /deep/.el-tabs__item {
            height: 22px;
            line-height: 20px;
          }
          /deep/.el-tabs__item.is-active {
            color: #e1251b;
          }
          /deep/.el-tabs__item:hover {
            color: #e1251b;
          }
          /deep/.el-tabs__active-bar {
            background-color: #e1251b;
            left: 30px;
          }
          /deep/.el-tabs__nav {
            width: 100%;
            text-align: right;
          }
        }
        /deep/.el-tabs__content {
          width: 100%;
          /deep/.el-tab-pane {
            margin-top: 45px;
            .middle3Con {
              width: 170px;
              height: 265px;
              background-color: rgba(109, 126, 146, 0.05);
              /deep/.el-link.el-link--default {
                width: 100%;
                height: 100%;
                .el-link--inner {
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  .days {
                    width: 90px;
                    height: 24px;
                    line-height: 24px;
                    background: url('../assets/dailyBg.jpg') no-repeat 100% 100%;
                    color: #fff;
                    font-size: 12px;
                    font-weight: 700;
                    text-align: center;
                  }
                  .imgSrc {
                    width: 120px;
                    height: 120px;
                    margin-top: 25px;
                  }
                  .imgTitle {
                    font-size: 14px;
                    line-height: 19px;
                    text-align: center;
                    width: 100%;
                    margin: 10px 0px;
                  }
                  .price {
                    span:nth-child(1) {
                      font-size: 18px;
                      line-height: 16px;
                      font-weight: 700;
                      color: #e1251b;
                    }
                    span:nth-child(2) {
                      margin-left: 8px;
                      color: #999;
                      font-size: 12px;
                      line-height: 14px;
                      position: relative;
                      .xian {
                        position: absolute;
                        width: 38px;
                        height: 1px;
                        background: #999;
                        top: 8px;
                        left: 0px;
                        z-index: 999;
                      }
                    }
                  }
                  .num {
                    margin-top: 10px;
                    font-size: 12px;
                    line-height: 16px;
                    color: #999;
                    span {
                      color: #e1251b;
                      line-height: 18px;
                    }
                  }
                }
              }
            }
            .middle3Con2 {
              float: right;
              height: 265px;
              background: #fff;
              width: 2;
              width: 380px;
              .textCon {
                height: 155px;
                padding: 18px 0px 48px 19px;
                /deep/.el-link.el-link--default {
                  width: 100%;
                  height: 100%;
                  .el-link--inner {
                    width: 100%;
                    height: 100%;
                    .conImg {
                      width: 84px;
                      height: 84px;
                      position: relative;
                      .footText {
                        position: absolute;
                        left: 0px;
                        bottom: 0px;
                        background: rgba(0, 0, 0, 0.5);
                        width: 100%;
                        color: #fff;
                        text-align: center;
                      }
                    }
                    .conText {
                      padding-left: 5px;
                      position: relative;
                      p:nth-child(2) {
                        font-size: 14px;
                        line-height: 16px;
                        font-weight: 700;
                        color: #e1251b;
                        margin-top: 5px;
                      }
                      p:nth-child(3) {
                        font-size: 12px;
                        line-height: 14px;
                        color: #999;
                        margin-top: 3px;
                        position: relative;
                        .xian {
                          background: #999;
                          position: absolute;
                          width: 34px;
                          top: 6px;
                          left: 0px;
                          height: 1px;
                        }
                      }
                      p:nth-child(4) {
                        position: absolute;
                        bottom: -20px;
                        left: 6px;
                        span {
                          color: #e1251b;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .middle3-1 {
      float: left;
    }
    .middle3-2 {
      float: right;
      .middle3-2_con {
        margin-top: 33px;
        .left {
          margin-top: 35px;
          width: 270px;
          height: 265px;
          float: left;
          background: linear-gradient(180deg, rgba(160, 147, 204, 0.05), rgba(35, 0, 103, 0.05));
          text-align: center;
          /deep/.el-image {
            margin-top: 20px;
          }
          p:nth-child(2) {
            font-size: 16px;
            font-weight: 700;
            color: #333;
          }
          p:nth-child(3) {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
            span:nth-child(1) {
              color: rgba(102, 102, 102, 0.4);
              margin: 0px 5px;
            }
            span:nth-child(2) {
              font-weight: 700;
              margin: 0px 3px;
            }
          }
        }
        .right {
          // background: gold;
          // height: 100px;
          float: right;
          width: 280px;
          .rightCon {
            height: 100px;
            padding: 14px 0px;
            // background: gold;
            text-align: center;
            position: relative;
          }
          .rightCon:nth-child(2n-1)::after {
            position: absolute;
            width: 1px;
            height: 60px;
            right: 0;
            top: 50%;
            margin-top: -30px;
            background: linear-gradient(180deg, white, #eeeeee, #eeeeee, white);
            content: '';
          }
        }
      }
    }
  }
  .middle4 {
    margin-top: 20px;
    .middle4Con {
      height: 260px;
      border-color: gold;
      .findGoods {
        width: 190px;
        height: 260px;
        /deep/.el-link {
          height: 100%;
          width: 100%;
          background: url('../assets/findBg.jpg') no-repeat 100% 100%;
          .el-link--inner {
            text-align: center;
            width: 100%;
            position: relative;
            height: 100%;
            .findCon {
              width: 160px;
              height: 89px;
              margin-top: 15px;
              margin-left: 7px;
            }
            .newLife {
              color: rgba(255, 255, 255, 0.8);
              font-size: 16px;
              position: absolute;
              top: 75px;
              left: 39px;
              .arrow {
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1px solid rgba(255, 255, 255, 0.8);
                text-align: center;
                line-height: 15px;
                font-size: 12px;
                margin-left: 5px;
                font-weight: 700;
                vertical-align: middle;
                .el-icon-arrow-right {
                  margin-left: 3px;
                }
              }
            }
            .newLife:hover {
              .arrow {
                background-color: #e1251b;
              }
            }
          }
        }
      }
    }
  }
  .middel5 {
    margin-top: 20px;
    .con {
      height: 340px;
      width: 290px;
      margin-right: 10px;
      background: #fff;
      position: relative;
      .daily {
        left: 20px;
        width: 50%;
        position: absolute;
        top: 20px;
        .bargin {
          /deep/.el-link--inner {
            font-weight: 700;
            font-size: 24px;
            color: #333;
            line-height: 32px;
            vertical-align: middle;
          }
        }
        .arrow {
          display: inline-block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 1px solid #e1251b;
          text-align: center;
          line-height: 16px;
          font-size: 12px;
          font-weight: 700;
          position: absolute;
          top: 8px;
          right: -24px;
          .el-icon-arrow-right {
            margin-left: 3px;
          }
        }
        .arrow:hover {
          background-color: #c81623;
        }
        .arrow:hover .el-icon-arrow-right {
          color: #fff;
        }
      }
      .cardSwiper {
        margin-top: 90px;
        padding: 0px 10px;
        .cradCon {
          width: 130px;
          /deep/.el-link {
            width: 270px;
            height: 250px;
            /deep/.el-link--inner {
              width: 270px;
              height: 250px;
              .title {
                width: 130px;
                line-height: 19px;
                font-size: 14px;
                color: #333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 10px;
              }
              .more {
                line-height: 16px;
                font-size: 12px;
                color: #999;
                margin: 5px 0px 35px 0px;
              }
              .price {
                font-size: 18px;
                color: #e1251b;
              }
            }
          }
        }
        // /deep/.el-link {
        //   width: 100%;
        //   height: 250px;
        //   /deep/.el-link--inner {
        //     width: 100%;
        //     height: 100%;
        //   }
        // }
        /deep/.el-carousel__indicators--outside {
          display: none;
        }
      }
    }
    .con.left1 {
      background-image: url('../assets/carBg.png');
    }
    .con.left2 {
      padding: 10px;
      padding-top: 0px;
      .tabs {
        margin-top: 60px;
        // background-color: gold;
        /deep/.el-tabs__content {
          height: 240px;
          .tabsCon {
            height: 70px;
            /deep/.el-link {
              margin-bottom: 10px;
              width: 100%;
              /deep/.el-link--inner {
                width: 100%;
                .top {
                  text-align: center;
                  position: relative;
                  .topText {
                    position: absolute;
                    left: 16px;
                    top: 0px;
                    color: #e6ac36;
                    font-size: 12px;
                    line-height: 16px;
                  }
                  .ranking {
                    position: absolute;
                    top: 17px;
                    left: 17px;
                    font-size: 1;
                    font-size: 18px;
                    line-height: 18px;
                    color: #fff;
                    font-weight: bold;
                  }
                }
                .title {
                  line-height: 1.3em;
                  font-size: 14px;
                  max-height: 2.6em;
                  overflow: hidden;
                  margin-top: 15px;
                }
              }
            }
          }
        }
        /deep/.el-tabs__active-bar {
          display: none;
        }
        /deep/.el-tabs__nav-wrap.is-scrollable {
          padding: 0px;
          /deep/.el-tabs__nav-next,
          .el-tabs__nav-prev {
            display: none;
          }
          .el-tabs__nav {
            /deep/.el-tabs__item {
              padding: 0 12px;
              height: 20px;
              margin: 0px 4px;
              width: 62px;
              font-size: 12px;
              line-height: 20px;
              background-color: #f6f6f6;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding: 0px;
              border-radius: 12px;
              text-align: center;
              color: #999;
              max-width: 70px;
            }
            /deep/.el-tabs__item.is-active {
              background-color: #e1251b;
              color: #fff;
            }
            /deep/.el-tabs__item:hover {
              background-color: #e1251b;
              color: #fff;
            }
            /deep/.el-tabs__item:nth-child(2) {
              margin-left: 0px;
            }
            /deep/.el-tabs__item:last-child {
              margin-right: 0px;
            }
          }
        }
      }
    }
    .con.left3 {
      padding: 0px 10px 10px 10px;
      .left3Con {
        margin-top: 65px;
        height: 266px;
        // border-color: gold;
        .support {
          height: 128px;
          padding: 15px 15px 15px 15px;
          margin-bottom: 10px;
          background: url('../assets/supportBg.png');
          // background-color: #5475db;
          /deep/.el-link {
            width: 100%;
            height: 100%;
            /deep/.el-link--inner {
              width: 100%;
              height: 100%;
              .left {
                width: 120px;
                float: left;
                .title {
                  max-height: 38px;
                  line-height: 1.3em;
                  font-size: 14px;
                  color: #333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .tab {
                  margin: 5px 0px 25px 0px;
                  span {
                    font-size: 12px;
                    text-align: center;
                    border-radius: 2px;
                    padding: 0 2px;
                    height: 18px;
                    line-height: 17px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border: 1px solid transparent;
                    margin-right: 5px;
                    display: inline-block;
                  }
                  span:nth-child(1) {
                    color: #e2231a;
                    border-color: #e2231a;
                    margin-right: 5px;
                  }
                  span:nth-child(2) {
                    color: #596fab;
                    border-color: #596fab;
                    margin-right: 5px;
                  }
                }
                .num {
                  color: #666;
                  font-size: 12px;
                  // margin-top: 20px;
                }
              }
              .right {
                width: 95px;
                float: right;
                .rightImg {
                  width: 95px;
                  height: 95px;
                  padding: 5px;
                  background-color: #fff;
                }
              }
            }
          }
        }
      }
    }
    .con.left4 {
      // padding: 0px 10px 0px 10px;
      .left4Con {
        overflow: hidden;
        margin-top: 65px;
        padding: 0px 15px 0px 15px;
        height: 280px;
        background-color: gold;
        background-image: url('../assets/couponts.png');
        /deep/.con11 {
          width: 100%;
          height: 82px;
          /deep/.el-link--inner {
            width: 100%;
            padding: 8px 7px 8px 7px;
            height: 100%;
            position: relative;
            .con1Img {
              width: 66px;
              float: left;
              margin-top: 8px;
              height: 66px;
              margin-left: 7px;
              padding: 8px;
              background-color: #fff;
              border-radius: 50%;
            }
            .more {
              width: 40px;
              position: absolute;
              top: 17px;
              right: 0px;
              text-align: center;
              .conLink {
                font-size: 12px;
                color: #666;
                width: 12px;
                display: inline-block;
                position: relative;
                .el-link--inner {
                  width: 100%;
                  height: 100%;
                  padding: 0px;
                  .el-icon-arrow-right {
                    position: absolute;
                    top: 49%;
                    right: -13px;
                  }
                }
              }
              // span:nth-child(1):hover {
              //   color: #e2231a;
              //   cursor: pointer;
              // }
            }
            .text {
              float: left;
              width: 140px;
              margin-top: 3px;
              padding-left: 5px;
              .price {
                font-size: 14px;
                color: #e33333;
                span {
                  font-size: 28px;
                  line-height: 34px;
                  font-weight: bold;
                }
              }
              .money {
                font-size: 12px;
                line-height: 18px;
                height: 18px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #999;
              }
              .buy {
                font-size: 12px;
                line-height: 18px;
                height: 18px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #666;
              }
            }
          }
        }
      }
    }
    .con:nth-child(4) {
      margin-right: 0px;
    }
  }
  .middle6 {
    margin-top: 20px;
    .title {
      height: 45px;
      margin-bottom: 20px;
      .channel {
        // width: 150px;
        text-align: center;
        height: 45px;
        margin: 0 auto;
        // background-color: greenyellow;
        font-size: 28px;
        font-weight: 700;
        overflow: hidden;
        color: #333;
        padding: 0 30px;
      }
      .channel::before {
        content: '';
        background-position: 0 0;
        margin-right: 20px;
        width: 25px;
        height: 20px;
        left: 0;
        background-image: url('../assets/channel.jpg');
        display: inline-block;
      }
      .channel::after {
        content: '';
        background-position: -25px 0;
        display: inline-block;
        width: 25px;
        height: 20px;
        margin-left: 20px;
        left: 0;
        background-image: url('../assets/channel.jpg');
      }
    }
    .middle6Con1 {
      .con {
        width: 290px;
        height: 370px;
        margin-right: 10px;
        margin-bottom: 10px;
        .box {
          padding: 17px 10px 13px 30px;
          height: 180px;
          background-color: #fff;
          .title {
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span:nth-child(1) {
              font-size: 22px;
              font-weight: 700;
              color: #333;
            }
            span:nth-child(2) {
              font-size: 14px;
              color: #999;
              margin-left: 5px;
            }
          }
          .boxImg {
            .el-image:hover {
              opacity: 0.8;
            }
          }
        }
        .el-image:hover {
          opacity: 0.8;
        }
      }
      .con:last-child {
        margin-right: 0px;
      }
    }
  }
  .middle7 {
    margin-top: 20px;
    .title {
      height: 45px;
      margin-bottom: 20px;
      .channel {
        // width: 150px;
        text-align: center;
        height: 45px;
        margin: 0 auto;
        // background-color: greenyellow;
        font-size: 28px;
        font-weight: 700;
        overflow: hidden;
        color: #333;
        padding: 0 30px;
      }
      .channel::before {
        content: '';
        background-position: 0 0;
        margin-right: 20px;
        width: 25px;
        height: 20px;
        left: 0;
        background-image: url('../assets/channel.jpg');
        display: inline-block;
      }
      .channel::after {
        content: '';
        background-position: -25px 0;
        display: inline-block;
        width: 25px;
        height: 20px;
        margin-left: 20px;
        left: 0;
        background-image: url('../assets/channel.jpg');
      }
    }
    .tab {
      width: 100%;
      overflow: hidden;
      .tabTitle {
        height: 60px;
        margin-bottom: 10px;
        padding: 0px 55px;
        background-color: #fff;
        .tabText {
          text-align: center;
          /deep/.el-link {
            width: 100%;
            /deep/.el-link--inner {
              width: 100%;
              text-align: center;
              span {
                display: block;
              }
              span:nth-child(1) {
                width: 70px;
                color: #333;
                margin-top: 7px;
                font-size: 16px;
                font-weight: 700;
                line-height: 27px;
                height: 27px;
                display: inline-block;
              }
              span:nth-child(2) {
                color: #999;
                font-size: 14px;
              }
            }
          }
          /deep/.el-link:hover {
            /deep/.el-link--inner {
              span {
                color: #e1251b;
              }
            }
          }
        }
      }
      .tabCon {
        .tabBox {
          width: 230px;
          height: 322px;
          float: left;
          margin: 0 5px 10px;
          background-color: #fff;
          padding: 0px 20px;
          position: relative;
          /deep/.el-link {
            width: 100%;
            height: 100%;
            /deep/.el-link--inner {
              width: 100%;
              height: 100%;
              text-align: center;
              .BoxImg {
                height: 140px;
                margin: 30px 0px;
                margin-bottom: 50px;
              }
              // .BoxImg:hover {
              //   .el-image {
              //     opacity: 0.8;
              //   }
              // }
              .title {
                height: 48px;
                width: 100%;
                font-size: 14px;
                line-height: 24px;
                text-align: center;
                color: #666;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .price {
                color: #e1251b;
                font-size: 20px;
                font-weight: 700;
                width: 100%;
                text-align: left;
              }
              .close {
                height: 16px;
                width: 16px;
                position: absolute;
                top: 10px;
                right: -10px;
                display: none;
              }
              .sameCon {
                position: absolute;
                bottom: 10px;
                left: 0;
                width: 100%;
                height: 66px;
                display: none;
                text-align: center;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0, white 35%, white);
                // background-color: green;
                .same {
                  display: inline-block;
                  height: 28px;
                  width: 120px;
                  font-size: 12px;
                  border: 1px solid #353131;
                  border-radius: 15px;
                  line-height: 28px;
                  text-align: center;
                  cursor: pointer;
                  // color: #333;
                  // margin-left: 10px;
                  // margin-top: 18px;
                  // background-color: #333;
                  background: #333333;
                  color: #fff;
                  .el-icon-view {
                    margin-right: 5px;
                  }
                }
              }
              .sameCon:hover .same {
                background-color: #c81623;
                border-color: #c81623;
              }
            }
            /deep/.el-link--inner:hover .sameCon,
            .close {
              display: block;
            }
            /deep/.el-link--inner:hover .BoxImg {
              .el-image {
                opacity: 0.8;
              }
            }
          }
        }
        // .tabBox:hover {
        //   .BoxImg {
        //     .el-image {
        //       opacity: 0.8;
        //     }
        //   }
        //   .sameCon {
        //     display: block;
        //   }
        //   .close {
        //     display: block;
        //   }
        // }
      }
    }
  }
}

.location_active {
  color: #ffffff !important;
  background-color: #f10215 !important;
}
.icon1_active {
  color: #e40015 !important;
}
.iconLink1_active {
  color: #e40015 !important;
}
.iconLink1_active::after {
  content: '';
  width: 24px;
  height: 2px;
  background-color: #e1251b;
  position: absolute;
  top: 25px;
  left: 17px;
}
.card_active {
  background-color: #e1251b;
  color: #fff !important;
  border-radius: 14px;
}
/deep/.el-link--inner {
  font-size: 12px;
}
/deep/.el-input__inner {
  border: 0;
  color: #666666;
}
/deep/.el-input-group__append {
  border: 0;
  background-color: #e1251b;
  border-radius: 0px;
}
/deep/.el-icon-search {
  font-weight: bolder;
  color: #fff;
}
/deep/.el-link.el-link--default:hover .el-link--inner {
  color: #e1251b;
}
/deep/.el-link.el-link--default:hover .el-link--inner:hover {
  cursor: pointer;
}
/deep/.el-carousel__button {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
/deep/.el-form-item__label {
  font-size: 12px;
  color: #666;
  text-align: center;
}
/deep/.el-form-item__content {
  margin-left: 10px !important;
}
/deep/.el-form-item {
  margin: 0px;
}
/deep/.el-tabs__nav-wrap::after {
  display: none !important;
}
</style>
