education-front/pages/index/serve.vue

<template>
  <view class="page__view">
    <view class="bg"></view>

    <view class="main">

      <view class="header">
        <view class="title">
          <!-- todo: check key -->
          <view class="title-text">吉光研途</view>
          <view class="title-line"></view>
        </view>
        <!-- todo: check key -->
        <view class="desc">为您提供更专业、优质、靠谱的学术服务</view>
      </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">
        <!-- todo: check list will change? -->
        <view class="list-item" @click="jumpToDetail('academic_advising')">
          <image class="list-item-bg" src="@/static/image/bg-academic-advising.png" mode="widthFix"></image>
          <view class="list-item-fg">
            <view class="title">学术辅导</view>
            <view class="desc">Academic Advising</view>
          </view>
        </view>
        <view class="list-item" @click="jumpToDetail('thesis_submission')">
          <image class="list-item-bg" src="@/static/image/bg-paper-submission.png" mode="widthFix"></image>
          <view class="list-item-fg">
            <view class="title">论文投递</view>
            <view class="desc">Paper submission</view>
          </view>
        </view>
      </view>

    </view>
      
		<tabber select="serve" />
  </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: '2' }))?.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: 438rpx;
    background-image: linear-gradient(#4883F9, #4883F9, #4883F9, #FCFDFF);
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 156rpx 0 182rpx 0;
  }

  .header {

    .title {
      margin-left: 25rpx;
      position: relative;
      padding: 51rpx 0 6rpx 42rpx;

      &-line {
        width: 151rpx;
        height: 11rpx;
        background: linear-gradient(76deg,#ffffff 2%, #4883f9 88%);
        border-radius: 6rpx;
      }

      &-text {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 46rpx;
        font-weight: 700;
        color: #FFFFFF;
      }

    }

    .desc {
      font-size: 30rpx;
      font-weight: 700;
      color: #FFFFFF;
      margin: 14rpx 28rpx 32rpx 28rpx;
    }
  }

  .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 {
    padding: 0 12rpx;

    &-item {
      position: relative;

      & + & {
        margin-top: 19rpx;
      }

      &-bg {
        width: 100%;
        height: auto;
      }

      &-fg {
        position: absolute;
        top: 38rpx;
        left: 51rpx;

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

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

      &:nth-child(2n) {
        .list-item-fg {
          left: 200rpx;

          .title {
            color: #052464;
          }

          .desc {
            color: #A8BADE;
          }
        }
      }
    }
  }

</style>