hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-11 03:46:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加折叠效果

Browse Source
This commit is contained in:
daihh
2022-11-21 14:43:18 +08:00
parent 374769f931
commit 22b1857469
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/resource/articeDetail.vue
View File

@@ -14,10 +14,11 @@
</view> </view>
<view class="adetail-body"> <view class="adetail-body">
<!-- class="ql-container" --> <!-- class="ql-container" -->
<view class="ql-container"> <view class="ql-container more-info" :style="{height:articleMore? '500upx':'auto'}">
<!-- class="ql-editor" --> <!-- class="ql-editor" -->
<u-parse class="ql-editor" :content="detail.content" :tagStyle="style"></u-parse> <u-parse class="ql-editor" :content="detail.content" :tagStyle="style"></u-parse>
</view> </view>
<view v-if="articleMore && detail.content.length>200" @click="showMore" style="text-align: center;color: #387DF7;"><text>查看更多∨</text> </view>
<!-- <view v-if="userInfo.aid==detail.sysCreateAid" style="display: flex;justify-content: flex-end;color: #b1b1b1;padding-top: 10px;"> <!-- <view v-if="userInfo.aid==detail.sysCreateAid" style="display: flex;justify-content: flex-end;color: #b1b1b1;padding-top: 10px;">
<u-icon @click="toEdit" name="edit-pen-fill" label="编辑"></u-icon> <u-icon @click="toEdit" name="edit-pen-fill" label="编辑"></u-icon>
<u-icon @click="del" style="margin-left: 20px;" name="trash" label="删除"></u-icon> <u-icon @click="del" style="margin-left: 20px;" name="trash" label="删除"></u-icon>
@@ -43,6 +44,7 @@
page:1,//当前页数 page:1,//当前页数
pagesize:10, //总页数 pagesize:10, //总页数
fileUrl:this.$config.fileUrl, fileUrl:this.$config.fileUrl,
articleMore:true,
style: { style: {
// 字符串的形式 // 字符串的形式
p: 'word-break:break-all;font-size: 28upx;letter-spacing:1rpx; line-height: 1.6;margin-bottom:25px', p: 'word-break:break-all;font-size: 28upx;letter-spacing:1rpx; line-height: 1.6;margin-bottom:25px',
@@ -128,6 +130,9 @@
setTimeout(function(){ uni.hideLoading() },100); setTimeout(function(){ uni.hideLoading() },100);
}) })
}, },
showMore(){
this.articleMore=false;
},
commentSuccess(rs){ commentSuccess(rs){
//console.log(rs,'success'); //console.log(rs,'success');
this.$refs.comComments.loadData(false); this.$refs.comComments.loadData(false);
@@ -245,6 +250,20 @@
} }
} }
} }
.more-info{overflow: hidden; position: relative;}
.more-info::after{
content: '';
position: absolute;
width: 100%;
height: 30px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0ff, endColorstr=#fff, GradientType=0);
bottom: 0;
left: 0;
}
.ql-container { .ql-container {
display: block; display: block;
position: relative; position: relative;