exam_mp/pages/index/index.vue

<template>
  <Container title="首页" :showBack="false">
    <view class="home">
      <!-- 倒计时 -->
      <view class="time">
        <view>倒计时</view>
        <view>151天</view>
      </view>
      <!-- 轮播图 -->
      <swiper class="swiper" circular autoplay>
        <swiper-item v-for="(item, index) in banner_list" :key="index">
          <view class="swiper-item"><image class="swiper-item-image"  :src="item.image_url" mode="aspectFill"></image></view>
        </swiper-item>
      </swiper>
      <!-- 公告 -->
      <view class="notice">
        <view class="title">公告</view>
        <view>这是公告</view>
      </view>
      <!-- 2025新大纲 -->
      <view class="new_outline">
        <uni-section title="基础用法" type="line">
          <view class="p-20">
            <uni-segmented-control
              :flex="false"
              :current="current"
              :values="items"
              style-type="text"
              @clickItem="(e) => (current = e.currentIndex)"
            />
            <!-- 执业药师 -->
            <template v-for="(item, index) in list" :key="item.id">
              <view v-if="current === index" class="grid">
                <view
                  v-for="i in item?.children"
                  class="flex"
                  @click="clickClass(i)"
                >
                  <view class="bg-red"></view>
                  <view> {{ i.name }} </view>
                </view>
              </view>
            </template>
          </view>
        </uni-section>
      </view>
    </view>
    <uni-section title="往年真题" type="line">
      <!-- 往年真题 -->
      <view class="grid-3">
        <view
          v-for="item in 7"
          class="flex"
          @click="
            toReal({
              title: '2025真题',
            })
          "
        >
          <view class="bg-red"></view>
          <view> 执业药师{{ item }} </view>
        </view>
      </view>
    </uni-section>
  </Container>
</template>

<script setup>
import { ref, onMounted } from "vue";

import Container from "../../components/Container/Container.vue";
import { router } from "../../utils/router";
import { request } from "../../utils/request";
import { arrayToTree } from "../../utils";

const current = ref(0);
const items = ref(["", "标签2"]);
const list = ref([]);
const banner_list=ref([]);


const clickClass = ({ id }) => {
  router.push({
    url: "/pages/regulations/index",
    params: {
      id,
    },
  });
};

const toReal = (item) => {
  router.push({
    url: "/pages/real/index",
    params: item,
  });
};

onMounted(async () => {
  const res = await request(
    "api/question_bank/question_reception/chapter/get",
    {},
    "POST"
  );
  list.value = arrayToTree({
    list: res.data,
  });
  items.value[0] = list.value[0].name;
  
  // 首页轮播
  const banner_res = await request(
    "api/question_bank/question_reception/banner/list",
    {},
    "POST"
  );
  banner_list.value = banner_res.data.data;
});
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80rpx;
  }

  .swiper {
    height: 320rpx;
    // border: 1rpx solid #000000;
    width: 100%;
    .swiper-item {
      display: block;
      height: 320rpx;
      line-height: 320rpx;
      text-align: center;
      // background-color: red;
	  border-radius: 30rpx;
	  .swiper-item-image{
		// border-radius: 5%;
		width: 100%;
	  }
    }
  }

  .notice {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding-left: 26rpx;
  }

  .new_outline {
    border: 1rpx solid #000000;
  }
}

.title {
  font-family: "PingFang SC, PingFang SC";
  font-weight: 700;
  font-size: 32rpx;
  color: #000000;
}

.p-20 {
  padding: 0 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  height: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  align-items: center;
  justify-content: center;
}

.bg-red {
  width: 149rpx;
  height: 80rpx;
  background: #d9d9d9;
}
</style>