Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 013e0e2

Browse files
nonespacenonespace
committed
首页布局
1 parent 9083c2a commit 013e0e2

File tree

3 files changed

+257
-81
lines changed

3 files changed

+257
-81
lines changed

‎src/component/ListContent.vue

Lines changed: 110 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
<template>
22
<div class="listContent">
33
<div
4-
v-for="(item, index) in list"
5-
:key="index"
6-
class="article_list"
7-
@click="jumpToDetail('/article/' + item.id)">
8-
<div class="article_list_item">
9-
<div class="article_detail">
10-
<div>
4+
v-for="(item, index) in list"
5+
:key="index"
6+
class="article_list"
7+
>
8+
<div class="article_list_item" >
9+
<div class="article_detail" @click="jumpToDetail('/article/' + item.id)">
10+
<div class="artclie_text_msg">
1111
<div class="article_author">
12-
<img :src="item.author.avatar" alt="">
13-
{{item.author.nickname}}
14-
</div>
15-
<div class="article_title">
16-
{{item.title}}
17-
</div>
18-
<div class="article_description">
19-
{{item.description}}
12+
<img class="img" :src="item.author.avatar" mode='widthFix' alt="" />
13+
<div class="nickname">{{item.author.nickname}}</div>
2014
</div>
15+
<div class="article_title">{{item.title}}</div>
16+
<div class="article_description">{{item.description}}</div>
2117
</div>
22-
<img :src="item.cover" alt="">
18+
<img class="img_cover" v-if="item.cover" :src="item.cover" alt mode='widthFix' />
2319
</div>
2420
<div class="article_other">
2521
<div class="like">
26-
{{item.like}}
22+
<img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
2723
</div>
2824
<div class="acticle_comments">
25+
<img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
2926
{{item.comments}}
3027
</div>
3128
<div class="acticle_share">
32-
分享
29+
<wx-button open-type="share" style="background:#fff">
30+
<img class="img" src="http://static.gocoder.top/share.png" style="" alt="" mode="widthFix">
31+
</wx-button>
3332
</div>
3433
</div>
3534
</div>
@@ -43,18 +42,106 @@ import Vue from 'vue'
4342
export default Vue.extend({
4443
name: 'ListContent',
4544
data() {
46-
return {
47-
}
45+
return {}
4846
},
4947
methods: {
5048
jumpToDetail(url) {
5149
window.location.href = url
52-
},
50+
}
5351
},
54-
props: ['list'],
52+
props: ['list']
5553
})
56-
5754
</script>
5855
<style lang="less">
56+
.ellipsis{
57+
display: -webkit-box;
58+
59+
overflow: hidden;
60+
61+
text-overflow: ellipsis;
5962
63+
word-wrap: break-word;
64+
65+
white-space: normal !important;
66+
word-break:break-all;
67+
68+
-webkit-line-clamp: 2;
69+
70+
-webkit-box-orient: vertical;
71+
72+
}
73+
.listContent {
74+
.article_list_item {
75+
box-sizing: border-box;
76+
background: #fff;
77+
margin-bottom: 20rpx;
78+
.article_detail {
79+
box-sizing: border-box;
80+
display: flex;
81+
width: 100%;
82+
justify-content: space-between;
83+
align-items: center;
84+
border-bottom: 1px solid #F5F6F6;
85+
padding:20rpx 40rpx ;
86+
.artclie_text_msg{
87+
flex: 1;
88+
}
89+
.article_author {
90+
display: flex;
91+
align-items: center;
92+
padding-bottom: 16rpx;
93+
.img {
94+
height: 40rpx;
95+
width: 40rpx;
96+
border-radius: 50%;
97+
}
98+
.nickname {
99+
font-size: 24rpx;
100+
color: rgba(102, 102, 102, 1);
101+
margin-left: 11rpx;
102+
}
103+
}
104+
.article_title{
105+
font-size: 36rpx;
106+
color: #333333;
107+
.ellipsis
108+
}
109+
.article_description{
110+
color: #999999;
111+
font-size: 28rpx;
112+
.ellipsis;
113+
}
114+
}
115+
.img_cover {
116+
width: 160rpx;
117+
height: 160rpx;
118+
border-radius: 4px;
119+
display: inline-block;
120+
margin-left: 40rpx;
121+
}
122+
.article_other{
123+
display: flex;
124+
color: #999999;
125+
font-size: 28rpx;
126+
height: 88rpx;
127+
align-items: center;
128+
>div{
129+
flex: 1;
130+
display: flex;
131+
justify-content: center;
132+
align-items: center;
133+
}
134+
.img{
135+
height: 28rpx;
136+
width: 30rpx;
137+
margin-left: 10rpx;
138+
}
139+
.acticle_comments{
140+
.img{
141+
width: 35rpx;
142+
}
143+
}
144+
}
145+
}
146+
}
60147
</style>

‎src/home/Index.vue

Lines changed: 34 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,68 @@
11
<template>
2-
<div class="cnt">
2+
<div class="home">
33
<KSwiper
44
:indicator-dots="indicatorDots"
55
:circular="circularFlag"
66
:autoplay="autoplay"
77
:duration="duration"
88
:interval="interval"
99
>
10-
<KSwiperItem
11-
v-for="(item,index) in background"
12-
:key="index" >
10+
<KSwiperItem v-for="(item,index) in background" :key="index">
1311
<KView :class="'swiper-item '+ item">
14-
<img :src="bannerImg" class="banner-item"/>
12+
<img :src="bannerImg" class="banner-item" mode='widthFix'/>
1513
</KView>
1614
</KSwiperItem>
1715
</KSwiper>
16+
<Tabs />
1817

19-
<tabs></tabs>
20-
<wx-button open-type="share" @click="onClickShare">分享</wx-button>
21-
22-
<!-- 引用列表内容组件 -->
23-
<list-content :list="list"></list-content>
18+
<!-- <tabs></tabs>
19+
<wx-button open-type="share" @click="onClickShare">分享</wx-button>-->
2420
</div>
2521
</template>
2622

2723
<script>
2824
import Vue from 'vue'
29-
import Header from '../common/Header.vue'
30-
import Footer from '../common/Footer.vue'
25+
import Tabs from './Tabs/Index.vue'
3126
import Web from 'reduce-loader!../common/Web.vue'
3227
import 'reduce-loader!./web'
33-
import ListContent from '../component/ListContent.vue'
3428
3529
export default Vue.extend({
3630
name: 'Home',
3731
components: {
38-
Header,
39-
Footer,
4032
Web,
41-
ListContent
33+
Tabs
4234
},
35+
4336
data() {
4437
return {
4538
interval: 2380,
46-
autoplay: true,
47-
indicatorDots: true,
39+
autoplay: false,
40+
indicatorDots: false,
4841
circularFlag: true,
42+
duration: 1200,
4943
background: [
5044
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
5145
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
52-
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
46+
'https://wechat-1251018873.file.myqcloud.com/images/banner.png'
47+
],
48+
current: 1,
49+
navList: [
50+
{ label: '最新', key: 'newest' },
51+
{ label: '专栏', key: 'column' },
52+
{ label: '最新', key: 'pay' }
5353
],
5454
bannerImg: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
55-
list: [{
56-
id: 1,
57-
author: {
58-
id: 1,
59-
nickname: '用户1',
60-
avatar: 'https://avatars0.githubusercontent.com/u/44227678?s=88&v=4',
61-
},
62-
title: '测试文章1的标题',
63-
description: '测试文章1的描述',
64-
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
65-
like: 6,
66-
comments: 6,
67-
}, {
68-
id: 2,
69-
author: {
70-
id: 2,
71-
nickname: '用户2',
72-
avatar: 'https://avatars2.githubusercontent.com/u/33213215?s=80&v=4',
73-
},
74-
title: '测试文章2的标题',
75-
description: '测试文章2的描述',
76-
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
77-
like: 16,
78-
comments: 26,
79-
}]
8055
}
8156
},
8257
created() {
83-
window.addEventListener('wxload', query => console.log('page1 wxload', query))
58+
window.addEventListener('wxload', query =>
59+
console.log('page1 wxload', query)
60+
)
8461
window.addEventListener('wxshow', () => console.log('page1 wxshow'))
8562
window.addEventListener('wxready', () => console.log('page1 wxready'))
8663
window.addEventListener('wxhide', () => console.log('page1 wxhide'))
8764
window.addEventListener('wxunload', () => console.log('page1 wxunload'))
65+
8866
if (process.env.isMiniprogram) {
8967
console.log('I am in miniprogram')
9068
// For Dean Test Passport.
@@ -111,29 +89,27 @@ export default Vue.extend({
11189
onClickJump() {
11290
window.location.href = '/test/list/123'
11391
},
92+
11493
onClickOpen() {
11594
window.open('/test/detail/123')
11695
},
96+
11797
onClickShare() {
11898
console.log('I am in miniprogram')
11999
},
120-
},
100+
navChange(val) {
101+
try {
102+
this.current = val.$_detail.current
103+
} catch (error) {
104+
console.log(error)
105+
}
106+
}
107+
}
121108
})
122109
</script>
123110

124111
<style lang="less">
125-
.cnt {
126-
margin-top: 20px;
127-
}
128-
a, button {
129-
display: block;
130-
width: 100%;
131-
height: 30px;
132-
line-height: 30px;
133-
text-align: center;
134-
font-size: 20px;
135-
border: 1px solid #ddd;
136-
}
112+
137113
.miniprogram-root {
138114
.for-web {
139115
display: none;

0 commit comments

Comments
 (0)