education-front/pages/index/index.vue

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

    <view class="main">

			<!-- 搜索栏 -->
			<view class="section search">
				<uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
          <template #prefix>
            <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
          </template>
        </uv-search>
			</view>

			<!-- 轮播图 -->
			<view class="section swiper">
				<uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="239rpx"></uv-swiper>
			</view>

      <view class="section card" v-for="(group, gIdx) in list" :key="group.id">
        <view class="card-header">
          <view class="card-header-title">{{ group.label }}</view>
          <view class="card-header-tag">JGYT</view>
        </view>

        <view class="card-content">
          <template v-if="gIdx === 0">
            <view class="card-item card-row" v-for="item in group.children" :key="item.id" @click="jumpToCategory(item)">
              <view class="flex info">
                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
                <view class="info-label">{{ item.label }}</view>
              </view>
              <button class="btn">查看</button>
            </view>
          </template>
          <template v-else>
            <view class="card-box">
              <view class="card-item info" v-for="item in group.children" :key="item.id" @click="jumpToCategory(item)">
                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
                <view class="info-label">{{ item.label }}</view>
              </view>
            </view>
          </template>
        </view>

      </view>

    </view>

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

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

  export default {
		components: {
      tabber,
    },
    data() {
      return {
				keyword: '',
        bannerList: [],
        list: [],
      }
    },
    onLoad() {
      this.fetchBanner()
      this.getData()
    },
    methods: {
      getData() {
        // todo
        
        this.list = [
          {
            id: '001',
            label: '导航检索',
            children: [
              { id: '0011', label: 'AHCI', icon: '/static/image/temp-4.png', },
              { id: '0012', label: 'EI会议', icon: '/static/image/temp-9.png', },
              { id: '0013', label: 'EI源刊', icon: '/static/image/temp-10.png', },
              { id: '0014', label: 'ESCI', icon: '/static/image/temp-5.png', },
              { id: '0015', label: 'SCI', icon: '/static/image/temp-6.png', },
              { id: '0016', label: 'Scoupus', icon: '/static/image/temp-7.png', },
              { id: '0017', label: 'SSCI', icon: '/static/image/temp-8.png', },
            ],
          },
          {
            id: '002',
            label: '精选内容',
            children: [
              { id: '0021', label: 'AHCI', icon: '/static/image/temp-4.png', },
              { id: '0022', label: 'EI会议', icon: '/static/image/temp-9.png', },
              { id: '0023', label: 'AHCI', icon: '/static/image/temp-4.png', },
              { id: '0024', label: 'EI会议', icon: '/static/image/temp-9.png', },
            ],
          },
          {
            id: '003',
            label: '精选内容',
            children: [
              { id: '0031', label: 'AHCI', icon: '/static/image/temp-4.png', },
              { id: '0032', label: 'EI会议', icon: '/static/image/temp-9.png', },
              { id: '0033', label: 'AHCI', icon: '/static/image/temp-4.png', },
              { id: '0034', label: 'EI会议', icon: '/static/image/temp-9.png', },
            ],
          },
        ]
      },
			search() {
        uni.navigateTo({
					url: '/pages_order/search/index?search=' + this.keyword
				})
				this.keyword = ''
			},
			// 获取轮播图
			async fetchBanner() {
				try {
          // todo
					// this.bannerList = (await this.$fetch('queryBannerList'))?.records

          this.bannerList = [
            { image: '/static/image/temp-1.png' },
            { image: '/static/image/temp-2.png' },
            { image: '/static/image/temp-3.png' },
            { image: '/static/image/temp-2.png' },
          ]

				} catch (err) {

				}
			},
      jumpToCategory(obj) {
        const { id, label } = obj
        
        uni.navigateTo({
					url: `/pages_order/search/index?cid=${id}&title=${label}`
				})
      },
    },
  }
</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: 192rpx 0 182rpx 0;
  }

  .section {
    margin: 0 18rpx 0 18rpx;
  }

	.search {
    width: calc(100% - 20rpx * 2);
		background-color: #FFFFFF;
		border-radius: 37rpx;
		padding: 13rpx 0 13rpx 18rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;

		/deep/ .uv-search__action {
			color: $uni-color;
			padding: 10rpx 18rpx;
		}

    &-icon {
      width: 26rpx;
      height: auto;
    }
	}

  .swiper {
    margin-top: 29rpx;
    margin-bottom: 26rpx;
    border-radius: 25rpx;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 15rpx;
      height: 15rpx;
    }

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

  .card {
    margin-bottom: 35rpx;
    width: calc(100% - 20rpx * 2);
    box-sizing: border-box;
    padding-bottom: 45rpx;
    background-image: linear-gradient(164deg,#cfecfe 88rpx, #fcfdfe 176rpx);
    border: 3rpx solid #FFFFFF;
    border-radius: 25rpx;
    box-shadow: 0px 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

    &-header {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 46rpx 0 17rpx 33rpx;
      overflow: hidden;

      &-title {
        font-size: 42rpx;
        font-weight: 800;
        color: #000000;
      }

      &-tag {
        position: absolute;
        top: -40rpx;
        right: 12rpx;
        font-size: 156rpx;
        font-weight: 800;
        color: rgba(255,255,255,0.3);
      }
    }

    &-content {
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      column-gap: 50rpx;
      padding: 26rpx 28rpx;
      box-sizing: border-box;
      background: #f3f6fd;
      border-radius: 28rpx;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    }

    
    .info {

      &-icon {
        width: 80rpx;
        height: auto;
      }

      &-label {
        font-size: 32rpx;
        font-weight: 400;
        color: #000000;
      }
    }

    &-row {
      justify-content: space-between;
      padding: 15rpx 35rpx;

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

      .info {
        column-gap: 33rpx;
      }

      .btn {
        padding: 7rpx 30rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #4883F9;
        background: #FFFFFF;
        border-radius: 27rpx;
      }
    }

    &-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 34rpx;
      row-gap: 26rpx;

      .info {
        column-gap: 50rpx;
      }
    }
  }
</style>