aaaa
6 months ago
parent
b78eadc89d
commit
a86a3ef515
6 changed files with 550 additions and 311 deletions
@ -1,58 +1,29 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<e-charts class="chart" :option="option" /> |
||||||
<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> |
|
||||||
</template> |
</template> |
||||||
<!-- 学习路径推荐 --> |
<!-- 学习路径推荐 --> |
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import { ref } from 'vue' |
import { ref } from 'vue'; |
||||||
const praise = ref(1000) |
const option = ref({ |
||||||
const flog = ref(false) |
xAxis: { |
||||||
const changePraise = (num = 1) => { |
type: 'category', |
||||||
if (!flog.value) { |
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||||
praise.value++ |
}, |
||||||
flog.value = !flog.value |
yAxis: { |
||||||
} else { |
type: 'value' |
||||||
praise.value-- |
}, |
||||||
flog.value = !flog.value |
series: [ |
||||||
|
{ |
||||||
|
data: [150, 230, 224, 218, 135, 147, 260], |
||||||
|
type: 'line' |
||||||
} |
} |
||||||
} |
] |
||||||
|
}); |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.a { |
.chart { |
||||||
width: 50px; |
height: 400px; |
||||||
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%; |
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,9 +1,167 @@ |
|||||||
<template> |
<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> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
|
// import axios from 'axios'; |
||||||
import {} from 'vue' |
import {} from 'vue' |
||||||
|
|
||||||
</script> |
</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