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

点击左侧导航轮播图定位

<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 : li.companyEn }}</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>

点击左侧导航轮播图定位轮播图导航相关推荐

小黑仿生轮腿机器人（三）-SLAM导航
1. 功能描述本文将利用键盘控制轮腿运动完成slam建图,并能在已建好的地图里进行自主导航.slam导航可以拆分为三步: 第一步:能用键盘控制轮腿机器人运动: 第二步:基于实际场景,用键盘控制轮腿机 ...
常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）
PC端轮播图 1. 第一种轮播图(自动慢慢滑动,多用于展示) HTML部分: <div id="box"> <ul id="banner"&g ...
HTML---百度新闻轮播图--定位练习
HTML-百度新闻轮播图–定位练习照常是记录自己的学习还有希望能够与大家交流分享如果那里有错误或者是不足的地方,希望大家能够在评论区指出来都会一一回复的底下的代码都是附带详细解释的这一次的 ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
JS实现轮播图特效（带二级导航）
按照国际惯例先放效果图 index.html <!DOCTYPE html> <htmllang="en"> <head><metacha ...
vue pc端商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
jquery手写轮播图_jquery 轮播图怎么写
jquery轮播图的实现方法:首先创建一个放置的盒子"p.focus":然后将overflow设置为hidden:接着通过javascript实现点击左右翻页切换图片的功能即可. ...

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

点击左侧导航轮播图定位轮播图导航相关推荐

最新文章

热门文章

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

点击左侧导航 轮播图定位 轮播图导航相关推荐

最新文章

热门文章

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

点击左侧导航轮播图定位轮播图导航相关推荐