Skip to content

C
chifengweb2.0
Commit 7aa1b5c7 authored by sxl's avatar sxl 💬
Browse files
Options

fix:swiper滚动bug修复

parent 45c8d980
Hide whitespace changes
Inline Side-by-side
Showing with 551 additions and 378 deletions
_id1.vue
View file @ 7aa1b5c7
......@@ -3,19 +3,10 @@
<!-- 头部和对话框部分保持不变 -->
<BackToTopButton />
<Header :activeIndex="4" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" />
<!-- 留言对话框 -->
<el-dialog
:title="conDia.lifeCycleName"
:visible.sync="showConfirmButton"
width="30%"
center
>
<el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center>
<!-- 对话框内容保持不变 -->
</el-dialog>
......@@ -36,27 +27,14 @@
<!-- 主内容轮播 -->
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="parentItem in lifeServiceList"
:key="parentItem.lifeCycleId"
>
<div class="swiper-slide" v-for="parentItem in lifeServiceList" :key="parentItem.lifeCycleId">
<div class="slide-content">
<div
v-for="childItem in parentItem.children"
:key="childItem.lifeCycleId"
class="service-item"
@click="showTip(childItem)"
>
<img
src="~/static/images/technicalDocking/circle.png"
/>
<div v-for="childItem in parentItem.children" :key="childItem.lifeCycleId" class="service-item"
@click="showTip(childItem)">
<img src="~/static/images/technicalDocking/circle.png" />
<span>{{ childItem.lifeCycleName }}</span>
</div>
<div
class="placeholder"
v-if="parentItem.children.length % 2"
></div>
<div class="placeholder" v-if="parentItem.children.length % 2"></div>
</div>
</div>
</div>
......@@ -67,19 +45,12 @@
<!-- 缩略图轮播 -->
<div class="swiper thumb-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
>
<div class="swiper-slide" v-for="(item, index) in lifeServiceList" :key="item.lifeCycleId">
<span>
<img
:src="`${baseApi}${
currentLifeServiceItemIndex === index
? item.revealIcon
: item.hiddenIcon
}`"
/>
<img :src="`${baseApi}${currentLifeServiceItemIndex === index
? item.revealIcon
: item.hiddenIcon
}`" />
{{ item.lifeCycleName }}
</span>
</div>
......@@ -98,17 +69,9 @@
<div class="tec-com">
<div class="swiper unit-swiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in unitList"
:key="index"
>
<div class="swiper-slide" v-for="(item, index) in unitList" :key="index">
<ul>
<li
v-for="(subItem, idx) in item"
:key="idx"
@click="goto(subItem.id)"
>
<li v-for="(subItem, idx) in item" :key="idx" @click="goto(subItem.id)">
<!-- 单位详情内容保持不变 -->
</li>
</ul>
......@@ -467,9 +430,11 @@ export default {
<style lang="scss" scoped>
/* 通用轮播样式 */
.swiper {
&-button-next,
&-button-prev {
background-size: contain;
&::after {
display: none;
}
......@@ -526,8 +491,7 @@ export default {
}
.swiper-button-next {
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
center;
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat center;
width: 85px;
height: 44px;
top: 390px;
......@@ -535,8 +499,7 @@ export default {
}
.swiper-button-prev {
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
center;
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat center;
width: 94px;
height: 44px;
top: 390px;
......@@ -556,8 +519,7 @@ export default {
.swiper-slide {
height: 60px !important;
line-height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
left center;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
span {
font-size: 18px;
......@@ -575,6 +537,7 @@ export default {
&-thumb-active {
background-image: url(~/static/images/technicalDocking/zzbl_hd_li_on.png);
span {
color: #fff;
font-weight: bold;
......@@ -586,16 +549,14 @@ export default {
/* 技术服务方轮播 */
.mySwiper3 {
.swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
top: 160px;
right: 0;
width: 27px;
}
.swiper-button-prev {
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
top: 160px;
left: 0;
width: 27px;
......
pages/TechnicalDocking/index.vue
View file @ 7aa1b5c7
......@@ -2,52 +2,25 @@
<div class="tech">
<BackToTopButton />
<Header :activeIndex="4" />
<CommonDialog
:show="dialogVisible"
@close-dialog="handleCloseDialog"
:omDemandName="omDemandName"
/>
<el-dialog
:title="conDia.lifeCycleName"
:visible.sync="showConfirmButton"
width="30%"
center
>
<CommonDialog :show="dialogVisible" @close-dialog="handleCloseDialog" :omDemandName="omDemandName" />
<el-dialog :title="conDia.lifeCycleName" :visible.sync="showConfirmButton" width="30%" center>
<span>
{{ conDia.intro }}
</span>
<div class="mt20"></div>
<div>
<el-form
label-width="90px"
:model="formDia"
:rules="rules"
ref="formDia"
label-position="right"
>
<el-form label-width="90px" :model="formDia" :rules="rules" ref="formDia" label-position="right">
<el-form-item label="姓名:" prop="omContactName">
<el-input
v-model="formDia.omContactName"
placeholder="请输入联系人姓名"
></el-input>
<el-input v-model="formDia.omContactName" placeholder="请输入联系人姓名"></el-input>
</el-form-item>
<el-form-item label="联系方式:" prop="omContactTel">
<el-input
v-model="formDia.omContactTel"
placeholder="请输入联系方式"
></el-input>
<el-input v-model="formDia.omContactTel" placeholder="请输入联系方式"></el-input>
</el-form-item>
<el-form-item label="留言内容:" prop="omInquiryContent">
<el-input
type="textarea"
v-model="formDia.omInquiryContent"
placeholder="请输入留言内容"
></el-input>
<el-input type="textarea" v-model="formDia.omInquiryContent" placeholder="请输入留言内容"></el-input>
</el-form-item>
<el-form-item style="display: flex; justify-content: center">
<el-button type="primary" @click="formSub('formDia')"
>我要留言</el-button
>
<el-button type="primary" @click="formSub('formDia')">我要留言</el-button>
</el-form-item>
</el-form>
</div>
......@@ -66,102 +39,46 @@
<div class="zzbl" style="display: block">
<!-- 轮播详情模块 -->
<div class="swiper mySwiper2 swiper-initialized swiper-vertical">
<div
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
<div class="swiper-wrapper" id="certificationList" aria-live="polite" style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<div
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="item1 in lifeServiceList"
:key="item1.lifeCycleId"
>
<div
style="
">
<div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="item in lifeServiceList2"
:key="item.lifeCycleId" @mouseenter="swiper2.autoplay.stop()"
@mouseleave="swiper2.autoplay.start()">
<div style="
overflow-y: scroll;
display: flex;
max-height: 430px;
justify-content: space-evenly;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
"
>
<div
v-for="(item1, index) in item1.children"
:key="item1.lifeCycleId"
class="items-class"
>
<img
src="~/static/images/technicalDocking/circle.png"
alt=""
/>
">
<div v-for="(item1, index) in item.children" :key="item1.lifeCycleId" class="items-class">
<img src="~/static/images/technicalDocking/circle.png" alt="" />
<span @click="showTip(item1)">{{
item1.lifeCycleName
}}</span>
</div>
<div
class="items-class"
v-if="item1.children.length % 2 == 1"
></div>
<!-- <div class="items-class" v-if="item.children.length % 2 == 1"></div> -->
</div>
</div>
</div>
<div
class="swiper-button-next"
tabindex="0"
role="button"
aria-label="Next slide"
aria-controls="certificationList"
aria-disabled="false"
></div>
<div
class="swiper-button-prev swiper-button-disabled"
tabindex="-1"
role="button"
aria-label="Previous slide"
aria-controls="certificationList"
aria-disabled="true"
></div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
<div class="swiper-button-next" @click="handleNextClick"></div>
<div class="swiper-button-prev" @click="handlePrevClick"></div>
</div>
<div class="swiper mySwiper">
<div
class="swiper-wrapper"
id="certificationOrg"
style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<div
class="swiper-slide"
v-for="(item, index) in lifeServiceList"
:key="item.lifeCycleId"
>
<!-- @click="currentLifeServiceItemIndex=index" -->
<span>
<!-- <img :src="`${baseApi}${item.revealIcon}`" alt="" /> -->
<img
:src="`${baseApi}${
currentLifeServiceItemIndex === index
? item.revealIcon
: item.hiddenIcon
}`"
alt=""
/>
{{ item.lifeCycleName }}</span
>
<div class="mySwiper">
<div class="scroll-outer">
<div id="certificationOrg">
<div :class="['mySwiper-item', { 'active': currentIndex === index }]"
v-for="(item, index) in lifeServiceList.concat(lifeServiceList)" :key="index + '-'"
@click="handleItemClick(index)">
<span>
<img :src="`${baseApi}${currentIndex === index ? item.revealIcon : item.hiddenIcon}`" alt="" />
{{ item.lifeCycleName }}
</span>
</div>
</div>
</div>
</div>
......@@ -183,81 +100,42 @@
<div class="mt30"></div>
<div class="tec-com">
<div class="swiper mySwiper3 swiper-initialized swiper-horizontal">
<div
class="swiper-wrapper"
id="certificationList"
aria-live="polite"
style="
<div class="swiper-wrapper" id="certificationList" aria-live="polite" style="
transition-duration: 0ms;
transition-delay: 0ms;
transform: translate3d(0px, 0px, 0px);
"
>
<div
class="swiper-slide"
style="height: 435px; margin-bottom: 10px"
v-for="(item, index) in unitList"
:key="index"
>
">
<div class="swiper-slide" style="height: 435px; margin-bottom: 10px" v-for="(item, index) in unitList"
:key="index">
<ul>
<!-- <li v-for="item in unitList" :key="item.chkqCompanyId"><img :src="`${baseApi}${item.chkqCompanyLogo}`" alt="" @click="goto(item.chkqCompanyId)"></li> -->
<li
v-for="(subItem, index) in item"
:key="index"
@click="goto(subItem.id)"
>
<li v-for="(subItem, index) in item" :key="index" @click="goto(subItem.id)">
<div class="top">
<div class="left">
<!-- <img :src="`${baseApi}${subItem.caseAvatarList.length ? subItem.caseAvatarList[0] : ''}`" /> -->
<img
:src="
subItem.caseAvatarList &&
subItem.caseAvatarList.length
? baseApi + subItem.caseAvatarList[0]
: ''
"
/>
<img :src="subItem.caseAvatarList &&
subItem.caseAvatarList.length
? baseApi + subItem.caseAvatarList[0]
: ''
" />
</div>
<div class="right">
<p>{{ subItem.commodityName }}</p>
<p>
<span>{{ subItem.commoditySign }}</span>
</p>
<p>
<span>{{ subItem.registeredAddress }}</span>
</p>
<p><span>{{ subItem.commoditySign }}</span></p>
<p><span>{{ subItem.registeredAddress }}</span></p>
</div>
</div>
<div class="bottom">
<p class="ellipsis">
主营业务：{{ subItem.commodityBusiness }}
</p>
<p class="ellipsis">主营业务：{{ subItem.commodityBusiness }}</p>
</div>
</li>
</ul>
</div>
</div>
<div
class="swiper-button-next"
tabindex="0"
role="button"
aria-label="Next slide"
aria-controls="certificationList"
aria-disabled="false"
></div>
<div
class="swiper-button-prev swiper-button-disabled"
tabindex="-1"
role="button"
aria-label="Previous slide"
aria-controls="certificationList"
aria-disabled="true"
></div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
aria-controls="certificationList" aria-disabled="false" @click="handleMySwiper3NextClick"></div>
<div class="swiper-button-prev" tabindex="-1" role="button" aria-label="Previous slide"
aria-controls="certificationList" aria-disabled="false" @click="handleMySwiper3PrevClick"></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
</section>
......@@ -275,7 +153,8 @@ import Header from "~/components/header/Header.vue";
import Footer from "~/components/Footer.vue";
import CommonDialog from "~/components/dialog/CommonDialog.vue";
import BackToTopButton from "~/components/BackToTopButton.vue";
import Swiper from "swiper";
import Swiper, { Navigation, Autoplay, Controller } from 'swiper';
import 'swiper/swiper-bundle.css';
export default {
components: {
Footer,
......@@ -288,7 +167,8 @@ export default {
data() {
return {
omDemandName: null,
currentLifeServiceItemIndex: 0,
currentIndex: 0,
scrollContainer: null, // 滚动容器
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
......@@ -303,6 +183,7 @@ export default {
],
baseApi: process.env.VUE_APP_File_VIEW, //"/prod-api",
lifeServiceList: [],
lifeServiceList2: [],
lifeServiceItemList: [],
currentIndex4lifeItem: 0,
expertList: [],
......@@ -338,88 +219,63 @@ export default {
trigger: "blur",
},
],
// omCompanyName: [
// { required: true, message: "请输入公司名称", trigger: "blur" },
// ],
omInquiryContent: [
{ required: true, message: "请输入需求内容", trigger: "blur" },
],
},
swiper3: null, // Swiper 实例
swiper2: null, // Swiper 实例
};
},
created() {
this.getLifeCycleList();
},
mounted() {
var _this = this;
this.$nextTick(() => {
this.$wow.init({ animateClass: "animate__animated" });
this.scrollContainer = document.getElementById('certificationOrg');
setTimeout(() => {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
direction: "vertical",
on: {
tap: function (swiperEle, event) {
// alert('你碰了Swiper');
const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
if (clickedIndex !== undefined) {
swiper.slideTo(clickedIndex, 300, true); // 滑动到点击的那一项，带有动画效果
_that.currentLifeServiceItemIndex = clickedIndex;
}
},
slideChange: function () {
// alert('改变了，activeIndex为'+this.activeIndex);
_that.currentLifeServiceItemIndex = this.activeIndex;
},
},
});
var swiper2 = new Swiper(".mySwiper2", {
spaceBetween: 10,
direction: "vertical",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
on: {
tap: function (swiperEle, event) {
// alert('你碰了Swiper');
const clickedIndex = swiperEle.clickedIndex; // 获取被点击的索引
if (clickedIndex !== undefined) {
_that.currentLifeServiceItemIndex = clickedIndex;
}
},
slideChange: function () {
// alert('改变了，activeIndex为'+this.activeIndex);
_that.currentLifeServiceItemIndex = this.activeIndex;
this.$nextTick(() => {
this.swiper2 = new Swiper('.mySwiper2', {
modules: [Navigation, Autoplay, Controller],
spaceBetween: 10,
slidesPerView: 1,
loop: false,
direction: 'vertical',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
},
});
});
var swiper3 = new Swiper(".mySwiper3", {
this.swiper3 = new Swiper(".mySwiper3", {
modules: [Autoplay],
spaceBetween: 10,
slidesPerView: 1,
direction: "horizontal",
autoplay: {
delay: 2500,
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}, 1200);
});
this.getUnitTypeList();
this.getExpertList();
this.getLifeCycleList();
},
beforeDestroy() {
// 清理 Swiper 实例
if (this.swiper2) {
this.swiper2.destroy();
this.swiper2 = null;
}
},
methods: {
showTip(item) {
console.log(item, "item");
this.showConfirmButton = true;
this.conDia = item;
this.omDemandName = item.lifeCycleName;
......@@ -436,6 +292,37 @@ export default {
handleCloseDialog(newState) {
this.dialogVisible = newState;
},
// 项目点击处理
handleItemClick(index) {
let timer = null
this.currentIndex = index;
this.lifeServiceList2 = this.sortLifeServiceList(index, JSON.parse(JSON.stringify(this.lifeServiceList)));
// swiper2停止自动滚动
this.swiper2.autoplay.stop();
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
this.swiper2.autoplay.start();
}, 3000);
},
sortLifeServiceList(idx, arr) {
// 1. 找到目标元素的下标
const index = arr.findIndex((item, i) => i === idx);
if (index !== -1) { // 如果找到了
// 2. 从原位置删除
const [removedItem] = arr.splice(index, 1);
// 3. 添加到数组开头
arr.unshift(removedItem);
}
return arr;
},
showUnitDetail(item) {
this.unitDetailShow = true;
this.unitDetail = item;
......@@ -462,10 +349,6 @@ export default {
this.expertList.push(experts.slice(i, i + 4));
}
},
changeLifeCycleItem(index) {
this.currentIndex4lifeItem = index;
this.lifeServiceItemList = this.lifeServiceList[index]["children"];
},
async getUnitTypeList1() {
const res = await sendRequest(
"/business/companyInformation/technical/service/UnitCategory",
......@@ -513,7 +396,6 @@ export default {
for (let i = 0; i < unitsTemp.length; i += 6) {
this.unitList.push(unitsTemp.slice(i, i + 6));
}
console.log(this.unitList);
}
},
async getExpertList() {
......@@ -541,6 +423,7 @@ export default {
const res = await sendRequest("/business/lifeCycle/tree", "get", {});
if (res.code === 200 && res.data.length) {
this.lifeServiceList = res.data;
this.lifeServiceList2 = res.data;
this.lifeServiceItemList = res.data[0]["children"]; // 默认显示第一个菜单
}
},
......@@ -617,6 +500,126 @@ export default {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
},
handleNextClick() {
let timer = null
// 滚动到下一个项目
if (this.currentIndex < this.lifeServiceList.length - 1) {
this.currentIndex = this.currentIndex + 1;
} else {
this.currentIndex = 0; // 循环到第一个
}
this.lifeServiceList2 = this.sortLifeServiceList(this.currentIndex, JSON.parse(JSON.stringify(this.lifeServiceList)));
// 自动滚动到激活项位置
this.scrollToActiveItem();
// swiper2停止自动滚动
this.swiper2.autoplay.stop();
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
this.swiper2.autoplay.start();
}, 3000);
},
scrollToActiveItem() {
// 自动滚动到当前激活的项目
this.$nextTick(() => {
setTimeout(() => {
const container = this.scrollContainer;
// if (container) {
const itemEls = container.querySelectorAll('.mySwiper-item');
const activeIndex = this.currentIndex;
// 由于模板中使用了 concat，需要找到正确的元素
// 找到第一个匹配的激活项（在第一个 lifeServiceList 中）
let targetElement = null;
for (let i = 0; i < itemEls.length; i++) {
const item = itemEls[i];
const itemIndex = i % this.lifeServiceList.length;
if (itemIndex === activeIndex) {
targetElement = item;
break;
}
}
if (targetElement) {
const itemTop = targetElement.offsetTop;
const containerHeight = container.clientHeight;
const itemHeight = targetElement.offsetHeight;
// 计算目标滚动位置，让激活的菜单项居中显示
const targetScrollTop = itemTop - (containerHeight / 2) + (itemHeight / 2);
// 平滑滚动到目标位置
container.scrollTo({
top: targetScrollTop,
behavior: 'smooth'
});
} else {
// 如果找不到目标元素，尝试直接使用索引
if (itemEls[activeIndex]) {
const itemTop = itemEls[activeIndex].offsetTop;
const containerHeight = container.clientHeight;
const itemHeight = itemEls[activeIndex].offsetHeight;
const targetScrollTop = itemTop - (containerHeight / 2) + (itemHeight / 2);
container.scrollTo({
top: targetScrollTop,
behavior: 'smooth'
});
}
}
// }
}, 100); // 100ms 延迟确保 DOM 渲染完成
});
},
handlePrevClick() {
let timer = null
// 滚动到上一个项目
if (this.currentIndex > 0) {
this.currentIndex--;
} else {
this.currentIndex = this.lifeServiceList.length - 1; // 循环到最后一个
}
this.lifeServiceList2 = this.sortLifeServiceList(this.currentIndex, JSON.parse(JSON.stringify(this.lifeServiceList)));
// 自动滚动到激活项位置
this.scrollToActiveItem();
// swiper2停止自动滚动
this.swiper2.autoplay.stop();
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
this.swiper2.autoplay.start();
}, 3000);
},
handleMySwiper3NextClick() {
// 使用 Swiper 实例进行下一个 slide 的切换
if (this.swiper3) {
this.swiper3.slideNext();
}
},
handleMySwiper3PrevClick() {
// 使用 Swiper 实例进行上一个 slide 的切换
if (this.swiper3) {
this.swiper3.slidePrev();
}
},
// 新增：暂停和恢复 mySwiper3 自动播放
// pauseMySwiper3Autoplay() {
// if (this.swiper3 && this.swiper3.autoplay) {
// this.swiper3.autoplay.stop();
// }
// },
// resumeMySwiper3Autoplay() {
// if (this.swiper3 && this.swiper3.autoplay) {
// this.swiper3.autoplay.start();
// }
// },
},
};
</script>
......@@ -650,6 +653,7 @@ export default {
position: relative;
margin-left: auto;
margin-right: auto;
.mySwiper2 {
position: absolute;
left: 40px;
......@@ -657,6 +661,8 @@ export default {
width: 750px;
padding-left: 370px;
height: 435px;
overflow: hidden; // 添加这个确保切换可见
img {
width: 8px;
height: 8px;
......@@ -664,27 +670,29 @@ export default {
border-radius: 50%;
border: 1px solid #0777d1;
}
span {
}
span {}
.swiper-button-next {
width: 85px;
height: 44px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat
center;
background: url(~/static/images/technicalDocking/zzbl_next.png) no-repeat center;
top: 390px;
left: 3px;
cursor: pointer;
}
.swiper-button-prev {
width: 94px;
height: 44px;
display: block;
position: absolute;
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat
center;
background: url(~/static/images/technicalDocking/zzbl_prev.png) no-repeat center;
top: 390px;
left: 80px;
cursor: pointer;
}
}
......@@ -697,6 +705,76 @@ export default {
font-variant: initial;
line-height: 1;
}
.scroll-outer {
max-height: 340px;
height: 340px;
overflow: hidden;
position: relative;
}
#certificationOrg {
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
user-select: none;
display: flex;
flex-direction: column;
&:active {
cursor: grabbing;
}
&::-webkit-scrollbar {
display: none;
}
}
.mySwiper-item {
margin-bottom: 10px;
float: left;
width: 368px;
height: 60px !important;
line-height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
&.active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
span {
color: #fff;
font-weight: bold;
}
}
span {
font-size: 18px;
color: #5c5c5c;
display: block;
padding-left: 30px;
padding-right: 5px;
font-family: Microsoft YaHei;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 19px;
height: 18px;
margin-right: 10px;
}
}
.mySwiper {
left: 30px;
top: 30px;
......@@ -704,13 +782,23 @@ export default {
height: 340px;
z-index: 1;
position: absolute;
.swiper-slide {
float: left;
width: 368px;
height: 60px !important;
line-height: 60px;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat
left center;
background: url(~/static/images/technicalDocking/zzbl_hd_li.png) no-repeat left center;
&.active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
span {
color: #fff;
font-weight: bold;
}
}
span {
font-size: 18px;
color: #5c5c5c;
......@@ -732,9 +820,10 @@ export default {
margin-right: 10px;
}
}
.swiper-slide-thumb-active {
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png)
no-repeat left center;
background: url(~/static/images/technicalDocking/zzbl_hd_li_on.png) no-repeat left center;
span {
color: #ffffff;
font-weight: bold;
......@@ -754,21 +843,69 @@ export default {
}
.swiper-button-next {
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat
center;
background: url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
top: 160px;
right: 0px;
width: 27px;
}
.swiper-button-prev {
top: 160px;
left: 0px;
width: 27px;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat
center;
background: url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
// top: 390px;
// left: 80px;
}
// 添加新的导航按钮样式
.swiper3-button-next {
position: absolute;
top: 50%;
right: 10px;
width: 40px;
height: 40px;
background: rgba(71, 154, 255, 0.8) url(~/static/images/technicalDocking/swiper3next.png) no-repeat center;
background-size: 20px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transform: translateY(-50%);
transition: all 0.3s ease;
&:hover {
background-color: rgba(71, 154, 255, 1);
transform: translateY(-50%) scale(1.1);
}
&:after {
display: none;
}
}
.swiper3-button-prev {
position: absolute;
top: 50%;
left: 10px;
width: 40px;
height: 40px;
background: rgba(71, 154, 255, 0.8) url(~/static/images/technicalDocking/swiper3prev.png) no-repeat center;
background-size: 20px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transform: translateY(-50%);
transition: all 0.3s ease;
&:hover {
background-color: rgba(71, 154, 255, 1);
transform: translateY(-50%) scale(1.1);
}
&:after {
display: none;
}
}
}
.swiper-button-next:after,
......@@ -786,6 +923,7 @@ export default {
$color: #479aff;
.commonMarker {
// 公用图标样式类代码块
.stackBlock {
position: absolute;
......@@ -793,6 +931,7 @@ $color: #479aff;
height: 30px;
top: 20px;
left: 10px;
p:first-child {
width: 15px;
height: 15px;
......@@ -802,6 +941,7 @@ $color: #479aff;
top: 5px;
z-index: 1;
}
p:last-child {
width: 10px;
height: 10px;
......@@ -815,6 +955,7 @@ $color: #479aff;
::v-deep .banner .el-carousel__container {
height: 460px;
}
.el-row {
margin-top: 50px;
}
......@@ -831,33 +972,40 @@ $color: #479aff;
background-repeat: no-repeat;
margin-bottom: -3px;
@extend .commonMarker;
.part-tit {
width: 1250px;
margin: 0 auto;
}
header {
text-align: center;
margin: 20px 0px 20px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
> p {
>p {
font-size: 12px;
color: #b4b4b4;
letter-spacing: 1px;
}
}
article {
section {
display: flex;
justify-content: center;
}
.menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 700px;
li {
width: 110px;
height: 100px;
......@@ -872,6 +1020,7 @@ $color: #479aff;
position: relative;
cursor: pointer;
transition: all 0.5s linear;
p {
margin-top: 6px;
word-break: break-all;
......@@ -880,13 +1029,16 @@ $color: #479aff;
font-weight: bold;
color: #a8a8a8;
}
&.active {
background-color: $color;
color: #fff;
p {
color: #fff;
}
}
// &.active:after {
// content: "|";
// height: 50px;
......@@ -896,78 +1048,86 @@ $color: #479aff;
// bottom: -50px;
// }
}
img {
width: 55px;
height: 55px;
}
}
$colors: (1, 2, 3);
.submenu {
margin-top: 20px;
/* padding-top: 24px; */
/* border-top: 3px solid #479aff; */
display: flex;
justify-content: center;
overflow-x: auto;
$colors: (
1,
2,
3
);
li {
position: relative;
width: 50px;
padding: 7px 7px;
height: 270px;
background: $color;
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i_1.png);
word-break: break-all;
cursor: pointer;
// &::before {
// content: "|";
// position: absolute;
// top: -31px;
// left: 20px;
// color: $color;
// font-size: 24px;
// }
}
@for $i from 1 through 6 {
li:nth-child(n + #{$i}) {
background-image: url("~/static/images/NEWER/i_#{$i}.png");
}
}
.submenu {
margin-top: 20px;
/* padding-top: 24px; */
/* border-top: 3px solid #479aff; */
display: flex;
justify-content: center;
overflow-x: auto;
li {
position: relative;
width: 50px;
padding: 7px 7px;
height: 270px;
background: $color;
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i_1.png);
word-break: break-all;
cursor: pointer;
// &::before {
// content: "|";
// position: absolute;
// top: -31px;
// left: 20px;
// color: $color;
// font-size: 24px;
// }
}
.submenu-row {
margin-top: 20px;
display: flex;
justify-content: center;
overflow-y: auto;
flex-wrap: wrap;
// height: 240px;
max-height: 240px;
li {
padding: 0;
position: relative;
width: 500px;
height: 40px;
line-height: 40px;
background: rgba(71, 154, 255, 0.7);
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i-icon.png);
word-break: break-all;
cursor: pointer;
margin-top: 12px;
@for $i from 1 through 6 {
li:nth-child(n + #{$i}) {
background-image: url("~/static/images/NEWER/i_#{$i}.png");
}
}
}
.submenu-row {
margin-top: 20px;
display: flex;
justify-content: center;
overflow-y: auto;
flex-wrap: wrap;
// height: 240px;
max-height: 240px;
li {
padding: 0;
position: relative;
width: 500px;
height: 40px;
line-height: 40px;
background: rgba(71, 154, 255, 0.7);
color: #fff;
text-align: center;
margin: 0px 18px;
box-sizing: border-box;
font-size: 24px;
background-image: url(~/static/images/NEWER/i-icon.png);
word-break: break-all;
cursor: pointer;
margin-top: 12px;
}
}
}
}
.wrapper {
......@@ -992,11 +1152,13 @@ $color: #479aff;
text-align: center;
padding: 50px 0;
margin-top: 20px;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
h1 {
font-size: 30px;
color: #000;
......@@ -1005,6 +1167,7 @@ $color: #479aff;
font-weight: bold;
letter-spacing: 10px;
}
p {
font-size: 16px;
text-align: center;
......@@ -1013,6 +1176,7 @@ $color: #479aff;
font-weight: normal;
}
}
img {
width: 90%;
}
......@@ -1026,6 +1190,7 @@ $color: #479aff;
padding-top: 30px;
margin-top: -2px;
height: 510px;
.introduce {
h1 {
font-size: 32px;
......@@ -1034,11 +1199,13 @@ $color: #479aff;
margin-bottom: 6px;
padding: 24px 0;
}
p {
font-size: 12px;
color: #c3c3c3;
}
}
.nav {
margin-right: 90px;
display: flex;
......@@ -1049,6 +1216,7 @@ $color: #479aff;
margin-left: 80px;
height: 440px;
margin-top: 30px;
li {
width: 100px;
height: 90px;
......@@ -1062,20 +1230,24 @@ $color: #479aff;
background-color: #dedede;
cursor: pointer;
transition: all 0.2s;
&.active {
background-color: $color;
color: #fff;
}
}
img {
width: 40px;
height: 40px;
}
}
.detail {
position: relative;
width: 880px;
margin-top: 20px;
.prevBtn,
.nextBtn {
position: absolute;
......@@ -1085,12 +1257,15 @@ $color: #479aff;
cursor: pointer;
z-index: 9;
}
.prevBtn {
left: 0;
}
.nextBtn {
right: 0;
}
ul {
display: flex;
flex-wrap: wrap;
......@@ -1098,6 +1273,7 @@ $color: #479aff;
margin: 30px auto;
height: 260px;
}
li {
position: relative;
width: 240px;
......@@ -1108,30 +1284,37 @@ $color: #479aff;
margin-right: 60px;
margin-left: 22px;
cursor: pointer;
img {
width: 80px;
margin-right: 15px;
}
h2 {
font-size: 12px;
color: rgb(27, 29, 27);
}
span {
font-size: 12px;
color: #c8c7c7;
}
& > p {
&>p {
width: 180px;
padding-top: 10px;
div {
display: block;
height: 60px;
overflow: hidden;
}
}
&:hover {
.extend {
display: block;
span {
color: #fff !important;
}
......@@ -1149,16 +1332,19 @@ $color: #479aff;
overflow-y: auto;
color: #fff;
padding: 10px 20px;
h2 {
color: #fff;
}
& > p {
&>p {
color: #fff !important;
font-size: 10px;
}
}
:deep(.extend) {
span,
em,
strong {
......@@ -1176,22 +1362,26 @@ $color: #479aff;
// height: 560px;
// padding-bottom: 70px;
@extend .commonMarker;
.detail {
position: relative;
height: 300px;
overflow: hidden;
.item {
img {
width: 106px;
height: 30px;
margin-right: 4px;
}
.bgImg {
position: absolute;
top: -30px;
width: 220px;
height: 100px;
}
width: 250px;
min-width: 60px;
height: 40px;
......@@ -1210,28 +1400,34 @@ $color: #479aff;
}
.popover {
// display: none;
.title {
display: flex;
margin-bottom: 12px;
.closeBtn {
position: absolute;
right: 16px;
top: 14px;
cursor: pointer;
}
img {
width: 40px;
height: 40px;
margin-right: 20px;
}
.label {
font-size: 18px;
}
.text {
font-size: 12px;
}
}
.body {
height: 140px;
overflow-y: auto;
......@@ -1249,6 +1445,7 @@ $color: #479aff;
transform: translate(-50%, -50%);
padding: 10px 20px;
z-index: 1;
:deep(.body) {
p {
font-size: 12px;
......@@ -1262,6 +1459,7 @@ $color: #479aff;
box-shadow: 0px 0px 1px#d3bbbb;
border: 1px solid #eee;
padding: 35px 15px;
li {
display: flex;
justify-content: space-around;
......@@ -1273,21 +1471,22 @@ $color: #479aff;
text-align: center;
color: #fff;
background: rgb(69, 190, 255);
background: linear-gradient(
90deg,
rgb(69, 190, 255) 0%,
rgb(1, 139, 244) 100%
);
background: linear-gradient(90deg,
rgb(69, 190, 255) 0%,
rgb(1, 139, 244) 100%);
cursor: pointer;
}
}
header {
text-align: center;
margin: 20px 0px 40px 0px;
h1 {
font-size: 28px;
color: #479aff;
}
p {
font-size: 12px;
color: #b4b4b4;
......@@ -1299,6 +1498,7 @@ $color: #479aff;
.tec-com {
width: 100%;
height: 370px;
ul {
width: 100%;
display: flex;
......@@ -1306,6 +1506,7 @@ $color: #479aff;
flex-wrap: wrap;
padding: 10px 10px;
box-sizing: border-box;
li {
// width: 345px;
// height: 143px;
......@@ -1330,17 +1531,21 @@ $color: #479aff;
margin-right: 20px;
margin-left: 10px;
}
.top {
display: flex;
padding-top: 10px;
// padding-left: 10px;
.right {
margin-right: 30px;
width: 260px;
}
p {
margin-bottom: 7px;
}
p:nth-child(1) {
font-size: 18px;
font-weight: bold;
......@@ -1348,6 +1553,7 @@ $color: #479aff;
overflow: hidden;
text-overflow: ellipsis;
}
p:nth-child(2) {
font-size: 14px;
background-color: rgb(193, 131, 76);
......@@ -1355,12 +1561,13 @@ $color: #479aff;
width: 20px;
text-align: center;
}
p:nth-child(3) {
color: rgb(107, 107, 107);
span {
display: block;
background: url(~/static/images/technicalDocking/location.png)
no-repeat;
background: url(~/static/images/technicalDocking/location.png) no-repeat;
background-position: 0px 2px;
text-indent: 20px;
color: rgb(126, 126, 126);
......@@ -1372,6 +1579,7 @@ $color: #479aff;
}
}
}
.bottom {
color: rgb(36, 90, 119);
background-color: rgb(235, 249, 253);
......@@ -1381,6 +1589,7 @@ $color: #479aff;
padding-top: 6px;
padding-bottom: 6px;
text-indent: 12px;
p {
background-color: rgb(235, 249, 253);
}
......@@ -1400,6 +1609,7 @@ $color: #479aff;
::v-deep .el-dialog__header {
border-bottom: 1px solid #efefef !important;
}
.items-class {
flex: 0 0 35%;
box-sizing: border-box;
......@@ -1410,6 +1620,7 @@ $color: #479aff;
margin-bottom: 28px;
max-width: 250px;
height: 38px;
span {
float: left;
font-size: 18px;
......@@ -1424,6 +1635,7 @@ $color: #479aff;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
&:hover {
color: rgb(67, 110, 228);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment