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> |
||||
// import { onMounted } from 'vue' |
||||
// import useUserStore from '@/store/modules/user' |
||||
// // const userStore = useUserStore() |
||||
// onMounted(() => { |
||||
// // 进入首页获取用户信息 |
||||
// // userStore.getUserInfo() |
||||
// }) |
||||
import status from '@/views/home/components/Status.vue' |
||||
import welcome from './components/Welcome.vue' |
||||
import Info from './components/Info.vue' |
||||
import echarts from './components/Echarts.vue' |
||||
import Class from './components/Class.vue' |
||||
import Student from './components/Student.vue' |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
<template> |
||||
<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