aaaa
6 months ago
parent
b78eadc89d
commit
a86a3ef515
6 changed files with 550 additions and 311 deletions
@ -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> |
||||
|
||||
@ -1,9 +1,167 @@ |
||||
<template> |
||||
<div>知识点学习</div> |
||||
<!-- <div>知识点首页</div> --> |
||||
<div class="header"> |
||||
<div class="logo"></div> |
||||
<div class="nav"> |
||||
<div class="nav1"> |
||||
<ul> |
||||
<li>企业入口 |</li> |
||||
<li>教师入口 |</li> |
||||
<li>学生入口 |</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> |
||||
|
||||
Loading…
Reference in new issue