查询条件界面优化(2)

最新推荐文章于 2021-09-22 06:35:08 发布

浩琳的学习日记

最新推荐文章于 2021-09-22 06:35:08 发布

阅读量942

点赞数

文章标签：界面优化

本文链接：https://blog.csdn.net/weixin_38978529/article/details/103313578

版权

本文介绍了查询条件界面的优化措施，包括在图表上方显示查询结果以增强关联性，添加小图标提升视觉效果，设定工段及年份的默认值方便用户操作，以及设置顶端标题背景以提升整体观感。通过这些改进，实现了更直观、易用的用户界面。

摘要由CSDN通过智能技术生成

    本次页面优化的目的主要是给查询条件前加上小图标，设置顶端标题背景
及字体颜色,在图表上方显示查询结果，设置工段以及年份的默认值，调整图表
下方柱及线的位置。具体实现过程如下:

1.在图表上方显示查询结果

为了与查询条件相呼应，代码如下:

	<yd-cell-group title="查询结果" class="demo-small-pitch ">
				<div style="margin-top: 0.01rem;padding: 0.3125rem 0rem;background-color: white;box-shadow: rgb(190, 190, 199) 2px 3px 10px;">
					<div id="myChart1" :style="{width: '100%', height: '350px'}"></div>
				</div>
				</yd-cell-group>

其中box-shadow: rgb(190, 190, 199) 2px 3px 10px;代表的是设置边框阴影。

2.添加小图标

  <yd-cell-item arrow>
				<yd-icon slot="icon" name="verifycode" size=".40rem" color="#FF685D"></yd-icon>
                <span slot="left">工段：</span>