大屏样式完成

components/AiDvRender.vue

@@ -4,6 +4,7 @@
     <ai-dv-panel
         style="height: 100%; width: 100%;"
         v-if="currentType !== 'display'"
+        :padding="data.padding"
         :title="data.title"
         :theme="theme"
         :border="data.border || ''">
@@ -56,6 +57,7 @@
       </ai-map>
       <ai-monitor :src="data.src" v-else-if="currentType === 'monitor'" :type="data.monitorType"/>
       <ai-monitor-carousel :list="data.list" v-else-if="currentType === 'monitorCarousel'"/>
+      <img v-else-if="currentType=='img'" :src="data.src" alt="" style="width: 100%; height: 100%; object-fit: fill;"/>
       <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
              v-else-if="currentType === 'video'"/>
       <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>

components/layout/AiDvPanel/AiDvPanel.vue

@@ -4,9 +4,13 @@
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
+      <div :style="{padding}">
         <slot/>
+      </div>
     </component>
-    <slot style="width: 100%; height: 100%;" v-else></slot>
+    <div v-else :style="{padding}">
+      <slot style="width: 100%; height: 100%;"/>
+    </div>
   </section>
 </template>
 
@@ -54,7 +58,8 @@ export default {
     theme: {
       type: String,
       default: '0'
-    }
+    },
+    padding: {default: 0}
   },
   mounted() {
   },

components/layout/AiDvPanel/borders/border15.vue

@@ -24,6 +24,7 @@ export default {
     padding: 0 10px;
     background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
     margin-bottom: 12px;
+    color: white;
   }
 
   .slot {

packages/bigscreen/designer/components/componentConfig.vue

@@ -17,6 +17,9 @@
             <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
           </div>
         </div>
+        <config-item label="內边距">
+          <el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
+        </config-item>
       </div>
     </div>
     <div class="layout-right__content--wrapper">
@@ -53,6 +56,9 @@
             <el-input v-model="config.src" size="mini"></el-input>
           </div>
         </div>
+        <config-item label="图片URL" v-if="config.type=='img'">
+          <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
+        </config-item>
         <div class="layout-config__item" v-if="config.type === 'monitor'">
           <label>视频类型</label>
           <div class="layout-config__item--right">
@@ -231,6 +237,7 @@
 import ConfigItem from "./configItem.vue";
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import {monitorTypes} from "../config";
+
 export default {
   name: 'componentConfig',
   components: {AiDialogBtn, ConfigItem},
@@ -242,7 +249,7 @@ export default {
   data() {
     return {
       borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
-        'border11', 'border12', 'border13','border14','border15'],//边框待选项
+        'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
       summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
         'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
         'summary15', 'summary16', 'summary17', 'summary18', 'summary19'],//汇总待选项

packages/bigscreen/designer/components/configItem.vue

@@ -78,7 +78,7 @@ export default {
     align-items: center;
     justify-content: flex-end;
     text-align: right;
-    margin-left: 30px;
+    margin-left: 27px;
 
     input, textarea {
       background: #262C33;

packages/bigscreen/designer/config.js

@@ -513,11 +513,34 @@ const components = [{
 },
   {
     label: "AI", list: [
-      {label: "AI助手", list: [{type: "aiAssist", label: "AI助手", width: 134, height: 140, zIndex: 1, title: "AI助手", thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"}]}
+      {
+        label: "AI助手",
+        list: [{
+          type: "aiAssist",
+          label: "AI助手",
+          width: 134,
+          height: 140,
+          zIndex: 1,
+          title: "AI助手",
+          thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
+        }]
+      }
+    ]
+  },
+  {
+    label: '其他', list: [
+      {
+        label: "图片", list: [
+          {
+            label: "普通图片",
+            type: "img",
+            width: 500,
+            height: 400,
+            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
+          }
         ]
       },
       {
-    label: '其他', list: [{
         label: '地图', type: 'map', list: [{
           type: 'map',
           label: '地图',
@@ -713,7 +736,15 @@ const components = [{
             dynamicData: '',
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
           },
-        {type: "monitorCarousel", label: "视频轮播", width: 480, height: 480, zIndex: 1, title: "视频轮播", thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"}
+          {
+            type: "monitorCarousel",
+            label: "视频轮播",
+            width: 480,
+            height: 480,
+            zIndex: 1,
+            title: "视频轮播",
+            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
+          }
         ]
       }, customHtml]
   }]