三十五 搜索结果页布局和封装

要处理的页面

代码：shop-list.vue

 <template>
         <view class="shop-list ">
                 <view class="shop-title f-color">
                         <view class="shop-item">
                                 <view class="shop-price">
                                         价格
                                 </view>
                                 <view class='shop-iocn'>
                                         <view class="iconfont icon-xialajiantou1 up"></view>
                                         <view class="iconfont icon-xiajiantou down"></view>
                                 </view>
                         </view>

                         <view class="shop-item">
                                 <view class="shop-price">
                                         折扣
                                 </view>
                                 <view class='shop-iocn'>
                                         <view class="iconfont icon-xialajiantou1 up"></view>
                                         <view class="iconfont icon-xiajiantou down"></view>
                                 </view>
                         </view>

                         <view class="shop-item">
                                 <view class="shop-price">
                                         品牌
                                 </view>
                                 <view class='shop-iocn'>
                                         <view class="iconfont icon-xialajiantou1 up"></view>
                                         <view class="iconfont icon-xiajiantou down"></view>
                                 </view>
                         </view>
                 </view>
                 <Lines />
                 <commodity :dataList="commodityList "></commodity>
         </view>
 </template>

 <script>
         import Lines from "@/components/common/lines.vue"
         import commodity from './commodity.vue'
         export default {
                 data() {
                         return {
                                 commodityList: [{
                                                 id: 1,
                                                 img: '../../static/img/commondity.png',
                                                 name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                 pprice: '299',
                                                 oprice: '699',
                                                 discount: '999.5'
                                         },
                                         {
                                                 id: 2,
                                                 img: '../../static/img/commondity.png',
                                                 name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                 pprice: '269',
                                                 oprice: '699',
                                                 discount: '5.5'
                                         },
                                         {
                                                 id: 3,
                                                 img: '../../static/img/commondity.png',
                                                 name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                 pprice: '289',
                                                 oprice: '688',
                                                 discount: '5.5'
                                         }
                                 ]
                         }
                 },
                 components: {
                         Lines,
                         commodity
                 },
                 methods: {

                 }
         }
 </script>

 <style scoped>
         .shop-title {
                 display: flex;
         }

         .shop-item {
                 flex: 1;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 height: 80rpx;
         }

         .shop-iocn {
                 position: relative;
                 margin-left: 10rpx;
         }

         .iconfont {
                 width: 16rpx;
                 height: 8rpx;
                 position: absolute;
                 left: 0;
         }

         .up {
                 top: -24rpx;
         }

         .down {
                 top: -4rpx
         }
 </style>