css 展开和折叠文章段落

<view class="mx-3" :class="isOpen ? 'expand-desc' : 'fold-desc'">
    <view class="mask"></view>
    {{ 内容 }}
</view>
<view class="open" @click="expandDesc" v-if="!isOpen">
    展开全文
    <image class="img" src="下图标" mode="widthFix"></image>
</view>

.expand-desc,
.fold-desc {
    width: calc(100% - 20px);
    position: relative;
    margin: 0 auto;
    color: #999;
    font-size: 26rpx;
}

.fold-desc {
    height: 180rpx;
    overflow: hidden;

    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(rgba(255, 255, 255, 0.3) 50%, #fff);
    }
}

.open {
    position: relative;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #ff407e;
    font-size: 24rpx;

    .img {
        width: 20rpx;
        margin-left: 10rpx;
    }
}