Vue简易图片手风琴组件，包含宽度适应（JS操作CSS实现）

---

前言

背景：最近在参与一个企业门户网站项目，有一个需求是做一个图片手风琴，图片和文字都从后端获取，其中鼠标hover之后标题向上移动。
主页请求数据后，统一加载组件，我只需要把这个手风琴封装好即可。

---

一、初版

效果如图，鼠标放上后触发hover的块长度变大，标题以及隐藏在底下的文字向上滑动（animation实现），其余的块缩小宽度，还给了一个灰度的滤镜。

• 问题
  -和大家普遍的图片手风琴没什么太大差异，但可以注意到最右侧似乎一直在动，原因是整个手风琴的宽度大于三个图片的宽度。可以看到右侧有一段留白
  

• 解决方法
  -将CSS中的数值修改即可。

//图像hover之前的总宽度
@width