yikangyang-wx/package_sub/pages/ServiceDetail/ServiceDetail.vue

<template>
  <view class="page">
    <image class="bkg" src="~@/package_sub/static/ServiceDetail/bkg.png" mode="aspectFill"></image>

    <view class="container">
      <view class="card detail">
        <view class="detail__text">
          全程1对1陪同就医，代取号、代排队、代跑腿、打印报告等服务。患者可以更加灵活安排时间，不但解决无人陪同难题，以及排队费时、环境
        </view>
        <view class="detail__price">
          <text class="detail__price--number">600</text>
          <text class="detail__price--text">元/次</text>
        </view>
      </view>

      <view class="tab">
        <view v-for="(item, index) in ['服务内容','预约须知']"
              :key="index"
              class="tab-item"
              :class="{ 'is-active': index === currentTab }"
              @click="$u.throttle(() => currentTab = index)">
          {{ item }}
        </view>
      </view>

      <view class="card for-people">
        <view class="for-people__title">
          服务流程
        </view>

        <view class="for-people__content block">
          <view class="block-item" v-for="i in 10" :key="i">
            <image class="block-item__img" src="~@/static/index/honor-title.png" mode="aspectFit"></image>

            <view class="block-item__text">老年人对医院环境设设备不熟悉。</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      currentTab: 0,

    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: option.title ?? "服务项目"
    });
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>
.page {

  .bkg {
    height: 316rpx;
    width: 100vw;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .container {
    z-index: 1;
    position: relative;
    padding-top: 250rpx;

    .card {
      border-radius: 10rpx;
      filter: drop-shadow(2.192px 4.494px 5px rgba(33,32,32,0.15));
      background-color: #ffffff;
    }
    .detail {
      margin: 0 24rpx;
      padding: 26rpx 22rpx;

      &__text {
        font-size: 24rpx;
        line-height: 1.5;
        color: #929196;
        font-weight: 500;
      }
      &__price {
        margin-top: 24rpx;
        color: #c20d12;
        padding-left: 16rpx;

        &--number {
          font-weight: 500;
          font-size: 40rpx;
        }
        &--text {
          font-size: 24rpx;
        }
      }
    }

    .tab {
      display: flex;
      align-items: center;
      padding: 0 60rpx;
      margin-top: 38rpx;

      &-item {
        font-size: 28rpx;
        color: #666;
        transition: all .1s;
      }
      .tab-item + .tab-item {
        margin-left: 60rpx;
      }
      .is-active {
        color: #000;
        font-weight: 600;
        font-size: 32rpx;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -20rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 58rpx;
          height: 4rpx;
          border-radius: 2rpx;
          background-color: #ca2328;
        }
      }
    }

    .for-people {
      margin: 54rpx 24rpx 0;
      padding: 46rpx 30rpx;

      &__title {
        display: inline-block;
        font-size: 28rpx;
        color: #ca2328;
        font-weight: bold;
        position: relative;
        left: 50%;
        transform: translateX(-50%);

        &::before {
          content: '';
          position: absolute;
          width: 139rpx;
          height: 5rpx;
          border-radius: 3px;
          left: -28rpx;
          top: 50%;
          transform: translate(-100%, -50%);
          background: linear-gradient(to left,#ca2328,#ffffff00);
        }
        &::after {
          content: '';
          position: absolute;
          width: 139rpx;
          height: 5rpx;
          border-radius: 3px;
          right: -28rpx;
          top: 50%;
          transform: translate(100%, -50%);
          background: linear-gradient(to right,#ca2328,#ffffff00);
        }
      }

      &__content {
        margin-top: 46rpx;
      }
      .block {
        display: flex;
        flex-wrap: wrap;

        &-item {
          display: flex;
          align-items: center;
          flex-basis: 50%;

          &__img {
            width: 62rpx;
            height: 70rpx;
          }
        }
      }
    }
  }
}
</style>