|
@@ -1,48 +1,48 @@
|
|
<template>
|
|
<template>
|
|
<div class="lunbo " id="jssor_1">
|
|
<div class="lunbo " id="jssor_1">
|
|
<ul ref="jssor" class="jssor-wrapper" data-u="slides" @mousedown="mousedown" @mousemove="mousemove">
|
|
<ul ref="jssor" class="jssor-wrapper" data-u="slides" @mousedown="mousedown" @mousemove="mousemove">
|
|
- <li
|
|
|
|
- class="jssor-slide"
|
|
|
|
- @click.stop="handleItem(item)"
|
|
|
|
- :class="{ weiyi: i % 2 != 0, flipActive: active.id == item.id }"
|
|
|
|
- v-for="(item, i) in piclist"
|
|
|
|
- :key="i"
|
|
|
|
- >
|
|
|
|
|
|
+ <li class="jssor-slide" @click.stop="handleItem(item)"
|
|
|
|
+ :class="{ weiyi: i % 2 != 0, flipActive: active.id == item.id }" v-for="(item, i) in piclist" :key="i">
|
|
<div data-u="image">
|
|
<div data-u="image">
|
|
|
|
|
|
- <div class="imgdefault">
|
|
|
|
- <!-- 'http://192.168.0.109:8004/'+ -->
|
|
|
|
|
|
+ <div class="imgdefault">
|
|
|
|
+ <!-- 'http://192.168.0.109:8004/'+ -->
|
|
|
|
|
|
- <img :class="{ hideImg: noImg }" :src="item.thumb" alt="" />
|
|
|
|
- <p>
|
|
|
|
- <strong :title="item.name">{{ item.name }}</strong>
|
|
|
|
- <span v-if="item.level!=6" :title="item.title || g_typeStr[item.level]">{{ item.title || g_typeStr[item.level] }}</span>
|
|
|
|
- <span :title="item.years ? `(${item.years})` : ''">{{ item.years ? `(${item.years})` : "" }}</span>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="imgactive">
|
|
|
|
- <h2>
|
|
|
|
- <strong :title="item.name">{{ item.name }}</strong>
|
|
|
|
- <span :title="item.years ? `(${item.years})` : ''">{{ item.years ? `(${item.years})` : "" }}</span>
|
|
|
|
- </h2>
|
|
|
|
- <h2>
|
|
|
|
- <strong v-if="item.level!=6" :title="item.title || g_typeStr[item.level]">{{ item.title || g_typeStr[item.level] }}</strong>
|
|
|
|
- </h2>
|
|
|
|
-
|
|
|
|
- <!-- 'http://192.168.0.245:8004/'+ -->
|
|
|
|
- <div v-if="showVideo && item.video" @click.stop="openVideo(item)" class="iivideo" :class="{ iimask: showBofang, iinourl: item.url }">
|
|
|
|
- <img class="bofang" :src="require(`@/assets/images/expert/bofang.png`)" v-if="showBofang" />
|
|
|
|
- <img class="poster" :src="item.thumb" v-if="showBofang" />
|
|
|
|
|
|
+ <img :class="{ hideImg: noImg }" :src="item.thumb" alt="" />
|
|
|
|
+ <p>
|
|
|
|
+ <strong :title="item.name">{{ item.name }}</strong>
|
|
|
|
+ <span v-if="item.level != 6" :title="item.title || g_typeStr[item.level]">{{ item.title ||
|
|
|
|
+ g_typeStr[item.level]
|
|
|
|
+ }}</span>
|
|
|
|
+ <span :title="item.years ? `(${item.years})` : ''">{{ item.years ? `(${item.years})` : "" }}</span>
|
|
|
|
+ </p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <p :class="{ novideo: !item.video, nourl: !item.video && !item.url }" v-html="item.description"></p>
|
|
|
|
|
|
+ <div class="imgactive">
|
|
|
|
+ <h2>
|
|
|
|
+ <strong :title="item.name">{{ item.name }}</strong>
|
|
|
|
+ <span :title="item.years ? `(${item.years})` : ''">{{ item.years ? `(${item.years})` : "" }}</span>
|
|
|
|
+ </h2>
|
|
|
|
+ <h2>
|
|
|
|
+ <strong v-if="item.level != 6" :title="item.title || g_typeStr[item.level]">{{ item.title ||
|
|
|
|
+ g_typeStr[item.level]
|
|
|
|
+ }}</strong>
|
|
|
|
+ </h2>
|
|
|
|
+
|
|
|
|
+ <!-- 'http://192.168.0.245:8004/'+ -->
|
|
|
|
+ <div v-if="showVideo && item.video" @click.stop="openVideo(item)" class="iivideo"
|
|
|
|
+ :class="{ iimask: showBofang, iinourl: item.url }">
|
|
|
|
+ <img class="bofang" :src="require(`@/assets/images/expert/bofang.png`)" v-if="showBofang" />
|
|
|
|
+ <img class="poster" :src="item.thumb" v-if="showBofang" />
|
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="enter" :title="item.urlName" v-if="item.url" @click.stop="open(item)">
|
|
|
|
- <span>{{ item.urlName || "-" }}</span>
|
|
|
|
|
|
+ <p :class="{ novideo: !item.video, nourl: !item.video && !item.url }" v-html="item.description"></p>
|
|
|
|
+
|
|
|
|
+ <div class="enter" :title="item.urlName" v-if="item.url" @click.stop="open(item)">
|
|
|
|
+ <span>{{ item.urlName || "-" }}</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@@ -50,18 +50,18 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
- var jssor_1_options = {
|
|
|
|
- $AutoPlay: 0,
|
|
|
|
- $Idle: 0,
|
|
|
|
- $SlideDuration: 5000,
|
|
|
|
- $SlideEasing: $Jease$.$Linear,
|
|
|
|
- $PauseOnHover: 4,
|
|
|
|
- $SlideSpacing:60,
|
|
|
|
- $SlideWidth: 340,
|
|
|
|
- $SlideHeight: 560,
|
|
|
|
- $Loop: 0,
|
|
|
|
- $Align: 0
|
|
|
|
- };
|
|
|
|
|
|
+var jssor_1_options = {
|
|
|
|
+ $AutoPlay: 0,
|
|
|
|
+ $Idle: 0,
|
|
|
|
+ $SlideDuration: 5000,
|
|
|
|
+ $SlideEasing: $Jease$.$Linear,
|
|
|
|
+ $PauseOnHover: 4,
|
|
|
|
+ $SlideSpacing: 60,
|
|
|
|
+ $SlideWidth: 340,
|
|
|
|
+ $SlideHeight: 560,
|
|
|
|
+ $Loop: 0,
|
|
|
|
+ $Align: 0
|
|
|
|
+};
|
|
|
|
|
|
export default {
|
|
export default {
|
|
props: ["list"],
|
|
props: ["list"],
|
|
@@ -82,17 +82,17 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
- mousedown(e){
|
|
|
|
|
|
+ mousedown(e) {
|
|
if (this.isStopProp) {
|
|
if (this.isStopProp) {
|
|
e.stopPropagation()
|
|
e.stopPropagation()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mousemove(e){
|
|
|
|
- if (this.isStopProp) {
|
|
|
|
|
|
+ mousemove(e) {
|
|
|
|
+ if (this.isStopProp) {
|
|
e.stopPropagation()
|
|
e.stopPropagation()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- listenFn(){
|
|
|
|
|
|
+ listenFn() {
|
|
window.jssor_1_slider.$AutoPlay(1)
|
|
window.jssor_1_slider.$AutoPlay(1)
|
|
this.isStopProp = false
|
|
this.isStopProp = false
|
|
},
|
|
},
|
|
@@ -132,7 +132,7 @@ export default {
|
|
this.active = item;
|
|
this.active = item;
|
|
if (!this.isStopProp) {
|
|
if (!this.isStopProp) {
|
|
window.jssor_1_slider.$AutoPlay(0)
|
|
window.jssor_1_slider.$AutoPlay(0)
|
|
- }
|
|
|
|
|
|
+ }
|
|
this.TT && clearTimeout(this.TT);
|
|
this.TT && clearTimeout(this.TT);
|
|
this.TT = setTimeout(() => {
|
|
this.TT = setTimeout(() => {
|
|
this.noImg = true;
|
|
this.noImg = true;
|
|
@@ -151,18 +151,19 @@ export default {
|
|
mounted() {
|
|
mounted() {
|
|
window.jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
|
|
window.jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
|
|
window.jssor_1_slider.$AutoPlay(0)
|
|
window.jssor_1_slider.$AutoPlay(0)
|
|
- this.$bus.$on('startLoop',this.listenFn)
|
|
|
|
|
|
+ this.$bus.$on('startLoop', this.listenFn)
|
|
},
|
|
},
|
|
|
|
|
|
destroyed() {
|
|
destroyed() {
|
|
this.$bus.$off("startLoop", this.listenFn);
|
|
this.$bus.$off("startLoop", this.listenFn);
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@jianjinw: 10%;
|
|
@jianjinw: 10%;
|
|
|
|
+
|
|
.lunbo {
|
|
.lunbo {
|
|
width: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
position: relative;
|
|
@@ -171,6 +172,7 @@ export default {
|
|
bottom: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
left: 0;
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
|
|
+
|
|
.jssor-wrapper {
|
|
.jssor-wrapper {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -178,15 +180,17 @@ export default {
|
|
top: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
position: absolute;
|
|
padding: 0 60px;
|
|
padding: 0 60px;
|
|
|
|
+
|
|
.jssor-slide {
|
|
.jssor-slide {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
margin: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
position: relative;
|
|
- top: 158px!important;
|
|
|
|
|
|
+ top: 158px !important;
|
|
height: auto;
|
|
height: auto;
|
|
// cursor: pointer;
|
|
// cursor: pointer;
|
|
width: 340px;
|
|
width: 340px;
|
|
perspective: 1000px;
|
|
perspective: 1000px;
|
|
|
|
+
|
|
.imgdefault,
|
|
.imgdefault,
|
|
.imgactive {
|
|
.imgactive {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -199,8 +203,9 @@ export default {
|
|
backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: 0.6s;
|
|
transition: 0.6s;
|
|
transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
|
|
+
|
|
//transform: rotateX(0);
|
|
//transform: rotateX(0);
|
|
- &::before{
|
|
|
|
|
|
+ &::before {
|
|
filter: blur(2px);
|
|
filter: blur(2px);
|
|
content: '';
|
|
content: '';
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -208,22 +213,25 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
left: 0;
|
|
left: 0;
|
|
- background: rgba(178,69,81,.2);
|
|
|
|
|
|
+ background: rgba(178, 69, 81, .2);
|
|
z-index: -1;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
- > img {
|
|
|
|
|
|
+
|
|
|
|
+ >img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 414px;
|
|
height: 414px;
|
|
position: relative;
|
|
position: relative;
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
- > p {
|
|
|
|
|
|
+
|
|
|
|
+ >p {
|
|
text-align: left;
|
|
text-align: left;
|
|
font-size: 22px;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
margin: 10px 0;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
- > strong {
|
|
|
|
|
|
+
|
|
|
|
+ >strong {
|
|
font-size: 22px;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
width: 90px;
|
|
width: 90px;
|
|
@@ -233,7 +241,8 @@ export default {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
- > span {
|
|
|
|
|
|
+
|
|
|
|
+ >span {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
width: 78px;
|
|
width: 78px;
|
|
@@ -243,6 +252,7 @@ export default {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
vertical-align: bottom;
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
+
|
|
&:last-of-type {
|
|
&:last-of-type {
|
|
width: auto;
|
|
width: auto;
|
|
max-width: 170px;
|
|
max-width: 170px;
|
|
@@ -250,6 +260,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.imgactive {
|
|
.imgactive {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 0;
|
|
left: 0;
|
|
@@ -259,12 +270,14 @@ export default {
|
|
transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
background: linear-gradient(180deg, rgba(178, 69, 81, 0.5) 0%, rgba(239, 167, 120, 0.5) 100%);
|
|
background: linear-gradient(180deg, rgba(178, 69, 81, 0.5) 0%, rgba(239, 167, 120, 0.5) 100%);
|
|
padding: 20px 26px;
|
|
padding: 20px 26px;
|
|
|
|
+
|
|
.iivideo {
|
|
.iivideo {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 70%;
|
|
height: 70%;
|
|
position: relative;
|
|
position: relative;
|
|
z-index: 99;
|
|
z-index: 99;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+
|
|
.bofang {
|
|
.bofang {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 50%;
|
|
top: 50%;
|
|
@@ -299,12 +312,14 @@ export default {
|
|
left: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- > h2 {
|
|
|
|
|
|
+
|
|
|
|
+ >h2 {
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
font-weight: normal;
|
|
font-weight: normal;
|
|
margin-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
height: 7%;
|
|
height: 7%;
|
|
- > strong {
|
|
|
|
|
|
+
|
|
|
|
+ >strong {
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
width: 120px;
|
|
width: 120px;
|
|
@@ -314,11 +329,13 @@ export default {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
+
|
|
&:last-of-type {
|
|
&:last-of-type {
|
|
- > strong {
|
|
|
|
|
|
+ >strong {
|
|
width: 300px;
|
|
width: 300px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
span {
|
|
span {
|
|
width: auto;
|
|
width: auto;
|
|
max-width: 160px;
|
|
max-width: 160px;
|
|
@@ -330,7 +347,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- > p {
|
|
|
|
|
|
+ >p {
|
|
text-indent: 28px;
|
|
text-indent: 28px;
|
|
font-weight: normal;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
@@ -373,7 +390,8 @@ export default {
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
vertical-align: bottom;
|
|
vertical-align: bottom;
|
|
- > span {
|
|
|
|
|
|
+
|
|
|
|
+ >span {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -382,9 +400,11 @@ export default {
|
|
|
|
|
|
.flipActive {
|
|
.flipActive {
|
|
width: 360px;
|
|
width: 360px;
|
|
|
|
+
|
|
.imgdefault {
|
|
.imgdefault {
|
|
transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
- > img {
|
|
|
|
|
|
+
|
|
|
|
+ >img {
|
|
width: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
@@ -393,14 +413,30 @@ export default {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.imgactive {
|
|
.imgactive {
|
|
transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.weiyi {
|
|
.weiyi {
|
|
transform: translateY(-55px);
|
|
transform: translateY(-55px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+@media screen and (max-width: 1700px) {
|
|
|
|
+ .lunbo {
|
|
|
|
+
|
|
|
|
+ .jssor-wrapper {
|
|
|
|
+
|
|
|
|
+ .jssor-slide {
|
|
|
|
+ top: 124px !important;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|
|
</style>
|
|
</style>
|