提交 59f718dc 编写于 作者: E Evan

update: 优化首页,添加更新时间轴

上级 4bde9afc
...@@ -3967,9 +3967,9 @@ ...@@ -3967,9 +3967,9 @@
"dev": true "dev": true
}, },
"element-ui": { "element-ui": {
"version": "2.5.4", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.5.4.tgz", "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.7.0.tgz",
"integrity": "sha512-VlyPZ1A2VtVJdnu9nUV+u/eGhKaEF+IoENbDgNlUza0Slj6Jb0bC9mzK95JK2g7QSe8YXUWhQVy+d2kZUE2oKQ==", "integrity": "sha512-FalWzOmT/K4w4C/8tw2kGvzzQnRJ5MqEvSL5rEKNa081PFGIcUS9exyVpYrNPKF8ua/W6qaqrXPC6DQ8sNcmOQ==",
"requires": { "requires": {
"async-validator": "~1.8.1", "async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.0",
...@@ -14221,9 +14221,9 @@ ...@@ -14221,9 +14221,9 @@
} }
}, },
"vue": { "vue": {
"version": "2.6.7", "version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.7.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-g7ADfQ82QU+j6F/bVDioVQf2ccIMYLuR4E8ev+RsDBlmwRkhGO3HhgF4PF9vpwjdPpxyb1zzLur2nQ2oIMAMEg==" "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
}, },
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "2.0.3", "version": "2.0.3",
...@@ -14366,9 +14366,9 @@ ...@@ -14366,9 +14366,9 @@
} }
}, },
"vue-template-compiler": { "vue-template-compiler": {
"version": "2.6.7", "version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.7.tgz", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
"integrity": "sha512-ZjxJLr6Lw2gj6aQGKwBWTxVNNd28/qggIdwvr5ushrUHUvqgbHD0xusOVP2yRxT4pX3wRIJ2LfxjgFT41dEtoQ==", "integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
"dev": true, "dev": true,
"requires": { "requires": {
"de-indent": "^1.0.2", "de-indent": "^1.0.2",
......
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"element-ui": "^2.5.4", "element-ui": "^2.7.0",
"mavon-editor": "^2.6.17", "mavon-editor": "^2.6.17",
"vue": "^2.5.2", "vue": "^2.6.10",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.1.0" "vuex": "^3.1.0"
}, },
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
"vue-jest": "^1.0.2", "vue-jest": "^1.0.2",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.6.10",
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0", "webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1", "webpack-dev-server": "^2.9.1",
......
<template> <template>
<div class="index-body"> <div class="index-body">
<div class="home"> <div class="home">
<div class="header-div">
<div style="height: 150px"></div>
<carousel></carousel> <carousel></carousel>
<quick-nav style="float: right;margin-top: -450px;margin-right: 480px"></quick-nav>
</div>
<Card></Card> <Card></Card>
<!--<quick-nav></quick-nav>-->
<slogan></slogan> <slogan></slogan>
<Footer></Footer> <Footer></Footer>
</div> </div>
...@@ -25,7 +28,7 @@ ...@@ -25,7 +28,7 @@
<style scoped> <style scoped>
.home { .home {
width: 960px; width: 990px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: -20px; margin-top: -20px;
...@@ -36,4 +39,11 @@ ...@@ -36,4 +39,11 @@
/*background-size: cover;*/ /*background-size: cover;*/
background-position: center; background-position: center;
} }
.header-div {
padding-bottom: 20px;
padding-left: 5px;
background-color: #ffe55c;
background: url("../../assets/img/bg/bg4.jpg");
}
</style> </style>
<template> <template>
<div style="width: 80%; margin-left: auto; margin-right: auto; height: 350px"> <el-card class="box-card">
<div style="position: relative"> <div slot="header" class="clearfix">
<el-card class="box-card"> <span>最近更新</span>
<div slot="header" class="clearfix"> <el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
<span>最新内容</span>
<el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'新增内容 ' + o }}
</div>
</el-card>
<el-card class="box-card-2">
<div slot="header" class="clearfix">
<span>最新内容</span>
<el-button style="float: right; padding: 3px 0" type="text">处理</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'新增内容 ' + o }}
</div>
</el-card>
</div> </div>
</div> <div class="block">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-card>
</template> </template>
<script> <script>
...@@ -30,40 +48,10 @@ ...@@ -30,40 +48,10 @@
</script> </script>
<style scoped> <style scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card { .box-card {
margin-top: 50px; margin-top: 5px;
margin-left: auto; width: 988px;
margin-right: auto; height: 970px;
margin-bottom: 50px; text-align: left;
float: left;
width: 47%;
position: absolute;
}
.box-card-2 {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
right: 0;
float: right;
width: 47%;
position: absolute;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
} }
</style> </style>
<template> <template>
<el-card class="card-carousel">
<el-carousel class="push" :interval="4000" arrow="always"> <el-carousel class="push" :interval="4000" arrow="always">
<el-carousel-item v-for="item in items" :key="item"> <el-carousel-item v-for="item in items" :key="item">
<a :href=item.link target="_blank"> <a :href=item.link target="_blank">
...@@ -7,35 +8,40 @@ ...@@ -7,35 +8,40 @@
<h3>{{item.title}}</h3> <h3>{{item.title}}</h3>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</el-card>
</template> </template>
<style> <style>
.el-carousel__item h3 { .el-carousel__item h3 {
color: #375669; color: black;
font-size: 14px; font-size: 15px;
/*line-height: 300px;*/ /*line-height: 300px;*/
margin: 0px; bottom: 40px;
float: left;
position: relative;
}
.card-carousel {
/*margin: 0 auto;*/
margin-left: 20px;
width: 680px;
height: 320px;
} }
.push { .push {
padding:20px 0; /*margin-left: -15px;*/
width: 900px;
height: 373px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
} }
.el-carousel__item:nth-child(2n) { .el-carousel__item:nth-child(2n) {
background: linear-gradient(black, gainsboro); background: black;
} }
.el-carousel__item:nth-child(2n+1) { .el-carousel__item:nth-child(2n+1) {
background: linear-gradient(black,gainsboro); background: black;
} }
.carousel_img { .carousel_img {
height: 92%; height: 100%;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
......
<template> <template>
<div id="pro-div"> <div class="quick-nav">
<img src="../../assets/img/icon/icon2.png" alt="" width="300" height="280"> <img src="../../assets/img/icon/icon2.png" alt="" class="monster">
<img src="../../assets/img/icon/icon5.png" alt="" style="width: 300px; margin-left: 500px"> <!--<img src="../../assets/img/icon/icon5.png" alt="" class="readme">-->
<img src="../../assets/img/icon/icon7.png" alt="" style=""> <img src="../../assets/img/icon/icon7.png" alt="">
</div> </div>
</template> </template>
...@@ -13,10 +13,26 @@ ...@@ -13,10 +13,26 @@
</script> </script>
<style scoped> <style scoped>
.quick-nav {
width: 303px;
height: 318px;
background-color: transparent;
}
.monster {
width: 280px;
height: 260px;
/*position: absolute;*/
top: 150px;
left: 700px;
}
#pro-div{ .readme {
height: 320px; width: 180px;
/*background-image: url("../../assets/img/bg/topo.png"), linear-gradient(70deg, #313375, #696cd2);*/ height: 170px;
} /*position: absolute;*/
top: 200px;
left: 400px;
}
</style> </style>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
height: 150px; height: 150px;
background-color: #222; background-color: #222;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 5px;
} }
.slogan { .slogan {
......
...@@ -19,6 +19,7 @@ Vue.use(mavonEditor) ...@@ -19,6 +19,7 @@ Vue.use(mavonEditor)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(App),
router, router,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
......
wj-vue/static/img/carousel/how2j.png

37.5 KB | W: | H:

wj-vue/static/img/carousel/how2j.png

35.7 KB | W: | H:

wj-vue/static/img/carousel/how2j.png
wj-vue/static/img/carousel/how2j.png
wj-vue/static/img/carousel/how2j.png
wj-vue/static/img/carousel/how2j.png
  • 2-up
  • Swipe
  • Onion skin
wj-vue/static/img/carousel/vue.png

40.9 KB | W: | H:

wj-vue/static/img/carousel/vue.png

39.8 KB | W: | H:

wj-vue/static/img/carousel/vue.png
wj-vue/static/img/carousel/vue.png
wj-vue/static/img/carousel/vue.png
wj-vue/static/img/carousel/vue.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册