Skip to content

Commit 935cfcd

Browse files
anjoy8anjoy8
committed
Update Home.vue
1 parent a4622c5 commit 935cfcd

File tree

1 file changed

+153
-126
lines changed

1 file changed

+153
-126
lines changed

‎src/views/Home.vue

Lines changed: 153 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,118 @@
11
<template>
2-
<div class="home">
3-
<article class="newhome">
4-
<!--lbox begin-->
5-
<div class="lbox">
6-
7-
<div class="ad whitebg"> </div>
8-
<div v-if="isShow" v-for="i in 6" :key="i">
9-
<el-row :gutter="20">
10-
<el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
11-
12-
</el-row>
13-
<el-row :gutter="24">
14-
<el-col :span="24"><div class="grid-content bg-purple"></div></el-col>
15-
</el-row>
16-
17-
<p class="bloginfo"><i class="avatar"></i><span>loadding...</span><span ></span><span></span>
18-
<a href="/" class="viewmore-row">更多</a>
19-
</p>
20-
</div>
21-
<div v-else class="whitebg bloglist">
22-
<h2 class="htitle">最新博文
23-
24-
<router-link :to="'/Editor'" class="prev" style="float:right;" rel="prev">
25-
Add My Study
26-
</router-link>
27-
</h2>
28-
<ul>
29-
<!--单图-->
30-
<li v-for="i in list" :key="i.bID" >
31-
<h3 class="blogtitle">
32-
<router-link :to="'/content/' + i.bID">
33-
{{ i.btitle }}
34-
</router-link>
35-
</h3>
36-
<span class=""><i><a href="/" ></a></i><a href="/" title=""></a></span>
37-
<p class="blogtext" v-text="i.bRemark"></p>
38-
<p class="bloginfo"><i class="avatar"></i><span>{{i.bsubmitter}}</span><span >{{formatCreateTime(i)}}</span><span>【<a href="/">Just</a>】</span></p>
39-
<a href="/" class="viewmore">更多</a> </li>
40-
41-
</ul>
42-
<nav id="page-nav">
43-
<router-link :to="'/?page=' + (page>1?page-1:1)" class="prev" rel="prev">
44-
{{(page>1? "pre": "")}}
45-
</router-link>
46-
<router-link :to="'/?page=' + (page>=TotalCount? TotalCount: page+1)" class="next" rel="next">
47-
{{(page>=TotalCount? "": "Next")}}
48-
</router-link>
49-
50-
</nav>
51-
</div>
52-
<!--bloglist end-->
53-
</div>
54-
<div class="rbox">
55-
<div class="card">
56-
<h2></h2>
57-
<p>Nick：laozhang is phi</p>
58-
<p>Work：.net core & Vue</p>
59-
<p>Add：Peking Haidian</p>
60-
<p>Email：[email protected]</p>
61-
<ul class="linkmore">
62-
<li><a href="http://laozhang-is-phi.cnblogs.com/" target="_blank" class="iconfont icon-zhuye" title="网站地址"></a></li>
63-
<li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;[email protected]" target="_blank" class="iconfont icon-youxiang" title="我的邮箱"></a></li>
64-
<li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143422472&amp;site=qq&amp;menu=yes" target="_blank" class="iconfont icon---" title="QQ联系我"></a></li>
65-
<li ><a href="https://github.com/anjoy8" target="_blank" class="iconfont icon-weixin" title="github"></a> </li>
66-
</ul>
67-
</div>
68-
<div class="whitebg notice">
69-
<h2 class="htitle">网站公告</h2>
70-
<img src="../assets/QQGroup.png"/>
71-
<ul>
72-
<li></li>
73-
<li><a target="_blank" href="https://www.cnblogs.com/laozhang-is-phi/p/9495618.html#autoid-1-0-0">系列教程一：.netcore+vue 前后端分离!</a></li>
74-
<li><a target="_blank" href="https://www.cnblogs.com/laozhang-is-phi/p/9806335.html#autoid-1-0-0">系列教程二：DDD领域驱动设计</a></li>
75-
<li><a target="_blank" href="https://www.cnblogs.com/laozhang-is-phi/p/10236645.html#autoid-2-1-0">系列教程三：Nuxt.js TiBug系统</a></li>
76-
<li><a target="_blank" href="https://www.cnblogs.com/laozhang-is-phi/p/10438122.html#autoid-2-0-0">系列教程四：VueAdmin 后台管理系统</a></li>
77-
<li><a target="_blank" href="https://www.cnblogs.com/laozhang-is-phi/p/10483922.html#autoid-3-0-0">系列教程五：IdentityServer4 授权服务器</a></li>
78-
</ul>
79-
</div>
80-
81-
</div>
82-
</article>
83-
<footer>
84-
<div class="box">
85-
86-
<div class="endnav">
87-
<p><b>免职声明：</b></p>
88-
<p>1、当前页设计样式模板来自网上资源，仅作学习参考，若商用请联系 [素材火]。</p>
89-
90-
</div>
91-
</div>
92-
</footer>
93-
94-
</div>
2+
<div class="home">
3+
<article class="newhome">
4+
<!--lbox begin-->
5+
<div class="lbox">
6+
7+
<div class="ad whitebg"></div>
8+
<div v-if="isShow">
9+
<div v-for="i in 6" :key="i">
10+
<el-row :gutter="20">
11+
<el-col :span="7">
12+
<div class="grid-content bg-purple"></div>
13+
</el-col>
14+
15+
</el-row>
16+
<el-row :gutter="24">
17+
<el-col :span="24">
18+
<div class="grid-content bg-purple"></div>
19+
</el-col>
20+
</el-row>
21+
22+
<p class="bloginfo"><i class="avatar"></i><span>loadding...</span><span></span><span></span>
23+
<a href="/" class="viewmore-row">更多</a>
24+
</p>
25+
</div>
26+
</div>
27+
<div v-else class="whitebg bloglist">
28+
<h2 class="htitle">最新博文
29+
30+
<router-link :to="'/Editor'" class="prev" style="float:right;" rel="prev">
31+
Add My Study
32+
</router-link>
33+
</h2>
34+
<ul>
35+
<!--单图-->
36+
<li v-for="i in list" :key="i.bID">
37+
<h3 class="blogtitle">
38+
<router-link :to="'/content/' + i.bID">
39+
{{ i.btitle }}
40+
</router-link>
41+
</h3>
42+
<span class=""><i><a href="/"></a></i><a href="/" title=""></a></span>
43+
<p class="blogtext" v-text="i.bRemark"></p>
44+
<p class="bloginfo"><i class="avatar"></i><span>{{i.bsubmitter}}</span><span>{{formatCreateTime(i)}}</span><span>【<a
45+
href="/">Just</a>】</span></p>
46+
<a href="/" class="viewmore">更多</a></li>
47+
48+
</ul>
49+
<nav id="page-nav">
50+
<router-link :to="'/?page=' + (page>1?page-1:1)" class="prev" rel="prev">
51+
{{(page>1? "pre": "")}}
52+
</router-link>
53+
<router-link :to="'/?page=' + (page>=TotalCount? TotalCount: page+1)" class="next" rel="next">
54+
{{(page>=TotalCount? "": "Next")}}
55+
</router-link>
56+
57+
</nav>
58+
</div>
59+
<!--bloglist end-->
60+
</div>
61+
<div class="rbox">
62+
<div class="card">
63+
<h2></h2>
64+
<p>Nick：laozhang is phi</p>
65+
<p>Work：.net core & Vue</p>
66+
<p>Add：Peking Haidian</p>
67+
<p>Email：[email protected]</p>
68+
<ul class="linkmore">
69+
<li><a href="http://laozhang-is-phi.cnblogs.com/" target="_blank" class="iconfont icon-zhuye"
70+
title="网站地址"></a></li>
71+
<li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;[email protected]"
72+
target="_blank" class="iconfont icon-youxiang" title="我的邮箱"></a></li>
73+
<li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143422472&amp;site=qq&amp;menu=yes"
74+
target="_blank" class="iconfont icon---" title="QQ联系我"></a></li>
75+
<li><a href="https://github.com/anjoy8" target="_blank" class="iconfont icon-weixin"
76+
title="github"></a></li>
77+
</ul>
78+
</div>
79+
<div class="whitebg notice">
80+
<h2 class="htitle">网站公告</h2>
81+
<img src="../assets/QQGroup.png"/>
82+
<ul>
83+
<li></li>
84+
<li><a target="_blank"
85+
href="https://www.cnblogs.com/laozhang-is-phi/p/9495618.html#autoid-1-0-0">系列教程一：.netcore+vue
86+
前后端分离!</a></li>
87+
<li><a target="_blank"
88+
href="https://www.cnblogs.com/laozhang-is-phi/p/9806335.html#autoid-1-0-0">系列教程二：DDD领域驱动设计</a>
89+
</li>
90+
<li><a target="_blank"
91+
href="https://www.cnblogs.com/laozhang-is-phi/p/10236645.html#autoid-2-1-0">系列教程三：Nuxt.js
92+
TiBug系统</a></li>
93+
<li><a target="_blank"
94+
href="https://www.cnblogs.com/laozhang-is-phi/p/10438122.html#autoid-2-0-0">系列教程四：VueAdmin
95+
后台管理系统</a></li>
96+
<li><a target="_blank"
97+
href="https://www.cnblogs.com/laozhang-is-phi/p/10483922.html#autoid-3-0-0">系列教程五：IdentityServer4
98+
授权服务器</a></li>
99+
</ul>
100+
</div>
101+
102+
</div>
103+
</article>
104+
<footer>
105+
<div class="box">
106+
107+
<div class="endnav">
108+
<p><b>免职声明：</b></p>
109+
<p>1、当前页设计样式模板来自网上资源，仅作学习参考，若商用请联系 [素材火]。</p>
110+
111+
</div>
112+
</div>
113+
</footer>
114+
115+
</div>
95116
</template>
96117

97118
<script>
@@ -124,7 +145,7 @@ export default {
124145
if (urlPage) {
125146
that.page = urlPage;
126147
}
127-
this.$api.get("Blog/?page=" + that.page, {test:33}, r => {
148+
this.$api.get("Blog/?page=" + that.page, { test: 33 }, r => {
128149
this.list = r.data;
129150
this.page = r.page;
130151
this.TotalCount = r.pageCount;
@@ -144,36 +165,42 @@ export default {
144165
</script>
145166

146167
<style>
147-
.el-row {
148-
margin-bottom: 20px;
149-
}
150-
.el-col {
151-
border-radius: 4px;
152-
}
153-
.bg-purple-dark {
154-
background: #99a9bf;
155-
}
156-
.bg-purple {
157-
background: #d3dce6;
158-
}
159-
.bg-purple-light {
160-
background: #e5e9f2;
161-
}
162-
.grid-content {
163-
border-radius: 4px;
164-
min-height: 36px;
165-
}
166-
.row-bg {
167-
padding: 10px 0;
168-
background-color: #f9fafc;
169-
}
170-
.viewmore-row{
171-
172-
float: right;
173-
background: #12b7de;
174-
color: #fff;
175-
border-radius: 3px;
176-
padding: 0px 10px;
177-
height: 30px;
178-
}
168+
.el-row {
169+
margin-bottom: 20px;
170+
}
171+
172+
.el-col {
173+
border-radius: 4px;
174+
}
175+
176+
.bg-purple-dark {
177+
background: #99a9bf;
178+
}
179+
180+
.bg-purple {
181+
background: #d3dce6;
182+
}
183+
184+
.bg-purple-light {
185+
background: #e5e9f2;
186+
}
187+
188+
.grid-content {
189+
border-radius: 4px;
190+
min-height: 36px;
191+
}
192+
193+
.row-bg {
194+
padding: 10px 0;
195+
background-color: #f9fafc;
196+
}
197+
198+
.viewmore-row {
199+
float: right;
200+
background: #12b7de;
201+
color: #fff;
202+
border-radius: 3px;
203+
padding: 0px 10px;
204+
height: 30px;
205+
}
179206
</style>

0 commit comments

Comments
 (0)