请选择 进入手机版 | 继续访问电脑版
【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

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

二次开发 二次开发 1737 人阅读 | 0 人回复

Riood 发表于 2020-8-27 17:49 | 显示全部楼层 |阅读模式

文章转载自:featwork
话不多说 先上图看效果
BLcURzmlGAFt5Q3HFv8oF88KnjUzUHTRdgNz9PHB.png

WPiPK75IGf1fz4TeZit882aftgmDuOlX07poOEhd.png

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 零钱)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则