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>
      <a-layout-header>
        <BackTop :visibilityHeight="1"/>
        <span class="topTitle">管理系统</span>
        <span class="topRight">
          <a-dropdown>
            <span class="ant-dropdown-link topRightMenu" @click.prevent>
              {{ userStore?.getUserInfo?.realname }}
              <DownOutlined />
            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <!-- <a href="javascript:;">后台管理</a> -->
                  <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="userStore?.confirmLoginOut();">安全退出</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </span>
      </a-layout-header>
      <a-layout-content>
        <a-row class="rowGutter" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-card title="今日课堂数">
              <Statistic title="总数" :value="112893"/>
              <Statistic title="已下课" :value="112893"/>
            </a-card>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
            <a-card title="上课中">
              ..............
            </a-card>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
            <a-card title="已开课堂数">
              ..............
            </a-card>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
            <a-card title="今日听课">
              ..............
            </a-card>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
            <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
              <PlusOutlined/>
            </div>
          </a-col>
        </a-row>
        <div class="rowGutter">
          <a-carousel>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </a-carousel>
        </div>
        <a-card class="rowGutter">
          <a-row>
            <a-col :span="12">
              [图标][名称][日期]
            </a-col>
            <a-col :span="12">
              [图标][名称][日期]
            </a-col>
          </a-row>
          <span style="color:red">[今日调课]</span>
        </a-card>
        <a-card class="rowGutter">
          <template #title>任课教程 <a href="javascript:void(0);">修改课程提醒</a></template>
          <!-- <template #extra></template> -->
          xxxx
        </a-card>
        <a-card class="rowGutter">
          <template #title>听课足迹 <a href="javascript:void(0);">修改课程提醒</a></template>
          <template #extra><a href="javascript:void(0);">查看更多</a></template>
          <a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2（数据管理与分析）》', },{ title: 'Ant Design Title 2', }]">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
                    {{ item.title }}
                  </template>
                  <template #description>
                    <span style="color: #337ab7;">已评分n分</span>
                  </template>
                  <template #avatar>
                    <a-avatar src="https://joeschmoe.io/api/v1/random" />
                    <div>08:32:49</div>
                    <div style="color: #1ab394;">2023-03-15</div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
        <a-card class="rowGutter" title="预约课程">
          <template #title>
            预约课程
            <a href="javascript:void(0);">线上课堂评价表</a>
            <a href="javascript:void(0);">听课记录</a>
            <a href="javascript:void(0);">同行评价表</a>
          </template>
          <template #extra><a href="javascript:void(0);">查看更多</a></template>
          <a-row :gutter="[16,16]">
            <a-col v-for="(item,index) in 10" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
              <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;">
                时间{{ item }}
              </div>
              <a-card>
                子card
              </a-card>
            </a-col>
          </a-row>
        </a-card>
        <a-card class="rowGutter" title="精彩公开课">
          ccccc
        </a-card>
        <a-card class="rowGutter">
          <template #title>
            <span style="font-size: 24px;font-weight: bold;">今日课程列表</span>
          </template>
          <a-row class="rowGutter" :gutter="[16,16]">
            <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in [{},{},{},{},{},{}]" :key="index" style="margin-bottom: 40px;">
              <div style="border: 2px #eef1f2 solid;">
                <div>
                  <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
                  <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
                    灾害风险防范{{index}}
                  </div>
                </div>
                <a-divider style="margin: 0px;color: #eef1f2;"/>
                <div style="padding: 20px;font-weight: 600;">
                  <a-row>
                    <a-col :span="16">
                      <div style="height: 30px;font-size: 16px;">张继权</div>
                      <div style="height: 30px;font-size: 14px;">环境学院环境</div>
                    </a-col>
                    <a-col :span="8" style="text-align: center;height: 70px;">
                      <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
                      <div style="font-size: 14px;">选课人数</div>
                    </a-col>
                    <a-col :span="24" style="margin-top:20px;">
                      <div>
                        第<span>01、02</span>节
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <div style="width:100%;text-align: center;">
                        —————线下上课地点—————
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <div style="height: 60px;">
                        环境学院107室
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
                      <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
        </a-layout-content>
      <a-layout-footer>
        <span class="footerLeft">TEL：0431-85099971</span>
        <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
      </a-layout-footer>
    </a-layout>
    </div>
  </div>
</template>

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

  import { DownOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { BackTop, Statistic } from 'ant-design-vue';

  import { useUserStore } from '/@/store/modules/user';

  //用户相关
  const userStore = useUserStore();

  console.log(`🚀 -----------------------------------------------🚀`);
  console.log(`🚀 ~ file: index.vue:66 ~ userStore:`, userStore);
  console.log(`🚀 -----------------------------------------------🚀`);


  // 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 });
  }
</script>
<style lang="less" scoped>
#siteMain {
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1170px;
    //居中
    margin: 0 auto;
    .topTitle {
      font-size: 1.5rem;
    }
    .topRight {
      float: right;
      .topRightMenu {
        font-size: 1.1rem;
      }
    }
    .footerRight {
      float: right;
    }
    .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;
    }


}
    /* For demo */
    .ant-carousel :deep(.slick-slide) {
      text-align: center;
      height: 160px;
      line-height: 160px;
      background: #364d79;
      overflow: hidden;
    }

    .ant-carousel :deep(.slick-slide h3) {
      color: #fff;
    }

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