大屏标题组件

components/layout/AiDvPanel/AiDvPanel.vue

@@ -20,10 +20,15 @@ import Border5 from "./borders/border5";
 import border6 from "./borders/border6";
 import border7 from "./borders/border7";
 import border8 from "./borders/border8";
+import border9 from "./borders/border9";
+import border10 from "./borders/border10";
+import border11 from "./borders/border11";
+import border12 from "./borders/border12";
+import border13 from "./borders/border13";
 
 export default {
   name: "AiDvPanel",
-  components: { Border0, Border1, Border2, Border3, Border4, Border5, border6, border7, border8 },
+  components: { Border0, Border1, Border2, Border3, Border4, Border5, border6, border7, border8, border9, border10, border11, border12, border13 },
   props: {
     title: {default: "请传入标题"},
     border: {default: "border0"},

components/layout/AiDvPanel/borders/border10.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="border10" :class="'border10-' + theme">
+    <div class="border10-title">
+      <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
+      <h2>{{ title }}</h2>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'border10',
+
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border10 {
+  height: 100%;
+
+  .border10-title {
+    display: flex;
+    height: 41px;
+    padding: 0 23px;
+    box-sizing: border-box;
+    background-image: url(../asset/border10.png);
+    background-size: 100% 41px;
+    background-repeat: no-repeat;
+
+    h2 {
+      position: relative;
+      top: -3px;
+      font-size: 24px;
+      color: #E2EBF1;
+      font-weight: normal;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+  }
+
+  &.border10-1 .border10-title {
+    // background-image: url(../asset/border8.png);
+    // background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
+  .slot {
+    height: calc(100% - 41px);
+    padding-top: 19px;
+  }
+}
+</style>

components/layout/AiDvPanel/borders/border11.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="border11" :class="'border11-' + theme">
+    <div class="border11-title">
+      <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
+      <h2>{{ title }}</h2>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'border11',
+
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border11 {
+  height: 100%;
+
+  .border11-title {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 66px;
+    box-sizing: border-box;
+    background-image: url(../asset/border11.png);
+    background-size: 100% 50px;
+    background-repeat: no-repeat;
+
+    h2 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #FFFFFF;
+      letter-spacing: 2px;
+      text-shadow: 0 0 10px #0671E2;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+  }
+
+  &.border11-1 .border11-title {
+    // background-image: url(../asset/border8.png);
+    // background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
+  .slot {
+    height: calc(100% - 50px);
+    padding-top: 19px;
+  }
+}
+</style>

components/layout/AiDvPanel/borders/border12.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="border12" :class="'border12-' + theme">
+    <div class="border12-title">
+      <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
+      <h2>{{ title }}</h2>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'border12',
+
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border12 {
+  height: 100%;
+
+  .border12-title {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    padding: 0 39px;
+    box-sizing: border-box;
+    background-image: url(../asset/border12.png);
+    background-size: 100% 50px;
+    background-repeat: no-repeat;
+
+    h2 {
+      font-weight: 600;
+      font-size: 24px;
+      color: rgba(255, 255, 255, 0.87);
+      letter-spacing: 2px;
+      text-shadow: 0 2px 24px #1b7ef2e8;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+  }
+
+  &.border12-1 .border12-title {
+    // background-image: url(../asset/border8.png);
+    // background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
+  .slot {
+    height: calc(100% - 50px);
+    padding-top: 19px;
+  }
+}
+</style>

components/layout/AiDvPanel/borders/border13.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="border13" :class="'border13-' + theme">
+    <div class="border13-title">
+      <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
+      <h2>{{ title }}</h2>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'border13',
+
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border13 {
+  height: 100%;
+
+  .border13-title {
+    display: flex;
+    height: 41px;
+    padding: 0 23px;
+    box-sizing: border-box;
+    background-image: url(../asset/border13.png);
+    background-size: 100% 41px;
+    background-repeat: no-repeat;
+
+    h2 {
+      position: relative;
+      top: -3px;
+      font-size: 24px;
+      color: #E2EBF1;
+      font-weight: normal;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+  }
+
+  &.border13-1 .border13-title {
+    // background-image: url(../asset/border8.png);
+    // background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
+  .slot {
+    height: calc(100% - 41px);
+    padding-top: 19px;
+  }
+}
+</style>

components/layout/AiDvPanel/borders/border9.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="border9" :class="'border9-' + theme">
+    <div class="border9-title">
+      <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
+      <h2>{{ title }}</h2>
+    </div>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'border9',
+
+  props: ['title', 'theme']
+}
+</script>
+
+<style lang="scss" scoped>
+.border9 {
+  height: 100%;
+
+  .border9-title {
+    display: flex;
+    position: relative;
+    align-items: center;
+    height: 40px;
+    padding: 0 23px;
+    box-sizing: border-box;
+    background-image: url(../asset/border9.png);
+    background-size: 100% 40px;
+    background-repeat: no-repeat;
+
+    h2 {
+      font-size: 24px;
+      color: #E2EBF1;
+      letter-spacing: 0;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+  }
+
+  &.border9-1 .border9-title {
+    // background-image: url(../asset/border8.png);
+    // background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
+  .slot {
+    height: calc(100% - 40px);
+    padding-top: 19px;
+  }
+}
+</style>

packages/bigscreen/designer/components/form/componentConfig.vue

@@ -214,7 +214,8 @@ export default {
 
   data() {
     return {
-      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8'],//边框待选项
+      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
+    'border11', 'border12', 'border13'],//边框待选项
       summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
         'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
         'summary15', 'summary16', 'summary17', 'summary18'],//汇总待选项