commit
58fb85ba3a
6 changed files with 1507 additions and 623 deletions
@ -1,134 +1,781 @@ |
|||||||
<template> |
<template> |
||||||
<!-- <e-charts id="main" class="chart" /> --> |
<!-- 头部 --> |
||||||
<!-- <div class="container" ref="containerRef"> |
<div class="header"> |
||||||
<h1>Scroll down to load more content</h1> |
<div class="logo"></div> |
||||||
<div class="content"> |
<div class="nav"> |
||||||
<p v-for="item in content" :key="item.id">{{ item.text }}</p> |
<div class="nav1"> |
||||||
</div> |
<ul> |
||||||
<button v-if="showButton" @click="scrollDown">加载更多</button> |
<li>企业入口 |</li> |
||||||
</div> --> |
<li>教师入口 |</li> |
||||||
|
<li>学生入口 |</li> |
||||||
<!-- <div class="container" @mouseover="startTimer" @mouseleave="clearTimer"> |
<li>毕业生入口</li> |
||||||
<h1>Hover for 5 seconds to scroll down and load more content</h1> |
</ul> |
||||||
<div class="content" ref="contentRef"> |
|
||||||
<p v-for="item in content" :key="item.id">{{ item.text }}</p> |
</div> |
||||||
<p v-if="!allContentLoaded">Loading more content...</p> |
<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> |
||||||
</div> --> |
<!-- <div class="inco"></div> --> |
||||||
|
<h1>学习路径推荐</h1> |
||||||
|
<!-- <p>(专业代码 ：080902H)</p> --> |
||||||
|
</div> |
||||||
|
<!-- 内容学习路径推荐d3 --> |
||||||
|
<div class="content"> |
||||||
|
<div class="subnav"> |
||||||
|
<h1>xxx课程</h1> |
||||||
|
</div> |
||||||
|
<div class="container"></div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 底部 --> |
||||||
|
<div class="footer"> |
||||||
|
<h3>软件工程专业</h3> |
||||||
|
<h1>教学一体化平台</h1> |
||||||
|
<p>关于我们 | 联系我们 | 服务协议 |
||||||
|
</p> |
||||||
|
<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br> |
||||||
|
违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
<!-- 学习路径推荐 --> |
|
||||||
|
|
||||||
<script lang="ts" > |
<script lang="ts" > |
||||||
|
import * as d3 from 'd3'; |
||||||
|
// import { onMounted } from 'vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'courseHomepage', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
svgArea:null, |
||||||
|
links:[], |
||||||
|
nodes:[], |
||||||
|
nodesName:[], |
||||||
|
linksName:[], |
||||||
|
simulation:null, |
||||||
|
scale:1, |
||||||
|
width:800, |
||||||
|
height:560, |
||||||
|
colorList:['#FD7623','#3388B1','#D82952','#F3D737','#409071','#D64E52'], |
||||||
|
testGraph: { |
||||||
|
"nodes": [ |
||||||
|
{ "id": "Myriel", "group": 1 }, |
||||||
|
{ "id": "Napoleon", "group": 1 }, |
||||||
|
{ "id": "Mlle.Baptistine", "group": 1 }, |
||||||
|
{ "id": "Mme.Magloire", "group": 1 }, |
||||||
|
{ "id": "CountessdeLo", "group": 1 }, |
||||||
|
{ "id": "Geborand", "group": 1 }, |
||||||
|
{ "id": "Champtercier", "group": 1 }, |
||||||
|
{ "id": "Cravatte", "group": 1 }, |
||||||
|
{ "id": "Count", "group": 1 }, |
||||||
|
{ "id": "OldMan", "group": 1 }, |
||||||
|
{ "id": "Labarre", "group": 2 }, |
||||||
|
{ "id": "Valjean", "group": 2 }, |
||||||
|
// { "id": "Marguerite", "group": 3 }, |
||||||
|
// { "id": "Mme.deR", "group": 2 }, |
||||||
|
// { "id": "Isabeau", "group": 2 }, |
||||||
|
// { "id": "Gervais", "group": 2 }, |
||||||
|
// { "id": "Tholomyes", "group": 3 }, |
||||||
|
// { "id": "Listolier", "group": 3 }, |
||||||
|
// { "id": "Fameuil", "group": 3 }, |
||||||
|
// { "id": "Blacheville", "group": 3 }, |
||||||
|
// { "id": "Favourite", "group": 3 }, |
||||||
|
// { "id": "Dahlia", "group": 3 }, |
||||||
|
// { "id": "Zephine", "group": 3 }, |
||||||
|
// { "id": "Fantine", "group": 3 }, |
||||||
|
// { "id": "Mme.Thenardier", "group": 4 }, |
||||||
|
// { "id": "Thenardier", "group": 4 }, |
||||||
|
// { "id": "Cosette", "group": 5 }, |
||||||
|
// { "id": "Javert", "group": 4 }, |
||||||
|
// { "id": "Fauchelevent", "group": 0 }, |
||||||
|
// { "id": "Bamatabois", "group": 2 }, |
||||||
|
// { "id": "Perpetue", "group": 3 }, |
||||||
|
// { "id": "Simplice", "group": 2 }, |
||||||
|
// { "id": "Scaufflaire", "group": 2 }, |
||||||
|
// { "id": "Woman1", "group": 2 }, |
||||||
|
// { "id": "Judge", "group": 2 }, |
||||||
|
// { "id": "Champmathieu", "group": 2 }, |
||||||
|
// { "id": "Brevet", "group": 2 }, |
||||||
|
// { "id": "Chenildieu", "group": 2 }, |
||||||
|
// { "id": "Cochepaille", "group": 2 }, |
||||||
|
// { "id": "Pontmercy", "group": 4 }, |
||||||
|
// { "id": "Boulatruelle", "group": 6 }, |
||||||
|
// { "id": "Eponine", "group": 4 }, |
||||||
|
// { "id": "Anzelma", "group": 4 }, |
||||||
|
// { "id": "Woman2", "group": 5 }, |
||||||
|
// { "id": "MotherInnocent", "group": 0 }, |
||||||
|
// { "id": "Gribier", "group": 0 }, |
||||||
|
// { "id": "Jondrette", "group": 7 }, |
||||||
|
// { "id": "Mme.Burgon", "group": 7 }, |
||||||
|
// { "id": "Gavroche", "group": 8 }, |
||||||
|
// { "id": "Gillenormand", "group": 5 }, |
||||||
|
// { "id": "Magnon", "group": 5 }, |
||||||
|
// { "id": "Mlle.Gillenormand", "group": 5 }, |
||||||
|
// { "id": "Mme.Pontmercy", "group": 5 }, |
||||||
|
// { "id": "Mlle.Vaubois", "group": 5 }, |
||||||
|
// { "id": "Lt.Gillenormand", "group": 5 }, |
||||||
|
// { "id": "Marius", "group": 8 }, |
||||||
|
// { "id": "BaronessT", "group": 5 }, |
||||||
|
// { "id": "Mabeuf", "group": 8 }, |
||||||
|
// { "id": "Enjolras", "group": 8 }, |
||||||
|
// { "id": "Combeferre", "group": 8 }, |
||||||
|
// { "id": "Prouvaire", "group": 8 }, |
||||||
|
// { "id": "Feuilly", "group": 8 }, |
||||||
|
// { "id": "Courfeyrac", "group": 8 }, |
||||||
|
// { "id": "Bahorel", "group": 8 }, |
||||||
|
// { "id": "Bossuet", "group": 8 }, |
||||||
|
// { "id": "Joly", "group": 8 }, |
||||||
|
// { "id": "Grantaire", "group": 8 }, |
||||||
|
// { "id": "MotherPlutarch", "group": 9 }, |
||||||
|
// { "id": "Gueulemer", "group": 4 }, |
||||||
|
// { "id": "Babet", "group": 4 }, |
||||||
|
// { "id": "Claquesous", "group": 4 }, |
||||||
|
// { "id": "Montparnasse", "group": 4 }, |
||||||
|
// { "id": "Toussaint", "group": 5 }, |
||||||
|
// { "id": "Child1", "group": 10 }, |
||||||
|
// { "id": "Child2", "group": 10 }, |
||||||
|
// { "id": "Brujon", "group": 4 }, |
||||||
|
// { "id": "Mme.Hucheloup", "group": 8 } |
||||||
|
], |
||||||
|
"links": [ |
||||||
|
{ "source": "Napoleon", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 }, |
||||||
|
// { "source": "Mme.Magloire", "target": "Myriel", "value": 10 }, |
||||||
|
// { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 }, |
||||||
|
// { "source": "CountessdeLo", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Geborand", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Champtercier", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Cravatte", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Count", "target": "Myriel", "value": 2 }, |
||||||
|
// { "source": "OldMan", "target": "Myriel", "value": 1 }, |
||||||
|
// { "source": "Valjean", "target": "Labarre", "value": 1 }, |
||||||
|
// { "source": "Valjean", "target": "Mme.Magloire", "value": 3 }, |
||||||
|
// { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 }, |
||||||
|
// { "source": "Valjean", "target": "Myriel", "value": 5 }, |
||||||
|
// { "source": "Marguerite", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Mme.deR", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Isabeau", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Gervais", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Listolier", "target": "Tholomyes", "value": 4 }, |
||||||
|
// { "source": "Fameuil", "target": "Tholomyes", "value": 4 }, |
||||||
|
// { "source": "Fameuil", "target": "Listolier", "value": 4 }, |
||||||
|
// { "source": "Blacheville", "target": "Tholomyes", "value": 4 }, |
||||||
|
// { "source": "Blacheville", "target": "Listolier", "value": 4 }, |
||||||
|
// { "source": "Blacheville", "target": "Fameuil", "value": 4 }, |
||||||
|
// { "source": "Favourite", "target": "Tholomyes", "value": 3 }, |
||||||
|
// { "source": "Favourite", "target": "Listolier", "value": 3 }, |
||||||
|
// { "source": "Favourite", "target": "Fameuil", "value": 3 }, |
||||||
|
// { "source": "Favourite", "target": "Blacheville", "value": 4 }, |
||||||
|
// { "source": "Dahlia", "target": "Tholomyes", "value": 3 }, |
||||||
|
// { "source": "Dahlia", "target": "Listolier", "value": 3 }, |
||||||
|
// { "source": "Dahlia", "target": "Fameuil", "value": 3 }, |
||||||
|
// { "source": "Dahlia", "target": "Blacheville", "value": 3 }, |
||||||
|
// { "source": "Dahlia", "target": "Favourite", "value": 5 }, |
||||||
|
// { "source": "Zephine", "target": "Tholomyes", "value": 3 }, |
||||||
|
// { "source": "Zephine", "target": "Listolier", "value": 3 }, |
||||||
|
// { "source": "Zephine", "target": "Fameuil", "value": 3 }, |
||||||
|
// { "source": "Zephine", "target": "Blacheville", "value": 3 }, |
||||||
|
// { "source": "Zephine", "target": "Favourite", "value": 4 }, |
||||||
|
// { "source": "Zephine", "target": "Dahlia", "value": 4 }, |
||||||
|
// { "source": "Fantine", "target": "Tholomyes", "value": 3 }, |
||||||
|
// { "source": "Fantine", "target": "Listolier", "value": 3 }, |
||||||
|
// { "source": "Fantine", "target": "Fameuil", "value": 3 }, |
||||||
|
// { "source": "Fantine", "target": "Blacheville", "value": 3 }, |
||||||
|
// { "source": "Fantine", "target": "Favourite", "value": 4 }, |
||||||
|
// { "source": "Fantine", "target": "Dahlia", "value": 4 }, |
||||||
|
// { "source": "Fantine", "target": "Zephine", "value": 4 }, |
||||||
|
// { "source": "Fantine", "target": "Marguerite", "value": 2 }, |
||||||
|
// { "source": "Fantine", "target": "Valjean", "value": 9 }, |
||||||
|
// { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 }, |
||||||
|
// { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 }, |
||||||
|
// { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 }, |
||||||
|
// { "source": "Thenardier", "target": "Fantine", "value": 1 }, |
||||||
|
// { "source": "Thenardier", "target": "Valjean", "value": 12 }, |
||||||
|
// { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 }, |
||||||
|
// { "source": "Cosette", "target": "Valjean", "value": 31 }, |
||||||
|
// { "source": "Cosette", "target": "Tholomyes", "value": 1 }, |
||||||
|
// { "source": "Cosette", "target": "Thenardier", "value": 1 }, |
||||||
|
// { "source": "Javert", "target": "Valjean", "value": 17 }, |
||||||
|
// { "source": "Javert", "target": "Fantine", "value": 5 }, |
||||||
|
// { "source": "Javert", "target": "Thenardier", "value": 5 }, |
||||||
|
// { "source": "Javert", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Javert", "target": "Cosette", "value": 1 }, |
||||||
|
// { "source": "Fauchelevent", "target": "Valjean", "value": 8 }, |
||||||
|
// { "source": "Fauchelevent", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Bamatabois", "target": "Fantine", "value": 1 }, |
||||||
|
// { "source": "Bamatabois", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Bamatabois", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Perpetue", "target": "Fantine", "value": 1 }, |
||||||
|
// { "source": "Simplice", "target": "Perpetue", "value": 2 }, |
||||||
|
// { "source": "Simplice", "target": "Valjean", "value": 3 }, |
||||||
|
// { "source": "Simplice", "target": "Fantine", "value": 2 }, |
||||||
|
// { "source": "Simplice", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Scaufflaire", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Woman1", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Woman1", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Judge", "target": "Valjean", "value": 3 }, |
||||||
|
// { "source": "Judge", "target": "Bamatabois", "value": 2 }, |
||||||
|
// { "source": "Champmathieu", "target": "Valjean", "value": 3 }, |
||||||
|
// { "source": "Champmathieu", "target": "Judge", "value": 3 }, |
||||||
|
// { "source": "Champmathieu", "target": "Bamatabois", "value": 2 }, |
||||||
|
// { "source": "Brevet", "target": "Judge", "value": 2 }, |
||||||
|
// { "source": "Brevet", "target": "Champmathieu", "value": 2 }, |
||||||
|
// { "source": "Brevet", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Brevet", "target": "Bamatabois", "value": 1 }, |
||||||
|
// { "source": "Chenildieu", "target": "Judge", "value": 2 }, |
||||||
|
// { "source": "Chenildieu", "target": "Champmathieu", "value": 2 }, |
||||||
|
// { "source": "Chenildieu", "target": "Brevet", "value": 2 }, |
||||||
|
// { "source": "Chenildieu", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Chenildieu", "target": "Bamatabois", "value": 1 }, |
||||||
|
// { "source": "Cochepaille", "target": "Judge", "value": 2 }, |
||||||
|
// { "source": "Cochepaille", "target": "Champmathieu", "value": 2 }, |
||||||
|
// { "source": "Cochepaille", "target": "Brevet", "value": 2 }, |
||||||
|
// { "source": "Cochepaille", "target": "Chenildieu", "value": 2 }, |
||||||
|
// { "source": "Cochepaille", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Cochepaille", "target": "Bamatabois", "value": 1 }, |
||||||
|
// { "source": "Pontmercy", "target": "Thenardier", "value": 1 }, |
||||||
|
// { "source": "Boulatruelle", "target": "Thenardier", "value": 1 }, |
||||||
|
// { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 }, |
||||||
|
// { "source": "Eponine", "target": "Thenardier", "value": 3 }, |
||||||
|
// { "source": "Anzelma", "target": "Eponine", "value": 2 }, |
||||||
|
// { "source": "Anzelma", "target": "Thenardier", "value": 2 }, |
||||||
|
// { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Woman2", "target": "Valjean", "value": 3 }, |
||||||
|
// { "source": "Woman2", "target": "Cosette", "value": 1 }, |
||||||
|
// { "source": "Woman2", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 }, |
||||||
|
// { "source": "MotherInnocent", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Gribier", "target": "Fauchelevent", "value": 2 }, |
||||||
|
// { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 }, |
||||||
|
// { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 }, |
||||||
|
// { "source": "Gavroche", "target": "Thenardier", "value": 1 }, |
||||||
|
// { "source": "Gavroche", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Gavroche", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Gillenormand", "target": "Cosette", "value": 3 }, |
||||||
|
// { "source": "Gillenormand", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Magnon", "target": "Gillenormand", "value": 1 }, |
||||||
|
// { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 }, |
||||||
|
// { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 }, |
||||||
|
// { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 }, |
||||||
|
// { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 }, |
||||||
|
// { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 }, |
||||||
|
// { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 }, |
||||||
|
// { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 }, |
||||||
|
// { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 }, |
||||||
|
// { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 }, |
||||||
|
// { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 }, |
||||||
|
// { "source": "Marius", "target": "Gillenormand", "value": 12 }, |
||||||
|
// { "source": "Marius", "target": "Pontmercy", "value": 1 }, |
||||||
|
// { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 }, |
||||||
|
// { "source": "Marius", "target": "Cosette", "value": 21 }, |
||||||
|
// { "source": "Marius", "target": "Valjean", "value": 19 }, |
||||||
|
// { "source": "Marius", "target": "Tholomyes", "value": 1 }, |
||||||
|
// { "source": "Marius", "target": "Thenardier", "value": 2 }, |
||||||
|
// { "source": "Marius", "target": "Eponine", "value": 5 }, |
||||||
|
// { "source": "Marius", "target": "Gavroche", "value": 4 }, |
||||||
|
// { "source": "BaronessT", "target": "Gillenormand", "value": 1 }, |
||||||
|
// { "source": "BaronessT", "target": "Marius", "value": 1 }, |
||||||
|
// { "source": "Mabeuf", "target": "Marius", "value": 1 }, |
||||||
|
// { "source": "Mabeuf", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Mabeuf", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Enjolras", "target": "Marius", "value": 7 }, |
||||||
|
// { "source": "Enjolras", "target": "Gavroche", "value": 7 }, |
||||||
|
// { "source": "Enjolras", "target": "Javert", "value": 6 }, |
||||||
|
// { "source": "Enjolras", "target": "Mabeuf", "value": 1 }, |
||||||
|
// { "source": "Enjolras", "target": "Valjean", "value": 4 }, |
||||||
|
// { "source": "Combeferre", "target": "Enjolras", "value": 15 }, |
||||||
|
// { "source": "Combeferre", "target": "Marius", "value": 5 }, |
||||||
|
// { "source": "Combeferre", "target": "Gavroche", "value": 6 }, |
||||||
|
// { "source": "Combeferre", "target": "Mabeuf", "value": 2 }, |
||||||
|
// { "source": "Prouvaire", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Prouvaire", "target": "Enjolras", "value": 4 }, |
||||||
|
// { "source": "Prouvaire", "target": "Combeferre", "value": 2 }, |
||||||
|
// { "source": "Feuilly", "target": "Gavroche", "value": 2 }, |
||||||
|
// { "source": "Feuilly", "target": "Enjolras", "value": 6 }, |
||||||
|
// { "source": "Feuilly", "target": "Prouvaire", "value": 2 }, |
||||||
|
// { "source": "Feuilly", "target": "Combeferre", "value": 5 }, |
||||||
|
// { "source": "Feuilly", "target": "Mabeuf", "value": 1 }, |
||||||
|
// { "source": "Feuilly", "target": "Marius", "value": 1 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Marius", "value": 9 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Enjolras", "value": 17 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Combeferre", "value": 13 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Gavroche", "value": 7 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Feuilly", "value": 6 }, |
||||||
|
// { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 }, |
||||||
|
// { "source": "Bahorel", "target": "Combeferre", "value": 5 }, |
||||||
|
// { "source": "Bahorel", "target": "Gavroche", "value": 5 }, |
||||||
|
// { "source": "Bahorel", "target": "Courfeyrac", "value": 6 }, |
||||||
|
// { "source": "Bahorel", "target": "Mabeuf", "value": 2 }, |
||||||
|
// { "source": "Bahorel", "target": "Enjolras", "value": 4 }, |
||||||
|
// { "source": "Bahorel", "target": "Feuilly", "value": 3 }, |
||||||
|
// { "source": "Bahorel", "target": "Prouvaire", "value": 2 }, |
||||||
|
// { "source": "Bahorel", "target": "Marius", "value": 1 }, |
||||||
|
// { "source": "Bossuet", "target": "Marius", "value": 5 }, |
||||||
|
// { "source": "Bossuet", "target": "Courfeyrac", "value": 12 }, |
||||||
|
// { "source": "Bossuet", "target": "Gavroche", "value": 5 }, |
||||||
|
// { "source": "Bossuet", "target": "Bahorel", "value": 4 }, |
||||||
|
// { "source": "Bossuet", "target": "Enjolras", "value": 10 }, |
||||||
|
// { "source": "Bossuet", "target": "Feuilly", "value": 6 }, |
||||||
|
// { "source": "Bossuet", "target": "Prouvaire", "value": 2 }, |
||||||
|
// { "source": "Bossuet", "target": "Combeferre", "value": 9 }, |
||||||
|
// { "source": "Bossuet", "target": "Mabeuf", "value": 1 }, |
||||||
|
// { "source": "Bossuet", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Joly", "target": "Bahorel", "value": 5 }, |
||||||
|
// { "source": "Joly", "target": "Bossuet", "value": 7 }, |
||||||
|
// { "source": "Joly", "target": "Gavroche", "value": 3 }, |
||||||
|
// { "source": "Joly", "target": "Courfeyrac", "value": 5 }, |
||||||
|
// { "source": "Joly", "target": "Enjolras", "value": 5 }, |
||||||
|
// { "source": "Joly", "target": "Feuilly", "value": 5 }, |
||||||
|
// { "source": "Joly", "target": "Prouvaire", "value": 2 }, |
||||||
|
// { "source": "Joly", "target": "Combeferre", "value": 5 }, |
||||||
|
// { "source": "Joly", "target": "Mabeuf", "value": 1 }, |
||||||
|
// { "source": "Joly", "target": "Marius", "value": 2 }, |
||||||
|
// { "source": "Grantaire", "target": "Bossuet", "value": 3 }, |
||||||
|
// { "source": "Grantaire", "target": "Enjolras", "value": 3 }, |
||||||
|
// { "source": "Grantaire", "target": "Combeferre", "value": 1 }, |
||||||
|
// { "source": "Grantaire", "target": "Courfeyrac", "value": 2 }, |
||||||
|
// { "source": "Grantaire", "target": "Joly", "value": 2 }, |
||||||
|
// { "source": "Grantaire", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Grantaire", "target": "Bahorel", "value": 1 }, |
||||||
|
// { "source": "Grantaire", "target": "Feuilly", "value": 1 }, |
||||||
|
// { "source": "Grantaire", "target": "Prouvaire", "value": 1 }, |
||||||
|
// { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 }, |
||||||
|
// { "source": "Gueulemer", "target": "Thenardier", "value": 5 }, |
||||||
|
// { "source": "Gueulemer", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Gueulemer", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Gueulemer", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Gueulemer", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Babet", "target": "Thenardier", "value": 6 }, |
||||||
|
// { "source": "Babet", "target": "Gueulemer", "value": 6 }, |
||||||
|
// { "source": "Babet", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Babet", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Babet", "target": "Javert", "value": 2 }, |
||||||
|
// { "source": "Babet", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Babet", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Claquesous", "target": "Thenardier", "value": 4 }, |
||||||
|
// { "source": "Claquesous", "target": "Babet", "value": 4 }, |
||||||
|
// { "source": "Claquesous", "target": "Gueulemer", "value": 4 }, |
||||||
|
// { "source": "Claquesous", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 }, |
||||||
|
// { "source": "Claquesous", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Claquesous", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Claquesous", "target": "Enjolras", "value": 1 }, |
||||||
|
// { "source": "Montparnasse", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Montparnasse", "target": "Babet", "value": 2 }, |
||||||
|
// { "source": "Montparnasse", "target": "Gueulemer", "value": 2 }, |
||||||
|
// { "source": "Montparnasse", "target": "Claquesous", "value": 2 }, |
||||||
|
// { "source": "Montparnasse", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Montparnasse", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Montparnasse", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Montparnasse", "target": "Thenardier", "value": 1 }, |
||||||
|
// { "source": "Toussaint", "target": "Cosette", "value": 2 }, |
||||||
|
// { "source": "Toussaint", "target": "Javert", "value": 1 }, |
||||||
|
// { "source": "Toussaint", "target": "Valjean", "value": 1 }, |
||||||
|
// { "source": "Child1", "target": "Gavroche", "value": 2 }, |
||||||
|
// { "source": "Child2", "target": "Gavroche", "value": 2 }, |
||||||
|
// { "source": "Child2", "target": "Child1", "value": 3 }, |
||||||
|
// { "source": "Brujon", "target": "Babet", "value": 3 }, |
||||||
|
// { "source": "Brujon", "target": "Gueulemer", "value": 3 }, |
||||||
|
// { "source": "Brujon", "target": "Thenardier", "value": 3 }, |
||||||
|
// { "source": "Brujon", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Brujon", "target": "Eponine", "value": 1 }, |
||||||
|
// { "source": "Brujon", "target": "Claquesous", "value": 1 }, |
||||||
|
// { "source": "Brujon", "target": "Montparnasse", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 }, |
||||||
|
// { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 } |
||||||
|
] |
||||||
|
// "links":[] |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// .then(function(response){ |
||||||
|
// console.log(response) |
||||||
|
// }) |
||||||
|
// .catch(function(error){ |
||||||
|
// console.log(error) |
||||||
|
// }) |
||||||
|
this.initGraph(this.testGraph); |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initGraph(data: { |
||||||
|
nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue'; |
||||||
|
source: string; target: string; value: number; |
||||||
|
}[]; |
||||||
|
}) { |
||||||
|
const _this = this; |
||||||
|
const links = data.links; |
||||||
|
const nodes = data.nodes; |
||||||
|
// const links = data.links.map((d: object | null) => Object.create(d)); |
||||||
|
// const nodes = data.nodes.map((d: object | null) => Object.create(d)); |
||||||
|
|
||||||
|
const simulation = d3.forceSimulation(nodes) |
||||||
|
.force("link", d3.forceLink(links).id((d: { id: any; }) => d.id)) |
||||||
|
.force("collide",d3.forceCollide().radius(()=> 30) ) |
||||||
|
.force("charge", d3.forceManyBody().strength(-30)) |
||||||
|
.force("center", d3.forceCenter(_this.width / 2, _this.height / 2)); |
||||||
|
|
||||||
|
const svg = d3.select(".container") |
||||||
|
.append("svg") |
||||||
|
.attr("viewBox", `0 0 ${_this.width} ${_this.height}`); |
||||||
|
svg.call(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) |
||||||
|
.join("line") |
||||||
|
.attr("stroke-width", (d: { value: number; }) => Math.sqrt(d.value)) |
||||||
|
.attr("class", "link"); |
||||||
|
|
||||||
|
const node = g.append("g") |
||||||
|
.selectAll("circle") |
||||||
|
.data(nodes) |
||||||
|
.join("circle") |
||||||
|
.attr("r", 40) |
||||||
|
.attr("class","node") |
||||||
|
.attr("fill", _this.color) |
||||||
|
.on("click",_this.queryTest) |
||||||
|
.call(_this.drag(simulation)); |
||||||
|
|
||||||
|
node.append("title") |
||||||
|
.text((d: { id: any; }) => d.id); |
||||||
|
|
||||||
|
const nodeNameText = g.append("g") |
||||||
|
.selectAll("text") |
||||||
|
.data(nodes) |
||||||
|
.join("text") |
||||||
|
.text(function(d: { id: any; }){ |
||||||
|
return d.id |
||||||
|
}) |
||||||
|
.attr("fill","white") |
||||||
|
.attr("dx",function () { |
||||||
|
return this.getBoundingClientRect().width/2*(-1) |
||||||
|
}) |
||||||
|
.attr("dy",50) |
||||||
|
.attr("class","node-name") |
||||||
|
|
||||||
|
node.on("mouseover", function (d, i) { |
||||||
|
d3.select(this) |
||||||
|
.attr("stroke", "white") // 添加白色边框 |
||||||
|
.attr("stroke-width", 5); // 设置边框宽度 |
||||||
|
}) |
||||||
|
.on("mouseout", function (d, i) { |
||||||
|
d3.select(this) |
||||||
|
.attr("stroke", "none"); // 移出时恢复原始样式 |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
simulation.on("tick", () => { |
||||||
|
link |
||||||
|
.attr("x1", (d: { source: { x: any; }; }) => d.source.x) |
||||||
|
.attr("y1", (d: { source: { y: any; }; }) => d.source.y) |
||||||
|
.attr("x2", (d: { target: { x: any; }; }) => d.target.x) |
||||||
|
.attr("y2", (d: { target: { y: any; }; }) => d.target.y); |
||||||
|
|
||||||
|
node |
||||||
|
.attr("cx", (d: { x: any; }) => d.x) |
||||||
|
.attr("cy", (d: { y: any; }) => d.y); |
||||||
|
|
||||||
|
nodeNameText |
||||||
|
.attr("x", (d: { x: any; }) => d.x) |
||||||
|
.attr("y", (d: { y: any; })=> d.y); |
||||||
|
}); |
||||||
|
}, |
||||||
|
updateGraph(data: { links: any[]; }){ |
||||||
|
// var _this = this |
||||||
|
const links = data.links.map((d: object | null)=>Object.create(d)); |
||||||
|
const nodes = data.nodes.map((d: object | null)=>Object.create(d)); |
||||||
|
}, |
||||||
|
color(d: { group: string | number; }) { |
||||||
|
return this.colorList[d.group] |
||||||
|
// const scale = d3.scaleOrdinal(d3.schemeCategory10); |
||||||
|
// return (d: { group: any; }) => scale(d.group); |
||||||
|
}, |
||||||
|
drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; 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) { |
||||||
|
d3.event.subject.fx = d3.event.x; |
||||||
|
d3.event.subject.fy = d3.event.y; |
||||||
|
} |
||||||
|
|
||||||
|
function dragended(event: { active: any; }) { |
||||||
|
if (!event.active) simulation.alphaTarget(0); |
||||||
|
d3.event.subject.fx = null; |
||||||
|
d3.event.subject.fy = null; |
||||||
|
} |
||||||
|
|
||||||
|
return d3.drag() |
||||||
|
.on("start", dragstarted) |
||||||
|
.on("drag", dragged) |
||||||
|
.on("end", dragended); |
||||||
|
}, |
||||||
|
queryTest(d: { id: any; }){ |
||||||
|
// var _this = this |
||||||
|
console.log(d.id) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
// import { onMounted, ref, reactive } from 'vue'; |
|
||||||
|
|
||||||
// export default { |
|
||||||
// setup() { |
|
||||||
// const containerRef = ref(null); |
|
||||||
// const visibleContent = ref([]); |
|
||||||
// const content = reactive([ |
|
||||||
// { id: 1, text: 'Content 1' }, |
|
||||||
// { id: 2, text: 'Content 2' }, |
|
||||||
// { id: 3, text: 'Content 3' }, |
|
||||||
// { id: 4, text: 'Content 4' }, |
|
||||||
// { id: 5, text: 'Content 5' }, |
|
||||||
// { id: 6, text: 'Content 6' }, |
|
||||||
// { id: 7, text: 'Content 7' }, |
|
||||||
// { id: 8, text: 'Content 8' }, |
|
||||||
// { id: 9, text: 'Content 9' }, |
|
||||||
// { id: 10, text: 'Content 10' } |
|
||||||
// ]); |
|
||||||
|
|
||||||
// const showButton = ref(true); // 控制按钮显示与隐藏 |
|
||||||
|
|
||||||
// const scrollDown = () => { |
|
||||||
// const container = containerRef.value; |
|
||||||
// container.scrollTo({ |
|
||||||
// top: container.scrollHeight, |
|
||||||
// behavior: 'smooth' |
|
||||||
// }); |
|
||||||
// loadMore(); |
|
||||||
// }; |
|
||||||
|
|
||||||
// const loadMore = () => { |
|
||||||
// const startIndex = visibleContent.value.length; |
|
||||||
// const endIndex = startIndex + 3; // 每次加载3个 |
|
||||||
|
|
||||||
// // 将指定范围的内容添加到可见内容列表中 |
|
||||||
// visibleContent.value = [...visibleContent.value, ...content.slice(startIndex, endIndex)]; |
|
||||||
|
|
||||||
// // 检查是否加载完所有内容 |
|
||||||
// if (visibleContent.value.length >= content.length) { |
|
||||||
// showButton.value = false; // 隐藏按钮 |
|
||||||
// } |
|
||||||
// }; |
|
||||||
|
|
||||||
// onMounted(() => { |
|
||||||
// const container = containerRef.value; |
|
||||||
// container.addEventListener('scroll', handleScroll); |
|
||||||
// }); |
|
||||||
|
|
||||||
// const handleScroll = () => { |
|
||||||
// const container = containerRef.value; |
|
||||||
// const scrollPosition = container.scrollTop + container.clientHeight; |
|
||||||
// const scrollHeight = container.scrollHeight; |
|
||||||
|
|
||||||
// // 判断是否滑动到底部 |
|
||||||
// if (scrollPosition === scrollHeight) { |
|
||||||
// showButton.value = true; // 显示按钮 |
|
||||||
// } |
|
||||||
// }; |
|
||||||
|
|
||||||
// return { |
|
||||||
// containerRef, |
|
||||||
// visibleContent, |
|
||||||
// showButton, |
|
||||||
// scrollDown, |
|
||||||
// content |
|
||||||
// }; |
|
||||||
// } |
|
||||||
// }; |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
/* 添加一些样式 */ |
* { |
||||||
|
margin: 0; |
||||||
// .container { |
padding: 0; |
||||||
// width: 100%; |
/* box-sizing: border-box; */ |
||||||
// height: 100vh; |
/* font: 14px/28px "微软雅黑"; */ |
||||||
// overflow-y: auto; |
} |
||||||
// display: flex; |
|
||||||
// flex-direction: column; |
ul { |
||||||
// justify-content: center; |
list-style: none; |
||||||
// align-items: center; |
} |
||||||
// background-color: lightgray; |
|
||||||
// } |
a { |
||||||
|
text-decoration: none; |
||||||
// .container .content { |
} |
||||||
// margin-top: 20px; |
|
||||||
// padding: 10px; |
body { |
||||||
// border: 1px solid gray; |
/* 宽度占浏览器可视区域的宽度 */ |
||||||
// background-color: white; |
width: 100vm; |
||||||
// } |
margin: 0px; |
||||||
// .container { |
// position: relative; |
||||||
// width: 100px; |
// display:flex; |
||||||
// height: 100px; |
// justify-content:center;i |
||||||
// // overflow-y: auto; |
/* height: 1500px; */ |
||||||
// // display: flex; |
// background-color: #FFFFFF; |
||||||
// // flex-direction: column; |
} |
||||||
// // justify-content: center; |
|
||||||
// // align-items: center; |
img { |
||||||
// background-color: lightgray; |
width: 100%; |
||||||
// } |
height: 100%; |
||||||
|
} |
||||||
// .content { |
|
||||||
// margin-top: 20px; |
// 头 |
||||||
// padding: 10px; |
.header { |
||||||
// border: 1px solid gray; |
width: 100%; |
||||||
// background-color: white; |
height: 300px; |
||||||
// } |
background-image: url('/src/assets/images/top.png'); |
||||||
// .chart { |
background-size: 100% 100%; |
||||||
// height: 400px; |
// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff); |
||||||
// width: 100%; |
|
||||||
// } |
|
||||||
|
} |
||||||
|
|
||||||
|
// 导航栏 |
||||||
|
.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; |
||||||
|
} |
||||||
|
// 内容 |
||||||
|
.content{ |
||||||
|
margin-top: 10; |
||||||
|
width: 100%; |
||||||
|
height: 900px; |
||||||
|
background-color: #7F9EED; |
||||||
|
} |
||||||
|
.subnav { |
||||||
|
width: 100%; |
||||||
|
margin: auto; |
||||||
|
margin-top: 50px; |
||||||
|
height: 50px; |
||||||
|
// background-color: #7F9EED; |
||||||
|
} |
||||||
|
|
||||||
|
.subnav h1 { |
||||||
|
border-bottom: 4px solid #0052FF; |
||||||
|
font-size: 20px; |
||||||
|
width: 10%; |
||||||
|
height: 35px; |
||||||
|
margin: auto; |
||||||
|
font-weight: bolder; |
||||||
|
color: #0052FF; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
// d3 |
||||||
|
.container{ |
||||||
|
width: 1000px; |
||||||
|
height: 700px; |
||||||
|
// border: 1px solid #2c3e50; |
||||||
|
border-radius:8px; |
||||||
|
margin-top: 40px; |
||||||
|
margin-left: auto; |
||||||
|
// border-radius: 50%; |
||||||
|
margin-right: auto; |
||||||
|
border: #79c4f3; |
||||||
|
background-color: #79c4f3 ; |
||||||
|
// background: #79c4f3 repeating-linear-gradient(30deg, |
||||||
|
// hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, |
||||||
|
// transparent 0, transparent 30px); |
||||||
|
} |
||||||
|
.node{ |
||||||
|
stroke:#fff; |
||||||
|
stroke-width:1; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.node:hover{ |
||||||
|
stroke-width:5; |
||||||
|
} |
||||||
|
|
||||||
|
.nodeName{ |
||||||
|
fill:white; |
||||||
|
} |
||||||
|
|
||||||
|
// 尾部 |
||||||
|
.footer { |
||||||
|
margin-top: 100px; |
||||||
|
// padding-bottom: 0%; |
||||||
|
width: 100%; |
||||||
|
height: 250px; |
||||||
|
// position: absolute; |
||||||
|
text-align: center; |
||||||
|
background-color: #252527; |
||||||
|
} |
||||||
|
|
||||||
|
.footer h3 { |
||||||
|
width: 100%; |
||||||
|
// 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 { |
||||||
|
width: 100%; |
||||||
|
height: 20px; |
||||||
|
// position: absolute; |
||||||
|
font-family: "kaiti_gb2312"; |
||||||
|
margin-top: 25px; |
||||||
|
font-size: 17px; |
||||||
|
color: #7F9EED; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue