ShenhaiH5/src/pages/service.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useGlobal } from '@/composables/index'

const { minioUrl } = useGlobal()
</script>

<template>
  <view class="service-container">
    <HyCard v-for="item in 5" :key="item" class="service-content-wrapper" marginBottom="36">
      <view class="service-item">
        <view class="item-header-wrap">
          <view class="header-img-box">
            <image src="" mode="scaleToFill" />
            <view class="header-status-tag open-tag">开放中</view>
          </view>
          <view class="header-right-box">
            <view class="u-line-1 title">黄岛服务区(沈海高速沈阳方向)</view>
            <view class="rate-content">
              <uni-rate :value="5" activeColor="#ff5702"></uni-rate>
              <text class="rate-text">五星级服务区</text>
            </view>
            <view class="distance">55.6KM</view>
            <view class="address-wrap">
              <view class="block">
                <view class="t">海口</view>
                <image class="icon-arrive" :src="minioUrl + '/icon_arrive.png'" mode="scaleToFill" />
                <view class="t">沈阳</view>
              </view>
              <view class="icon-go">
                <image :src="minioUrl + '/icon_blue_go.png'" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
        <view class="item-bottom-wrap">
          <HyTag needBorder v-for="index in 8" :key="index" />
        </view>
      </view>
    </HyCard>
  </view>
</template>

<style lang="scss" scoped>
.service-container {
  width: 100%;
  min-height: 10dvh;
  padding: 24rpx 24rpx 0 24rpx;
  background-color: #edf1f5;
  .service-item {
    .item-header-wrap {
      display: flex;
      align-items: center;
      .header-img-box {
        width: 174rpx;
        height: 174rpx;
        position: relative;
        background-color: aliceblue;
        image {
          width: 174rpx;
          height: 174rpx;
        }
        .header-status-tag {
          position: absolute;
          top: 0;
          right: 0;
          width: 80rpx;
          height: 30rpx;
          background-color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 14rpx 0 10rpx;
          font-size: 21rpx;
          color: #fff;
          &.open-tag {
            background-color: #ff5702;
          }
        }
      }
      .header-right-box {
        flex: 1;
        margin-left: 20rpx;
        .title {
          width: 464rpx;
          font-size: 31rpx;
          color: #333;
          font-weight: 600;
          line-height: 50rpx;
        }
        .rate-content {
          display: flex;
          align-items: center;
          .rate-text {
            font-size: 22rpx;
            color: #ff5702;
            margin-left: 14rpx;
          }
        }
        .distance {
          font-size: 22rpx;
          color: #999;
          line-height: 42rpx;
        }
        .address-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .block {
            min-width: 174rpx;
            box-sizing: border-box;
            padding: 10rpx 24rpx;
            background-color: #edf1f5;
            border-radius: 21rpx;
            display: flex;
            align-items: center;
            .icon-arrive {
              width: 31rpx;
              height: 13rpx;
              margin: 0 8rpx;
            }
            .t {
              font-size: 22rpx;
              color: #333;
            }
          }
          .icon-go {
            width: 60rpx;
            height: 60rpx;
            image {
              width: 60rpx;
              height: 60rpx;
            }
          }
        }
      }
    }
    .item-bottom-wrap {
      width: 550rpx;
      display: flex;
      flex-wrap: wrap;
      margin-top: 40rpx;
    }
  }
}
</style>