forked from TALL/check-work
10 changed files with 651 additions and 36 deletions
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<div> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
<div class="search-background"> |
|||
<div class="d-flex"> |
|||
<div class="flex-3 flex-wrap"> |
|||
<span class="ins-title">技术领域：</span> |
|||
<span |
|||
:class="item.isActive ? 'act-color' : ''" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="ins-name" |
|||
@click="choose(index)" |
|||
> |
|||
{{ item.name }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="inner d-flex flex-wrap"> |
|||
<div class="pro-box" v-for="(item, index) in lists" :key="index" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"> |
|||
<p class="pro-title">{{ item.title }}</p> |
|||
<p class="pro-content">{{ item.content }}</p> |
|||
<p class="pro-time">时间：{{ item.time }}</p> |
|||
</div> |
|||
</div> |
|||
<div class="inner"> |
|||
<a-pagination |
|||
:current="current" |
|||
:total="total" |
|||
:page-size="pageSize" |
|||
@change="onShowSizeChange" |
|||
class="pagination" |
|||
show-less-items |
|||
show-quick-jumper |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'Release', |
|||
components: { HNav }, |
|||
data() { |
|||
return { |
|||
str: '发布界面', |
|||
current: 1, |
|||
pageSize: 8, |
|||
total: 10, |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
name: '功能食品', |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '生物医药', |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '大健康', |
|||
isActive: false, |
|||
}, |
|||
], |
|||
lists: [ |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: 'XXX挑战成功', |
|||
time: '2020-11-20', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
choose(index) { |
|||
const that = this; |
|||
// that.achList = []; |
|||
const { list } = this; |
|||
list[index].isActive = !list[index].isActive; |
|||
this.list = [...list]; |
|||
// for (let i = 0; i < list.length; i++) { |
|||
// if (list[i].isActive) { |
|||
// this.achList.push(list[i].id); |
|||
// } |
|||
// } |
|||
// this.setAchList(this.achList); |
|||
}, |
|||
// 改变单当前页数 |
|||
onShowSizeChange(current, size) { |
|||
this.current = current; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.search-background { |
|||
background: rgba(0, 0, 0, 0.02); |
|||
border: 1px solid rgba(0, 0, 0, 0.06); |
|||
height: auto; |
|||
padding: 0 20px; |
|||
width: 82%; |
|||
margin: 40px auto; |
|||
line-height: 44px; |
|||
} |
|||
|
|||
.pagination { |
|||
margin: 40px 0; |
|||
text-align: right; |
|||
} |
|||
|
|||
.ins-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
} |
|||
|
|||
.ins-name { |
|||
font-size: 16px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.act-color { |
|||
color: #13ACC4 !important; |
|||
} |
|||
|
|||
.margin-0 { |
|||
margin-right: 0% !important; |
|||
} |
|||
|
|||
.pro-box { |
|||
width: 20.5%; |
|||
margin-right: 6%; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
padding: 24px 20px; |
|||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|||
position: relative; |
|||
margin-bottom: 20px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.pro-title { |
|||
font-size: 24px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 31px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.pro-content { |
|||
font-size: 30px; |
|||
overflow: hidden; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #13ACC4; |
|||
margin-bottom: 60px; |
|||
opacity: 1; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 5; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.pro-time { |
|||
position: absolute; |
|||
font-size: 14px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
line-height: 22px; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
opacity: 1; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.pro-btn { |
|||
position: absolute; |
|||
bottom: 24px; |
|||
width: 100px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
<div class="search-background"> |
|||
<div class="d-flex"> |
|||
<div class="flex-3 flex-wrap"> |
|||
<span class="ins-title">技术领域：</span> |
|||
<span |
|||
:class="item.isActive ? 'act-color' : ''" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="ins-name" |
|||
@click="choose(index)" |
|||
> |
|||
{{ item.name }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="inner d-flex flex-wrap"> |
|||
<div class="pro-box" v-for="(item, index) in lists" :key="index" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"> |
|||
<p class="pro-title">{{ item.title }}</p> |
|||
<p class="pro-content">{{ item.content }}</p> |
|||
<p class="pro-time">时间：{{ item.time }}</p> |
|||
<a-button class="pro-btn" type="primary">揭榜</a-button> |
|||
</div> |
|||
</div> |
|||
<div class="inner"> |
|||
<a-pagination |
|||
:current="current" |
|||
:total="total" |
|||
:page-size="pageSize" |
|||
@change="onShowSizeChange" |
|||
class="pagination" |
|||
show-less-items |
|||
show-quick-jumper |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'Release', |
|||
components: { HNav }, |
|||
data() { |
|||
return { |
|||
str: '发布界面', |
|||
current: 1, |
|||
pageSize: 8, |
|||
total: 10, |
|||
list: [ |
|||
{ |
|||
id: 1, |
|||
name: '功能食品', |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '生物医药', |
|||
isActive: false, |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '大健康', |
|||
isActive: false, |
|||
}, |
|||
], |
|||
lists: [ |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
{ |
|||
title: '需求标题', |
|||
content: |
|||
'需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容需求内容求内容需求内容求内容需求内容', |
|||
time: '2020-11-20', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
choose(index) { |
|||
const that = this; |
|||
// that.achList = []; |
|||
const { list } = this; |
|||
list[index].isActive = !list[index].isActive; |
|||
this.list = [...list]; |
|||
// for (let i = 0; i < list.length; i++) { |
|||
// if (list[i].isActive) { |
|||
// this.achList.push(list[i].id); |
|||
// } |
|||
// } |
|||
// this.setAchList(this.achList); |
|||
}, |
|||
// 改变单当前页数 |
|||
onShowSizeChange(current, size) { |
|||
this.current = current; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.search-background { |
|||
background: rgba(0, 0, 0, 0.02); |
|||
border: 1px solid rgba(0, 0, 0, 0.06); |
|||
height: auto; |
|||
padding: 0 20px; |
|||
width: 82%; |
|||
margin: 40px auto; |
|||
line-height: 44px; |
|||
} |
|||
|
|||
.pagination { |
|||
margin: 40px 0; |
|||
text-align: right; |
|||
} |
|||
|
|||
.ins-title { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
} |
|||
|
|||
.ins-name { |
|||
font-size: 16px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.act-color { |
|||
color: #13ACC4 !important; |
|||
} |
|||
|
|||
.margin-0 { |
|||
margin-right: 0% !important; |
|||
} |
|||
|
|||
.pro-box { |
|||
width: 20.5%; |
|||
margin-right: 6%; |
|||
height: 300px; |
|||
background: #FFFFFF; |
|||
padding: 24px 20px; |
|||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|||
position: relative; |
|||
margin-bottom: 20px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.pro-title { |
|||
font-size: 24px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
line-height: 31px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.pro-content { |
|||
font-size: 16px; |
|||
overflow: hidden; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
opacity: 1; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 5; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.pro-time { |
|||
position: absolute; |
|||
font-size: 14px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
line-height: 22px; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
opacity: 1; |
|||
bottom: 60px; |
|||
} |
|||
|
|||
.pro-btn { |
|||
position: absolute; |
|||
bottom: 24px; |
|||
width: 100px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div> |
|||
<h-nav /> |
|||
<div class="top-box"> |
|||
<div class="top-title">创新挑战</div> |
|||
<div class="top-content"> |
|||
山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”， |
|||
致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、 |
|||
线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统， |
|||
构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理 |
|||
念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放 |
|||
式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。 |
|||
</div> |
|||
</div> |
|||
<div class="center-box" style="margin-bottom: 160px"> |
|||
<div class="center-title"> |
|||
<div class="circular"></div> |
|||
<div style="margin-left: 40px">需求征集</div> |
|||
</div> |
|||
<div class="center-content"> |
|||
山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”， |
|||
致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、 |
|||
线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统， |
|||
构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理 |
|||
念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放 |
|||
式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。 |
|||
</div> |
|||
<a-button class="center-btn" type="primary">需求填报</a-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HNav from './../components/HNav.vue'; |
|||
export default { |
|||
name: 'Solicitation', |
|||
components: { HNav }, |
|||
data() { |
|||
return { |
|||
str: '征集界面', |
|||
list: [], |
|||
}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.top-box { |
|||
background: -webkit-linear-gradient(left, #13ACC4, #A9C300) !important; |
|||
} |
|||
|
|||
.center-btn { |
|||
position: absolute; |
|||
left: 26%; |
|||
bottom: 100px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="nav-box d-flex"> |
|||
<div v-for="(item, index) in list" :key="index" :class="activeNum === index ? 'nav-box-active' : ''" @click="jump(item.url)"> |
|||
{{ item.title }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HNav', |
|||
data() { |
|||
return { |
|||
str: '导航条', |
|||
activeNum: 0, |
|||
list: [ |
|||
{ |
|||
title: '需求征集', |
|||
url: '/Challenge/Solicitation', |
|||
}, |
|||
{ |
|||
title: '项目发布', |
|||
url: '/Challenge/Release', |
|||
}, |
|||
{ |
|||
title: '结果公告', |
|||
url: '/Challenge/Notice', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() { |
|||
console.log(); |
|||
if (this.$route.fullPath === '/Challenge/Release') { |
|||
this.activeNum = 1; |
|||
} else if (this.$route.fullPath === '/Challenge/Notice') { |
|||
this.activeNum = 2; |
|||
} else { |
|||
this.activeNum = 0; |
|||
} |
|||
}, |
|||
methods: { |
|||
jump(url) { |
|||
if (this.$route.fullPath === url) { |
|||
this.$message.success('已在当前界面'); |
|||
} else { |
|||
this.$router.push(url); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
|||
Loading…
Reference in new issue