|
|
@@ -43,16 +43,18 @@
|
|
|
</div>
|
|
|
<div class="swiper-pagination"></div>
|
|
|
</div> -->
|
|
|
- <div @click='prev'
|
|
|
+ <!-- <div @click='prev'
|
|
|
class="prev"></div>
|
|
|
<div @click='next'
|
|
|
class="next"></div>
|
|
|
- <el-carousel :interval="4000"
|
|
|
- type="card"
|
|
|
- height="400px"
|
|
|
- arrow="never"
|
|
|
- ref="carousel"
|
|
|
- indicator-position="none">
|
|
|
+ <el-carousel
|
|
|
+ type="card"
|
|
|
+ height="400px"
|
|
|
+ arrow="never"
|
|
|
+ ref="carousel"
|
|
|
+ :autoplay="false"
|
|
|
+ indicator-position="none"
|
|
|
+ >
|
|
|
<el-carousel-item>
|
|
|
<div class="textItem"
|
|
|
@click="gotoDetail(1)">
|
|
|
@@ -102,7 +104,144 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ <div class="swiper-slide azg-slide-1">
|
|
|
+ <div class="swiper-box">
|
|
|
+ <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide azg-slide-2">
|
|
|
+ <div class="swiper-box">
|
|
|
+ <img src="/www/svg/icon-client-jkcy.svg" alt="">
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ <div class="swiper-slide azg-slide-3">
|
|
|
+ <div class="swiper-box">
|
|
|
+ <img src="/www/svg/icon-client-wxl.svg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide azg-slide-1">
|
|
|
+ <div class="swiper-box">
|
|
|
+ <img src="/www/svg/icon-client-dtly.svg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -110,6 +249,7 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
+import $ from 'jquery'
|
|
|
// import 'swiper/swiper.scss'
|
|
|
import 'swiper/swiper-bundle.css'
|
|
|
export default {
|
|
|
@@ -169,6 +309,7 @@ export default {
|
|
|
// },
|
|
|
|
|
|
// });
|
|
|
+ this.init()
|
|
|
},
|
|
|
computed: {
|
|
|
swiper () {
|
|
|
@@ -176,6 +317,57 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
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();
|
|
|
+ });
|
|
|
+ },
|
|
|
gotoDetail (num) {
|
|
|
let newpage = this.$router.resolve({
|
|
|
name: `detile${num}`,
|
|
|
@@ -277,4 +469,170 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+.client-love-work {
|
|
|
+ .swiper {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto 40px;
|
|
|
+ position: relative;
|
|
|
+ .swiper-container {
|
|
|
+ width: 620px;
|
|
|
+ height: 480px;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ .left-swiper,
|
|
|
+ .right-swiper {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ transform: scale(.8);
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ top: 168px;
|
|
|
+ }
|
|
|
+ .swiper-slide {
|
|
|
+ .swiper-box {
|
|
|
+ background: rgba(0, 0, 0, .7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-swiper {
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ img {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-swiper {
|
|
|
+ top: 0;
|
|
|
+ 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;
|
|
|
+ .swiper-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wolyshaw