diff --git a/composer.json b/composer.json
index 8b7975010666590934196d16cbe973421063c844..361b83973edb0054e17742025cce06c627e0bd90 100755
--- a/composer.json
+++ b/composer.json
@@ -12,6 +12,7 @@
             "email": "luckyoupan@163.com"
         }
     ],
+    "minimum-stability": "dev",
     "require": {
         "php": ">=7.1.0",
         "dcat/laravel-admin": "~2.0"
diff --git a/resources/assets/css/index.css b/resources/assets/css/index.css
index 7181983d627eb560f0cc29dd4fab0a2ff7bf6e04..87a58f32726e118de20484692eaf9c4c64ec1519 100755
--- a/resources/assets/css/index.css
+++ b/resources/assets/css/index.css
@@ -3,11 +3,75 @@
     cursor: pointer;
 }
 
+.dengje-gallery-group {
+    position: relative;
+    margin: 5%;
+}
+
+.dengje-gallery-group.multiple .gallery-img-wrapper.bg-left {
+    top: 5%;
+    left: -5%;
+    -webkit-transform: rotate(-5deg);
+    -moz-transform: rotate(-5deg);
+    -o-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+}
+
+.dengje-gallery-group.multiple .gallery-img-wrapper.bg-left:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: #eff4de;
+    display: block;
+}
+
+.dengje-gallery-group.multiple .gallery-img-wrapper.bg-right {
+    top: 5%;
+    left: 5%;
+    -webkit-transform: rotate(5deg);
+    -moz-transform: rotate(5deg);
+    -o-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    transform: rotate(5deg);
+}
+
+.dengje-gallery-group.multiple .gallery-img-wrapper.bg-right:before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: #768590;
+    display: block;
+}
+
+.dengje-gallery-group .gallery-img-wrapper {
+    padding: 3%;
+    background: #fff;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    -webkit-box-shadow: .2em .2em .5em rgb(0 0 0 / 30%);
+    -moz-box-shadow: .2em .2em .5em rgba(0, 0, 0, 0.3);
+    box-shadow: .2em .2em .5em rgb(0 0 0 / 30%);
+}
+
+.dengje-gallery-group .gallery-img-wrapper > img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.dengje-gallery-group .bg-multi {
+    display: none;
+}
 
-.img-border{
-    padding: .25rem;
-    background-color: #eff1f7;
-    border: 1px solid #dae1e7;
-    border-radius: .5rem;
+.dengje-gallery-group.multiple .bg-multi {
+    display: block;
+}
 
+.hide {
+    display: none;
 }
diff --git a/resources/views/gallery.blade.php b/resources/views/gallery.blade.php
deleted file mode 100755
index 44d55629455fabb8f0fd84f2c7b98bbf81161637..0000000000000000000000000000000000000000
--- a/resources/views/gallery.blade.php
+++ /dev/null
@@ -1,8 +0,0 @@
-
-<img src="{{$src}}" class="img-border" id="{{$src}}" width="{{$width}}" height="{{$height}}" alt="">
-
-<script type="text/javascript">
-    var image = new Viewer(document.getElementById('{{$src}}'),{
-        url: 'data-original'
-    });
-</script>
diff --git a/resources/views/gallerys.blade.php b/resources/views/gallerys.blade.php
index 52b0a3bf92e7d9ad27ff0b729cbc03e67b9dc235..c1dde9691637b098476ab487d4bc3007965a1f76 100644
--- a/resources/views/gallerys.blade.php
+++ b/resources/views/gallerys.blade.php
@@ -1,14 +1,21 @@
-@php
-    $rand = rand(1,999999);
-@endphp
-<div id="{{$rand}}">
-    @foreach ($src as $v)
+<style>
+    .dengje-gallery-group {
+        height: {{ $height }}px;
+        width: {{ $width }}px;
+        font-size: {{ $width / 12 }};
+    }
+</style>
 
-    <img src="{{$v}}" class="img-border" id="{{$v}}" width="{{$width}}" height="{{$height}}" alt="">
-    @endforeach
+<div id="{{ $id }}" class="dengje-gallery-group {{ count($src) > 1 ? 'multiple' : '' }}">
+    <div class="gallery-img-wrapper bg-multi bg-left"></div>
+    <div class="gallery-img-wrapper bg-multi bg-right"></div>
+    <div class="gallery-img-wrapper">
+        @foreach ($src as $k => $v)
+            <img src="{{ $v }}" class="{{ $k >= 1 ? 'hide' : '' }}" alt="">
+        @endforeach
+    </div>
 </div>
-<script type="text/javascript">
-    var image = new Viewer(document.getElementById('{{$rand}}'),{
-        url: 'data-original'
-    });
+
+<script require="@dengje.gallery">
+    var image = new Viewer(document.getElementById('{{ $id }}'));
 </script>
diff --git a/src/GalleryServiceProvider.php b/src/GalleryServiceProvider.php
index b0353b91b36751197a5fe19e2de4c0ad6c0726e2..d789a0f0f9f3a29430170b19c817457d2db0f9ef 100755
--- a/src/GalleryServiceProvider.php
+++ b/src/GalleryServiceProvider.php
@@ -13,11 +13,9 @@ use App\Admin\Extensions\Popover;
 class GalleryServiceProvider extends ServiceProvider
 {
 	protected $js = [
-//        'js/index.js',
         'js/viewer.js',
-
-
     ];
+
 	protected $css = [
 		'css/index.css',
         'css/viewer.css',
@@ -32,20 +30,12 @@ class GalleryServiceProvider extends ServiceProvider
 	{
 		parent::init();
 
-
-        // 加载静态文件
-        Admin::requireAssets('@dengje.gallery');
-
         // 加载插件
-        Admin::booting(function () {
-            Column::extend('gallery', Gallery::class);
-        });
-
-
+        Column::extend('gallery', Gallery::class);
 	}
 
-	public function settingForm()
-	{
-		return new Setting($this);
-	}
+//	public function settingForm()
+//	{
+//		return new Setting($this);
+//	}
 }
diff --git a/src/Grid/Gallery.php b/src/Grid/Gallery.php
index 255aa53b6e6729acd19972ff60789d19b9a2516b..0f63cac7ccba440997c1b2c3274949590d67c0d1 100755
--- a/src/Grid/Gallery.php
+++ b/src/Grid/Gallery.php
@@ -1,53 +1,44 @@
 <?php
+
 namespace Dengje\Gallery\Grid;
 
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Grid\Displayers\AbstractDisplayer;
+use Dcat\Admin\Support\Helper;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Support\Facades\Storage;
 
 class Gallery extends AbstractDisplayer
 {
-    public function display($server='',$width=100,$height='')
+    public function display(array $args = ['server' => '', 'width' => 100, 'height' => 100])
     {
+        $defaultArgs = [
+            'server' => '',
+            'width' => 100,
+            'height' => 100,
+        ];
+
+        ['server' => $server, 'width' => $width, 'height' => $height] = array_merge($defaultArgs, $args);
 
         if ($this->value instanceof Arrayable) {
             $this->value = $this->value->toArray();
         }
 
-        if(!is_array($this->value)){
-            if (url()->isValidUrl($this->value) || mb_strpos($this->value, 'data:image') === 0) {
-                $src = $this->value;
+        $groupId = $this->grid->getTableId().'_'.$this->getKey().'_'.$this->column->getName().'_gallery_group';
+
+        $src = []; // 避免 $src 未定义
+
+        foreach (Helper::array($this->value) as $k => $v) {
+            if (url()->isValidUrl($v) || mb_strpos($v, 'data:image') === 0) {
+                $src[] = $v;
             } elseif ($server) {
-                $src = rtrim($server, '/') . '/' . ltrim($this->value, '/');
+                $src[] = rtrim($server, '/').'/'.ltrim($v, '/');
             } else {
-                $src = Storage::disk(config('admin.upload.disk'))->url($this->value);
+                $src[] = Storage::disk(config('admin.upload.disk'))->url($v);
             }
-            return Admin::view('dengje.gallery::gallery', ['src' => $src, 'width' => $width, 'height' => $height]);
-        }else{
-            foreach ($this->value as $k=>$v){
-                if (url()->isValidUrl($v) || mb_strpos($v, 'data:image') === 0) {
-                    $src[] = $v;
-                } elseif ($server) {
-                    $src[] = rtrim($server, '/') . '/' . ltrim($v, '/');
-                } else {
-                    $src[] = Storage::disk(config('admin.upload.disk'))->url($v);
-
-                }
 
-            }
-            return Admin::view('dengje.gallery::gallerys', ['src' => $src, 'width' => $width, 'height' => $height]);
         }
-
-
-
-
-
-
-
-
-
+        return Admin::view('dengje.gallery::gallerys', ['src' => $src, 'width' => $width, 'height' => $height, 'id' => $groupId]);
     }
 }
-