|
|
|
@ -1,84 +1,104 @@ |
|
|
|
<template> |
|
|
|
<div class="create-wrapper"> |
|
|
|
<el-backtop target=".create-wrapper" :visibility-height="100" :bottom="60" /> |
|
|
|
<div class="back-view"> |
|
|
|
<el-button size="mini" round @click="$router.back(-1)"> |
|
|
|
<i class="el-icon-arrow-left" /> |
|
|
|
返回 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<el-row> |
|
|
|
<el-row style="height: 20px;" /> |
|
|
|
<el-row> |
|
|
|
<el-col :offset="1" :span="2"> |
|
|
|
<el-button size="mini" round @click="$router.back(-1)"> |
|
|
|
<i class="el-icon-arrow-left" /> |
|
|
|
返回 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
<el-col :offset="4" :span="8"> |
|
|
|
<el-form ref="form"> |
|
|
|
<el-col :span="20"> |
|
|
|
<el-form ref="form" :inline="true"> |
|
|
|
<el-form-item label=""> |
|
|
|
<el-input class="search-template-input" /> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.name" |
|
|
|
class="search-template-input" |
|
|
|
@keyup.enter="queryTemplatePage" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" |
|
|
|
class="search-template-btn" |
|
|
|
@click="queryTemplatePage" |
|
|
|
> |
|
|
|
查询 |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="1" :span="4"> |
|
|
|
<el-button type="primary" class="search-template-btn">查询</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="6" /> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :offset="6" :span="10"> |
|
|
|
<el-menu default-active="1" style="background-color: transparent;" mode="horizontal"> |
|
|
|
<el-menu-item index="1">全部</el-menu-item> |
|
|
|
<el-menu-item index="2">问卷调查</el-menu-item> |
|
|
|
<el-menu-item index="3">满意度调查</el-menu-item> |
|
|
|
<el-menu-item index="4">投票评选</el-menu-item> |
|
|
|
<el-menu-item index="5">报名登记表</el-menu-item> |
|
|
|
<el-menu-item index="6">考试测评</el-menu-item> |
|
|
|
<el-menu :default-active="queryParams.type" |
|
|
|
style="background-color: transparent;" |
|
|
|
mode="horizontal" @select="(index)=>{ |
|
|
|
this.queryParams.type=index |
|
|
|
this.queryTemplatePage()}" |
|
|
|
> |
|
|
|
<el-menu-item :`index`="null">全部</el-menu-item> |
|
|
|
<el-menu-item v-for="(item, index) in templateTypeList" :key="index" |
|
|
|
:index="item.id.toString()" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</el-menu-item> |
|
|
|
</el-menu> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :offset="3" :span="3"> |
|
|
|
<el-col :span="3"> |
|
|
|
<span class="tagTitle">推荐模板</span> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :offset="3" :span="3" @click.native="createBlankTemplate"> |
|
|
|
<div class="project-template-view" style="display: flex; align-items: center;"> |
|
|
|
<div class="project-grid-container"> |
|
|
|
<div |
|
|
|
class="project-grid-view" |
|
|
|
> |
|
|
|
<div class="project-template-view" |
|
|
|
style="display: flex; align-items: center;" |
|
|
|
@click="createBlankTemplate" |
|
|
|
> |
|
|
|
<div style="flex: 1;"> |
|
|
|
<i style="font-size: 40px; align-items: center;" class="el-icon-plus" /> |
|
|
|
<p style="font-size: 14px;">创建一个空白模板</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col v-for="(template,index) in templateList" :key="template.title" |
|
|
|
:offset="getTemplateOffset(index)" |
|
|
|
:span="3" |
|
|
|
> |
|
|
|
<div class="project-template-view"> |
|
|
|
<img style="width: 144px; height: 133px;" :src="template.image"> |
|
|
|
<p style="color: rgba(16, 16, 16, 100); font-size: 14px; margin: 0; line-height: 30px;"> |
|
|
|
{{ template.title }} |
|
|
|
<div v-for="template in templateList" :key="template.title" class="project-template-view"> |
|
|
|
<img style="width: 144px; height: 133px;" :src="template.coverImg"> |
|
|
|
<p class="project-template-title"> |
|
|
|
{{ template.name }} |
|
|
|
</p> |
|
|
|
<p style="color: rgba(189, 188, 188, 100); font-size: 12px; margin: 0;"> |
|
|
|
{{ template.likeCount }}人喜欢 |
|
|
|
<svg-icon name="like" style="width: 12px; height: 12px;" /> |
|
|
|
</p> |
|
|
|
<div class="project-template-use-view"> |
|
|
|
<div |
|
|
|
class="project-template-use-view-btn" |
|
|
|
@click="toProjectTemplate(template.key)" |
|
|
|
> |
|
|
|
<div> |
|
|
|
<font-icon class="fa fa-eye" style="font-size: 40px;" /> |
|
|
|
</div> |
|
|
|
<el-button type="text">查看</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row style="height: 20px;" /> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
<el-col :span="5"> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
:hide-on-single-page="true" |
|
|
|
:total="50" |
|
|
|
layout="prev, pager, next" |
|
|
|
/> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-row> |
|
|
|
<el-row style="height: 20px;" /> |
|
|
|
<div> |
|
|
|
<el-pagination |
|
|
|
v-if="total>10" |
|
|
|
background |
|
|
|
:page-size.sync="queryParams.size" |
|
|
|
:current-page.sync="queryParams.current" |
|
|
|
layout="total, prev, pager, next" |
|
|
|
:total="total" |
|
|
|
@current-change="queryTemplatePage" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -89,104 +109,39 @@ export default { |
|
|
|
name: 'CreateProject', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
templateList: [ |
|
|
|
{ |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, |
|
|
|
{ |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
}, { |
|
|
|
image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png', |
|
|
|
title: '垃圾分类问卷调查', |
|
|
|
likeCount: 10000 |
|
|
|
} |
|
|
|
] |
|
|
|
queryParams: { |
|
|
|
current: 1, |
|
|
|
size: 11, |
|
|
|
name: '', |
|
|
|
type: null |
|
|
|
}, |
|
|
|
total: 0, |
|
|
|
templateTypeList: [], |
|
|
|
templateList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
created() { |
|
|
|
this.queryTemplateType() |
|
|
|
this.queryTemplatePage() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getTemplateOffset(index) { |
|
|
|
console.log(index) |
|
|
|
// if (index == 5 || (index != 6 && index != 0 && index % 6 === 0)) { |
|
|
|
// return 3 |
|
|
|
// } |
|
|
|
if ((index + 1) % 6 == 0) { |
|
|
|
return 3 |
|
|
|
} |
|
|
|
return 0 |
|
|
|
queryTemplateType() { |
|
|
|
this.$api.get('/project/template/type/list').then(res => { |
|
|
|
this.templateTypeList = res.data |
|
|
|
}) |
|
|
|
}, |
|
|
|
toProjectTemplate(key) { |
|
|
|
this.$router.push({path: '/project/template/preview', query: {key: key}}) |
|
|
|
}, |
|
|
|
queryTemplatePage() { |
|
|
|
this.$api.get('/project/template/page', {params: this.queryParams}).then(res => { |
|
|
|
let {records, total, size} = res.data |
|
|
|
this.templateList = records |
|
|
|
this.total = total |
|
|
|
this.queryParams.size = size |
|
|
|
this.projectListLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
createBlankTemplate() { |
|
|
|
this.$api.post('/user/project/create', { |
|
|
|
@ -201,10 +156,26 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.create-wrapper { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
overflow-x: hidden; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
align-content: center; |
|
|
|
} |
|
|
|
.back-view { |
|
|
|
display: flex; |
|
|
|
width: 80%; |
|
|
|
align-content: flex-start; |
|
|
|
margin: 10px; |
|
|
|
} |
|
|
|
.project-grid-view { |
|
|
|
display: flex; |
|
|
|
width: 1200px; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
.tagTitle { |
|
|
|
font-size: 20px; |
|
|
|
@ -217,13 +188,44 @@ export default { |
|
|
|
line-height: 20px; |
|
|
|
border-radius: 3px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 20px; |
|
|
|
margin: 20px; |
|
|
|
border: 1px solid rgba(187, 187, 187, 100); |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.project-template-view:hover .project-template-use-view { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.project-template-use-view { |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
height: 196px; |
|
|
|
z-index: 100; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
background-color: #f0f0f0; |
|
|
|
bottom: 0; |
|
|
|
filter: alpha(opacity=60); |
|
|
|
-moz-opacity: 0.6; |
|
|
|
opacity: 0.6; |
|
|
|
display: none; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
.project-template-title { |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 14px; |
|
|
|
margin: 0 3px; |
|
|
|
line-height: 30px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
.project-template-use-view-btn { |
|
|
|
margin-top: 50%; |
|
|
|
} |
|
|
|
.el-menu.el-menu--horizontal { |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
/deep/ .search-template-input input { |
|
|
|
::v-deep .search-template-input input { |
|
|
|
width: 651px; |
|
|
|
height: 50px; |
|
|
|
line-height: 20px; |
|
|
|
@ -231,7 +233,7 @@ export default { |
|
|
|
text-align: center; |
|
|
|
border: 1px solid rgba(187, 187, 187, 100); |
|
|
|
} |
|
|
|
/deep/ .search-template-btn { |
|
|
|
.search-template-btn { |
|
|
|
width: 132px; |
|
|
|
height: 50px; |
|
|
|
border-radius: 10px; |
|
|
|
|
wangqing
5 years ago