banner添加背景颜色

src/main/java/com/izouma/nineth/domain/Banner.java

@@ -48,4 +48,7 @@ public class Banner extends BaseEntity {
 
     @ApiModelProperty("配置id")
     private Long settingId;
+
+    @ApiModelProperty("背景颜色")
+    private String backgroundColor;
 }

src/main/vue/src/components/ColorSelect.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="public-input-color-picker">
+    <el-input v-model="value2" :placeholder="placeholder" @input="_change" :disabled="true" ></el-input>
+    <el-color-picker
+      v-model="value2"
+      :show-alpha="showAlpha"
+      :predefine="predefineColors"
+      @change="_change"
+    ></el-color-picker>
+  </div>
+</template>
+<script>
+/**
+ * 输入框颜色选择器
+ * ps：预定义颜色中，如果颜色不对，将无法选中
+ *
+ * @showAlpha 是否支持透明度 默认false
+ * @predefineColors 预定义颜色
+ * @value 默认颜色编码 示例：#ffffff
+ * @placeholder 输入框提示文字
+ */
+export default {
+  name: 'public-input-color-picker',
+  data() {
+    return {
+      value2: ''
+    }
+  },
+  props: {
+    showAlpha: { type: Boolean, default: false },
+    predefineColors: {
+      type: Array,
+      default: () => {
+        return [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          '#FF0000'
+        ]
+      }
+    },
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请输入颜色编码' }
+  },
+  components: {},
+  computed: {},
+  created() {
+  },
+  onload() { },
+  onShow() { },
+  watch: {
+    value: {
+      handler: function (newVal, oldVal) {
+        this.value2 = JSON.parse(JSON.stringify(newVal))
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() { },
+  methods: {
+    _change(val) {
+      if (val) {
+        this.$emit('change', val)
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@box-width: 200px;
+.public-input-color-picker {
+  // display: flex;
+  // -webkit-box-align: center;
+  // -webkit-align-items: center;
+  // align-items: center;
+  position: relative;
+  width: @box-width;
+  .el-input {
+    width: @box-width;
+  }
+  .el-color-picker {
+    position: absolute;
+    right: 0;
+    /deep/ .el-color-picker__trigger {
+      border: 0;
+    }
+  }
+}
+</style>

src/main/vue/src/views/BannerEdit.vue

@@ -22,6 +22,13 @@
                     <el-form-item prop="pic" label="图片">
                         <single-upload v-model="formData.pic"></single-upload>
                     </el-form-item>
+                    <el-form-item prop="backgroundColor" label="背景颜色">
+                        <color-select
+                            :value="formData.backgroundColor"
+                            placeholder="请输入背景颜色"
+                            @change="(val)=>{formData.backgroundColor=val}"
+                        />
+                    </el-form-item>
                     <el-form-item prop="remark" label="备注">
                         <el-input v-model="formData.remark"></el-input>
                     </el-form-item>
@@ -83,7 +90,15 @@
     </div>
 </template>
 <script>
+
+import colorSelect from "../components/ColorSelect.vue";
+
 export default {
+
+    components: {
+      colorSelect
+    },
+
     name: 'BannerEdit',
     created() {
         if (this.$route.query.id) {
@@ -113,6 +128,13 @@ export default {
             formData: {
                 link: false
             },
+            //颜色初始数据
+            colorList: ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C",
+                "#DDA0DD", "#DA70D6", "#FF00FF", "#9370DB",
+                "#800080", "#6495ED", "#4169E1", "#0000FF",
+                "#87CEEB", "#E1FFFF", "#00FFFF", "#7FFFAA",
+                "#00FF7F", "#008000", "#FFFFE0", "#FFFF00",
+                "#FFD700", "#F5DEB3", "#FFA500", "#CD5C5C"],
             rules: {
                 name: [
                     {