<template>
  <v-header title="商品热榜" :immersion="true" immersionFixed headerBackgroundColor="transparent" backgroundColor="#fff" headerStyle="white">
    <view slot="header-background" class="ranking-background absolute">
      <image src="/static/images/ranking-background.png" class="screen_all"></image>
    </view>
    <view class="relative flex screen_all">
     <flat-list
         @changeData="flatChangeData"
         background="transparent"
         :ref="base_flat_id"
         mode="skeleton"
         @fetch="fetch"
     >
       <view class="ranking-screen relative" :style="{'padding-top':paddingTop+'px'}">
         <view v-for="(item,index) in base_flat_data.data" :key="index" class="ranking-shop-item relative row">
           <image v-if="index<=2" class="absolute ranking-shop-icon" :src="'/static/images/ranking/'+(index+1)+'.png'"></image>
           <view v-else class="absolute ranking-shop-number center">{{index+1}}</view>
           <v-image class="ranking-shop-image overflow" backgroundColor="#F9F9F9"></v-image>
           <view class="flex-all-1 flex">
             <view class="ranking-shop-title line-2 overflow">香压榨一级花生油6L香压榨一级花生油6L香压榨一级花生油6L香压榨一级花生油6L香压榨一级花生油6L </view>
             <view class="ranking-shop-info">产品介绍</view>
             <view class="flex-all-1"></view>
             <view class="row aCenter">
               <text class="ranking-shop-price-group"><text>¥</text><text class="ranking-shop-price">210.00</text></text>
               <view class="ranking-shop-old-price">￥168</view>
               <view class="flex-all-1"></view>
               <view class="ranking-shop-button center">去购买</view>
             </view>

           </view>
         </view>
       </view>
     </flat-list>
   </view>
  </v-header>
</template>

<script>
import mixins from './mixins';
import vHeader from '@/components/v-header/main.vue';
import vImage from '@/components/v-image/main.vue';
import flatList from '@/components/flat-list/src/main.vue';
export default {
  name: "ranking",
  mixins,
  components:{
    vHeader,
    vImage,
    flatList
  }
}
</script>

<style scoped lang="scss" src="./style.scss"></style>