chelvc-custom/src/pages/business/detail.vue

<template>
  <view class="detail">
    <!-- 轮播图 -->
    <view class="carousel-map">
      <u-swiper :list="list3" previousMargin="0" nextMargin="100" circular :autoplay="false" bgColor="#ffffff" />
      <view class="carousel-item">
        <view class="mark">
          <view class="mark-item">5.00分</view>
          <u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
        </view>
        <view class="good-item">近期有6266个购买者给了给好评</view>
      </view>
    </view>

    <!-- 商家信息 -->
    <view class="merchant-info">
      <view class="info-title">
        <view>养车工场店（襄阳五中店）</view>
        <text class="info-mark">1.5w+单</text>
      </view>
      <view class="info-tag">商家信息</view>
      <view class="info-item">
        <view class="info-text">
          <view>营业时间：9:00 ~ 24:00</view>
          <view>电话号码：18285564342</view>
          <view>贵州省贵阳市榕江县栽麻乡小利村三组</view>
          <view class="distance">距离您1.84km</view>
        </view>
        <view class="info-icon">
          <view class="info-map">
            <u-icon name="map" size="25"></u-icon>
            <view>导航</view>
          </view>
          <view class="info-map">
            <u-icon name="phone" size="25"></u-icon>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>

    <service />
    <service />
    <service />
    <service />
  </view>
</template>

<script>
import service from '@/components/service'

export default {
  components: {
    service,
  },
  data() {
    return {
      count: 5,
      value: 3,
      list3: [
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      ],
      list1: [
        { name: '全部' },
        { name: '养车' },
        { name: '维修' },
        { name: '改装' },
        { name: '补胎' },
        { name: '补胎' },
        { name: '其他' },
      ],
    };
  },
  methods: {
    click(item) {
      console.log('item', item);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  min-height: 100vh;
  background-color: #efefef;
}

// 轮播图
.carousel-map {
  background-color: #fff;
  padding: 0 20rpx;

  .carousel-item {
    height: 90rpx;
    display: flex;
    background-color: #fff7e0;
    border-radius: 0 0 10rpx 10rpx;

    .mark {
      background-color: #ff4b04;
      color: #fff;
      padding: 20rpx;
      border-radius: 0 0 0 10rpx;
      box-sizing: border-box;

      .mark-item {
        text-align: center;
      }
    }

    .good-item {
      font-size: 24rpx;
      color: #a39c85;
      line-height: 90rpx;
      margin-left: 40rpx;
    }
  }
}

// 商家信息
.merchant-info {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .info-title {
    display: flex;
    justify-content: center;
    font-size: 40rpx;
    font-weight: bold;

    .info-mark {
      font-size: 12px;
      font-weight: normal;
      color: #999;
      margin: 20rpx 0 20rpx 30rpx;
    }
  }

  .info-tag {
    width: 160rpx;
    padding: 10rpx;
    text-align: center;
    border: 1px solid #5992bb;
    color: #5992bb;
    margin-bottom: 10rpx;
  }

  .info-item {
    display: flex;
    justify-content: space-between;

    .info-text {
      font-size: 30rpx;
      line-height: 58rpx;
      color: #212020;
      font-weight: 600;

      .distance {
        font-size: 26rpx;
        color: #555252;
        font-weight: normal;
      }
    }

    .info-icon {
      display: flex;
    }

    .info-map {
      padding: 10rpx;
      font-size: 28rpx;
      margin-top: 120rpx;
    }
  }
}
</style>