修改

src/components/sallCenter/plugin/video.vue

@@ -3,6 +3,7 @@
     width: 100%;
     height: 400px;
     background: #353535;
+    overflow: hidden;
   }
 
   .diy-video .el-input-group__append {
@@ -30,21 +31,38 @@
       <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
         style="right: -25px; top: 30px;"></el-button>
     </div>
-    <div class="diy-component-preview">
-      <div class="diy-video">
+    <div class="diy-component-preview" :style="{paddingTop:videoData.data.top+'px',paddingRight:videoData.data.right+'px',paddingBottom:videoData.data.bottom+'px',
+        paddingLeft:videoData.data.left+'px'}">
+      <div class="diy-video" :style="{borderRadius:videoData.data.radius+'px'}">
         <img :src="getIconLink(data.pic_url)" style="width: 100%;height:100%;" v-if="data.pic_url">
       </div>
     </div>
     <div class="diy-component-edit" v-if="videoData.isCked">
       <el-form label-width="100px" @submit.native.prevent>
+        <el-row>
+          <el-col :span="12">
             <el-form-item label="封面图片">
               <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
-            <el-button size="mini" @click="choicImg=true">选择图片</el-button>
+                <el-button size="mini" @click="isChoice=1,choicImg=true">选择图片</el-button>
               </el-tooltip>
               <div flex="main:center cross:center" class="video-gallery-item">
-            <img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.pic_url)" />
+                <img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;"
+                  :src="getIconLink(data.pic_url)" />
               </div>
             </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="背景图片">
+              <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
+                <el-button size="mini" @click="isChoice=2,choicImg=true">选择图片</el-button>
+              </el-tooltip>
+              <div flex="main:center cross:center" class="video-gallery-item">
+                <img v-if="data.backgroundimage!=''" style="max-width:100%;max-height: 100%;"
+                  :src="getIconLink(data.backgroundimage)" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="视频链接">
           <label slot="label">视频链接
             <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
@@ -57,6 +75,38 @@
             </template>
           </el-input>
         </el-form-item>
+        <el-form-item label="上边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'top','-')"
+            v-model="videoData.data.top" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="下边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'bottom','-')"
+            v-model="videoData.data.bottom" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="左边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'left','-')"
+            v-model="videoData.data.left" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="右边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'right','-')"
+            v-model="videoData.data.right" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="视频圆角">
+          <el-input type="text" size="small" @keyup.native="checkInteger(videoData.data,'radius')" v-model="videoData.data.radius" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="是否全屏">
+          <el-switch v-model="videoData.data.isfullscreen"></el-switch>
+        </el-form-item>
       </el-form>
     </div>
     <!-- 选择图片文件 -->
@@ -82,8 +132,9 @@
     data() {
       return {
         choicImg: false,
-        changeState1:false,
+        changeState1: false,
         data: this.videoData.data,
+        isChoice:-1, //是否选择背景或者封面
       };
     },
     created() {
@@ -100,14 +151,35 @@
       },
       //选择图片
       SelectId(msg) {
+        if(this.isChoice==1){
           this.data.pic_url = this.getIconLink(msg.url);
+        }else{
+          this.data.backgroundimage = this.getIconLink(msg.url);
+        }
         this.choicImg = false;
       },
       //选择视频
-      Selectvideo(val){
-        this.data.url=val.Path;
-        this.changeState1=false; 
+      Selectvideo(val) {
+        this.data.url = val.Path;
+        this.changeState1 = false;
       },
+      getminNum() {
+        if (this.videoData.data.top == '') {
+          this.videoData.data.top = 0;
+        }
+        if (this.videoData.data.right == '') {
+          this.videoData.data.right = 0;
+        }
+        if (this.videoData.data.bottom == '') {
+          this.videoData.data.bottom = 0;
+        }
+        if (this.videoData.data.left == '') {
+          this.videoData.data.left = 0;
+        }
+        if (this.videoData.data.radius == '') {
+          this.videoData.data.radius = 0;
+        }
+      }
     },
     computed: {
 

src/components/sallCenter/templateEdit.vue

@@ -710,7 +710,14 @@
               isCked: false,
               data: {
                 pic_url: '', //图片地址
-                url: '' //视频地址
+                url: '', //视频地址
+                top: 0, //上边距
+                right: 0, //右边距
+                bottom: 0, //下边距
+                left: 0, //左边距
+                isfullscreen:false, //是否全屏
+                backgroundimage:'', //背景图片
+                radius:0, //视频圆角
               }
             }
             this.dataList.push(videoObj);