Q的开发小技巧，优化帖子类型的分类列表

文章转载自：featwork
话不多说 先上图看效果

css代码：

1. .feat-content {
   
2.   min-height: 180rpx;
   
3. }
   
4. .feat-title {
   
5.   font-size: 32rpx;
   
6.   line-height: 52rpx;
   
7.   overflow: hidden;
   
8.   display: -webkit-box;
   
9.   word-break: break-all;
   
10.   -webkit-box-orient: vertical;
    
11.   -webkit-line-clamp: 2;
    
12. }
    
13. .feat-content .feat-title {
    
14.   padding: 0 40% 0 0;
    
15. }
    
16. .feat-text .feat-a {
    
17.   padding: 15rpx 15rpx 0 0;
    
18.   font-size: 28rpx;
    
19.   font-weight: 400;
    
20.   line-height: 48rpx;
    
21.   color: --color(--qui-FC-AAA);
    
22.   float: left;
    
23. }
    
24. .feat-text .feat-b {
    
25.   white-space: nowrap;
    
26.   overflow: hidden;
    
27.   text-overflow: ellipsis;
    
28.   max-width: 30%;
    
29. }
    
30. .feat-imgone image {
    
31.   position: absolute;
    
32.   top: 30rpx;
    
33.   right: 30rpx;
    
34.   display: block;
    
35.   width: 220rpx;
    
36.   height: 180rpx;
    
37.   background: #fff;
    
38.   border-radius: 5rpx;
    
39. }

复制代码

直接替换qui-content.vue文件
位置：src\components\qui-content\qui-content.vue

qui-content.zip (5.45 KB, 下载次数: 35, 售价: 1 零钱)

2020-8-27 17:49 上传

点击文件名下载附件