176 lines
4.1 KiB
Vue
176 lines
4.1 KiB
Vue
<template lang="pug">
|
|
.demand
|
|
top
|
|
view
|
|
swiper(class="swiper" :indicator-dots='indicatorDots', :autoplay='autoplay', :interval='interval', :duration='duration')
|
|
swiper-item
|
|
view.swiper-item A
|
|
swiper-item
|
|
view.swiper-item B
|
|
swiper-item
|
|
view.swiper-item C
|
|
.demand_a
|
|
.demand_b( v-if="Return.detail.image_url" )
|
|
img(class="tx" :src='Return.detail.image_url')
|
|
.demand_c
|
|
p {{Return.detail.nick_name}}
|
|
span {{Return.detail.create_time}}
|
|
span {{Return.detail.content}}
|
|
comment
|
|
allComment
|
|
</template>
|
|
|
|
<script>
|
|
import swiperImg from '../../components/swiper.vue'
|
|
export default {
|
|
name: 'demand',
|
|
components:{
|
|
swiperImg
|
|
},
|
|
data () {
|
|
return {
|
|
background: ['color1', 'color2', 'color3'],
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
swiperList:[
|
|
{ img:'/static/sky01.jpg',
|
|
title:'星空1',
|
|
content:'安静笼罩著夏夜巨大的星空,覆盖著整个地球,温柔地无声无息'
|
|
},
|
|
{ img:'/static/sky02.jpg',
|
|
title:'星空2',
|
|
content:'星星就像一盏盏小电灯,在空中闪烁'
|
|
},
|
|
{ img:'/static/sky03.jpg',
|
|
title:'星空3',
|
|
content: '我在星空的这一端,你在星空的那一端,相隔很远这很远。灿烂的永恒,无尽的遥远,再也无法相见..'
|
|
}, { img:'/static/sky04.jpg',
|
|
title:'星空4',
|
|
content: '一切都如生命一般,在悄然地发生着变化,就如这黑夜一样,失去了光明,却得到了星空.'
|
|
},
|
|
],
|
|
Return: {},
|
|
images: []
|
|
}
|
|
},
|
|
created () {
|
|
this.getdemand()
|
|
},
|
|
methods: {
|
|
async getdemand () {
|
|
let res = await this.$http.index.interactDetail({
|
|
id: '218'
|
|
})
|
|
console.log(res)
|
|
this.Return = res
|
|
this.images = res.detail.image
|
|
},
|
|
changeIndicatorDots(e) {
|
|
this.indicatorDots = !this.indicatorDots
|
|
},
|
|
changeAutoplay(e) {
|
|
this.autoplay = !this.autoplay
|
|
},
|
|
intervalChange(e) {
|
|
this.interval = e.target.value
|
|
},
|
|
durationChange(e) {
|
|
this.duration = e.target.value
|
|
}
|
|
// onChange (index) {
|
|
// this.current = index
|
|
// }
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.demand {
|
|
.van-swipe {
|
|
width: 10rem;
|
|
height: 13.427rem;
|
|
|
|
.van-swipe-item {
|
|
img {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.custom-indicator {
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
padding: 2px 5px;
|
|
font-size: 12px;
|
|
border-radius: 30%;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
}
|
|
}
|
|
|
|
.demand_a {
|
|
margin: 0.333rem;
|
|
|
|
.demand_b {
|
|
display: flex;
|
|
|
|
img {
|
|
margin-right: 0.213rem;
|
|
margin-left: 0.32rem;
|
|
width: 38px;
|
|
height: 41px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.demand_c {
|
|
p {
|
|
width: 80px;
|
|
height: 13px;
|
|
font-family: PingFangSC-Bold;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 17px;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
|
|
span {
|
|
width: 1.467rem;
|
|
height: 0.307rem;
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 0.32rem;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 0.747rem;
|
|
letter-spacing: 0rem;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
span {
|
|
width: 351px;
|
|
height: 85px;
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 25px;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
margin-bottom: 0.533rem;
|
|
}
|
|
|
|
.allComment {
|
|
margin-bottom: 0.533rem;
|
|
}
|
|
}
|
|
</style>
|