xinfeiyue-wx/pages/index/index.vue

<template>
	<view class="content" :style="{ 'padding-top': paddingTop + 'px' }">
    <image class="bkg" src="~@/static/index/bkg.png" mode="aspectFill"></image>

    <view class="wrap">
      <image class="title" src="~@/static/index/title.png" mode="aspectFit"></image>

      <view class="grid">
        <view class="grid1 grid-item">
          <image class="grid-item__icon" src="~@/static/index/zhinengtuijian.png" mode="aspectFit"></image>
          <view class="grid-item__name">智能推荐</view>
          <view class="grid-item__subname">冲、稳、保学校</view>
        </view>
        <view class="grid2 grid-item">
          <image class="grid-item__icon" src="~@/static/index/monitianbao.png" mode="aspectFit"></image>
          <view class="grid-item__name">苏州中考志愿<br>模拟填报</view>
        </view>
        <view class="grid3 grid-item" @click="$u.route({ url: '/package_sub/pages/HistoryScore/HistoryScore' })">
          <view class="grid-item__name">
            历年录取<br>分数线
          </view>
        </view>
        <view class="grid4 grid-item" @click="$u.route({ url: '/package_sub/pages/TargetCount/TargetCount' })">
          <view class="grid-item__name">
            历年各初中<br>指标生
          </view>
        </view>
        <view class="grid5 grid-item" @click="$u.route({ url: '/package_sub/pages/SchoolList/SchoolList' })">
          <view class="grid-item__name">学校库</view>
        </view>
      </view>

      <view class="list">
        <view class="list-item" v-for="i in 5" :key="i">
          <image class="list-item__img" mode="aspectFill" src="~@/static/index/template1.png"></image>
          <view class="list-item__name">中考升学规划讲座</view>
          <view v-if="i === 2" class="list-item__subname">苏州-常州-南通</view>
        </view>
      </view>
    </view>

    <image class="online-service" src="~@/static/index/online-service.png" mode="aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
		},
		methods: {
		},
    computed: {
      paddingTop() {
        return getApp().globalData.navbarHeight
      }
    }
	}
</script>

<style lang="scss">
  .content {
    padding-bottom: 40rpx;
    position: relative;
    min-height: 100vh;
    background: #dff2fe;

    .bkg {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
    .wrap {
      padding-top: 71rpx;
      position: relative;
      z-index: 2;

      .title {
        width: 407rpx;
        height: 52rpx;
        display: block;
        margin: 0 auto;
      }

      .grid {
        padding: 0 26rpx;
        margin-top: 44rpx;
        display: grid;
        grid-gap: 26rpx;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 323rpx 176rpx;
        grid-template-areas:
            "grid1 grid1 grid1 grid2 grid2 grid2"
            "grid3 grid3 grid4 grid4 grid5 grid5";

        $grid-colors: linear-gradient(0deg, #c2e0fc 0%, #c2e0fc 8%, #fcfcfe 70%, #fcfcfe 100%), linear-gradient(0deg, #f5ddc5 0%, #f5ddc5 1%, #fcfcfe 74%, #fcfcfe 100%), linear-gradient(-37deg, #ee6734 0%, #f7915b 100%), linear-gradient(-37deg, #8773e9 0%, #c39df5 100%), linear-gradient(-37deg, #4f83f9 0%, #a3b9fd 100%);
        $font-colors: #1989fa, #ea9332, #fff, #fff, #fff;
        @for $i from 1 through length($grid-colors) {
          .grid#{$i} {
            grid-area: grid#{$i};
            background: nth($grid-colors, $i);
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .grid-item__name {
              color: nth($font-colors, $i);
            }
          }
        }
        &-item {

          &__icon {
            width: 80rpx;
            height: 89rpx;
          }
          &__name {
            font-size: 32rpx;
            line-height: 50rpx;
            text-transform: uppercase;
            font-weight: 500;
            text-align: center;
          }
        }
        .grid1 {
          .grid-item__name {
            padding: 46rpx 0 14rpx;
          }
          .grid-item__subname {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.7);
          }
        }
        .grid2 {
          .grid-item__name {
            padding: 46rpx 0 0;
          }
          .grid-item__subname {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

    .list {
      margin-top: 25rpx;
      padding: 26rpx;

      &-item {
        border-radius: 15rpx;
        filter: drop-shadow(3.993rpx 3.009rpx 5rpx rgba(81,158,236,0.6));
        background-color: #f7f6f7;
        position: relative;
        height: 172rpx;
        padding: 0 44rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;

        &__img {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          mask-image: linear-gradient(to right, transparent, #f7f6f7);
        }
        &__name {
          font-size: 40rpx;
          color: #e47829;
          font-weight: 500;
          position: relative;
          z-index: 2;
        }
        &__subname {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.7);
          font-weight: 500;
          margin-top: 16rpx;
        }
      }

      .list-item + .list-item {
        margin-top: 22rpx;
      }
    }
  }

  .online-service {
    position: fixed;
    bottom: 56rpx;
    right: 2rpx;
    width: 142rpx;
    height: 140rpx;
    z-index: 10;
  }
</style>