diff --git a/src/assets/images/shangqi/img/mechanism.png b/src/assets/images/shangqi/img/mechanism.png
new file mode 100644
index 000000000..1b352cf29
Binary files /dev/null and b/src/assets/images/shangqi/img/mechanism.png differ
diff --git a/src/assets/images/shangqi/img/personnel.png b/src/assets/images/shangqi/img/personnel.png
new file mode 100644
index 000000000..02b17a844
Binary files /dev/null and b/src/assets/images/shangqi/img/personnel.png differ
diff --git a/src/assets/images/shangqi/img/process1.png b/src/assets/images/shangqi/img/process1.png
new file mode 100644
index 000000000..47e17ec65
Binary files /dev/null and b/src/assets/images/shangqi/img/process1.png differ
diff --git a/src/assets/images/shangqi/img/process2.png b/src/assets/images/shangqi/img/process2.png
new file mode 100644
index 000000000..d6aab687e
Binary files /dev/null and b/src/assets/images/shangqi/img/process2.png differ
diff --git a/src/assets/images/shangqi/img/process3.png b/src/assets/images/shangqi/img/process3.png
new file mode 100644
index 000000000..2790a3d42
Binary files /dev/null and b/src/assets/images/shangqi/img/process3.png differ
diff --git a/src/assets/images/shangqi/img/process4.png b/src/assets/images/shangqi/img/process4.png
new file mode 100644
index 000000000..8ca436b95
Binary files /dev/null and b/src/assets/images/shangqi/img/process4.png differ
diff --git a/src/assets/images/shangqi/img/process5.png b/src/assets/images/shangqi/img/process5.png
new file mode 100644
index 000000000..48bbb5a63
Binary files /dev/null and b/src/assets/images/shangqi/img/process5.png differ
diff --git a/src/assets/images/shangqi/img/process6.png b/src/assets/images/shangqi/img/process6.png
new file mode 100644
index 000000000..b29f37c35
Binary files /dev/null and b/src/assets/images/shangqi/img/process6.png differ
diff --git a/src/assets/styles/newStyle.less b/src/assets/styles/newStyle.less
index 34d3fea50..32e75bb19 100644
--- a/src/assets/styles/newStyle.less
+++ b/src/assets/styles/newStyle.less
@@ -909,3 +909,4 @@ tr.el-table__row{
 .button-list {
   padding: 5px 0px;
 }
+
diff --git a/src/components/roleTree/index.vue b/src/components/roleTree/index.vue
index fa5a0597e..d2603ea18 100644
--- a/src/components/roleTree/index.vue
+++ b/src/components/roleTree/index.vue
@@ -5,7 +5,7 @@
                 :visible.sync="isVisible2"
                 :wrapperClosable="false"
                 @close="handleTreeDrawerCancel"
-                size="800px">
+                size="400px">
             <el-form
                     ref="attributeEO"
                     class="label-input-form"
@@ -22,7 +22,8 @@
                     v-if="open1 && isVisible2"
                     node-key="id"
                     style="height: 100%; overflow: auto;"
-                    class="filter-tree"
+                    class="filter-tree tree-line"
+                    :class="treeClass"
                     :data="treeData"
                     :props="defaultProps"
                     :default-checked-keys="nodeList"
@@ -34,12 +35,16 @@
                     ref="tree"
                     :load="loadNode"
                     lazy>
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
             </el-tree>
             <el-tree
                     v-if="!open1 && isVisible2"
                     node-key="id"
                     style="height: 100%; overflow: auto;"
-                    class="filter-tree"
+                    class="filter-tree tree-line"
                     :data="treeData1"
                     :props="defaultProps"
                     :default-checked-keys="nodeList"
@@ -50,6 +55,10 @@
                     default-expand-all
                     show-checkbox
                     ref="tree">
+                  <span class="custom-tree-node" slot-scope="{ node, data }">
+                      <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
+                      <span> {{ node.label }} </span>
+                  </span>
             </el-tree>
             <div id="roleFormButton" class="demo-drawer-footer">
                 <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
@@ -89,7 +98,12 @@
                 filterText: '',
                 defaultProps: {
                     children: 'children',
-                    label: 'name'
+                    label: 'name',
+                    isLeaf: (data, node) => {
+                        if (!node.disabled) {
+                            return true
+                        }
+                    }
                 },
                 treeData1: [],
                 treeData: [],
@@ -99,6 +113,9 @@
             }
         },
         methods: {
+            treeClass () {
+
+            },
             handleTreeDrawerCancel () {
                 this.filterText = ''
                 this.isVisible2 = false
@@ -171,5 +188,80 @@
     }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+    /deep/.el-tree-node__content {
+        padding-left: 0px !important;
+    }
+    /deep/ .is-leaf{
+        background-image:none;
+        background-size:100% 100%;
+    }
+    /deep/ .is-leaf-none{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/personnel.png');
+        background-size:100% 100%;
+    }
+    /deep/ .is-show{
+        position: relative;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background:url('~@/assets/images/shangqi/img/mechanism.png');
+        background-size:100% 100%;
+    }
+    /deep/.tree-line{
+        .el-tree-node {
+            position: relative;
+            padding-left: 0px; // 缩进量
+            line-height: 30px;
+        }
+        .el-tree-node__children {
+            padding-left: 16px; // 缩进量
+        }
+        // 竖线
+        .el-tree-node::before {
+            content: "";
+            height: 100%;
+            width: 1px;
+            position: absolute;
+            left: -3px;
+            top: -26px;
+            border-width: 1px;
+            border-left: 1px dashed #858990e0;
+        }
+        // 当前层最后一个节点的竖线高度固定
+        .el-tree-node:last-child::before {
+            height: 38px; // 可以自己调节到合适数值
+        }
+        // 横线
+        .el-tree-node::after {
+            content: "";
+            width: 11px;
+            height: 20px;
+            position: absolute;
+            left: -3px;
+            top: 12px;
+            border-width: 1px;
+            border-top: 1px dashed #858990e0;
+        }
+        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+        & > .el-tree-node::after {
+            border-top: none;
+        }
+        & > .el-tree-node::before {
+            border-left: none;
+        }
+        // 展开关闭的icon
+        .el-tree-node__expand-icon{
+            font-size: 16px;
+            // 叶子节点（无子节点）
+            &.is-leaf{
+                color: transparent;
+                // display: none; // 也可以去掉
+            }
+        }
+    }
 </style>
diff --git a/src/components/treeSelect/treeSelectNew.vue b/src/components/treeSelect/treeSelectNew.vue
index fcd07294a..9656955c2 100644
--- a/src/components/treeSelect/treeSelectNew.vue
+++ b/src/components/treeSelect/treeSelectNew.vue
@@ -273,6 +273,10 @@
 </script>
 
 <style lang="less" scoped>
+/deep/ .expanded{
+    background-image: none !important;
+    background-size:100% 100%;
+}
 .el-drawer__body{
 & > div:first-child{
       display: flex;
diff --git a/src/pages/config/pages/roleManage/index.vue b/src/pages/config/pages/roleManage/index.vue
index 993e50efe..fb9f602a5 100644
--- a/src/pages/config/pages/roleManage/index.vue
+++ b/src/pages/config/pages/roleManage/index.vue
@@ -192,7 +192,7 @@
                                   placeholder="请输入角色描述"
                                   clearable></el-input>
                     </el-form-item>
-                    <el-form-item label="角色状态" prop="useFlag" style="margin-left: 10px">
+                    <el-form-item label="角色状态" prop="useFlag" label-width="80px" class="add-form-item">
                         <el-select class="bead-input" v-model="addForm.useFlag">
                             <el-option
                                     v-for="item in options"
@@ -261,6 +261,9 @@ export default {
             name: [
                 { required: true, message: '请输入角色名称', trigger: 'blur' },
                 {type: 'string', max: 100, message: '角色名称不能超过100个字符', trigger: 'blur'}
+            ],
+            useFlag: [
+                { required: true, message: '请选择角色状态', trigger: 'change' },
             ]
         },
         addForm: {
@@ -392,9 +395,9 @@ export default {
                           }
                       })
                   }
+                  this.addModel = false
               }
           })
-          this.addModel = false
       },
       SuperiorRole () { // 点击选择上级角色按钮
           this.SuperiorRoleModel = true
@@ -418,9 +421,6 @@ export default {
               this.nodeList3 = []
               this.nodeList3.push(this.addForm.parentId)
           }
-          this.$watch('newForm', (newVal, oldVal) => {
-              console.log(newVal, oldVal);
-          })
           this.addModel = true
       },
       getTree3 () {
diff --git a/src/pages/processCenter/pages/newProcess/index.vue b/src/pages/processCenter/pages/newProcess/index.vue
index 3ac149a2f..320976806 100644
--- a/src/pages/processCenter/pages/newProcess/index.vue
+++ b/src/pages/processCenter/pages/newProcess/index.vue
@@ -4,34 +4,165 @@
     <div v-if="bzfggllc">
       <el-divider content-position="left"><h2>标准法规管理流程</h2></el-divider>
       <div class="process-box">
-        <div class="process-name" @click="handleCreateProcess('2')">标准调研流程</div>
-        <div class="process-name" @click="handleCreateProcess('1')">标准入库流程</div>
-        <div class="process-name" @click="handleCreateProcess('3')">标准征求意见流程</div>
-<!--        <div class="process-name" @click="handleCreateProcess('4')">标准需求(翻译)申请流程</div>-->
-<!--        <div class="process-name" @click="handleCreateProcess('5')">标准发放申请流程</div>-->
-        <div class="process-name" @click="handleCreateProcess('6')">标准清单发布/更新流程</div>
-        <div class="process-name" @click="handleCreateProcess('7')">项目合规评估流程-标准</div>
-        <div class="process-name" @click="handleCreateProcess('10')">项目合规评估流程-项目</div>
-        <div class="process-name" @click="handleCreateProcess('8')">未符合项整改流程</div>
-        <div class="process-name" @click="handleCreateProcess('9')">标准解读流程</div>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+            <div class="card-box" @click="handleCreateProcess('1')">
+              <div class="card-top">
+                <div class="card-top-left">
+                  <img :src="getImg(Math.floor(Math.random() * 6))">
+                </div>
+                <div class="card-top-right">
+                  <div class="card-top-right-text">标准入库流程</div>
+                  <div class="card-top-right-line"></div>
+                </div>
+              </div>
+              <div class="card-bottom">
+                流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('2')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">标准调研流程</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('3')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">标准征求意见流程</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('6')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">标准清单发布/更新流程</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('7')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">项目合规评估流程-标准</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('8')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">未符合项整改流程</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('9')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">标准解读流程</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
+        <el-col :span="size ? 6 : 8">
+          <el-card shadow="hover">
+          <div class="card-box" @click="handleCreateProcess('10')">
+            <div class="card-top">
+              <div class="card-top-left">
+                <img :src="getImg(Math.floor(Math.random() * 6))">
+              </div>
+              <div class="card-top-right">
+                <div class="card-top-right-text">项目合规评估流程-项目</div>
+                <div class="card-top-right-line"></div>
+              </div>
+            </div>
+            <div class="card-bottom">
+              流程简介: 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
+            </div>
+          </div>
+          </el-card>
+        </el-col>
       </div>
     </div>
     <div v-if="zcgllc">
       <el-divider content-position="left"><h2>政策管理流程</h2></el-divider>
       <div class="process-box">
-
       </div>
     </div>
     <div v-if="qbgllc">
       <el-divider content-position="left"><h2>企标管理流程</h2></el-divider>
       <div class="process-box">
-
       </div>
     </div>
     <div v-if="bzcgfysqlc">
       <el-divider content-position="left"><h2>工作组会议管理流程</h2></el-divider>
       <div class="process-box">
-
       </div>
     </div>
 
@@ -42,10 +173,28 @@ export default {
   name: 'NewProcess',
   data () {
     return {
-      type: ''
+      type: '',
+      size: true
     }
   },
   methods: {
+    getImg (num) {
+      var url = ''
+      if (num == 0) {
+        url = require('@/assets/images/shangqi/img/process1.png')
+      } else if (num == 1) {
+        url = require('@/assets/images/shangqi/img/process2.png')
+      } else if (num == 2) {
+        url = require('@/assets/images/shangqi/img/process3.png')
+      } else if (num == 3) {
+        url = require('@/assets/images/shangqi/img/process4.png')
+      } else if (num == 4) {
+        url = require('@/assets/images/shangqi/img/process5.png')
+      } else if (num == 5) {
+        url = require('@/assets/images/shangqi/img/process6.png')
+      }
+      return url
+    },
     // 新建流程
     handleCreateProcess (prcType) {
       this.$store.commit('setDetailMap', this.$route.path)
@@ -176,6 +325,12 @@ export default {
     }
   },
   mounted () {
+    let width = document.body.clientWidth
+    if (width > 1900) {
+      this.size = true
+    } else {
+      this.size = false
+    }
     this.type = this.$route.params.type
   }
 }
@@ -186,17 +341,81 @@ export default {
   //height: 100%;
   padding: 15px 15px 0;
   background: #ffffff;
+  /deep/.el-card__body {
+    padding: 0;
+  }
+  .el-card {
+    margin: 25px;
+    border-radius: 10px;
+  }
+  .card-box {
+    .card-top {
+      width: 100%;
+      background: #2d8cf0;
+      height: 120px;
+      display: flex;
+      justify-content: space-between;
+      .card-top-left {
+        img {
+          margin: 10px;
+          width: 100px;
+          height: 100px;
+        }
+      }
+      .card-top-right {
+        width: 200px;
+        .card-top-right-text {
+          margin: 40px 0 5px 0;
+          color: #e6e6e6;
+          font-size: 18px;
+        }
+        .card-top-right-line {
+          height: 3px;
+          width: 200px;
+          background: #e6e6e6;
+        }
+      }
+    }
+    .card-bottom {
+      width: calc(~'100% - 60px');
+      color: #c1c1c1;
+      margin: 10px 30px;
+      line-height: 20px;
+      font-size: 14px;
+      height: 100px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 5;
+      overflow: hidden;
+    }
+  }
+  .card-box:hover {
+    .card-top {
+      .card-top-right {
+        .card-top-right-text {
+          color: rgb(247, 186, 42);
+        }
+        .card-top-right-line {
+          background: rgb(247, 186, 42);
+        }
+      }
+    }
+    .card-bottom {
+      color: #2d8cf0;
+    }
+  }
   .process-box{
     margin-left: -5px;
     margin-right: -5px;
     padding-top: 20px;
     padding-bottom: 20px;
     .process-name{
-      width: 260px;
-      padding: 10px 0;
+      width: 300px;
+      padding: 40px 0;
       margin-bottom: 10px;
       text-align: center;
       border: 1px dashed #ddd;
+      border-radius: 5px;
       background: #fdfdfd;
       font-size: 18px;
       font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
@@ -205,6 +424,12 @@ export default {
       margin-left: 5px;
       margin-right: 5px;
     }
+    .process-name:hover {
+      transform:translateY(-5px);
+      border: 1px dashed #2d8cf0;
+      background: #c6e2ff;
+      color: #2d8cf0;
+    }
   }
 }
 
diff --git a/src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue b/src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue
index 22d775b54..59bd2bd9f 100644
--- a/src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue
+++ b/src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue
@@ -4771,6 +4771,7 @@ export default {
         .el-tree-node {
             position: relative;
             padding-left: 0px; // 缩进量
+            line-height: 30px;
         }
         .el-tree-node__children {
             padding-left: 16px; // 缩进量