dbsd_kczx/src/views/site/index.vue

<template>
  <div id="siteMain">
    <div id="maxSite">
      <a-layout>
        <!-- 页头 -->
        <headerPage showRightButton/>
        <!-- 主体部分 -->
        <a-layout-content>
          <!-- 统计 -->
          <tongjiPage v-if="getUserSf()=='T'"/>
          <!-- 轮播图 -->
          <lunboPage/>
          <!-- 通知公告 -->
          <tongZhiGongGaoPage/>
          <!-- 任课教程 -->
          <renKeJiaoChengPage v-if="getUserSf()=='T'"/>
          <!-- 听课足迹 -->
          <tingKeZuJiPage v-if="getUserSf()=='T'"/>
          <!-- 预约课程 -->
          <yuYueKeChengPage  ref="yykcModeal" @ortherLoad="yykcLoad" v-if="getUserSf()=='T'"/>
          <!-- 精彩公开课 -->
          <jingCaiGongKaiKePage v-if="getUserSf()=='T'"/>
          <!-- 今日课程列表 -->
          <a-card class="rowGutter" v-if="getUserSf()=='T'">
            <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>
          <!-- 学生部分今日课表 -->
        <StudentJrkbPage v-if="getUserSf()=='S'"></StudentJrkbPage>
          <!-- 学生部分近六日课表 -->
        <StudentJlrkbPage v-if="getUserSf()=='S'"></StudentJlrkbPage>
        <!-- 页尾 -->
        <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';

  
  import StudentJrkbPage from '/@/views/site/studentJrkb/index.vue';
  import StudentJlrkbPage from '/@/views/site/studentJlrkb/index.vue';
  
  import { getUserSf } from '/@/views/site/utils/index';

  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>
<style>
.wenZiJiaCu {
  font-weight: 700;
}
a {
  color: #337ab7;
}
</style>