[add] 工作中心-新建流程

src/views/workCenter/NewProcess.vue

@@ -0,0 +1,195 @@
+<template>
+  <a-card :bordered="false">
+    <template v-for="data in dataList">
+      <div :key="data.uid" class="title-wrapper"><span class="title-span">{{ data.text }}</span></div>
+      <div :key="data.uid" class="list-wrapper">
+        <div v-for="item in data.list" :key="item.title" class="list-cont" @click="processClick(item)">{{ item.title }}</div>
+      </div>
+    </template>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'NewProcess',
+  data () {
+    return {
+      dataList: [
+        {
+          uid: 1,
+          text: '外部标准管理流程',
+          list: [
+            {
+              title: '标准法规入库/更正流程',
+              path: ''
+            },
+            {
+              title: '标注征求意见流程',
+              path: ''
+            },
+            {
+              title: '项目合规评估流程',
+              path: ''
+            },
+            {
+              title: '未符合项跟踪流程',
+              path: ''
+            },
+            {
+              title: '法规合规评估流程',
+              path: ''
+            },
+            {
+              title: '法规采购流程',
+              path: ''
+            }
+          ]
+        },
+        {
+          uid: 2,
+          text: '企标管理流程',
+          list: [
+            {
+              title: '企标立项/变更计划',
+              path: ''
+            },
+            {
+              title: '年度制修订计划审批流程(各部门主动上报)',
+              path: ''
+            },
+            {
+              title: '年度制修订计划审批流程(标准化发起)',
+              path: ''
+            },
+            {
+              title: '企标制修订流程(草案编写/征求意见/报批)',
+              path: ''
+            },
+            {
+              title: '企标更改流程',
+              path: ''
+            },
+            {
+              title: '企标复审流程',
+              path: ''
+            },
+            {
+              title: '企标废止流程',
+              path: ''
+            },
+            {
+              title: '企标封存流程',
+              path: ''
+            },
+            {
+              title: '已封存企标启用流程',
+              path: ''
+            },
+            {
+              title: '企标稽查计划',
+              path: ''
+            },
+            {
+              title: '企标稽查流程',
+              path: ''
+            },
+            {
+              title: '稽查延期申请流程',
+              path: ''
+            },
+            {
+              title: '企标稽查整改',
+              path: ''
+            },
+            {
+              title: '权限申请流程',
+              path: ''
+            },
+            {
+              title: '标准宣贯流程',
+              path: ''
+            }
+          ]
+        },
+        {
+          uid: 3,
+          text: '工作组相关流程',
+          list: [
+            {
+              title: '会后管理流程',
+              path: ''
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    // 流程点击
+    processClick (item) {
+      this.$router.push({
+        path: item.path
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-card-body {
+  padding-top: 0;
+}
+.title-wrapper {
+  font-size: 16px;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1D2129;
+  height: 22px;
+  line-height: 22px;
+  margin-top: 24px;
+  display: flex;
+}
+.title-wrapper::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background: #D52C26;
+  border-radius: 4px 4px 4px 4px;
+  margin-right: 8px;
+  margin-top: 3px;
+}
+.list-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-cont {
+  width: 210px;
+  height: 60px;
+  background: rgba(245,245,245,0.6);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #E5E6EB;
+  padding: 8px 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #4E5969;
+  line-height: 22px;
+  text-align: center;
+  margin: 24px 23px 0 0;
+}
+@media screen and (min-device-width: 1920px) and (max-device-width: 1366px) {
+  .list-cont:nth-child(7n) {
+    margin: 24px 0 0 0;
+  }
+}
+@media screen and (min-device-width: 1366px) and (max-device-width: 768px) {
+  .list-cont:nth-child(4n) {
+    margin: 24px 0 0 0;
+  }
+}
+</style>