首页 描述列表

下面的案例展示比较复杂,所以在此特别指出几个类:

.article

给item加上article之后,该item独占整行,并且label居上显示。跟.lines类似。

适合富文本,大段文本。

.tag

给item加上tag之后,能够将tag-item自动渲染成标签样式。不影响布局。

.poster

给item加上poster之后,能够使item占两行。和.box类似。

.line 和 .short-line

给item加上line之后,能够使item独占一行。一般,如果item落单了,只占了一列,可以用该类,弥补缺口。

.short-line能够使item占两列,可以用它来弥补缺口。就像截图中的标签item一样。

但是这两个类比较实用,可根据实际情况调整布局,比如截图中的商品标题就用了.short-line。

.box

能够使item占两行,就像.poster一样。不过.poster默认对图片进行了样式限定。可以自行调整使用。

.lines

使item独占一行,并且label居上显示。可以用来显示大块的内容,比如图片、视频、富文本。

描述列表-基本
商品分类
图书
商品标题
中国科幻基石丛书:三体全集(套装1-3册)
封面
作者
刘慈欣
价格
50.30
销量
300000
出版社
清华大学出版社
装帧
平装-胶订
标签
科幻
畅销
商品详情
第一部 《三体》 文化大革命如火如荼地进行,天文学家叶文洁在其间历经劫难,被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线,向宇宙发出地球文明的第一声啼鸣,取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下,四光年外的“三体文明”百余次毁灭与重生,正被逼迫不得不逃离母星,而恰在此时,他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标,彻底改变了人类的命运。 地球的基础科学出现了异常的扰动,纳米科学家汪淼进入神秘的网络游戏《三体》,开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时,接触到了地球上应对三体人到来而形成的一个秘密组织(ETO)。地球防卫组织中国区作战中心通过“古筝计划”,一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋,获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后,庞大的三体舰队开始向地球进发,人类的末日悄然来临 [3-6] 。 第二部 《三体2:黑暗森林》 三体人在利用科技锁死了地球人的科学之后,出动庞大的宇宙舰队直扑太阳系,面对地球文明前所未有的危局,人类组建起同样庞大的太空舰队,同时(PDC)利用三体人思维透明的致命缺陷,制订了“面壁计划”。出乎意料地,社会学教授罗辑被选出作为四位“面壁者”之一,展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋,却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中,罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任,想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后,获选增援未来的他在人类舰队被“水滴”清除殆尽前,成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则,任何暴露自己位置的文明都将很快被消灭。 借助于这一发现,他以向全宇宙公布三体世界的位置坐标相威胁,暂时制止了三体对太阳系的入侵,使地球与三体建立起脆弱的战略平衡。 [5-7] 第三部 《三体3:死神永生》 身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心,而程心因参与(PIA)向三体舰队发射探测器的工作,却想让航天专业背景的他放弃安乐死,作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相,地球文明因为黑暗森林打击的存在如临大敌,不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航,却受到有道德的地球文明审判。 不称职的懦弱少女程心被选来充当掌握地球命运的执剑人,她因为罗辑的成功将这看作一项只需花费时间的任务,刚刚任职水滴就向地球发动攻击,程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号,受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击,其上的人员进入四维空间摧毁水滴并占领了“万有引力”号,启动引力波广播向宇宙公布了三体星系的坐标。 云天明与地球取得联系,通过讲述三个自己编创的童话故事,向程心透露大量情报;人类自以为悟出了生存竞争的秘密,开始进行掩体计划,维德领导的空间曲率驱动研究因为程心的错误判断被终止,使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明,战争的方式和武器已经远超出人类的想象,极高文明发出了一张卡片大小的“二向箔”,使整个太阳系压缩为二维平面而毁灭。 在地球人类接近灭亡之际,只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”,她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上,程心遇到关一帆且探讨了宇宙降维的真相,然而超乎一切之上的力量要求宇宙归零重生,在黑域中穿越长达1800万年的时空……程心没有等到云天明到来,和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
描述列表-表格(仿文档)
商品分类
图书
商品标题
中国科幻基石丛书:三体全集(套装1-3册)
封面
作者
刘慈欣
价格
50.30
销量
300000
出版社
清华大学出版社
装帧
平装-胶订
标签
科幻
畅销
商品详情
第一部 《三体》 文化大革命如火如荼地进行,天文学家叶文洁在其间历经劫难,被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线,向宇宙发出地球文明的第一声啼鸣,取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下,四光年外的“三体文明”百余次毁灭与重生,正被逼迫不得不逃离母星,而恰在此时,他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标,彻底改变了人类的命运。 地球的基础科学出现了异常的扰动,纳米科学家汪淼进入神秘的网络游戏《三体》,开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时,接触到了地球上应对三体人到来而形成的一个秘密组织(ETO)。地球防卫组织中国区作战中心通过“古筝计划”,一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋,获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后,庞大的三体舰队开始向地球进发,人类的末日悄然来临 [3-6] 。 第二部 《三体2:黑暗森林》 三体人在利用科技锁死了地球人的科学之后,出动庞大的宇宙舰队直扑太阳系,面对地球文明前所未有的危局,人类组建起同样庞大的太空舰队,同时(PDC)利用三体人思维透明的致命缺陷,制订了“面壁计划”。出乎意料地,社会学教授罗辑被选出作为四位“面壁者”之一,展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋,却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中,罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任,想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后,获选增援未来的他在人类舰队被“水滴”清除殆尽前,成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则,任何暴露自己位置的文明都将很快被消灭。 借助于这一发现,他以向全宇宙公布三体世界的位置坐标相威胁,暂时制止了三体对太阳系的入侵,使地球与三体建立起脆弱的战略平衡。 [5-7] 第三部 《三体3:死神永生》 身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心,而程心因参与(PIA)向三体舰队发射探测器的工作,却想让航天专业背景的他放弃安乐死,作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相,地球文明因为黑暗森林打击的存在如临大敌,不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航,却受到有道德的地球文明审判。 不称职的懦弱少女程心被选来充当掌握地球命运的执剑人,她因为罗辑的成功将这看作一项只需花费时间的任务,刚刚任职水滴就向地球发动攻击,程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号,受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击,其上的人员进入四维空间摧毁水滴并占领了“万有引力”号,启动引力波广播向宇宙公布了三体星系的坐标。 云天明与地球取得联系,通过讲述三个自己编创的童话故事,向程心透露大量情报;人类自以为悟出了生存竞争的秘密,开始进行掩体计划,维德领导的空间曲率驱动研究因为程心的错误判断被终止,使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明,战争的方式和武器已经远超出人类的想象,极高文明发出了一张卡片大小的“二向箔”,使整个太阳系压缩为二维平面而毁灭。 在地球人类接近灭亡之际,只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”,她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上,程心遇到关一帆且探讨了宇宙降维的真相,然而超乎一切之上的力量要求宇宙归零重生,在黑域中穿越长达1800万年的时空……程心没有等到云天明到来,和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
描述列表-边框(好看)
商品分类
图书
商品标题
中国科幻基石丛书:三体全集(套装1-3册)
封面
作者
刘慈欣
价格
50.30
销量
300000
出版社
清华大学出版社
装帧
平装-胶订
标签
科幻
畅销
商品详情
第一部 《三体》 文化大革命如火如荼地进行,天文学家叶文洁在其间历经劫难,被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线,向宇宙发出地球文明的第一声啼鸣,取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下,四光年外的“三体文明”百余次毁灭与重生,正被逼迫不得不逃离母星,而恰在此时,他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标,彻底改变了人类的命运。 地球的基础科学出现了异常的扰动,纳米科学家汪淼进入神秘的网络游戏《三体》,开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时,接触到了地球上应对三体人到来而形成的一个秘密组织(ETO)。地球防卫组织中国区作战中心通过“古筝计划”,一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋,获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后,庞大的三体舰队开始向地球进发,人类的末日悄然来临 [3-6] 。 第二部 《三体2:黑暗森林》 三体人在利用科技锁死了地球人的科学之后,出动庞大的宇宙舰队直扑太阳系,面对地球文明前所未有的危局,人类组建起同样庞大的太空舰队,同时(PDC)利用三体人思维透明的致命缺陷,制订了“面壁计划”。出乎意料地,社会学教授罗辑被选出作为四位“面壁者”之一,展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋,却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中,罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任,想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后,获选增援未来的他在人类舰队被“水滴”清除殆尽前,成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则,任何暴露自己位置的文明都将很快被消灭。 借助于这一发现,他以向全宇宙公布三体世界的位置坐标相威胁,暂时制止了三体对太阳系的入侵,使地球与三体建立起脆弱的战略平衡。 [5-7] 第三部 《三体3:死神永生》 身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心,而程心因参与(PIA)向三体舰队发射探测器的工作,却想让航天专业背景的他放弃安乐死,作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相,地球文明因为黑暗森林打击的存在如临大敌,不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航,却受到有道德的地球文明审判。 不称职的懦弱少女程心被选来充当掌握地球命运的执剑人,她因为罗辑的成功将这看作一项只需花费时间的任务,刚刚任职水滴就向地球发动攻击,程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号,受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击,其上的人员进入四维空间摧毁水滴并占领了“万有引力”号,启动引力波广播向宇宙公布了三体星系的坐标。 云天明与地球取得联系,通过讲述三个自己编创的童话故事,向程心透露大量情报;人类自以为悟出了生存竞争的秘密,开始进行掩体计划,维德领导的空间曲率驱动研究因为程心的错误判断被终止,使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明,战争的方式和武器已经远超出人类的想象,极高文明发出了一张卡片大小的“二向箔”,使整个太阳系压缩为二维平面而毁灭。 在地球人类接近灭亡之际,只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”,她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上,程心遇到关一帆且探讨了宇宙降维的真相,然而超乎一切之上的力量要求宇宙归零重生,在黑域中穿越长达1800万年的时空……程心没有等到云天明到来,和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
描述列表-边框 空隙
商品分类
图书
商品标题
中国科幻基石丛书:三体全集(套装1-3册)
封面
作者
刘慈欣
价格
50.30
销量
300000
出版社
清华大学出版社
装帧
平装-胶订
标签
科幻
畅销
商品详情
第一部 《三体》 文化大革命如火如荼地进行,天文学家叶文洁在其间历经劫难,被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线,向宇宙发出地球文明的第一声啼鸣,取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下,四光年外的“三体文明”百余次毁灭与重生,正被逼迫不得不逃离母星,而恰在此时,他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标,彻底改变了人类的命运。 地球的基础科学出现了异常的扰动,纳米科学家汪淼进入神秘的网络游戏《三体》,开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时,接触到了地球上应对三体人到来而形成的一个秘密组织(ETO)。地球防卫组织中国区作战中心通过“古筝计划”,一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋,获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后,庞大的三体舰队开始向地球进发,人类的末日悄然来临 [3-6] 。 第二部 《三体2:黑暗森林》 三体人在利用科技锁死了地球人的科学之后,出动庞大的宇宙舰队直扑太阳系,面对地球文明前所未有的危局,人类组建起同样庞大的太空舰队,同时(PDC)利用三体人思维透明的致命缺陷,制订了“面壁计划”。出乎意料地,社会学教授罗辑被选出作为四位“面壁者”之一,展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋,却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中,罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任,想到了一个对抗三体文明入侵的办法。科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后,获选增援未来的他在人类舰队被“水滴”清除殆尽前,成功抢夺战舰逃离。此时罗辑证实了宇宙文明间的黑暗森林法则,任何暴露自己位置的文明都将很快被消灭。 借助于这一发现,他以向全宇宙公布三体世界的位置坐标相威胁,暂时制止了三体对太阳系的入侵,使地球与三体建立起脆弱的战略平衡。 [5-7] 第三部 《三体3:死神永生》 身患绝症的云天明买下一颗星星送给暗恋着的大学同学程心,而程心因参与(PIA)向三体舰队发射探测器的工作,却想让航天专业背景的他放弃安乐死,作为被执行人将大脑捐献给阶梯计划。与三体文明的战争使人类首次看到了宇宙黑暗的真相,地球文明因为黑暗森林打击的存在如临大敌,不敢在太空中暴露自己。在零道德的宇宙中发起黑暗战役的战舰被诱导返航,却受到有道德的地球文明审判。 不称职的懦弱少女程心被选来充当掌握地球命运的执剑人,她因为罗辑的成功将这看作一项只需花费时间的任务,刚刚任职水滴就向地球发动攻击,程心为了忠于人性做出了错误的决定。在警示下继续逃离的“蓝色空间”号,受到具有发射引力波能力的“万有引力”号与两个同行的“水滴”追击,其上的人员进入四维空间摧毁水滴并占领了“万有引力”号,启动引力波广播向宇宙公布了三体星系的坐标。 云天明与地球取得联系,通过讲述三个自己编创的童话故事,向程心透露大量情报;人类自以为悟出了生存竞争的秘密,开始进行掩体计划,维德领导的空间曲率驱动研究因为程心的错误判断被终止,使得人类最终没有能够逃脱被高级文明毁灭的命运。因为宇宙中还存在更强大的文明,战争的方式和武器已经远超出人类的想象,极高文明发出了一张卡片大小的“二向箔”,使整个太阳系压缩为二维平面而毁灭。 在地球人类接近灭亡之际,只有程心和艾AA两个幸存者乘坐光速飞船离开。罗辑成为设置于冥王星的地球文明博物馆的“守墓人”,她们在冥王星带走人类文明的精华。在云天明送的恒星的一颗行星上,程心遇到关一帆且探讨了宇宙降维的真相,然而超乎一切之上的力量要求宇宙归零重生,在黑域中穿越长达1800万年的时空……程心没有等到云天明到来,和关一帆在小宇宙中短暂居住后重新进入大宇宙生活 [5] [8] 。
详情属性排列
预览效果
柜台价
16元
适用年龄
1-12岁
生产年份
2023年
尺寸
宽23cm 高 18cm
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-descriptions-info">
    <div class="ul-descriptions-info__item">
        <div class="ul-descriptions-info__item__name">柜台价</div>
        <div class="ul-descriptions-info__item__value">16元</div>
    </div>
    <div class="ul-descriptions-info__item">
        <div class="ul-descriptions-info__item__name">适用年龄</div>
        <div class="ul-descriptions-info__item__value">1-12岁</div>
    </div>
    <div class="ul-descriptions-info__item">
        <div class="ul-descriptions-info__item__name">生产年份</div>
        <div class="ul-descriptions-info__item__value">2023年</div>
    </div>
    <div class="ul-descriptions-info__item">
        <div class="ul-descriptions-info__item__name">尺寸</div>
        <div class="ul-descriptions-info__item__value">宽23cm 高 18cm</div>
    </div>
</div>
.ul-descriptions-info {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    flex-wrap      : wrap;
    flex-shrink    : 1;

    &__item {
        width          : 50%;
        line-height    : 2.5;
        display        : flex;
        align-items    : center;
        justify-content: flex-start;
        color          : #333;

        &__name {
            &::after {
                content: ":";
            }

            margin-right: 5px;
        }
    }
}
@charset "UTF-8";
.ul-descriptions-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-shrink: 1;
}
.ul-descriptions-info__item {
  width: 50%;
  line-height: 2.5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333;
}
.ul-descriptions-info__item__name {
  margin-right: 5px;
}
.ul-descriptions-info__item__name::after {
  content: ":";
}
<view class="ul-descriptions-info">
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__item__name">柜台价</view>
        <view class="ul-descriptions-info__item__value">16元</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__item__name">适用年龄</view>
        <view class="ul-descriptions-info__item__value">1-12岁</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__item__name">生产年份</view>
        <view class="ul-descriptions-info__item__value">2023年</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__item__name">尺寸</view>
        <view class="ul-descriptions-info__item__value">宽23cm 高 18cm</view>
    </view>
</view>
行属性
预览效果
当日价格
当日均价: 11.66元/斤
相对比前日:价格平稳
近7日价格
近7日最高价:11.66元/斤
近7日最低价:11.66元/斤
联系方式
电话:15376477393
邮箱:service@ulthon.com
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-descriptions-row">
    <div class="item label">当日价格</div>
    <div class="item value">当日均价: <span class="primary">11.66</span>元/斤 </div>
    <div class="item value">相对比前日:价格平稳</div>
    <div class="item label">近7日价格</div>
    <div class="item value">近7日最高价:<span class="primary">11.66</span>元/斤 </div>
    <div class="item value">近7日最低价:<span class="primary">11.66</span>元/斤 </div>
    <div class="item label">联系方式</div>
    <div class="item value">电话:15376477393</div>
    <div class="item value">邮箱:service@ulthon.com</div>
</div>
.ul-descriptions-row {
    border: 1px solid #F2F2F2;
    color: #333333;

    .label {
        background-color: #FAFAFA;
    }

    .item {
        padding: 6px 12px;

        &:not(:last-child) {
            border-bottom: 1px solid #F2F2F2;
        }
    }
}
.ul-descriptions-row {
  border: 1px solid #F2F2F2;
  color: #333333;
}
.ul-descriptions-row .label {
  background-color: #FAFAFA;
}
.ul-descriptions-row .item {
  padding: 6px 12px;
}
.ul-descriptions-row .item:not(:last-child) {
  border-bottom: 1px solid #F2F2F2;
}
<view class="ul-descriptions-row">
    <view class="item label">当日价格</view>
    <view class="item value">当日均价: <span class="primary">11.66</span>元/斤 </view>
    <view class="item value">相对比前日:价格平稳</view>
    <view class="item label">近7日价格</view>
    <view class="item value">近7日最高价:<span class="primary">11.66</span>元/斤 </view>
    <view class="item value">近7日最低价:<span class="primary">11.66</span>元/斤 </view>
    <view class="item label">联系方式</view>
    <view class="item value">电话:15376477393</view>
    <view class="item value">邮箱:service@ulthon.com</view>
</view>
简洁属性排列
预览效果
发货
山东临沂
|
免运费
保障
7天无理由退货
|
运费险
正品
专利
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-easy-item">
    <div class="ul-easy-item__name">发货</div>
    <div class="ul-easy-item__desc">
        <div class="ul-easy-item__desc__item">山东临沂</div>
        <i>|</i>
        <div class="ul-easy-item__desc__item">免运费 </div>
    </div>
</div>
<div class="ul-easy-item">
    <div class="ul-easy-item__name">保障</div>
    <div class="ul-easy-item__desc">
        <div class="ul-easy-item__desc__item">7天无理由退货</div>
        <i>|</i>
        <div class="ul-easy-item__desc__item">运费险</div>
    </div>
</div>
<div class="ul-easy-item">
    <div class="ul-easy-item__name">正品</div>
    <div class="ul-easy-item__desc">
        <div class="ul-easy-item__desc__item">专利</div>
    </div>
</div>
.ul-easy-item {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    padding        : 5px 0;

    &__name {
        min-width: 50px;
        color    : #333;
    }

    &__desc {
        color          : #777;
        display        : flex;
        align-items    : center;
        justify-content: flex-start;

        &__item {
            margin: 0 8px;
        }
    }
}
.ul-easy-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px 0;
}
.ul-easy-item__name {
  min-width: 50px;
  color: #333;
}
.ul-easy-item__desc {
  color: #777;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ul-easy-item__desc__item {
  margin: 0 8px;
}
<view class="ul-easy-item">
    <view class="ul-easy-item__name">发货</view>
    <view class="ul-easy-item__desc">
        <view class="ul-easy-item__desc__item">山东临沂</view>
        <i>|</i>
        <view class="ul-easy-item__desc__item">免运费 </view>
    </view>
</view>
<view class="ul-easy-item">
    <view class="ul-easy-item__name">保障</view>
    <view class="ul-easy-item__desc">
        <view class="ul-easy-item__desc__item">7天无理由退货</view>
        <i>|</i>
        <view class="ul-easy-item__desc__item">运费险</view>
    </view>
</view>
<view class="ul-easy-item">
    <view class="ul-easy-item__name">正品</view>
    <view class="ul-easy-item__desc">
        <view class="ul-easy-item__desc__item">专利</view>
    </view>
</view>