<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">
|
</image>
|
</view>
|
<view class="flex1 m-l-5">
|
<image class="p2 img100" :src="list[1].url">
|
</image>
|
<image class="p3 img100" :src="list[2].url">
|
</image>
|
</view>
|
</view>
|
<view class="flex" v-else-if="list&&list.length>=2">
|
<view class="flex1 m-r-5">
|
<image class="p1 img100" :src="list[0].url">
|
</image>
|
</view>
|
<view class="flex1 m-l-5">
|
<image class="p1 img100" :src="list[1].url">
|
</image>
|
</view>
|
</view>
|
<view class="flex" v-else-if="list&&list.length>=1">
|
<view class="flex1 m-r-5">
|
<image class="p1 img100" :src="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/banner/list', {
|
|
})
|
if (code === 0) {
|
this.list = data || []
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.home-banner-imgs {
|
.p1 {
|
// width: 334rpx;
|
height: 308rpx;
|
width: 100%;
|
}
|
|
.p2 {
|
// width: 334rpx;
|
width: 100%;
|
height: 142rpx;
|
}
|
|
.p3 {
|
width: 100%;
|
margin-top: 18rpx;
|
// width: 334rpx;
|
height: 142rpx;
|
}
|
}
|
</style>
|
