blog
This commit is contained in:
zxm
parent
36059ef651
commit
4254dce562
|
|
@ -1,38 +1,57 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<Layout>
|
||||
<!--header begin-->
|
||||
<blogHead></blogHead>
|
||||
<!--header end-->
|
||||
<!--header begin-->
|
||||
<blogHead></blogHead>
|
||||
<!--header end-->
|
||||
|
||||
<!--context begin-->
|
||||
<router-view/>
|
||||
<!--context end-->
|
||||
<!--context begin-->
|
||||
<div class="cont">
|
||||
<div class="content clearfix">
|
||||
<div class="blog-left">
|
||||
<router-view/>
|
||||
</div>
|
||||
<blogRight></blogRight>
|
||||
</div>
|
||||
</div>
|
||||
<!--right begin-->
|
||||
|
||||
<!--right end-->
|
||||
<!--context end-->
|
||||
|
||||
<blog-bottom></blog-bottom>
|
||||
</Layout>
|
||||
<BackTop></BackTop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import blogHead from "./components/header/head"
|
||||
import blogRight from "./components/right/right"
|
||||
import blogBottom from "./components/bottom/bottom"
|
||||
|
||||
|
||||
export default {
|
||||
components:{blogHead},
|
||||
name: 'App',
|
||||
data(){
|
||||
return {}
|
||||
export default {
|
||||
components: {
|
||||
blogHead,
|
||||
blogRight,
|
||||
blogBottom
|
||||
},
|
||||
name: 'App',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #28181d;
|
||||
margin-top: 0px;
|
||||
}
|
||||
@import '../static/css/blog-index.css'; /*引入公共样式*/
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #28181d;
|
||||
margin-top: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,234 +0,0 @@
|
|||
<template>
|
||||
<div id="HelloWorld" class="layout">
|
||||
<!--{{msg}}<br/>
|
||||
{{ 1 + 1 }}<br/>
|
||||
{{name()}}<br/>
|
||||
{{message}}<br/>
|
||||
<input v-model="message" placeholder="edit me">
|
||||
|
||||
<button value="" @click="selectHome()">路由</button>-->
|
||||
<Layout>
|
||||
<!--<Header width="auto" style="height: 5px">
|
||||
|
||||
</Header>-->
|
||||
<blogHead></blogHead>
|
||||
|
||||
<div class="cont">
|
||||
<div class="content clearfix">
|
||||
<div class="left">
|
||||
<!-- <ul>
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div @click="detail">
|
||||
<h3>lenos快速开发脚手架</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div @click="detail">
|
||||
<h3>lenos快速开发脚手架</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div @click="detail">
|
||||
<h3>lenos快速开发脚手架</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
</ul>-->
|
||||
<Page :total="40" size="small" show-total></Page>
|
||||
</div>
|
||||
<blogRight></blogRight>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<blog-bottom></blog-bottom>
|
||||
</Layout>
|
||||
<BackTop></BackTop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import titleItem from "../components/item/titleItem"
|
||||
import blogHead from "../components/header/head"
|
||||
import blogRight from "../components/right/right"
|
||||
import blogBottom from "../components/bottom/bottom"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
titleItem,
|
||||
blogHead,
|
||||
blogRight,
|
||||
blogBottom
|
||||
},
|
||||
name: 'HelloWorld',
|
||||
data (){
|
||||
return {
|
||||
msg: 'zxm',
|
||||
message:[],
|
||||
datas:[
|
||||
{
|
||||
id:1,
|
||||
name:'标题1'
|
||||
},{
|
||||
id:2,
|
||||
name:'标题2'
|
||||
}
|
||||
],
|
||||
value1:0,
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log(this.msg);
|
||||
},
|
||||
computed:{
|
||||
//计算属性 第一种 用属性来替代
|
||||
//计算属性是基于它们的依赖进行缓存的
|
||||
//
|
||||
/*name:function(){
|
||||
// return this.msg.split('').reverse().join('');
|
||||
return Date.now();
|
||||
}*/
|
||||
},
|
||||
|
||||
methods:{
|
||||
detail(){
|
||||
this.$router.push('/home/11111')
|
||||
},
|
||||
test:function(){
|
||||
this.msg='zxm111'
|
||||
},
|
||||
//计算属性 第二种 用方法来替代`
|
||||
//如果你不希望有缓存，请用方法来替代。
|
||||
name:function(){
|
||||
// return 'zxm'//.split('').reverse().join('');
|
||||
return Date.now();
|
||||
},
|
||||
selectHome:function(){
|
||||
console.log(this.message);
|
||||
this.$router.push('/home/'+this.message);
|
||||
},
|
||||
start () {
|
||||
this.$Loading.start();
|
||||
},
|
||||
finish () {
|
||||
this.$Loading.finish();
|
||||
},
|
||||
error () {
|
||||
this.$Loading.error();
|
||||
}
|
||||
},
|
||||
|
||||
//侦听属性
|
||||
watch:{
|
||||
/*msg:function(val){
|
||||
this.name=this.msg+'aaa';
|
||||
}*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
#HelloWorld{
|
||||
background: #ebebeb;
|
||||
}
|
||||
.content{
|
||||
|
||||
}
|
||||
.col{
|
||||
border:1px solid black;
|
||||
}
|
||||
|
||||
|
||||
.cont {width:100%;height:auto;background: rgba(255, 255, 255, 0.12);}
|
||||
.cont .left{width:62%;height:auto;float:left;list-style: none;}
|
||||
.cont .left ul li{width:100%;height:200px;background:#fff;margin-top:10px;border:0px solid red;list-style: none;}
|
||||
.cont .left ul li h3{font-size:20px;color:#f4645f;text-align:left;margin-left:30px;margin-top:30px;}
|
||||
.cont .left ul li h3:hover{cursor:pointer;text-decoration: underline;}
|
||||
.cont .left ul li p.time{text-align:left;margin-left:30px;margin-top:5px;font-size:12px;color:#333;}
|
||||
.cont .left ul li p.time span{color:#f4645f;}
|
||||
.cont .left ul li p.time span:hover{cursor:pointer;text-decoration: underline;}
|
||||
.cont .left ul li p.cot{text-align:left;margin-left:30px;margin-top:20px;font-size:14px;color:#333;}
|
||||
.cont .left ul li .pic{width:150px;height:150px;border:0px solid red;float:right;margin-top:-120px;margin-right:30px;}
|
||||
.cont .left ul li .pic img{width:150px;height:auto;}
|
||||
.cont .content{width:75%;height:auto;margin:30px auto;border:0px solid red;}
|
||||
/*.cont .c-right{width:35%;height:auto;float:right;}
|
||||
.cont .c-right ul li{list-style: none;width:100%;height:auto;min-height:200px;background:#fff;border:0px solid red;margin-top:10px;}
|
||||
*/ .clearfix:after{
|
||||
content:"";
|
||||
height:0;
|
||||
line-height:0;
|
||||
display:block;
|
||||
clear:both;
|
||||
visibility:hidden;
|
||||
}
|
||||
.clearfix{
|
||||
zoom:1;
|
||||
}
|
||||
/* @media screen and (max-width: 960px) {
|
||||
.wrapper { width: 93.75%; !* 960px/1024px *! margin: 0 auto; }
|
||||
.websiteDescription { margin-left: 0; }
|
||||
}
|
||||
!* for 768px or less *!
|
||||
@media screen and (max-width: 768px) {
|
||||
.mainContent { float: none; width: auto; }
|
||||
.sidebar { margin: 0; }
|
||||
h1#logo { float: none }
|
||||
nav { float: none; }
|
||||
nav li { display: block; list-style: none; padding: 1px; text-align: center; }
|
||||
nav li a { display: block; }
|
||||
}*/
|
||||
/* for 480px or less */
|
||||
@media screen and (max-width: 768px) {
|
||||
h1#logo { float: none }
|
||||
.cont {width:100%;height:auto;background:rgba(255, 255, 255, 0.12);}
|
||||
.cont .left{width:100%;height:auto;float:left;list-style: none;}
|
||||
.cont .left ul li{width:100%;height:200px;background:#fff;border:1px solid red;list-style: none;}
|
||||
.cont .left ul li.two{margin-top:10px;}
|
||||
.cont .left ul li h3{font-size:20px;color:#f4645f;text-align:left;margin-left:10px;margin-top:50px;}
|
||||
.cont .left ul li h3:hover{cursor:pointer;text-decoration: underline;}
|
||||
.cont .left ul li p.time{text-align:left;margin-left:10px;margin-top:5px;font-size:12px;color:#333;}
|
||||
.cont .left ul li p.time span{color:#f4645f;}
|
||||
.cont .left ul li p.time span:hover{cursor:pointer;text-decoration: underline;}
|
||||
.cont .left ul li p.cot{text-align:left;margin-left:10px;margin-top:20px;font-size:14px;color:#333;}
|
||||
.cont .left ul li .pic{width:110px;height:110px;border:0px solid red;float:right;margin-top:-100px;margin-right:10px;}
|
||||
.cont .left ul li .pic img{width:110px;height:110px;}
|
||||
.cont .content{width:100%;height:auto;margin:40px auto;border:1px solid red;}
|
||||
/*.cont .c-right{width:100%;height:auto;float:right;}
|
||||
.cont .c-right ul li{width:100%;height:300px;background:#fff;border:1px solid red;margin-top:10px;}*/
|
||||
/*.cont .c-right ul li.two{margin-top:10px;}*/
|
||||
}
|
||||
@media (min-width: 981px) {
|
||||
/*.websiteDescription { margin-left: 400px }*/
|
||||
.bloglist figure { float: left; width: 233px; margin-right: 20px; margin-bottom: 10px; }
|
||||
.bloglist figure img { padding: 4px; border: #f4f2f2 1px solid; width: 225px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<div id="context" class="blog-context">
|
||||
<!--{{msg}}<br/>
|
||||
{{ 1 + 1 }}<br/>
|
||||
{{name()}}<br/>
|
||||
{{message}}<br/>
|
||||
<input v-model="message" placeholder="edit me">
|
||||
|
||||
<button value="" @click="selectHome()">路由</button>-->
|
||||
<!--<Header width="auto" style="height: 5px">
|
||||
|
||||
</Header>-->
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div class="blog-title" @click="detail">
|
||||
<h3>lenos快速开发脚手架lenos啊啊啊啊啊啊啊啊......</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div @click="detail">
|
||||
<h3>lenos快速开发脚手架</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
<li class="one">
|
||||
<Card style="height: 200px">
|
||||
<div @click="detail">
|
||||
<h3>lenos快速开发脚手架</h3>
|
||||
</div>
|
||||
<p class="time">作者：<span>zxm</span> • 2017-10-31 10:05:47</p>
|
||||
<p class="cot">lenos快速开发脚手架</p>
|
||||
<div class="pic">
|
||||
<img src="../assets/aa.jpeg"/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<Page :total="40" size="small" show-total></Page>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
name: 'context',
|
||||
data (){
|
||||
return {
|
||||
msg: 'zxm',
|
||||
message:[],
|
||||
datas:[
|
||||
{
|
||||
id:1,
|
||||
name:'标题1'
|
||||
},{
|
||||
id:2,
|
||||
name:'标题2'
|
||||
}
|
||||
],
|
||||
value1:0,
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
console.log(this.msg);
|
||||
},
|
||||
computed:{
|
||||
//计算属性 第一种 用属性来替代
|
||||
//计算属性是基于它们的依赖进行缓存的
|
||||
//
|
||||
/*name:function(){
|
||||
// return this.msg.split('').reverse().join('');
|
||||
return Date.now();
|
||||
}*/
|
||||
},
|
||||
|
||||
methods:{
|
||||
detail(){
|
||||
this.$router.push('/home/11111')
|
||||
},
|
||||
test:function(){
|
||||
this.msg='zxm111'
|
||||
},
|
||||
//计算属性 第二种 用方法来替代`
|
||||
//如果你不希望有缓存，请用方法来替代。
|
||||
name:function(){
|
||||
// return 'zxm'//.split('').reverse().join('');
|
||||
return Date.now();
|
||||
},
|
||||
selectHome:function(){
|
||||
console.log(this.message);
|
||||
this.$router.push('/home/'+this.message);
|
||||
}
|
||||
},
|
||||
|
||||
//侦听属性
|
||||
watch:{
|
||||
/*msg:function(val){
|
||||
this.name=this.msg+'aaa';
|
||||
}*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
@import '../../static/css/blog-context.css';
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -37,7 +37,8 @@
|
|||
name: "head",
|
||||
data(){
|
||||
return {
|
||||
a:1
|
||||
a:1,
|
||||
theme1: 'light'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
|
|||
|
|
@ -1,16 +1,6 @@
|
|||
<template>
|
||||
<div id="home" class="layout">
|
||||
<Layout>
|
||||
<!--header begin-->
|
||||
<blogHead></blogHead>
|
||||
<!--header end-->
|
||||
<div id="home" class="blog-home">
|
||||
|
||||
<!--context begin-->
|
||||
<div class="cont">
|
||||
<div class="content clearfix">
|
||||
|
||||
|
||||
<div class="left">
|
||||
<!--文章详细开发-->
|
||||
<div class="title-article">
|
||||
<h3>
|
||||
|
|
@ -48,7 +38,7 @@ export default new Router({
|
|||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
<h3>2、根据教程发现弄不成根据教程发现弄不成根据教程发现弄不成根据教程发现弄不成</h3>
|
||||
<h3>2、爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你爱你</h3>
|
||||
<pre>
|
||||
routes: [
|
||||
{
|
||||
|
|
@ -59,7 +49,7 @@ component: HelloWorld
|
|||
</pre>
|
||||
</li>
|
||||
<li>
|
||||
<h3>3、打死作者</h3>
|
||||
<h3>3、爱你呦！！我爱你呦！！</h3>
|
||||
<pre>
|
||||
path:'/home/:id',
|
||||
component:Home,
|
||||
|
|
@ -99,23 +89,7 @@ path:'/home/:id',
|
|||
</div>
|
||||
</div>
|
||||
<!--评论-->
|
||||
</div>
|
||||
|
||||
|
||||
<!--right begin-->
|
||||
<blogRight>
|
||||
|
||||
</blogRight>
|
||||
<!--right begin-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--context end-->
|
||||
|
||||
<!--bottom begin-->
|
||||
<blog-bottom></blog-bottom>
|
||||
<!--bottom end-->
|
||||
</Layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -148,29 +122,27 @@ path:'/home/:id',
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cont {width:100%;height:auto;background: rgba(255, 255, 255, 0.12);}
|
||||
.cont .content{width:75%;height:auto;margin:30px auto;border:0px solid red;}
|
||||
.cont .content .left{width: 62%;height: auto;float: left;list-style: none;border:0px solid red;margin-top:10px;background:#fff;}
|
||||
.cont .content .left h3{font-size:28px;color:#333;font-weight:normal;margin-top:20px;}
|
||||
.cont .left p.time{font-size: 14px;color: #999;}
|
||||
.cont .left p.time span{color:#f4645f;}
|
||||
.cont .left p.time span:hover{text-decoration: underline;cursor:pointer;}
|
||||
.cont .content .left ul{margin-top:20px;list-style:none;}
|
||||
.cont .content .left ul li{width:90%;margin:0 auto;height:auto;border:0px solid red;}
|
||||
.cont .content .left ul li h3{font-size:24px;color:#333;text-align:left;}
|
||||
.cont .content .left ul li pre{display: block;padding:20px;margin-top:10px;font-size: 16px;line-height: 1.42857143;color: #666;word-break: break-all;word-wrap: break-word;background: rgba(255, 255, 255, 0.12);border: 1px solid #ccc;border-radius: 4px;text-align:left;}
|
||||
.cont .content .left ul li.link{font-size:14px;text-align:left;margin-top:20px;}
|
||||
.cont .content .left ul li.link p{margin-top:10px;}
|
||||
.cont .content .left ul li.link a:hover{text-decoration: underline;}
|
||||
.cont .content .left .comment h5{height:50px;border-bottom:1px solid #f4645f;line-height:65px;text-align:left;font-size:16px;font-weight:normal;color:#f4645f;}
|
||||
.cont .content .left .comment .com{width:90%;height:auto;border:0px solid red;margin:0px auto;margin-top:15px;}
|
||||
.cont .content .left .comment .com .pic{width:60px;height:60px;float:left;background:#ececec;}
|
||||
.cont .content .left .comment .com .tit ul{margin-top:0;}
|
||||
.cont .content .left .comment .com .tit ul li{float:right;width:85%;font-size:14px;color:#333;text-align:left;margin-top:5px;}
|
||||
.cont .content .left .comment .com .tit ul li a{color:#f4645f;text-decoration: underline;}
|
||||
.cont .content .left .comment .answer{width:90%;height:auto;border:0px solid red;margin:0 auto;}
|
||||
.cont .content .left .comment .answer textarea{width:100%;height:auto;padding:10px;margin-top:10px;color:#999;font-size:14px;border:1px solid #f4645f;outline:none;}
|
||||
.cont .content .left .comment .answer input{width:80px;height:40px;background:#f4645f;font-size:14px;color:#fff;float:right;
|
||||
.blog-home{background:#fff;margin-top:10px;}
|
||||
h3{font-size:28px;color:#333;font-weight:normal;padding-top:30px;}
|
||||
p.time{font-size: 14px;color: #999;}
|
||||
p.time span{color:#f4645f;}
|
||||
p.time span:hover{text-decoration: underline;cursor:pointer;}
|
||||
ul{margin-top:20px;list-style:none;}
|
||||
ul li{width:90%;margin:0 auto;height:auto;border:0px solid red;}
|
||||
ul li h3{font-size:24px;color:#333;text-align:left;}
|
||||
ul li pre{display: block;padding:20px;margin-top:10px;font-size: 16px;line-height: 1.42857143;color: #666;word-break: break-all;word-wrap: break-word;background: rgba(255, 255, 255, 0.12);border: 1px solid #ccc;border-radius: 4px;text-align:left;}
|
||||
ul li.link{font-size:14px;text-align:left;margin-top:20px;}
|
||||
ul li.link p{margin-top:10px;}
|
||||
ul li.link a:hover{text-decoration: underline;}
|
||||
.comment h5{height:50px;border-bottom:1px solid #f4645f;line-height:65px;text-align:left;font-size:16px;font-weight:normal;color:#f4645f;}
|
||||
.comment .com{width:90%;height:auto;border:0px solid red;margin:0px auto;margin-top:15px;}
|
||||
.comment .com .pic{width:60px;height:60px;float:left;background:#ececec;}
|
||||
.comment .com .tit ul{margin-top:0;}
|
||||
.comment .com .tit ul li{float:right;width:85%;font-size:14px;color:#333;text-align:left;margin-top:5px;}
|
||||
.comment .com .tit ul li a{color:#f4645f;text-decoration: underline;}
|
||||
.comment .answer{width:90%;height:auto;border:0px solid red;margin:0 auto;}
|
||||
.comment .answer textarea{width:100%;height:auto;padding:10px;margin-top:10px;color:#999;font-size:14px;border:1px solid #f4645f;outline:none;}
|
||||
.comment .answer input{width:80px;height:40px;background:#f4645f;font-size:14px;color:#fff;float:right;
|
||||
outline: none;border:none;cursor:pointer;}
|
||||
|
||||
.title-article{
|
||||
|
|
@ -192,42 +164,19 @@ path:'/home/:id',
|
|||
zoom:1;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.cont {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.cont .content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 30px auto;
|
||||
border: 0px solid red;
|
||||
}
|
||||
|
||||
.cont .content .left {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: left;
|
||||
list-style: none;
|
||||
border: 0px solid red;
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.cont .content .left h3 {
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.cont .left p.time {
|
||||
p.time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cont .left p.time span {
|
||||
p.time span {
|
||||
color: #f4645f;
|
||||
}
|
||||
|
||||
|
|
@ -236,25 +185,25 @@ path:'/home/:id',
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cont .content .left ul {
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cont .content .left ul li {
|
||||
ul li {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
border: 0px solid red;
|
||||
}
|
||||
|
||||
.cont .content .left ul li h3 {
|
||||
ul li h3 {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cont .content .left ul li pre {
|
||||
ul li pre {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
margin-top: 10px;
|
||||
|
|
@ -268,18 +217,18 @@ path:'/home/:id',
|
|||
border-radius: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
.cont .content .left ul li.link{font-size:14px;text-align:left;margin-top:20px;}
|
||||
.cont .content .left ul li.link p{margin-top:10px;}
|
||||
.cont .content .left ul li.link a:hover{text-decoration: underline;}
|
||||
.cont .content .left .comment h5{height:50px;border-bottom:1px solid #f4645f;line-height:65px;text-align:left;font-size:16px;font-weight:normal;color:#f4645f;}
|
||||
.cont .content .left .comment .com{width:90%;height:auto;border:0px solid red;margin:0px auto;margin-top:15px;}
|
||||
.cont .content .left .comment .com .pic{width:60px;height:60px;float:left;background:#ececec;}
|
||||
.cont .content .left .comment .com .tit ul{margin-top:0;}
|
||||
.cont .content .left .comment .com .tit ul li{float:right;width:80%;font-size:14px;color:#333;text-align:left;margin-top:5px;}
|
||||
.cont .content .left .comment .com .tit ul li a{color:#f4645f;text-decoration: underline;}
|
||||
.cont .content .left .comment .answer{width:90%;height:auto;border:0px solid red;margin:0 auto;}
|
||||
.cont .content .left .comment .answer textarea{width:100%;height:auto;padding:10px;margin-top:10px;color:#999;font-size:14px;border:1px solid #f4645f;outline:none;}
|
||||
.cont .content .left .comment .answer input{width:80px;height:40px;background:#f4645f;font-size:14px;color:#fff;float:right;
|
||||
ul li.link{font-size:14px;text-align:left;margin-top:20px;}
|
||||
ul li.link p{margin-top:10px;}
|
||||
ul li.link a:hover{text-decoration: underline;}
|
||||
.comment h5{height:50px;border-bottom:1px solid #f4645f;line-height:65px;text-align:left;font-size:16px;font-weight:normal;color:#f4645f;}
|
||||
.comment .com{width:90%;height:auto;border:0px solid red;margin:0px auto;margin-top:15px;}
|
||||
.comment .com .pic{width:60px;height:60px;float:left;background:#ececec;}
|
||||
.comment .com .tit ul{margin-top:0;}
|
||||
.comment .com .tit ul li{float:right;width:80%;font-size:14px;color:#333;text-align:left;margin-top:5px;}
|
||||
.comment .com .tit ul li a{color:#f4645f;text-decoration: underline;}
|
||||
.comment .answer{width:90%;height:auto;border:0px solid red;margin:0 auto;}
|
||||
.comment .answer textarea{width:100%;height:auto;padding:10px;margin-top:10px;color:#999;font-size:14px;border:1px solid #f4645f;outline:none;}
|
||||
.comment .answer input{width:80px;height:40px;background:#f4645f;font-size:14px;color:#fff;float:right;
|
||||
outline: none;border:none;cursor:pointer;}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="right">
|
||||
<div id="blog-right">
|
||||
<div class="c-right">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -24,11 +24,12 @@
|
|||
</Tabs>
|
||||
</li>
|
||||
<li class="two">
|
||||
<Tabs value="name1">
|
||||
<TabPane label="推荐" name="name1">
|
||||
<Carousel autoplay
|
||||
autoplay-speed="4000"
|
||||
v-model="value1" loop>
|
||||
<Tabs value="name2">
|
||||
<TabPane label="推荐" name="name2">
|
||||
<Carousel autoplay v-model="value1"
|
||||
:autoplay-speed="speed"
|
||||
|
||||
loop>
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">1</div>
|
||||
</CarouselItem>
|
||||
|
|
@ -43,9 +44,9 @@
|
|||
</CarouselItem>
|
||||
</Carousel>
|
||||
|
||||
<Button @click="start">Start</Button>
|
||||
<!-- <Button @click="start">Start</Button>
|
||||
<Button @click="finish">Finish</Button>
|
||||
<Button @click="error">Error</Button>
|
||||
<Button @click="error">Error</Button>-->
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</li>
|
||||
|
|
@ -62,7 +63,24 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "right"
|
||||
name: "blog-right",
|
||||
data(){
|
||||
return {
|
||||
value1:1,
|
||||
speed:4000,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
start () {
|
||||
this.$Loading.start();
|
||||
},
|
||||
finish () {
|
||||
this.$Loading.finish();
|
||||
},
|
||||
error () {
|
||||
this.$Loading.error();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import HelloWorld from '@/components/HelloWorld'
|
||||
import context from '@/components/context'
|
||||
import Home from '@/components/home'
|
||||
import Person from '@/components/person'
|
||||
import Detail from '@/components/detail/detail-context'
|
||||
|
|
@ -11,9 +11,9 @@ export default new Router({
|
|||
|
||||
routes: [
|
||||
{
|
||||
path: '/index',
|
||||
name: 'HelloWorld',
|
||||
component: HelloWorld
|
||||
path: '/',
|
||||
name: 'context',
|
||||
component: context
|
||||
},
|
||||
{
|
||||
path:'/home/:id',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
ul li{width:100%;height:200px;background:#fff;margin-top:10px;border:0px solid red;list-style: none;}
|
||||
ul li h3{font-size:20px;color:#f4645f;text-align:left;margin-left:30px;margin-top:30px;}
|
||||
ul li h3:hover{cursor:pointer;text-decoration: underline;}
|
||||
ul li p.time{text-align:left;margin-left:30px;margin-top:5px;font-size:12px;color:#333;}
|
||||
ul li p.time span{color:#f4645f;}
|
||||
ul li p.time span:hover{cursor:pointer;text-decoration: underline;}
|
||||
ul li p.cot{text-align:left;margin-left:30px;margin-top:20px;font-size:14px;color:#333;}
|
||||
ul li .pic{width:150px;height:150px;border:0px solid red;float:right;margin-top:-120px;margin-right:30px;}
|
||||
ul li .pic img{width:150px;height:auto;}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul li{width:100%;height:200px;background:#fff;border:1px solid red;list-style: none;}
|
||||
ul li.two{margin-top:10px;}
|
||||
ul li h3{font-size:20px;color:#f4645f;text-align:left;margin-left:10px;margin-top:50px;}
|
||||
ul li h3:hover{cursor:pointer;text-decoration: underline;}
|
||||
ul li p.time{text-align:left;margin-left:10px;margin-top:5px;font-size:12px;color:#333;}
|
||||
ul li p.time span{color:#f4645f;}
|
||||
ul li p.time span:hover{cursor:pointer;text-decoration: underline;}
|
||||
ul li p.cot{text-align:left;margin-left:10px;margin-top:20px;font-size:14px;color:#333;}
|
||||
ul li .pic{width:110px;height:110px;border:0px solid red;float:right;margin-top:-100px;margin-right:10px;}
|
||||
ul li .pic img{width:110px;height:110px;}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/*dwn*/
|
||||
.cont {width:100%;height:auto;background: rgba(255, 255, 255, 0.12);}
|
||||
.cont .blog-left{width:62%;height:auto;float:left;list-style: none;}
|
||||
.cont .content{width:80%;height:auto;margin:30px auto;border:0px solid red;}
|
||||
|
||||
.clearfix:after{
|
||||
content:"";
|
||||
height:0;
|
||||
line-height:0;
|
||||
display:block;
|
||||
clear:both;
|
||||
visibility:hidden;
|
||||
}
|
||||
.clearfix{
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.cont {width:100%;height:auto;background:rgba(255, 255, 255, 0.12);}
|
||||
.cont .blog-left{width:100%;height:auto;float:left;list-style: none;}
|
||||
.cont .content{width:90%;height:auto;margin:30px auto;border:0px solid red;}
|
||||
}
|
||||
Loading…
Reference in New Issue