vgvue-img-preview
Version:
> 本组件是一个基于 vue 编写的 vue 图片预览组件,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果,比较适合给文章及页面的所有图片添加预览效果。预览背景色,关闭按钮颜色,控制条的背景也和字体颜色都可自定义,兼容 ie9+,火狐,Safari,谷歌浏览器,支持多图预览
62 lines (48 loc) • 3.82 kB
CSS
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1604985947137'); /* IE9 */
src: url('iconfont.eot?t=1604985947137#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1604985947137') format('woff'),
url('iconfont.ttf?t=1604985947137') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1604985947137#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" ;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconjiazaizhong:before {
content: "\e6b1";
}
.icontupianjiazaishibai:before {
content: "\ec0d";
}
.iconicon_arrow_right:before {
content: "\e60d";
}
.iconjiantouzuo:before {
content: "\e620";
}
.iconxuanzhuan:before {
content: "\e66f";
}
.iconxuanzhuan1:before {
content: "\e670";
}
.iconyuanshibili:before {
content: "\e86b";
}
.iconfangda:before {
content: "\e65d";
}
.iconsuoxiao:before {
content: "\e65e";
}
.iconquanping:before {
content: "\e698";
}
.iconguanbi:before {
content: "\e764";
}