OUC 软件工程第04组 Beta冲刺（3/3）

本博客系OUC软件工程第十一次作业：Beta冲刺 （3/3）

一、过去完成了哪些任务

网站在投入使用了一段时间后，不少同学根据他们的使用体验反馈了网站存在的一些问题。我针对他们提出的意见，总结了以下问题：

1. 首页的图片展示存在bug，在不同缩放比的电脑中，图片下方会出现异常滚动条。

   

2. 点击主页的选取图片，弹窗中出现的文件列表中包含了非图片文件，不简洁，增加了选取图片的难度。

   

3. 放大倍数比较单一，不能调整放大倍数

   

因此，前端针对这三个问题做出了修改和完善。

二、完成的工作（遇到的困难和解决方法）

1. 异常滚动条的问题。

原因：父盒子采用百分比定宽，因此在任何分辨率的屏幕下，占用的宽度都是相同的。而子盒子（即图片），采用的是 px 定宽，因此在不同的分辨率的屏幕下，占用的宽度是不同的。因此出现了不同分辨率屏幕中，图片底部出现滚动条的问题。

解决方法：把父盒子宽度定义方式改为 px定宽。

最终效果：滚动条如愿消失

2. 文件列表中显示了各类文件的问题

这个问题比较好解决，就是调用 el-upload 组件的参数即可。

具体调用如下：

最终效果：

可以看到文件列表中只有文件夹或特定格式的图片。

3. 放大倍数单一的问题

为了解决这个问题，我设置了三个放大倍数，分别是：2倍、4倍和8倍。

实现效果如下：

三类强度可选：

放大 2 倍：

放大 4 倍：

放大 8 倍：

具体实现细节：

预设三个样式对象，对应三种放大倍数下的各个变量值。

magnifiedTimesArr: [
        {
          time: 2,
          magnifiedImgWidth: "800px",
          magnifiedImgHeight: "800px",
          magnifiedBoxWidth: "100px",
          magnifiedBoxHeight: "100px",
        },
        {
          time: 4,
          magnifiedImgWidth: "1600px",
          magnifiedImgHeight: "1600px",
          magnifiedBoxWidth: "200px",
          magnifiedBoxHeight: "200px",
        },
        {
          time: 8,
          magnifiedImgWidth: "3200px",
          magnifiedImgHeight: "3200px",
          magnifiedBoxWidth: "400px",
          magnifiedBoxHeight: "400px",
        },
      ],

根据用户的选择，把样式绑定到对应的元素上即可。

三、燃尽图

四、结语

至此，项目的开发已经进入了尾声，随着 bug 一个一个地被修改，这次小组合作也即将结束。在这里衷心感谢小组内的每一位成员对项目做出的贡献，辛苦大家了。这次小组合作对于我来说，一是增加了同学之间的羁绊，使得我们更加了解彼此；二是学到了很多知识，例如 node 版本管理工具 nvm ，后来我也用 nvm 解决过我碰到的实际问题。

聚是一团火，散是满天星，有缘再合作！