Compare commits

..

9 Commits

  1. 1
      Teaching_integration_platform_admin_template
  2. 1
      src/store/modules/type/types.ts
  3. 7
      src/store/modules/user.ts
  4. 3
      src/views/MyCourseStudy/ContainerCla.vue
  5. 15
      src/views/MyCourseStudy/ContainerKno.vue
  6. 48
      src/views/MyCourseStudy/courseCollections.vue
  7. 73
      src/views/course/CourseObjectives.vue
  8. 80
      src/views/course/CourseObjectives111.vue
  9. 1
      src/views/courseResources/index.vue
  10. 4
      src/views/home/components/Class1.vue
  11. 4
      src/views/home/components/Class2.vue
  12. 30
      src/views/home/components/ConHeader.vue
  13. 4
      src/views/home/components/Echart/Echarts.vue
  14. 4
      src/views/home/components/Echarts.vue
  15. 136
      src/views/home/components/Info.vue
  16. 20
      src/views/home/components/Status.vue
  17. 2
      src/views/home/components/Student1.vue
  18. 2
      src/views/home/components/Student2.vue
  19. 4
      src/views/home/components/Welcome.vue
  20. 57
      src/views/home/index.vue
  21. 7
      src/views/login/index.vue
  22. 295
      src/views/portal/LearningPathRecommendations.vue
  23. 47
      src/views/portal/components/KnowledgeGraph.vue
  24. 4
      src/views/portal/courseHomepage.vue
  25. 207
      src/views/portal/knowledgePointLearning.vue

@ -1 +0,0 @@
Subproject commit be31783972a0cdd8d1abfe03df8ef24a73854b0c

@ -7,4 +7,5 @@ export interface LoginStoreType {
routes: string routes: string
phone: string phone: string
userInfo: object userInfo: object
data: object
} }

@ -32,12 +32,13 @@ const useUserStore = defineStore(
avatar: '', // 用户头像 avatar: '', // 用户头像
routes: '', routes: '',
userInfo: {}, // 当前用户相关信息 userInfo: {}, // 当前用户相关信息
data: {},
} }
}, },
actions: { actions: {
// 登录事件 // 登录事件
async userLogin(data: loginType) { async userLogin(data: loginType) {
console.log(data, 'pinia') // console.log(data, 'pinia')
const res: loginResponseType = await userLoginService(data).catch( const res: loginResponseType = await userLoginService(data).catch(
(error) => { (error) => {
ElMessage.error(error.response.data.message) ElMessage.error(error.response.data.message)
@ -94,8 +95,8 @@ const useUserStore = defineStore(
if (result.code === 200) { if (result.code === 200) {
const res = await userIdenService(result.data.id) const res = await userIdenService(result.data.id)
this.userInfo = res.data this.userInfo = res.data
console.log(this.userInfo, 'this.userInfo') // console.log(this.userInfo, 'this.userInfo')
this.data = result.data
console.log(result, '123') console.log(result, '123')
this.userName = result.data.username this.userName = result.data.username
// this.avatar = result.data.checkUser.avatar // this.avatar = result.data.checkUser.avatar

@ -194,7 +194,7 @@ const handleCurrentChange = (page: any) => {
.ClassGd { .ClassGd {
position: absolute; position: absolute;
background-color: rgb(217, 217, 217 ,.5); background-color: rgb(217, 217, 217, 0.5);
display: none; display: none;
margin-left: 85%; margin-left: 85%;
padding: 3px 5px; padding: 3px 5px;
@ -262,5 +262,4 @@ const handleCurrentChange = (page: any) => {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
</style> </style>

@ -26,6 +26,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="Knowledge_point">
<ul>
<li v-for="(item, index) in 6" :key="index">
知识点知识点知识点{{ item }}
<span class="btn">×</span>
&nbsp;
</li>
</ul>
</div>
</div>
</div>
</div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<script setup> <script setup>
@ -39,7 +51,6 @@ this.classList.toggle('noUpd')
} }
const arr = reactive([]) const arr = reactive([])
const a =[ const a =[
{ {
id:1, id:1,
@ -67,14 +78,12 @@ const a =[
arr.length=0 arr.length=0
arr.push(...a) arr.push(...a)
const ShowDel = ref(false) const ShowDel = ref(false)
function XsDel(id){ function XsDel(id){
const item = arr.find(o=>o.a.id==id) const item = arr.find(o=>o.a.id==id)
item.ShowDel = !item.ShowDel item.ShowDel = !item.ShowDel
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn{ .btn{

@ -1,6 +1,12 @@
<template> <template>
<div class="curse-collection"> <div class="curse-collection">
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0"> <el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
style="padding-top: 0"
>
<!-- 课程收藏页面 --> <!-- 课程收藏页面 -->
<ContainerCla /> <ContainerCla />
<!-- 资源收藏页面 --> <!-- 资源收藏页面 -->
@ -77,11 +83,18 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="centerDialogVisible" title="视频播放中" width="1000" align-center> <el-dialog
v-model="centerDialogVisible"
title="视频播放中"
width="1000"
align-center
>
<span>点击开了一个弹框</span> <span>点击开了一个弹框</span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<video src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b"></video> <video
src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b"
></video>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
@ -116,9 +129,16 @@
</div> </div>
</div> </div>
<div class="Page-2"> <div class="Page-2">
<el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :disabled="disabled" <el-pagination
:page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="10" v-model:current-page="currentPage1"
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> v-model:page-size="pageSize1"
:disabled="disabled"
:page-sizes="[6, 8, 12, 15]"
layout="total, sizes, prev, pager, next, jumper"
:total="10"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- 知识点收藏页面 --> <!-- 知识点收藏页面 -->
@ -133,8 +153,8 @@ import { ref, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
import ContainerCla from './ContainerCla.vue' import ContainerCla from './ContainerCla.vue'
import ContainerKno from './ContainerKno.vue' import ContainerKno from './ContainerKno.vue'
import { getAssApi } from "@/api/courseChaptersApi"; import { getAssApi } from '@/api/courseChaptersApi'
import { SeResourceFavourControllerService } from "../../../generated/services/SeResourceFavourControllerService"; import { SeResourceFavourControllerService } from '../../../generated/services/SeResourceFavourControllerService'
const centerDialogVisible = ref(false) const centerDialogVisible = ref(false)
const activeIndex = ref(1) const activeIndex = ref(1)
@ -169,7 +189,6 @@ function initFenYie() {
pageSize1.value = 10 pageSize1.value = 10
} }
watch(activeIndex, (newVal) => { watch(activeIndex, (newVal) => {
initFenYie() initFenYie()
getDatalist() getDatalist()
@ -185,12 +204,11 @@ watch(activeIndex, (newVal) => {
pageSize: pageSize1.value, pageSize: pageSize1.value,
sortField: '', sortField: '',
sortOrder: '', sortOrder: '',
userId:'3' userId: '3',
} }
const datalist = ref([ const datalist = ref([
{ {
description: '', description: '',
id: '', id: '',
img: '', img: '',
@ -203,7 +221,8 @@ watch(activeIndex, (newVal) => {
]) ])
const getDatalist = async () => { const getDatalist = async () => {
const res = await SeResourceFavourControllerService.listPostByPageUsingPost3(params) const res =
await SeResourceFavourControllerService.listPostByPageUsingPost3(params)
datalist.value = res.data.records datalist.value = res.data.records
total.value = res.data.total total.value = res.data.total
console.log(datalist.value[0]) console.log(datalist.value[0])
@ -225,7 +244,6 @@ const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event) console.log(tab, event)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -411,7 +429,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
position: flex; position: flex;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
border-top: 1px solid rgb(229, 227, 227, .5); border-top: 1px solid rgb(229, 227, 227, 0.5);
border-bottom: 1px solid rgb(229, 227, 227, .5); border-bottom: 1px solid rgb(229, 227, 227, 0.5);
} }
</style> </style>

@ -4,7 +4,13 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { id } from 'element-plus/es/locales.mjs' import { id } from 'element-plus/es/locales.mjs'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi' import {
getCourseList,
addCourse,
editCourse,
deleteCourse,
getCourseInfo,
} from '@/api/courseChaptersApi'
const route = useRoute() const route = useRoute()
// id id // id id
// targetId // targetId
@ -49,11 +55,16 @@ const handleClose = () => {
// //
const submit = async () => { const submit = async () => {
if (flog.value) { if (flog.value) {
await editCourse({ id: activeIndex.value, content: formData.value.description }) await editCourse({
id: activeIndex.value,
content: formData.value.description,
})
} else { } else {
await addCourse({ objectiveId: activeIndex.value, content: formData.value.description }) await addCourse({
objectiveId: activeIndex.value,
content: formData.value.description,
})
} }
getList() getList()
dialogVisible.value = false dialogVisible.value = false
formData.value.description = '' formData.value.description = ''
@ -79,7 +90,6 @@ const submit = async () => {
// }) // })
// close() // close()
// flog.value = false // flog.value = false
} }
const close = () => { const close = () => {
formData.value = { formData.value = {
@ -117,7 +127,7 @@ const del = async (obj) => {
await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', { await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', {
type: 'warning', type: 'warning',
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消' cancelButtonText: '取消',
}) })
await deleteCourse({ id: obj.id }) await deleteCourse({ id: obj.id })
ElMessage.success('删除成功') ElMessage.success('删除成功')
@ -145,9 +155,9 @@ const data = ref({})
const courseId = ref(0) const courseId = ref(0)
onMounted(async () => { onMounted(async () => {
courseId.value = route.query.id courseId.value = route.query.id
console.log(courseId.value); console.log(courseId.value)
getList() getList()
console.log(data.value); console.log(data.value)
let chartDom = document.getElementById('main') let chartDom = document.getElementById('main')
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
let option let option
@ -197,7 +207,9 @@ onMounted(async () => {
<div class="topContent"> <div class="topContent">
<div class="title">| 课程总目标</div> <div class="title">| 课程总目标</div>
<div class="content1"> <div class="content1">
<textarea class="textarea" @change="textChange" v-model="text">文本内容</textarea> <textarea class="textarea" @change="textChange" v-model="text">
文本内容</textarea
>
</div> </div>
</div> </div>
<div class="footContent"> <div class="footContent">
@ -208,13 +220,17 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="rightContent"> <div class="rightContent">
<div class="title" style=" <div
class="title"
style="
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
height: 60px;"> height: 60px;
"
>
<div class="left2">| 课程分目标</div> <div class="left2">| 课程分目标</div>
<div class="right2"> <div class="right2">
<!-- <el-button type="primary" @click="addBook">新增</el-button> --> <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
@ -223,7 +239,10 @@ onMounted(async () => {
<div class="content2"> <div class="content2">
<el-scrollbar height="600px"> <el-scrollbar height="600px">
<ul class="objectLi"> <ul class="objectLi">
<li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id"> <li
v-for="(item, index) in data.courseObjectivesTrees"
:key="item.id"
>
<div class="courseObject"> <div class="courseObject">
<!-- {{ filterTarger(item.targetId) }} --> <!-- {{ filterTarger(item.targetId) }} -->
<div class="courseObject1">{{ item.name }}</div> <div class="courseObject1">{{ item.name }}</div>
@ -231,7 +250,9 @@ onMounted(async () => {
<!-- <el-button class="edit" type="text" @click="editBook(item)"> <!-- <el-button class="edit" type="text" @click="editBook(item)">
编辑 编辑
</el-button> --> </el-button> -->
<el-button type="primary" @click="addBook(item.id)">新增</el-button> <el-button type="primary" @click="addBook(item.id)">
新增
</el-button>
</div> </div>
</div> </div>
<div class="smallContent"> <div class="smallContent">
@ -246,10 +267,18 @@ onMounted(async () => {
<!-- {{ filterTarger(obj.targetId) }} --> <!-- {{ filterTarger(obj.targetId) }} -->
</div> </div>
<div class="partObject2"> <div class="partObject2">
<el-button class="edit" type="text" @click="editBook(obj)"> <el-button
class="edit"
type="text"
@click="editBook(obj)"
>
编辑 编辑
</el-button> </el-button>
<el-button class="destroy" type="text" @click="del(obj)"> <el-button
class="destroy"
type="text"
@click="del(obj)"
>
删除 删除
</el-button> </el-button>
</div> </div>
@ -267,8 +296,13 @@ onMounted(async () => {
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500" <el-dialog
:before-close="handleClose"> v-if="dialogVisible"
v-model="dialogVisible"
:title="flog ? '编辑' : '新增'"
width="500"
:before-close="handleClose"
>
<el-form :model="formData" label-width="auto" style="max-width: 600px"> <el-form :model="formData" label-width="auto" style="max-width: 600px">
<!-- <el-form-item label="目标" prop="target"> <!-- <el-form-item label="目标" prop="target">
<el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px"> <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
@ -277,7 +311,10 @@ onMounted(async () => {
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-form-item label="内容" prop="description"> <el-form-item label="内容" prop="description">
<el-input v-model="formData.description" placeholder="请输入内容"></el-input> <el-input
v-model="formData.description"
placeholder="请输入内容"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>

@ -15,10 +15,26 @@ const booksList = ref([
]) ])
const courseList = ref([ const courseList = ref([
{ id: 1, specific: '思政目标', booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }] }, {
{ id: 2, specific: '知识目标', booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }] }, id: 1,
{ id: 3, specific: '能力目标', booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }] }, specific: '思政目标',
{ id: 4, specific: '素质目标', booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }] }, booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }],
},
{
id: 2,
specific: '知识目标',
booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }],
},
{
id: 3,
specific: '能力目标',
booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }],
},
{
id: 4,
specific: '素质目标',
booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }],
},
]) ])
const targetList = ref([ const targetList = ref([
{ {
@ -115,7 +131,9 @@ const editBook = (obj) => {
} }
const del = (id) => { const del = (id) => {
// console.log(id); // console.log(id);
courseList.booksList.value = booksList.value.filter((item) => item.id !== id) courseList.value.booksList.value = booksList.value.filter(
(item) => item.id !== id,
)
} }
// const disableChange = (id) => { // const disableChange = (id) => {
@ -144,15 +162,14 @@ const content88=ref()
const courseId = ref(0) const courseId = ref(0)
onMounted(async () => { onMounted(async () => {
courseId.value = route.query.id courseId.value = route.query.id
console.log(courseId.value); console.log(courseId.value)
const res = await getCourseList({ id: courseId.value }) const res = await getCourseList({ id: courseId.value })
console.log(res); console.log(res)
list.value = res.data list.value = res.data
console.log(list.value); console.log(list.value)
content88.value = list.value[0].contents[0].content content88.value = list.value[0].contents[0].content
console.log(list.value[0].contents[0].content); console.log(list.value[0].contents[0].content)
console.log(content88.value); console.log(content88.value)
let chartDom = document.getElementById('main') let chartDom = document.getElementById('main')
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
@ -203,7 +220,9 @@ onMounted(async() => {
<div class="topContent"> <div class="topContent">
<div class="title">| 课程总目标</div> <div class="title">| 课程总目标</div>
<div class="content1"> <div class="content1">
<textarea class="textarea" @change="textChange">{{ content88 }}</textarea> <textarea class="textarea" @change="textChange">{{
content88
}}</textarea>
</div> </div>
</div> </div>
<div class="footContent"> <div class="footContent">
@ -214,13 +233,17 @@ onMounted(async() => {
</div> </div>
</div> </div>
<div class="rightContent"> <div class="rightContent">
<div class="title" style=" <div
class="title"
style="
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
height: 60px;"> height: 60px;
"
>
<div class="left2">| 课程分目标</div> <div class="left2">| 课程分目标</div>
<div class="right2"> <div class="right2">
<!-- <el-button type="primary" @click="addBook">新增</el-button> --> <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
@ -237,7 +260,9 @@ onMounted(async() => {
<!-- <el-button class="edit" type="text" @click="editBook(item)"> <!-- <el-button class="edit" type="text" @click="editBook(item)">
编辑 编辑
</el-button> --> </el-button> -->
<el-button type="primary" @click="addBook(index)">新增</el-button> <el-button type="primary" @click="addBook(index)">
新增
</el-button>
</div> </div>
</div> </div>
<div class="smallContent"> <div class="smallContent">
@ -251,10 +276,18 @@ onMounted(async() => {
<!-- {{ filterTarger(obj.targetId) }} --> <!-- {{ filterTarger(obj.targetId) }} -->
</div> </div>
<div class="partObject2"> <div class="partObject2">
<el-button class="edit" type="text" @click="editBook(obj)"> <el-button
class="edit"
type="text"
@click="editBook(obj)"
>
编辑 编辑
</el-button> </el-button>
<el-button class="destroy" type="text" @click="del(obj.id)"> <el-button
class="destroy"
type="text"
@click="del(obj.id)"
>
删除 删除
</el-button> </el-button>
</div> </div>
@ -272,7 +305,13 @@ onMounted(async() => {
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-if="dialogVisible" v-model="dialogVisible" title="新增目标" width="500" :before-close="handleClose"> <el-dialog
v-if="dialogVisible"
v-model="dialogVisible"
title="新增目标"
width="500"
:before-close="handleClose"
>
<el-form :model="formData" label-width="auto" style="max-width: 600px"> <el-form :model="formData" label-width="auto" style="max-width: 600px">
<!-- <el-form-item label="目标" prop="target"> <!-- <el-form-item label="目标" prop="target">
<el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px"> <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
@ -281,7 +320,10 @@ onMounted(async() => {
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-form-item label="内容" prop="description"> <el-form-item label="内容" prop="description">
<el-input v-model="formData.description" placeholder="请输入内容"></el-input> <el-input
v-model="formData.description"
placeholder="请输入内容"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>

@ -272,7 +272,6 @@ li {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
cursor: pointer; cursor: pointer;
} }

@ -24,9 +24,9 @@ const courses = [
] ]
</script> </script>
<template> <template>
<div class="info_container" style="width: 214px; height: 326px"> <div class="info_container" style="width: 90%; height: 326px">
<conheader title="已开科目"></conheader> <conheader title="已开科目"></conheader>
<div class="info_content" style="width: 214px; height: 264px"> <div class="info_content" style="width: 100%; height: 264px">
<div class="course-list"> <div class="course-list">
<div <div
v-for="(course, index) in courses" v-for="(course, index) in courses"

@ -24,9 +24,9 @@ const courses = [
] ]
</script> </script>
<template> <template>
<div class="info_container" style="width: 214px; height: 326px"> <div class="info_container" style="width: 90%; height: 326px">
<conheader title="我的科目"></conheader> <conheader title="我的科目"></conheader>
<div class="info_content" style="width: 214px; height: 264px"> <div class="info_content" style="width: 100%; height: 264px">
<div class="course-list"> <div class="course-list">
<div <div
v-for="(course, index) in courses" v-for="(course, index) in courses"

@ -46,19 +46,19 @@ function handleClick() {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.overlay { // .overlay {
position: absolute; // position: absolute;
top: 181px; // top: 181px;
left: 1278px; // left: 1278px;
width: 40px; // width: 40px;
height: 30px; // height: 30px;
// background-color: lightgray; // // background-color: lightgray;
border: 1px solid black; // border: 1px solid black;
z-index: 1000; // z-index: 1000;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
margin-bottom: 10px; // margin-bottom: 10px;
} // }
</style> </style>

@ -95,9 +95,9 @@ onMounted(() => {
<template> <template>
<div ref="echarsDom" class="main"></div> <div ref="echarsDom" class="main"></div>
</template> </template>
<style> <style scoped>
.main { .main {
width: 766px; width: 100%;
height: 352px; height: 352px;
} }
</style> </style>

@ -3,9 +3,9 @@ import echarts from '@/views/home/components/Echart/Echarts.vue'
import conheader from '@/views/home/components/ConHeader.vue' import conheader from '@/views/home/components/ConHeader.vue'
</script> </script>
<template> <template>
<div class="info_container" style="width: 1257px; height: 384px"> <div class="info_container" style="width: 95%; height: 384px">
<conheader title="主页访问数据(次)"></conheader> <conheader title="主页访问数据(次)"></conheader>
<div class="info_content" style="width: 766px; height: 352px"> <div class="info_content" style="width: 75%; height: 100%">
<echarts></echarts> <echarts></echarts>
</div> </div>
</div> </div>

@ -1,7 +1,7 @@
<script setup> <script setup>
import conheader from '@/views/home/components/ConHeader.vue' import conheader from '@/views/home/components/ConHeader.vue'
import { onMounted, ref, computed } from 'vue' import { onMounted, ref, computed } from 'vue'
import { userIdenService, userIdenChangeService } from '@/api/user/user.js' import { userIdenChangeService } from '@/api/user/user.js'
import { Edit } from '@element-plus/icons-vue' import { Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const props = defineProps({ const props = defineProps({
@ -9,7 +9,7 @@ const props = defineProps({
type: Object, type: Object,
}, },
}) })
const id = props.data.id console.log(props.data, 'info')
const formModel = ref() const formModel = ref()
const loading = ref() const loading = ref()
//true //true
@ -45,81 +45,65 @@ const cancelEdit = () => {
} }
} }
const identInfo = ref() const identInfo = ref()
//
// const getInfo = async (id) => {
// const res = await userIdenService(id)
// identInfo.value = res
// return res
// }
console.log()
onMounted(() => { onMounted(() => {
// getInfo(id) // console.log(props.data, 'res')
// getInfo(id) if (props.data.roleId === 1) {
// .then((res) => { formModel.value = [
// // 访 getData { par: 'name', name: '姓名', content: props.data.name },
// console.log(res.data, '000000') { par: 'sex', name: '性别', content: props.data.sex },
// identInfo.value = res.data { par: 'nationality', name: '民族', content: props.data.nationality },
// // { par: 'profession', name: '专业', content: props.data.profession },
// if (res.data.roleId === 1) { { par: 'education', name: '学历', content: props.data.education },
// formModel.value = [ { par: 'degree', name: '学位', content: props.data.degree },
// { par: 'name', name: '', content: res.data.name }, {
// { par: 'sex', name: '', content: res.data.sex }, par: 'professionalTitle',
// { par: 'nationality', name: '', content: res.data.nationality }, name: '职称',
// { par: 'profession', name: '', content: res.data.profession }, content: props.data.professionalTitle,
// { par: 'education', name: '', content: res.data.education }, },
// { par: 'degree', name: '', content: res.data.degree }, {
// { par: 'emergencyContact',
// par: 'professionalTitle', name: '手机号',
// name: '', content: props.data.emergencyContact,
// content: res.data.professionalTitle, },
// }, {
// { par: 'joinWorkTime',
// par: 'emergencyContact', name: '参加工作时间',
// name: '', content: props.data.joinWorkTime,
// content: res.data.emergencyContact, },
// }, {
// { par: 'politicalStatus',
// par: 'joinWorkTime', name: '政治面貌',
// name: '', content: props.data.politicalStatus,
// content: res.data.joinWorkTime, },
// }, ]
// { } else if (props.data.roleId === 2) {
// par: 'politicalStatus', formModel.value = [
// name: '', { par: 'name', name: '姓名', content: props.data.name },
// content: res.data.politicalStatus, { par: 'sex', name: '性别', content: props.data.sex },
// }, { par: 'nationality', name: '民族', content: props.data.nationality },
// ] { par: 'number', name: '学号', content: props.data.number },
// } else if (res.data.roleId === 2) { { par: 'birthday', name: '生日', content: props.data.birthday },
{ par: 'phone', name: '手机号', content: props.data.phone },
{ par: 'faculty', name: '院系', content: props.data.faculty },
{ par: 'major', name: '专业', content: props.data.major },
{ par: 'year_age', name: '入学年份', content: props.data.year_age },
{ par: 'class_name', name: '班级', content: props.data.class_name },
]
}
// else {
// formModel.value = [ // formModel.value = [
// { par: 'name', name: '', content: res.data.name }, // { name: '', content: res.data.name },
// { par: 'sex', name: '', content: res.data.sex }, // { name: '', content: res.data.id },
// { par: 'nationality', name: '', content: res.data.nationality }, // { name: '', content: 9.9 },
// { par: 'number', name: '', content: res.data.number }, // { name: '', content: 9.9 },
// { par: 'birthday', name: '', content: res.data.birthday }, // { name: '', content: 9.9 },
// { par: 'phone', name: '', content: res.data.phone }, // { name: '', content: 9.9 },
// { par: 'faculty', name: '', content: res.data.faculty }, // { name: '', content: 9.9 },
// { par: 'major', name: '', content: res.data.major }, // { name: '', content: 9.9 },
// { par: 'year_age', name: '', content: res.data.year_age }, // { name: '', content: 9.9 },
// { par: 'class_name', name: '', content: res.data.class_name },
// ] // ]
// } // }
// // else { console.log(formModel.value)
// // formModel.value = [
// // { name: '', content: res.data.name },
// // { name: '', content: res.data.id },
// // { 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 },
// // ]
// // }
// })
// .catch((error) => {
// console.error(error)
// })
}) })
// 1 // 1
const drawer2 = ref(false) const drawer2 = ref(false)
@ -144,7 +128,7 @@ const confirmClick = () => {
} }
</script> </script>
<template> <template>
<div class="info_container" style="width: 1265px; height: 306px"> <div class="info_container" style="width: 95%; height: 306px">
<conheader title="个人信息" v-model="drawer2"> <conheader title="个人信息" v-model="drawer2">
<template #drawer> <template #drawer>
<el-drawer v-model="drawer2" :direction="direction" class="table"> <el-drawer v-model="drawer2" :direction="direction" class="table">
@ -203,7 +187,7 @@ const confirmClick = () => {
</conheader> </conheader>
<div <div
class="info_content" class="info_content"
style="width: 776px; height: 244px" style="width: 60%; height: 244px"
v-loading="loading" v-loading="loading"
> >
<div class="item" :key="item.name" v-for="item in formModel"> <div class="item" :key="item.name" v-for="item in formModel">
@ -226,7 +210,7 @@ const confirmClick = () => {
gap: 10px; /* 设置元素之间的间隔 */ gap: 10px; /* 设置元素之间的间隔 */
} }
.item { .item {
width: 176px; width: 100%;
height: 60px; height: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

@ -9,7 +9,8 @@ const props = defineProps({
type: Object, type: Object,
}, },
}) })
// console.log(props.data.icon, 44444) // const data = ref(props.data, 'dsfd')
console.log(props.data, 44444)
const imageUrl = ref('') const imageUrl = ref('')
// //
const form = ref() const form = ref()
@ -37,7 +38,7 @@ const form = ref()
// code: [{ message: '', trigger: 'blur' }], // code: [{ message: '', trigger: 'blur' }],
// } // }
form.value = props.data form.value = props.data
const formLabelWidth = '140px' const formLabelWidth = '70px'
// //
imageUrl.value = props.data.icon imageUrl.value = props.data.icon
// //
@ -61,15 +62,10 @@ const openFileInput = () => {
input.click() input.click()
document.body.removeChild(input) document.body.removeChild(input)
} }
const upload = async (option) => {
const res = await tool.oss.upload(option.file)
imageUrl.value = res.url
console.log(imageUrl.value)
}
// //
const changeInfo = async () => { const changeInfo = async () => {
const userInfo = { const userInfo = {
username: form.value.username, // username: form.value.username,
phone: form.value.phone, phone: form.value.phone,
id: form.value.id, id: form.value.id,
nickName: form.value.nickName, nickName: form.value.nickName,
@ -82,7 +78,7 @@ const changeInfo = async () => {
} }
</script> </script>
<template> <template>
<div class="ident" style="width: 278px; height: 274px; background: #375fff"> <div class="ident" style="width: 100%; height: 274px; background: #375fff">
<div class="info_container" style="width: 201px; height: 178px"> <div class="info_container" style="width: 201px; height: 178px">
<div class="avater"> <div class="avater">
<img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" /> <img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" />
@ -104,11 +100,10 @@ const changeInfo = async () => {
title="登录信息" title="登录信息"
style="width: 800px; text-align: center" style="width: 800px; text-align: center"
> >
<el-form :model="form" style="" :data="form" :rules="rules"> <el-form :model="form" :data="form" :rules="rules">
<el-form-item label="用户名" :label-width="formLabelWidth"> <el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form.username" autocomplete="off" /> <el-input v-model="form.username" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="昵称" :label-width="formLabelWidth"> <el-form-item label="昵称" :label-width="formLabelWidth">
<el-input v-model="form.nickName" autocomplete="off" /> <el-input v-model="form.nickName" autocomplete="off" />
</el-form-item> </el-form-item>
@ -187,8 +182,6 @@ span {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
grid-area: element1;
position: relative; position: relative;
margin-left: 27px; margin-left: 27px;
top: 18px; top: 18px;
@ -198,7 +191,6 @@ span {
height: 24px; height: 24px;
border-radius: 100px 100px 100px 100px; border-radius: 100px 100px 100px 100px;
border: 2px solid #ffffff; border: 2px solid #ffffff;
grid-area: element2;
background: #0052d9; background: #0052d9;
border-radius: 32px 32px 32px 32px; border-radius: 32px 32px 32px 32px;
display: flex; display: flex;

@ -16,7 +16,7 @@ function confirmClick() {
} }
</script> </script>
<template> <template>
<div class="info_container" style="width: 222px; height: 174px"> <div class="info_container" style="width: 90%; height: 174px">
<conheader title="学生分组" v-model="drawer2"> <conheader title="学生分组" v-model="drawer2">
<div>编辑</div> <div>编辑</div>
<template #drawer> <template #drawer>

@ -16,7 +16,7 @@ function confirmClick() {
} }
</script> </script>
<template> <template>
<div class="info_container" style="width: 222px; height: 174px"> <div class="info_container" style="width: 90%; height: 174px">
<conheader title="已分组别" v-model="drawer2"> <conheader title="已分组别" v-model="drawer2">
<div>编辑</div> <div>编辑</div>
<template #drawer> <template #drawer>

@ -13,7 +13,7 @@ const props = defineProps({
</template> </template>
<style scoped> <style scoped>
.nav_info { .nav_info {
width: 1265px; width: 95%;
height: 32px; height: 32px;
display: flex; display: flex;
justify-content: start; justify-content: start;
@ -32,7 +32,7 @@ const props = defineProps({
margin-right: 68px; margin-right: 68px;
} }
.intro { .intro {
width: 257px; width: 50%;
height: 22px; height: 22px;
font-family: Inter, Inter; font-family: Inter, Inter;
font-weight: bold; font-weight: bold;

@ -9,22 +9,27 @@ import Class2 from './components/Class2.vue'
import Student2 from './components/Student2.vue' import Student2 from './components/Student2.vue'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { toRaw } from 'vue'
const userStore = useUserStore() const userStore = useUserStore()
// const info = userStore.getUserInfo()
// console.log(info)
const username = ref() const username = ref()
const data = ref(null) const data = ref({})
const infoData = ref()
const flag = ref(false) const flag = ref(false)
const role = ref(null) const role = ref(null)
const rightVisible = ref(false) const rightVisible = ref(false)
const getData = async () => { const getData = async () => {
await userStore await userStore.getUserInfo().catch((error) => {
.getUserInfo() console.log(error)
.then((response) => { })
const res = toRaw(response.result.data) }
username.value = res.username onMounted(() => {
data.value = res // getData()
username.value = userStore.userName
data.value = userStore.data
infoData.value = userStore.userInfo
// console.log(data.value, '11111')
// console.log(userStore.userInfo, '22222')
// console.log(userStore, 'userStore')
username.value = data.value.username
flag.value = true flag.value = true
role.value = data.value.roles[0] role.value = data.value.roles[0]
if (role.value === '老师') { if (role.value === '老师') {
@ -32,15 +37,6 @@ const getData = async () => {
} else { } else {
rightVisible.value = false rightVisible.value = false
} }
console.log(data.value, 333333)
})
.catch((error) => {
console.log(error)
})
}
onMounted(() => {
getData()
}) })
</script> </script>
<template> <template>
@ -49,28 +45,28 @@ onMounted(() => {
<div class="nav"> <div class="nav">
<welcome :username="username"></welcome> <welcome :username="username"></welcome>
</div> </div>
<div class="info" style="width: 1321px; height: 368px"> <div class="info" style="width: 100%; height: 368px">
<Info :data="data" v-if="flag"></Info> <Info :data="infoData" v-if="flag"></Info>
</div> </div>
<div class="echarts" style="width: 1321px; height: 444px"> <div class="echarts" style="width: 100%; height: 444px">
<echarts></echarts> <echarts></echarts>
</div> </div>
</div> </div>
<div v-if="rightVisible" class="right"> <div v-if="rightVisible" class="right">
<status :data="data" v-if="flag"></status> <status :data="data" v-if="flag"></status>
<div class="class" style="width: 278px; height: 388px"> <div class="class" style="width: 100%; height: 388px">
<Class1></Class1> <Class1></Class1>
</div> </div>
<div class="stu" style="width: 278px; height: 236px"> <div class="stu" style="width: 100%; height: 236px">
<Student1></Student1> <Student1></Student1>
</div> </div>
</div> </div>
<div v-else class="right"> <div v-else class="right">
<status :data="data" v-if="flag"></status> <status :data="data" v-if="flag"></status>
<div class="class" style="width: 278px; height: 388px"> <div class="class" style="width: 100%; height: 388px">
<Class2></Class2> <Class2></Class2>
</div> </div>
<div class="stu" style="width: 278px; height: 236px"> <div class="stu" style="width: 100%; height: 236px">
<Student2></Student2> <Student2></Student2>
</div> </div>
</div> </div>
@ -79,15 +75,16 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
display: flex; display: flex;
width: 100%;
.left { .left {
width: 1321px; width: 80%;
height: 936px; height: 936px;
margin-right: 16px; margin-right: 16px;
display: grid; display: grid;
grid-template-rows: 1fr 1fr 1fr; /* 使用fr单位来平均分布 */ grid-template-rows: 1fr 1fr 1fr; /* 使用fr单位来平均分布 */
height: 300px; /* 设置容器高度 */ height: 300px; /* 设置容器高度 */
.nav { .nav {
width: 1321px; width: 100%;
height: 92px; height: 92px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
@ -115,7 +112,7 @@ onMounted(() => {
} }
} }
.class { .class {
width: 1321px; width: 80%;
height: 444px; height: 444px;
background: #c57676; background: #c57676;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
@ -127,7 +124,7 @@ onMounted(() => {
} }
} }
.right { .right {
width: 278px; width: 20%;
height: 930px; height: 930px;
display: flex; display: flex;
flex-direction: column; // flex-direction: column; //

@ -300,7 +300,7 @@ import {
userRegisterService, userRegisterService,
userPhoneRegisterService, userPhoneRegisterService,
userCodeRegisterService, userCodeRegisterService,
} from '@/api/user/user.js' } from '@/api/user/user'
// let loginForm = reactive({ username: 'admin', password: '111111' }) // let loginForm = reactive({ username: 'admin', password: '111111' })
// //
let userStore = useUserStore() let userStore = useUserStore()
@ -371,7 +371,7 @@ const rules = {
code: [{ message: '验证码不能为空', trigger: 'blur' }], code: [{ message: '验证码不能为空', trigger: 'blur' }],
} }
//-- //
const countdown = ref(0) const countdown = ref(0)
let timer let timer
const updateCountdown = () => { const updateCountdown = () => {
@ -414,6 +414,7 @@ const checkPasswordMatch = () => {
passwordMatchError.value = '' passwordMatchError.value = ''
} }
} }
//json //json
const handleSubmit = async () => { const handleSubmit = async () => {
// //
@ -467,7 +468,7 @@ const phoneChange = () => {
console.log('开始手机号注册') console.log('开始手机号注册')
isinfo.value = false isinfo.value = false
} }
// //
const phoneReturn = () => { const phoneReturn = () => {
isinfo.value = true isinfo.value = true
} }

@ -10,7 +10,6 @@
<li>学生入口&nbsp;&nbsp;|</li> <li>学生入口&nbsp;&nbsp;|</li>
<li>毕业生入口</li> <li>毕业生入口</li>
</ul> </ul>
</div> </div>
<div class="nav2"> <div class="nav2">
<ul> <ul>
@ -36,25 +35,27 @@
<h1>xxx课程</h1> <h1>xxx课程</h1>
</div> </div>
<div class="container"></div> <div class="container"></div>
</div> </div>
<!-- 底部 --> <!-- 底部 -->
<div class="footer"> <div class="footer">
<h3>软件工程专业</h3> <h3>软件工程专业</h3>
<h1>教学一体化平台</h1> <h1>教学一体化平台</h1>
<p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议 <p>
关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
</p>
<p style="font-size: 13px; margin-top: 70px">
黄淮学院版权所有@2023 湘豫CP备 19005950-1
<br />
违法和不良信息举报 举报电话0xxx-8xxxxxxx 举报邮箱xxxxxxxxx@qq.com
</p> </p>
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950-1<br>
违法和不良信息举报 举报电话0xxx-8xxxxxxx 举报邮箱xxxxxxxxx@qq.com</p>
</div>
<div>
</div> </div>
<div></div>
</template> </template>
<script lang="ts"> <script lang="ts">
import * as d3 from 'd3'; import * as d3 from 'd3'
// import { onMounted } from 'vue'; // import { onMounted } from 'vue';
export default { export default {
@ -70,21 +71,28 @@ export default {
scale: 1, scale: 1,
width: 800, width: 800,
height: 560, height: 560,
colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'], colorList: [
'#FD7623',
'#3388B1',
'#D82952',
'#F3D737',
'#409071',
'#D64E52',
],
testGraph: { testGraph: {
"nodes": [ nodes: [
{ "id": "Myriel", "group": 1 }, { id: 'Myriel', group: 1 },
{ "id": "Napoleon", "group": 1 }, { id: 'Napoleon', group: 1 },
{ "id": "Mlle.Baptistine", "group": 1 }, { id: 'Mlle.Baptistine', group: 1 },
{ "id": "Mme.Magloire", "group": 1 }, { id: 'Mme.Magloire', group: 1 },
{ "id": "CountessdeLo", "group": 1 }, { id: 'CountessdeLo', group: 1 },
{ "id": "Geborand", "group": 1 }, { id: 'Geborand', group: 1 },
{ "id": "Champtercier", "group": 1 }, { id: 'Champtercier', group: 1 },
{ "id": "Cravatte", "group": 1 }, { id: 'Cravatte', group: 1 },
{ "id": "Count", "group": 1 }, { id: 'Count', group: 1 },
{ "id": "OldMan", "group": 1 }, { id: 'OldMan', group: 1 },
{ "id": "Labarre", "group": 2 }, { id: 'Labarre', group: 2 },
{ "id": "Valjean", "group": 2 }, { id: 'Valjean', group: 2 },
// { "id": "Marguerite", "group": 3 }, // { "id": "Marguerite", "group": 3 },
// { "id": "Mme.deR", "group": 2 }, // { "id": "Mme.deR", "group": 2 },
// { "id": "Isabeau", "group": 2 }, // { "id": "Isabeau", "group": 2 },
@ -151,8 +159,8 @@ export default {
// { "id": "Brujon", "group": 4 }, // { "id": "Brujon", "group": 4 },
// { "id": "Mme.Hucheloup", "group": 8 } // { "id": "Mme.Hucheloup", "group": 8 }
], ],
"links": [ links: [
{ "source": "Napoleon", "target": "Myriel", "value": 1 }, { source: 'Napoleon', target: 'Myriel', value: 1 },
// { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 }, // { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 },
// { "source": "Mme.Magloire", "target": "Myriel", "value": 10 }, // { "source": "Mme.Magloire", "target": "Myriel", "value": 10 },
// { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 }, // { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 },
@ -406,12 +414,10 @@ export default {
// { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 }, // { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 },
// { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 }, // { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 },
// { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 } // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 }
] ],
// "links":[] // "links":[]
},
} }
};
}, },
mounted() { mounted() {
// .then(function(response){ // .then(function(response){
@ -420,143 +426,161 @@ export default {
// .catch(function(error){ // .catch(function(error){
// console.log(error) // console.log(error)
// }) // })
this.initGraph(this.testGraph); this.initGraph(this.testGraph)
}, },
methods: { methods: {
initGraph(data: { initGraph(data: {
nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue'; nodes: { id: string; group: number }[]
source: string; target: string; value: number; links: {
}[]; // import { onMounted } from 'vue';
source: string
target: string
value: number
}[]
}) { }) {
const _this = this; const _this = this
const links = data.links; const links = data.links
const nodes = data.nodes; const nodes = data.nodes
// const links = data.links.map((d: object | null) => Object.create(d)); // const links = data.links.map((d: object | null) => Object.create(d));
// const nodes = data.nodes.map((d: object | null) => Object.create(d)); // const nodes = data.nodes.map((d: object | null) => Object.create(d));
const simulation = d3.forceSimulation(nodes) const simulation = d3
.force("link", d3.forceLink(links).id((d: { id: any; }) => d.id)) .forceSimulation(nodes)
.force("collide",d3.forceCollide().radius(()=> 30) ) .force(
.force("charge", d3.forceManyBody().strength(-30)) 'link',
.force("center", d3.forceCenter(_this.width / 2, _this.height / 2)); d3.forceLink(links).id((d: { id: any }) => d.id),
)
const svg = d3.select(".container") .force(
.append("svg") 'collide',
.attr("viewBox", `0 0 ${_this.width} ${_this.height}`); d3.forceCollide().radius(() => 30),
svg.call(d3.zoom().on("zoom",function(){ )
g.attr("transform",d3.event.transform) .force('charge', d3.forceManyBody().strength(-30))
})) .force('center', d3.forceCenter(_this.width / 2, _this.height / 2))
const g = svg.append("g") const svg = d3
.select('.container')
const link = g.append("g") .append('svg')
.attr("stroke", "#999") .attr('viewBox', `0 0 ${_this.width} ${_this.height}`)
.attr("stroke-opacity", 0.6) svg.call(
.selectAll("line") d3.zoom().on('zoom', function () {
g.attr('transform', d3.event.transform)
}),
)
const g = svg.append('g')
const link = g
.append('g')
.attr('stroke', '#999')
.attr('stroke-opacity', 0.6)
.selectAll('line')
.data(links) .data(links)
.join("line") .join('line')
.attr("stroke-width", (d: { value: number; }) => Math.sqrt(d.value)) .attr('stroke-width', (d: { value: number }) => Math.sqrt(d.value))
.attr("class", "link"); .attr('class', 'link')
const node = g.append("g") const node = g
.selectAll("circle") .append('g')
.selectAll('circle')
.data(nodes) .data(nodes)
.join("circle") .join('circle')
.attr("r", 40) .attr('r', 40)
.attr("class","node") .attr('class', 'node')
.attr("fill", _this.color) .attr('fill', _this.color)
.on("click",_this.queryTest) .on('click', _this.queryTest)
.call(_this.drag(simulation)); .call(_this.drag(simulation))
node.append("title") node.append('title').text((d: { id: any }) => d.id)
.text((d: { id: any; }) => d.id);
const nodeNameText = g
const nodeNameText = g.append("g") .append('g')
.selectAll("text") .selectAll('text')
.data(nodes) .data(nodes)
.join("text") .join('text')
.text(function(d: { id: any; }){ .text(function (d: { id: any }) {
return d.id return d.id
}) })
.attr("fill","white") .attr('fill', 'white')
.attr("dx",function () { .attr('dx', function () {
return this.getBoundingClientRect().width/2*(-1) return (this.getBoundingClientRect().width / 2) * -1
}) })
.attr("dy",50) .attr('dy', 50)
.attr("class","node-name") .attr('class', 'node-name')
node.on("mouseover", function (d, i) { node
.on('mouseover', function (d, i) {
d3.select(this) d3.select(this)
.attr("stroke", "white") // .attr('stroke', 'white') //
.attr("stroke-width", 5); // .attr('stroke-width', 5) //
})
.on('mouseout', function (d, i) {
d3.select(this).attr('stroke', 'none') //
}) })
.on("mouseout", function (d, i) {
d3.select(this)
.attr("stroke", "none"); //
});
simulation.on("tick", () => { simulation.on('tick', () => {
link link
.attr("x1", (d: { source: { x: any; }; }) => d.source.x) .attr('x1', (d: { source: { x: any } }) => d.source.x)
.attr("y1", (d: { source: { y: any; }; }) => d.source.y) .attr('y1', (d: { source: { y: any } }) => d.source.y)
.attr("x2", (d: { target: { x: any; }; }) => d.target.x) .attr('x2', (d: { target: { x: any } }) => d.target.x)
.attr("y2", (d: { target: { y: any; }; }) => d.target.y); .attr('y2', (d: { target: { y: any } }) => d.target.y)
node node
.attr("cx", (d: { x: any; }) => d.x) .attr('cx', (d: { x: any }) => d.x)
.attr("cy", (d: { y: any; }) => d.y); .attr('cy', (d: { y: any }) => d.y)
nodeNameText nodeNameText
.attr("x", (d: { x: any; }) => d.x) .attr('x', (d: { x: any }) => d.x)
.attr("y", (d: { y: any; })=> d.y); .attr('y', (d: { y: any }) => d.y)
}); })
}, },
updateGraph(data: { links: any[]; }){ updateGraph(data: { links: any[] }) {
// var _this = this // var _this = this
const links = data.links.map((d: object | null)=>Object.create(d)); const links = data.links.map((d: object | null) => Object.create(d))
const nodes = data.nodes.map((d: object | null)=>Object.create(d)); const nodes = data.nodes.map((d: object | null) => Object.create(d))
}, },
color(d: { group: string | number; }) { color(d: { group: string | number }) {
return this.colorList[d.group] return this.colorList[d.group]
// const scale = d3.scaleOrdinal(d3.schemeCategory10); // const scale = d3.scaleOrdinal(d3.schemeCategory10);
// return (d: { group: any; }) => scale(d.group); // return (d: { group: any; }) => scale(d.group);
}, },
drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) { drag(simulation: {
function dragstarted(event: { active: any; }) { alphaTarget: (arg0: number) => {
if (!event.active) simulation.alphaTarget(0.3).restart(); (): any
d3.event.subject.fx = d3.event.x; new (): any
d3.event.subject.fy = d3.event.y; restart: { (): void; new (): any }
}
}) {
function dragstarted(event: { active: any }) {
if (!event.active) simulation.alphaTarget(0.3).restart()
d3.event.subject.fx = d3.event.x
d3.event.subject.fy = d3.event.y
} }
function dragged(event: any) { function dragged(event: any) {
d3.event.subject.fx = d3.event.x; d3.event.subject.fx = d3.event.x
d3.event.subject.fy = d3.event.y; d3.event.subject.fy = d3.event.y
} }
function dragended(event: { active: any; }) { function dragended(event: { active: any }) {
if (!event.active) simulation.alphaTarget(0); if (!event.active) simulation.alphaTarget(0)
d3.event.subject.fx = null; d3.event.subject.fx = null
d3.event.subject.fy = null; d3.event.subject.fy = null
} }
return d3.drag() return d3
.on("start", dragstarted) .drag()
.on("drag", dragged) .on('start', dragstarted)
.on("end", dragended); .on('drag', dragged)
.on('end', dragended)
}, },
queryTest(d: { id: any; }){ queryTest(d: { id: any }) {
// var _this = this // var _this = this
console.log(d.id) console.log(d.id)
},
},
} }
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
* { * {
margin: 0; margin: 0;
@ -596,8 +620,6 @@ img {
background-image: url('/src/assets/images/top.png'); background-image: url('/src/assets/images/top.png');
background-size: 100% 100%; background-size: 100% 100%;
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
} }
// //
@ -613,7 +635,6 @@ img {
height: 10%; height: 10%;
margin-right: 20px; margin-right: 20px;
// background-color: #6759ff; // background-color: #6759ff;
} }
.header .nav1 ul li { .header .nav1 ul li {
@ -662,9 +683,9 @@ img {
font-size: 50px; font-size: 50px;
margin-top: 23px; margin-top: 23px;
font-weight: bolder; font-weight: bolder;
color: #FFFFFF; color: #ffffff;
float: right; float: right;
margin-right: 173px // float: left; margin-right: 173px; // float: left;
// margin-left: 779px; // margin-left: 779px;
} }
@ -672,7 +693,7 @@ img {
font-size: 15px; font-size: 15px;
margin-top: 102px; margin-top: 102px;
// font-weight:bolder; // font-weight:bolder;
color: #FFFFFF; color: #ffffff;
float: right; float: right;
margin-right: -175px; margin-right: -175px;
} }
@ -688,7 +709,7 @@ img {
margin-top: 10; margin-top: 10;
width: 100%; width: 100%;
height: 900px; height: 900px;
background-color: #7F9EED; background-color: #7f9eed;
} }
.subnav { .subnav {
width: 100%; width: 100%;
@ -699,13 +720,13 @@ img {
} }
.subnav h1 { .subnav h1 {
border-bottom: 4px solid #0052FF; border-bottom: 4px solid #0052ff;
font-size: 20px; font-size: 20px;
width: 10%; width: 10%;
height: 35px; height: 35px;
margin: auto; margin: auto;
font-weight: bolder; font-weight: bolder;
color: #0052FF; color: #0052ff;
text-align: center; text-align: center;
} }
// d3 // d3
@ -755,17 +776,17 @@ img {
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
padding-top: 40px; padding-top: 40px;
color: #7F9EED; color: #7f9eed;
font-weight: bolder; font-weight: bolder;
} }
.footer h1 { .footer h1 {
width: 100%; width: 100%;
// position: absolute; // position: absolute;
font-family: "kaiti_gb2312"; font-family: 'kaiti_gb2312';
margin-top: 10px; margin-top: 10px;
font-size: 25px; font-size: 25px;
color: #7F9EED; color: #7f9eed;
font-weight: bolder; font-weight: bolder;
} }
@ -773,9 +794,9 @@ img {
width: 100%; width: 100%;
height: 20px; height: 20px;
// position: absolute; // position: absolute;
font-family: "kaiti_gb2312"; font-family: 'kaiti_gb2312';
margin-top: 25px; margin-top: 25px;
font-size: 17px; font-size: 17px;
color: #7F9EED; color: #7f9eed;
} }
</style> </style>

@ -7,7 +7,10 @@
import { onMounted, ref, reactive } from 'vue' import { onMounted, ref, reactive } from 'vue'
import ForceGraph3D from '3d-force-graph' import ForceGraph3D from '3d-force-graph'
//@ts-ignore //@ts-ignore
import { CSS2DRenderer, CSS2DObject,} from 'three/examples/jsm/renderers/CSS2DRenderer.js' import {
CSS2DRenderer,
CSS2DObject,
} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
//@ts-ignore //@ts-ignore
import SpriteText from '../spritetext.js' import SpriteText from '../spritetext.js'
// const $router = useRouter() // const $router = useRouter()
@ -16,17 +19,21 @@ let Graph = reactive({})
const props = defineProps({ const props = defineProps({
width: { width: {
type: Number, type: Number,
default:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, default:
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth,
}, },
height: { height: {
type: Number, type: Number,
default:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, default:
} window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight,
},
}) })
const dom = ref(null) const dom = ref(null)
onMounted(() => { onMounted(() => {
Graph = ForceGraph3D({ Graph = ForceGraph3D({
extraRenderers: [new CSS2DRenderer()], extraRenderers: [new CSS2DRenderer()],
})(document.getElementById('3d-graph') as HTMLElement) })(document.getElementById('3d-graph') as HTMLElement)
@ -101,7 +108,6 @@ onMounted(() => {
} else { } else {
return '#dd92fd' return '#dd92fd'
} }
}) })
} else { } else {
// Graph.linkColor(() => '#a4c7fe') // 线 // Graph.linkColor(() => '#a4c7fe') // 线
@ -119,33 +125,32 @@ const setLabel = () => {
//@ts-ignore //@ts-ignore
Graph.linkThreeObject((link: any) => { Graph.linkThreeObject((link: any) => {
// extend link with text sprite // extend link with text sprite
const sprite = new SpriteText(`${link.label}`); const sprite = new SpriteText(`${link.label}`)
sprite.color = '#ccc'; sprite.color = '#ccc'
sprite.textHeight = 1.5; sprite.textHeight = 1.5
return sprite; return sprite
}) })
//@ts-ignore //@ts-ignore
Graph.linkPositionUpdate((sprite, { start, end }) => { Graph.linkPositionUpdate((sprite, { start, end }) => {
//@ts-ignore //@ts-ignore
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({ const middlePos = Object.assign(
...['x', 'y', 'z'].map((c) => ({
//@ts-ignore //@ts-ignore
[c]: start[c] + (end[c] - start[c]) / 2 // calc middle point [c]: start[c] + (end[c] - start[c]) / 2, // calc middle point
}))); })),
)
// Position sprite // Position sprite
Object.assign(sprite.position, middlePos); Object.assign(sprite.position, middlePos)
}); })
//@ts-ignore //@ts-ignore
Graph.d3Force('charge').strength(-120); Graph.d3Force('charge').strength(-120)
} }
// const goToEditAtlas = () => { // const goToEditAtlas = () => {
// console.log(jsonData.value) // console.log(jsonData.value)
// $router.push({ name: 'EditAtlas', params: { id: 123 } }) // $router.push({ name: 'EditAtlas', params: { id: 123 } })
// } // }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped></style>
</style>

@ -64,7 +64,9 @@
</div> </div>
<div class="sidebar"> <div class="sidebar">
<div class="icon"><img src="/src/assets/images/rjgz.jpg" width="100%" height="100%"></div> <div class="icon">
<img src="/src/assets/images/rjgz.jpg" width="100%" height="100%" />
</div>
<!-- <div class="content"> <!-- <div class="content">
<h3>课程目标</h3> <h3>课程目标</h3>
<div class="btn">了解更多</div> <div class="btn">了解更多</div>

@ -39,8 +39,20 @@
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<div class="sidebar-header-imag"> <div class="sidebar-header-imag">
<div class="sidebar-header-imag1"><img src="/src/assets/images/gd (3).png" width="100%" height="100%"></div> <div class="sidebar-header-imag1">
<div class="sidebar-header-imag2"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div> <img
src="/src/assets/images/gd (3).png"
width="100%"
height="100%"
/>
</div>
<div class="sidebar-header-imag2">
<img
src="/src/assets/images/sjx(1).png"
width="100%"
height="100%"
/>
</div>
</div> </div>
<h1>知识点</h1> <h1>知识点</h1>
<p>共发布225个</p> <p>共发布225个</p>
@ -51,11 +63,17 @@
<div class="content"> <div class="content">
<div class="txt"> <div class="txt">
<div class="txt1">联试题数233 &nbsp;&nbsp;&nbsp;关联学习数22</div> <div class="txt1">联试题数233 &nbsp;&nbsp;&nbsp;关联学习数22</div>
<div class="imag"><img src="/src/assets/images/sjx(1).png" width="100%" height="100%"></div> <div class="imag">
<img
src="/src/assets/images/sjx(1).png"
width="100%"
height="100%"
/>
</div>
</div> </div>
</div> </div>
<div class="lina"> <div class="lina">
<e-charts style="height: 260px;" id="lina" /> <e-charts style="height: 260px" id="lina" />
</div> </div>
<!-- <div id="staff_all_orderCount" style="width: 300px;height:300px;"></div> --> <!-- <div id="staff_all_orderCount" style="width: 300px;height:300px;"></div> -->
<!-- <e-chars class="lina" option="option"/> --> <!-- <e-chars class="lina" option="option"/> -->
@ -64,16 +82,20 @@
<div class="completion"> <div class="completion">
<!-- <div class="echates-title">知识点掌握百分比</div> --> <!-- <div class="echates-title">知识点掌握百分比</div> -->
<div class="box"> <div class="box">
<div id="liquidfill" style="width: 65%; height: 65%; "></div> <div id="liquidfill" style="width: 65%; height: 65%"></div>
<div class="percentage"> <div class="percentage">
<h4>平均完成率:<p>80%</p> <h4>
平均完成率:
<p>80%</p>
</h4> </h4>
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div id="liquidfil" style="width: 65%; height: 65%; "></div> <div id="liquidfil" style="width: 65%; height: 65%"></div>
<div class="percentage"> <div class="percentage">
<h4>平均完成率:<p>60%</p> <h4>
平均完成率:
<p>60%</p>
</h4> </h4>
</div> </div>
</div> </div>
@ -112,11 +134,11 @@
<h1>49</h1> <h1>49</h1>
<p>80% ~ 100%</p> <p>80% ~ 100%</p>
</div> </div>
<div class="libox" style="border-left: 2px solid #74a5ff;"> <div class="libox" style="border-left: 2px solid #74a5ff">
<h1>3</h1> <h1>3</h1>
<p>60% ~ 79%</p> <p>60% ~ 79%</p>
</div> </div>
<div class="libox" style="border-left: 2px solid #74a5ff;"> <div class="libox" style="border-left: 2px solid #74a5ff">
<h1>4</h1> <h1>4</h1>
<p>59%以下</p> <p>59%以下</p>
</div> </div>
@ -130,20 +152,22 @@
</div> </div>
<div class="lin"></div> <div class="lin"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 底部 --> <!-- 底部 -->
<div class="footer"> <div class="footer">
<h3>软件工程专业</h3> <h3>软件工程专业</h3>
<h1>教学一体化平台</h1> <h1>教学一体化平台</h1>
<p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议 <p>
关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp;
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议
</p>
<p style="font-size: 13px; margin-top: 70px">
黄淮学院版权所有@2023 湘豫CP备 19005950-1
<br />
违法和不良信息举报 举报电话0xxx-8xxxxxxx 举报邮箱xxxxxxxxx@qq.com
</p> </p>
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950-1<br>
违法和不良信息举报 举报电话0xxx-8xxxxxxx 举报邮箱xxxxxxxxx@qq.com</p>
</div> </div>
<div></div> <div></div>
</template> </template>
@ -151,34 +175,34 @@
<script lang="ts" setup> <script lang="ts" setup>
// import axios from 'axios'; // import axios from 'axios';
import { ref, onMounted, markRaw } from 'vue' import { ref, onMounted, markRaw } from 'vue'
import * as echarts from 'echarts'; import * as echarts from 'echarts'
import 'echarts-liquidfill' import 'echarts-liquidfill'
// var ROOT_PATH = 'https://echarts.apache.org/examples'; // var ROOT_PATH = 'https://echarts.apache.org/examples';
// type EChartsOption = echarts.EChartsOption; // type EChartsOption = echarts.EChartsOption;
var option = null let option = null
// dom dom // dom dom
onMounted(() => { onMounted(() => {
const dom = document.getElementById('main') const dom = document.getElementById('main')
// dom echarts // dom echarts
var myChart = echarts.init(dom); let myChart = echarts.init(dom)
console.log(dom, 'dom') console.log(dom, 'dom')
// loading // loading
myChart.showLoading(); myChart.showLoading()
// json // json
fetch('../../../public/nodeList.json').then((res) => { fetch('../../../public/nodeList.json').then((res) => {
res.json().then(graph => { res.json().then((graph) => {
console.log(graph); console.log(graph)
myChart.hideLoading(); myChart.hideLoading()
// node links // node links
option = { option = {
tooltip: {}, tooltip: {},
legend: [ legend: [
{ {
data: graph.categories.map(function (a: { name: string }) { data: graph.categories.map(function (a: { name: string }) {
return a.name; return a.name
}) }),
} },
], ],
series: [ series: [
@ -193,44 +217,35 @@ onMounted(() => {
label: { label: {
show: true, show: true,
position: 'right', position: 'right',
formatter: '{b}' formatter: '{b}',
}, },
labelLayout: { labelLayout: {
hideOverlap: true hideOverlap: true,
}, },
scaleLimit: { scaleLimit: {
min: 0.4, min: 0.4,
max: 2 max: 2,
}, },
lineStyle: { lineStyle: {
color: 'source', color: 'source',
curveness: 0.3 curveness: 0.3,
} },
},
],
} }
]
};
// echarts // echarts
myChart.setOption(option); myChart.setOption(option)
}) })
}) })
// option && myChart.setOption(option); // option && myChart.setOption(option);
}) })
onMounted(() => { onMounted(() => {
const chartInstance: any = ref(null) const chartInstance: any = ref(null)
const updateChart = () => { const updateChart = () => {
chartInstance.value = markRaw( chartInstance.value = markRaw(
echarts.init(document?.getElementById(`liquidfill`,)), echarts.init(document?.getElementById(`liquidfill`)),
) )
const option = { const option = {
series: [ series: [
@ -289,15 +304,15 @@ onMounted(() => {
onMounted(() => { onMounted(() => {
const dom = document.getElementById('lina') const dom = document.getElementById('lina')
// dom echarts // dom echarts
var myChart = echarts.init(dom); let myChart = echarts.init(dom)
console.log(dom, 'dom') console.log(dom, 'dom')
// loading // loading
myChart.showLoading(); myChart.showLoading()
// json // json
fetch('../../../public/nodeList.json').then((res) => { fetch('../../../public/nodeList.json').then((res) => {
res.json().then(graph => { res.json().then((graph) => {
console.log(graph); console.log(graph)
myChart.hideLoading(); myChart.hideLoading()
// node links // node links
option = { option = {
xAxis: { xAxis: {
@ -306,23 +321,21 @@ onMounted(() => {
data: ['记忆', '理解', '应用', '分析', '评价'], data: ['记忆', '理解', '应用', '分析', '评价'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#5470C6' // X color: '#5470C6', // X
} },
} },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#5470C6' // Y color: '#5470C6', // Y
} },
}, },
// min:'700', // min:'700',
splitLine: { splitLine: {
show: false show: false,
},
}
}, },
series: [ series: [
{ {
@ -330,28 +343,26 @@ onMounted(() => {
type: 'line', type: 'line',
areaStyle: { areaStyle: {
color: '#76A6FF', color: '#76A6FF',
opacity: 0.5 opacity: 0.5,
},
}, },
],
} }
]
};
// echarts // echarts
myChart.setOption(option); myChart.setOption(option)
}) })
}) })
// option && myChart.setOption(option); // option && myChart.setOption(option);
}) })
// //
onMounted(() => { onMounted(() => {
const chartInstance: any = ref(null) const chartInstance: any = ref(null)
const updateChart = () => { const updateChart = () => {
chartInstance.value = markRaw( chartInstance.value = markRaw(
echarts.init(document?.getElementById(`liquidfil`,)), echarts.init(document?.getElementById(`liquidfil`)),
) )
const option = { const option = {
series: [ series: [
@ -428,7 +439,6 @@ onMounted(() => {
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul { ul {
@ -461,8 +471,6 @@ img {
background-image: url('/src/assets/images/top.png'); background-image: url('/src/assets/images/top.png');
background-size: 100% 100%; background-size: 100% 100%;
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); // background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
} }
// //
@ -478,7 +486,6 @@ img {
height: 10%; height: 10%;
margin-right: 20px; margin-right: 20px;
// background-color: #6759ff; // background-color: #6759ff;
} }
.header .nav1 ul li { .header .nav1 ul li {
@ -527,9 +534,9 @@ img {
font-size: 50px; font-size: 50px;
margin-top: 23px; margin-top: 23px;
font-weight: bolder; font-weight: bolder;
color: #FFFFFF; color: #ffffff;
float: right; float: right;
margin-right: 173px // float: left; margin-right: 173px; // float: left;
// margin-left: 779px; // margin-left: 779px;
} }
@ -537,7 +544,7 @@ img {
font-size: 15px; font-size: 15px;
margin-top: 102px; margin-top: 102px;
// font-weight:bolder; // font-weight:bolder;
color: #FFFFFF; color: #ffffff;
float: right; float: right;
margin-right: -175px; margin-right: -175px;
} }
@ -558,13 +565,13 @@ img {
} }
.subnav h1 { .subnav h1 {
border-bottom: 4px solid #0052FF; border-bottom: 4px solid #0052ff;
font-size: 20px; font-size: 20px;
width: 10%; width: 10%;
height: 35px; height: 35px;
margin: auto; margin: auto;
font-weight: bolder; font-weight: bolder;
color: #0052FF; color: #0052ff;
text-align: center; text-align: center;
} }
@ -578,7 +585,6 @@ img {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-around; justify-content: space-around;
} }
.chart { .chart {
@ -605,7 +611,7 @@ img {
.sidebar .sidebar-header { .sidebar .sidebar-header {
width: 100%; width: 100%;
height: 7%; height: 7%;
background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff); background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
// transform: perspective(3em) rotateY(-6deg); // transform: perspective(3em) rotateY(-6deg);
} }
@ -676,7 +682,7 @@ img {
float: left; float: left;
margin-top: 1.5%; margin-top: 1.5%;
// box-shadow: 1.5px -2px #F0F4FA; // box-shadow: 1.5px -2px #F0F4FA;
box-shadow: 0px -2px 3px 2px #F0F4FA; box-shadow: 0px -2px 3px 2px #f0f4fa;
// box-shadow: 1.5px 1px #F0F4FA; // box-shadow: 1.5px 1px #F0F4FA;
// transform: perspective(3em) rotateY(-6deg); // transform: perspective(3em) rotateY(-6deg);
} }
@ -684,9 +690,8 @@ img {
.sidebar .content { .sidebar .content {
width: 100%; width: 100%;
height: 6%; height: 6%;
background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff); background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
margin-top: 10px; margin-top: 10px;
} }
.sidebar .content .txt { .sidebar .content .txt {
@ -697,7 +702,6 @@ img {
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
display: flex; display: flex;
} }
.sidebar .content .txt .imag { .sidebar .content .txt .imag {
@ -710,9 +714,8 @@ img {
height: 5%; height: 5%;
font-size: 14px; font-size: 14px;
margin-left: 4px; margin-left: 4px;
color: #FFFFFF; color: #ffffff;
margin-top: 15px; margin-top: 15px;
} }
.sidebar .lina { .sidebar .lina {
@ -772,7 +775,7 @@ img {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-evenly; justify-content: space-evenly;
color: #F0F4FA; color: #f0f4fa;
font-weight: bold; font-weight: bold;
// background-color: #5582dc; // background-color: #5582dc;
} }
@ -782,17 +785,20 @@ img {
height: 90%; height: 90%;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: #5470C6; color: #5470c6;
// background-color: #b3c8f2; // background-color: #b3c8f2;
} }
// //
.header1 { .header1 {
position: relative; position: relative;
text-align: center; text-align: center;
border-radius: 100%; border-radius: 100%;
background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%); background: linear-gradient(
60deg,
rgba(84, 58, 183, 1) 0%,
rgba(0, 172, 193, 1) 100%
);
// color: rgb(207, 59, 59); // color: rgb(207, 59, 59);
} }
@ -831,7 +837,7 @@ img {
.parallax > use { .parallax > use {
/* 使use元素执行move-forever动画 */ /* 使use元素执行move-forever动画 */
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
} }
.parallax > use:nth-child(1) { .parallax > use:nth-child(1) {
@ -888,7 +894,6 @@ img {
// } // }
} }
// //
.knowledge { .knowledge {
width: 100%; width: 100%;
@ -896,7 +901,7 @@ img {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
background-color: #A1C1FF; background-color: #a1c1ff;
// background-color: #A4c3ff; // background-color: #A4c3ff;
padding-top: 20px; padding-top: 20px;
} }
@ -912,7 +917,7 @@ img {
.knowledge .libox h1 { .knowledge .libox h1 {
width: 100%; width: 100%;
height: 50%; height: 50%;
color: #F0F4FA; color: #f0f4fa;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
margin: auto; margin: auto;
@ -924,7 +929,7 @@ img {
.knowledge .libox p { .knowledge .libox p {
width: 100%; width: 100%;
height: 50%; height: 50%;
color: #F0F4FA; color: #f0f4fa;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
margin: auto; margin: auto;
@ -937,7 +942,7 @@ img {
.box1 { .box1 {
width: 100%; width: 100%;
height: 147px; height: 147px;
background-color: #A1C1FF; background-color: #a1c1ff;
// height: 100%; // height: 100%;
} }
@ -947,11 +952,9 @@ img {
margin: auto; margin: auto;
border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;
background-color: #74a5ff; background-color: #74a5ff;
// background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff); // background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff);
} }
.method li { .method li {
width: 90%; width: 90%;
height: 20%; height: 20%;
@ -960,7 +963,7 @@ img {
line-height: 35px; line-height: 35px;
margin-left: 10px; margin-left: 10px;
padding-top: 10px; padding-top: 10px;
color: #F0F4FA; color: #f0f4fa;
// background-color: #74a5ff; // background-color: #74a5ff;
} }
.box1 .lin { .box1 .lin {
@ -971,7 +974,7 @@ width: 60%;
margin: auto; margin: auto;
margin-top: 5.5%; margin-top: 5.5%;
// box-shadow: 1.5px -2px #F0F4FA; // box-shadow: 1.5px -2px #F0F4FA;
box-shadow: 0px -2px 3px 2px #F0F4FA; box-shadow: 0px -2px 3px 2px #f0f4fa;
} }
// //
@ -990,17 +993,17 @@ width: 60%;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
padding-top: 40px; padding-top: 40px;
color: #7F9EED; color: #7f9eed;
font-weight: bolder; font-weight: bolder;
} }
.footer h1 { .footer h1 {
width: 100%; width: 100%;
// position: absolute; // position: absolute;
font-family: "kaiti_gb2312"; font-family: 'kaiti_gb2312';
margin-top: 10px; margin-top: 10px;
font-size: 25px; font-size: 25px;
color: #7F9EED; color: #7f9eed;
font-weight: bolder; font-weight: bolder;
} }
@ -1008,10 +1011,10 @@ width: 60%;
width: 100%; width: 100%;
height: 20px; height: 20px;
// position: absolute; // position: absolute;
font-family: "kaiti_gb2312"; font-family: 'kaiti_gb2312';
margin-top: 25px; margin-top: 25px;
font-size: 17px; font-size: 17px;
color: #7F9EED; color: #7f9eed;
} }
.echates-title { .echates-title {
@ -1023,6 +1026,6 @@ width: 60%;
.bo { .bo {
width: 100%; width: 100%;
background: linear-gradient(#74a5ff, #91b7ff, #A4c3ff); background: linear-gradient(#74a5ff, #91b7ff, #a4c3ff);
} }
</style> </style>

Loading…
Cancel
Save