Merge branch 'feature' into main
This commit is contained in:
wanglin2
commit
e093cb1741
File diff suppressed because one or more lines are too long
@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
|
||||||
<link rel="icon" href="./dist/logo.png">
|
<link rel="icon" href="./dist/logo.ico">
|
||||||
<title>思绪思维导图</title>
|
<title>思绪思维导图</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
BIN
web/public/logo.ico
Normal file
BIN
web/public/logo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -1,8 +1,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 2479351 */
|
font-family: "iconfont"; /* Project id 2479351 */
|
||||||
src: url('iconfont.woff2?t=1688536767282') format('woff2'),
|
src: url('iconfont.woff2?t=1689210173189') format('woff2'),
|
||||||
url('iconfont.woff?t=1688536767282') format('woff'),
|
url('iconfont.woff?t=1689210173189') format('woff'),
|
||||||
url('iconfont.ttf?t=1688536767282') format('truetype');
|
url('iconfont.ttf?t=1689210173189') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@ -13,6 +13,38 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconwangzhan:before {
|
||||||
|
content: "\e628";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconcsdn:before {
|
||||||
|
content: "\e608";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconshejiaotubiao-10:before {
|
||||||
|
content: "\e644";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconstar:before {
|
||||||
|
content: "\e7df";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfork:before {
|
||||||
|
content: "\e641";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconxiazai:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconteamwork:before {
|
||||||
|
content: "\e870";
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconshuiyin:before {
|
||||||
|
content: "\e67a";
|
||||||
|
}
|
||||||
|
|
||||||
.iconxmind:before {
|
.iconxmind:before {
|
||||||
content: "\ea57";
|
content: "\ea57";
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
web/src/assets/img/block1.png
Normal file
BIN
web/src/assets/img/block1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
web/src/assets/img/block3.png
Normal file
BIN
web/src/assets/img/block3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
web/src/assets/img/block4.png
Normal file
BIN
web/src/assets/img/block4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
web/src/assets/img/logo2.png
Normal file
BIN
web/src/assets/img/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
web/src/assets/img/split.png
Normal file
BIN
web/src/assets/img/split.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@ -15,7 +15,8 @@
|
|||||||
import Header from './components/Header.vue'
|
import Header from './components/Header.vue'
|
||||||
import Sidebar from './components/Sidebar.vue'
|
import Sidebar from './components/Sidebar.vue'
|
||||||
import CatalogBar from './components/CatalogBar.vue'
|
import CatalogBar from './components/CatalogBar.vue'
|
||||||
import 'highlight.js/styles/atom-one-dark.css'
|
// import 'highlight.js/styles/atom-one-dark.css'
|
||||||
|
import 'highlight.js/styles/github.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -103,7 +104,7 @@ export default {
|
|||||||
a {
|
a {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #42b883;
|
color: #1ea59a;
|
||||||
transition: color 0.25s;
|
transition: color 0.25s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@ -225,7 +225,7 @@ export default {
|
|||||||
left: -10px;
|
left: -10px;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #42b883;
|
background-color: #1ea59a;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
|
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
|
||||||
background-color 0.5s;
|
background-color 0.5s;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="headerContainer">
|
<div class="headerContainer">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="../../../assets/img/logo.png" alt="">
|
<img src="../../../assets/img/logo2.png" alt="">
|
||||||
SimpleMindMap
|
SimpleMindMap
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -130,7 +130,7 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #42b883;
|
color: #1ea59a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -108,7 +108,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: #42b883;
|
color: #1ea59a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
41
web/src/pages/Index/Index.vue
Normal file
41
web/src/pages/Index/Index.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexContainer">
|
||||||
|
<Header></Header>
|
||||||
|
<Block1></Block1>
|
||||||
|
<Block2></Block2>
|
||||||
|
<Block3></Block3>
|
||||||
|
<Block4></Block4>
|
||||||
|
<Block5></Block5>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from './components/Header.vue'
|
||||||
|
import Block1 from './components/Block1.vue'
|
||||||
|
import Block2 from './components/Block2.vue'
|
||||||
|
import Block3 from './components/Block3.vue'
|
||||||
|
import Block4 from './components/Block4.vue'
|
||||||
|
import Block5 from './components/Block5.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Block1,
|
||||||
|
Block2,
|
||||||
|
Block3,
|
||||||
|
Block4,
|
||||||
|
Block5
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.indexContainer {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
206
web/src/pages/Index/components/Block1.vue
Normal file
206
web/src/pages/Index/components/Block1.vue
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<div class="block1Container" :style="{ height: height + 'px' }">
|
||||||
|
<div class="blockContent">
|
||||||
|
<div class="infoBox">
|
||||||
|
<div class="blockTitle">Simple mind map</div>
|
||||||
|
<Split></Split>
|
||||||
|
<div class="infoList">
|
||||||
|
<p class="infoRow">是一个思维导图库</p>
|
||||||
|
<p class="infoRow">同时也是一个思维导图软件</p>
|
||||||
|
<p class="infoRow">开源、免费、强大...</p>
|
||||||
|
</div>
|
||||||
|
<div class="desc">
|
||||||
|
无论你是开发者，还是使用者，只要喜欢思维导图，都能在这个项目里找到你需要的。
|
||||||
|
</div>
|
||||||
|
<div class="btnBox">
|
||||||
|
<div class="btn" @click="useOnline">在线使用</div>
|
||||||
|
<div class="btn btn2" @click="jumpDoc">开发文档</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="picBox">
|
||||||
|
<div class="animation1"></div>
|
||||||
|
<div class="animation2"></div>
|
||||||
|
<div class="animation3"></div>
|
||||||
|
<div class="pic"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Split from './Split.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Split
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener('resize', this.onResize)
|
||||||
|
this.onResize()
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.onResize)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onResize() {
|
||||||
|
this.height = window.innerHeight
|
||||||
|
},
|
||||||
|
|
||||||
|
useOnline() {
|
||||||
|
this.$router.push('/')
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpDoc() {
|
||||||
|
this.$router.push('/doc/zh/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.block1Container {
|
||||||
|
background-color: #f0f9fa;
|
||||||
|
border-radius: 0 0 0 450px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.blockContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.infoBox {
|
||||||
|
.blockTitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1e3547;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoList {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.infoRow {
|
||||||
|
font-size: 45px;
|
||||||
|
color: #1e3547;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #1ea59a;
|
||||||
|
border-color: #1ea59a;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn2 {
|
||||||
|
background-color: #f5828b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picBox {
|
||||||
|
position: relative;
|
||||||
|
.pic {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-image: url('../../../assets/img/block1.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation1 {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border: 7px solid #f5828b;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
right: -50px;
|
||||||
|
bottom: 86px;
|
||||||
|
animation-name: zoom1;
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
box-shadow: 0 12px 50px 0 rgba(0, 0, 0, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation2 {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #1ea59a;
|
||||||
|
box-shadow: 0 20px 30px 0 rgba(48, 61, 114, 0.4);
|
||||||
|
position: absolute;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
top: -60px;
|
||||||
|
right: 60px;
|
||||||
|
animation: spin 2s infinite alternate;
|
||||||
|
bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation3 {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #25233a;
|
||||||
|
box-shadow: 0 20px 30px 0 rgba(245, 130, 139, 0.4);
|
||||||
|
position: absolute;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
bottom: 50px;
|
||||||
|
left: 0px;
|
||||||
|
animation: spin 3s infinite alternate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoom1 {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
263
web/src/pages/Index/components/Block2.vue
Normal file
263
web/src/pages/Index/components/Block2.vue
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<div class="block2Container">
|
||||||
|
<div class="blockContent">
|
||||||
|
<div class="blockTitle">为什么选择Simple mind map？</div>
|
||||||
|
<div class="dataList">
|
||||||
|
<div class="dataItem" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<div class="iconBox">
|
||||||
|
<span class="icon iconfont" :class="[item.icon]"></span>
|
||||||
|
</div>
|
||||||
|
<div class="dataValue">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="desc">
|
||||||
|
如果你是开发者：Simple mind
|
||||||
|
map提供了一个功能完善的 js 思维导图库，不依赖任何框架，你可以使用它来快速完成Web思维导图产品的开发。
|
||||||
|
</div>
|
||||||
|
<div class="desc">
|
||||||
|
如果你是使用者：Simple mind
|
||||||
|
map提供了一个完整的思维导图软件，支持在线和客户端两种使用方式，所有功能完全免费。
|
||||||
|
</div>
|
||||||
|
<div class="functionList">
|
||||||
|
<div
|
||||||
|
class="functionItem"
|
||||||
|
v-for="(item, index) in functionList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="icon iconfont" :class="[item.icon]"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">{{ item.name }}</div>
|
||||||
|
<div class="value">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [
|
||||||
|
{
|
||||||
|
icon: 'iconstar',
|
||||||
|
value: 'Github star数量450+'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconfork',
|
||||||
|
value: 'Github fork数量100+'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconxiazai',
|
||||||
|
value: 'npm总下载次数10000+'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconteamwork',
|
||||||
|
value: '代码贡献者6+'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
functionList: [
|
||||||
|
{
|
||||||
|
icon: 'iconjingzi',
|
||||||
|
name: '主题',
|
||||||
|
value: '内置多种主题，允许高度自定义样式，支持注册新主题。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconjiegou',
|
||||||
|
name: '结构',
|
||||||
|
value:
|
||||||
|
'支持常见的逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图结构。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconjianpan',
|
||||||
|
name: '快捷键',
|
||||||
|
value: '常用操作支持快捷键，方便使用。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconzitixiahuaxian',
|
||||||
|
name: '富文本',
|
||||||
|
value:
|
||||||
|
'节点支持普通文本和富文本两种类型，通过富文本可以创建样式丰富的节点文本内容。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconimage',
|
||||||
|
name: '图片',
|
||||||
|
value: '选中任一节点，选择上传图片，让内容达到图文并茂。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'icongaikuozonglan',
|
||||||
|
name: '概要',
|
||||||
|
value: '补充表述几个节点之间的关系。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconxiaolian',
|
||||||
|
name: '图标',
|
||||||
|
value: '通过添加图标来让节点内容更丰富。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconchaolianjie',
|
||||||
|
name: '超链接',
|
||||||
|
value: '节点可插入超链接，鼠标点击即可实现跳转。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconflow-Mark',
|
||||||
|
name: '备注',
|
||||||
|
value: '详细的内容可以放在备注中，节点内显得更简单明了。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconbiaoqian',
|
||||||
|
name: '标签',
|
||||||
|
value: '如果添加带颜色的标签，来突出要表达的重点。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconlianjiexian',
|
||||||
|
name: '关联线',
|
||||||
|
value: '通过添加关联线来表明节点之间的关联关系。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconmouseL',
|
||||||
|
name: '拖动',
|
||||||
|
value: '画布和节点都可以进行拖动。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'icondaohang',
|
||||||
|
name: '导航器',
|
||||||
|
value: '通过导航器可以方便知道当前画布处于思维导图的哪个部分。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'icondaochu',
|
||||||
|
name: '导入导出',
|
||||||
|
value: '支持多种文件格式的导入和导出。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconshuiyin',
|
||||||
|
name: '水印',
|
||||||
|
value: '内置支持水印功能，防止隐私泄露。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconwithdraw',
|
||||||
|
name: '前进后退',
|
||||||
|
value: '不小心误操作删除或修改内容支持一键撤回或恢复。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconfuhao-dagangshu',
|
||||||
|
name: '大纲',
|
||||||
|
value: '根据大纲编辑思维导图，让内容更详细也不容易出错。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'iconshezhi',
|
||||||
|
name: '丰富的设置',
|
||||||
|
value: '提供了丰富的功能设置，可以选择合适你的操作行为。'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.block2Container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.blockContent {
|
||||||
|
padding: 100px 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
|
||||||
|
.dataList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
.dataItem {
|
||||||
|
box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconBox {
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: rgba(30, 165, 154, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataValue {
|
||||||
|
color: #1e3547;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blockTitle {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e3547;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.functionList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 60px;
|
||||||
|
.functionItem {
|
||||||
|
display: flex;
|
||||||
|
width: 30%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 50px;
|
||||||
|
margin-right: 24px;
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.name {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #1e3547;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #828f99;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
102
web/src/pages/Index/components/Block3.vue
Normal file
102
web/src/pages/Index/components/Block3.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="block3Container">
|
||||||
|
<div class="blockContent">
|
||||||
|
<div class="picBox"></div>
|
||||||
|
<div class="infoBox">
|
||||||
|
<div class="infoTitle">客户端</div>
|
||||||
|
<div class="info">支持Windows、Mac、Linux平台。</div>
|
||||||
|
<div class="info">
|
||||||
|
在线版数据默认保存在浏览器缓存里，同时也可以操作电脑本地文件，但是在线版受限于网络环境，访问可能比较慢，多个文件切换也不够方便，所以提供客户端版本，功能简单但不简陋。
|
||||||
|
</div>
|
||||||
|
<div class="btnList">
|
||||||
|
<div class="btn">
|
||||||
|
<a href="https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3" target="_blank">百度网盘下载</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn btn2">
|
||||||
|
<a href="https://github.com/wanglin2/mind-map/releases" target="_blank">Github下载</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.block3Container {
|
||||||
|
background-color: #f0f9fa;
|
||||||
|
border-radius: 0 0 350px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.blockContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
height: 520px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.picBox {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-image: url('../../../assets/img/block3.png');
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox {
|
||||||
|
.infoTitle {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e3547;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 44px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #1ea59a;
|
||||||
|
border-color: #1ea59a;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn2 {
|
||||||
|
background-color: #f5828b;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
140
web/src/pages/Index/components/Block4.vue
Normal file
140
web/src/pages/Index/components/Block4.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<div class="block4Container">
|
||||||
|
<div class="blockContent">
|
||||||
|
<div class="infoBox">
|
||||||
|
<div class="infoTitle">JavaScript库</div>
|
||||||
|
<div class="info">
|
||||||
|
simple-mind-map是一个简单&强大的Web思维导图库，不依赖任何特定框架，可以帮助你快速开发思维导图产品。
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
使用非常简单，只需三步即可渲染出一个思维导图：
|
||||||
|
</div>
|
||||||
|
<div class="info">第一步：安装</div>
|
||||||
|
<div class="codeBox">
|
||||||
|
<pre><code class="language-bash" ref="code1">
|
||||||
|
npm i simple-mind-map
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="info">第二步：引入</div>
|
||||||
|
<div class="codeBox">
|
||||||
|
<pre><code class="language-javascript" ref="code2">
|
||||||
|
import MindMap from "simple-mind-map"
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="info">第三步：实例化</div>
|
||||||
|
<div class="codeBox">
|
||||||
|
<pre><code class="language-javascript" ref="code3">
|
||||||
|
const mindMap = new MindMap({
|
||||||
|
// 提供一个宽高不为0的容器元素
|
||||||
|
el: document.getElementById('mindMapContainer'),
|
||||||
|
// 思维导图数据
|
||||||
|
data: {
|
||||||
|
"data": {
|
||||||
|
"text": "根节点"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="btnList">
|
||||||
|
<div class="btn" @click="jumpDoc">查看更多</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="picBox"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import hljs from 'highlight.js/lib/core'
|
||||||
|
import javascript from 'highlight.js/lib/languages/javascript'
|
||||||
|
import bash from 'highlight.js/lib/languages/bash'
|
||||||
|
import 'highlight.js/styles/github.css'
|
||||||
|
hljs.registerLanguage('javascript', javascript)
|
||||||
|
hljs.registerLanguage('bash', bash)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
hljs.highlightElement(this.$refs.code1)
|
||||||
|
hljs.highlightElement(this.$refs.code2)
|
||||||
|
hljs.highlightElement(this.$refs.code3)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jumpDoc() {
|
||||||
|
this.$router.push('/doc/zh/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.block4Container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.blockContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
|
||||||
|
.picBox {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-image: url('../../../assets/img/block4.png');
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox {
|
||||||
|
margin-right: 50px;
|
||||||
|
|
||||||
|
.infoTitle {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e3547;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codeBox {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 44px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #1ea59a;
|
||||||
|
border-color: #1ea59a;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
229
web/src/pages/Index/components/Block5.vue
Normal file
229
web/src/pages/Index/components/Block5.vue
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<div class="block5Container">
|
||||||
|
<div class="blockContent">
|
||||||
|
<div class="infoBox">
|
||||||
|
<div class="infoTitle">街角小林出品</div>
|
||||||
|
<div class="infoDesc">
|
||||||
|
男，90后，六年+前端开发工程师，热爱前端、写作、开源。
|
||||||
|
</div>
|
||||||
|
<div class="linkBtnList">
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a href="https://github.com/wanglin2" target="_blank">
|
||||||
|
<span class="linkBtnIcon iconfont icongithub"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a href="https://juejin.cn/user/325111170756279" target="_blank">
|
||||||
|
<span class="linkBtnIcon text">掘金</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a
|
||||||
|
href="https://segmentfault.com/u/jiejiaoxiaolin/articles"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span class="linkBtnIcon text">思否</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a href="http://lxqnsys.com/" target="_blank">
|
||||||
|
<span class="linkBtnIcon iconfont iconwangzhan"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a
|
||||||
|
href="https://www.zhihu.com/people/wang-lin-49-43-65"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span class="linkBtnIcon iconfont iconshejiaotubiao-10"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="linkBtn">
|
||||||
|
<a
|
||||||
|
href="https://blog.csdn.net/sinat_33488770?type=blog"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span class="linkBtnIcon iconfont iconcsdn"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="linkBox">
|
||||||
|
<div class="linkTitle">更多作品</div>
|
||||||
|
<div class="linkList">
|
||||||
|
<div class="linkItem" v-for="item in linkList" :key="item.name">
|
||||||
|
<a :href="item.url" target="_blank">{{ item.name }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
linkList: [
|
||||||
|
{
|
||||||
|
name: 'CodeRun',
|
||||||
|
url: 'https://github.com/wanglin2/code-run'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'TinyWhiteboard',
|
||||||
|
url: 'https://github.com/wanglin2/tiny_whiteboard'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mark.js',
|
||||||
|
url: 'https://github.com/wanglin2/markjs'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'WebMapEngine',
|
||||||
|
url: 'https://github.com/wanglin2/web_map_demo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'SimpleNoviceGuide',
|
||||||
|
url: 'https://github.com/wanglin2/simple-novice-guide'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'CanvasEditor',
|
||||||
|
url: 'https://github.com/wanglin2/canvas-editor-demo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'JsonTreeView',
|
||||||
|
url: 'https://github.com/wanglin2/json-tree-view'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'SimpleFlowChart',
|
||||||
|
url: 'https://github.com/wanglin2/simple-flow-chart'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'VideoTimeLine',
|
||||||
|
url: 'https://github.com/wanglin2/VideoTimeLine'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'MarkdownEditor',
|
||||||
|
url: 'https://github.com/wanglin2/markdown_editor_sync_scroll_demo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AssociationLine',
|
||||||
|
url: 'https://github.com/wanglin2/AssociationLineDemo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'HandPaintedStyle',
|
||||||
|
url: 'https://github.com/wanglin2/handPaintedStyle'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.block5Container {
|
||||||
|
background-color: #f0f9fa;
|
||||||
|
border-radius: 450px 0 0 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.blockContent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
height: 350px;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 100px;
|
||||||
|
|
||||||
|
.infoBox {
|
||||||
|
.infoTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e3547;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoDesc {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkBtnList {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.linkBtn {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f0f9fa;
|
||||||
|
border: 2px solid #dbf1f1;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.5s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #1ea59a;
|
||||||
|
|
||||||
|
.linkBtnIcon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkBtnIcon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1e3547;
|
||||||
|
transition: all 0.5s;
|
||||||
|
|
||||||
|
&.text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkBox {
|
||||||
|
margin-left: 150px;
|
||||||
|
.linkTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e3547;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.linkItem {
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
167
web/src/pages/Index/components/Header.vue
Normal file
167
web/src/pages/Index/components/Header.vue
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<div class="indexHeaderContainer" :class="{ active: active }">
|
||||||
|
<div class="headerContent">
|
||||||
|
<div class="logoBox">
|
||||||
|
<span class="logo"></span>
|
||||||
|
<span class="title">SimpleMindMap</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav">
|
||||||
|
<div
|
||||||
|
class="navItem"
|
||||||
|
@click="jumpTop"
|
||||||
|
:class="{
|
||||||
|
active: activeTab === 'home'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
首页
|
||||||
|
</div>
|
||||||
|
<div class="navItem" @click="useOnline">在线使用</div>
|
||||||
|
<div
|
||||||
|
class="navItem"
|
||||||
|
@click="jumpClient"
|
||||||
|
:class="{
|
||||||
|
active: activeTab === 'client'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
客户端
|
||||||
|
</div>
|
||||||
|
<div class="navItem" @click="jumpDoc">开发文档</div>
|
||||||
|
<div class="navItem">
|
||||||
|
<a href="https://github.com/wanglin2/mind-map" target="_blank"
|
||||||
|
>Github</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: false,
|
||||||
|
activeTab: 'home',
|
||||||
|
clientEl: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener('scroll', this.onScroll)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.clientEl = document.querySelector('.block3Container')
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('scroll', this.onScroll)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onScroll() {
|
||||||
|
this.active = window.scrollY > 0
|
||||||
|
let offsetTop = this.clientEl.offsetTop
|
||||||
|
if (
|
||||||
|
window.scrollY + window.innerHeight >= offsetTop &&
|
||||||
|
window.scrollY <= offsetTop + this.clientEl.offsetHeight
|
||||||
|
) {
|
||||||
|
this.activeTab = 'client'
|
||||||
|
} else {
|
||||||
|
this.activeTab = 'home'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
useOnline() {
|
||||||
|
this.$router.push('/')
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpDoc() {
|
||||||
|
this.$router.push('/doc/zh/')
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpTop() {
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpClient() {
|
||||||
|
window.scrollTo(0, this.clientEl.offsetTop - 76)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.indexHeaderContainer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 76px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
background-color: transparent;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerContent {
|
||||||
|
height: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.logoBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-image: url('../../../assets/img/logo2.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #000;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.navItem {
|
||||||
|
color: #828f99;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #828f99;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1ea59a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
web/src/pages/Index/components/Split.vue
Normal file
16
web/src/pages/Index/components/Split.vue
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div class="splitContainer"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.splitContainer {
|
||||||
|
width: 122px;
|
||||||
|
height: 15px;
|
||||||
|
background-image: url('../../../assets/img/split.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
|||||||
import EditPage from '@/pages/Edit/Index'
|
import EditPage from '@/pages/Edit/Index'
|
||||||
import DocPage from '@/pages/Doc/Index'
|
import DocPage from '@/pages/Doc/Index'
|
||||||
import routerList from '@/pages/Doc/routerList'
|
import routerList from '@/pages/Doc/routerList'
|
||||||
|
import IndexPage from '@/pages/Index/Index'
|
||||||
|
|
||||||
// 处理没有翻译的章节路由
|
// 处理没有翻译的章节路由
|
||||||
const handleRouterList = () => {
|
const handleRouterList = () => {
|
||||||
@ -26,6 +27,11 @@ handleRouterList()
|
|||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/index',
|
||||||
|
name: 'Index',
|
||||||
|
component: IndexPage
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Edit',
|
name: 'Edit',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user