首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 van-ellipsis 内容超过一行会省略 w33-宽度33%剩余1%做了图片之间间隙.md

列表文章布局-Cell 单元格组件-

Cell 单元格组件：https://youzan.github.io/vant/#/zh-CN/cell

结构：src/views/home/index.vue

放在van-cell标签内容盒子里

三张图

<div class="article_item"><h3 class="van-ellipsis">PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新</h3><div class="img_box"><van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/><van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/><van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/></div><div class="info_box"><span>你像一阵风</span><span>8评论</span><span>10分钟前</span><span class="close"><van-icon name="cross"></van-icon></span></div>
</div>

一张图

<div class="article_item"><h3 class="van-ellipsis">PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新</h3><div class="img_box"><van-image class="w100" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/></div><div class="info_box"><span>你像一阵风</span><span>8评论</span><span>10分钟前</span><span class="close"><van-icon name="cross"></van-icon></span></div>
</div>

van-ellipsis vant提供的内置样式，作用：内容超过一行会省略。
w33 w100 宽度33%剩余1%做了图片之间间隙

样式：

.article_item{h3{//font-weight: normal  文本粗细 标准，默认值font-weight: normal;line-height: 2;}.img_box{display: flex;// 项目位于各行之间留有空白的容器内。justify-content: space-between;.w33{width: 33%;height: 90px;}.w100{width: 100%;height: 180px;}}.info_box{color: #999;line-height: 2;position: relative;font-size: 12px;                  span{padding-right: 10px;&.close{border: 1px solid #ddd;border-radius: 2px;line-height: 15px;height: 12px;width: 16px;text-align: center;padding-right: 0;font-size: 8px;position: absolute;right: 0;top: 7px;}}}
}

首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 van-ellipsis 内容超过一行会省略 w33-宽度33%剩余1%做了图片之间间隙.md相关推荐

Vue--vant-cell单元格组件跳转路由的三种方式
//第一种采用拼接字符串的方法传递动态参数 :to="/article/+article.art_id" //第二种采用模板字符串的方法传递参数 :to="`/art ...
pandas将列表list插入到dataframe的单元格中、pandas使用read_csv函数读取文件并设置保留数值的前置0( leading zeroes)
pandas将列表list插入到dataframe的单元格中.pandas使用read_csv函数读取文件并设置保留数值的前置0( leading zeroes) 目录
利用vantUI组件库中的Field 输入框、Cell 单元格完成金额数字框的数字转金额格式和金额大写
近期公司的任务需要这个功能,利用vantUI组件库中的Field 输入框.Cell 单元格完成金额数字框的数字转金额格式和金额大写 1.首先写工具类utils.js // 将数字转换成金额千字文格式显 ...
POI导出word中cell单元格内换行问题
利用POI导出word时,换行符"\r\n"无法被正常识别,利用以下方式进行了word中cell单元格内的换行问题. 首先在需要换行字符串的对应位置处插入相应标记符,然后在设置wo ...
2023-02-11：给你两个整数 m 和 n 。构造一个 m x n 的网格，其中每个单元格最开始是白色，请你用红、绿、蓝三种颜色为每个单元格涂色。所有单元格都需要被涂色，涂色方案需要满足：
2023-02-11:给你两个整数 m 和 n .构造一个 m x n 的网格,其中每个单元格最开始是白色, 请你用红.绿.蓝三种颜色为每个单元格涂色.所有单元格都需要被涂色, 涂色方案需要满足: ...
pdfpcell输出换行_poi导出Excel（cell单元格里的一串文字，换行显示，设置字体）...
/** * 民主推荐结果导出列表,班子换届 * * @param formBean * @param request * @param response * @param redirectAttrib ...
vant在cell中加表格_Vant Cell 单元格
引入import Vue from 'vue'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); ...
网格布局(固定单元格间隔，单元格、容器大小不定)布局使用
官方案例为 auto-fill 固定单元格,容器不定的使用延申为固定单元格间隔,单元格.容器大小不定)布局使用代码如下固定间隔为 10px 单元格最小值为200px 容器不定 ...
vant 做表格_Vant Cell 单元格
引入import Vue from 'vue'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); ...
DataGridView中在新增行时怎样设置每个Cell单元格的字体样式
场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...

首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 van-ellipsis 内容超过一行会省略 w33-宽度33%剩余1%做了图片之间间隙.md

列表文章布局-Cell 单元格组件-

首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 van-ellipsis 内容超过一行会省略 w33-宽度33%剩余1%做了图片之间间隙.md相关推荐

最新文章

热门文章