设计样式分享-营销平台类
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文分享了B端营销平台的后台样式设计，共8种页面类型，供<span style="color: black;">大众</span>参考。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.表格查看列字段：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q7.itc.cn/q_70/images03/20240617/6d5916ea3e444c609c80115b308bd551.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">点击表格行末尾“查看”，悬浮出该行所有列字段信息：字段太多时，不需要<span style="color: black;">上下</span>滚动，<span style="color: black;">亦</span>能查看行该行<span style="color: black;">所有</span>信息。<span style="color: black;">制品</span>人员在设计<span style="color: black;">摆列</span>行字段的时候，将“可编辑的字段+核心字段”排在最前面，点击查看或鼠标悬停2秒后悬浮该行<span style="color: black;">所有</span>字段信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.表格行高设置：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q3.itc.cn/q_70/images03/20240617/cec615e503474d9a8ac8b10c26d3c2c0.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户可<span style="color: black;">按照</span>个人<span style="color: black;">运用</span>习惯以及电脑分辨率<span style="color: black;">体积</span>自定义页面表格的行高(例如设计三个行高值，紧凑型32px、中等型40px、宽松型48px)，刷新网页后仍<span style="color: black;">保存</span><span style="color: black;">这次</span>设置。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.<span style="color: black;">相关</span>表格（父子表）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q2.itc.cn/q_70/images03/20240617/2ef885d9756c477ea575ee75c1ee6076.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">针对<span style="color: black;">繁杂</span>的业务场景，需要在一个<span style="color: black;">查找</span>列表页面<span style="color: black;">同期</span>查看“父子表单”数据（<span style="color: black;">相关</span>表格）。在父表<span style="color: black;">选取</span>数据后<span style="color: black;">相关</span>产生子表，再在子表进行业务操作。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.表格行数据详情</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q1.itc.cn/q_70/images03/20240617/9f4562446e964eef87495781798c324f.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">针对营销类业务场景，一个单据对应多个商品信息，<span style="color: black;">况且</span>订单属性字段与商品属性字段<span style="color: black;">没法</span>都存在于列表表头，此时<span style="color: black;">能够</span>将商品属性字段收起，需要时点击展开查看，节省页面空间<span style="color: black;">同期</span><span style="color: black;">亦</span>能满足业务查看订单<span style="color: black;">所有</span>商品信息的<span style="color: black;">需要</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.<span style="color: black;">选取</span>弹窗</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q9.itc.cn/q_70/images03/20240617/260cc7f5a07b4fd8a5ad599f69772fa0.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q4.itc.cn/q_70/images03/20240617/83cf548e93684b9b82b33766e01b4ec9.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">选取</span>弹窗分为待选跟已选两个页签，待选页签除了支持系统<span style="color: black;">查找</span>后的数据手动<span style="color: black;">选取</span><span style="color: black;">亦</span>支持导入线下数据文件，已选页签支持删除手动<span style="color: black;">选取</span>的数据<span style="color: black;">亦</span>支持删除导入的文件，<span style="color: black;">同期</span>支持导出当前所有已选数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6.高级筛选</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q2.itc.cn/q_70/images03/20240617/911a3fd70c034b3f8fc9387b5a022d37.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>将不常用的筛选<span style="color: black;">要求</span>收起到“高级筛选”按钮，点击“高级筛选”弹窗展示<span style="color: black;">更加多</span>筛选<span style="color: black;">要求</span>信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7.审批页面</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q3.itc.cn/q_70/images03/20240617/3a9fc702f8e447a59066648ae2e6696c.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">审批操作按钮前置，满足当前页面用户<span style="color: black;">重点</span>操作<span style="color: black;">需要</span>，<span style="color: black;">同期</span><span style="color: black;">亦</span>支持查看审批流程<span style="color: black;">关联</span>信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">8.级联<span style="color: black;">选取</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://q7.itc.cn/q_70/images03/20240617/d132f3d0d62b436cb8ea2fe0356ed879.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">支持级联<span style="color: black;">选取</span>任何一级内容，每一级都支持级内搜索，<span style="color: black;">同期</span><span style="color: black;">能够</span>展示<span style="color: black;">所有</span><span style="color: black;">选取</span>数据，支持单条删除已选数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由 @Zero0304 原创发布于人人都是<span style="color: black;">制品</span>经理。未经作者许可，禁止转载。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自Unsplash，基于CC0协议。<a style="color: black;"><span style="color: black;">返回<span style="color: black;">外链论坛：www.fok120.com</span>，查看<span style="color: black;">更加多</span></span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">责任编辑：网友投稿</span></p>
楼主的文章非常有意义，提升了我的知识水平。 大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。
页:
[1]