制作临境模板基本完成，可使用

@@ -87,38 +87,48 @@ class VideoTempController extends AdminController
                 $form->showFooter();
                 // 设置字段宽度
                 $form->width(8, 3);
-                $form->column(12, function (Form\BlockForm $form) {
-                    $form->text('title');
-                    $form->radio('type')->options(['视频', '图文音频'])->default(0);
-                    $form->radio('bg_type')
-                        ->options([1=>'视频', 2=>'图片'])
-                        ->when(1,function (Form\BlockForm $form){
-                            $form->file('bg_url')
-                                ->accept('mp4')
-                                ->autoUpload()
-                                ->uniqueName()
-                                ->addElementClass('bg_url');
-                        })
-                        ->when(2,function (Form\BlockForm $form){
-                            $form->multipleImage('bg_url')
-                                ->limit(5)
-                                ->uniqueName()
-                                ->addElementClass('multi_bg_url');
-                        })
-                        ->default(1);
-                    $form->radio('bg_music')
-                        ->options(['无', '有'])
-                        ->when(1,function (Form\BlockForm $form){
-                            $form->text('bgm_url');
-                        })
-                        ->default(0);
-                    $form->number('top');
-                    $form->number('left');
-                    $form->number('font_size');
-                    $form->number('sn');
-                    $form->radio('state')->options(['不显示', '显示'])->default(0);
 
-                });
+                $form->text('title');
+                $form->radio('type')->addElementClass('type')
+                    ->options([1=>'图文音频',2=>'视频'])->default(1);
+                $form->radio('bg_type')
+                    ->options([1=>'视频', 2=>'图片'])
+                    ->when(1,function (Form\BlockForm $form){
+                        $form->file('bg_url')
+                            ->accept('mp4')
+                            ->autoUpload()
+                            ->uniqueName()
+                            ->addElementClass('bg_video_url');
+                    })
+                    ->when(2,function (Form\BlockForm $form){
+                        $form->multipleImage('bg_url')
+                            ->limit(5)
+                            ->uniqueName()
+                            ->addElementClass('bg_img_url');
+                    })
+                    ->default(1);
+                $form->radio('bg_music')
+                    ->options(['无', '有'])
+                    ->when(1,function (Form\BlockForm $form){
+                        $form->file('bgm_url')
+                            ->accept('mp3,aac,wav')
+                            ->autoUpload()
+                            ->uniqueName()
+                            ->addElementClass('bgm_url');
+                    })
+                    ->default(0);
+                $form->number('top');
+                $form->number('left');
+                $form->number('font_size');
+                $form->color('text_color')->addElementClass('text_color');
+                $form->color('text_bg_color')->addElementClass('text_bg_color');
+                $form->number('opacity')->min(0)->max(100)
+                    ->addElementClass('opacity')->default(90)
+                    ->help('范围为0-100，100表示不透明，0表示完全透明');
+
+                $form->number('sn');
+                $form->radio('state')->options(['不显示', '显示'])->default(0);
+
             });
 
             $form->block(4, function (Form\BlockForm $form) {

@@ -21,6 +21,11 @@ class CreateVideoTempTable extends Migration
             $table->string('bg_url')->nullable()->comment('背景动画化地址');
             $table->unsignedTinyInteger('bg_music')->comment('0=没有,1=有');
             $table->string('bgm_url')->nullable()->comment('背景音乐地址');
+
+            $table->string('text_color')->nullable()->comment('文字颜色');
+            $table->string('text_bg_color')->nullable()->comment('文字背景色');
+            $table->double('opacity')->nullable()->comment('透明度');
+
             $table->unsignedTinyInteger('sn')->default('99')->comment('序号');
             $table->unsignedSmallInteger('top')->default('0')->comment('距离容器上边距');
             $table->unsignedSmallInteger('left')->default('0')->comment('距离容器左边距');

@@ -16,6 +16,9 @@ return [
         'top' => '距离容器上边距',
         'left' => '距离容器左边距',
         'font_size' => '字号',
+        'text_color' => '文字颜色',
+        'text_bg_color' => '文字背景色',
+        'opacity' => '透明度',
     ],
     'options' => [
     ],

@@ -5,12 +5,12 @@
         border-radius: 40px;
         margin-right: 24px;
         padding: 37px 20px;
-        min-height: 679px;
+        min-height: 779px;
     }
 
     .phone-content {
         border: 1px solid rgb(220, 223, 230);
-        height: 605px;
+        height: 705px;
         overflow: hidden;
         position: relative;
         background: rgb(245, 245, 245);
@@ -54,12 +54,20 @@
         font-size: 12px;
         margin: 0;
     }
+
+    .bg-box {
+        height: 625px;
+    }
 </style>
 <div class="box-card">
     <div class="phone-content">
         <div class="text">模板</div>
         <img src="{{asset('storage/image/mobile-head.png')}}" alt="" width="338" height="80">
-
+        <div class="bg-box">
+            <img width="338" height="625" class="bg_img" style="display: none">
+            <video width="338" height="625" id="bg_video" style="display: none"></video>
+            <audio id="bg_audio" ></audio>
+        </div>
         <div class="poem-block">
             <p class="poem-title">题破山寺后禅院</p>
             <p class="poem-author">-- 常建</p>
@@ -74,22 +82,45 @@
 <button type="button" class="btn btn-primary sync"><i class="feather icon-repeat"></i> 同步基本设置</button>
 <script>
     Dcat.ready(function () {
-        $(document).off('click', '.sync').on('click', '.sync', function () {
+        var asset = "{{asset('/storage/')}}";
 
+        $(document).off('click', '.sync').on('click', '.sync', function () {
             let ori_top = 80;
             let top = parseInt($('.field_top').val()) + ori_top;
             let left = $('.field_left').val();
             let font = $('.field_font_size').val();
             let content_size = 12 + parseInt(font);
             let title_size = 14 + parseInt(font);
+            let text_color = $('.text_color').val() || 'whitesmoke';
+            let text_bg_color = $('.text_bg_color').val() || '#5c6bc6';
+            let opacity = parseInt($('.opacity').val()) / 100;
+
+            $('.poem-block').css('top', top + 'px').css('left', left + 'px')
+                .css('background-color', text_bg_color).css('opacity', opacity);
+            $('.poem-title').css('font-size', title_size + 'px').css('color', text_color);
+            $('.poem-content').css('font-size', content_size + 'px').css('color', text_color);
+
+
+            let bg_img_url = $('.bg_img_url').find("input[type='hidden'][name='bg_url']").val();
+            if (bg_img_url !== '') {
+                $('.bg_img').attr('src', asset + '/' + bg_img_url).css('display', 'block');
+            }
 
-            $('.poem-block').css('top', top + 'px').css('left', left + 'px');
-            $('.poem-title').css('font-size', title_size + 'px');
-            $('.poem-content').css('font-size', content_size + 'px');
+            let bg_video_url = $('.bg_video_url').find("input[type='hidden'][name='bg_url']").val();
+            if (bg_video_url !== ''){
+                $('#bg_video').attr('src', asset + '/' + bg_video_url).css('display', 'block');
+                let bg_video = document.getElementById('bg_video');
+                bg_video.autoplay = true;
+                bg_video.loop = true;
+            }
 
-            console.log(top)
-            console.log(left)
-            console.log(font)
+            let bgm_url = $('.bgm_url').find("input[type='hidden'][name='bgm_url']").val();
+            if (bgm_url !== ''){
+                $('#bg_audio').attr('src', asset + '/' + bgm_url);
+                let bg_audio = document.getElementById('bg_audio');
+                bg_audio.autoplay = true;
+                bg_audio.loop = true;
+            }
         })
 
     })