|
@@ -33,11 +33,11 @@
|
|
|
<div class="history" ref="history" id="history">
|
|
<div class="history" ref="history" id="history">
|
|
|
<div class="history_con">
|
|
<div class="history_con">
|
|
|
<divider-title>
|
|
<divider-title>
|
|
|
- <template>发展</template>
|
|
|
|
|
- <template #prim>历程</template>
|
|
|
|
|
|
|
+ <!-- <template></template> -->
|
|
|
|
|
+ <template #prim>发展历程</template>
|
|
|
<template #sub>Development process</template>
|
|
<template #sub>Development process</template>
|
|
|
</divider-title>
|
|
</divider-title>
|
|
|
- <swiper ref="imgSwiper" class="content" :options="imgOptions">
|
|
|
|
|
|
|
+ <!-- <swiper ref="imgSwiper" class="content" :options="imgOptions">
|
|
|
<swiper-slide v-for="(item, index) in historys" :key="index" class="content_con">
|
|
<swiper-slide v-for="(item, index) in historys" :key="index" class="content_con">
|
|
|
<img :src="item.img" alt="" class="content_con_img" />
|
|
<img :src="item.img" alt="" class="content_con_img" />
|
|
|
<div class="content_con_title">
|
|
<div class="content_con_title">
|
|
@@ -61,8 +61,8 @@
|
|
|
</div>
|
|
</div>
|
|
|
<img :src="index === actives ? select : unchecked" alt="" class="content_subscript_con_img" />
|
|
<img :src="index === actives ? select : unchecked" alt="" class="content_subscript_con_img" />
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <!-- <div class="history_con_content">
|
|
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ <div class="history_con_content">
|
|
|
<swiper ref="imgSwiper" class="history_con_content_left" :options="imgOptions">
|
|
<swiper ref="imgSwiper" class="history_con_content_left" :options="imgOptions">
|
|
|
<swiper-slide
|
|
<swiper-slide
|
|
|
v-for="(item, index) in historys"
|
|
v-for="(item, index) in historys"
|
|
@@ -72,21 +72,35 @@
|
|
|
<img :src="item.img" alt="" class="history_con_content_left_img" />
|
|
<img :src="item.img" alt="" class="history_con_content_left_img" />
|
|
|
</swiper-slide>
|
|
</swiper-slide>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
- <swiper class="timeLine" ref="timeSwiper" :options="boxOptions">
|
|
|
|
|
- <swiper-slide v-for="(item, index) in historys" :key="index">
|
|
|
|
|
- <div class="time-item">
|
|
|
|
|
- <div class="text1">
|
|
|
|
|
- <span>{{ formatTime(item.time, 'YYYY') }}</span>
|
|
|
|
|
- <span>年</span>
|
|
|
|
|
- <span>{{ formatTime(item.time, 'MM月') }}</span>
|
|
|
|
|
|
|
+ <div class="history_con_content_right" @mouseenter="mousemoveEve" @mouseout="mouseoutEve">
|
|
|
|
|
+ <swiper class="timeLine" ref="timeSwiper" :options="boxOptions">
|
|
|
|
|
+ <swiper-slide v-for="(item, index) in historys" :key="index">
|
|
|
|
|
+ <div class="time-item">
|
|
|
|
|
+ <div :class="index == actives ? 'textxuanzhong' : 'text1'">
|
|
|
|
|
+ <img
|
|
|
|
|
+ src="../assets/yixuanzhongfazhan@3x.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ class="text1_img"
|
|
|
|
|
+ v-if="index == actives"
|
|
|
|
|
+ />
|
|
|
|
|
+ <img
|
|
|
|
|
+ src="../assets/weixuanzhongfazhan@3x.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ class="text1_img"
|
|
|
|
|
+ v-else
|
|
|
|
|
+ />
|
|
|
|
|
+ <span>{{ formatTime(item.time, 'YYYY') }}</span>
|
|
|
|
|
+ <span>年</span>
|
|
|
|
|
+ <span>{{ formatTime(item.time, 'MM月') }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text2" v-html="item.title"></div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="text2" v-html="item.title"></div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </swiper-slide>
|
|
|
|
|
- <div class="time-pagination" slot="pagination"></div>
|
|
|
|
|
- </swiper>
|
|
|
|
|
- <div class="history_con_content_right">
|
|
|
|
|
- <swiper class="history_con_content_right_con" ref="timeSwiper" :options="honorOption">
|
|
|
|
|
|
|
+ </swiper-slide>
|
|
|
|
|
+ <div class="time-pagination" slot="pagination"></div>
|
|
|
|
|
+ </swiper>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- <div class="history_con_content_right">
|
|
|
|
|
+ <swiper class="history_con_content_right_con" ref="timeSwiper" :options="boxOptions">
|
|
|
<swiper-slide v-for="(item, index) in historys" :key="index">
|
|
<swiper-slide v-for="(item, index) in historys" :key="index">
|
|
|
<div class="history_con_content_right_con_top">
|
|
<div class="history_con_content_right_con_top">
|
|
|
<img
|
|
<img
|
|
@@ -104,8 +118,8 @@
|
|
|
</swiper-slide>
|
|
</swiper-slide>
|
|
|
<div class="time-pagination" slot="pagination"></div>
|
|
<div class="time-pagination" slot="pagination"></div>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
- </div>
|
|
|
|
|
- </div> -->
|
|
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ </div>
|
|
|
<!-- <div class="content_subscript">
|
|
<!-- <div class="content_subscript">
|
|
|
<div class="content_subscript_con" v-for="(item, index) in historys" :key="index">
|
|
<div class="content_subscript_con" v-for="(item, index) in historys" :key="index">
|
|
|
<div
|
|
<div
|
|
@@ -226,19 +240,10 @@ export default {
|
|
|
boxOptions: {
|
|
boxOptions: {
|
|
|
direction: 'vertical',
|
|
direction: 'vertical',
|
|
|
slidesPerView: 'auto',
|
|
slidesPerView: 'auto',
|
|
|
- centeredSlides: true,
|
|
|
|
|
|
|
+ slidesOffsetAfter: 220,
|
|
|
pagination: {
|
|
pagination: {
|
|
|
type: 'progressbar',
|
|
type: 'progressbar',
|
|
|
el: '.time-pagination'
|
|
el: '.time-pagination'
|
|
|
- },
|
|
|
|
|
- mousewheel: true,
|
|
|
|
|
- releaseOnEdges: true,
|
|
|
|
|
- autoplay: {
|
|
|
|
|
- autoplay: false,
|
|
|
|
|
- delay: 5000,
|
|
|
|
|
- stopOnLastSlide: false,
|
|
|
|
|
- disableOnInteraction: false,
|
|
|
|
|
- pauseOnMouseEnter: true
|
|
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
imgOptions: {
|
|
imgOptions: {
|
|
@@ -253,7 +258,7 @@ export default {
|
|
|
disableOnInteraction: false
|
|
disableOnInteraction: false
|
|
|
},
|
|
},
|
|
|
on: {
|
|
on: {
|
|
|
- transitionEnd: swiper => {
|
|
|
|
|
|
|
+ slideChange: swiper => {
|
|
|
this.actives = this.imgSwiper.activeIndex;
|
|
this.actives = this.imgSwiper.activeIndex;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -300,9 +305,6 @@ export default {
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
- page() {
|
|
|
|
|
- return this.$refs['imgSwiper'].swiper;
|
|
|
|
|
- },
|
|
|
|
|
imgSwiper() {
|
|
imgSwiper() {
|
|
|
return this.$refs.imgSwiper.$swiper;
|
|
return this.$refs.imgSwiper.$swiper;
|
|
|
},
|
|
},
|
|
@@ -335,13 +337,13 @@ export default {
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
this.historys = JSON.parse(res.value);
|
|
this.historys = JSON.parse(res.value);
|
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
|
- this.imgSwiper.init();
|
|
|
|
|
|
|
+ this.imgSwiper.update();
|
|
|
this.timeSwiper.update();
|
|
this.timeSwiper.update();
|
|
|
this.imgSwiper.controller.control = this.timeSwiper;
|
|
this.imgSwiper.controller.control = this.timeSwiper;
|
|
|
- this.timeSwiper.controller.control = this.imgSwiper;
|
|
|
|
|
- if (!this.timeSwiper.autoplay.running) {
|
|
|
|
|
- this.timeSwiper.autoplay.start();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // this.timeSwiper.controller.control = this.imgSwiper;
|
|
|
|
|
+ // if (!this.timeSwiper.autoplay.running) {
|
|
|
|
|
+ // this.timeSwiper.autoplay.start();
|
|
|
|
|
+ // }
|
|
|
// setTimeout(() => {
|
|
// setTimeout(() => {
|
|
|
// this.imgSwiper.updateSize();
|
|
// this.imgSwiper.updateSize();
|
|
|
// }, 500);
|
|
// }, 500);
|
|
@@ -405,16 +407,6 @@ export default {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- touchStart() {
|
|
|
|
|
- if (this.timeSwiper.autoplay.running) {
|
|
|
|
|
- this.timeSwiper.autoplay.stop();
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- touchEnd() {
|
|
|
|
|
- if (!this.timeSwiper.autoplay.running) {
|
|
|
|
|
- this.timeSwiper.autoplay.start();
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
slideChange() {
|
|
slideChange() {
|
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
|
this.active = this.imgSwiper.activeIndex;
|
|
this.active = this.imgSwiper.activeIndex;
|
|
@@ -434,6 +426,12 @@ export default {
|
|
|
''
|
|
''
|
|
|
);
|
|
);
|
|
|
}, 2000);
|
|
}, 2000);
|
|
|
|
|
+ },
|
|
|
|
|
+ mousemoveEve() {
|
|
|
|
|
+ this.imgSwiper.autoplay.stop();
|
|
|
|
|
+ },
|
|
|
|
|
+ mouseoutEve() {
|
|
|
|
|
+ this.imgSwiper.autoplay.start();
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
@@ -510,7 +508,7 @@ export default {
|
|
|
.intro_con_right_one {
|
|
.intro_con_right_one {
|
|
|
width: 189px;
|
|
width: 189px;
|
|
|
height: 20px;
|
|
height: 20px;
|
|
|
- background: #405CFF;
|
|
|
|
|
|
|
+ background: #405cff;
|
|
|
opacity: 0.6;
|
|
opacity: 0.6;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
right: -20px;
|
|
right: -20px;
|
|
@@ -519,7 +517,7 @@ export default {
|
|
|
.intro_con_right_two {
|
|
.intro_con_right_two {
|
|
|
width: 20px;
|
|
width: 20px;
|
|
|
height: 169px;
|
|
height: 169px;
|
|
|
- background: #405CFF;
|
|
|
|
|
|
|
+ background: #405cff;
|
|
|
opacity: 0.6;
|
|
opacity: 0.6;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
right: -20px;
|
|
right: -20px;
|
|
@@ -565,8 +563,12 @@ export default {
|
|
|
.content_con_title {
|
|
.content_con_title {
|
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
- box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
|
+ box-shadow: 0px 0px 6px 0px #d2dbf0;
|
|
|
padding: 60px 40px 0px;
|
|
padding: 60px 40px 0px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ margin-left: 4px;
|
|
|
|
|
+ margin-top: 1px;
|
|
|
|
|
+ margin-right: 1px;
|
|
|
.content_con_title_one {
|
|
.content_con_title_one {
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
@@ -600,6 +602,8 @@ export default {
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 6px 0px #d2dbf0;
|
|
box-shadow: 0px 0px 6px 0px #d2dbf0;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
|
|
+ padding: 40px 8px 15px 30px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
.history_con_content_right_con {
|
|
.history_con_content_right_con {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
padding: 40px 60px 22px 40px;
|
|
padding: 40px 60px 22px 40px;
|
|
@@ -624,6 +628,170 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .timeLine {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding-left: 10px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ // background-color: fade(@warn, 70%);
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // right: calc(50% - 100px);
|
|
|
|
|
+ // bottom: 90px;
|
|
|
|
|
+
|
|
|
|
|
+ /deep/ .swiper-slide {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ padding: 10px 0 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .time-item {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ padding-left: 30px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .text1 {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ span {
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: #939599;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ // &:first-child {
|
|
|
|
|
+ // font-family: Impact;
|
|
|
|
|
+ // color: #ffffff;
|
|
|
|
|
+ // line-height: 30px;
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ // &:nth-child(2) {
|
|
|
|
|
+ // font-size: 18px;
|
|
|
|
|
+ // font-weight: bold;
|
|
|
|
|
+ // color: #ffffff;
|
|
|
|
|
+ // line-height: 30px;
|
|
|
|
|
+ // margin-right: 6px;
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+ .text1_img {
|
|
|
|
|
+ width: 22px;
|
|
|
|
|
+ height: 22px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: -35px;
|
|
|
|
|
+ top: 1px;
|
|
|
|
|
+ }
|
|
|
|
|
+ // &::before {
|
|
|
|
|
+ // content: '';
|
|
|
|
|
+ // width: 11px;
|
|
|
|
|
+ // height: 11px;
|
|
|
|
|
+ // background: #ffffff;
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // left: -29px;
|
|
|
|
|
+ // top: 11px;
|
|
|
|
|
+ // border-radius: 100%;
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+ .textxuanzhong {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ span {
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: #405cff;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ // &:first-child {
|
|
|
|
|
+ // font-family: Impact;
|
|
|
|
|
+ // color: #ffffff;
|
|
|
|
|
+ // line-height: 30px;
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ // &:nth-child(2) {
|
|
|
|
|
+ // font-size: 18px;
|
|
|
|
|
+ // font-weight: bold;
|
|
|
|
|
+ // color: #ffffff;
|
|
|
|
|
+ // line-height: 30px;
|
|
|
|
|
+ // margin-right: 6px;
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+ .text1_img {
|
|
|
|
|
+ width: 22px;
|
|
|
|
|
+ height: 22px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: -35px;
|
|
|
|
|
+ top: 1px;
|
|
|
|
|
+ }
|
|
|
|
|
+ // &::before {
|
|
|
|
|
+ // content: '';
|
|
|
|
|
+ // width: 11px;
|
|
|
|
|
+ // height: 11px;
|
|
|
|
|
+ // background: #ffffff;
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // left: -29px;
|
|
|
|
|
+ // top: 11px;
|
|
|
|
|
+ // border-radius: 100%;
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+ .text2 {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #313233;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+ // &::before {
|
|
|
|
|
+ // content: '';
|
|
|
|
|
+ // width: 15px;
|
|
|
|
|
+ // height: 15px;
|
|
|
|
|
+ // border: 1px solid #ffffff;
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // left: -2px;
|
|
|
|
|
+ // top: 8px;
|
|
|
|
|
+ // border-radius: 100%;
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ width: 0px;
|
|
|
|
|
+ height: 110%;
|
|
|
|
|
+ border-left: 1px solid #ececed;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 6px;
|
|
|
|
|
+ top: 28px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /deep/ .swiper-slide {
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ .time-item {
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /deep/ .swiper-pagination-progressbar {
|
|
|
|
|
+ left: auto;
|
|
|
|
|
+ right: 0px;
|
|
|
|
|
+ height: calc(100% + 15px);
|
|
|
|
|
+ top: -15px;
|
|
|
|
|
+ width: 4px;
|
|
|
|
|
+ background: #ececed;
|
|
|
|
|
+ .swiper-pagination-progressbar-fill {
|
|
|
|
|
+ background: #d4d4d5;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ /deep/ .swiper-slide-active {
|
|
|
|
|
+ .text1 {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #405cff !important;
|
|
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
// .content {
|
|
// .content {
|
|
@@ -935,13 +1103,17 @@ export default {
|
|
|
width: 940px;
|
|
width: 940px;
|
|
|
// padding-bottom: 40px;
|
|
// padding-bottom: 40px;
|
|
|
.honor_con {
|
|
.honor_con {
|
|
|
- width: 290px;
|
|
|
|
|
|
|
+ width: 282px;
|
|
|
height: 250px;
|
|
height: 250px;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 6px 0px #d2dbf0;
|
|
box-shadow: 0px 0px 6px 0px #d2dbf0;
|
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
padding-bottom: 0px;
|
|
padding-bottom: 0px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
+ margin-top: 3px;
|
|
|
|
|
+ margin-right: 1px;
|
|
|
|
|
+ margin-bottom: 3px;
|
|
|
|
|
+ margin-left: 3px;
|
|
|
}
|
|
}
|
|
|
img {
|
|
img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -1109,105 +1281,6 @@ export default {
|
|
|
// }
|
|
// }
|
|
|
// }
|
|
// }
|
|
|
// }
|
|
// }
|
|
|
-
|
|
|
|
|
-// .timeLine {
|
|
|
|
|
-// width: 340px;
|
|
|
|
|
-// height: 50%;
|
|
|
|
|
-// padding: 20px;
|
|
|
|
|
-// box-sizing: border-box;
|
|
|
|
|
-// background-color: fade(@warn, 70%);
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// right: calc(50% - 100px);
|
|
|
|
|
-// bottom: 90px;
|
|
|
|
|
-
|
|
|
|
|
-// /deep/ .swiper-slide {
|
|
|
|
|
-// height: auto;
|
|
|
|
|
-// padding: 10px 0 20px;
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// .time-item {
|
|
|
|
|
-// font-size: 14px;
|
|
|
|
|
-// color: #ffffff;
|
|
|
|
|
-// line-height: 24px;
|
|
|
|
|
-// padding-left: 30px;
|
|
|
|
|
-// position: relative;
|
|
|
|
|
-// .text1 {
|
|
|
|
|
-// position: relative;
|
|
|
|
|
-// span {
|
|
|
|
|
-// vertical-align: middle;
|
|
|
|
|
-// &:first-child {
|
|
|
|
|
-// font-family: Impact;
|
|
|
|
|
-// color: #ffffff;
|
|
|
|
|
-// line-height: 30px;
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// &:nth-child(2) {
|
|
|
|
|
-// font-size: 18px;
|
|
|
|
|
-// font-weight: bold;
|
|
|
|
|
-// color: #ffffff;
|
|
|
|
|
-// line-height: 30px;
|
|
|
|
|
-// margin-right: 6px;
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// &::before {
|
|
|
|
|
-// content: '';
|
|
|
|
|
-// width: 11px;
|
|
|
|
|
-// height: 11px;
|
|
|
|
|
-// background: #ffffff;
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// left: -29px;
|
|
|
|
|
-// top: 11px;
|
|
|
|
|
-// border-radius: 100%;
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// &::before {
|
|
|
|
|
-// content: '';
|
|
|
|
|
-// width: 15px;
|
|
|
|
|
-// height: 15px;
|
|
|
|
|
-// border: 1px solid #ffffff;
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// left: -2px;
|
|
|
|
|
-// top: 8px;
|
|
|
|
|
-// border-radius: 100%;
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// &::after {
|
|
|
|
|
-// content: '';
|
|
|
|
|
-// width: 0px;
|
|
|
|
|
-// height: 110%;
|
|
|
|
|
-// border-left: 1px dashed #fff;
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// left: 6px;
|
|
|
|
|
-// top: 28px;
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// /deep/ .swiper-slide {
|
|
|
|
|
-// &:last-child {
|
|
|
|
|
-// .time-item {
|
|
|
|
|
-// &::after {
|
|
|
|
|
-// content: none;
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-
|
|
|
|
|
-// /deep/ .swiper-pagination-progressbar {
|
|
|
|
|
-// left: auto;
|
|
|
|
|
-// right: 20px;
|
|
|
|
|
-// height: calc(100% - 60px);
|
|
|
|
|
-// top: 30px;
|
|
|
|
|
-// width: 2px;
|
|
|
|
|
-// .swiper-pagination-progressbar-fill {
|
|
|
|
|
-// background-color: #fff;
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
.center-content_five {
|
|
.center-content_five {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
@@ -1260,3 +1333,4 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
+
|