|
|
@@ -42,19 +42,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination"></div>
|
|
|
- </div> -->
|
|
|
+ </div> -->
|
|
|
<!-- <div @click='prev'
|
|
|
class="prev"></div>
|
|
|
<div @click='next'
|
|
|
class="next"></div>
|
|
|
- <el-carousel
|
|
|
- type="card"
|
|
|
- height="400px"
|
|
|
- arrow="never"
|
|
|
- ref="carousel"
|
|
|
- :autoplay="false"
|
|
|
- indicator-position="none"
|
|
|
- >
|
|
|
+ <el-carousel :interval="4000"
|
|
|
+ type="card"
|
|
|
+ height="400px"
|
|
|
+ arrow="never"
|
|
|
+ ref="carousel"
|
|
|
+ indicator-position="none">
|
|
|
<el-carousel-item>
|
|
|
<div class="textItem"
|
|
|
@click="gotoDetail(1)">
|
|
|
@@ -105,143 +103,154 @@
|
|
|
</div>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel> -->
|
|
|
- <div class="swiper hidden-md hidden-xs" ref="swiper1">
|
|
|
- <div class="current-swiper swiper-container">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide azg-slide-1 active">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 大唐旅游（武汉）有限公司是一家高端旅游综合服务提供商，具有国家一类出境组团社资质，服务内容包括出境旅行服务、海外修学服务、国内旅行服务、航空票务服务、会议会展服务，酒店预订服务等。
|
|
|
- </div>
|
|
|
- <div class="swiper-c-video">
|
|
|
- <i></i>播放视频
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="swiper-slide azg-slide-2">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-jkcy.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 武汉锦康餐饮管理有限公司是中国团餐品牌30强，日供餐能力150万/人次，餐品1000多种，服务的客户包括国防科技大学、空军航空第一学院、西安工业大学、长沙理工大学、武汉枫叶国际学校、湖北美术学院等。
|
|
|
- </div>
|
|
|
- <div class="swiper-c-video">
|
|
|
- <i></i>播放视频
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div class="client-love-work">
|
|
|
+ <div class="swiper">
|
|
|
+ <swiper ref="mySwiper" class="current-swiper" :options="swiperOptions">
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(1)">
|
|
|
+ <img src="../images/consult1.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>承办单位和定点机构有什么区别</h4>
|
|
|
+ <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
|
|
|
</div>
|
|
|
- <div class="swiper-slide azg-slide-3">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-wxl.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 吾行里是以开放式艺术情景生活街区为核心驱动力的大型城市综合体示范区，整个项目用地面积约 1.7 万平方米，总建筑面积约 10 万方，包含开放式生活艺术街区、品质华宅、甲级写字楼及全能公寓四种物业形态。
|
|
|
- </div>
|
|
|
- <div class="swiper-c-video">
|
|
|
- <i></i>播放视频
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(2)">
|
|
|
+ <img src="../images/consult2.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
|
|
|
+ <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="swiper-button-prev"></div>
|
|
|
- <div class="swiper-button-next"></div>
|
|
|
- <div class="left-swiper swiper-container" ref="swiper2">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide azg-slide-3">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-wxl.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(3)">
|
|
|
+ <img src="../images/consult3.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>十级琴霸的备考建议</h4>
|
|
|
+ <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
|
|
|
</div>
|
|
|
- <div class="swiper-slide azg-slide-1">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(4)">
|
|
|
+ <img src="../images/consult4.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>音乐等艺术等科目纳入“新中考”</h4>
|
|
|
+ <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
|
|
|
</div>
|
|
|
- <div class="swiper-slide azg-slide-2">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-jkcy.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ <div class="swiper-button-next swiper-button-white" @click="onNext" slot="button-next"></div>
|
|
|
+ <div class="swiper-button-prev swiper-button-white" @click="onPrev" slot="button-prev"></div>
|
|
|
+
|
|
|
+ <swiper ref="leftSwiper" class="left-swiper" :options="leftOptions">
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(4)">
|
|
|
+ <img src="../images/consult4.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>音乐等艺术等科目纳入“新中考”</h4>
|
|
|
+ <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right-swiper swiper-container">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide azg-slide-2">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-jkcy.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(1)">
|
|
|
+ <img src="../images/consult1.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>承办单位和定点机构有什么区别</h4>
|
|
|
+ <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
|
|
|
</div>
|
|
|
- <div class="swiper-slide azg-slide-3">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-wxl.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(2)">
|
|
|
+ <img src="../images/consult2.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
|
|
|
+ <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
|
|
|
</div>
|
|
|
- <div class="swiper-slide azg-slide-1">
|
|
|
- <div class="swiper-box">
|
|
|
- <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(3)">
|
|
|
+ <img src="../images/consult3.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>十级琴霸的备考建议</h4>
|
|
|
+ <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
|
|
|
- <div class="swiper-container swiper-container-horizontal swiper-work-mobile visible-sm visible-xs" ref="swiper3">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide swiper-slide-center none-effect">
|
|
|
- <img src="/www/images/image-dtlv.jpg">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 大唐旅游（武汉）有限公司是一家高端旅游综合服务提供商，具有国家一类出境组团社资质，服务内容包括出境旅行服务、海外修学服务、国内旅行服务、航空票务服务、会议会展服务，酒店预订服务等。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <swiper ref="rightSwiper" class="right-swiper" :options="rightOptions">
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(2)">
|
|
|
+ <img src="../images/consult2.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
|
|
|
+ <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="/www/images/image-jkcy.jpg">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-jkcy.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 武汉锦康餐饮管理有限公司是中国团餐品牌 30 强，日供餐能力 150 万 / 人次，餐品 1000 多种，服务的客户包括国防科技大学、空军航空第一学院、西安工业大学、长沙理工大学、武汉枫叶国际学校、湖北美术学院等。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(3)">
|
|
|
+ <img src="../images/consult3.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>十级琴霸的备考建议</h4>
|
|
|
+ <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="/www/images/image-wxl.jpg">
|
|
|
- <div class="swiper-box">
|
|
|
- <div class="swiper-content">
|
|
|
- <div class="swiper-c-logo">
|
|
|
- <img src="/www/svg/icon-client-wxl.svg" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-c-text">
|
|
|
- 吾行里是以开放式艺术情景生活街区为核心驱动力的大型城市综合体示范区，整个项目用地面积约 1.7 万平方米，总建筑面积约 10 万方，包含开放式生活艺术街区、品质华宅、甲级写字楼及全能公寓四种物业形态。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(4)">
|
|
|
+ <img src="../images/consult4.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>音乐等艺术等科目纳入“新中考”</h4>
|
|
|
+ <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <swiper-slide>
|
|
|
+ <div class="textItem" @click="gotoDetail(1)">
|
|
|
+ <img src="../images/consult1.png"
|
|
|
+ alt=""
|
|
|
+ width="369px">
|
|
|
+ <div class="textWrap">
|
|
|
+ <h4>承办单位和定点机构有什么区别</h4>
|
|
|
+ <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
</div>
|
|
|
- <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -249,7 +258,6 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
-import $ from 'jquery'
|
|
|
// import 'swiper/swiper.scss'
|
|
|
import 'swiper/swiper-bundle.css'
|
|
|
export default {
|
|
|
@@ -262,111 +270,43 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- swiperOption: {
|
|
|
- pagination: {
|
|
|
- el: '.swiper-pagination'
|
|
|
- },
|
|
|
- centeredSlides: false, // 选中slide居中显示
|
|
|
- initialSlide: 1, // 默认选中项索引
|
|
|
- slidesPerView: 1, // 自动匹配每次显示的slide个数,loop='auto'模式下，还需要设置loopedSlides
|
|
|
- effect: 'coverflow', // 切换效果-3d
|
|
|
- coverflowEffect: {
|
|
|
- rotate: 0,
|
|
|
- stretch: 10,
|
|
|
- depth: 160,
|
|
|
- modifier: 2,
|
|
|
- slideShadows: true
|
|
|
- },
|
|
|
-
|
|
|
- // ...
|
|
|
+ swiperOptions: {
|
|
|
+ loop: true,
|
|
|
+ allowTouchMove: false
|
|
|
+ },
|
|
|
+ leftOptions: {
|
|
|
+ loop: true,
|
|
|
+ allowTouchMove: false
|
|
|
+ },
|
|
|
+ rightOptions: {
|
|
|
+ loop: true,
|
|
|
+ allowTouchMove: false
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
- // var swiper = new Swiper(".swiper-container", {
|
|
|
- // effect: "coverflow",
|
|
|
- // grabCursor: true,
|
|
|
- // watchSlidesProgress: true,
|
|
|
- // centeredSlides: true,
|
|
|
- // loop: true,
|
|
|
- // loopedSlides: 3,
|
|
|
- // slidesPerView: 3,
|
|
|
- // autoplay: {
|
|
|
- // delay: 3000,//自动播放速度
|
|
|
- // disableOnInteraction: false//鼠标移上去时是否还继续播放
|
|
|
- // },
|
|
|
- // coverflowEffect: {
|
|
|
- // // rotate: 50,
|
|
|
- // // stretch: 0,
|
|
|
- // // depth: 500,
|
|
|
- // // modifier: 1,
|
|
|
- // // slideShadows : true
|
|
|
- // rotate: 30,
|
|
|
- // stretch: 0,
|
|
|
- // depth: 60,
|
|
|
- // modifier: 6,
|
|
|
- // slideShadows: true
|
|
|
- // },
|
|
|
-
|
|
|
- // });
|
|
|
- this.init()
|
|
|
},
|
|
|
computed: {
|
|
|
swiper () {
|
|
|
return this.$refs.mySwiper.$swiper
|
|
|
+ },
|
|
|
+ leftSwiper() {
|
|
|
+ return this.$refs.leftSwiper.$swiper
|
|
|
+ },
|
|
|
+ rightSwiper() {
|
|
|
+ return this.$refs.rightSwiper.$swiper
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
- var currentSwiper = new Swiper(this.$refs.ref.swiper1, {
|
|
|
- loop: true,
|
|
|
- on: {
|
|
|
- slideChangeTransitionEnd: function () {
|
|
|
- console.log(this.slides)
|
|
|
- $(this.$refs.ref.swiper1).find('.swiper-slide').removeClass('active');
|
|
|
- // $(this.slides[this.activeIndex]).addClass('active');
|
|
|
- },
|
|
|
- }
|
|
|
- });
|
|
|
- currentSwiper.$el.parent().find('.swiper-button-next').on('click', function() { //去除按钮阴影
|
|
|
- currentSwiper.slideNext();
|
|
|
-
|
|
|
- })
|
|
|
- currentSwiper.$el.parent().find('.swiper-button-prev').on('click', function() {
|
|
|
- currentSwiper.slidePrev();
|
|
|
- })
|
|
|
- var leftSwiper = new Swiper('.left-swiper', {
|
|
|
- loop: true,
|
|
|
- simulateTouch: false,
|
|
|
- });
|
|
|
- var rightSwiper = new Swiper('.right-swiper', {
|
|
|
- loop: true,
|
|
|
- simulateTouch: false,
|
|
|
- });
|
|
|
- currentSwiper.controller.control = [leftSwiper, rightSwiper];
|
|
|
-
|
|
|
- var swiperWorkMobile = new Swiper('.swiper-work-mobile', {
|
|
|
- pagination: {
|
|
|
- el: '.swiper-pagination-clickable',
|
|
|
- },
|
|
|
- loop: true,
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- var swiperWorkMobile = new Swiper('.swiper-work-his', {
|
|
|
- slidesPerView: 4,
|
|
|
- pagination: {
|
|
|
- // el: '.swiper-pagination-clickable',
|
|
|
- },
|
|
|
- loop: true,
|
|
|
- autoplay: true,
|
|
|
- });
|
|
|
-
|
|
|
- $(".swiper-work-his .swiper-slide").hover(function() {
|
|
|
- swiperWorkMobile.autoplay.stop();
|
|
|
- }, function() {
|
|
|
- swiperWorkMobile.autoplay.start();
|
|
|
- });
|
|
|
+ onNext() {
|
|
|
+ this.swiper.slideNext();
|
|
|
+ this.leftSwiper.slideNext()
|
|
|
+ this.rightSwiper.slideNext()
|
|
|
+ },
|
|
|
+ onPrev() {
|
|
|
+ this.swiper.slidePrev();
|
|
|
+ this.leftSwiper.slidePrev();
|
|
|
+ this.rightSwiper.slidePrev();
|
|
|
},
|
|
|
gotoDetail (num) {
|
|
|
let newpage = this.$router.resolve({
|
|
|
@@ -407,11 +347,11 @@ export default {
|
|
|
margin-bottom: 78px;
|
|
|
}
|
|
|
.maskCore {
|
|
|
- width: 740px;
|
|
|
+ width: 960px;
|
|
|
position: relative;
|
|
|
- // width: 1150px;
|
|
|
.textItem {
|
|
|
width: 369px;
|
|
|
+ height: 414px;
|
|
|
background-color: #fff;
|
|
|
.textWrap {
|
|
|
padding: 24px 24px 48px;
|
|
|
@@ -469,14 +409,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
.client-love-work {
|
|
|
.swiper {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto 40px;
|
|
|
position: relative;
|
|
|
.swiper-container {
|
|
|
- width: 620px;
|
|
|
- height: 480px;
|
|
|
+ width: 369px;
|
|
|
+ height: 414px;
|
|
|
border-radius: 8px;
|
|
|
position: relative;
|
|
|
z-index: 99;
|
|
|
@@ -486,12 +428,8 @@ export default {
|
|
|
.right-swiper {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
- transform: scale(.8);
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- z-index: 100;
|
|
|
- top: 168px;
|
|
|
- }
|
|
|
+ transform: scale(.85);
|
|
|
+ opacity: 0.7;
|
|
|
.swiper-slide {
|
|
|
.swiper-box {
|
|
|
background: rgba(0, 0, 0, .7);
|
|
|
@@ -501,27 +439,18 @@ export default {
|
|
|
.left-swiper {
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- img {
|
|
|
- left: 0;
|
|
|
- }
|
|
|
+ // img {
|
|
|
+ // left: 0;
|
|
|
+ // }
|
|
|
}
|
|
|
.right-swiper {
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
- img {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ // img {
|
|
|
+ // right: 0;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
- .azg-slide-1 {
|
|
|
- background: url(/www/images/image-dtlv.jpg) no-repeat center #fff;
|
|
|
- }
|
|
|
- .azg-slide-2 {
|
|
|
- background: url(/www/images/image-jkcy.jpg) no-repeat center #fff;
|
|
|
- }
|
|
|
- .azg-slide-3 {
|
|
|
- background: url(/www/images/image-wxl.jpg) no-repeat center #fff;
|
|
|
- }
|
|
|
.swiper-slide {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
@@ -534,105 +463,29 @@ export default {
|
|
|
text-align: center;
|
|
|
background: rgba(0, 92, 185, .7);
|
|
|
}
|
|
|
- &.active {
|
|
|
- .swiper-c-logo {
|
|
|
- transform: translateY(0);
|
|
|
- transition: all .3s ease;
|
|
|
- }
|
|
|
- .swiper-c-text {
|
|
|
- transform: translateX(0);
|
|
|
- transition: all .3s ease;
|
|
|
- }
|
|
|
- .swiper-c-video {
|
|
|
- transform: translateX(0);
|
|
|
- transition: all .3s ease;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-content {
|
|
|
- display: flex;
|
|
|
- width: 350px;
|
|
|
- height: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-c-logo {
|
|
|
- margin: 0 auto;
|
|
|
- width: 240px;
|
|
|
- height: 140px;
|
|
|
- transform: translateY(75px);
|
|
|
- transition: all .3s ease;
|
|
|
- }
|
|
|
- .swiper-c-text {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 26px;
|
|
|
- color: #fff;
|
|
|
- transform: translateX(-500px);
|
|
|
- transition: all .3s ease;
|
|
|
- }
|
|
|
- .swiper-c-video {
|
|
|
- width: 104px;
|
|
|
- height: 34px;
|
|
|
- line-height: 34px;
|
|
|
- color: #fff;
|
|
|
- margin: 35px auto 0;
|
|
|
- transform: translateX(380px);
|
|
|
- transition: all .3s ease;
|
|
|
- background-color: rgba(255, 255, 255, 0.5);
|
|
|
- border: 1px solid #E5E8ED;
|
|
|
- border-radius: 4px;
|
|
|
- i {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background: url(/www/svg/icon-play-default.svg) no-repeat center;
|
|
|
- margin-right: 8px;
|
|
|
- vertical-align: text-bottom;
|
|
|
- }
|
|
|
}
|
|
|
.swiper-button-prev,
|
|
|
.swiper-button-next {
|
|
|
- background: url(/www/svg/icon-arrow-right-medium-default.svg) no-repeat center;
|
|
|
- background-size: 100%;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- &:hover {
|
|
|
- background: url(/www/svg/icon-arrow-right-medium-hover.svg) no-repeat center;
|
|
|
- }
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: url("../images/arrow.png") no-repeat center;
|
|
|
+ background-size: 40px 40px;
|
|
|
+ right: -115px;
|
|
|
+ top: 190px;
|
|
|
+ &:hover {
|
|
|
+ background: url("../images/active-arrow.png") no-repeat center;
|
|
|
+ background-size: 40px 40px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-button-prev {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- .swiper-work-mobile {
|
|
|
- .swiper-slide {
|
|
|
- .swiper-content {
|
|
|
- justify-content: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-c-logo {
|
|
|
- transform: translateY(0)
|
|
|
- }
|
|
|
- .swiper-c-text {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 26px;
|
|
|
- color: #fff;
|
|
|
- transform: translateX(0);
|
|
|
- transition: all .3s ease;
|
|
|
- margin-top: -30px;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .swiper-pagination-bullet {
|
|
|
- background: #fff;
|
|
|
- opacity: .4;
|
|
|
- }
|
|
|
- .swiper-pagination-bullet-active {
|
|
|
- background: #fff;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ left: -115px;
|
|
|
+ top: 190px;
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
