app/pages/index/com/productServic.vue

<script setup>
defineProps(['style']);
import sheep from '@/sheep';
const routerClick = (type) => {
  sheep.$router.go('/pages/index/category?type=' + type);
};
</script>

<template>
  <view class="product-service">
    <view class="financial-product" @tap="routerClick(0)">
      <view class="product-content">
        <image class="product-icon" :src="sheep.$url.static('/static/home/1.png')" />
        <text class="title">金融产品</text>
        <text class="desc">金融咨询，风险评估</text>
      </view>
      <text class="view-btn">点击查看</text>
      <image class="product-bg" :src="sheep.$url.static('/static/home/2.png')" />
    </view>
    <view class="service-wrapper">
      <view class="lawyer-service" @tap="routerClick(2)">
        <view class="service-content">
          <text class="title">律师服务</text>
          <image class="service-icon" :src="sheep.$url.static('/static/home/3.png')" />
        </view>
        <text class="desc">轻松投资，稳创财富</text>
        <image class="service-bg" :src="sheep.$url.static('/static/home/4.png')" />
      </view>
      <view class="partner" @tap="routerClick(4)">
        <view class="partner-content">
          <text class="title">合作企业</text>
          <text class="desc">期待诚信，货真价实</text>
          <image class="partner-icon" :src="sheep.$url.static('/static/home/5.png')" />
        </view>
        <image class="partner-bg" :src="sheep.$url.static('/static/home/6.png')" />
      </view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.product-service {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 11px;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;

  .financial-product {
    position: relative;
    width: 158px;
    height: 179px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #e8f3ff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;

    .product-content {
      position: relative;
      width: 177px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 2;
      margin-top: -38px;
      margin-left: auto;
      margin-right: -35px;

      .product-icon {
        width: 120px;
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .title {
        position: absolute;
        bottom: 33px;
        left: 0;
        font-size: 18px;
        font-family: 'PingFang SC';
        line-height: 25px;
        color: #333333;
        white-space: pre;
      }

      .desc {
        position: absolute;
        bottom: 12px;
        left: 0;
        font-size: 12px;
        font-family: 'PingFang SC';
        line-height: 17px;
        color: #666666;
        white-space: pre;
      }
    }

    .view-btn {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 4px 8px;
      gap: 2px;
      border-radius: 58px;
      background-color: #3a74f2;
      font-size: 12px;
      font-family: 'PingFang SC';
      line-height: 17px;
      color: #ffffff;
      white-space: pre;
      z-index: 1;
      position: relative;
      margin-top: 4px;
      margin-left: 16px;
    }

    .product-bg {
      width: 70px;
      height: 68px;
      position: absolute;
      right: -7px;
      bottom: 0;
      z-index: 0;
    }
  }

  .service-wrapper {
    width: 174px;
    height: 178px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    position: relative;

    .lawyer-service {
      position: relative;
      width: 174px;
      height: 83px;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: 8px;
      background-color: #e0f5f8;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      isolation: isolate;

      .service-content {
        position: relative;
        width: 166px;
        height: 95px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        z-index: 1;
        margin-top: -48px;
        margin-left: auto;
        margin-right: -8px;

        .title {
          position: absolute;
          bottom: 4px;
          left: 0;
          font-size: 18px;
          font-family: 'PingFang SC';
          line-height: 25px;
          color: #333333;
          white-space: pre;
        }

        .service-icon {
          width: 95px;
          height: auto;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }

      .desc {
        position: absolute;
        bottom: 19px;
        left: 16px;
        font-size: 12px;
        font-family: 'PingFang SC';
        line-height: 17px;
        color: #666666;
        white-space: pre;
        z-index: 0;
      }

      .service-bg {
        width: 50px;
        height: 55px;
        position: absolute;
        right: -8px;
        bottom: -4px;
        z-index: 2;
      }
    }

    .partner {
      position: relative;
      width: 174px;
      height: 83px;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: 8px;
      background-color: #eeeffa;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .partner-content {
        position: absolute;
        width: 181px;
        height: 118px;
        right: -23px;
        bottom: 19px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .title {
          position: absolute;
          bottom: 21px;
          left: 0;
          font-size: 18px;
          font-family: 'PingFang SC';
          line-height: 25px;
          color: #333333;
          white-space: pre;
        }

        .desc {
          position: absolute;
          bottom: 0;
          left: 0;
          font-size: 12px;
          font-family: 'PingFang SC';
          line-height: 17px;
          color: #666666;
          white-space: pre;
        }

        .partner-icon {
          width: 110px;
          height: auto;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 8px;
        }
      }

      .partner-bg {
        width: 48px;
        height: 53px;
        position: absolute;
        right: -6.5px;
        bottom: -1px;
      }
    }
  }
}
</style>