# 學生實驗模版 * [ ] 任務 > 該版本使用樣式文件代替了內嵌樣式，更加規范，請在此模版的基礎上完成加載貝店商品列表的功能 [碼云倉庫地址](https://gitee.com/zengqs/uni-app-course-2019/tree/master/labs-2019/beidian-list) ``` https://gitee.com/zengqs/uni-app-course-2019/tree/master/labs-2019/beidian-list ``` 文件名：pages/index/list-v1.vue ```html <template> <view class="container"> <block v-for="(item,index) in productList" :key="index"> <view class="product-item"> <view class="protuct-item-cover"> <image src="http://via.placeholder.com/750x375" mode=""></image> </view> <view class="product-item-title"> <text>{{item.title}}</text> </view> <view class="product-item-detail"> <view class="">120元</view> <view style="padding-left: 20upx;">20人已經購買</view> <view class="operation"> <view class=""> <button type="primary" size="mini">購買</button> </view> </view> </view> </view> <view class="gap"></view> </block> </view> </template> <script> export default { data() { return { productList: [{ title: '商品標題1', }, { title: '商品標題2', } ] } }, onLoad() { }, methods: { } } </script> <style> page { display: flex; } view { display: flex; flex-direction: row; /* border: solid 1upx; margin: 10upx; */ } page { min-height: 100%; } .container { display: flex; flex-direction: column; flex: 1; } .column { display: flex; flex-direction: column; } .gap { background-color: #CCCCCC; height: 20upx; width: 100%; } .product-item { display: flex; flex-direction: column; } .protuct-item-cover { flex-direction: row; height: 375upx; flex: 1; } .protuct-item-cover image { width: 100%; height: 100%; } .product-item-title { font-size: 32upx; font-weight: bold; padding: 10upx; } .product-item-detail { align-items: center; padding-left: 10upx; padding-right: 10upx; padding-bottom: 20upx; } .product-item-detail>.operation { justify-content: flex-end; flex: 1; } </style> ``` 執行的效果圖