|  |  | 
 |  |  | <template> | 
 |  |  |     <view class="flex home-banner-imgs"> | 
 |  |  |         <view class="flex1 m-r-5"> | 
 |  |  |             <image class="p1 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/b1/b1e7dc929b53412bbea72c9ca3f9aa25%E4%BD%8D%E5%9B%BE@2x%20(1).png" ></image> | 
 |  |  |     <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="flex1 m-l-5"> | 
 |  |  |             <image class="p2 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/86/86605e258843479f828ce6749010d791%E4%BD%8D%E5%9B%BE@2x%20(2).png"></image> | 
 |  |  |             <image class="p3 img100" src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/76/76532c632d28449a9f93a4228a7b851e%E4%BD%8D%E5%9B%BE@2x%20(3).png"></image> | 
 |  |  |         <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> | 
 |  |  | 
 |  |  |     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%; | 
 |  |  |     .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; | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |     .p2{ | 
 |  |  |         // width: 334rpx; | 
 |  |  |         width: 100%; | 
 |  |  |         height: 142rpx; | 
 |  |  |     } | 
 |  |  |     .p3{ | 
 |  |  |         width: 100%; | 
 |  |  |         margin-top: 18rpx; | 
 |  |  |         // width: 334rpx; | 
 |  |  |         height: 142rpx; | 
 |  |  |     } | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | </style> |