2023年4月2日 完善门户页
This commit is contained in:
parent
de62a631f6
commit
5addd16d46
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="siteMain">
|
<div id="siteMain">
|
||||||
|
<div id="maxSite">
|
||||||
<!-- <a-card>
|
<!-- <a-card>
|
||||||
<div>
|
<div>
|
||||||
<h1>首页</h1>
|
<h1>首页</h1>
|
||||||
|
|
@ -24,6 +25,7 @@
|
||||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
|
||||||
<a-layout>
|
<a-layout>
|
||||||
<a-layout-header>
|
<a-layout-header>
|
||||||
|
<BackTop :visibilityHeight="1"/>
|
||||||
<span class="topTitle">管理系统</span>
|
<span class="topTitle">管理系统</span>
|
||||||
<span class="topRight">
|
<span class="topRight">
|
||||||
<a-dropdown>
|
<a-dropdown>
|
||||||
|
|
@ -46,7 +48,107 @@
|
||||||
</span>
|
</span>
|
||||||
</a-layout-header>
|
</a-layout-header>
|
||||||
<a-layout-content>
|
<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" title="今日课程列表">
|
||||||
|
ccccc
|
||||||
|
</a-card>
|
||||||
</a-layout-content>
|
</a-layout-content>
|
||||||
<a-layout-footer>
|
<a-layout-footer>
|
||||||
<span class="footerLeft">TEL：0431-85099971</span>
|
<span class="footerLeft">TEL：0431-85099971</span>
|
||||||
|
|
@ -54,11 +156,15 @@
|
||||||
</a-layout-footer>
|
</a-layout-footer>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, computed, onMounted } from 'vue';
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
import { DownOutlined } from '@ant-design/icons-vue';
|
|
||||||
|
import { DownOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { BackTop, Statistic } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
|
|
||||||
//用户相关
|
//用户相关
|
||||||
|
|
@ -90,10 +196,13 @@
|
||||||
// list.list.push({ key: i.value });
|
// list.list.push({ key: i.value });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less" scoped>
|
||||||
#siteMain {
|
#siteMain {
|
||||||
|
// height: 100%;
|
||||||
|
background: #f3f3f4;
|
||||||
|
#maxSite {
|
||||||
//最大宽度
|
//最大宽度
|
||||||
max-width: 1100px;
|
max-width: 1170px;
|
||||||
//居中
|
//居中
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
.topTitle {
|
.topTitle {
|
||||||
|
|
@ -108,6 +217,10 @@
|
||||||
.footerRight {
|
.footerRight {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
.rowGutter{
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-layout-header {
|
.ant-layout-header {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -115,6 +228,7 @@
|
||||||
}
|
}
|
||||||
.ant-layout-footer {
|
.ant-layout-footer {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background: #FFF;
|
||||||
}
|
}
|
||||||
.ant-layout-sider {
|
.ant-layout-sider {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -125,11 +239,27 @@
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
color: #000;
|
color: #000;
|
||||||
line-height: 120px;
|
line-height: 120px;
|
||||||
background: #FFF
|
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 {
|
[data-theme='dark'] #siteMain #maxSite {
|
||||||
.ant-layout-header, .ant-layout-footer {
|
.ant-layout-header, .ant-layout-footer {
|
||||||
background: #6aa0c7;
|
background: #6aa0c7;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue