mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 14:04:47 +08:00
新增文档首页
This commit is contained in:
wanglin2
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<link rel="icon" href="./dist/logo.png">
|
||||
<link rel="icon" href="./dist/logo.ico">
|
||||
<title>思绪思维导图</title>
|
||||
</head>
|
||||
<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-family: "iconfont"; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1688536767282') format('woff2'),
|
||||
url('iconfont.woff?t=1688536767282') format('woff'),
|
||||
url('iconfont.ttf?t=1688536767282') format('truetype');
|
||||
src: url('iconfont.woff2?t=1689210173189') format('woff2'),
|
||||
url('iconfont.woff?t=1689210173189') format('woff'),
|
||||
url('iconfont.ttf?t=1689210173189') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,38 @@
|
||||
-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 {
|
||||
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 Sidebar from './components/Sidebar.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 {
|
||||
components: {
|
||||
@@ -103,7 +104,7 @@ export default {
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: #42b883;
|
||||
color: #1ea59a;
|
||||
transition: color 0.25s;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -225,7 +225,7 @@ export default {
|
||||
left: -10px;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background-color: #42b883;
|
||||
background-color: #1ea59a;
|
||||
border-radius: 4px;
|
||||
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
|
||||
background-color 0.5s;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="headerContainer">
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<img src="../../../assets/img/logo.png" alt="">
|
||||
<img src="../../../assets/img/logo2.png" alt="">
|
||||
SimpleMindMap
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: #42b883;
|
||||
color: #1ea59a;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@ export default {
|
||||
}
|
||||
|
||||
&.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 DocPage from '@/pages/Doc/Index'
|
||||
import routerList from '@/pages/Doc/routerList'
|
||||
import IndexPage from '@/pages/Index/Index'
|
||||
|
||||
// 处理没有翻译的章节路由
|
||||
const handleRouterList = () => {
|
||||
@@ -26,6 +27,11 @@ handleRouterList()
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/index',
|
||||
name: 'Index',
|
||||
component: IndexPage
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Edit',
|
||||
|
||||
Reference in New Issue
Block a user