lihenian
4 years ago
51 changed files with 1028 additions and 108 deletions
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 655 B |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 10 KiB |
@ -0,0 +1,5 @@ |
|||
Component({ |
|||
data: { |
|||
communityNewsList: [1, 2, 3, 4, 5] |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
<view class="community-news-list"> |
|||
<view class="first"> |
|||
<view class="title">最新资讯</view> |
|||
<view class="more"> |
|||
<view class="tip">更多</view> |
|||
<view class="right-sword"> |
|||
<image src="../../../../images/home/right-sword-thin.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="news-list"> |
|||
<view class="list-item {{index === 0 ? 'first-item' : ''}}" wx:for="{{communityNewsList}}" wx-key="index" wx:for-item="item" wx:for-index="index"> |
|||
<view class="news-img"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="detail"> |
|||
<view class="title">青岛市场常委、住址部部长李伟到市北区调研，为了家常标题的长度，凑一下字数，看看有没两行以上的字体</view> |
|||
<view class="bottom-detail"> |
|||
<view class="time">2020.3.26</view> |
|||
<view class="page-view"> |
|||
<view class="page-view-img"> |
|||
<image src="../../../../images/home/eye.png" /> |
|||
</view> |
|||
<view class="num">236</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,124 @@ |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.community-news-list { |
|||
width: 100%; |
|||
margin-top: 12rpx; |
|||
background: #fff; |
|||
} |
|||
|
|||
.first { |
|||
width: 100%; |
|||
height: 85rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.first .title { |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.first .more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.first .more .tip { |
|||
font-size: 28rpx; |
|||
color: #c5c5c5; |
|||
} |
|||
|
|||
.first .more .right-sword { |
|||
width: 14rpx; |
|||
height: 22rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
|
|||
.news-list { |
|||
width: 100%; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.news-list .list-item { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.news-list .list-item.first-item { |
|||
padding: 0 0 30rpx 0; |
|||
} |
|||
|
|||
.news-list .list-item + .list-item { |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
|
|||
.news-list .list-item .news-img { |
|||
width: 210rpx; |
|||
height: 150rpx; |
|||
border-radius: 8rpx; |
|||
overflow: hidden; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.news-list .list-item .detail { |
|||
width: calc(100% - 210rpx - 20rpx); |
|||
height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.news-list .list-item .detail .title { |
|||
font-size: 34rpx; |
|||
color: #3f3f3f; |
|||
line-height: 44rpx; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .time { |
|||
font-size: 22rpx; |
|||
letter-spacing: 1px; |
|||
color: #aaa; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .page-view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
.news-list .list-item .bottom-detail .page-view .page-view-img { |
|||
width: 30rpx; |
|||
height: 24rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .page-view .num { |
|||
font-size: 24rpx; |
|||
letter-spacing: 1px; |
|||
color: #aaa; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
Component({ |
|||
data: { |
|||
griderList: [1, 2, 3, 4, 5] |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
<view class="grider-list"> |
|||
<view class="title">网格员在身边</view> |
|||
<scroll-view scroll-x="{{true}}"> |
|||
<view class="grider-item-contaner"> |
|||
<block wx:for="{{griderList}}" wx-key="index" wx:for-index="index"> |
|||
<view wx:if="{{index !== griderList.length - 1}}" class="grider-item {{index === 0 ? 'first' : ''}}"> |
|||
<view class="avatar"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
<view class="grid-leader">网格长</view> |
|||
</view> |
|||
<view class="name">张扬</view> |
|||
<view class="logen">吹响锦详号召，奔向美好生活</view> |
|||
<view class="call-phone"> |
|||
<view class="phone"> |
|||
<image src="" /> |
|||
</view> |
|||
<view class="tip">有事找我</view> |
|||
</view> |
|||
</view> |
|||
<view wx:else class="item-container"> |
|||
<view class="grider-item {{index === 0 ? 'first' : ''}}"> |
|||
<view class="avatar"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="name">张扬</view> |
|||
<view class="logen">吹响锦详号召，奔向美好生活</view> |
|||
<view class="call-phone"> |
|||
<view class="phone"> |
|||
<image src="" /> |
|||
</view> |
|||
<view class="tip">有事找我</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
@ -0,0 +1,129 @@ |
|||
.grider-list { |
|||
width: 100%; |
|||
background: #fff; |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
.grider-list .title { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
line-height: 90rpx; |
|||
text-indent: 30rpx; |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.grider-list scroll-view { |
|||
width: 100%; |
|||
height: calc(390rpx + 55rpx); |
|||
} |
|||
|
|||
.grider-list scroll-view .grider-item-contaner { |
|||
min-width: auto; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.grider-item { |
|||
width: 280rpx; |
|||
height: 390rpx; |
|||
flex-shrink: 0; |
|||
box-shadow: 0rpx 2rpx 24rpx 0rpx |
|||
rgba(227, 227, 227, 0.52); |
|||
border-radius: 10rpx; |
|||
margin: 10px 0px 0px 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding: 0 5%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.grider-item .avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
position: relative; |
|||
margin-top: 42rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.grider-item .avatar .grid-leader { |
|||
width: 80rpx; |
|||
height: 28rpx; |
|||
background-color: #f69635; |
|||
border-radius: 14rpx; |
|||
font-size: 20rpx; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: absolute; |
|||
bottom: -14rpx; |
|||
left: calc(50% - 40rpx); |
|||
} |
|||
|
|||
.grider-item .avatar image { |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.grider-item .name { |
|||
font-size: 30rpx; |
|||
color: #333333; |
|||
height: 52rpx; |
|||
line-height: 52rpx; |
|||
margin-top: 7rpx; |
|||
} |
|||
|
|||
.grider-item .logen { |
|||
font-size: 26rpx; |
|||
line-height: 36rpx; |
|||
color: #aeaeae; |
|||
width: 100%; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.call-phone { |
|||
margin-top: 20rpx; |
|||
width: 160rpx; |
|||
height: 52rpx; |
|||
background-image: linear-gradient(90deg, |
|||
#e3271c 0%, |
|||
#f95c2c 100%), |
|||
linear-gradient( |
|||
#8da5eb, |
|||
#8da5eb); |
|||
background-blend-mode: normal, |
|||
normal; |
|||
border-radius: 25rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 26rpx; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.grider-item.first { |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.item-container { |
|||
flex-shrink: 0; |
|||
width: 310rpx; |
|||
height: 390rpx; |
|||
margin: 10px 0px 0px 20rpx; |
|||
} |
|||
|
|||
.item-container .grider-item { |
|||
margin: 0; |
|||
} |
|||
|
|||
.item-container .grider-item.first { |
|||
margin: 0 0 0 10rpx; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
Component({ |
|||
data: { |
|||
projectList: [1, 2, 3, , 4, 5] |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
<view class="project-progress"> |
|||
<view class="first"> |
|||
<view class="title">项目进度</view> |
|||
<view class="more"> |
|||
<view class="tip">更多</view> |
|||
<view class="right-sword"> |
|||
<image src="../../../../images/home/right-sword-thin.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<scroll-view scroll-x="{{true}}"> |
|||
<view class="project-list"> |
|||
<block wx:for="{{projectList}}" wx-key="index"> |
|||
<view class="project-item" wx:if="{{index !== projectList.length - 1}}"> |
|||
<view class="project-img"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="content">青岛国际油轮航母区邀请全球区域来参观</view> |
|||
<view class="detail"> |
|||
<view class="left"> |
|||
<view class="avatar"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="name">阜新路74号-王先生</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view class="icon eye"> |
|||
<image src="../../../../images/home/eye.png" /> |
|||
</view> |
|||
<view class="tip">5632</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="icon"> |
|||
<image src="../../../../images/home/remark.png" /> |
|||
</view> |
|||
<view class="tip">610</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item-container" wx:else> |
|||
<view class="project-item"> |
|||
<view class="project-img"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="content">青岛国际油轮航母区邀请全球区域来参观</view> |
|||
<view class="detail"> |
|||
<view class="left"> |
|||
<view class="avatar"> |
|||
<image src="../../../../images/home/avatar.jpg" /> |
|||
</view> |
|||
<view class="name">阜新路74号-王先生</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view class="icon eye"> |
|||
<image src="../../../../images/home/eye.png" /> |
|||
</view> |
|||
<view class="tip">5632</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="icon"> |
|||
<image src="../../../../images/home/remark.png" /> |
|||
</view> |
|||
<view class="tip">610</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
@ -0,0 +1,145 @@ |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.project-progress { |
|||
width: 100%; |
|||
margin-top: 12rpx; |
|||
background: #fff; |
|||
} |
|||
|
|||
.first { |
|||
width: 100%; |
|||
height: 85rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.first .title { |
|||
font-size: 34rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.first .more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.first .more .tip { |
|||
font-size: 28rpx; |
|||
color: #c5c5c5; |
|||
} |
|||
|
|||
.first .more .right-sword { |
|||
width: 14rpx; |
|||
height: 22rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
|
|||
scroll-view { |
|||
width: 100%; |
|||
height: 364rpx; |
|||
} |
|||
|
|||
scroll-view .project-list { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item { |
|||
flex-shrink: 0; |
|||
width: 472rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .item-container { |
|||
flex-shrink: 0; |
|||
width: 532rpx; |
|||
box-sizing: border-box; |
|||
padding-right: 30rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .project-img { |
|||
width: 100%; |
|||
height: 226rpx; |
|||
border-radius: 10rpx 10rpx 0 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .content { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail { |
|||
width: 100%; |
|||
height: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .left .avatar { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .left .name { |
|||
font-size: 20rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right .item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right .item + .item { |
|||
margin-left: 22rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right .item .icon { |
|||
width: 23rpx; |
|||
height: 22rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right .item .icon.eye { |
|||
width: 27rpx; |
|||
height: 21rpx; |
|||
} |
|||
|
|||
scroll-view .project-list .project-item .detail .right .item .tip { |
|||
font-size: 20rpx; |
|||
color: #999999; |
|||
margin-left: 8rpx; |
|||
} |
|||
|
|||
@ -1,36 +1,36 @@ |
|||
<view class="sudoku"> |
|||
<view class="content"> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToAssociation"> |
|||
<image src="../../../../images/home/association.png" /> |
|||
<view class="name">左邻右舍</view> |
|||
<view class="item first" hover-stay-time="150" bindtap="navigateToCommunityNews"> |
|||
<image src="../../../../images/home/community-news.png" /> |
|||
<view class="name">社区资讯</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToDiscussion"> |
|||
<image src="../../../../images/home/discussion.png" /> |
|||
<view class="name">有么说么</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToDiscussion"> |
|||
<image src="../../../../images/home/add-discussion.png" /> |
|||
<view class="name">我要报事</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToProperty"> |
|||
<image src="../../../../images/home/property.png" /> |
|||
<view class="name">我的物业</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToSafe"> |
|||
<image src="../../../../images/home/safe-yushan.png" /> |
|||
<view class="name">平安榆山</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToHeart"> |
|||
<image src="../../../../images/home/heart.png" /> |
|||
<view class="name">互帮互助</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToProperty"> |
|||
<image src="../../../../images/home/service-company.png" /> |
|||
<view class="name">我的物业</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToIntegral"> |
|||
<image src="../../../../images/home/integral.png" /> |
|||
<image src="../../../../images/home/point-ranking.png" /> |
|||
<view class="name">积分排行</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToSafe"> |
|||
<image src="../../../../images/home/safe.png" /> |
|||
<view class="name">平安榆山</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToEducation"> |
|||
<image src="../../../../images/home/edu.png" /> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToEducation"> |
|||
<image src="../../../../images/home/community-education.png" /> |
|||
<view class="name">社区教育</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToSyntheticalService"> |
|||
<image src="../../../../images/home/synthetical-service.png" /> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToSyntheticalService"> |
|||
<image src="../../../../images/home/all-service.png" /> |
|||
<view class="name">综合服务</view> |
|||
</view> |
|||
<view class="item" hover-stay-time="150" bindtap="navigateToInfoList"> |
|||
<image src="../../../../images/home/notice.png" /> |
|||
<view class="name">通知公告</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,57 @@ |
|||
{ |
|||
"setting": {}, |
|||
"condition": { |
|||
"plugin": { |
|||
"list": [] |
|||
}, |
|||
"game": { |
|||
"list": [] |
|||
}, |
|||
"gamePlugin": { |
|||
"list": [] |
|||
}, |
|||
"miniprogram": { |
|||
"list": [ |
|||
{ |
|||
"id": 0, |
|||
"name": "带参数二维码", |
|||
"pathName": "pages/index/index", |
|||
"query": "scene=1169158362718629889&inviteUserId=12345", |
|||
"scene": 1011 |
|||
}, |
|||
{ |
|||
"id": 2, |
|||
"name": "网格长注册", |
|||
"pathName": "pages/index/index", |
|||
"query": "scene=gridLeader", |
|||
"scene": 1011 |
|||
}, |
|||
{ |
|||
"id": 3, |
|||
"name": "补全用户信息", |
|||
"pathName": "pages/complete/complete", |
|||
"query": "", |
|||
"scene": null |
|||
}, |
|||
{ |
|||
"name": "网格注册", |
|||
"pathName": "pages/formid/formid", |
|||
"query": "gid=1258691044142047233", |
|||
"scene": null |
|||
}, |
|||
{ |
|||
"name": "pages/index/index", |
|||
"pathName": "pages/index/index", |
|||
"query": "", |
|||
"scene": null |
|||
}, |
|||
{ |
|||
"name": "subpages/communityNews/pages/index/index", |
|||
"pathName": "subpages/communityNews/pages/index/index", |
|||
"query": "", |
|||
"scene": null |
|||
} |
|||
] |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 221 KiB |
|
After Width: | Height: | Size: 655 B |
@ -0,0 +1,26 @@ |
|||
Page({ |
|||
data: { |
|||
tabList: [ |
|||
{ label: '最新资讯', value: '1' }, |
|||
{ label: '新闻动态', value: '2' }, |
|||
{ label: '平安榆山', value: '3' }, |
|||
{ label: '疫情防控', value: '4' }, |
|||
{ label: '社会新闻', value: '5' }, |
|||
{ label: '政策解读', value: '6' } |
|||
], |
|||
currentTab: '1', |
|||
loadMoreType: 'none', |
|||
loadMoreVisible: false |
|||
}, |
|||
onPageScroll() { |
|||
this.setData({ |
|||
loadMoreVisible: true |
|||
}) |
|||
}, |
|||
changeTab(e) { |
|||
const { tab } = e.currentTarget.dataset |
|||
this.setData({ |
|||
currentTab: tab |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"navigationBarTitleText": "社区资讯", |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarBackgroundColor": "#bb0300" |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
<view class="community-news"> |
|||
<scroll-view scroll-x="{{true}}" scroll-with-animation="{{true}}"> |
|||
<view class="tab-list"> |
|||
<view hover-class="item-hover" hover-stay-time="250" class="tab-item {{currentTab === item.value ? 'active' : ''}}" wx:for="{{tabList}}" wx-key="index" wx:for-item="item" wx:for-index="index" bindtap="changeTab" data-tab="{{item.value}}"> |
|||
{{item.label}} |
|||
<view class="select-tab"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="news-list"> |
|||
<view class="list-item" wx:for="{{[1,2,3, 4, 5, 6, 7, 8]}}" wx-key="index" wx:for-item="item" wx:for-index="index"> |
|||
<view class="news-img"> |
|||
<image src="../../images/avatar.jpg" /> |
|||
</view> |
|||
<view class="detail"> |
|||
<view class="title">青岛市场常委、住址部部长李伟到市北区调研，为了家常标题的长度，凑一下字数，看看有没两行以上的字体</view> |
|||
<view class="bottom-detail"> |
|||
<view class="time">2020.3.26</view> |
|||
<view class="page-view"> |
|||
<view class="page-view-img"> |
|||
<image src="../../images/eye.png" /> |
|||
</view> |
|||
<view class="num">236</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<load-more loadMoreVisible="{{loadMoreVisible}}" loadMoreType="{{loadMoreType}}"></load-more> |
|||
</view> |
|||
@ -0,0 +1,142 @@ |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.community-news { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
overflow-y: auto; |
|||
background: #f7f7f7; |
|||
} |
|||
|
|||
.community-news scroll-view { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
background: #fff; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-list { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-item { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
line-height: 90rpx; |
|||
height: 90rpx; |
|||
padding: 0 29rpx; |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.item-hover { |
|||
background: #ddd; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-item.active { |
|||
font-size: 30rpx; |
|||
color: #bb0300; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-item .select-tab { |
|||
width: 40rpx; |
|||
height: 6rpx; |
|||
background-color: #bb0300; |
|||
border-radius: 3rpx; |
|||
position: absolute; |
|||
bottom: 0px; |
|||
left: calc(50% - 20rpx); |
|||
display: none; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-item.active .select-tab { |
|||
display: block; |
|||
} |
|||
|
|||
.community-news scroll-view .tab-item + .tab-item { |
|||
margin-left: 19rpx; |
|||
} |
|||
|
|||
.news-list { |
|||
width: 100%; |
|||
background: #fff; |
|||
margin-top: calc(16rpx + 90rpx); |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.news-list .list-item { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 30rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.news-list .list-item + .list-item { |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
|
|||
.news-list .list-item .news-img { |
|||
width: 210rpx; |
|||
height: 150rpx; |
|||
border-radius: 8rpx; |
|||
overflow: hidden; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.news-list .list-item .detail { |
|||
width: calc(100% - 210rpx - 20rpx); |
|||
height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.news-list .list-item .detail .title { |
|||
font-size: 34rpx; |
|||
color: #3f3f3f; |
|||
line-height: 44rpx; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .time { |
|||
font-size: 22rpx; |
|||
letter-spacing: 1px; |
|||
color: #aaa; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .page-view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
.news-list .list-item .bottom-detail .page-view .page-view-img { |
|||
width: 30rpx; |
|||
height: 24rpx; |
|||
margin-right: 12rpx; |
|||
} |
|||
|
|||
.news-list .list-item .bottom-detail .page-view .num { |
|||
font-size: 24rpx; |
|||
letter-spacing: 1px; |
|||
color: #aaa; |
|||
} |
|||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in new issue