FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
zhutianqi
2021-07-28 17:25:36 +08:00
parent 1419e7fc11
commit 9e20156e5b
13 changed files with 345 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/processCenter/pages/newProcess/index.vue
+241 -16
View File
@@ -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;
}
}
}