detail
This commit is contained in:
花有清香月有阴
@@ -1,41 +1,111 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="header-content">
|
||||
<div class="header-middle">
|
||||
<div class="img-title">{{ detail.title }}</div>
|
||||
<div class="top">
|
||||
<div class="img-title">填报信息</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动时间</div>
|
||||
<div class="cards-right">{{ detail.beginTime }}</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">申请人</div>
|
||||
<div class="cards-right">{{ detail.beginTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动人数</div>
|
||||
<div class="cards-right">
|
||||
<span style="color: #1c6bdf">{{ detail.realNum }}</span>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">申请时间</div>
|
||||
<div class="cards-right">
|
||||
<span style="color: #1c6bdf">{{ detail.realNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">位置</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">积分类型</div>
|
||||
<div class="cards-right">{{ $dict.getLabel('marriageType', detail.status) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="cards-left">申请描述</div>
|
||||
<div class="cards-right">{{ detail.areaName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
<div class="cardes">
|
||||
<div class="img-top">图片资料</div>
|
||||
<img src="../../static/img/jfph.png" alt="" v-for="(item, index) in 7" :key="index" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="img-title">填报信息</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动时间</div>
|
||||
<div class="cards-right">{{ detail.beginTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动人数</div>
|
||||
<div class="cards-right">
|
||||
<span style="color: #1c6bdf">{{ detail.realNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="img-title">填报信息</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动时间</div>
|
||||
<div class="cards-right">{{ detail.beginTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动人数</div>
|
||||
<div class="cards-right">
|
||||
<span style="color: #1c6bdf">{{ detail.realNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards-left">活动地点</div>
|
||||
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.areaName }}{{ detail.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,7 +123,7 @@ export default {
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
|
||||
this.$dict.load('').then(() => {
|
||||
this.$dict.load('marriageType').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
@@ -76,79 +146,46 @@ export default {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.info-title {
|
||||
padding-left: 32px;
|
||||
line-height: 108px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.tab-title {
|
||||
line-height: 108px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 192px;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
color: #3671ee;
|
||||
border-bottom: 4px solid #3671ee;
|
||||
}
|
||||
}
|
||||
.status0 {
|
||||
background: #000;
|
||||
}
|
||||
.status1 {
|
||||
background: #ff883c;
|
||||
}
|
||||
.status3 {
|
||||
background: #1aaaff;
|
||||
}
|
||||
.status2 {
|
||||
background: #42d784;
|
||||
}
|
||||
.status4,
|
||||
.status5 {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
.header-content {
|
||||
// padding-bottom: 80px;
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.top,
|
||||
.middle,
|
||||
.bottom {
|
||||
padding: 32px 32px 0 32px;
|
||||
|
||||
.img-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-middle {
|
||||
padding: 32px 32px 0 32px;
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #eee;
|
||||
padding: 36px 0;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
.img-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
.cards-left {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #eee;
|
||||
padding: 36px 0;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
|
||||
.cards-left {
|
||||
color: #999;
|
||||
.cards-right {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.cardes {
|
||||
border-bottom: 2px solid #eee;
|
||||
padding: 36px 0;
|
||||
font-size: 28px;
|
||||
.img-top {
|
||||
color: #999;
|
||||
padding-bottom: 16px;
|
||||
._img {
|
||||
width: 225px;
|
||||
height: 226px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.cards-right {
|
||||
color: #333;
|
||||
._img:nth-child(3n + 0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user