From dc22358d8624d3f5a2c27ee6c27e0bdbfe705fe9 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 20 五月 2024 11:21:14 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 admin/src/views/business/approvalConfiguration.vue |  844 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 478 insertions(+), 366 deletions(-)

diff --git a/admin/src/views/business/approvalConfiguration.vue b/admin/src/views/business/approvalConfiguration.vue
index 24532ad..b2de731 100644
--- a/admin/src/views/business/approvalConfiguration.vue
+++ b/admin/src/views/business/approvalConfiguration.vue
@@ -1,132 +1,201 @@
 <template>
-    <TableLayout>
-        <template v-slot:table-wrap>
-            <div class="config">
-                <div class="config_list">
-                    <div class="config_list_head">
-                        <span>閰嶇疆娴佺▼</span>
-                        <el-button style="background: #435EBE;" type="primary">鍙戝竷</el-button>
-                    </div>
-                    <div class="config_list_list">
-                        <div class="item">
-                            <div class="item_label">鍙戣捣浜�</div>
-                            <div class="item_child">
-                                <div class="item_child_label">绋嬫槬鏋�</div>
-                                <div class="item_child_val">璁垮</div>
-                            </div>
-                            <div class="item_down">
-                                <div class="item_down_x">
-                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
-                                </div>
-                            </div>
-                        </div>
-                        <div :class="item.active ? 'item yellow active' : 'item yellow'" v-for="(item, index) in list" :key="index" @click="seleItem(index)">
-                            <div class="item_label">瀹℃壒浜�</div>
-                            <div class="item_child" style="cursor: pointer;">
-                                <img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
-                                <div class="item_child_label">琚浜�</div>
-                                <div class="item_child_val">璁垮</div>
-                            </div>
-                            <div class="item_down">
-                                <img class="item_down_add" v-if="list.length - 1 === index" src="@/assets/images/peizhi_add@2x.png" @click.stop="add" />
-                                <div class="item_down_x">
-                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="item blue" style="height: 81px;">
-                            <div class="item_label">鎶勯�佷汉</div>
-                            <div class="item_child" style="cursor: pointer;height: 40px;">
-                                <img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
-                                <div class="item_child_val" style="margin-top: 3px;">璇疯缃妱閫佷汉</div>
-                            </div>
-                            <div class="item_down">
-                                <div class="item_down_x">
-                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="footer">
-                            <span>娴佺▼缁撴潫</span>
-                        </div>
-                    </div>
+  <TableLayout>
+    <template v-slot:table-wrap>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="鏅�氳瀹�" name="first"></el-tab-pane>
+        <el-tab-pane label="鏂藉伐璁垮" name="second"></el-tab-pane>
+      </el-tabs>
+      <div class="config">
+        <div class="config_list">
+          <div class="config_list_head">
+            <span>閰嶇疆娴佺▼</span>
+            <el-button style="background: #435ebe" type="primary"
+              >鍙戝竷</el-button
+            >
+          </div>
+          <div class="config_list_list">
+            <div class="item">
+              <div class="item_label">鍙戣捣浜�</div>
+              <div class="item_child">
+                <div class="item_child_label">绋嬫槬鏋�</div>
+                <div class="item_child_val">璁垮</div>
+              </div>
+              <div class="item_down">
+                <div class="item_down_x">
+                  <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                 </div>
-                <div class="config_data">
-                    <div class="config_data_item">
-                        <div class="config_data_item_label">
-                            閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�
-                        </div>
-                        <el-radio-group v-model="radio">
-                            <el-radio :label="0">琚浜�</el-radio>
-                            <el-radio :label="1">鎸囧畾浜哄憳</el-radio>
-                            <el-radio :label="2">閮ㄩ棬涓荤</el-radio>
-                        </el-radio-group>
-                        <div class="config_data_item_reviewed" v-if="radio === 1">
-                            <div class="config_data_item_reviewed_label">
-                                <span>鎸囧畾瀹℃牳浜�</span>
-                                <span>涓嶈秴杩�20浜�</span>
-                            </div>
-                            <div class="config_data_item_reviewed_content">
-                                <div class="config_data_item_reviewed_content_item">
-                                    <span>鏍撳瓙鍝�</span>
-                                    <i class="el-icon-close"></i>
-                                </div>
-                                <span class="add">+娣诲姞</span>
-                            </div>
-                        </div>
-                        <div class="config_data_item_reviewed" v-if="radio === 2">
-                            <div class="config_data_item_reviewed_label">
-                                <span>閮ㄩ棬涓荤</span>
-                            </div>
-                            <div class="config_data_item_reviewed_r">
-                                <span>琚浜虹殑</span>
-                                <el-select v-model="value" placeholder="璇烽�夋嫨" style="margin: 0 20px 0 10px;">
-                                    <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                    </el-option>
-                                </el-select>
-                                <el-checkbox v-model="checked">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="config_data_item" v-if="radio !== 0">
-                        <div class="config_data_item_label">
-                            瀹℃壒鏂瑰紡
-                            <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span>
-                        </div>
-                        <el-radio-group v-model="radio1" style="display: flex; flex-direction: column;">
-                            <el-radio :label="0" style="margin-bottom: 20px;">鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio>
-                            <el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio>
-                        </el-radio-group>
-                    </div>
-                    <div class="config_data_item" v-if="radio === 2">
-                        <div class="config_data_item_label">
-                            瀹℃壒浜轰负绌烘椂
-                        </div>
-                        <el-checkbox-group v-model="checkList" style="display: flex; flex-direction: column;">
-                            <el-checkbox label="澶嶉�夋 A" style="margin-bottom: 20px;"></el-checkbox>
-                            <el-checkbox label="澶嶉�夋 B" style="margin-bottom: 20px;"></el-checkbox>
-                            <el-checkbox label="澶嶉�夋 C"></el-checkbox>
-                        </el-checkbox-group>
-                    </div>
-                    <div class="config_data_submit" v-if="radio !== 0">
-                        <el-button style="background: #435EBE;" type="primary">淇濇寔閰嶇疆椤�</el-button>
-                    </div>
-                </div>
+              </div>
             </div>
-        </template>
-    </TableLayout>
+            <div
+              :class="item.active ? 'item yellow active' : 'item yellow'"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="seleItem(index)"
+            >
+              <div class="item_label">瀹℃壒浜�</div>
+              <div class="item_child" style="cursor: pointer">
+                <img
+                  class="item_child_right"
+                  src="@/assets/images/ar_more@2x.png"
+                />
+                <div class="item_child_label">琚浜�</div>
+                <div class="item_child_val">璁垮</div>
+              </div>
+              <div class="item_down">
+                <!-- <img
+                  class="item_down_add"
+                  v-if="list.length - 1 === index"
+                  src="@/assets/images/peizhi_add@2x.png"
+                  @click.stop="add"
+                /> -->
+                <div class="item_down_x">
+                  <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+                </div>
+              </div>
+            </div>
+            <div class="item blue" style="height: 81px">
+              <div class="item_label">鎶勯�佷汉</div>
+              <div class="item_child" style="cursor: pointer; height: 40px">
+                <img
+                  class="item_child_right"
+                  src="@/assets/images/ar_more@2x.png"
+                />
+                <div class="item_child_val" style="margin-top: 3px">
+                  璇疯缃妱閫佷汉
+                </div>
+              </div>
+              <div class="item_down">
+                <div class="item_down_x">
+                  <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+                </div>
+              </div>
+            </div>
+            <div class="footer">
+              <span>娴佺▼缁撴潫</span>
+            </div>
+          </div>
+        </div>
+        <div class="config_data">
+          <div class="config_data_item">
+            <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div>
+            <el-radio-group v-model="radio">
+              <el-radio :label="0">琚浜�</el-radio>
+              <el-radio :label="1">鎸囧畾浜哄憳</el-radio>
+              <el-radio :label="2">閮ㄩ棬涓荤</el-radio>
+            </el-radio-group>
+            <div class="config_data_item_reviewed" v-if="radio === 1">
+              <div class="config_data_item_reviewed_label">
+                <span>鎸囧畾瀹℃牳浜�</span>
+                <span>涓嶈秴杩�20浜�</span>
+              </div>
+              <div class="config_data_item_reviewed_content">
+                <div class="config_data_item_reviewed_content_item">
+                  <span>鏍撳瓙鍝�</span>
+                  <i class="el-icon-close"></i>
+                </div>
+                <span class="add" @click="selStaff">+娣诲姞</span>
+              </div>
+            </div>
+            <div class="config_data_item_reviewed" v-if="radio === 2">
+              <div class="config_data_item_reviewed_label">
+                <span>閮ㄩ棬涓荤</span>
+              </div>
+              <div class="config_data_item_reviewed_r">
+                <span>琚浜虹殑</span>
+                <el-select
+                  v-model="value"
+                  placeholder="璇烽�夋嫨"
+                  style="margin: 0 20px 0 10px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+                <el-checkbox v-model="checked"
+                  >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox
+                >
+              </div>
+            </div>
+          </div>
+          <div class="config_data_item" v-if="radio !== 0">
+            <div class="config_data_item_label">
+              瀹℃壒鏂瑰紡
+              <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span>
+            </div>
+            <el-radio-group
+              v-model="radio1"
+              style="display: flex; flex-direction: column"
+            >
+              <el-radio :label="0" style="margin-bottom: 20px"
+                >鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio
+              >
+              <el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio>
+            </el-radio-group>
+          </div>
+          <div class="config_data_item" v-if="radio === 2">
+            <div class="config_data_item_label">瀹℃壒浜轰负绌烘椂</div>
+            <el-checkbox-group
+              v-model="checkList"
+              style="display: flex; flex-direction: column"
+            >
+              <el-checkbox
+                label="澶嶉�夋 A"
+                style="margin-bottom: 20px"
+              ></el-checkbox>
+              <el-checkbox
+                label="澶嶉�夋 B"
+                style="margin-bottom: 20px"
+              ></el-checkbox>
+              <el-checkbox label="澶嶉�夋 C"></el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <div class="config_data_submit" v-if="radio !== 0">
+            <el-button style="background: #435ebe" type="primary"
+              >淇濇寔閰嶇疆椤�</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </template>
+    <!--  -->
+    <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="800px">
+      <tree-transfer
+        v-model="param.menuIds"
+        :title="['鏈��', '宸查��']"
+        :from_data="fromData"
+        :to_data="selData"
+        :defaultProps="{ label: 'label' }"
+        mode="transfer"
+        height="500px"
+        filter
+        openAll
+        ref="treeTransfer"
+      >
+      </tree-transfer>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isShowTransfer = false">鍙� 娑�</el-button>
+        <el-button type="primary" @click="isShowTransfer = false"
+          >纭� 瀹�</el-button
+        >
+      </span>
+    </el-dialog>
+  </TableLayout>
 </template>
 
 <script>
 import TableLayout from '@/layouts/TableLayout'
+import treeTransfer from 'el-tree-transfer'
 export default {
   name: 'config',
-  components: { TableLayout },
-  data () {
+  components: {
+    TableLayout,
+    treeTransfer
+  },
+  data() {
     return {
       list: [
         {
@@ -139,17 +208,60 @@
       radio: 0,
       radio1: 0,
       checked: '',
-      checkList: []
+      checkList: [],
+
+      param: {},
+      activeName: 'first',
+      isShowTransfer: false,
+      fromData: [
+        {
+          id: '1',
+          pid: 0,
+          label: '涓�绾� 1',
+          children: [
+            {
+              id: '1-1',
+              pid: '1',
+              label: '浜岀骇 1-1',
+              disabled: true,
+              children: []
+            },
+            {
+              id: '1-2',
+              pid: '1',
+              label: '浜岀骇 1-2',
+              children: [
+                {
+                  id: '1-2-1',
+                  pid: '1-2',
+                  children: [],
+                  label: '浜岀骇 1-2-1'
+                },
+                {
+                  id: '1-2-2',
+                  pid: '1-2',
+                  children: [],
+                  label: '浜岀骇 1-2-2'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      selData: []
     }
   },
   methods: {
-    add () {
+    add() {
       this.list.push({
         name: '',
         active: false
       })
     },
-    seleItem (i) {
+    selStaff() {
+      this.isShowTransfer = true
+    },
+    seleItem(i) {
       this.list.forEach((item, index) => {
         item.active = index === i
       })
@@ -159,254 +271,254 @@
 </script>
 
 <style lang="scss" scoped>
-    .config {
-        width: 100%;
-        padding-bottom: 20px;
-        box-sizing: border-box;
-        height: calc(100vh - 140px);
+.config {
+  width: 100%;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+  height: calc(100vh - 140px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .config_list {
+    width: 543px;
+    height: 100%;
+    flex-shrink: 0;
+    border-radius: 2px;
+    padding: 20px;
+    box-sizing: border-box;
+    border: 1px solid #eeeeee;
+    background: #f7f7f7;
+    .config_list_head {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        font-size: 18px;
+        font-weight: 500;
+        color: #222222;
+      }
+    }
+    .config_list_list {
+      width: 100%;
+      height: calc(100% - 40px);
+      padding-top: 45px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      .active {
+        border: 2px solid #e84a08 !important;
+      }
+      .yellow {
+        background: #ee8921 !important;
+      }
+      .blue {
+        background: #435ebe !important;
+      }
+      .footer {
+        width: 106px;
+        height: 41px;
+        background: #ffffff;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 25px;
         display: flex;
         align-items: center;
+        justify-content: center;
+        span {
+          font-size: 15px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+      .item {
+        width: 200px;
+        height: 102px;
+        background: #7999d9;
+        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 4px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
         justify-content: space-between;
-        .config_list {
-            width: 543px;
-            height: 100%;
-            flex-shrink: 0;
-            border-radius: 2px;
-            padding: 20px;
-            box-sizing: border-box;
-            border: 1px solid #EEEEEE;
-            background: #F7F7F7;
-            .config_list_head {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                span {
-                    font-size: 18px;
-                    font-weight: 500;
-                    color: #222222;
-                }
-            }
-            .config_list_list {
-                width: 100%;
-                height: calc(100% - 40px);
-                padding-top: 45px;
-                box-sizing: border-box;
-                overflow-y: scroll;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                &::-webkit-scrollbar {
-                    width: 0;
-                }
-                .active {
-                    border: 2px solid #E84A08 !important;
-                }
-                .yellow {
-                    background: #EE8921 !important;
-                }
-                .blue {
-                    background: #435EBE !important;
-                }
-                .footer {
-                    width: 106px;
-                    height: 41px;
-                    background: #FFFFFF;
-                    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
-                    border-radius: 25px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    span {
-                        font-size: 15px;
-                        font-weight: 400;
-                        color: #333333;
-                    }
-                }
-                .item {
-                    width: 200px;
-                    height: 102px;
-                    background: #7999D9;
-                    box-shadow: 0 0 8px 0 rgba(0,0,0,0.1);
-                    border-radius: 4px;
-                    padding: 4px;
-                    box-sizing: border-box;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    position: relative;
-                    margin-bottom: 60px;
-                    &:last-child {
-                        margin: 0 !important;
-                    }
-                    .item_down {
-                        position: absolute;
-                        bottom: -60px;
-                        width: 100%;
-                        height: 60px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        .item_down_add {
-                            width: 46px;
-                            height: 46px;
-                            position: absolute;
-                            z-index: 3;
-                            top: 5px;
-                            cursor: pointer;
-                        }
-                        .item_down_x {
-                            width: 1px;
-                            height: 60px;
-                            background: #B2B2B2;
-                            position: relative;
-                            img {
-                                position: absolute;
-                                bottom: 0;
-                                left: -4px;
-                                width: 9px;
-                                height: 9px;
-                            }
-                        }
-                    }
-                    .item_label {
-                        width: 100%;
-                        height: 30px;
-                        display: flex;
-                        align-items: center;
-                        font-size: 15px;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                    }
-                    .item_child {
-                        width: 100%;
-                        height: 61px;
-                        padding: 10px;
-                        box-sizing: border-box;
-                        background: #FFFFFF;
-                        border-radius: 4px;
-                        position: relative;
-                        .item_child_right {
-                            position: absolute;
-                            right: 10px;
-                            top: 13px;
-                            width: 8px;
-                            height: 14px;
-                        }
-                        .item_child_label {
-                            font-size: 14px;
-                            font-weight: 400;
-                            color: #333333;
-                            margin-bottom: 4px;
-                        }
-                        .item_child_val {
-                            font-size: 12px;
-                            font-weight: 400;
-                            color: #999999;
-                        }
-                    }
-                }
-            }
+        position: relative;
+        margin-bottom: 60px;
+        &:last-child {
+          margin: 0 !important;
         }
-        .config_data {
-            flex: 1;
-            height: 100%;
-            margin-left: 20px;
-            .config_data_submit {
-                margin-top: 50px;
+        .item_down {
+          position: absolute;
+          bottom: -60px;
+          width: 100%;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .item_down_add {
+            width: 46px;
+            height: 46px;
+            position: absolute;
+            z-index: 3;
+            top: 5px;
+            cursor: pointer;
+          }
+          .item_down_x {
+            width: 1px;
+            height: 60px;
+            background: #b2b2b2;
+            position: relative;
+            img {
+              position: absolute;
+              bottom: 0;
+              left: -4px;
+              width: 9px;
+              height: 9px;
             }
-            .config_data_item {
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                margin-bottom: 30px;
-                &:last-child {
-                    margin: 0 !important;
-                }
-                .config_data_item_label {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: #222222;
-                    margin-bottom: 20px;
-                    span {
-                        font-size: 12px;
-                        font-weight: 400;
-                        color: #999999;
-                        margin-left: 10px;
-                    }
-                }
-                .config_data_item_reviewed {
-                    width: 100%;
-                    margin-top: 20px;
-                    .config_data_item_reviewed_r {
-                        margin-top: 10px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        span {
-                            flex-shrink: 0;
-                            font-size: 14px;
-                            font-weight: 400;
-                            color: #666666;
-                        }
-                    }
-                    .config_data_item_reviewed_label {
-                        display: flex;
-                        align-items: center;
-                        span {
-                            &:nth-child(1) {
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #222222;
-                            }
-                            &:nth-child(2) {
-                                font-size: 12px;
-                                font-weight: 400;
-                                color: #999999;
-                                margin-left: 8px;
-                            }
-                        }
-                    }
-                    .config_data_item_reviewed_content {
-                        width: 400px;
-                        margin-top: 10px;
-                        height: 110px;
-                        padding: 12px;
-                        box-sizing: border-box;
-                        border-radius: 2px;
-                        border: 1px solid #DFE2E8;
-                        display: flex;
-                        align-items: flex-start;
-                        flex-wrap: wrap;
-                        .add {
-                            font-size: 12px;
-                            font-weight: 400;
-                            color: #435EBE;
-                            cursor: pointer;
-                            margin-top: 3px;
-                        }
-                        .config_data_item_reviewed_content_item {
-                            padding: 3px 5px;
-                            background: #F4F7FC;
-                            border-radius: 2px;
-                            box-sizing: border-box;
-                            margin-right: 10px;
-                            margin-bottom: 10px;
-                            span {
-                                font-size: 12px;
-                                font-weight: 400;
-                                color: #333333;
-                            }
-                            i {
-                                color: #949BA2;
-                                margin-left: 10px;
-                                cursor: pointer;
-                            }
-                        }
-                    }
-                }
-            }
+          }
         }
+        .item_label {
+          width: 100%;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          font-size: 15px;
+          font-weight: 400;
+          color: #ffffff;
+        }
+        .item_child {
+          width: 100%;
+          height: 61px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: #ffffff;
+          border-radius: 4px;
+          position: relative;
+          .item_child_right {
+            position: absolute;
+            right: 10px;
+            top: 13px;
+            width: 8px;
+            height: 14px;
+          }
+          .item_child_label {
+            font-size: 14px;
+            font-weight: 400;
+            color: #333333;
+            margin-bottom: 4px;
+          }
+          .item_child_val {
+            font-size: 12px;
+            font-weight: 400;
+            color: #999999;
+          }
+        }
+      }
     }
+  }
+  .config_data {
+    flex: 1;
+    height: 100%;
+    margin-left: 20px;
+    .config_data_submit {
+      margin-top: 50px;
+    }
+    .config_data_item {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 30px;
+      &:last-child {
+        margin: 0 !important;
+      }
+      .config_data_item_label {
+        font-size: 16px;
+        font-weight: 500;
+        color: #222222;
+        margin-bottom: 20px;
+        span {
+          font-size: 12px;
+          font-weight: 400;
+          color: #999999;
+          margin-left: 10px;
+        }
+      }
+      .config_data_item_reviewed {
+        width: 100%;
+        margin-top: 20px;
+        .config_data_item_reviewed_r {
+          margin-top: 10px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          span {
+            flex-shrink: 0;
+            font-size: 14px;
+            font-weight: 400;
+            color: #666666;
+          }
+        }
+        .config_data_item_reviewed_label {
+          display: flex;
+          align-items: center;
+          span {
+            &:nth-child(1) {
+              font-size: 14px;
+              font-weight: 400;
+              color: #222222;
+            }
+            &:nth-child(2) {
+              font-size: 12px;
+              font-weight: 400;
+              color: #999999;
+              margin-left: 8px;
+            }
+          }
+        }
+        .config_data_item_reviewed_content {
+          width: 400px;
+          margin-top: 10px;
+          height: 110px;
+          padding: 12px;
+          box-sizing: border-box;
+          border-radius: 2px;
+          border: 1px solid #dfe2e8;
+          display: flex;
+          align-items: flex-start;
+          flex-wrap: wrap;
+          .add {
+            font-size: 12px;
+            font-weight: 400;
+            color: #435ebe;
+            cursor: pointer;
+            margin-top: 3px;
+          }
+          .config_data_item_reviewed_content_item {
+            padding: 3px 5px;
+            background: #f4f7fc;
+            border-radius: 2px;
+            box-sizing: border-box;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            span {
+              font-size: 12px;
+              font-weight: 400;
+              color: #333333;
+            }
+            i {
+              color: #949ba2;
+              margin-left: 10px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

--
Gitblit v1.9.3