hahah
This commit is contained in:
@zuopngfei
parent
0a0a87f170
commit
e8da618342
@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-search": "tdesign-miniprogram/search/search"
|
||||
|
||||
},
|
||||
"navigationBarTitleText": "健康教育"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@ -1,39 +1,186 @@
|
||||
/* pages/articleList/index.wxss */
|
||||
.page {
|
||||
background-color: rgba(248,248,248,1.000000);
|
||||
position: relative;
|
||||
|
||||
.article-page {
|
||||
height: 100vh;
|
||||
padding: 28rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
.image_3 {
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.box_1 {
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 60rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.image_1 {
|
||||
height: 88rpx;
|
||||
}
|
||||
.box_2 {
|
||||
padding-top: 12rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 24rpx;
|
||||
height: 48rpx;
|
||||
margin: 8rpx 0 8rpx 0;
|
||||
}
|
||||
.text_1 {
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(0,0,0,1);
|
||||
font-size: 34rpx;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
line-height: 40rpx;
|
||||
margin: 8rpx 0 0 252rpx;
|
||||
}
|
||||
|
||||
.example-search {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.example-search:not(:last-child) {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
background-color: #f3f3f3;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
max-height: 200rpx;
|
||||
|
||||
.article-title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
.box_3 {
|
||||
background-color: rgba(255,255,255,1.000000);
|
||||
border-radius: 40rpx;
|
||||
align-self: center;
|
||||
margin-top: 36rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 10rpx 10rpx 24rpx;
|
||||
}
|
||||
.text_2 {
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(153,153,153,1);
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 0rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.image-wrapper_1 {
|
||||
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngeb1bdfed45398833c1be38e3d13139b3b54af3b3409a3daffb97ec58f9bb7445) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14rpx 30rpx 14rpx 30rpx;
|
||||
}
|
||||
.thumbnail_1 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.box_4 {
|
||||
margin-bottom: 28rpx;
|
||||
.text_4 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
background-color: rgba(255,255,255,1.000000);
|
||||
border-radius: 24rpx;
|
||||
align-self: center;
|
||||
margin-top: 24rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
.text-group_1 {
|
||||
margin-bottom: 4rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.text_3 {
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(34,34,34,1);
|
||||
font-size: 32rpx;
|
||||
white-space: nowrap;
|
||||
line-height: 32rpx;
|
||||
// margin-right: 92rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.text_4 {
|
||||
width: 470rpx;
|
||||
height: 132rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(96,98,102,1);
|
||||
font-size: 28rpx;
|
||||
font-family: Alibaba-PuHuiTi-R;
|
||||
font-weight: normal;
|
||||
text-align: justify;
|
||||
line-height: 44rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.group_1 {
|
||||
border-radius: 16rpx;
|
||||
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c36a4489e9c740cf9939dc341c42e819_mergeImage.png);
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-top: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.image_4 {
|
||||
height: 68rpx;
|
||||
margin-top: 956rpx;
|
||||
}
|
||||
.box_5 {
|
||||
background-color: rgba(255,255,255,1.000000);
|
||||
border-radius: 24rpx;
|
||||
// height: 236rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 24rpx 24rpx 24rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.text_5 {
|
||||
color: rgba(34,34,34,1);
|
||||
font-size: 32rpx;
|
||||
white-space: nowrap;
|
||||
line-height: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 14rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.box_6 {
|
||||
width: 654rpx;
|
||||
margin-top: 16rpx;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.text_6 {
|
||||
width: 470rpx;
|
||||
height: 132rpx;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(96,98,102,1);
|
||||
font-size: 28rpx;
|
||||
font-family: Alibaba-PuHuiTi-R;
|
||||
font-weight: normal;
|
||||
text-align: justify;
|
||||
line-height: 44rpx;
|
||||
margin-top: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.box_7 {
|
||||
border-radius: 16rpx;
|
||||
background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/370df45eeaff4baaae26de82cabfb553_mergeImage.png);
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -1,14 +1,24 @@
|
||||
<!--pages/articleList/index.wxml-->
|
||||
<view class="article-page">
|
||||
<scroll-view>
|
||||
<view class="example-search">
|
||||
<t-search placeholder="搜索文章" />
|
||||
<view class="page">
|
||||
<image src="../../assets/images/my/my-top-bg.png" class="image_3" mode="widthFix"></image>
|
||||
<view class="box_1">
|
||||
<image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc7eafd88f05e3acc51a4c7ba25ac5d8858a9aaac00d7c68d603489d8e173d890" class="image_1"></image>
|
||||
<view class="box_2">
|
||||
<text class="iconfont icon-fanhui image_2"></text>
|
||||
<text lines="1" class="text_1">健康教育</text>
|
||||
</view>
|
||||
<view class="article-item" wx:for="{{articles}}" wx:key="id" data-index="{{index}}" bindtap="preview">
|
||||
<view class="article-title">
|
||||
{{item.title}}
|
||||
<view class="box_3">
|
||||
<text lines="1" class="text_2">请输入搜索关键词</text>
|
||||
<view class="image-wrapper_1">
|
||||
<image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng33ce9f3cededd2f9cdbc22dc9b0d16282ea0042c9dbcf67e8f364971c4b93af2" class="thumbnail_1"></image>
|
||||
</view>
|
||||
<view class="article-content">{{item.contentText}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="box_5" wx:for="{{articles}}">
|
||||
<view lines="1" class="text_5">{{item.title}}</view>
|
||||
<view class="box_6">
|
||||
<text lines="1" decode="true" class="text_6">{{item.contentText}}</text>
|
||||
<view class="box_7"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
Loading…
x
Reference in New Issue
Block a user