<template>
|
<view class=" home-banner-imgs">
|
<view class="flex" v-if="list&&list.length>=3">
|
<view class="flex1 m-r-5">
|
<image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="previewImg(list[0].url)">
|
</image>
|
</view>
|
<view class="flex1 m-l-5">
|
<image class="p2 img100" :src="list[1].url" mode="scaleToFill" @click="previewImg(list[1].url)">
|
</image>
|
<image class="p3 img100" :src="list[2].url" mode="scaleToFill" @click="previewImg(list[2].url)">
|
</image>
|
</view>
|
</view>
|
<view class="flex l-2" v-else-if="list&&list.length>=2" mode="scaleToFill">
|
<view class="flex1 m-r-5">
|
<image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="previewImg(list[0].url)">
|
</image>
|
</view>
|
<view class="flex1 m-l-5">
|
<image class="p1 img100" :src="list[1].url" mode="scaleToFill" @click="previewImg(list[1].url)">
|
</image>
|
</view>
|
</view>
|
<view class="flex l-1" v-else-if="list&&list.length>=1" mode="scaleToFill">
|
<view class="flex1 m-r-5">
|
<image class="p1 img100" :src="list[0].url" mode="scaleToFill" @click="previewImg(list[0].url)">
|
</image>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list: [],
|
};
|
},
|
async mounted() {
|
const {
|
data,
|
code
|
} = await this.$http.request('get', '/api/pub/advertisement/list', {
|
|
})
|
if (code === 0) {
|
this.list = data || []
|
for(var item of this.list){
|
item.url = item.cover
|
try{
|
if(item.url){
|
var t = JSON.parse(item.url)
|
if(Array.isArray(t)){
|
item.url = t[0] || ''
|
}else{
|
item.url = t.url || ''
|
}
|
}
|
|
}catch(e){
|
// console.log('error',e)
|
}
|
// item.url = item.cover
|
}
|
console.log(this.list)
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.home-banner-imgs {
|
// background-color: #fff;
|
.p1 {
|
// width: 334rpx;
|
height: 308rpx;
|
width: 100%;
|
}
|
|
.p2 {
|
// width: 334rpx;
|
width: 100%;
|
height: 142rpx;
|
}
|
|
.p3 {
|
width: 100%;
|
margin-top: 18rpx;
|
// width: 334rpx;
|
height: 142rpx;
|
}
|
// .l-1{
|
// .p1{
|
// min-height: 308rpx;
|
// height: 308rpx;
|
// }
|
// }
|
}
|
</style>
|