✨ Add gallery module

README.md

@@ -9,6 +9,7 @@
 | vditor | halo-vditor |
 |--------|-------------|
 | 3.9.7  | 3.9.8       |
+| 3.9.8  | 3.9.9       |
 
 ## 如何使用
 
@@ -677,3 +678,7 @@ Vditor 使用 [MIT](https://opensource.org/licenses/MIT) 开源协议。
 终于，我们决定开始在 Sym 中自己实现编辑器。随着几个版本的迭代，Sym 的编辑器也日趋成熟。在我们运营的社区[链滴](https://ld246.com)上陆续有人问我们是否能将编辑器单独抽离出来提供给大家使用。与此同时，我们的前端主程 [V](https://ld246.com/member/Vanessa) 同学对于维护分散在各个项目中的编辑器也感到有点力不从心，外加对 TypeScript 的好感，所以就决定使用 ts 来实现一个全新的浏览器端 md 编辑器。
 
 于是，Vditor 就这样诞生了。
+
+
+<joe-cloud type="bd" url="https://www.baidu.com" password="" title="TEST"></joe-cloud>
+<joe-cloud type="bd" url="https://www.baidu.com" password="" title="TEST"></joe-cloud>

src/js/halo/index.css

@@ -232,3 +232,64 @@
   margin-top: 5px;
 }
 
+.gallery {
+  border: 1px solid #F4F4F4;
+  border-radius: 3px;
+  padding: 10px 15px;
+}
+.gallery .title {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.gallery .title .iconfont {
+  font-size: 30px;
+  margin-right: 5px;
+}
+.gallery .image-list {
+  display: flex;
+  width: 100%;
+}
+.gallery .image-list .container .img {
+  width: auto;
+  max-width: unset;
+  border-radius: 3px;
+}
+.gallery.gallery.grid .image-list {
+  flex-wrap: wrap;
+  column-gap: 2%;
+  row-gap: 10px;
+}
+.gallery.gallery.grid .image-list .container {
+  width: 32%;
+  height: 0;
+  position: relative;
+  padding-bottom: 32%;
+}
+.gallery.gallery.grid .image-list .container .img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+@media screen and (min-width: 1400px) {
+  .gallery.gallery.grid .image-list .container {
+    width: 23%;
+    padding-bottom: 23%;
+  }
+}
+.gallery.gallery.linear .image-list {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: auto;
+  width: 100%;
+  gap: 10px;
+}
+.gallery.gallery.linear .image-list .container {
+  height: 400px;
+}
+.gallery.gallery.linear .image-list .container .img {
+  height: 99%;
+}
+