dbsd_kczx/src/views/site/index.vue

<template>
  <div id="siteMain">
    <div id="maxSite">
    <!-- <a-card>
      <div>
        <h1>首页</h1>
      </div>
      <div>{{ list }} - {{ stateCount }}</div>
      <div>
        {{ state }}
        <a-button type="primary" @click="() => state.count++">点击+1</a-button>
      </div>
      <div>
        {{ i }}
        <a-button type="primary" @click="changeClick">点击+1</a-button>
      </div>
      <div>
        <RouterLink to="/site/index2">跳转到子页</RouterLink>
      </div>
      <br/>
      <div>
        <RouterLink to="/dashboard/analysis">跳转到首页</RouterLink>
      </div>
    </a-card>
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <a-layout>
      <!-- 页头 -->
      <headerPage/>
      <!-- 主体部分 -->
      <a-layout-content>
        <!-- 统计 -->
        <tongjiPage/>
        <!-- 轮播图 -->
        <lunboPage/>
        <!-- 通知公告 -->
        <tongZhiGongGaoPage/>
        <!-- 任课教程 -->
        <renKeJiaoChengPage/>
        <!-- 听课足迹 -->
        <tingKeZuJiPage/>
        <!-- 预约课程 -->
        <yuYueKeChengPage  ref="yykcModeal"  @ortherLoad="yykcLoad"/>
        <!-- 精彩公开课 -->
        <jingCaiGongKaiKePage/>
        <!-- 今日课程列表 -->
        <a-card class="rowGutter">
          <template #title>
            <span style="font-size: 24px;font-weight: bold;">今日课程列表</span>
          </template>
          <a-tabs v-model:activeKey="activeKey" type="card" @change="kclbCard">
            <a-tab-pane key="1">
              <template #tab>
                  <div style="font-weight: 600;font-size: 16px;">正在上课</div>
              </template>
              <kclbZzsk ref="zzskModeal" @jrkclbLoad="jrkclbLoad"></kclbZzsk>
            </a-tab-pane>
            <a-tab-pane key="2">
              <template #tab>
                  <div style="font-weight: 600;font-size: 16px;">下一节课</div>
              </template>
              <kclbXyjk ref="xyjkModeal" @jrkclbLoad="jrkclbLoad"></kclbXyjk>
            </a-tab-pane>
            <a-tab-pane key="3">
              <template #tab>
                  <div style="font-weight: 600;font-size: 16px;">日课表</div>
              </template>
              <kclbRkb ref="rkbModeal" @jrkclbLoad="jrkclbLoad"></kclbRkb>
            </a-tab-pane>
          </a-tabs>

        </a-card>
        </a-layout-content>
        <!-- 页尾 -->
        <footerPage/>
    </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue';

  import headerPage from '/@/views/site/common/header.vue';
  import footerPage from '/@/views/site/common/footer.vue';

  import tongjiPage from '/@/views/site/tongJi/index.vue';
  import lunboPage from '/@/views/site/lunBo/index.vue';
  import tongZhiGongGaoPage from '/@/views/site/tongZhiGongGao/index.vue';
  import renKeJiaoChengPage from '/@/views/site/renKeJiaoCheng/index.vue'
  import tingKeZuJiPage from '/@/views/site/tingKeZuJi/index.vue'
  import yuYueKeChengPage from '/@/views/site/yuYueKeCheng/index.vue'
  import jingCaiGongKaiKePage from '/@/views/site/jingCaiGongKaiKe/index.vue'



  import kclbZzsk from '/@/views/site/jrkclb/kclbZzsk.vue';
  import kclbXyjk from '/@/views/site/jrkclb/kclbXyjk.vue';
  import kclbRkb from '/@/views/site/jrkclb/kclbRkb.vue';

  const activeKey = ref('1');
  const zzskModeal = ref();
  const xyjkModeal = ref();
  const rkbModeal = ref();
  const yykcModeal = ref();
  
  // reactive
  let list = reactive({ list: [] });
  //针对基础类型
  const state = ref({ count: 0 });
  let i = ref(1);

  //计算属性
  const stateCount = computed(() => {
    return state.value.count;
  });

  onMounted(() => {
    console.log('页面加载完了！');
  });

  //方法
  function changeClick() {
    i.value++;
    // list.list.push({ key: i.value });
  }
  /**
   * 刷新预约课程列表数据
   */
  function jrkclbLoad(){
    console.log(`🚀 ~ file: index.vue:1301111111:`)
    yykcModeal.value.newFunction()
  }
  /**
   * 刷新今日课程列表数据
   */
  function yykcLoad(){
    kclbCard(1)
    kclbCard(2)
    kclbCard(3)
  }
  function kclbCard(activeKey){
    if(activeKey==1){
      zzskModeal.value.zbLoadData();
    }else if(activeKey==2){
      xyjkModeal.value.zbLoadData();
    }else if(activeKey==3){
      rkbModeal.value.zbLoadData();
    }
  }

  //-----------------------------yangjun-----------------------
  //-----------------------------yangjun-----------------------

</script>
<style lang="less" scoped>
#siteMain {
  // font-size: ;
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1170px;
    //居中
    margin: 0 auto;
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #FFF;
    }
    .ant-layout-sider {
      color: #fff;
      line-height: 120px;
      background: #3ba0e9;
    }
    .ant-layout-content {
      min-height: 120px;
      color: #000;
      line-height: 120px;
      background: #f3f3f4;
    }
  }

}
/**暗黑模式特殊配色*/
[data-theme='dark'] #siteMain #maxSite {
  .ant-layout-header, .ant-layout-footer {
    background: #6aa0c7;
  }
  .ant-layout-content {
    background: #107bcb;
  }
  .ant-layout-sider {
    background: #3499ec;
  }
}
</style>