uniapp-ZHSQ/packages/homeServer/searchShop/index.vue

<template>
  <view class="shop-list">
    <view class="shop-card" v-for="shop in shops" :key="shop.id">
      <image :src="shop.image" class="shop-img"></image>
      <view class="shop-info">
        <view class="shop-title">{{ shop.title }}</view>
          <view class="rating-count">{{ shop.ratingCount }}条评价</view>
        <view class="shop-rating">
          <view class="rating-stars">
            <text class="star">★</text>
            <text class="rating-score">{{ shop.rating }}</text>
          </view>
          <view class="distance">
            <text class="distance-value">{{ shop.distance }}km</text>
          </view>
          <view class="fans">
            <text class="fans-count">{{ shop.fans }}个粉丝</text>
          </view>
        </view>
      </view>
      <button class="enter-shop-btn">进店</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shops: [
        {
          id: 1,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 2,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 3,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 4,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 5,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 6,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        },
        {
          id: 7,
          image: 'http://localhost:8080/test.png',
          title: '专业到家服务',
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120
        }
      ]
    };
  }
}
</script>

<style>
@import url("./index.css");
</style>