xinfeiyue-wx/pages/index/index.vue

<template>
  <page-meta
    :page-style="`overflow:${isShowQrcode ? 'hidden' : 'visible'};`"
  ></page-meta>
  <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"
          @click="
            $u.route({ url: '/package_sub/pages/RecommendForm/RecommendForm' })
          "
        >
          <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"
          @click="$u.route({ url: '/package_sub/pages/BatchForm/BatchForm' })"
        >
          <image
            class="grid-item__icon"
            src="~@/static/index/monitianbao.png"
            mode="aspectFit"
          ></image>
          <view class="grid-item__name">志愿填报</view>
        </view>
        <view
          class="grid3 grid-item"
          @click="$u.route({ url: '/package_sub/pages/IndependentRecruitment/IndependentRecruitment' })"
        >
          <image
            class="grid-item__icon"
            src="~@/static/index/zizhuzhaosheng.png"
            mode="aspectFit"
          ></image>
          <view class="grid-item__name">自主招生</view>
        </view>
        <view
          class="grid4 grid-item"
          @click="
            $u.route({ url: '/package_sub/pages/HistoryScore/HistoryScore' })
          "
        >
          <view class="grid-item__name"> 历年录取<br />分数线 </view>
        </view>
        <view
          class="grid5 grid-item"
          @click="
            $u.route({ url: '/package_sub/pages/TargetCount/TargetCount' })
          "
        >
          <view class="grid-item__name"> 历年各初中<br />指标生 </view>
        </view>
        <view
          class="grid6 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 banners"
          :key="i.id"
          @click="bannerJump2(i)"
        >
          <image
            class="list-item__img"
            mode="aspectFill"
            :src="i.image ? i.image.url : '/static/index/template1.png'"
          ></image>
          <view class="list-item__name">{{ i.name }}</view>
          <view v-if="i.sub_name" class="list-item__subname">{{
            i.sub_name
          }}</view>
        </view>
      </view>
    </view>

    <image
      class="online-service"
      src="~@/static/index/online-service.png"
      mode="aspectFit"
      @click="isShowQrcode = true"
    ></image>

    <u-popup mode="center" v-model="isShowQrcode" border-radius="14">
      <view class="customer-service">
        <view class="customer-service__title"> 系统提示 </view>
        <view class="customer-service__body">
          <view> 您需要联系我们的客服，获取授权 </view>
          <image
            mode="aspectFit"
            show-menu-by-longpress
            src="~@/static/qrcode.png"
          ></image>
          <view> 卓老师 </view>
          <view> 电话：15006200900 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowQrcode: false,
      banners: [],
    };
  },
  onLoad() {},
  methods: {
    async getBanners() {
      try {
        const { list } = await this.$u.api.banners();
        this.banners = list;
      } catch (err) {
        console.error(err);
      }
    },
    bannerJump2(i) {
      console.log(i);
      if (i.jump_url === "#") {
        return;
      }
      if (i.jump_type === 1) {
        uni.navigateToMiniProgram({
          appId: i.jump_url,
        });
      } else if (i.jump_type === 2) {
        this.$u.route({
          url: "/package_sub/pages/webview/webview",
          params: {
            src: i.jump_url,
          },
        });
      } else if (i.jump_type === 3) {
        this.$u.route({
          url: "/package_sub/pages/LoadImage/LoadImage",
          params: {
            src: i.jump_url,
          },
        });
      }
    },
  },
  computed: {
    paddingTop() {
      return getApp().globalData.navbarHeight;
    },
  },
  created() {
    this.getBanners();
  },
};
</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: 72rpx;
    position: relative;
    z-index: 2;

    .title {
      width: 495rpx;
      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: 197rpx 108rpx 176rpx;
      grid-template-areas:
        "grid1 grid1 grid1 grid2 grid2 grid2"
        "grid1 grid1 grid1 grid3 grid3 grid3"
        "grid4 grid4 grid5 grid5 grid6 grid6";

      $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(0deg, #c6e1d4 0%, #fdfdfe 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, #3cb877, #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, .grid3 {
        display: flex;
        flex-direction: row;

        .grid-item__name {
          padding-left: 20rpx;
          // padding: 46rpx 0 0;
        }
      }
      .grid3 {

        .grid-item__icon {
          width: 69rpx;
          height: 69rpx;
        }
      }
    }
  }

  .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;
}

.customer-service {
  background: #eaf8fe;
  padding: 20rpx 20rpx 40rpx;

  &__title {
    font-size: 36rpx;
    text-transform: uppercase;
    color: #333333;
    font-weight: bold;
    padding: 34rpx 20rpx 24rpx;
  }
  &__body {
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    border: 2rpx solid #ccc;
    margin: 20rpx 20rpx 0;
    line-height: 2;
    font-weight: 500;
    padding: 10rpx 20rpx;

    & > image {
      width: 360rpx;
      height: 440rpx;
      margin: 10rpx 0;
    }
  }
}
</style>