diff --git a/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js b/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
index acd975b1..5038de9e 100644
--- a/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
@@ -106,7 +106,7 @@ export const FlyMapData = {
   name: '飞线图',
   title: '飞线图',
   icon: Icon.getNameList()[18],
-  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+  border:{type:'',titleHeight:60,fontSize:30},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,
diff --git a/data-room-ui/packages/BasicComponents/Map/settingConfig.js b/data-room-ui/packages/BasicComponents/Map/settingConfig.js
index 501feec9..9f980757 100644
--- a/data-room-ui/packages/BasicComponents/Map/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Map/settingConfig.js
@@ -95,7 +95,7 @@ export const mapData = {
   name: '地图',
   title: '地图',
   icon: Icon.getNameList()[5],
-  border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+  border:{type:'',titleHeight:60,fontSize:30},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
index d3f24695..ac3b9f84 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
@@ -7,7 +7,6 @@
     >
     <el-input
       v-model="config.type"
-      v-support
       clearable
       read-only
       placeholder="请选择边框"
@@ -50,34 +49,127 @@
         :step="1"
       />
     </el-form-item>
-    <el-form-item
-      :label-width="labelWidth"
-      label="颜色"
-    >
-     <!-- <color-select
-      v-model="config.color"
-    /> -->
     <div
-        style="
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-      "
-        class="color-picker-box"
+      v-for="(setting, settingIndex) in list"
+      :key="settingIndex+1"
+    >
+      <el-form-item
+        :label="setting.type=== 'padding' ? '' : setting.label"
+        :label-width="setting.type=== 'padding' ? '0px' :'120px'"
       >
+        <el-input
+          v-if="setting.type === 'input'"
+          v-model="config[setting.field]"
+          :placeholder="`请输入${setting.label}`"
+          clearable
+        />
+        <el-select
+          v-else-if="setting.type === 'select'"
+          v-model="config[setting.field]"
+          popper-class="bs-el-select"
+          class="bs-el-select"
+          :placeholder="`请选择${setting.label}`"
+          :multiple="setting.multiple"
+          clearable
+        >
+          <el-option
+            v-for="(opt, optIndex) in setting.options"
+            :key="optIndex"
+            :label="opt.label"
+            :value="opt.value"
+          />
+        </el-select>
+        <template v-else-if="setting.type === 'colorSelect'">
+          <color-select
+            v-model="colorScheme"
+            @update="updateColorScheme"
+          />
+          <div
+            style="
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+          "
+            class="color-picker-box"
+          >
+            <el-color-picker
+              v-for="(colorItem, colorItemIndex) in colors"
+              :key="colorItemIndex"
+              v-model="setting.value[colorItemIndex]"
+              popper-class="bs-el-color-picker"
+              show-alpha
+              class="start-color"
+            />
+            <span
+              class="el-icon-circle-plus-outline"
+              style="color: #007aff; font-size: 20px"
+              @click="addColor"
+            />
+            <span
+              v-if="colors.length"
+              class="el-icon-remove-outline"
+              style="color: #ea0b30; font-size: 20px"
+              @click="delColor()"
+            />
+          </div>
+        </template>
         <el-color-picker
-          v-for="(colorItem, colorItemIndex) in config.color"
-          :key="colorItemIndex"
-          v-model="config.color[colorItemIndex]"
+          v-else-if="setting.type === 'colorPicker'"
+          v-model="config[setting.field]"
           popper-class="bs-el-color-picker"
+          class="bs-el-color-picker"
           show-alpha
-          class="start-color"
         />
-      </div>
-    </el-form-item>
+        <GradualSetting
+          v-else-if="setting.type === 'gradual'"
+          v-model="config[setting.field]"
+        />
+        <el-input-number
+          v-else-if="setting.type === 'inputNumber'"
+          v-model="config[setting.field]"
+          class="bs-el-input-number"
+          :step="setting.step || 1"
+          :min="setting.min || 0"
+          :max="setting.max || 100000"
+        />
+        <el-radio-group
+          v-else-if="setting.type === 'radio'"
+          v-model="config[setting.field]"
+          class="bs-el-radio-group"
+        >
+          <template v-for="(opt, optIndex) in setting.options">
+            <el-radio-button
+              :key="optIndex"
+              :label="opt.value"
+            >
+              {{ opt.label }}
+            </el-radio-button>
+          </template>
+        </el-radio-group>
+        <el-switch
+          v-else-if="setting.type === 'switch'"
+          v-model="config[setting.field]"
+          class="bs-el-switch"
+          :active-value="setting.active"
+          :inactive-value="setting.inactive"
+        />
+        <el-slider
+          v-else-if="setting.type === 'slider'"
+          v-model="config[setting.field]"
+          :min="0"
+          :max="1"
+          :step="0.01"
+        />
+        <PaddingSetting
+          v-else-if="setting.type === 'padding'"
+          v-model="config[setting.field]"
+        />
+      </el-form-item>
+    </div>
   </div>
 </template>
 <script>
+import plotList from 'data-room-ui/BorderComponents/settingList.js'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
 export default {
@@ -94,7 +186,6 @@ export default {
         titleHeight: 0,
         fontSize: 0,
         h: 0,
-        color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']
       })
     },
     labelWidth: {
@@ -102,12 +193,31 @@ export default {
       default: '100px'
     }
   },
+  computed:{
+    list(){
+      console.log(plotList)
+      plotList[Symbol.iterator]=function*(){
+        let keys=Object.keys(plotList)
+        for(let k of keys){
+          yield [k,plotList[k]]
+        }
+      }
+      let arr=[]
+      for(let [key,value] of plotList){
+        if(value.type==this.config.type){
+          arr=value.setting
+        }
+      }
+      return arr
+    }
+  },
   data () {
     return {
 
     }
   },
-  mounted () {},
+  mounted () {
+  },
   methods: {
     init(){
       this.$refs.BorderSelect.init()
@@ -120,6 +230,9 @@ export default {
 ::v-deep .el-color-picker__trigger {
   border-color: var(--bs-el-border);
 }
+::v-deep .el-input--suffix .el-input__inner{
+  padding-right: 10px !important;
+}
 .color-picker-box{
   ::v-deep .el-color-picker__trigger {
     width: 27px!important;
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent1/component.png b/data-room-ui/packages/BorderComponents/BorderComponent1/component.png
deleted file mode 100644
index 1a26c97f..00000000
Binary files a/data-room-ui/packages/BorderComponents/BorderComponent1/component.png and /dev/null differ
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent2/component.png b/data-room-ui/packages/BorderComponents/BorderComponent2/component.png
deleted file mode 100644
index 1a26c97f..00000000
Binary files a/data-room-ui/packages/BorderComponents/BorderComponent2/component.png and /dev/null differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder1/component.png b/data-room-ui/packages/BorderComponents/GcBorder1/component.png
new file mode 100644
index 00000000..68c72acb
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder1/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue b/data-room-ui/packages/BorderComponents/GcBorder1/index.vue
similarity index 54%
rename from data-room-ui/packages/BorderComponents/BorderComponent1/index.vue
rename to data-room-ui/packages/BorderComponents/GcBorder1/index.vue
index 4b9251d8..1793c29d 100644
--- a/data-room-ui/packages/BorderComponents/BorderComponent1/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder1/index.vue
@@ -3,14 +3,25 @@
     style="width: 100%;height: 100%"
     class="bs-design-wrap"
   >
-    <dv-border-box-1
+     <dv-border-box-1
       :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
     >
-    <div class="element"  :style="`font-size:${config.border.fontSize}px;line-height:${config.border.titleHeight}px;color:${config.border.color[0]};height:${config.border.titleHeight};margin:0 0 0 20px`">{{config.title}}</div>
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
     </dv-border-box-1>
   </div>
 </template>
 <script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import DvBorderBox1 from '@jiaminghi/data-view/lib/components/borderBox1/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox1/src/main.css'
 export default {
@@ -18,6 +29,7 @@ export default {
   components: {
     DvBorderBox1
   },
+  mixins: [refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -25,7 +37,26 @@ export default {
       default: () => ({})
     }
   },
-  watch: {},
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
   mounted () {},
   methods: {}
 }
@@ -41,45 +72,6 @@ export default {
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  .element{
-    display: flex;
-    align-items: center;
-  }
-}
-
-.title-box {
-  height: 40px;
-  padding: 10px 10px 0 0;
-  box-sizing: border-box;
-
-  .title {
-    font-size: 14px;
-    color: #333;
-    font-weight: bold;
-    border-left: 3px solid #007aff;
-    padding-left: 16px;
-  }
-
-  .target-value {
-    overflow-y: auto;
-    height: 60px;
-    font-weight: bold;
-    width: 100%;
-    font-size: 20px;
-    color: #333;
-    padding: 16px 0 0 22px;
-    box-sizing: border-box;
-  }
-}
-
-.el-icon-warning {
-  color: #ffd600;
-}
-
-.title-hover {
-  &:hover {
-    cursor: move;
-  }
 }
 
 /*滚动条样式*/
diff --git a/data-room-ui/packages/BorderComponents/GcBorder1/setting.js b/data-room-ui/packages/BorderComponents/GcBorder1/setting.js
new file mode 100644
index 00000000..d0dd3dcf
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder1/setting.js
@@ -0,0 +1,45 @@
+
+const type = 'GcBorder1'
+
+const name = '边框一'
+
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder10/component.png b/data-room-ui/packages/BorderComponents/GcBorder10/component.png
new file mode 100644
index 00000000..bbb81134
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder10/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder10/index.vue b/data-room-ui/packages/BorderComponents/GcBorder10/index.vue
new file mode 100644
index 00000000..f4fb304c
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder10/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-10
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-10>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox10 from '@jiaminghi/data-view/lib/components/borderBox10/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox10/src/main.css'
+export default {
+  name: 'Border10',
+  components: {
+    DvBorderBox10
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder10/setting.js b/data-room-ui/packages/BorderComponents/GcBorder10/setting.js
new file mode 100644
index 00000000..5c9924ad
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder10/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder10'
+
+const name='边框十'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder11/component.png b/data-room-ui/packages/BorderComponents/GcBorder11/component.png
new file mode 100644
index 00000000..90d0744a
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder11/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder11/index.vue b/data-room-ui/packages/BorderComponents/GcBorder11/index.vue
new file mode 100644
index 00000000..40fada1e
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder11/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-11
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-11>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox11 from '@jiaminghi/data-view/lib/components/borderBox11/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox11/src/main.css'
+export default {
+  name: 'Border11',
+  components: {
+    DvBorderBox11
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder11/setting.js b/data-room-ui/packages/BorderComponents/GcBorder11/setting.js
new file mode 100644
index 00000000..93e7a25d
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder11/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder11'
+
+const name='边框十一'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder12/component.png b/data-room-ui/packages/BorderComponents/GcBorder12/component.png
new file mode 100644
index 00000000..2761932b
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder12/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder12/index.vue b/data-room-ui/packages/BorderComponents/GcBorder12/index.vue
new file mode 100644
index 00000000..9da31a4f
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder12/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-12
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-12>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox12 from '@jiaminghi/data-view/lib/components/borderBox12/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox12/src/main.css'
+export default {
+  name: 'Border12',
+  components: {
+    DvBorderBox12
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder12/setting.js b/data-room-ui/packages/BorderComponents/GcBorder12/setting.js
new file mode 100644
index 00000000..a67f48a5
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder12/setting.js
@@ -0,0 +1,45 @@
+
+const type = 'GcBorder12'
+
+const name = '边框十二'
+
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder13/component.png b/data-room-ui/packages/BorderComponents/GcBorder13/component.png
new file mode 100644
index 00000000..e1f52b7b
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder13/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder13/index.vue b/data-room-ui/packages/BorderComponents/GcBorder13/index.vue
new file mode 100644
index 00000000..886dce76
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder13/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-13
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-13>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox13 from '@jiaminghi/data-view/lib/components/borderBox13/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox13/src/main.css'
+export default {
+  name: 'Border13',
+  components: {
+    DvBorderBox13
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder13/setting.js b/data-room-ui/packages/BorderComponents/GcBorder13/setting.js
new file mode 100644
index 00000000..6064f98d
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder13/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder8'
+
+const name='边框十三'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder2/component.png b/data-room-ui/packages/BorderComponents/GcBorder2/component.png
new file mode 100644
index 00000000..624bdbe0
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder2/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue b/data-room-ui/packages/BorderComponents/GcBorder2/index.vue
similarity index 59%
rename from data-room-ui/packages/BorderComponents/BorderComponent2/index.vue
rename to data-room-ui/packages/BorderComponents/GcBorder2/index.vue
index c6c12a3e..205574d2 100644
--- a/data-room-ui/packages/BorderComponents/BorderComponent2/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder2/index.vue
@@ -3,15 +3,25 @@
     style="width: 100%;height: 100%"
     class="bs-design-wrap"
   >
-    <dv-border-box-2
+     <dv-border-box-2
       :id="'dataV' + config.code"
+      :background-color="backgroundColor"
       :key="updateKey"
     >
-    <div class="element" style="box-sizing: content-box;font-size:40px;color:#fff;height:50px;margin:0 0 0 20px">{{config.title}}</div>
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
     </dv-border-box-2>
   </div>
 </template>
 <script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import DvBorderBox2 from '@jiaminghi/data-view/lib/components/borderBox2/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox2/src/main.css'
 export default {
@@ -19,6 +29,7 @@ export default {
   components: {
     DvBorderBox2
   },
+  mixins: [refreshComponentMixin],
   props: {
     // 卡片的属性
     config: {
@@ -28,25 +39,23 @@ export default {
   },
   data () {
     return {
-      updateKey: 0
     }
   },
   computed: {
-    Data () {
-      return JSON.parse(JSON.stringify(this.config))
-    }
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
   },
   watch: {
-    Data: {
-      handler (newVal, oldVal) {
-        this.$nextTick(() => {
-          if ((newVal.w !== oldVal.w) || (newVal.h !== oldVal.h)) {
-            this.updateKey = new Date().getTime()
-          }
-        })
-      },
-      deep: true
-    }
   },
   mounted () {},
   methods: {}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder2/setting.js b/data-room-ui/packages/BorderComponents/GcBorder2/setting.js
new file mode 100644
index 00000000..35c5b6ec
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder2/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder2'
+
+const name = '边框二'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder3/component.png b/data-room-ui/packages/BorderComponents/GcBorder3/component.png
new file mode 100644
index 00000000..a8fedec2
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder3/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder3/index.vue b/data-room-ui/packages/BorderComponents/GcBorder3/index.vue
new file mode 100644
index 00000000..751ac774
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder3/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-3
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-3>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox3 from '@jiaminghi/data-view/lib/components/borderBox3/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox3/src/main.css'
+export default {
+  name: 'Border2',
+  components: {
+    DvBorderBox3
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder3/setting.js b/data-room-ui/packages/BorderComponents/GcBorder3/setting.js
new file mode 100644
index 00000000..727d9bad
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder3/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder3'
+
+const name='边框三'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder4/component.png b/data-room-ui/packages/BorderComponents/GcBorder4/component.png
new file mode 100644
index 00000000..fbd685ea
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder4/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder4/index.vue b/data-room-ui/packages/BorderComponents/GcBorder4/index.vue
new file mode 100644
index 00000000..ebb0e245
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder4/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-4
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-4>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox4 from '@jiaminghi/data-view/lib/components/borderBox4/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox4/src/main.css'
+export default {
+  name: 'Border4',
+  components: {
+    DvBorderBox4
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder4/setting.js b/data-room-ui/packages/BorderComponents/GcBorder4/setting.js
new file mode 100644
index 00000000..07bc3042
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder4/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder4'
+
+const name='边框四'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder5/component.png b/data-room-ui/packages/BorderComponents/GcBorder5/component.png
new file mode 100644
index 00000000..5b7654ff
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder5/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder5/index.vue b/data-room-ui/packages/BorderComponents/GcBorder5/index.vue
new file mode 100644
index 00000000..7abe83d3
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder5/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-5
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-5>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox5 from '@jiaminghi/data-view/lib/components/borderBox5/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox5/src/main.css'
+export default {
+  name: 'Border5',
+  components: {
+    DvBorderBox5
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder5/setting.js b/data-room-ui/packages/BorderComponents/GcBorder5/setting.js
new file mode 100644
index 00000000..60f494b7
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder5/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder5'
+
+const name='边框五'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder6/component.png b/data-room-ui/packages/BorderComponents/GcBorder6/component.png
new file mode 100644
index 00000000..62b646b4
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder6/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder6/index.vue b/data-room-ui/packages/BorderComponents/GcBorder6/index.vue
new file mode 100644
index 00000000..cf279bbb
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder6/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-6
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-6>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox6 from '@jiaminghi/data-view/lib/components/borderBox6/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox6/src/main.css'
+export default {
+  name: 'Border6',
+  components: {
+    DvBorderBox6
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder6/setting.js b/data-room-ui/packages/BorderComponents/GcBorder6/setting.js
new file mode 100644
index 00000000..65ada105
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder6/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder6'
+
+const name = '边框六'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder7/component.png b/data-room-ui/packages/BorderComponents/GcBorder7/component.png
new file mode 100644
index 00000000..1dfbdb02
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder7/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder7/index.vue b/data-room-ui/packages/BorderComponents/GcBorder7/index.vue
new file mode 100644
index 00000000..ac6808b6
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder7/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-7
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-7>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
+export default {
+  name: 'Border7',
+  components: {
+    DvBorderBox7
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder7/setting.js b/data-room-ui/packages/BorderComponents/GcBorder7/setting.js
new file mode 100644
index 00000000..9cdcfe38
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder7/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder7'
+
+const name= '边框七'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder8/component.png b/data-room-ui/packages/BorderComponents/GcBorder8/component.png
new file mode 100644
index 00000000..c9b3a1cc
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder8/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder8/index.vue b/data-room-ui/packages/BorderComponents/GcBorder8/index.vue
new file mode 100644
index 00000000..ae941a29
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder8/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-8
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-8>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox8 from '@jiaminghi/data-view/lib/components/borderBox8/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox8/src/main.css'
+export default {
+  name: 'Border8',
+  components: {
+    DvBorderBox8
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder8/setting.js b/data-room-ui/packages/BorderComponents/GcBorder8/setting.js
new file mode 100644
index 00000000..99033210
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder8/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder8'
+
+const name='边框八'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/GcBorder9/component.png b/data-room-ui/packages/BorderComponents/GcBorder9/component.png
new file mode 100644
index 00000000..33befc5e
Binary files /dev/null and b/data-room-ui/packages/BorderComponents/GcBorder9/component.png differ
diff --git a/data-room-ui/packages/BorderComponents/GcBorder9/index.vue b/data-room-ui/packages/BorderComponents/GcBorder9/index.vue
new file mode 100644
index 00000000..fda5e02f
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder9/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+     <dv-border-box-9
+      :id="'dataV' + config.code"
+      :background-color="backgroundColor"
+      :key="updateKey"
+    >
+    <div class="element"
+    :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+    >
+    {{config.title}}</div>
+    </dv-border-box-9>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox9 from '@jiaminghi/data-view/lib/components/borderBox9/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox9/src/main.css'
+export default {
+  name: 'Border9',
+  components: {
+    DvBorderBox9
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+    backgroundColor () {
+      return this.config.border.backgroundColor
+        ? this.config.border.backgroundColor
+        : 'transparent'
+    },
+    // colorType () {
+    //   return this.config.border.colorType
+    // }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder9/setting.js b/data-room-ui/packages/BorderComponents/GcBorder9/setting.js
new file mode 100644
index 00000000..ab22eb7c
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/GcBorder9/setting.js
@@ -0,0 +1,44 @@
+
+const type = 'GcBorder9'
+
+const name='边框九'
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'backgroundColor',
+    optionField: 'backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  // 标题字体颜色
+  {
+    label:'标题字体颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontColor',
+    optionField: 'fontColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}
diff --git a/data-room-ui/packages/BorderComponents/bordersList.js b/data-room-ui/packages/BorderComponents/bordersList.js
index 76c5e86e..35447063 100644
--- a/data-room-ui/packages/BorderComponents/bordersList.js
+++ b/data-room-ui/packages/BorderComponents/bordersList.js
@@ -9,7 +9,7 @@ files.keys().forEach(key => {
   const img = require(`../BorderComponents/${title}/component.png`)
   borderComponents.push({
     title:title,
-    img
+    img,
   })
 })
 // 抛出内置系统组件
diff --git a/data-room-ui/packages/BorderComponents/settingList.js b/data-room-ui/packages/BorderComponents/settingList.js
new file mode 100644
index 00000000..b37922a4
--- /dev/null
+++ b/data-room-ui/packages/BorderComponents/settingList.js
@@ -0,0 +1,16 @@
+const files = require.context('../BorderComponents/', true, /setting.js$/)
+const plotList = []
+// 获取plot配置
+  files.keys().forEach((key) => {
+    // ./折线图/基础折线图.js
+    // 取到 "基础折线图"
+    const config = files(key).default
+    plotList.push({
+      type: config.type,
+      setting: config.setting,
+      name:config.name
+    })
+  })
+export default plotList
+
+
diff --git a/data-room-ui/packages/BorderSelect/index.vue b/data-room-ui/packages/BorderSelect/index.vue
index 4d6b71e1..41e55500 100644
--- a/data-room-ui/packages/BorderSelect/index.vue
+++ b/data-room-ui/packages/BorderSelect/index.vue
@@ -17,7 +17,6 @@
           :style="{
             display: remoteComponentsGridComputed ? 'grid' : 'flex',
             justifyContent: remoteComponentsGridComputed ? 'space-around' : 'flex-start',
-            height: 'calc(100vh - 430px)'
           }"
         >
           <div
@@ -126,7 +125,6 @@ export default {
   },
   mounted () {
     this.remoteComponentlist = [...borderComponents]
-    console.log(this.remoteComponentlist)
   },
   methods: {
     chooseComponent (component) {
@@ -144,7 +142,6 @@ export default {
     confirm () {
       this.dialogVisible = false
       if (isEmpty(this.focus)) return
-      console.log(this.focus.title)
       this.$emit('select', this.focus.title)
     },
 
diff --git a/data-room-ui/packages/G2Plots/plotList.js b/data-room-ui/packages/G2Plots/plotList.js
index c12125e5..990aa127 100644
--- a/data-room-ui/packages/G2Plots/plotList.js
+++ b/data-room-ui/packages/G2Plots/plotList.js
@@ -32,7 +32,7 @@ function getPlotList (files) {
       category: configMapKey,
       name: config.name,
       title: config.title,
-      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       icon: null,
       img: require(`../G2Plots/images/componentLogo/${config.title}.png`),
       className:
@@ -64,7 +64,7 @@ export function getCustomPlots () {
       category: config.category,
       name: config.name,
       title: config.title,
-      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       icon: null,
       img: config.img,
       className:
diff --git a/data-room-ui/packages/RemoteComponents/remoteComponentsList.js b/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
index 5846a60b..7be9b955 100644
--- a/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
+++ b/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
@@ -32,7 +32,7 @@ export function getRemoteComponents (comList) {
       title: config.title,
       icon: null,
       img: config.img,
-      border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+      border:{type:'',titleHeight:60,fontSize:30},
       className:
         'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
       w: 450,
@@ -64,7 +64,7 @@ export function getRemoteComponentConfig (code, name) {
     title: name,
     icon: null,
     img: null,
-    border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+    border:{type:'',titleHeight:60,fontSize:30},
     className:
       'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
     w: 450,
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index 6c12ae44..46e0c563 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -44,7 +44,7 @@ basicConfigList = basicConfigList.map((item) => {
 export function basicComponentsConfig (item) {
   return {
     ...item,
-    border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},
+    border:{type:'',titleHeight:60,fontSize:30},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }