education-front/pages/index/center.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
    </view>

    <!-- 轮播图 -->
    <view class="section swiper">
      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="424rpx"></uv-swiper>
    </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>
        <!-- <view class="list-item-fg">
          <view class="title">其他服务</view>
          <view class="desc">Other services</view>
        </view> -->
      </view>
    </view>

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

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

  export default {
		components: {
      tabber,
    },
    data() {
      return {
        bannerList: [],
      }
    },
    onLoad() {
      this.fetchBanner()
    },
    methods: {
			// 获取轮播图
			async fetchBanner() {
				try {
					this.bannerList = (await this.$fetch('queryBannerList', { type: '3' }))?.records // type：0-首页 1-案例 2-服务 3-其他
				} catch (err) {

				}
			},
      jumpToDetail(paramCode) {
        uni.navigateTo({
					url: `/pages_order/serve/index?paramCode=${paramCode}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .bg {
    width: 100%;
    height: 264rpx;

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

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

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

  .list {
    margin: 0 18rpx;

    &-item {
      position: relative;
      font-size: 0;
      border-radius: 25rpx;
      overflow: hidden;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

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

      &-fg {
        position: absolute;
        top: 70rpx;
        left: 43rpx;

        .title {
          font-size: 32rpx;
          font-weight: 700;
          color: #000000;
        }

        .desc {
          margin-top: 2rpx;
          font-size: 28rpx;
          color: #8A8784;
        }
      }
    }
  }

</style>