6 changed files with 732 additions and 758 deletions
@ -1,209 +1,210 @@ |
|||||||
<template> |
<template> |
||||||
<view class="adv-box mx20 mb10"> |
<view class="adv-box mx20 mb10"> |
||||||
<!-- 模板1--> |
<!-- 模板1--> |
||||||
<view class="x-f" v-if="detail.style == 1"> |
<view class="x-f" v-if="detail.style == 1"> |
||||||
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image style="width: 710rpx; height: 220rpx" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<!-- 模板2--> |
<!-- 模板2--> |
||||||
<view class="type1 x-f" v-if="detail.style == 2"> |
<view class="type1 x-f" v-if="detail.style == 2"> |
||||||
<image class="type1-img" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type1-img" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<image class="type1-img" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill"></image> |
<image class="type1-img" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<!-- 模板3--> |
<!-- 模板3--> |
||||||
<view class="type2 x-bc" v-if="detail.style == 3"> |
<view class="type2 x-bc" v-if="detail.style == 3"> |
||||||
<image class="type2-img1" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type2-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<view class="y-f type2-box"> |
<view class="y-f type2-box"> |
||||||
<image class="type2-img2" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
<image class="type2-img2" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill" style="border-bottom: 1rpx solid #f6f6f6"></image> |
||||||
<image class="type2-img2" @tap="jump(detail.list[2].uniapp_url)" :src="detail.list[2].image" mode="aspectFill"></image> |
<image class="type2-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<!-- 模板4--> |
<!-- 模板4--> |
||||||
<view class="type3 x-bc" v-if="detail.style == 4"> |
<view class="type3 x-bc" v-if="detail.style == 4"> |
||||||
<view class="type3-box y-f"> |
<view class="type3-box y-f"> |
||||||
<image class="type3-img1" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type3-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<image class="type3-img1" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill"></image> |
<image class="type3-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<image class="type3-img2" @tap="jump(detail.list[2].uniapp_url)" :src="detail.list[2].image" mode="aspectFill"></image> |
<image class="type3-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<!-- 模板5--> |
<!-- 模板5--> |
||||||
<view class="type4 y-f" v-if="detail.style == 5"> |
<view class="type4 y-f" v-if="detail.style == 5"> |
||||||
<view class="type4-box x-f"> |
<view class="type4-box x-f"> |
||||||
<image class="type4-img1" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type4-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<image class="type4-img1" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill"></image> |
<image class="type4-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<image class="type4-img2" @tap="jump(detail.list[2].uniapp_url)" :src="detail.list[2].image" mode="aspectFill"></image> |
<image class="type4-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<!-- 模板6--> |
<!-- 模板6--> |
||||||
<view class="type5 y-f" v-if="detail.style == 6"> |
<view class="type5 y-f" v-if="detail.style == 6"> |
||||||
<image class="type5-img1" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type5-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<view class="type5-box x-bc"> |
<view class="type5-box x-bc"> |
||||||
<image class="type5-img2" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
<image class="type5-img2" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill" style="border-bottom: 1rpx solid #f6f6f6"></image> |
||||||
<image class="type5-img2" @tap="jump(detail.list[2].uniapp_url)" :src="detail.list[2].image" mode="aspectFill"></image> |
<image class="type5-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<!-- 模板7--> |
<!-- 模板7--> |
||||||
<view class="type6 y-f" v-if="detail.style == 7"> |
<view class="type6 y-f" v-if="detail.style == 7"> |
||||||
<view class="x-f type6-box1"> |
<view class="x-f type6-box1"> |
||||||
<image class="type6-img1" @tap="jump(detail.list[0].uniapp_url)" :src="detail.list[0].image" mode="aspectFill"></image> |
<image class="type6-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<image class="type6-img1" @tap="jump(detail.list[1].uniapp_url)" :src="detail.list[1].image" mode="aspectFill"></image> |
<image class="type6-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<view class="x-f type6-box2"> |
<view class="x-f type6-box2"> |
||||||
<image class="type6-img2" @tap="jump(detail.list[2].uniapp_url)" :src="detail.list[2].image" mode="aspectFill"></image> |
<image class="type6-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
<image class="type6-img2" @tap="jump(detail.list[3].uniapp_url)" :src="detail.list[3].image" mode="aspectFill"></image> |
<image class="type6-img2" @tap="jump(detail.list[3])" :src="detail.list[3].image" mode="aspectFill"></image> |
||||||
<image class="type6-img2" @tap="jump(detail.list[4].uniapp_url)" :src="detail.list[4].image" mode="aspectFill"></image> |
<image class="type6-img2" @tap="jump(detail.list[4])" :src="detail.list[4].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
components: {}, |
components: {}, |
||||||
data() { |
data() { |
||||||
return {}; |
return {} |
||||||
}, |
}, |
||||||
props: { |
props: { |
||||||
detail: Object |
detail: Object, |
||||||
}, |
}, |
||||||
computed: {}, |
computed: {}, |
||||||
created() {}, |
created() {}, |
||||||
methods: { |
methods: { |
||||||
// 路由跳转 |
// 路由跳转 |
||||||
jump(path) { |
jump(item) { |
||||||
if (item.uniapp_url) { |
console.log(item) |
||||||
this.$yrouter.push(path) |
if (item) { |
||||||
} |
this.$yrouter.push(path) |
||||||
} |
} |
||||||
} |
}, |
||||||
}; |
}, |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss"> |
||||||
.adv-box { |
.adv-box { |
||||||
background-color: #fff; |
background-color: #fff; |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
.type1 { |
.type1 { |
||||||
.type1-img { |
.type1-img { |
||||||
flex: 1; |
flex: 1; |
||||||
height: 220rpx; |
height: 220rpx; |
||||||
|
|
||||||
&:first-child { |
&:first-child { |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type2 { |
.type2 { |
||||||
.type2-img1 { |
.type2-img1 { |
||||||
width: (710rpx/2); |
width: (710rpx/2); |
||||||
height: 340rpx; |
height: 340rpx; |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
|
|
||||||
.type2-box { |
.type2-box { |
||||||
flex: 1; |
flex: 1; |
||||||
height: 340rpx; |
height: 340rpx; |
||||||
width: (710rpx/2); |
width: (710rpx/2); |
||||||
|
|
||||||
.type2-img2 { |
.type2-img2 { |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type3 { |
.type3 { |
||||||
.type3-box { |
.type3-box { |
||||||
width: (710rpx/2); |
width: (710rpx/2); |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
.type3-img1 { |
.type3-img1 { |
||||||
flex: 1; |
flex: 1; |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
|
|
||||||
&:first-child { |
&:first-child { |
||||||
border-bottom: 1rpx solid #f6f6f6; |
border-bottom: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type3-img2 { |
.type3-img2 { |
||||||
flex: 1; |
flex: 1; |
||||||
height: 340rpx; |
height: 340rpx; |
||||||
width: (710rpx/2); |
width: (710rpx/2); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type4 { |
.type4 { |
||||||
.type4-box { |
.type4-box { |
||||||
border-bottom: 1rpx solid #f6f6f6; |
border-bottom: 1rpx solid #f6f6f6; |
||||||
.type4-img1 { |
.type4-img1 { |
||||||
flex: 1; |
flex: 1; |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
|
|
||||||
&:first-child { |
&:first-child { |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type4-img2 { |
.type4-img2 { |
||||||
flex: 1; |
flex: 1; |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
width: 710rpx; |
width: 710rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type5 { |
.type5 { |
||||||
.type5-img1 { |
.type5-img1 { |
||||||
width: 710rpx; |
width: 710rpx; |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
border-bottom: 1rpx solid #f6f6f6; |
border-bottom: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
|
|
||||||
.type5-box { |
.type5-box { |
||||||
flex: 1; |
flex: 1; |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
width: 710rpx; |
width: 710rpx; |
||||||
|
|
||||||
.type5-img2 { |
.type5-img2 { |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
|
|
||||||
&:first-child { |
&:first-child { |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type6 { |
.type6 { |
||||||
.type6-box1 { |
.type6-box1 { |
||||||
.type6-img1 { |
.type6-img1 { |
||||||
width: (710rpx/2); |
width: (710rpx/2); |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
|
|
||||||
&:first-child { |
&:first-child { |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.type6-box2 { |
.type6-box2 { |
||||||
border-top: 1rpx solid #f6f6f6; |
border-top: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
.type6-img2 { |
.type6-img2 { |
||||||
width: (710rpx/3); |
width: (710rpx/3); |
||||||
height: (340rpx/2); |
height: (340rpx/2); |
||||||
border-right: 1rpx solid #f6f6f6; |
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
&:last-child { |
&:last-child { |
||||||
border-right: 0; |
border-right: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
image { |
image { |
||||||
// background-color: #ccc; |
// background-color: #ccc; |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
@ -1,240 +1,217 @@ |
|||||||
<template> |
<template> |
||||||
<view class="adv-box mx20 mb10"> |
<view class="adv-box mx20 mb10"> |
||||||
<!-- 模板1--> |
<!-- 模板1--> |
||||||
<view class="x-f" v-if="detail.style == 1"> |
<view class="x-f" v-if="detail.style == 1"> |
||||||
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
<image style="width: 710rpx; height: 220rpx" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
mode="aspectFill"></image> |
</view> |
||||||
</view> |
<!-- 模板2--> |
||||||
<!-- 模板2--> |
<view class="type1 x-f" v-if="detail.style == 2"> |
||||||
<view class="type1 x-f" v-if="detail.style == 2"> |
<image class="type1-img" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"> </image> |
||||||
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
<image class="type1-img" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"> </image> |
||||||
</image> |
</view> |
||||||
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"> |
<!-- 模板3--> |
||||||
</image> |
<view class="type2 x-bc" v-if="detail.style == 3"> |
||||||
</view> |
<image class="type2-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"> </image> |
||||||
<!-- 模板3--> |
<view class="y-f type2-box"> |
||||||
<view class="type2 x-bc" v-if="detail.style == 3"> |
<image class="type2-img2" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill" style="border-bottom: 1rpx solid #f6f6f6"></image> |
||||||
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
<image class="type2-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
</image> |
</view> |
||||||
<view class="y-f type2-box"> |
</view> |
||||||
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" |
<!-- 模板4--> |
||||||
style="border-bottom:1rpx solid #f6f6f6"></image> |
<view class="type3 x-bc" v-if="detail.style == 4"> |
||||||
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
<view class="type3-box y-f"> |
||||||
mode="aspectFill"></image> |
<image class="type3-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
</view> |
<image class="type3-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<!-- 模板4--> |
<image class="type3-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"> </image> |
||||||
<view class="type3 x-bc" v-if="detail.style == 4"> |
</view> |
||||||
<view class="type3-box y-f"> |
<!-- 模板5--> |
||||||
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
<view class="type4 y-f" v-if="detail.style == 5"> |
||||||
mode="aspectFill"></image> |
<view class="type4-box x-f"> |
||||||
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
<image class="type4-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
mode="aspectFill"></image> |
<image class="type4-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"> |
<image class="type4-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"> </image> |
||||||
</image> |
</view> |
||||||
</view> |
<!-- 模板6--> |
||||||
<!-- 模板5--> |
<view class="type5 y-f" v-if="detail.style == 6"> |
||||||
<view class="type4 y-f" v-if="detail.style == 5"> |
<image class="type5-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"> </image> |
||||||
<view class="type4-box x-f"> |
<view class="type5-box x-bc"> |
||||||
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
<image class="type5-img2" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill" style="border-bottom: 1rpx solid #f6f6f6"></image> |
||||||
mode="aspectFill"></image> |
<image class="type5-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
</view> |
||||||
mode="aspectFill"></image> |
</view> |
||||||
</view> |
<!-- 模板7--> |
||||||
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"> |
<view class="type6 y-f" v-if="detail.style == 7"> |
||||||
</image> |
<view class="x-f type6-box1"> |
||||||
</view> |
<image class="type6-img1" @tap="jump(detail.list[0])" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
<!-- 模板6--> |
<image class="type6-img1" @tap="jump(detail.list[1])" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
<view class="type5 y-f" v-if="detail.style == 6"> |
</view> |
||||||
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
<view class="x-f type6-box2"> |
||||||
</image> |
<image class="type6-img2" @tap="jump(detail.list[2])" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
<view class="type5-box x-bc"> |
<image class="type6-img2" @tap="jump(detail.list[3])" :src="detail.list[3].image" mode="aspectFill"></image> |
||||||
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" |
<image class="type6-img2" @tap="jump(detail.list[4])" :src="detail.list[4].image" mode="aspectFill"></image> |
||||||
style="border-bottom:1rpx solid #f6f6f6"></image> |
</view> |
||||||
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
</view> |
||||||
mode="aspectFill"></image> |
</view> |
||||||
</view> |
|
||||||
</view> |
|
||||||
<!-- 模板7--> |
|
||||||
<view class="type6 y-f" v-if="detail.style == 7"> |
|
||||||
<view class="x-f type6-box1"> |
|
||||||
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
|
||||||
mode="aspectFill"></image> |
|
||||||
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
|
||||||
mode="aspectFill"></image> |
|
||||||
</view> |
|
||||||
<view class="x-f type6-box2"> |
|
||||||
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
|
||||||
mode="aspectFill"></image> |
|
||||||
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" |
|
||||||
mode="aspectFill"></image> |
|
||||||
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" |
|
||||||
mode="aspectFill"></image> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
components: {}, |
components: {}, |
||||||
data() { |
data() { |
||||||
return { |
return {} |
||||||
|
}, |
||||||
}; |
props: { |
||||||
}, |
detail: Object, |
||||||
props: { |
}, |
||||||
detail:Object |
computed: {}, |
||||||
}, |
created() {}, |
||||||
computed: {}, |
mounted() { |
||||||
created() { |
console.log(this) |
||||||
}, |
}, |
||||||
mounted() { |
methods: { |
||||||
console.log(this) |
// 路由跳转 |
||||||
}, |
jump(item) { |
||||||
methods: { |
if (item.uniapp_url) { |
||||||
// 路由跳转 |
this.$yrouter.push(item.uniapp_url) |
||||||
jump(path) { |
} |
||||||
this.$yrouter.push({ |
}, |
||||||
path |
}, |
||||||
}); |
} |
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss"> |
||||||
.adv-box { |
.adv-box { |
||||||
background-color: #fff; |
background-color: #fff; |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
image{ |
image { |
||||||
width: 100%; |
width: 100%; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
.type1-img { |
||||||
|
flex: 1; |
||||||
|
height: 220rpx; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type2 { |
||||||
|
.type2-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: 340rpx; |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type2-box { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
|
||||||
|
.type2-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3 { |
||||||
|
.type3-box { |
||||||
|
width: (710rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type3-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3-img2 { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4 { |
||||||
|
.type4-box { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type4-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4-img2 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type5 { |
||||||
|
.type5-img1 { |
||||||
|
width: 710rpx; |
||||||
|
height: (340rpx/2); |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type5-box { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
|
||||||
|
.type5-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6 { |
||||||
|
.type6-box1 { |
||||||
|
.type6-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6-box2 { |
||||||
|
border-top: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type6-img2 { |
||||||
|
width: (710rpx/3); |
||||||
|
height: (340rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
image { |
||||||
|
// background-color: #ccc; |
||||||
|
} |
||||||
} |
} |
||||||
.type1 { |
|
||||||
.type1-img { |
|
||||||
flex: 1; |
|
||||||
height: 220rpx; |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type2 { |
|
||||||
.type2-img1 { |
|
||||||
width: (710rpx/2); |
|
||||||
height: 340rpx; |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
|
|
||||||
.type2-box { |
|
||||||
flex: 1; |
|
||||||
height: 340rpx; |
|
||||||
width: (710rpx/2); |
|
||||||
|
|
||||||
.type2-img2 { |
|
||||||
height: (340rpx/2); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type3 { |
|
||||||
.type3-box { |
|
||||||
width: (710rpx/2); |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
|
|
||||||
.type3-img1 { |
|
||||||
flex: 1; |
|
||||||
height: (340rpx/2); |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
border-bottom: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type3-img2 { |
|
||||||
flex: 1; |
|
||||||
height: 340rpx; |
|
||||||
width: (710rpx/2); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type4 { |
|
||||||
.type4-box { |
|
||||||
border-bottom: 1rpx solid #f6f6f6; |
|
||||||
|
|
||||||
.type4-img1 { |
|
||||||
flex: 1; |
|
||||||
height: (340rpx/2); |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type4-img2 { |
|
||||||
flex: 1; |
|
||||||
height: (340rpx/2); |
|
||||||
width: 710rpx; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type5 { |
|
||||||
.type5-img1 { |
|
||||||
width: 710rpx; |
|
||||||
height: (340rpx/2); |
|
||||||
border-bottom: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
|
|
||||||
.type5-box { |
|
||||||
flex: 1; |
|
||||||
height: (340rpx/2); |
|
||||||
width: 710rpx; |
|
||||||
|
|
||||||
.type5-img2 { |
|
||||||
height: (340rpx/2); |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type6 { |
|
||||||
.type6-box1 { |
|
||||||
.type6-img1 { |
|
||||||
width: (710rpx/2); |
|
||||||
height: (340rpx/2); |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.type6-box2 { |
|
||||||
border-top: 1rpx solid #f6f6f6; |
|
||||||
|
|
||||||
.type6-img2 { |
|
||||||
width: (710rpx/3); |
|
||||||
height: (340rpx/2); |
|
||||||
border-right: 1rpx solid #f6f6f6; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
border-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
image { |
|
||||||
// background-color: #ccc; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
</style> |
||||||
|
@ -1,131 +1,131 @@ |
|||||||
<template> |
<template> |
||||||
<view class="banner-swiper-box"> |
<view class="banner-swiper-box"> |
||||||
<canvas canvas-id="colorThief" class="hide-canvas"></canvas> |
<canvas canvas-id="colorThief" class="hide-canvas"></canvas> |
||||||
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true"> |
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true"> |
||||||
<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item"> |
<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item"> |
||||||
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load> |
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load> |
||||||
</image> |
</image> |
||||||
</swiper-item> |
</swiper-item> |
||||||
</swiper> |
</swiper> |
||||||
<view class="banner-swiper-dots"> |
<view class="banner-swiper-dots"> |
||||||
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" |
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" v-for="(dot, index) in detail.length" |
||||||
v-for="(dot, index) in detail.length" :key="index"></text> |
:key="index"></text> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import colorThief from 'miniapp-color-thief'; |
import colorThief from 'miniapp-color-thief'; |
||||||
|
|
||||||
export default { |
export default { |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
swiperCurrent: 0, //轮播下标 |
swiperCurrent: 0, //轮播下标 |
||||||
webviewId: 0, |
webviewId: 0, |
||||||
}; |
}; |
||||||
}, |
}, |
||||||
props: { |
props: { |
||||||
detail: { |
detail: { |
||||||
type: Array, |
type: Array, |
||||||
default: [] |
default: [] |
||||||
} |
} |
||||||
}, |
}, |
||||||
created: async function () { |
created: async function() { |
||||||
await this.doColorThief(); |
await this.doColorThief(); |
||||||
}, |
}, |
||||||
computed: {}, |
computed: {}, |
||||||
methods: { |
methods: { |
||||||
async doColorThief() { |
async doColorThief() { |
||||||
let that = this; |
let that = this; |
||||||
// 获取轮播图 |
// 获取轮播图 |
||||||
let item = this.detail[this.swiperCurrent]; |
let item = this.detail[this.swiperCurrent]; |
||||||
// 获取轮播图颜色 |
// 获取轮播图颜色 |
||||||
let bgcolor = item.color; |
let bgcolor = item.color; |
||||||
// 颜色不存在 |
// 颜色不存在 |
||||||
if (bgcolor === '') { |
if (!bgcolor) { |
||||||
that.$set(item, 'bgcolor', '#c40414'); |
that.$set(item, 'bgcolor', '#c40414'); |
||||||
that.$emit('getbgcolor', '#c40414'); |
that.$emit('getbgcolor', '#c40414'); |
||||||
} else { |
} else { |
||||||
that.$set(item, 'bgcolor', bgcolor); |
that.$set(item, 'bgcolor', bgcolor); |
||||||
that.$emit('getbgcolor', bgcolor); |
that.$emit('getbgcolor', bgcolor); |
||||||
} |
} |
||||||
|
|
||||||
}, |
}, |
||||||
swiperChange(e) { |
swiperChange(e) { |
||||||
this.swiperCurrent = e.detail.current; |
this.swiperCurrent = e.detail.current; |
||||||
this.doColorThief(); |
this.doColorThief(); |
||||||
let bgcolor = this.detail[this.swiperCurrent].bgcolor; |
let bgcolor = this.detail[this.swiperCurrent].bgcolor; |
||||||
this.$emit('getbgcolor', bgcolor); |
this.$emit('getbgcolor', bgcolor); |
||||||
}, |
}, |
||||||
|
|
||||||
// 路由跳转 |
// 路由跳转 |
||||||
goRoll(item) { |
goRoll(item) { |
||||||
if (item.uniapp_url) { |
if (item.uniapp_url) { |
||||||
this.$yrouter.push(item.uniapp_url) |
this.$yrouter.push(item.uniapp_url) |
||||||
} |
} |
||||||
}, |
}, |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="less"> |
<style lang="less"> |
||||||
// 轮播 |
// 轮播 |
||||||
.banner-swiper-box { |
.banner-swiper-box { |
||||||
background: #fff; |
background: #fff; |
||||||
} |
} |
||||||
|
|
||||||
.banner-swiper-box, |
.banner-swiper-box, |
||||||
.banner-carousel { |
.banner-carousel { |
||||||
width: 750rpx; |
width: 750rpx; |
||||||
height: 350upx; |
height: 350upx; |
||||||
position: relative; |
position: relative; |
||||||
|
|
||||||
.carousel-item { |
.carousel-item { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
// padding: 0 28upx; |
// padding: 0 28upx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
.swiper-image { |
.swiper-image { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
// border-radius: 10upx; |
// border-radius: 10upx; |
||||||
// background: #ccc; |
// background: #ccc; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.banner-swiper-dots { |
.banner-swiper-dots { |
||||||
display: flex; |
display: flex; |
||||||
position: absolute; |
position: absolute; |
||||||
left: 50%; |
left: 50%; |
||||||
transform: translateX(-50%); |
transform: translateX(-50%); |
||||||
bottom: 20rpx; |
bottom: 20rpx; |
||||||
z-index: 5; |
z-index: 5; |
||||||
|
|
||||||
.banner-dot { |
.banner-dot { |
||||||
width: 14rpx; |
width: 14rpx; |
||||||
height: 14rpx; |
height: 14rpx; |
||||||
background: rgba(255, 255, 255, 1); |
background: rgba(255, 255, 255, 1); |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||||
} |
} |
||||||
|
|
||||||
.banner-dot-active { |
.banner-dot-active { |
||||||
width: 14rpx; |
width: 14rpx; |
||||||
height: 14rpx; |
height: 14rpx; |
||||||
background: #a8700d; |
background: #a8700d; |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.hide-canvas { |
.hide-canvas { |
||||||
position: fixed !important; |
position: fixed !important; |
||||||
top: -99999upx; |
top: -99999upx; |
||||||
left: -99999upx; |
left: -99999upx; |
||||||
z-index: -99999; |
z-index: -99999; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue