chelvc-custom/src/pages/business/detail/index.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>

    <!-- 分类 -->
    <view class="sort">
      <u-tabs
        :list="list1"
        @click="click"
        lineWidth="30"
        lineColor="#5992bb"
        :activeStyle="{
          color: '#5992bb',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#000',
          transform: 'scale(1)',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
      />
      <view class="list" @click="$Router.push('/pages/business/service/index')">
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item">预约</text>
              <text class="Buy">购买</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <Image src="https://cdn.uviewui.com/uview/album/8.jpg"></Image>
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item">预约</text>
              <text class="Buy">购买</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item">预约</text>
              <text class="Buy">购买</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <Image src="https://cdn.uviewui.com/uview/album/4.jpg"></Image>
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item">预约</text>
              <text class="Buy">购买</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <Image src="https://cdn.uviewui.com/uview/album/6.jpg"></Image>
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item">预约</text>
              <text class="Buy">购买</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  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;
    }
  }
}

// 分类
.sort {
  background-color: #fff;

  .list {
    height: 250rpx;
    background-color: #fff;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    display: flex;

    Image {
      width: 180px;
      height: calc(100% - 20rpx);
      margin: 10rpx 20rpx 10rpx 0;
    }

    .item-text {
      font-weight: bold;
      margin: 10rpx 0 10rpx;
      color: #333;
    }

    .item-flex {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      margin: 0 20rpx 10rpx 0;
      color: #0d0d0d66;

      .star {
        display: flex;

        .line {
          margin-left: 16rpx;
          margin-top: 5rpx;
          font-size: 22rpx;
        }

        .points {
          color: #ff4b04;
          font-size: 22rpx;
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
    .list-item {
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 32rpx;
        font-weight: bold;
        color: #fa3534;
        .price-item {
          font-size: 24rpx;
          margin-left: 10rpx;
        }
        .price-count {
          font-size: 44rpx;
        }
      }
      .gate-rate {
        color: #c9c9c9;
        font-size: 26rpx;
        margin: 16rpx 0 0 40rpx;
        .gate-rate-item {
          text-decoration: line-through;
        }
      }
      .appoint {
        width: 80px;
        height: 32px;
        display: flex;
        margin-top: 20px;
        font-size: 14px;
        .appoint-item {
          width: 40px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          display: inline-block;
          box-sizing: border-box;
          border-radius: 16px 0 0 16px;
          border: 1px solid #ec5729;
        }
        .Buy {
          width: 40px;
          height: 32px;
          color: #fff;
          line-height: 32px;
          text-align: center;
          display: inline-block;
          border-radius: 0 16px 16px 0;
          background-color: #ec5729;
        }
      }
    }
  }
}
</style>