<div style="background-color:white" class="moreservice">
  <el-carousel :interval="5000" arrow="never" height="490px">
    <el-carousel-item v-for="item in loopplays" style="height:100%">
      <div class="el_gsb_img" :style="\'background: url(\' + item.leftimg + \') center center no-repeat;\'"></div>
      <!-- <img ref="imgHeight" :src="item.leftimg" style="width:100%;height:100%"/> -->
    </el-carousel-item>
  </el-carousel>
  <!-- 第二版 -->
  <div class="popups-two">
    <div class="popups-two-main" @mouseleave="popupsLeave">
      <div class="popups-two-main-left">
        <div v-for="(item,key) in popupsData" v-if="key < 6" :class="pTowDataKey == key ? \'popups-two-left-item-cla\' : \'popups-two-left-item\'" @mouseenter="popupsList(item,key)" >
          <span class="popups-two-left-item-span" :style="pTowDataKey == key ? \'border-bottom: none;\' : \'\'">
            {{item.itemTypeName}} <i class="el-icon-arrow-right" style="float: right;margin-top: 22px;"></i>
          </span>
        </div>
      </div>
      <div class="popups-two-right" v-if="pTowDataKey != null">
        <div v-for="list in popupsDataList">
          <div class="clearfix" style="padding-top: 18px;padding-bottom: 4px;border-bottom:1px solid rgba(225,225,225,1);">
            <div class="popups-tow-right-title">{{list.serviceSmallClassTypeName}}<i class="el-icon-arrow-right" style="float: right;margin-top:3px;color: #1a1a1a;"></i></div>
            <div class="popups-tow-right-lists">
                <div class="popups-tow-right-it" v-for="it in list.productList" @click="goServiceDetails(it)">
                  {{it.name}}
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="height:104px;width:1200px;margin:0 auto">
      <div class="home-search-pos" style="text-align:center;z-index:99;margin-top:30px">
          <el-input  style="width:800px;margin-top:10px;"  v-model="inputstr" placeholder="请输入商标名称、申请号、申请人等信息" @keyup.enter.native="onfocus">
            <el-button slot="append" @click= "onfocus"  icon="el-icon-search" style="font-size: 16px;z-index:9999;border: none;">检索</el-button>
          </el-input>
      </div>
  </div>
  <!-- shangbiao -->
  <div style="width:100%;height: 100%;background-color:#f5f5f5;box-shadow:0px 2px 4px 0px rgba(47,47,47,0.1);padding:40px 0;box-sizing: border-box;" >
    <div v-for="(item,index) in datalist" style="width:1200px;margin:0 auto">
      <div v-if="index < 6" style="background-color: #fff;height:460px;padding:10px;margin-bottom:32px;">
        <div class="colorPieceModel" :style="item.oneIconUrl || bgcArr[index]">
          <img :src="item.oneIconUrl" alt="">
        </div>
        <div style="position: relative;float:left;width:950px;height:460px;background-color: #f6f4ef;border-radius: 8px;margin-left:10px;overflow: hidden;">
            <i v-if="item.smallList.length > 3" class="el-icon-arrow-right moreservice-spring-right-button" :id="item.itemType + \'-button\'" @click="rightServiceModule(index,item.smallList)"></i>
            <i v-if="item.smallList.length > 3" class="el-icon-arrow-left moreservice-spring-left-button" :id="item.itemType + \'-button\'" @click="leftServiceModule(index,item.smallList)"></i>
          <div style="float: left;width: 300%;height: 100%;-webkit-transition: transform 0.3s linear;" ref="serviceModule">
            <!-- 1 -->
            <div style="float:left;width:950px;height:460px;">
              <div v-for="(it,key) in item.smallList" v-if="key < 3" style="float:left;width:100%;">
                <div class="serviceSmallName" :style="bgcArr2[bgcUrl.indexOf(item.oneIconUrl)]"> 
                  <img :src="it.serviceSmallClassTypeIconUrl ? it.serviceSmallClassTypeIconUrl : \'/imgs/icon_china.png\'" alt="" class="serviceSmallImg" :style="it.serviceSmallClassTypeIconUrl ? \'margin-top:8px;\' : \'margin-top:19px;\'">
                  {{it.serviceSmallClassTypeName}}
                </div>
                <ul class="serviceSmall" :id="item.itemType">
                  <li v-for="(i,k) in it.productList" v-if="k < 3" @click="goServiceDetails(i)">
                    <h5>{{i.name}}</h5>
                    <p>{{i.shortDesc}}</p>
                    <span>{{i.price}}元</span>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 2 -->
            <div style="float:left;width:950px;height:460px;">
              <div v-for="(it,key) in item.smallList" v-if="key >= 3" style="float:left;width:100%;">
                <div class="serviceSmallName" :style="bgcArr2[bgcUrl.indexOf(item.oneIconUrl)]"> 
                  <img :src="it.serviceSmallClassTypeIconUrl ? it.serviceSmallClassTypeIconUrl : \'/imgs/icon_china.png\'" alt="" class="serviceSmallImg" :style="it.serviceSmallClassTypeIconUrl ? \'margin-top:8px;\' : \'margin-top:19px;\'">
                  {{it.serviceSmallClassTypeName}}
                </div>
                <ul class="serviceSmall" :id="item.itemType">
                  <li v-for="(i,k) in it.productList" v-if="k < 3" @click="goServiceDetails(i)">
                    <h5>{{i.name}}</h5>
                    <p>{{i.shortDesc}}</p>
                    <span>{{i.price}}元</span>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 3 -->
            <div style="float:left;width:950px;height:460px;">
              <div v-for="(it,key) in item.smallList" v-if="6 > key > 3" style="float:left;width:100%;">
                <div class="serviceSmallName" :style="bgcArr2[bgcUrl.indexOf(item.oneIconUrl)]"> 
                  <img :src="it.serviceSmallClassTypeIconUrl ? it.serviceSmallClassTypeIconUrl : \'/imgs/icon_china.png\'" alt="" class="serviceSmallImg" :style="it.serviceSmallClassTypeIconUrl ? \'margin-top:8px;\' : \'margin-top:19px;\'">
                  {{it.serviceSmallClassTypeName}}
                </div>
                <ul class="serviceSmall" :id="item.itemType">
                  <li v-for="(i,k) in it.productList" v-if="k < 3" @click="goServiceDetails(i)">
                    <h5>{{i.name}}</h5>
                    <p>{{i.shortDesc}}</p>
                    <span>{{i.price}}元</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="spring_daohang">
            <div :class="swiperNum < -960 ? \'spring_daohang_list_xz\' : \'spring_daohang_list\'" v-if="item.smallList.length > 6" :style="bgcArr[index]" @click="moveLocation(index,1920)"></div>
            <div :class="swiperNum < 0 ? \'spring_daohang_list_xz\' : \'spring_daohang_list\'" v-if="item.smallList.length > 3" :style="bgcArr[index]" @click="moveLocation(index,960)"></div>
            <div :class="swiperNum == 0 ? \'spring_daohang_list_xz\' : \'spring_daohang_list\'" v-if="item.smallList.length > 3" :style="bgcArr[index]" @click="moveLocation(index,0)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- zhuanli -->
  <!-- <div style="width:100%;background-color:#f5f5f5;box-shadow:0px 2px 4px 0px rgba(47,47,47,0.1);padding:40px 0;" >
      <div v-for="(item,index) in datalist" style="width:1200px;margin:0 auto">
        <div v-if="index !=0 && index < 3" style="background-color: #fff;height:460px;padding:10px;margin-bottom:32px;">
          <div class="colorPieceModel" :style="bgcArr[index]">
            <span style="margin-top:42px;display: inline-block">{{item.itemTypeName}}服务</span>
          </div>
          <div style="float:left;width:950px;height:460px;background-color: #f6f4ef;border-radius: 8px;margin-left:10px;overflow: hidden;">
            <div v-for="(it,key) in item.smallList" style="float:left;width:100%;">
              <div class="serviceSmallName" :style="bgcArr[index]"> 
                <img src="/imgs/icon_china.png" alt="" style="width:46px;height:32px;margin:0 auto;display: block;margin-top: 20px;margin-bottom: 5px;">
                {{it.serviceSmallClassTypeName}}{{it.code}}
              </div>
              <ul class="serviceSmall" :id="item.itemType">
                <li class="serviceSmall-li" v-for="(i,k) in it.productList" v-if="k < 3">
                  <h5>{{i.name}}</h5>
                  <p>{{i.shortDesc}}</p>
                  <span>{{i.price}}元</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  </div> -->
</div>
