education-front/pages/index/center.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
    </view>

    <view class="main">

      <view class="flex section header" :style="style">
        <view>
          <view class="title">{{ configList.page_center_title }}</view>
          <view class="desc">{{ configList.page_center_desc }}</view>
        </view>
      </view>

      <view class="list">
        <view class="list-item" @click="jumpToDetail('other_service')">
          <!-- <image class="list-item-bg" :src="configList.config_image_service" mode="scaleToFill"></image> -->
          <image class="list-item-bg" src="@/static/image/bg-other-serve.png" mode="widthFix"></image>
          <view class="flex list-item-fg">
            <image class="icon" src="@/static/image/icon-other-serve.png" mode="widthFix"></image>
            <view class="info">
              <view class="title">其他服务</view>
              <view class="desc">Other services</view>
            </view>
          </view>
        </view>
      </view>

		  <tabber select="center" />
    </view>
  </view>
</template>

<script>
  import utils from '@/utils/utils'
	import tabber from '@/components/base/tabbar.vue'

  export default {
		components: {
      tabber,
    },
    data() {
      return {
        style: '',
      }
    },
    onLoad() {
      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`
    },
    methods: {
      jumpToDetail(paramCode) {
        uni.navigateTo({
					url: `/pages_order/center/serve?paramCode=${paramCode}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    /deep/ .tabbar-box {
      height: 0;
      padding: 0;
    }
  }

  .header {
    padding-top: calc(var(--status-bar-height) + 120rpx);
    justify-content: space-between;
    align-items: flex-start;
    min-height: calc(342rpx / 621 * 542);
    box-sizing: border-box;

    .title {
      font-size: 44rpx;
      font-weight: 700;
      color: #6851A7;
    }

    .desc {
      font-size: 22rpx;
      font-weight: 600;
      color: #808080;
    }

    .icon {
      margin-top: 16rpx;
      width: 62rpx;
      height: 62rpx;
      border: 2rpx solid #A3A2C5;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      
      .img {
        width: 50rpx;
        height: auto;
      }
    }
  }

  .section {
    margin: 0 38rpx;
  }

  .bg {
    width: 100vw;
    height: auto;

    .img {
      width: 100%;
      height: auto;
    }

    &-logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 342rpx;
      height: auto;
      opacity: 0.3;
    }
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    padding-bottom: 182rpx;
    box-sizing: border-box;
  }

  .swiper {
    border-radius: 10rpx;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 25rpx;
      height: 5rpx;
      border-radius: 4rpx;
      margin: 0 4rpx;
    }

    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      width: 25rpx;
    }
  }

  .list {
    // margin-top: 60rpx;
    padding: 0 38rpx;

    &-item {
      position: relative;
      width: 100%;
      height: 170rpx;
      font-size: 0;
      border-radius: 10rpx;
      overflow: hidden;
      background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.26), rgba($color: #C8C3FD, $alpha: 0.26));
      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);

      & + & {
        margin-top: 19rpx;
      }
      
      &-bg {
        // $w: calc(100vw - 18rpx*2);
        // width: $w;
        // height: calc(#{$w} * 179 / 714);
        width: 100%;
        height: 100%;
      }

      &-fg {
        justify-content: flex-start;
        align-items: flex-start;
        column-gap: 84rpx;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10rpx 32rpx;
        box-sizing: border-box;

        .icon {
          width: 146rpx;
          height: auto;
        }

        .info {
          margin-top: 40rpx;
        }

        .title {
          font-size: 34rpx;
          font-weight: 700;
          color: #9082D8;
        }

        .desc {
          margin-top: 8rpx;
          font-size: 28rpx;
          font-weight: 700;
          color: #9C97B2;
        }
      }
    }
  }

</style>