dlsx
/
Teaching_integration_platform_admin_template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

引入并使用echarts的组件

Browse Source
develoop
aaaa 6 months ago
parent b78eadc89d
commit a86a3ef515
6 changed files with 550 additions and 311 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 62
      pnpm-lock.yaml
  3. 3
      src/main.ts
  4. 67
      src/views/portal/LearningPathRecommendations.vue
  5. 565
      src/views/portal/index.vue
  6. 162
      src/views/portal/knowledgePointLearning.vue

2
package.json
Unescape View File

@ -20,10 +20,12 @@
"@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^10.9.0",
"axios": "^1.6.8",
"echarts": "^5.5.0",
"element-plus": "^2.6.0",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"vue": "^3.4.19",
"vue-echarts": "^6.7.2",
"vue-router": "^4.3.0"
},
"devDependencies": {

62
pnpm-lock.yaml
Unescape View File

@ -10,6 +10,9 @@ dependencies:
axios:
specifier: ^1.6.8
version: 1.6.8
echarts:
specifier: ^5.5.0
version: 5.5.0
element-plus:
specifier: ^2.6.0
version: 2.6.0(vue@3.4.19)
@ -22,6 +25,9 @@ dependencies:
vue:
specifier: ^3.4.19
version: 3.4.19(typescript@5.2.2)
vue-echarts:
specifier: ^6.7.2
version: 6.7.2(echarts@5.5.0)(vue@3.4.19)
vue-router:
specifier: ^4.3.0
version: 4.3.0(vue@3.4.19)
@ -1982,6 +1988,13 @@ packages:
domhandler: 5.0.3
dev: true
/echarts@5.5.0:
resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
dependencies:
tslib: 2.3.0
zrender: 5.5.0
dev: false
/ee-first@1.1.1:
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
dev: true
@ -4018,6 +4031,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/resize-detector@0.3.0:
resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
dev: false
/resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@ -4742,6 +4759,10 @@ packages:
strip-bom: 3.0.0
dev: true
/tslib@2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
dev: false
/tslib@2.6.2:
resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
dev: true
@ -4965,6 +4986,21 @@ packages:
fsevents: 2.3.3
dev: true
/vue-demi@0.13.11(vue@3.4.19):
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.4.19(typescript@5.2.2)
dev: false
/vue-demi@0.14.7(vue@3.4.19):
resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
engines: {node: '>=12'}
@ -4980,6 +5016,26 @@ packages:
vue: 3.4.19(typescript@5.2.2)
dev: false
/vue-echarts@6.7.2(echarts@5.5.0)(vue@3.4.19):
resolution: {integrity: sha512-SG8Vmszhx24KjtySsk361DogZLRkPCyLhgoyh7iN1eH3WGJ0kyl3k0g4QiSJqK0+F1Ej0HDopq4A5OGcBlAwzw==}
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.5
'@vue/runtime-core': ^3.0.0
echarts: ^5.4.1
vue: ^2.6.12 || ^3.1.1
peerDependenciesMeta:
'@vue/composition-api':
optional: true
'@vue/runtime-core':
optional: true
dependencies:
echarts: 5.5.0
resize-detector: 0.3.0
vue: 3.4.19(typescript@5.2.2)
vue-demi: 0.13.11(vue@3.4.19)
dev: false
/vue-eslint-parser@9.4.2(eslint@8.57.0):
resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
engines: {node: ^14.17.0 || >=16.0.0}
@ -5106,3 +5162,9 @@ packages:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
dev: true
/zrender@5.5.0:
resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
dependencies:
tslib: 2.3.0
dev: false

3
src/main.ts
Unescape View File

@ -20,9 +20,12 @@ import 'virtual:svg-icons-register'
const app = createApp(App)
// 引入自动注册全局组件脚本
import gloablComponent from '@/components/index'
import 'echarts'
import ECharts from 'vue-echarts';
app.use(gloablComponent)
// 注册仓库
app.use(pinia)
app.component('ECharts',ECharts)
// 安装element插件
app.use(ElementPlus, {
locale: zhCn, //使用中文

67
src/views/portal/LearningPathRecommendations.vue
Unescape View File

@ -1,58 +1,29 @@
<template>
<div>
<svg-icon
@click="changePraise()"
v-if="!flog"
name="dianzan"
width="32px"
height="32px"
/>
<svg-icon
@click="changePraise()"
v-else
name="dianzanred"
width="32px"
height="32px"
/>
<!-- <push-button @click="changePraise()"><div class="a"><img src="/src/assets/images/点赞.png" width="100%" height="100%"></div>点赞呀</push-button> -->
<h1>已被点赞{{ praise }}次</h1>
</div>
<e-charts class="chart" :option="option" />
</template>
<!-- 学习路径推荐 -->
<script lang="ts" setup>
import { ref } from 'vue'
const praise = ref(1000)
const flog = ref(false)
const changePraise = (num = 1) => {
if (!flog.value) {
praise.value++
flog.value = !flog.value
} else {
praise.value--
flog.value = !flog.value
}
}
import { ref } from 'vue';
const option = ref({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
</script>
<style lang="scss" scoped>
.a {
width: 50px;
height: 50px;
// display: none;
}
.a:hover {
width: 50px;
height: 50px;
// display: block;
// background-image: url('/src/assets/images/点赞(1).png');
// background-size: 100% 100%;
}
.push-button {
// width: 50px;
// height: 50px;
// background-color: khaki;
// background-image: url('/src/assets/images/点赞.png');
// background-size: 100% 100%;
.chart {
height: 400px;
}
</style>

565
src/views/portal/index.vue
Unescape View File

@ -3,169 +3,190 @@
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav1">
<ul>
<li>企业入口&nbsp;&nbsp;|</li>
<li>教师入口&nbsp;&nbsp;|</li>
<li>学生入口&nbsp;&nbsp;|</li>
<li>毕业生入口</li>
</ul>
<div class="nav1">
<ul>
<li>企业入口&nbsp;&nbsp;|</li>
<li>教师入口&nbsp;&nbsp;|</li>
<li>学生入口&nbsp;&nbsp;|</li>
<li>毕业生入口</li>
</ul>
</div>
<div class="nav2">
<ul>
<li><a>学生首页</a></li>
<li><a>专业概况</a></li>
<li><a>教学改革</a></li>
<li><a>科学研就</a></li>
<li><a>人才培养</a></li>
<li><a>成果展示</a></li>
<li><a>产教结合</a></li>
<li><a>日常教学</a></li>
<li><a>优秀学生</a></li>
</ul>
</div>
</div>
<div class="nav2">
<ul>
<li><a>学生首页</a></li>
<li><a>专业概况</a></li>
<li><a>教学改革</a></li>
<li><a>科学研就</a></li>
<li><a>人才培养</a></li>
<li><a>成果展示</a></li>
<li><a>产教结合</a></li>
<li><a>日常教学</a></li>
<li><a>优秀学生</a></li>
</ul>
</div>
</div>
<!-- <div class="inco"></div> -->
<h1>知识图谱</h1>
<!-- <p>(专业代码 ：080902H)</p> -->
<p>(专业代码 ：080902H)</p>
</div>
<div class="content">
<div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
<div class="icon"style=" background-image: url('/src/assets/images/bj2.png');
<div class="content">
<el-scrollbar height="1500px">
<div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
<div class="icon" style=" background-image: url('/src/assets/images/bj2.png');
background-size: 100% 100%;">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
<div class="box" >
<p style="font-size: 14px;color: #6B6B6B;" >总学时 ：36小时</p>
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<div class="p">
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
<div class="box">
<p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时</p>
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
</div>
</div>
</div>
</div>
<div class="content1">
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
<div class="content1">
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<div class="p">
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
<div class="box">
<p style="font-size: 14px;">总学时 ：36小时</p>
<p style="font-size: 14px;">总学分 ：2.0分</p>
<p style="font-size: 14px;">章节数 ：10章</p>
<p style="font-size: 14px;">知识点总数 ：33个</p>
<p style="font-size: 14px;">总学分 ：2.0分</p>
<p style="font-size: 14px;">章节数 ：10章</p>
<p style="font-size: 14px;">知识点总数 ：33个</p>
</div>
</div>
<div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
</div>
<div class="icon"style=" background-image: url('/src/assets/images/bj1.png'); ">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
</div>
<div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
<div class="icon"style=" background-image: url('/src/assets/images/bj2.png');
<div class="icon" style=" background-image: url('/src/assets/images/bj2.png');
background-size: 100% 100%;">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"> <img src="/src/assets/images/kc1.png" ></div>
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"> <img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
<div class="box" >
<p style="font-size: 14px;color: #6B6B6B;" >总学时 ：36小时</p>
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<div class="p">
<p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
<div class="box">
<p style="font-size: 14px;color: #6B6B6B;">总学时 ：36小时</p>
<p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
<p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
<p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
</div>
</div>
</div>
</div>
<div class="content1">
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
<div class="content1">
<div class="txt">
<h1>&nbsp;&nbsp;课程简介</h1>
<div class="p">
<p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p></div>
<div class="box">
<!-- <p style="font-size: 14px;">总学时 ：36小时</p>{{userList.}} -->
<p style="font-size: 14px;">总学时 ：36小时</p>
<p style="font-size: 14px;">总学分 ：2.0分</p>
<p style="font-size: 14px;">章节数 ：10章</p>
<p style="font-size: 14px;">知识点总数 ：33个</p>
<p style="font-size: 14px;">总学分 ：2.0分</p>
<p style="font-size: 14px;">章节数 ：10章</p>
<p style="font-size: 14px;">知识点总数 ：33个</p>
</div>
</div>
<div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》 {{ userList.name }}</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
</div>
<div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
<div class="content">
<img src="/src/assets/images/tp.png">
</div>
<h1>《计算机导论》</h1>
<button></button>
</div>
<div class="icon1">
<div class="icon"><img src="/src/assets/images/kc1.png"></div>
<div class="icon"><img src="/src/assets/images/kc2.png"></div>
<div class="icon"><img src="/src/assets/images/kc3.png"></div>
</div>
</div>
</div>
<!-- 底部 -->
</el-scrollbar>
</div>
<!-- 底部 -->
<div class="footer">
<h3>软件工程专业</h3>
<h1>教学一体化平台</h1>
<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>
</div>
<h1>教学一体化平台</h1>
<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>
</div>
<div></div>
<!-- {{ userList }} -->
</template>
// @ts-expect-error
<script lang="ts" setup>
import {} from 'vue'
import axios from 'axios';
import { ref } from 'vue'
import { getUserInfo } from '@/api/user'
const userList = ref<any>([])
const getUserListEvent = async () => {
try {
const res = await getUserInfo()
userList.value = res
console.log(res);
} catch (error) {
console.log(error);
}
}
getUserListEvent()
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* font: 14px/28px "微软雅黑"; */
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* font: 14px/28px "微软雅黑"; */
}
ul {
list-style: none;
}
@ -173,233 +194,261 @@ ul {
a {
text-decoration: none;
}
body {
/* 宽度占浏览器可视区域的宽度 */
width: 100vm;
// position: relative;
// display:flex;
// justify-content:center;i
/* height: 1500px; */
// background-color: #FFFFFF;
}
img{
img {
width: 100%;
height: 100%;
}
// 头
.header{
.header {
width: 100%;
height: 300px;
height: 300px;
background-image: url('/src/assets/images/top.png');
background-size: 100% 100%;
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
}
// 导航栏
.header .nav{
.header .nav {
width: 95%;
height: 100px;
// background-color: #3D78F5;
}
.header .nav1{
.header .nav1 {
float: right;
width: 24%;
height: 10%;
margin-right: 20px;
// background-color: #6759ff;
height: 10%;
margin-right: 20px;
// background-color: #6759ff;
}
.header .nav1 ul li{
.header .nav1 ul li {
float: left;
margin-left: 5px;
line-height: 20px;
color: white;
font-size: 12px;
text-align: center;
// border-right: 1px solid #FFFFFF;
}
.header .nav2{
margin-left: 5px;
line-height: 20px;
color: white;
font-size: 12px;
text-align: center;
// border-right: 1px solid #FFFFFF;
}
.header .nav2 {
float: right;
// padding-right: -20px;
width: 68%;
height: 25%;
height: 25%;
margin-top: 30px;
// margin-right: -260px;
// background-color: #6759ff;
// margin-right: -260px;
// background-color: #6759ff;
}
.header .nav2 ul li{
.header .nav2 ul li {
float: left;
margin-left: 20px;
// line-height: 40px;
color: white;
font-size: 15px;
text-align: center;
margin-left: 20px;
// line-height: 40px;
color: white;
font-size: 15px;
text-align: center;
}
.header .nav2 ul li:hover{
.header .nav2 ul li:hover {
color: #74a5ff;
}
.header .inco{
.header .inco {
float: left;
width: 48%;
height: 65.1%;
margin-left: 80px;
// background-color: #6759ff;
}
.header h1{
.header h1 {
font-size: 50px;
margin-top: 23px;
font-weight:bolder;
font-weight: bolder;
color: #FFFFFF;
float: right;
margin-right: 173px
// float: left;
// margin-left: 779px;
margin-right: 173px // float: left;
// margin-left: 779px;
}
.header p{
.header p {
font-size: 15px;
margin-top: 10px;
margin-top: 102px;
// font-weight:bolder;
color: #FFFFFF;
float: right;
margin-right: 200px;
margin-right: -175px;
}
.logo{
.logo {
width: 15%;
height: 30%;
float: left;
margin-left: 80px;
// background-color: #8974ff;
// background-image: url('/src/assets/images/bj3.png');
// background-size: 100% 100%;
}
// 内容
.content{
.content {
width: 100%;
margin: auto;
}
// .content1 .container{
// width: 80%;
// height: 380px;
// display: flex;
// margin: auto;
// margin-top: 60px;
// }
.content1{
}
.content1 {
width: 100%;
height: 442px;
display: flex;
margin: auto;
margin-top: 60px;
padding: 0 80px 0 80px;
background:linear-gradient(#98BBFF,#A9C6FF,#d5e1f6);
background: linear-gradient(#98BBFF, #A9C6FF, #d5e1f6);
}
.content1 .txt{
.content1 .txt {
width: 22%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
height: 350px;
height: 100%;
margin: auto;
// background-color: #d4e2fe;
}
.content1 .txt h1{
.content1 .txt h1 {
font-size: 20px;
height: 30px;
font-size: 16px;
line-height: 30px;
border-left:3px solid #3374FF;
font-weight:bolder;
border-left: 3px solid #3374FF;
font-weight: bolder;
color: #3374FF;
// margin-top: 30px;
}
.content1 .txt p{
.content1 .txt .p {
height: 178px;
// background-color: #3374FF;
line-height: 23px;
width: 100%;
color: #FFFFFF;
}
.content1 .txt p {
font-size: 17px;
// height: 40px;
// background-color: #3374FF;
// line-height: 25px;
color: #FFFFFF;
}
.content .txt .box{
.content .txt .box {
width: 100%;
// background-color: #8974ff;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
background-color: #98BBFF;
justify-content: space-between;
}
.content1 .icon{
.content1 .icon {
width: 53%;
height: 360px;
height: 84%;
margin: auto;
// background-image: url('/src/assets/images/bj1.png');
background-size: 102% 103.5%;
// background-color: #7f98cb;
}
.content1 .icon h1{
.content1 .icon h1 {
color: white;
font-size: 24px;
font-weight:bolder;
z-index:999;
font-weight: bolder;
z-index: 999;
margin-left: 60px;
margin-top: 20px;
}
.content1 .icon button{
.content1 .icon button {
background-color: #FEC861;
opacity: 0;
width: 73px;
height: 50px;
z-index:999;
z-index: 999;
float: right;
margin-right: 13px;
margin-top: -40px;
}
.content1 .icon button:hover{
.content1 .icon button:hover {
background-color: #FEC861;
opacity: 0.2;
border:none ;
border: none;
}
.content1 .icon .content{
.content1 .icon .content {
width: 87%;
height: 73.8%;
margin: auto;
border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
margin-top: 35px;
background-color: #FFFFFF;
}
.content1 .icon .content img{
.content1 .icon .content img {
width: 95%;
height: 95%;
float: right;
margin-top: 15px;
float: right;
margin-top: 15px;
}
.content1 .icon1{
.content1 .icon1 {
width: 13%;
height: 380px;
height: 86%;
margin: auto;
// background-color: #486aae;
}
.content1 .icon1 .icon{
.content1 .icon1 .icon {
width: 90%;
height: 27%;
// padding-top: 20px;
border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
margin-top: 20px;
box-shadow: 3px 3px 15px rgb(173, 171, 171);
box-shadow: 3px 3px 15px rgb(173, 171, 171);
// margin: auto;
background-color: #A4c3ff;
}
.content1 .icon1 .icon .image{
width: 100%;
height: 100%;
background-size: cover;
image-orientation: 100% 100%;
border-radius: 15px 15px 15px 15px;
// object-fit:cover;
/* 删除图片下方的多余空间 */
}
.content1 .icon .box{
.content1 .icon1 .icon .image {
width: 100%;
height: 100%;
background-size: cover;
image-orientation: 100% 100%;
border-radius: 15px 15px 15px 15px;
// object-fit:cover;
/* 删除图片下方的多余空间 */
}
.content1 .icon .box {
width: 85%;
height: 300px;
float: left;
@ -409,48 +458,42 @@ img{
}
// 尾部
.footer{
.footer {
margin-top: 100px;
width: 100%;
height: 250px;
// position: absolute;
text-align: center;
background-color: #252527;
height: 250px;
// position: absolute;
text-align: center;
background-color: #252527;
}
.footer h3{
.footer h3 {
width: 100%;
// position: absolute;
text-align: center;
font-size: 15px;
padding-top: 40px;
color:#7F9EED;
font-weight:bolder;
}
.footer h1{
// position: absolute;
text-align: center;
font-size: 15px;
padding-top: 40px;
color: #7F9EED;
font-weight: bolder;
}
.footer h1 {
width: 100%;
// position: absolute;
font-family: "kaiti_gb2312";
margin-top: 10px;
font-size: 25px;
color:#7F9EED;
font-weight:bolder;
}
.footer p{
// position: absolute;
font-family: "kaiti_gb2312";
margin-top: 10px;
font-size: 25px;
color: #7F9EED;
font-weight: bolder;
}
.footer p {
width: 100%;
height: 20px;
// position: absolute;
font-family: "kaiti_gb2312";
margin-top: 25px;
font-size: 17px;
color:#7F9EED;
}
// .footer b{
// font-family: "kaiti_gb2312";
// font-size: 13px;
// color:#7F9EED;
// position: absolute;
// margin-top: 174px;
// }
height: 20px;
// position: absolute;
font-family: "kaiti_gb2312";
margin-top: 25px;
font-size: 17px;
color: #7F9EED;
}
</style>

162
src/views/portal/knowledgePointLearning.vue
Unescape View File

@ -1,9 +1,167 @@
<template>
<div>知识点学习</div>
<!-- <div>知识点首页</div> -->
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav1">
<ul>
<li>企业入口&nbsp;&nbsp;|</li>
<li>教师入口&nbsp;&nbsp;|</li>
<li>学生入口&nbsp;&nbsp;|</li>
<li>毕业生入口</li>
</ul>
</div>
<div class="nav2">
<ul>
<li><a>学生首页</a></li>
<li><a>专业概况</a></li>
<li><a>教学改革</a></li>
<li><a>科学研就</a></li>
<li><a>人才培养</a></li>
<li><a>成果展示</a></li>
<li><a>产教结合</a></li>
<li><a>日常教学</a></li>
<li><a>优秀学生</a></li>
</ul>
</div>
</div>
<!-- <div class="inco"></div> -->
<h1>知识图谱</h1>
<p>(专业代码 ：080902H)</p>
</div>
</template>
<script lang="ts" setup>
// import axios from 'axios';
import {} from 'vue'
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* font: 14px/28px "微软雅黑"; */
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
body {
/* 宽度占浏览器可视区域的宽度 */
width: 100vm;
// position: relative;
// display:flex;
// justify-content:center;i
/* height: 1500px; */
// background-color: #FFFFFF;
}
img {
width: 100%;
height: 100%;
}
// 头
.header {
width: 100%;
height: 300px;
background-image: url('/src/assets/images/top.png');
background-size: 100% 100%;
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
}
// 导航栏
.header .nav {
width: 95%;
height: 100px;
// background-color: #3D78F5;
}
.header .nav1 {
float: right;
width: 24%;
height: 10%;
margin-right: 20px;
// background-color: #6759ff;
}
.header .nav1 ul li {
float: left;
margin-left: 5px;
line-height: 20px;
color: white;
font-size: 12px;
text-align: center;
// border-right: 1px solid #FFFFFF;
}
.header .nav2 {
float: right;
// padding-right: -20px;
width: 68%;
height: 25%;
margin-top: 30px;
// margin-right: -260px;
// background-color: #6759ff;
}
.header .nav2 ul li {
float: left;
margin-left: 20px;
// line-height: 40px;
color: white;
font-size: 15px;
text-align: center;
}
.header .nav2 ul li:hover {
color: #74a5ff;
}
.header .inco {
float: left;
width: 48%;
height: 65.1%;
margin-left: 80px;
// background-color: #6759ff;
}
.header h1 {
font-size: 50px;
margin-top: 23px;
font-weight: bolder;
color: #FFFFFF;
float: right;
margin-right: 173px // float: left;
// margin-left: 779px;
}
.header p {
font-size: 15px;
margin-top: 102px;
// font-weight:bolder;
color: #FFFFFF;
float: right;
margin-right: -175px;
}
.logo {
width: 15%;
height: 30%;
float: left;
margin-left: 80px;
}
</style>

Write Preview
Loading…
Cancel
Save