表格新增 删除 移动 样式优化 删除和移动限制

src/components/knowledgeExtra/AddAssess/index.vue

@@ -2,12 +2,19 @@
 <style lang="less" scoped>
 .add_assess {
   h5 {
+    padding: 10px 10px 0 10px;
     margin-bottom: 20px;
   }
   .table_map {
+    border-bottom: 30px solid #dee2ea;
     .table_top_box {
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      .table_top_box_left {
+        display: flex;
+      }
     }
     .move_btn {
       font-size: 14px;
@@ -18,48 +25,84 @@
   .el-form-item--small.el-form-item {
     margin-bottom: 0;
   }
+  .hint_msg {
+    font-size: 12px;
+    color: red;
+  }
 }
 </style>  
 <template>
   <div class="add_assess">
-    <h5>*量表内容:</h5>
     <el-form size="mini" :model="scaleData" ref="scaleFormRef">
       <div
         class="table_map"
         v-for="(table, tableIndex) in scaleData.klScaleParent"
         :key="tableIndex"
       >
+        <h5>*量表内容:</h5>
         <div class="table_top_box">
-          <el-form-item label="标题：" label-width="100px">
-            <el-input v-model.trim="table.content" />
-          </el-form-item>
-          <el-form-item label="内容类型：" label-width="100px">
-            <el-select v-model="table.selectType" placeholder="请选择">
-              <el-option label="问题选项" :value="11"> </el-option>
-              <el-option label="概述文本" :value="12"> </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="结果类型：" label-width="100px">
-            <el-radio-group v-model="table.resultType">
-              <el-radio :label="1">直接结果</el-radio>
-              <el-radio :label="2">记分结果</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="系数：" label-width="100px">
-            <el-input v-model.trim="table.content" />
-          </el-form-item>
-          <el-form-item label="常数：" label-width="100px">
-            <el-input v-model.trim="table.content" />
-          </el-form-item>
-          <div class="move_btn">上移</div>
-          <div class="move_btn">上移</div>
+          <div class="table_top_box_left">
+            <el-form-item label="标题：" label-width="100px">
+              <el-input v-model.trim="table.content" />
+            </el-form-item>
+            <div style="margin:0 20px">
+              <el-form-item label="内容类型：" label-width="100px">
+                <el-select v-model="table.textType" placeholder="请选择">
+                  <el-option label="问题选项" :value="11"> </el-option>
+                  <el-option label="概述文本" :value="12"> </el-option>
+                </el-select>
+              </el-form-item>
+              <div class="hint_msg">
+                注：内容类型修改后已填的所在标题下的内容将会清空
+              </div>
+            </div>
+
+            <div v-if="table.textType === 11">
+              <el-form-item label="结果类型：" label-width="100px">
+                <el-radio-group v-model="table.resultType">
+                  <el-radio :label="1">直接结果</el-radio>
+                  <el-radio :label="2">记分结果</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <div class="hint_msg">
+                注：结果类型修改后已填的所在标题下的内容将会清空
+              </div>
+            </div>
+            <div v-if="table.resultType === 2 && table.textType === 11">
+              <el-form-item label="系数：" label-width="100px">
+                <el-input v-model.trim="table.content" />
+              </el-form-item>
+            </div>
+            <div v-if="table.resultType === 2 && table.textType === 11">
+              <el-form-item label="常数：" label-width="100px">
+                <el-input v-model.trim="table.content" />
+              </el-form-item>
+            </div>
+          </div>
+
+          <div class="move_btn" v-if="scaleData.klScaleParent.length > 1">
+            <el-button
+              @click="CHANGE_TABLE({ tableIndex, type: 'up' })"
+              type="text"
+              v-if="tableIndex"
+              >上移</el-button
+            >
+            <el-button
+              v-if="tableIndex !== scaleData.klScaleParent.length - 1"
+              @click="CHANGE_TABLE({ tableIndex, type: 'down' })"
+              type="text"
+              >下移</el-button
+            >
+          </div>
         </div>
         <ScaleTable
+          v-if="table.textType === 11"
           :tableData="table.klScaleSaveGroup"
           :tableIndex="tableIndex"
           :tableResultType="table.resultType"
           @CHANGE_FORM_DATA="CHANGE_FORM_DATA"
           @CHANGE_TABLE_ROW="CHANGE_TABLE_ROW"
+          @CHANGE_TABLE="CHANGE_TABLE"
         />
       </div>
     </el-form>
@@ -92,6 +135,45 @@ const defaultDate = {
   status: 0,
   textType: 0
 };
+const defaultTable = {
+  constant: 0,
+  content: "string",
+  factor: 0,
+  klScaleSaveGroup: [
+    {
+      groupId: "1",
+      issueId: "1-1",
+      two_constant: "two-常数",
+      two_content: "two-问题内容",
+      two_factor: "two-系数",
+      two_orderNo: 0,
+      two_remark: "string",
+      two_resultType: 0,
+      two_ruleCode: "string",
+      two_score: 0,
+      two_selectType: "选择类型(1单选2多选)",
+      two_status: 0,
+      two_textType: 0,
+      content: "选项内容",
+      orderNo: 0,
+      pushInfo: "建议",
+      remark: "string",
+      result: "结果",
+      ruleCode: "string",
+      score: 0,
+      status: 0,
+      textType: 0
+    }
+  ],
+  orderNo: 0,
+
+  remark: "string",
+  resultType: 1,
+  ruleCode: "string",
+  score: 0,
+  status: 0,
+  textType: 0
+};
 export default {
   components: { ScaleTable },
   data() {
@@ -130,52 +212,12 @@ export default {
               }
             ],
             orderNo: 0,
-
-            remark: "string",
-            resultType: 1,
-            ruleCode: "string",
-            score: 0,
-            status: 0,
-            textType: 0
-          },
-          {
-            constant: 0,
-            content: "string",
-            factor: 0,
-            klScaleSaveGroup: [
-              {
-                groupId: "1",
-                issueId: "1-1",
-                two_constant: "two-常数",
-                two_content: "two-问题内容",
-                two_factor: "two-系数",
-                two_orderNo: 0,
-                two_remark: "string",
-                two_resultType: 0,
-                two_ruleCode: "string",
-                two_score: 0,
-                two_selectType: "选择类型(1单选2多选)",
-                two_status: 0,
-                two_textType: 0,
-                content: "选项内容",
-                orderNo: 0,
-                pushInfo: "建议",
-                remark: "string",
-                result: "结果",
-                ruleCode: "string",
-                score: 0,
-                status: 0,
-                textType: 0
-              }
-            ],
-            orderNo: 0,
-
             remark: "string",
             resultType: 1,
             ruleCode: "string",
             score: 0,
             status: 0,
-            textType: 0
+            textType: 11
           }
         ],
         modifier: "string"
@@ -183,6 +225,44 @@ export default {
     };
   },
   methods: {
+    /**
+     * 增/删/移动表格
+     * @param  tableIndex :当前表格
+     * @param  type :类型 1：新增；-1：删除；up：上移；down：下移
+     */
+    CHANGE_TABLE(val) {
+      // 节流： 阻止用户频繁点击
+      if (this.timer) return;
+      this.timer = setTimeout(() => {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, 500);
+      const { tableIndex, type } = val;
+      switch (type) {
+        case 1:
+          this.scaleData.klScaleParent.splice(
+            tableIndex + 1,
+            0,
+            JSON.parse(JSON.stringify(defaultTable))
+          );
+          break;
+        case -1:
+          this.$delete(this.scaleData.klScaleParent, tableIndex);
+          break;
+        case "up":
+          const thisTable = this.scaleData.klScaleParent[tableIndex];
+          const beforeTable = this.scaleData.klScaleParent[tableIndex - 1];
+          this.$set(this.scaleData.klScaleParent, tableIndex - 1, thisTable);
+          this.$set(this.scaleData.klScaleParent, tableIndex, beforeTable);
+          break;
+        case "down":
+          const thisTable1 = this.scaleData.klScaleParent[tableIndex];
+          const afterTable = this.scaleData.klScaleParent[tableIndex + 1];
+          this.$set(this.scaleData.klScaleParent, tableIndex + 1, thisTable1);
+          this.$set(this.scaleData.klScaleParent, tableIndex, afterTable);
+          break;
+      }
+    },
     /**
      * 修改表格数据（添加、删除 ：组、问题、选项）
      * @param  type         类型：1/-1：新增/删除组; 2/-2：新增/删除问题; 3/-3：新增/删除选项

src/components/knowledgeExtra/AddAssess/scale-table.vue

@@ -1,6 +1,10 @@
 
 <style lang="less" scoped>
 .scaleTable {
+  min-height: 100px;
+  .table_box {
+    padding: 0 10px;
+  }
   .btn_box {
     width: 100%;
     height: 100%;
@@ -35,256 +39,296 @@
   /deep/.el-table th {
     padding: 2px 0;
   }
+  .change_table_btns {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 10px;
+    box-sizing: border-box;
+    border-top: 10px solid #dee2ea;
+  }
 }
 </style>
 <template>
   <div class="scaleTable" :id="`scaleTableRef[${tableIndex}]`">
-    <el-table
-      v-if="tableShow"
-      :data="tableData"
-      header-row-class-name="header_row_class_name"
-      border
-      style="width: 100%; margin: 20px 0"
-      :span-method="objectSpanMethod"
-      :ref="`scaleTableRef[${tableIndex}]`"
-    >
-      <el-table-column prop="issueId" label="组" width="70px">
-        <template slot-scope="scope">
-          <div class="btn_box">
-            <div class="btn_div">
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: 1,
-                    tableIndex,
-                    rowIndex: scope.$index,
-                    groupId: scope.row.groupId
-                  })
-                "
-                src="../../../images/add-new-rule-sub.png"
-                alt=""
-              />
-            </div>
-            <div
-              class="btn_div"
-              v-if="imposeRestrictionsRemoveOnGroup(scope.row.groupId)"
-            >
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: -1,
-                    tableIndex,
-                    groupId: scope.row.groupId
-                  })
-                "
-                src="../../../images/add-new-rule-del.png"
-                alt=""
-              />
+    <div class="table_box">
+      <el-table
+        v-if="tableShow"
+        :data="tableData"
+        header-row-class-name="header_row_class_name"
+        border
+        style="width: 100%; margin: 20px 0"
+        :span-method="objectSpanMethod"
+        :ref="`scaleTableRef[${tableIndex}]`"
+      >
+        <el-table-column prop="issueId" label="组" width="70px">
+          <template slot-scope="scope">
+            <div class="btn_box">
+              <div class="btn_div">
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: 1,
+                      tableIndex,
+                      rowIndex: scope.$index,
+                      groupId: scope.row.groupId
+                    })
+                  "
+                  src="../../../images/add-new-rule-sub.png"
+                  alt=""
+                />
+              </div>
+              <div
+                class="btn_div"
+                v-if="imposeRestrictionsRemoveOnGroup(scope.row.groupId)"
+              >
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: -1,
+                      tableIndex,
+                      groupId: scope.row.groupId
+                    })
+                  "
+                  src="../../../images/add-new-rule-del.png"
+                  alt=""
+                />
+              </div>
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="groupId" label="问题" width="70px">
-        <template slot-scope="scope">
-          <div class="btn_box">
-            <div class="btn_div">
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: 2,
-                    tableIndex,
-                    rowIndex: scope.$index,
+          </template>
+        </el-table-column>
+        <el-table-column prop="groupId" label="问题" width="70px">
+          <template slot-scope="scope">
+            <div class="btn_box">
+              <div class="btn_div">
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: 2,
+                      tableIndex,
+                      rowIndex: scope.$index,
+                      groupId: scope.row.groupId,
+                      issueId: scope.row.issueId
+                    })
+                  "
+                  src="../../../images/add-new-rule-sub.png"
+                  alt=""
+                />
+              </div>
+              <div
+                class="btn_div"
+                v-if="
+                  imposeRestrictionsRemoveOnIssue({
                     groupId: scope.row.groupId,
                     issueId: scope.row.issueId
                   })
                 "
-                src="../../../images/add-new-rule-sub.png"
-                alt=""
-              />
+              >
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: -2,
+                      tableIndex,
+                      issueId: scope.row.issueId
+                    })
+                  "
+                  src="../../../images/add-new-rule-del.png"
+                  alt=""
+                />
+              </div>
             </div>
-            <div
-              class="btn_div"
-              v-if="imposeRestrictionsRemoveOnIssue(scope.row.groupId)"
-            >
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: -2,
-                    tableIndex,
-                    issueId: scope.row.issueId
-                  })
-                "
-                src="../../../images/add-new-rule-del.png"
-                alt=""
-              />
+          </template>
+        </el-table-column>
+        <el-table-column prop="two_selectType" label="选择" width="70px">
+          <template slot-scope="scope">
+            <div class="table_select_btn">
+              <el-button
+                @click="handleSelectTypeBtn(scope.$index, 1)"
+                :style="scope.row.two_selectType != 1 ? { color: '#999' } : ''"
+                type="text"
+                >单选</el-button
+              >
+              <el-button
+                :style="scope.row.two_selectType != 2 ? { color: '#999' } : ''"
+                @click="handleSelectTypeBtn(scope.$index, 2)"
+                type="text"
+                >多选</el-button
+              >
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="two_selectType" label="选择" width="70px">
-        <template slot-scope="scope">
-          <div class="table_select_btn">
-            <el-button
-              @click="handleSelectTypeBtn(scope.$index, 1)"
-              :style="scope.row.two_selectType != 1 ? { color: '#999' } : ''"
-              type="text"
-              >单选</el-button
-            >
-            <el-button
-              :style="scope.row.two_selectType != 2 ? { color: '#999' } : ''"
-              @click="handleSelectTypeBtn(scope.$index, 2)"
-              type="text"
-              >多选</el-button
-            >
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="two_content"
-        label="问题内容"
-        :width="tableResultType === 1 ? '140px' : ''"
-      >
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.two_content"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="two_factor"
-        label="系数"
-        width="70px"
-        v-if="tableResultType === 2"
-      >
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.two_factor"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="two_constant"
-        label="常数"
-        width="70px"
-        v-if="tableResultType === 2"
-      >
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.two_constant"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column prop="issueId" label="选项个数" width="80px">
-        <template slot-scope="scope">
-          <div>
-            {{ optionLength(scope.row.issueId) }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="orderNo" label="选项" width="70px">
-        <template slot-scope="scope">
-          <div class="btn_box">
-            <div class="btn_div">
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: 3,
-                    tableIndex,
-                    rowIndex: scope.$index,
-                    groupId: scope.row.groupId,
-                    issueId: scope.row.issueId
-                  })
-                "
-                src="../../../images/add-new-rule-sub.png"
-                alt=""
-              />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="two_content"
+          label="问题内容"
+          :width="tableResultType === 1 ? '140px' : ''"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.two_content"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="two_factor"
+          label="系数"
+          width="70px"
+          v-if="tableResultType === 2"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.two_factor"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="two_constant"
+          label="常数"
+          width="70px"
+          v-if="tableResultType === 2"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.two_constant"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column prop="issueId" label="选项个数" width="80px">
+          <template slot-scope="scope">
+            <div>
+              {{ optionLength(scope.row.issueId) }}
             </div>
-            <div
-              class="btn_div"
-              v-if="imposeRestrictionsRemoveOnOption(scope.row.issueId)"
-            >
-              <img
-                @click="
-                  $emit('CHANGE_TABLE_ROW', {
-                    type: -3,
-                    tableIndex,
-                    rowIndex: scope.$index
-                  })
-                "
-                src="../../../images/add-new-rule-del.png"
-                alt=""
-              />
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNo" label="选项" width="70px">
+          <template slot-scope="scope">
+            <div class="btn_box">
+              <div class="btn_div">
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: 3,
+                      tableIndex,
+                      rowIndex: scope.$index,
+                      groupId: scope.row.groupId,
+                      issueId: scope.row.issueId
+                    })
+                  "
+                  src="../../../images/add-new-rule-sub.png"
+                  alt=""
+                />
+              </div>
+              <div
+                class="btn_div"
+                v-if="imposeRestrictionsRemoveOnOption(scope.row.issueId)"
+              >
+                <img
+                  @click="
+                    $emit('CHANGE_TABLE_ROW', {
+                      type: -3,
+                      tableIndex,
+                      rowIndex: scope.$index
+                    })
+                  "
+                  src="../../../images/add-new-rule-del.png"
+                  alt=""
+                />
+              </div>
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="content"
-        label="选项内容"
-        :width="tableResultType === 1 ? '140px' : ''"
-      >
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.content"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column prop="content" label="分值" v-if="tableResultType === 2">
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.content"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="result"
-        label="结果"
-        width="100px"
-        v-if="tableResultType === 1"
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="content"
+          label="选项内容"
+          :width="tableResultType === 1 ? '140px' : ''"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.content"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="content"
+          label="分值"
+          v-if="tableResultType === 2"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.content"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="result"
+          label="结果"
+          width="100px"
+          v-if="tableResultType === 1"
+        >
+          <template slot-scope="scope">
+            <el-form-item>
+              <el-input
+                type="text"
+                v-model="scope.row.result"
+                clearable
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pushInfo"
+          label="建议"
+          v-if="tableResultType === 1"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="change_table_btns">
+      <el-button
+        icon="el-icon-minus"
+        style="margin-left: 10px"
+        size="small"
+        type="danger"
+        plain
+        @click="$emit('CHANGE_TABLE', { tableIndex, type: -1 })"
+        >删除标题</el-button
       >
-        <template slot-scope="scope">
-          <el-form-item>
-            <el-input
-              type="text"
-              v-model="scope.row.result"
-              clearable
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="pushInfo"
-        label="建议"
-        v-if="tableResultType === 1"
+      <el-button
+        @click="$emit('CHANGE_TABLE', { tableIndex, type: 1 })"
+        icon="el-icon-plus"
+        size="small"
+        type="success"
+        plain
+        >新增标题</el-button
       >
-      </el-table-column>
-    </el-table>
+    </div>
   </div>
 </template>
 
@@ -392,12 +436,19 @@ export default {
       return otherGroupLength;
     },
     // 删除问题限制：该组剩余一个问题时隐藏删除按钮
-    imposeRestrictionsRemoveOnIssue(groupId) {
-      // 查找同组的问题，如果只有一个问题则隐藏删除按钮
-      const thisIssueBygroupLenth = this.tableData.filter(
+    imposeRestrictionsRemoveOnIssue(val) {
+      const { groupId, issueId } = val;
+      // 获取该组所有的issus
+      const thisGroups = this.tableData.filter(
         (item) => item.groupId === groupId
+      );
+      // 查找该组有没有其他问题 otherIssueLength为0表示只有当前一个问题存在 所以隐藏删除按钮
+      const otherIssueLength = thisGroups.filter(
+        (item) => item.issueId !== issueId
       ).length;
-      if (thisIssueBygroupLenth > 1) {
+
+      console.log(thisGroups, otherIssueLength);
+      if (otherIssueLength) {
         return true;
       }
       return false;

src/components/knowledgeExtra/AddDevKnow.vue

@@ -8,7 +8,7 @@
         linkTo="StaticInfo"
       ></crumbs>
       <el-tabs
-        style="margin: 70px 20px -20px 20px; background: #fff; padding: 0 15px"
+        style="margin: 70px 20px -20px 20px; background: #fff"
         v-model="tabActive"
       >
         <el-tab-pane label="静态知识" name="one">
@@ -828,7 +828,7 @@ export default {
   top: 0;
 }
 .info-container {
-  background: #fff;
+  // background: #fff;
   padding: 20px;
   margin: 70px 20px -20px 20px;
   .el-input__inner {
@@ -939,6 +939,10 @@ export default {
       color: #fff;
     }
   }
+  
 }
+/deep/ .el-tabs__header {
+    padding: 0 10px !important;
+  }
 </style>