18 changed files with 2300 additions and 32 deletions
@ -0,0 +1,157 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: song |
||||
|
email: 15235360226@163.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div class="enterprise-bg" v-if="newPartners && newPartners.length > 0"> |
||||
|
<div class="d-flex flex-wrap px-5"> |
||||
|
<div |
||||
|
:class="(index + 1) % 3 === 0 ? 'enterprise-box1' : ''" |
||||
|
:key="index" |
||||
|
@click="openProfile(item.name, item.description)" |
||||
|
class="enterprise-box d-flex flex-column align-center justify-center white mb-8" |
||||
|
v-for="(item, index) in newPartners" |
||||
|
> |
||||
|
<img :src="item.logoUrl" class="enterprise-pic my-2" v-if="item.logoUrl" /> |
||||
|
<div class="font-bold-24 title-color my-2">{{ item.name }}</div> |
||||
|
<div class="font-16 textColor d-flex flex-wrap align-start fill-width enterprise-txt">{{ item.description }}</div> |
||||
|
<div class="d-flex flex-nowrap fill-width py-5 enterprise-more"> |
||||
|
<div class="flex-1"></div> |
||||
|
<span class="font-16 baseColor"> |
||||
|
了解更多 |
||||
|
<a-icon type="arrow-right" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<company-profile :show-profile="showProfile" @closeProfile="closeProfile" v-if="showProfile" /> |
||||
|
</div> |
||||
|
<div class="d-flex flex-row-reverse pb-10 enterprise-page"> |
||||
|
<a-pagination |
||||
|
:default-page-size="6" |
||||
|
:total="newPartners.length" |
||||
|
@change="onChange" |
||||
|
show-less-items |
||||
|
v-model="current" |
||||
|
v-show="newPartners.length > 6" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
|
// import CompanyProfile from './CompanyProfile.vue'; |
||||
|
export default { |
||||
|
name: 'DeriveEnterprise', |
||||
|
// components: { CompanyProfile }, |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
typeOfPlatform: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
current: 1, |
||||
|
showProfile: false, // 显示公司介绍 |
||||
|
newPartners: [ |
||||
|
{ |
||||
|
description: '132', |
||||
|
name: '测试公司1', |
||||
|
logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
description: '132', |
||||
|
name: '测试公司1', |
||||
|
logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
description: '132', |
||||
|
name: '测试公司1', |
||||
|
logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
description: '132', |
||||
|
name: '测试公司1', |
||||
|
logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg', |
||||
|
}, |
||||
|
{ |
||||
|
description: '132', |
||||
|
name: '测试公司1', |
||||
|
logoUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2816433753,267880517&fm=26&gp=0.jpg', |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
...mapState('home', ['partners', 'profile']), |
||||
|
|
||||
|
// newPartners() { |
||||
|
// let { partners } = this; |
||||
|
// let arr = []; |
||||
|
// if (partners && partners.length > 0) { |
||||
|
// for (let i = 0; i < partners.length; i++) { |
||||
|
// const element = partners[i]; |
||||
|
// for (let j = 0; j < element.backendSearchList.length; j++) { |
||||
|
// const item = element.backendSearchList[j]; |
||||
|
// arr.push(item); |
||||
|
// } |
||||
|
// } |
||||
|
// return arr; |
||||
|
// } |
||||
|
// return arr; |
||||
|
// }, |
||||
|
}, |
||||
|
|
||||
|
async created() { |
||||
|
this.setPartners([]); |
||||
|
const { title, typeOfPlatform } = this; |
||||
|
const params = { |
||||
|
param: { |
||||
|
pageNum: this.current, |
||||
|
pageSize: 6, |
||||
|
type: title === '合作伙伴' ? 1 : 2, |
||||
|
typeOfPlatform: typeOfPlatform === '关于我们' ? 2 : 1, |
||||
|
}, |
||||
|
}; |
||||
|
await this.getFrontSearchCompany(params); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['setPartners', 'setProfile']), |
||||
|
...mapActions('home', ['getFrontSearchCompany']), |
||||
|
|
||||
|
// 切换页数 |
||||
|
onChange(current) { |
||||
|
this.current = current; |
||||
|
}, |
||||
|
|
||||
|
// 介绍 |
||||
|
openProfile(title, description) { |
||||
|
this.setProfile(null); |
||||
|
const profile = { |
||||
|
title, |
||||
|
description, |
||||
|
}; |
||||
|
this.setProfile(profile); |
||||
|
this.showProfile = true; |
||||
|
}, |
||||
|
|
||||
|
closeProfile() { |
||||
|
this.showProfile = false; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
@import './PartnerShip.styl'; |
||||
|
</style> |
||||
@ -0,0 +1,81 @@ |
|||||
|
// 合作伙伴 |
||||
|
.logo-box{ |
||||
|
width: 22%; |
||||
|
margin-right: 4%; |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 50px; |
||||
|
|
||||
|
.logo-pic-box{ |
||||
|
height: 90px; |
||||
|
width: 90px; |
||||
|
border-radius: 50%; |
||||
|
background: #fff; |
||||
|
line-height: 90px; |
||||
|
text-align: center; |
||||
|
box-shadow: 6px 6px 6px #eee; |
||||
|
|
||||
|
.logo-pic{ |
||||
|
height: 70px |
||||
|
} |
||||
|
|
||||
|
.logo-text{ |
||||
|
height: 100%; |
||||
|
font-size: 12px; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.logo-box1{ |
||||
|
margin-right: 0!important; |
||||
|
} |
||||
|
|
||||
|
// 衍生企业 |
||||
|
.enterprise-bg{ |
||||
|
width: 100%; |
||||
|
// background: url('../../assets/enterprise-banner.png') right no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.enterprise-box{ |
||||
|
width: 26%; |
||||
|
height: 382px; |
||||
|
margin-right: 11%; |
||||
|
position: relative; |
||||
|
padding: 0 16px; |
||||
|
|
||||
|
.enterprise-pic{ |
||||
|
height: 166px |
||||
|
} |
||||
|
|
||||
|
.enterprise-txt{ |
||||
|
display: -webkit-box; |
||||
|
overflow: hidden; |
||||
|
white-space: normal !important; |
||||
|
text-overflow: ellipsis; |
||||
|
word-wrap: break-word; |
||||
|
-webkit-line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
text-align: justify; |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
|
||||
|
.enterprise-more{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.enterprise-box1{ |
||||
|
margin-right: 0!important; |
||||
|
} |
||||
|
|
||||
|
.enterprise-page >>> .ant-pagination-item-active{ |
||||
|
background: #13ACC4; |
||||
|
} |
||||
|
|
||||
|
.enterprise-page >>> .ant-pagination-item-active a{ |
||||
|
color: #fff; |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<div> |
||||
|
<div class="policy-title"> |
||||
|
<span>{{ actDetail.title }}</span> |
||||
|
</div> |
||||
|
<div class="policy-info"> |
||||
|
<span> |
||||
|
<a-icon |
||||
|
class="baseColor" |
||||
|
style="font-size: 14px; margin-right: 10px" |
||||
|
type="clock-circle" |
||||
|
/> |
||||
|
<span>{{ actDetail.releaseTime }}-{{ actDetail.closeTime }}</span> |
||||
|
</span> |
||||
|
<span style="margin-left: 60px"> |
||||
|
<a-icon class="baseColor" style="margin-right: 10px" type="environment" /> |
||||
|
<span>{{ actDetail.address }}</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="policy-content" v-dompurify-html="actDetail.content"></div> |
||||
|
<enroll |
||||
|
:act-name="actDetail.title" |
||||
|
:activity-id="actDetail.activityId" |
||||
|
style="margin: 50px 25px" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import Enroll from './components/Enroll.vue'; |
||||
|
export default { |
||||
|
name: 'ActDetails', |
||||
|
components: { Enroll }, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
computed: mapState('home', ['actDetail']), |
||||
|
created() {}, |
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.box { |
||||
|
width: 1260px; |
||||
|
position: relative; |
||||
|
margin: 80px auto; |
||||
|
background: #fff; |
||||
|
min-height: 1037px; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
padding-bottom: 480px; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
width: 80px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.policy-title { |
||||
|
height: 120px; |
||||
|
font-size: 24px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
opacity: 1; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 150px; |
||||
|
border-bottom: 1px solid #707070; |
||||
|
} |
||||
|
|
||||
|
.policy-info { |
||||
|
height: 76px; |
||||
|
line-height: 76px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.policy-content { |
||||
|
padding: 0 25px; |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-weight: 400; |
||||
|
font-family: Microsoft YaHei; |
||||
|
} |
||||
|
|
||||
|
.coms-style { |
||||
|
height: 480px; |
||||
|
padding: 25px 0; |
||||
|
border-top: 2px solid #ccc; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.coms-top { |
||||
|
height: 280px; |
||||
|
padding: 0 25px; |
||||
|
overflow: auto; |
||||
|
box-shadow: 0 0 5px #ccc; |
||||
|
} |
||||
|
|
||||
|
.coms-btm { |
||||
|
margin-top: 20px; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.coms-content { |
||||
|
background: rgba(19, 172, 196, 0.1); |
||||
|
} |
||||
|
|
||||
|
.sub { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
bottom: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,324 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: song |
||||
|
email: 15235360226@163.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div class="inner"> |
||||
|
<div class="search-list"> |
||||
|
<span> |
||||
|
<a-checkbox :checked="sta.ly === 1" @click="cSta('ly')">路演</a-checkbox> |
||||
|
<a-checkbox :checked="sta.jz === 1" @click="cSta('jz')">讲座</a-checkbox> |
||||
|
<a-checkbox :checked="sta.sl === 1" @click="cSta('sl')">沙龙</a-checkbox> |
||||
|
</span> |
||||
|
<a-input-search @search="getData" class="search" enter-button="搜索" placeholder="请输入..." style="width: 381px" v-model="iptCon" /> |
||||
|
</div> |
||||
|
<div class="policy-box"> |
||||
|
<div :key="index" class="policy-list" v-for="(item, index) in lists"> |
||||
|
<div @click="jumpDetails(item)" class="date-box pointer" v-if="item.releaseTime"> |
||||
|
<!-- <p class="date-mon">{{ monthEnglish[item.releaseTime.split('-')[1] - 1] }}.</p> |
||||
|
<p class="date-day">{{ item.releaseTime.split(' ')[0].split('-')[2] }}</p> --> |
||||
|
<a-icon type="notification" class="pol-icon" /> |
||||
|
</div> |
||||
|
<p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p> |
||||
|
<p @click="jumpDetails(item)" class="item-content pointer">{{ item.content }}</p> |
||||
|
<p class="source-time"> |
||||
|
<span class="source"> |
||||
|
时间：{{ item.releaseTime }} |
||||
|
<span v-if="item.closeTime">-{{ item.closeTime }}</span> |
||||
|
</span> |
||||
|
<span class="source">地点：{{ item.address }}</span> |
||||
|
</p> |
||||
|
<p class="original"> |
||||
|
<a-button disabled v-if="item.releaseTime && Date.parse(item.releaseTime) < Date.parse(nowData)">报名已结束</a-button> |
||||
|
<enroll :act-name="item.title" :activity-id="item.activityId" v-else /> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a-pagination |
||||
|
:current="actCurrent" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 5" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import { front } from 'config/api'; |
||||
|
import Enroll from './components/Enroll.vue'; |
||||
|
export default { |
||||
|
name: 'Activity', |
||||
|
components: { Enroll }, |
||||
|
data() { |
||||
|
return { |
||||
|
str: '这是活动公告界面', |
||||
|
total: 0, |
||||
|
pageSize: 5, |
||||
|
iptCon: '', |
||||
|
sta: { |
||||
|
ly: 0, |
||||
|
jz: 0, |
||||
|
sl: 0, |
||||
|
}, |
||||
|
aList: [], |
||||
|
lists: [], |
||||
|
monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'], |
||||
|
nowData: '', |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']), |
||||
|
|
||||
|
created() { |
||||
|
this.iptCon = this.actIpCon; |
||||
|
this.aList = this.actList; |
||||
|
for (var i = 0; i < this.aList.length; i++) { |
||||
|
if (this.aList[i] === 0) { |
||||
|
this.sta.ly = 1; |
||||
|
} |
||||
|
if (this.aList[i] === 1) { |
||||
|
this.sta.jz = 1; |
||||
|
} |
||||
|
if (this.aList[i] === 2) { |
||||
|
this.sta.sl = 1; |
||||
|
} |
||||
|
} |
||||
|
this.getData(); |
||||
|
|
||||
|
// 获取当前时间 |
||||
|
var aData = new Date(); |
||||
|
console.log(aData); //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间) |
||||
|
this.nowData = |
||||
|
aData.getFullYear() + |
||||
|
'-' + |
||||
|
(aData.getMonth() + 1) + |
||||
|
'-' + |
||||
|
aData.getDate() + |
||||
|
' ' + |
||||
|
aData.getHours() + |
||||
|
':' + |
||||
|
aData.getMinutes() + |
||||
|
':' + |
||||
|
aData.getSeconds(); |
||||
|
console.log(this.nowData); //2019-8-20 |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setActList', 'setActIpCon', 'setActCurrent', 'setActDetail']), |
||||
|
// 获取活动公告列表 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.setActIpCon(this.iptCon); |
||||
|
const params = { |
||||
|
param: { |
||||
|
activityType: this.actList, |
||||
|
pageNum: this.actCurrent, |
||||
|
pageSize: 5, |
||||
|
titleKey: this.iptCon, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await front(params); |
||||
|
const { data, msg, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.lists = data.list; |
||||
|
this.total = parseInt(data.total); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
// 改变当前所选类型 |
||||
|
cSta(index) { |
||||
|
this.aList = []; |
||||
|
if (this.sta[index] === 0) { |
||||
|
this.sta[index] = 1; |
||||
|
console.log(this.sta); |
||||
|
} else { |
||||
|
this.sta[index] = 0; |
||||
|
console.log(this.sta); |
||||
|
} |
||||
|
if (this.sta.ly === 1) { |
||||
|
this.aList = this.aList.concat(0); |
||||
|
} |
||||
|
if (this.sta.jz === 1) { |
||||
|
this.aList = this.aList.concat(1); |
||||
|
} |
||||
|
if (this.sta.sl === 1) { |
||||
|
this.aList = this.aList.concat(2); |
||||
|
} |
||||
|
this.setActList(this.aList); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
|
||||
|
// 改变当前显示页数 |
||||
|
onShowSizeChange(current, size) { |
||||
|
this.setActCurrent(current); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到详情界面 |
||||
|
jumpDetails(item) { |
||||
|
this.setActDetail(item); |
||||
|
this.$router.push('/ActDetails'); |
||||
|
}, |
||||
|
|
||||
|
// 转换时间戳 |
||||
|
formatDate() { |
||||
|
var date = new Date('2020-04-07 18:08:58'); |
||||
|
// 有三种方式获取 |
||||
|
var time1 = date.getTime(); |
||||
|
var time2 = date.valueOf(); |
||||
|
var time3 = Date.parse(date); |
||||
|
console.log(time1); //1586254138000 |
||||
|
console.log(time2); //1586254138000 |
||||
|
console.log(time3); //1586254138000 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"> |
||||
|
.inner { |
||||
|
margin: 40px auto; |
||||
|
} |
||||
|
|
||||
|
.search-list { |
||||
|
height: 72px; |
||||
|
line-height: 72px; |
||||
|
position: relative; |
||||
|
padding-left: 24px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.search { |
||||
|
position: absolute; |
||||
|
right: 24px; |
||||
|
top: 20px; |
||||
|
} |
||||
|
|
||||
|
.policy-box { |
||||
|
.policy-list { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 238px; |
||||
|
overflow: hidden; |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
||||
|
margin-top: 24px; |
||||
|
padding: 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
margin-left: 200px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
font-size: 24px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: bold; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
margin-left: 200px; |
||||
|
text-indent: 2em; |
||||
|
font-size: 16px; |
||||
|
line-height: 36px; |
||||
|
color: rgba(0, 0, 0, 0.35); |
||||
|
font-family: Microsoft YaHei; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.source { |
||||
|
cursor: pointer; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
opacity: 1; |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 14px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.25); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.original { |
||||
|
position: absolute; |
||||
|
right: 25px; |
||||
|
bottom: 25px; |
||||
|
font-size: 14px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
line-height: 22px; |
||||
|
opacity: 1; |
||||
|
margin-bottom: 0; |
||||
|
|
||||
|
span { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date-box { |
||||
|
height: 188px !important; |
||||
|
width: 188px !important; |
||||
|
position: absolute !important; |
||||
|
top: 0 !important; |
||||
|
// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
||||
|
text-align: center; |
||||
|
box-shadow: none !important; |
||||
|
padding: 40px; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
.date-mon { |
||||
|
font-size: 40px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-weight: 500; |
||||
|
color: #13ACC4; |
||||
|
} |
||||
|
|
||||
|
.date-day { |
||||
|
font-size: 70px; |
||||
|
height: 80px; |
||||
|
line-height: 80px; |
||||
|
font-weight: bold; |
||||
|
color: #13ACC4; |
||||
|
} |
||||
|
|
||||
|
.source-time { |
||||
|
margin-left: 200px; |
||||
|
position: absolute; |
||||
|
bottom: 26px; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 68px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.pol-icon { |
||||
|
height: 108px; |
||||
|
line-height: 108px; |
||||
|
width: 108px; |
||||
|
text-align: center; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(231, 120, 22, 0.9); |
||||
|
color: white; |
||||
|
font-size: 50px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,321 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-button @click="showModal" type="primary">立即报名</a-button> |
||||
|
|
||||
|
<a-modal |
||||
|
:confirm-loading="confirmLoading" |
||||
|
:title="title" |
||||
|
:visible="visible" |
||||
|
@cancel="handleCancel" |
||||
|
@ok="handleOk" |
||||
|
width="50%" |
||||
|
> |
||||
|
<a-form :form="form"> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="活动名称" |
||||
|
> |
||||
|
<a-input :value="actName" disabled /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="申请单位" |
||||
|
required |
||||
|
> |
||||
|
<a-input placeholder="请输入申请单位..." v-model.trim="platform.companyName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
class="mb-3" |
||||
|
label="参加人员" |
||||
|
required |
||||
|
> |
||||
|
<div :key="index" class="d-flex flex-nowrap mb-3" v-for="(item,index) in people"> |
||||
|
<a-input class="flex-1 mr-3" placeholder="姓名" v-model.trim="item.name" /> |
||||
|
<a-input class="flex-1 mr-3" placeholder="职称" v-model.trim="item.duties" /> |
||||
|
<a-input class="flex-1 mr-3" placeholder="职务" v-model.trim="item.positional" /> |
||||
|
<a-button |
||||
|
@click="changePerson(index)" |
||||
|
icon="plus" |
||||
|
type="link" |
||||
|
v-if="index === people.length -1" |
||||
|
/> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
|
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系人" |
||||
|
required |
||||
|
> |
||||
|
<a-input placeholder="请输入联系人..." v-model.trim="platform.manName" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="联系电话" |
||||
|
required |
||||
|
> |
||||
|
<a-input |
||||
|
@change="changePhone" |
||||
|
placeholder="请输入联系电话.." |
||||
|
type="tel" |
||||
|
v-decorator="['tel', { rules: phoneRules }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="图片验证码" |
||||
|
required |
||||
|
> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
||||
|
<img |
||||
|
:src="picCode.imageBase64" |
||||
|
@click="changePicCode" |
||||
|
class="code_img ml-2" |
||||
|
v-if="picCode && picCode.imageBase64" |
||||
|
/> |
||||
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
||||
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
<a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label="短信验证码" |
||||
|
required |
||||
|
> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
||||
|
<a-button |
||||
|
class="code_img ml-2" |
||||
|
disabled |
||||
|
type="primary" |
||||
|
v-if="showInterval" |
||||
|
>重新发送 {{ interval }}</a-button> |
||||
|
<a-button |
||||
|
:disabled="platform.isTel === false" |
||||
|
@click="getCode" |
||||
|
class="code_img ml-2" |
||||
|
type="primary" |
||||
|
v-else |
||||
|
>获取验证码</a-button> |
||||
|
</div> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapState, mapActions } from 'vuex'; |
||||
|
import { apply } from 'config/api'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const formTailLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18, offset: 6 }, |
||||
|
}; |
||||
|
export default { |
||||
|
name: 'Enroll', |
||||
|
props: { |
||||
|
activityId: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
actName: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: this.$form.createForm(this, { name: 'submit' }), |
||||
|
visible: false, |
||||
|
title: '活动报名', |
||||
|
formItemLayout, |
||||
|
formTailLayout, |
||||
|
confirmLoading: false, |
||||
|
// 参加人员 |
||||
|
people: [ |
||||
|
{ |
||||
|
name: '', |
||||
|
duties: '', |
||||
|
positional: '', |
||||
|
}, |
||||
|
], |
||||
|
platform: { |
||||
|
companyName: '', // 申请单位 |
||||
|
manName: '', // 联系人 |
||||
|
tel: '', // 联系电话 |
||||
|
code: '', // 验证码 |
||||
|
isTel: false, |
||||
|
}, |
||||
|
codeRules: [ |
||||
|
{ required: true, message: '请输入验证码' }, |
||||
|
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
||||
|
], |
||||
|
codeNum: '', |
||||
|
showInterval: false, |
||||
|
codeTimer: null, |
||||
|
interval: 120, // 验证码有效时间倒计时 |
||||
|
phoneRules: [ |
||||
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('user', ['picCode']), |
||||
|
|
||||
|
async created() { |
||||
|
this.sendPicCode(); |
||||
|
await this.getUserSer(); |
||||
|
if (this.userSer) { |
||||
|
if (this.userSer.name) { |
||||
|
this.platform.manName = this.userSer.name; |
||||
|
} |
||||
|
if (this.userSer.phone) { |
||||
|
this.platform.tel = this.userSer.phone; |
||||
|
} |
||||
|
if (this.userSer.companyName) { |
||||
|
this.platform.companyName = this.userSer.companyName; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapActions('user', ['sendCode', 'sendPicCode']), |
||||
|
...mapActions('home', ['getUserSer']), |
||||
|
|
||||
|
changePerson(index) { |
||||
|
// if (this.people[index].name && this.people[index].positional && this.people[index].duties) { |
||||
|
const a = { name: '', positional: '', duties: '' }; |
||||
|
this.people.push(a); |
||||
|
// } |
||||
|
}, |
||||
|
// 显示表单输入框 |
||||
|
showModal() { |
||||
|
this.visible = true; |
||||
|
}, |
||||
|
// 取消显示 |
||||
|
handleCancel(e) { |
||||
|
this.visible = false; |
||||
|
}, |
||||
|
// 验证电话 |
||||
|
changePhone(e) { |
||||
|
this.platform.tel = e.target.value; |
||||
|
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
||||
|
}, |
||||
|
// 点击确定 |
||||
|
handleOk() { |
||||
|
if (!this.platform.companyName) { |
||||
|
this.$message.error('请输入申请单位'); |
||||
|
} else if (!this.people[0].name || !this.people[0].positional || !this.people[0].duties) { |
||||
|
this.$message.error('请至少输入一名参加人员'); |
||||
|
} else if (!this.platform.tel) { |
||||
|
this.$message.error('请输入联系电话'); |
||||
|
} else if (!this.platform.code) { |
||||
|
this.$message.error('请输入验证码'); |
||||
|
} else { |
||||
|
if (this.platform.isTel) { |
||||
|
this.subMitAdd(); |
||||
|
} else { |
||||
|
this.$message.error('请输入正确的联系电话'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 加入接口 |
||||
|
async subMitAdd() { |
||||
|
this.confirmLoading = true; |
||||
|
try { |
||||
|
const { activityId, platform, people } = this; |
||||
|
people.forEach(item => { |
||||
|
item.activityId = activityId; |
||||
|
}); |
||||
|
const params = { |
||||
|
param: { |
||||
|
activityId, |
||||
|
code: platform.code, |
||||
|
companyName: platform.companyName, |
||||
|
contactName: platform.manName, |
||||
|
contactPhone: platform.tel, |
||||
|
peoples: people, |
||||
|
}, |
||||
|
}; |
||||
|
console.log('params: ', params); |
||||
|
const res = await apply(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.$message.success('申请成功'); |
||||
|
this.visible = false; |
||||
|
this.confirmLoading = false; |
||||
|
for (let key in this.platform) { |
||||
|
this.platform[key] = ''; |
||||
|
} |
||||
|
this.platform.isTel = false; |
||||
|
} else { |
||||
|
throw msg; |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
this.confirmLoading = false; |
||||
|
} |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
async getCode() { |
||||
|
console.log(111); |
||||
|
try { |
||||
|
const params = { |
||||
|
phone: this.platform.tel, |
||||
|
verificationCodeId: this.picCode.verificationCodeId, |
||||
|
verificationCodeValue: this.codeNum, |
||||
|
}; |
||||
|
await this.sendCode(params); |
||||
|
this.getCodeInterval(); |
||||
|
} catch (error) { |
||||
|
// throw new Error(`SignIn.vue method getCode: ${error}`); |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 验证码倒计时 |
||||
|
getCodeInterval() { |
||||
|
this.showInterval = true; |
||||
|
this.codeTimer = setInterval(() => { |
||||
|
if (this.interval === 0) { |
||||
|
clearInterval(this.codeTimer); |
||||
|
this.codeTimer = null; |
||||
|
this.showInterval = false; |
||||
|
this.interval = 120; |
||||
|
return; |
||||
|
} |
||||
|
this.interval = this.interval - 1; |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 刷新验证码 |
||||
|
changePicCode() { |
||||
|
this.sendPicCode(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.must-color { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.code_img { |
||||
|
height: 32px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<rotation /> |
||||
|
<div class="inner content-box" style="margin-top: 50px; margin-bottom: 50px"> |
||||
|
<div :key="index" v-for="(item, index) in list"> |
||||
|
<div class="d-flex justify-space-between" v-if="index % 2 === 0"> |
||||
|
<div class="introduce-box" style="width: 50% !important"> |
||||
|
<p class="introduce-title">{{ item.title }}</p> |
||||
|
<p class="introduce-content">{{ item.content }}</p> |
||||
|
</div> |
||||
|
<img /> |
||||
|
<video width="50%" :poster="item.imgUrl" controls> |
||||
|
<source src="https://www.sxwikionline.com/greenvalley/01.mp4" type="video/mp4" /> |
||||
|
<source src="https://www.sxwikionline.com/greenvalley/01.mp4" type="video/ogg" /> |
||||
|
</video> |
||||
|
</div> |
||||
|
<div class="d-flex justify-space-between" v-else> |
||||
|
<video width="50%" :poster="item.imgUrl" controls> |
||||
|
<source src="https://www.sxwikionline.com/greenvalley/02.mp4" type="video/mp4" /> |
||||
|
<source src="https://www.sxwikionline.com/greenvalley/02.mp4" type="video/ogg" /> |
||||
|
</video> |
||||
|
<div class="introduce-box" style="width: 50% !important"> |
||||
|
<p class="introduce-title">{{ item.title }}</p> |
||||
|
<p class="introduce-content">{{ item.content }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a-pagination |
||||
|
:current="current" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 2" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Rotation from 'components/Rotation/Rotation.vue'; |
||||
|
export default { |
||||
|
name: 'Introduce', |
||||
|
components: { Rotation }, |
||||
|
data() { |
||||
|
return { |
||||
|
title: '关于我们-公司介绍', |
||||
|
arr: [ |
||||
|
{ name: '关于我们', url: '/About/Introduce' }, |
||||
|
{ name: '公司介绍', url: '' }, |
||||
|
], |
||||
|
list: [ |
||||
|
{ |
||||
|
title: '山西维基智汇科技有限公司', |
||||
|
content: |
||||
|
'研究院的介绍包含研究院，公司架构，和各中心的介绍。' + |
||||
|
'各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、' + |
||||
|
'数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、' + |
||||
|
'山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。', |
||||
|
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg', |
||||
|
videoUr: 'https://www.sxwikionline.com/greenvalley/01.mp4', |
||||
|
}, |
||||
|
{ |
||||
|
title: '山西维基智汇科技有限公司', |
||||
|
content: |
||||
|
'各中心介绍包含科创体系与科创能力咨询服务中心、' + |
||||
|
'知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、' + |
||||
|
'科创战略协同研究中心、山西奥依工业设计咨询服务中心', |
||||
|
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg', |
||||
|
videoUr: 'https://www.sxwikionline.com/greenvalley/02.mp4', |
||||
|
}, |
||||
|
], |
||||
|
current: 1, |
||||
|
pageSize: 2, |
||||
|
total: 10, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
onShowSizeChange(current, size) { |
||||
|
console.log(current, size); |
||||
|
this.current = current; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.pagination { |
||||
|
margin-top: 48px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,31 @@ |
|||||
|
<!-- |
||||
|
* @Author: wally |
||||
|
* @email: 18603454788@163.com |
||||
|
* @Date: 2021-01-14 12:20:06 |
||||
|
* @LastEditors: wally |
||||
|
* @LastEditTime: 2021-01-14 12:29:14 |
||||
|
--> |
||||
|
<template> |
||||
|
<div class="inner" style="margin-top: 50px; margin-bottom: 100px"> |
||||
|
<left-nav style="float: left" /> |
||||
|
<div style="width: 83%; float: right"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LeftNav from './components/LeftNav.vue'; |
||||
|
export default { |
||||
|
name: 'Challenge', |
||||
|
components: { LeftNav }, |
||||
|
data() { |
||||
|
return { |
||||
|
title: '创新挑战', |
||||
|
arr: [{ name: '创新挑战', url: '' }], |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"></style> |
||||
@ -0,0 +1,215 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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' : ''" |
||||
|
:key="index" |
||||
|
@click="choose(index)" |
||||
|
class="ins-name" |
||||
|
v-for="(item, index) in list" |
||||
|
> |
||||
|
{{ item.name }} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex flex-wrap"> |
||||
|
<div :class="(index + 1) % 3 === 0 ? 'margin-0' : ''" :key="index" class="pro-box" v-for="(item, index) in lists"> |
||||
|
<p class="pro-title">{{ item.title }}</p> |
||||
|
<p class="pro-content">{{ item.content }}</p> |
||||
|
<p class="pro-time">时间：{{ item.time }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<a-pagination |
||||
|
:current="current" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 6" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Notice', |
||||
|
data() { |
||||
|
return { |
||||
|
str: '发布界面', |
||||
|
title: '结果公告', |
||||
|
typeOfPlatform: '创新挑战', |
||||
|
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', |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
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> |
||||
|
.inner { |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
|
||||
|
.search-background { |
||||
|
background: rgba(0, 0, 0, 0.02); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
height: auto; |
||||
|
padding: 0 20px; |
||||
|
margin-bottom: 40px; |
||||
|
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: 26%; |
||||
|
margin-right: 11%; |
||||
|
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,223 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="d-flex flex-wrap"> |
||||
|
<div :class="(index + 1) % 4 === 0 ? 'margin-0' : ''" :key="index" class="pro-box" v-for="(item, index) in lists"> |
||||
|
<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> |
||||
|
<a-pagination |
||||
|
:current="current" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 8" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Release', |
||||
|
data() { |
||||
|
return { |
||||
|
title: '项目发布', |
||||
|
typeOfPlatform: '创新挑战', |
||||
|
arr: [ |
||||
|
{ name: '创新挑战', url: '/Challenge/Solicitation' }, |
||||
|
{ name: '项目发布', url: '' }, |
||||
|
], |
||||
|
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> |
||||
|
.inner { |
||||
|
margin: 10px auto 15px; |
||||
|
} |
||||
|
|
||||
|
.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,73 @@ |
|||||
|
<template> |
||||
|
<div class="white"> |
||||
|
<div class="words-content"> |
||||
|
<p class="words-title">需求征集</p> |
||||
|
<p class="con-con"> |
||||
|
研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、 |
||||
|
知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、 |
||||
|
山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。 |
||||
|
各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、 |
||||
|
科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心 |
||||
|
</p> |
||||
|
<p class="words-title">征集流程</p> |
||||
|
<p class="con-con"> |
||||
|
研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、 |
||||
|
知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、 |
||||
|
山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。 |
||||
|
各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、 |
||||
|
科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心 |
||||
|
研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、 |
||||
|
知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、 |
||||
|
山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。 |
||||
|
各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、 |
||||
|
科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心 |
||||
|
研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系与科创能力咨询服务中心、 |
||||
|
知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、 |
||||
|
山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。 |
||||
|
各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、 |
||||
|
科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心 |
||||
|
</p> |
||||
|
</div> |
||||
|
<a-button type="primary" class="btn">我要发榜</a-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Solicitation', |
||||
|
data() { |
||||
|
return { |
||||
|
title: '需求征集', |
||||
|
typeOfPlatform: '创新挑战', |
||||
|
arr: [ |
||||
|
{ name: '创新挑战', url: '/Challenge/Solicitation' }, |
||||
|
{ name: '需求征集', url: '' }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.white { |
||||
|
padding: 40px 25px 100px 25px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.words-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
text-align: center; |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.con-con { |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
position: absolute; |
||||
|
right: 25px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div class="nav-box"> |
||||
|
<div :class="activeNum === index ? 'nav-box-active' : ''" :key="index" @click="jump(item.url, index)" v-for="(item, index) in list"> |
||||
|
{{ item.title }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'LeftNav', |
||||
|
data() { |
||||
|
return { |
||||
|
str: '创新挑战导航条', |
||||
|
activeNum: 0, |
||||
|
list: [ |
||||
|
{ |
||||
|
title: '需求征集', |
||||
|
url: '/Challenge/Solicitation', |
||||
|
}, |
||||
|
{ |
||||
|
title: '项目发布', |
||||
|
url: '/Challenge/Release', |
||||
|
}, |
||||
|
{ |
||||
|
title: '结果公示', |
||||
|
url: '/Challenge/Notice', |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
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, index) { |
||||
|
if (this.$route.fullPath === url) { |
||||
|
this.$message.success('已在当前界面'); |
||||
|
} else { |
||||
|
this.$router.push(url); |
||||
|
this.activeNum = index; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"></style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
|
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<rotation /> |
||||
|
<div class="inner" style="padding: 0 25px; position: relative; padding-bottom: 50px"> |
||||
|
<p class="dev-title">数智开发界面</p> |
||||
|
<p class="dev-content"> |
||||
|
研究院的介绍包含研究院，公司架构，和各中心的介绍。 各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、 |
||||
|
数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、 |
||||
|
山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。 |
||||
|
各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、 |
||||
|
数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心 |
||||
|
</p> |
||||
|
<a-button type="primary" class="dev-btn">项目合作</a-button> |
||||
|
</div> |
||||
|
<div class="inner dev-img-box d-flex flex-wrap" style="margin-top: 40px !important; margin-bottom: 40px !important"> |
||||
|
<div v-for="(item, index) in lists" :key="index" class="d-flex" style="width: 50%"> |
||||
|
<img :src="item" style="width: 100%; cursor: pointer" @click="showProfile = true" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a-modal width="50%" :footer="null" title="XX项目介绍" :visible="showProfile" @cancel="handleCancel" @ok="handleCancel"> |
||||
|
<p> |
||||
|
公司采取理事会、经理层、事业部组织架构，公司理事会组成按理事会章程执行，经理层设总经理 1 名、副总经理 2-3 名，各事业部设部长 1 |
||||
|
名、副部长 1 名。 |
||||
|
公司以协同创新中心为引擎、以创业孵化平台为基石、以产业集聚发展为导向，基于创新链、孵化链和产业链进行整体布局，下设行政事业部、创新事业部、孵化事业部和产业事业部。 |
||||
|
（一）行政事业部。统筹行政办公、人力资源、财务管理、公共关系和数字平台建设等工作；组织编制发展战略和 年度计划;组织开展绩效考评; |
||||
|
协同推进创新、孵化和产业事 业部联合协作及全链条一体化融通发展。 |
||||
|
（二）创新事业部。负责功能食品与生物医药协同创新中心的建设和运营，集聚整合股东及外部优势创新资源，着力打造产学研用协同、多学科交叉融合、 |
||||
|
覆盖全创新链的开放式协同创新平台，搭建专业化科技资源开放共享服务平台和技术转移转化平台，面向入孵企业及外部企业需求，组织开展技术研发、 |
||||
|
技术转化、技术咨询、技术评估、技术培训、检验检测等一站式创新服务。 |
||||
|
（三）孵化事业部。负责功能食品与生物医药专业化众创空间的建设和运营，构建众创空间一孵化器一加速器-产业园专业化创新创业孵化链， |
||||
|
打造以公共研发与检验检测平台为支撑、以创新创业增值服务为主导、以创新创业学院(大讲堂)为带动、以创新创业投融资为拓展，线上线下相结合、 |
||||
|
实体虚拟相融合的全要素专业化开放式创新创业孵化平台，促进技术转移转化和科技型中小微企业集聚发展。 |
||||
|
（四）产业事业部。负责产业发展、市场开发和产业技术创新战略联盟的建设与运营，基于协同创新中心和专业化众创空间，发挥股东场所、 |
||||
|
技术、资本、市场、渠道和产业化优势，推动政产学研金介用合作，组织举办技术创新论坛， |
||||
|
构建专业化、集群化、园区化产业发展布局，培育发展衍生企业， 拓展发展领域和空间，打造产业园区和特色产业基地， |
||||
|
推动大中小企业融通、产业集群化园区化发展。 |
||||
|
</p> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Rotation from 'components/Rotation/Rotation.vue'; |
||||
|
export default { |
||||
|
name: 'Activity', |
||||
|
components: { Rotation }, |
||||
|
data() { |
||||
|
return { |
||||
|
lists: [ |
||||
|
'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210114/f8d1790b78ca4afca3cfb15e350a53ef.jpg', |
||||
|
'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210114/0b883954d7ae4fd1a74be0c7943a3e52.jpg', |
||||
|
'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210114/e92c71d276dd4689a43c643472762c12.jpg', |
||||
|
'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210114/bc60bf21daa6431b9dcf3c575121dabd.jpg', |
||||
|
], |
||||
|
showProfile: false, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleCancel() { |
||||
|
this.showProfile = false; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"> |
||||
|
.dev-title { |
||||
|
margin: 50px 0 !important; |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.dev-content { |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
} |
||||
|
|
||||
|
.dev-btn { |
||||
|
position: absolute; |
||||
|
right: 25px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,176 @@ |
|||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<div> |
||||
|
<div class="policy-title"> |
||||
|
<span>{{ postDetail.title }}</span> |
||||
|
</div> |
||||
|
<div class="policy-info"> |
||||
|
<span> |
||||
|
时间： |
||||
|
<span>{{ postDetail.createdTime }}</span> |
||||
|
</span> |
||||
|
<span style="margin-left: 60px"> 地点：太原 </span> |
||||
|
</div> |
||||
|
<div class="policy-content" v-dompurify-html="postDetail.content"></div> |
||||
|
</div> |
||||
|
<div class="coms-style"> |
||||
|
<div class="coms-top"> |
||||
|
<div :key="index" style="margin-top: 2em" v-for="(item, index) in coms"> |
||||
|
<p style="color: #999"> |
||||
|
<a-avatar :size="30" :src="item.avatarUrl" alt style="margin-top: -4px; margin-right: 4px" /> |
||||
|
<span style="margin-right: 10px">{{ item.userName }}</span> |
||||
|
<span class="coms-content">{{ item.content }}{{ item.content }}{{ item.content }}</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="coms-btm"> |
||||
|
<a-textarea placeholder="请输入内容..." style="height: 140px;min-height: 140px；max-height: 140px" v-model="comment" /> |
||||
|
<a-button @click="sub" class="sub" type="primary">提交</a-button> |
||||
|
</div> |
||||
|
<!-- <div class="txtara"> |
||||
|
<a-textarea placeholder="请输入..." :rows="4" v-model="comment" /> |
||||
|
<a-button class="txt-btn" type="primary" @click="sub(index)">提交</a-button> |
||||
|
</div>--> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import { selCommunity, insComment } from 'config/selComment'; |
||||
|
export default { |
||||
|
name: 'StuDetails', |
||||
|
data() { |
||||
|
return { |
||||
|
comment: '', |
||||
|
coms: {}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', ['postDetail']), |
||||
|
created() { |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
async getData() { |
||||
|
// 查看评论 |
||||
|
try { |
||||
|
const params = { param: { commentId: this.postDetail.id } }; |
||||
|
const res = await selCommunity(params); |
||||
|
const { msg, data, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.coms = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
this.$message.error(error); |
||||
|
} |
||||
|
}, |
||||
|
// 跟帖（发表评论） |
||||
|
async sub(index) { |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
communityId: this.postDetail.id, |
||||
|
content: this.comment, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await insComment(params); |
||||
|
const { msg, data, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.comment = ''; |
||||
|
this.$message.success('评论成功'); |
||||
|
this.getData(); |
||||
|
} else { |
||||
|
console.log(msg); |
||||
|
this.$message.error('评论失败'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
this.$message.error('评论失败'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.box { |
||||
|
width: 1260px; |
||||
|
position: relative; |
||||
|
margin: 80px auto; |
||||
|
background: #fff; |
||||
|
min-height: 1037px; |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
padding-bottom: 480px; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
width: 80px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.policy-title { |
||||
|
height: 120px; |
||||
|
font-size: 24px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
opacity: 1; |
||||
|
text-align: left; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: left; |
||||
|
padding: 0 25px; |
||||
|
} |
||||
|
|
||||
|
.policy-info { |
||||
|
position: absolute; |
||||
|
height: 76px; |
||||
|
line-height: 76px; |
||||
|
right: 25px; |
||||
|
bottom: 500px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.policy-content { |
||||
|
padding: 0 25px; |
||||
|
font-size: 16px; |
||||
|
color: rgba(0, 0, 0, 0.65); |
||||
|
font-weight: 400; |
||||
|
font-family: Microsoft YaHei; |
||||
|
} |
||||
|
|
||||
|
.coms-style { |
||||
|
height: 480px; |
||||
|
padding: 25px 0; |
||||
|
border-top: 2px solid #ccc; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.coms-top { |
||||
|
height: 280px; |
||||
|
padding: 0 25px; |
||||
|
overflow: auto; |
||||
|
box-shadow: 0 0 5px #ccc; |
||||
|
} |
||||
|
|
||||
|
.coms-btm { |
||||
|
margin-top: 20px; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.coms-content { |
||||
|
background: rgba(19, 172, 196, 0.1); |
||||
|
} |
||||
|
|
||||
|
.sub { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
bottom: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,255 @@ |
|||||
|
<!-- |
||||
|
Copyright (c) 2020. |
||||
|
author: bin |
||||
|
email: binbin0314@126.com |
||||
|
--> |
||||
|
|
||||
|
<template> |
||||
|
<div class="inner"> |
||||
|
<div class="search-list"> |
||||
|
<a-input-search |
||||
|
@search="searchData" |
||||
|
class="search" |
||||
|
enter-button="搜索" |
||||
|
placeholder="请输入..." |
||||
|
style="width: 381px" |
||||
|
v-model="iptCon" |
||||
|
/> |
||||
|
</div> |
||||
|
<div :key="index" class="post" v-for="(item, index) in lists"> |
||||
|
<div class="d-flex flex-nowrap"> |
||||
|
<img :src="item.visitLocation" alt class="post-img" v-if="item.visitLocation" /> |
||||
|
<div> |
||||
|
<div class="post-content"> |
||||
|
<p class="post-title">{{ item.title }}</p> |
||||
|
<div class="con-con" v-dompurify-html="item.content"></div> |
||||
|
</div> |
||||
|
<p style="color: rgba(0, 0, 0, 0.45); line-height: 30px; margin: 0 0 0 30px !important; margin-left: 0 !important"> |
||||
|
<span>{{ item.createdTime }}</span> |
||||
|
<span style="margin-left: 20px"> 地点：太原 </span> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="look-down baseColor"> |
||||
|
<span @click="getDet(item.id, index)"> |
||||
|
查看详情 |
||||
|
<a-icon type="arrow-right" /> |
||||
|
</span> |
||||
|
</p> |
||||
|
<!-- <div class="comment"> |
||||
|
<div :key="b" v-for="(a, b) in coms"> |
||||
|
<p style="padding-left: 20px"> |
||||
|
<a-avatar :size="20" :src="a.avatarUrl" style="margin-top: -4px" /> |
||||
|
<span>{{ a.userName }}</span> |
||||
|
<span style="margin-left: 20px">{{ a.creatTime }}</span> |
||||
|
</p> |
||||
|
<p class="coms-con">{{ a.content }}</p> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<a-pagination |
||||
|
:current="comCurrent" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@change="onShowSizeChange" |
||||
|
class="pagination" |
||||
|
show-less-items |
||||
|
show-quick-jumper |
||||
|
v-show="total > 5" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapMutations, mapState } from 'vuex'; |
||||
|
import { selComment } from 'config/selComment'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Study', |
||||
|
// components: { SearchList }, |
||||
|
data() { |
||||
|
return { |
||||
|
str: '这是交流社区界面', |
||||
|
radioStyle: { |
||||
|
height: '30px', |
||||
|
lineHeight: '30px', |
||||
|
}, |
||||
|
comment: '', |
||||
|
total: 0, |
||||
|
pageSize: 5, |
||||
|
value: 1, |
||||
|
iptCon: '', |
||||
|
showType: -1, |
||||
|
coms: [], |
||||
|
lists: [], |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', ['comCurrent', 'postVal', 'postIpCon']), |
||||
|
watch: { |
||||
|
value(val) { |
||||
|
this.setPostVal(val - 1); |
||||
|
this.setComCurrent(1); |
||||
|
this.searchData(); |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.value = this.postVal + 1; |
||||
|
this.iptCon = this.postIpCon; |
||||
|
this.searchData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setComCurrent', 'setPostDetail', 'setPostVal', 'setPostIpCon']), |
||||
|
// 展开帖子，并且评论 |
||||
|
async getDet(id, index) { |
||||
|
this.setPostDetail(this.lists[index]); |
||||
|
this.$router.push('/StuDetails'); |
||||
|
}, |
||||
|
// 查询当前页帖子列表（5篇） |
||||
|
async searchData() { |
||||
|
try { |
||||
|
this.setPostIpCon(this.iptCon); |
||||
|
const params = { |
||||
|
param: { |
||||
|
category: this.value - 1, |
||||
|
pageNum: this.comCurrent, |
||||
|
pageSize: 5, |
||||
|
title: this.iptCon, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await selComment(params); |
||||
|
const { msg, data, code } = res.data; |
||||
|
if (code === 200) { |
||||
|
console.log(data); |
||||
|
this.lists = data.list; |
||||
|
this.total = parseInt(data.total); |
||||
|
} else { |
||||
|
console.log(msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
// 改变单当前页数 |
||||
|
onShowSizeChange(current, size) { |
||||
|
this.setComCurrent(current); |
||||
|
this.searchData(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="stylus"> |
||||
|
.inner { |
||||
|
margin: 40px auto; |
||||
|
} |
||||
|
|
||||
|
.post-title { |
||||
|
// width: 165px; |
||||
|
height: 26px; |
||||
|
font-size: 20px; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: bold; |
||||
|
line-height: 26px; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
overflow: hidden; |
||||
|
opacity: 1; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.search-list { |
||||
|
height: 72px; |
||||
|
line-height: 72px; |
||||
|
padding: 0 24px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.search { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 20px; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 75px; |
||||
|
height: 32px; |
||||
|
position: absolute; |
||||
|
right: 25px; |
||||
|
top: 20px; |
||||
|
} |
||||
|
|
||||
|
.post { |
||||
|
width: 100%; |
||||
|
padding: 25px; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
height: 270px; |
||||
|
background: #fff; |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
transition: all 0.25s; |
||||
|
} |
||||
|
|
||||
|
.post-img { |
||||
|
width: 233px; |
||||
|
height: 100%; |
||||
|
border: none !important; |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
|
||||
|
.post-content { |
||||
|
// margin-left: 30px; |
||||
|
overflow: hidden; |
||||
|
height: 180px; |
||||
|
text-indent: left; |
||||
|
} |
||||
|
|
||||
|
.con-con { |
||||
|
max-height: 130px; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 4; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.look-down { |
||||
|
position: absolute; |
||||
|
right: 25px; |
||||
|
bottom: 10px; |
||||
|
cursor: pointer; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 48px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.comment { |
||||
|
min-height: 107px; |
||||
|
max-height: 207px; |
||||
|
overflow: auto; |
||||
|
width: 1210px; |
||||
|
opacity: 1; |
||||
|
background: #FAFAFA; |
||||
|
margin-top: 60px; |
||||
|
padding: 16px 0; |
||||
|
} |
||||
|
|
||||
|
.txtara { |
||||
|
margin-top: 20px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.txt-btn { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.coms-con { |
||||
|
background: rgba(19, 172, 196, 0.1); |
||||
|
line-height: 24px; |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue