点击左侧导航 轮播图定位 轮播图导航

点击左侧导航 轮播图定位

<template>
  <div class="service_contain">
    <Spin size="large" fix v-if="spinShow"></Spin>

    <div class="bgImg">
      <!-- <img src="../assets/img/service/servicebanner.png" alt="" />
      <span class="banner_title">
        {{ $store.state.isChinese ? '服务中心' : 'Service center' }}</span
      > -->
      <div class="banner">
        <Carousel
          v-model="value2"
          loop
          :autoplay="autoplay"
          arrow="always"
          :autoplay-speed="autoplaySpeed"
        >
          <CarouselItem
            v-for="(item, i) in carouselItemImglist"
            :key="i + 'mm'"
          >
            <div
              class="demo-carousel"
              @mouseenter="mouseenterImg()"
              @mouseleave="mouseleaveImg()"
            >
              <img :src="item.src" alt="" />
            </div>
          </CarouselItem>
        </Carousel>
      </div>
    </div>

    <div class="describe">
      <div class="describe_top">
        111
      </div>

      <div class="describe_nav">
        <p
          v-for="(item, i) in navListp"
          :key="i + 'pp'"
          @click="toBusinessBox(item, i)"
        >
          {{ item }}
        </p>
      </div>

      <div class="fa_carousel">
        <div class="arrow_left" @click="leftMove()">zuo</div>
        <div class="carousel">
          <div
            class="businessBox"
            @mouseenter="moreEnter(i)"
            @mouseleave="moreLeave(i)"
            v-for="(item, i) in navListNew"
            :key="i + 'cc'"
            @click="toChangeTabs(item, i)"
          >
            {{ currentNum }}===this.currentNum
            <div
              style="height:100%"
              :class="{ colorLineHeight: item.id == moduleId }"
            >
              item.isChangeHeight==={{ item.isChangeHeight }}
              <br />
              {{ item.num }}
              <!-- <div class="businessBox_content">
                <img
                  :src="item.isChangeHeight ? item.hoverSrc : item.src"
                  alt=""
                  :key="imgNum"
                />
                <h3
                  class="title"
                  :class="{ colorfont: item.id == moduleId }"
                  style="text-align:center"
                >
                  {{ $store.state.isChinese ? item.name : item.nameEn }}
                </h3>
                <h4
                  :class="{ colorfont: item.id == moduleId }"
                  style="text-align:center"
                >
                  {{ $store.state.isChinese ? item.summary : item.summaryEn }}
                </h4>
              </div> -->
            </div>
          </div>
        </div>
        <div class="arrow_right" @click="rightMove()">you</div>
      </div>

      <!-- detail -->
      <div class="companyList">
        <h2 style="margin:30px 5%">
          {{
            $store.state.isChinese
              ? '合格服务商'
              : 'Qualified service provider'
          }}<span style="color:#999999">
            {{
              $store.state.isChinese
                ? '按首字母排序(排名不分先后)'
                : 'Alphabetical order'
            }}</span
          >

          <RadioGroup
            v-model="radioGroup"
            style="margin-left:20px;font-weight:400"
          >
            <Radio
              :label="$store.state.isChinese ? '查看全部' : 'Look at all'"
            ></Radio>
            <Radio
              :label="
                $store.state.isChinese ? '查看收藏' : 'See the collection'
              "
              style="margin-left:20px;"
            ></Radio>
          </RadioGroup>
        </h2>

        <div class="main_table">
          <ul
            v-for="(item, i) in detailList"
            :key="i + 'pp'"
            :class="'letter' + item.letter"
          >
            <li
              v-for="(li, m) in item.list"
              :key="m + 'yy'"
              @click="openUrl(li.naviUrl)"
            >
              <div style="color:#666666;width:200px">
                {{ li.isletter ? li.letter : '' }}
              </div>
              <div
                class="bg_div"
                style="border-bottom: 1px solid #F0F0F0;padding-left:50px;width:300px"
              >
                <span class="logo">{{ item.letter }} </span>
              </div>
              <div
                class="bg_div"
                style=" border-bottom: 1px solid #F0F0F0;  overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;"
              >
                {{ $store.state.isChinese ? li.naviName : li.naviNameEn }}
              </div>
              <div class="bg_div" style=" border-bottom: 1px solid #F0F0F0;">
                {{ $store.state.isChinese ? li.country : li.companyEn }}
              </div>
              <div
                class="bg_div"
                style=" border-bottom: 1px solid #F0F0F0;  overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;"
              >
                {{ li.naviUrl }}
              </div>
              <div
                class="bg_div"
                style=" border-bottom: 1px solid #F0F0F0;text-align: right;width:100px"
              >
                <Icon
                  type="ios-heart"
                  :color="li.iscolor ? 'red' : '#BEBEBE'"
                  @click.stop="collection(i, m)"
                  :key="colorNum"
                />
              </div>
            </li>
          </ul>
          <ul class="more_ul">
            <li style="text-align: center;">
              <span class="more">
                {{ $store.state.isChinese ? '查看更多' : ' To view more' }}
              </span>
            </li>
          </ul>
          <div class="letter" :class="isFixed ? 'Fixed' : ''">
            <p
              :class="{ currentletterColor: currentletter == i }"
              v-for="(item, i) in letterArr"
              :key="i + 'll'"
              @click="toCurrentletter(i)"
            >
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@/assets/js/util.js';
export default {
  name: 'service',
  data() {
    return {
      currentNum: 0,
      navListp: [
        { id: 4, num: 4 },
        { id: 1, num: 1 },
        { id: 3, num: 3 },
        { id: 2, num: 2 },
        { id: 5, num: 5 },
        { id: 6, num: 6 },
        { id: 7, num: 7 },
        { id: 8, num: 8 },
      ],
      autoplay: true,
      autoplaySpeed: 10000,
      value2: 0,
      carouselItemImglist: [
        {
          src: require('../assets/img/home/banner01.png'),
        },
        {
          src: require('../assets/img/home/banner02.png'),
        },
        {
          src: require('../assets/img/home/banner03.png'),
        },
      ],
      radioGroup: '查看全部',
      colorNum: 0,
      currentletter: 0,
      letterArr: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '#',
      ],
      moduleId: 4,
      detailList: [],
      spinShow: false,
      navList: [],
      navListNew: [
        { id: 4, num: 4 },
        { id: 1, num: 1 },
        { id: 3, num: 3 },
        { id: 2, num: 2 },
        { id: 5, num: 5 },
        { id: 6, num: 6 },
        { id: 7, num: 7 },
        { id: 8, num: 8 },
        { id: 9, num: 9 },
      ],
      imgList: [
        {
          src: require('../assets/img/home/a1.png'),
          hoverSrc: require('../assets/img/home/a01.png'),
        },
        {
          src: require('../assets/img/home/a2.png'),
          hoverSrc: require('../assets/img/home/a02.png'),
        },
        {
          src: require('../assets/img/home/a3.png'),
          hoverSrc: require('../assets/img/home/a03.png'),
        },
        {
          src: require('../assets/img/home/a4.png'),
          hoverSrc: require('../assets/img/home/a04.png'),
        },
      ],

      value2: 0,
      imgNum: 0,
      // currentfade: null,
      currentTab: null,
      isFixed: false,
    };
  },
  created() {
    this.getNavList();
    this.moduleId = this.$route.query.moduleId ? this.$route.query.moduleId : 4;
    if (this.$route.query.i) {
      this.toChangeTabs(this.$route.query.item, this.$route.query.i);
    } else {
    }

    this.getNaviListByModuleId();
  },
  watch: {},
  mounted() {
    window.addEventListener('scroll', this.showIcon);
    window.addEventListener('scroll', this.checkScroll);
  },

  methods: {
    leftMove() {
      if (this.currentNum > 0 && this.currentNum <= 6) {
        let width = $('.fa_carousel').width() / 4;
        $('.carousel').css({
          marginLeft: -this.currentNum * width + width + 'px',
           transition: 'all 1s'
        });
         
        this.currentNum--;
        
      } else {
        alert('不能拖动了');
      }
    },
    rightMove() {
      if (this.currentNum >= -1 && this.currentNum < 6) {
        this.currentNum++;
        let width = $('.fa_carousel').width() / 4;
        $('.carousel').css({ marginLeft: -this.currentNum * width + 'px',
         transition: 'all 1s' });
      } else {
        alert('不能拖动了');
      }
    },
    toBusinessBox(item, v) {
      this.currentNum = v;
      if (v <= 6) {
         let width = $('.fa_carousel').width() / 4;
        $('.carousel').css({ marginLeft: -v * width + 'px' });
      }

      this.moduleId = item.id;
      this.navList.forEach((item, i) => {
        if (v != i) {
          this.navList[i].isChangeHeight = false;
        } else {
          this.navList[i].isChangeHeight = true;
        }
      });
      this.getNaviListByModuleId();
    },
    mouseenterImg() {
      this.autoplay = false;
    },
    mouseleaveImg() {
      this.autoplay = true;
    },
    // 页面滚动对应字母导航
    checkScroll() {
      this.letterArr.forEach((item) => {
        // 判断数据是否含有该字母
        this.detailList.forEach((li) => {
          // 如果有
          if (li.letter == item) {
            var cont1 = $(`.main_table .letter${item}`).offset().top - 100;
            var className = $(`.main_table .letter${item}`).attr('class');
            className = className.substr(className.length - 1, 1);
            var cont2 =
              $(`.main_table .letter${item}`).offset().top +
              $(`.main_table .letter${item}`).height() -
              100;
            var t =
              document.documentElement.scrollTop || document.body.scrollTop;
            if (t >= cont1 && t <= cont2) {
              this.letterArr.forEach((item, i) => {
                if (item == className) {
                  this.currentletter = i;
                }
              });
            } else {
            }
          }
        });
      });
    },
    // 收藏事件
    collection(i, m) {
      this.$Modal.warning({
        title: '提示',
        content: '请登录账号',
      });
      // 登录后可收藏
      // this.colorNum++;
      // this.detailList[i].list[m].iscolor = !this.detailList[i].list[m].iscolor;
    },
    showIcon() {
      if (document.documentElement.scrollTop > $('.letter').height()) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    openUrl(naviUrl) {
      window.open(naviUrl, '_blank');
    },
    toCurrentletter(i) {
      this.currentletter = i;
      this.detailList.forEach((item) => {
        if (item.letter == this.letterArr[i]) {
          $('body,html').animate(
            { scrollTop: $(`.letter${this.letterArr[i]}`).offset().top - 80 },
            1000,
          );
        }
      });
    },
    naviUrl(naviUrl) {
      window.open(naviUrl, '_blank');
    },
    toChangeTabs(item, v) {
      this.moduleId = item.id;
      this.navList.forEach((item, i) => {
        if (v != i) {
          this.navList[i].isChangeHeight = false;
        } else {
          this.navList[i].isChangeHeight = true;
        }
      });
      this.getNaviListByModuleId();
    },
    getNaviListByModuleId() {
      util
        .get(`/fta/fta/getNaviListByModuleId?moduleId=${this.moduleId}`)
        .then((response) => {
          if (response.code == 100) {
            let res = response.entity || [];
            res.forEach((item, i) => {
              item.list.forEach((li, m) => {
                li.letter = item.letter;
                li.isletter = false;
                li.iscolor = false;
                item.list[0].isletter = true;
              });
            });
            this.detailList = res;
          }
        })
        .catch((error) => {});
    },

    getNavList() {
      this.spinShow = true;
      util
        .get('/fta/fta/getModuleList')
        .then((response) => {
          if (response.code == 100) {
            this.navList = response.entity || [];
            this.imgList.forEach((item, m) => {
              this.navList[m].isChangeHeight = false;
              if (this.$route.query.i) {
                this.navList.forEach((item, i) => {
                  if (this.$route.query.i == i) {
                    this.navList[i].isChangeHeight = true;
                  }
                });
              } else {
                this.navList[m].isChangeHeight = false;
                this.navList[0].isChangeHeight = true;
              }

              for (var key in item) {
                this.navList[m][key] = item[key];
              }
            });
            this.spinShow = false;
          }
        })
        .catch((error) => {});
    },

    moreEnter(v) {
      if (this.navList[v].fade == v) {
        // this.currentfade = v;
      }
      this.imgNum++;
    },
    moreLeave(v) {
      if (this.navList[v].fade == v) {
        // this.currentfade = v;
      }
      this.imgNum++;
    },
  },
};
</script>

<style lang="less" scoped>
.service_contain {
  width: 100%;
  position: relative;
  min-width: 1200px;

  .currentletterColor {
    color: #0092df !important;
    font-weight: bold;
  }
  .colorfont {
    color: #ffffff !important;
  }
  .colorLineHeight {
    background: linear-gradient(
      180deg,
      rgba(2, 146, 194, 0.9),
      rgba(3, 124, 183, 0.9) 100%
    );
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #ffffff;
  }

  .bgImg {
    position: relative;
    width: 100%;
    height: 60%;
    .banner_title {
      position: absolute;
      z-index: 9999;
      right: 5%;
      bottom: 10%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-size: 50px;
    }
    img {
      width: 100%;
      // height: 100%;
    }
    // 轮播图
    .banner {
      position: relative;
      width: 100%;
      height: 600px;
      .ivu-carousel {
        height: 100%;
        /deep/.ivu-carousel-arrow {
          width: 80px;
          height: 80px;
          font-size: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        /deep/.ivu-carousel-dots-inside {
          bottom: 50px;
        }
        /deep/.ivu-carousel-dots li button {
          width: 40px;
          height: 4px;
          background: #ffffff;
          opacity: 1;
          border-radius: 80px;
          margin-right: 30px;
        }
        /deep/.ivu-carousel-dots .ivu-carousel-active button {
          width: 40px;
          height: 4px;
          background: #0092df;
          opacity: 1;
          border-radius: 80px;
        }

        img {
          display: block;
          width: 100%;
          height: 600px;
        }
      }
    }
  }
  .describe {
    padding: 0 100px;
    padding-top: 300px;
    width: 100%;
    height: 2000px;
    background-color: pink;
    position: relative;
    // overflow: hidden;
    // height: 100%;
    .describe_top {
      position: absolute;
      width: 60%;
      height: 400px;
      top: -100px;
      z-index: 99;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: skyblue;
    }
    .describe_nav {
      display: inline-block;
      position: sticky;
      top: 100px;
      width: 10%;
      height: 500px;
      background-color: rgb(131, 103, 103);
    }
    .fa_carousel {
      position: absolute;
      top: 300px;
      left: 50%;
      transform: translate(-50%, 0);

      display: inline-block;
      // margin-left: 30%;
      // width: 70%;
      // width: 1200px;
      min-width: 1200px;
      height: 360px;
      border: 1px solid olivedrab;
      overflow: hidden;
      margin-top: 10px;
      // margin-left: 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .arrow_left {
        position: absolute;
        z-index: 9999;
        left: 0px;
      }
      .arrow_right {
        position: absolute;
        z-index: 9999;
        right: 0px;
      }
      .carousel {
        position: absolute;
        width: 3000px;
        display: block;
        height: 360px;
        background-color: rgb(255, 255, 255);
        // left: -250px;

        .businessBox {
          display: inline-block;
          position: relative;
          height: 100%;
          width: 300px;
          border-right: 1px solid #e0e0e0;
          cursor: pointer;
          .businessBox:last-child {
            border-right: none;
          }

          .businessBox_content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            height: 100%;
            img {
              width: 90px;
              height: 90px;
            }
            .title {
              font-size: 30px;
              font-weight: normal;
              color: #333333;
              margin-top: 50px;
            }
            h4 {
              font-size: 16px;
              color: #666666;
              margin-top: 30px;
            }
            ul {
              position: relative;
              height: 0px;
              overflow: hidden;
              margin-top: 30px;
              li {
                width: 280px;
                height: 50px;
                border-bottom: 1px solid #fff;
                text-align: center;
                line-height: 50px;
                color: #ffffff;
              }
              li:first-child {
                background: #ffffff;
                opacity: 0.75;
                color: #0092df;
              }
              li:last-child {
                border-bottom: none;
              }
            }
            .more {
              margin-top: 60px;
              width: 140px !important;
              height: 50px !important;
              border: 1px solid #0092df !important;
              opacity: 1;
              border-radius: 80px;
              color: #0092df;
              line-height: 50px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
        .businessBox:hover {
          background-color: #ddd;
        }
        // .triangle {
        //   left: 50%;
        //   margin-left: -13px;
        //   bottom: -40px;

        //   position: absolute;
        //   box-sizing: border-box;
        //   width: 26px;
        //   height: 12px;
        //   border: 20px solid;
        //   border-color: rgba(3, 124, 183, 0.9) transparent transparent transparent;
        // }
      }
    }
    .companyList {
      //  margin-left: 5%;
      position: absolute;
      transform: translate(-50%, 0);
      left: 50%;
      width: 70%;
      background-color: #fff;
      // padding-top: 50px;
      min-height: 1000px;
      top: 700px;

      .main_table {
        margin-bottom: 100px;
        padding-top: 30px;
        position: relative;
        width: 100%;
        padding: 0 5%;
        ul {
          // position: relative;
          width: 90%;
          li {
            height: 100px;
            line-height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            div {
              width: 100%;
              height: 100px;
              display: inline-block;
              font-size: 20px;
              font-weight: normal;
              color: #222222;
            }

            div:nth-child(1) {
              margin-right: none;
              white-space: none;
              text-overflow: none;
              padding-right: none;
            }

            .logo {
              display: inline-block;
              width: 40px;
              height: 40px;
              background: #0092df;
              border-radius: 50%;
              text-align: center;
              line-height: 40px;
              color: white;
            }
          }
          li:hover .bg_div {
            cursor: pointer;
            background-color: #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
          }

          .more_ul {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .more_ul:hover {
            background-color: none;
          }
          .more {
            display: inline-block;
            margin: 50px auto;
            width: 140px;
            height: 50px;
            border: 1px solid #0092df !important;
            opacity: 1;
            border-radius: 4px;
            color: #0092df;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
          }
        }
        .letter {
          position: absolute;
          top: -30px;
          right: 10%;
          // bottom: 0px;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          p {
            padding: 4px 3px;
            line-height: 18px;
            color: #666666;
            cursor: pointer;
          }
        }
        .Fixed {
          position: fixed;
          // top: 80px;
          right: 10%;
          bottom: 0px !important;
        }
      }

      h2 {
        font-size: 20px;
        span {
          color: #ccc;
          font-size: 14px;
          font-weight: normal;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>