点击左侧导航 轮播图定位
<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"><Carouselv-model="value2"loop:autoplay="autoplay"arrow="always":autoplay-speed="autoplaySpeed"><CarouselItemv-for="(item, i) in carouselItemImglist":key="i + 'mm'"><divclass="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"><pv-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"><divclass="businessBox"@mouseenter="moreEnter(i)"@mouseleave="moreLeave(i)"v-for="(item, i) in navListNew":key="i + 'cc'"@click="toChangeTabs(item, i)">{{ currentNum }}===this.currentNum<divstyle="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"/><h3class="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><RadioGroupv-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"><ulv-for="(item, i) in detailList":key="i + 'pp'":class="'letter' + item.letter"><liv-for="(li, m) in item.list":key="m + 'yy'"@click="openUrl(li.naviUrl)"><div style="color:#666666;width:200px">{{ li.isletter ? li.letter : '' }}</div><divclass="bg_div"style="border-bottom: 1px solid #F0F0F0;padding-left:50px;width:300px"><span class="logo">{{ item.letter }} </span></div><divclass="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 : panyEn }}</div><divclass="bg_div"style=" border-bottom: 1px solid #F0F0F0; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ li.naviUrl }}</div><divclass="bg_div"style=" border-bottom: 1px solid #F0F0F0;text-align: right;width:100px"><Icontype="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>
