ww
6 months ago
parent
4fe89b0398
commit
1f7a44466c
15 changed files with 4090 additions and 3811 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 154 B |
|
After Width: | Height: | Size: 121 B |
@ -0,0 +1,30 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 214px; height: 326px"> |
||||||
|
<conheader title="已开科目"></conheader> |
||||||
|
<div class="info_content" style="width: 214px; height: 264px"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.class { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
<template> |
||||||
|
<div class="info_title"> |
||||||
|
<div class="title_name">{{ props.title }}</div> |
||||||
|
<div class="icon"> |
||||||
|
<img :src="ellipsis" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { defineProps } from 'vue' |
||||||
|
import ellipsis from '@/assets/images/ellipsis.png' |
||||||
|
const props = defineProps({ |
||||||
|
title: String, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.info_title { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.title_name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 30px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
.icon { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border-radius: 3px 3px 3px 3px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import * as echarts from 'echarts' |
||||||
|
import { ref, onMounted, Ref } from 'vue' |
||||||
|
const echarsDom: Ref<HTMLElement | any> = ref(null) |
||||||
|
onMounted(() => { |
||||||
|
const myChart = echarts.init(echarsDom.value) |
||||||
|
// 绘制图表 |
||||||
|
myChart.setOption({ |
||||||
|
// 标题 |
||||||
|
grid: { |
||||||
|
left: '4%', // 左边距 |
||||||
|
right: '10%', // 右边距 |
||||||
|
bottom: '20%', // 底边距 |
||||||
|
top: '10%', // 顶部边距 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
left: 'center', // 图例水平居中 |
||||||
|
bottom: 0, // 图例距离容器顶部的距离 |
||||||
|
orient: 'horizontal', // 水平布局 |
||||||
|
itemWidth: 16, // 设置图例标识的宽度为0，即不显示图标 |
||||||
|
itemHeight: 0, // 设置图例标识的高度为0，即不显示图标 |
||||||
|
data: ['本月', '上月'], |
||||||
|
}, |
||||||
|
// grid: { |
||||||
|
// left: '3%', |
||||||
|
// right: '4%', |
||||||
|
// bottom: '3%', |
||||||
|
// containLabel: true |
||||||
|
// }, |
||||||
|
toolbox: { |
||||||
|
feature: { |
||||||
|
saveAsImage: {}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
boundaryGap: true, |
||||||
|
data: [ |
||||||
|
'09-01', |
||||||
|
'09-03', |
||||||
|
'09-05', |
||||||
|
'09-07', |
||||||
|
'09-09', |
||||||
|
'09-11', |
||||||
|
'09-13', |
||||||
|
'09-15', |
||||||
|
], |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '本月', |
||||||
|
// itemStyle: { |
||||||
|
// color: '#0052D9' |
||||||
|
// }, |
||||||
|
symbol: 'circle', |
||||||
|
itemStyle: { |
||||||
|
color: '#0052D9', // 设置圆的颜色为白色 |
||||||
|
borderWidth: 1.5, // 设置圆边框的宽度 |
||||||
|
borderColor: 'white', // 设置圆边框的颜色 |
||||||
|
}, |
||||||
|
symbolSize: 8, // 设置图标大小 |
||||||
|
type: 'line', |
||||||
|
data: [20, 38, 60, 65, 90, 55, 36, 30], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '上月', |
||||||
|
symbol: 'circle', |
||||||
|
itemStyle: { |
||||||
|
color: '#B5C7FF', // 设置圆的颜色为白色 |
||||||
|
borderWidth: 1.5, // 设置圆边框的宽度 |
||||||
|
borderColor: 'white', // 设置圆边框的颜色 |
||||||
|
}, |
||||||
|
symbolSize: 8, // 设置图标大小 |
||||||
|
type: 'line', |
||||||
|
|
||||||
|
data: [22, 25, 48, 70, 80, 45, 24, 38], |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
/** |
||||||
|
* 自适应大小 |
||||||
|
*/ |
||||||
|
window.onresize = function () { |
||||||
|
myChart.resize() |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div ref="echarsDom" class="main"></div> |
||||||
|
</template> |
||||||
|
<style> |
||||||
|
.main { |
||||||
|
width: 766px; |
||||||
|
height: 352px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
<script setup> |
||||||
|
import echarts from '@/views/home/components/Echart/Echarts.vue' |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 1257px; height: 384px"> |
||||||
|
<div class="info_title"> |
||||||
|
<conheader title="主页访问数据(次)"></conheader> |
||||||
|
</div> |
||||||
|
<div class="info_content" style="width: 766px; height: 352px"> |
||||||
|
<echarts></echarts> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: grid; |
||||||
|
display: wrap; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; /* 设置元素之间的间隔 */ |
||||||
|
} |
||||||
|
.echarts { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.echarts { |
||||||
|
width: 1321px; |
||||||
|
height: 444px; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
const products = [ |
||||||
|
{ name: 'Macbook', content: 9.9 }, |
||||||
|
{ name: 'iPhone', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
{ name: '小米电脑', content: 9.9 }, |
||||||
|
] |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 1265px; height: 306px"> |
||||||
|
<conheader title="个人信息"></conheader> |
||||||
|
<div class="info_content" style="width: 776px; height: 244px"> |
||||||
|
<div class="item" :key="item.name" v-for="item in products"> |
||||||
|
<div class="name">{{ item.name }}</div> |
||||||
|
<div class="content">{{ item.content }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: grid; |
||||||
|
display: wrap; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; /* 设置元素之间的间隔 */ |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 176px; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
<script setup> |
||||||
|
import add from '@/assets/images/add.png' |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="ident" style="width: 278px; height: 274px; background: #375fff"> |
||||||
|
<div class="info_container" style="width: 201px; height: 178px"> |
||||||
|
<div class="avater"> |
||||||
|
<span>T</span> |
||||||
|
<div class="click"><img :src="add" /></div> |
||||||
|
</div> |
||||||
|
<div class="info_content" style="width: 126px; height: 58px"> |
||||||
|
<div class="name">王亚楠</div> |
||||||
|
<div class="iden">身份:某某专业教师</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.ident { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.name { |
||||||
|
width: 60px; |
||||||
|
height: 28px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.iden { |
||||||
|
width: 126px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
.avater { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
background: #b5c7ff; |
||||||
|
border-radius: 40px 40px 40px 40px; |
||||||
|
display: flex; |
||||||
|
display: grid; |
||||||
|
grid-template-areas: |
||||||
|
'element1 .' |
||||||
|
'. element2'; |
||||||
|
grid-template-columns: auto auto; /* 定义三列 */ |
||||||
|
grid-template-rows: auto auto; /* 定义三行 */ |
||||||
|
gap: 5px; /* 设置网格之间的间隙 */ |
||||||
|
} |
||||||
|
span { |
||||||
|
width: 24px; |
||||||
|
height: 44px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 36px; |
||||||
|
color: #0052d9; |
||||||
|
line-height: 44px; |
||||||
|
text-align: center; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
|
||||||
|
grid-area: element1; |
||||||
|
position: relative; |
||||||
|
margin-left: 27px; |
||||||
|
top: 18px; |
||||||
|
} |
||||||
|
.click { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
border-radius: 100px 100px 100px 100px; |
||||||
|
border: 2px solid #ffffff; |
||||||
|
grid-area: element2; |
||||||
|
background: #0052d9; |
||||||
|
border-radius: 32px 32px 32px 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
<script setup> |
||||||
|
import conheader from '@/views/home/components/ConHeader.vue' |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<div class="info_container" style="width: 222px; height: 174px"> |
||||||
|
<conheader title="学生分组"></conheader> |
||||||
|
<div class="info_content" style="width: 194px; height: 112px"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
<script setup></script> |
||||||
|
<template> |
||||||
|
<div class="nav_info"> |
||||||
|
<div class="name">王亚楠</div> |
||||||
|
<div class="intro">今天是你的第一天~~</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style scoped> |
||||||
|
.nav_info { |
||||||
|
width: 1265px; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: start; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.name { |
||||||
|
width: 91px; |
||||||
|
height: 28px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 20px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 28px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
margin-right: 68px; |
||||||
|
} |
||||||
|
.intro { |
||||||
|
width: 257px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
line-height: 26px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,16 +1,112 @@ |
|||||||
<template> |
|
||||||
<div>home</div> |
|
||||||
<svg-icon name="count" width="300px" height="300px" color="pink"></svg-icon> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
// import { onMounted } from 'vue' |
import status from '@/views/home/components/Status.vue' |
||||||
// import useUserStore from '@/store/modules/user' |
import welcome from './components/Welcome.vue' |
||||||
// // const userStore = useUserStore() |
import Info from './components/Info.vue' |
||||||
// onMounted(() => { |
import echarts from './components/Echarts.vue' |
||||||
// // 进入首页获取用户信息 |
import Class from './components/Class.vue' |
||||||
// // userStore.getUserInfo() |
import Student from './components/Student.vue' |
||||||
// }) |
|
||||||
</script> |
</script> |
||||||
|
<template> |
||||||
<style lang="scss" scoped></style> |
<div class="container"> |
||||||
|
<div class="left"> |
||||||
|
<div class="nav"> |
||||||
|
<welcome></welcome> |
||||||
|
</div> |
||||||
|
<div class="info" style="width: 1321px; height: 368px"> |
||||||
|
<Info></Info> |
||||||
|
</div> |
||||||
|
<div class="echarts" style="width: 1321px; height: 444px"> |
||||||
|
<echarts></echarts> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<status></status> |
||||||
|
<div class="class" style="width: 278px; height: 388px"> |
||||||
|
<Class></Class> |
||||||
|
</div> |
||||||
|
<div class="stu" style="width: 278px; height: 236px"> |
||||||
|
<Student></Student> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
display: flex; |
||||||
|
.left { |
||||||
|
width: 1321px; |
||||||
|
height: 936px; |
||||||
|
margin-right: 16px; |
||||||
|
display: grid; |
||||||
|
grid-template-rows: 1fr 1fr 1fr; /* 使用fr单位来平均分布 */ |
||||||
|
height: 300px; /* 设置容器高度 */ |
||||||
|
.nav { |
||||||
|
width: 1321px; |
||||||
|
height: 92px; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.info, |
||||||
|
.echarts { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
margin-bottom: 16px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
.class { |
||||||
|
width: 1321px; |
||||||
|
height: 444px; |
||||||
|
background: #c57676; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 278px; |
||||||
|
height: 930px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
.ident, |
||||||
|
.class, |
||||||
|
.stu { |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
display: flex; |
||||||
|
// flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.info_container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
.info_content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; //开启纵向布局 |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
Loading…
Reference in new issue