基于Vue2.0的相册组件

.img-wrapper{显示：flex;位置：相对；边距：20px；高度：120px；.to{宽度：32px；高度：100%；填充：0；}.images::before{位置：绝对；z-指数：5；顶部：0；高度：100%；宽度：84px；内容：'';指针事件：无；背景：-webkit-gradient（线性，左上角，右上角，来自（#fff），color-stop（50％，rgba（0,0,0,0）））;背景：-o-linear-gradient(left,#fff,rgba(0,0,0,0)50%);背景：线性渐变（90deg，#fff，rgba（0、0、0、0）50%）；}.images::after{位置：绝对；z-指数：5；顶部：0；高度：100%；右：0；宽度：84px；内容：'';指针事件：无；背景：-webkit-gradient（线性，右上角，左上角，来自（#fff），color-stop（50％，rgba（0,0,0,0）））;背景：-o-linear-gradient(right,#fff,rgba(0,0,0,0)50%);背景：线性渐变（270deg，#fff，rgba（0、0、0、0）50%）；}.images{位置：相对；溢出：隐藏；宽度：100%；高度：100%；边距：02px；.empty-text{颜色：rgb(158,158,158);高度：100%；显示：弹性；对齐项目：居中；证明内容：居中；}.items{位置：绝对；顶部：0；左：0；显示：弹性；//宽度：6000px；高度：100%；对齐项目：居中；transition:transform0.25sease;.item-img{显示：内联块；框大小：边框框；位置：相对；右边距：8px；border:2pxsolidrgba(0,0,0,0);游标：指针；.item-date{底部：0px；位置：绝对；宽度：100%；高度：24px；背景：rgba(0,0,0,0.2);文本对齐：居中；行高：24px；白颜色;}img{宽度：100%；高度：100%；}}.item-img:hover::after{//边框颜色：#409EFF；不透明度：0；}.item-img::after{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；内容：'';不透明度：0.2；指针事件：无；-webkit-transition：不透明度0.3s缓和；-o-transition:opacity0.3sease;过渡：不透明度0.3s缓和；背景色：#fff；}.is-active{边框颜色：#409eff；}.is-active:after{不透明度:0;}}}}由于做相册业务组件的需要，我觉得挺好看的。分享给大家看看，大家可以自行提取。六点了，我先下班了！.img-wrapper{显示：flex;位置：相对；边距：20px；高度：120px；.to{宽度：32px；高度：100%；填充：0；}.images::before{位置：绝对；z-指数：5；顶部：0；高度：100%；宽度：84px；内容：'';指针事件：无；背景：-webkit-gradient（线性，左上角，右上角，来自（#fff），color-stop（50％，rgba（0,0,0,0）））;背景：-o-linear-gradient(left,#fff,rgba(0,0,0,0)50%);背景：线性渐变（90deg，#fff，rgba（0、0、0、0）50%）；}.images::after{位置：绝对；z-指数：5；顶部：0；高度：100%；右：0；宽度：84px；内容：'';指针事件：无；背景：-webkit-gradient（线性，右上角，左上角，来自（#fff），color-stop（50％，rgba（0,0,0,0）））;背景：-o-linear-gradient(right,#fff,rgba(0,0,0,0)50%);背景：线性渐变（270deg，#fff，rgba（0、0、0、0）50%）；}.images{位置：相对；溢出：隐藏；宽度：100%；高度：100%；边距：02px；.empty-text{颜色：rgb(158,158,158);高度：100%；显示：弹性；对齐项目：居中；证明内容：居中；}.items{位置：绝对；顶部：0；左：0；显示：弹性；//宽度：6000px；高度：100%；对齐项目：居中；transition:transform0.25sease;.item-img{显示：内联块；框大小：边框框；位置：相对；右边距：8px；border:2pxsolidrgba(0,0,0,0);游标：指针；.item-date{底部：0px；位置：绝对；宽度：100%；高度：24px；背景：rgba(0,0,0,0.2);文本对齐：居中；行高：24px；白颜色;}img{宽度：100%；高度：100%；}}.item-img:hover::after{//边框颜色：#409EFF；不透明度：0；}.item-img::after{位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；内容：'';不透明度：0.2；指针事件：无；-webkit-transition：不透明度0.3s缓和；-o-transition:opacity0.3sease;过渡：不透明度0.3s缓和；背景色：#fff；}.is-active{边框颜色：#409eff；}.is-active:after{不透明度:0;}}}}