products/uni-shop/pages/ranking/ranking.vue

<template>
  <v-header title="商品热榜" async @fetch="fetch" scroll transitionScroll immersion headerBackgroundColor="transparent" backgroundColor="#fff" headerStyle="white">
    <view>
      <view class="ranking-background">
        <image src="/static/images/ranking-background.png" class="screen_all"></image>
      </view>
      <view class="ranking-screen relative">
        <view v-for="(item,index) in shopData" :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 :src="item.image" class="ranking-shop-image overflow" backgroundColor="#F9F9F9"></v-image>
          <view v-if="item.id" class="flex-all-1 flex overflow">
            <view class="ranking-shop-title line-2 overflow">{{item.title}}</view>
<!--            <view class="ranking-shop-info line-1">{{item.desc}}</view>-->
            <view class="flex-all-1"></view>
            <view class="row aCenter">
              <text class="ranking-shop-price-group"><text>¥</text><text class="ranking-shop-price">{{item.sales_price}}</text></text>
              <view class="ranking-shop-old-price">￥{{item.market_price}}</view>
              <view class="flex-all-1"></view>
              <view @click="goDetail(item)" class="ranking-shop-button center">去购买</view>
            </view>

          </view>
        </view>
      </view>
    </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';
export default {
  name: "ranking",
  mixins,
  components:{
    vHeader,
    vImage
  }
}
</script>

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