<template>
|
<div v-show="dialogVisible">
|
<span
|
:style="{right: showDetails ? '400px' : '0'}"
|
@click="showDetails = !showDetails"
|
class="expend"
|
>{{showDetails? '收起': '展开'}}</span>
|
<div v-show="showDetails" class="activity-details-box">
|
<div class="title">详情</div>
|
<div class="row-box">
|
<div class="category">名称：</div>
|
<div class="category-value">{{ activityDetails.name }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">时间：</div>
|
<div
|
class="category-value"
|
>{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">包干民警：</div>
|
<div class="category-value">{{ activityDetails.person }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">联系方式：</div>
|
<div class="category-value">{{ activityDetails.contact }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">负责单位：</div>
|
<div class="category-value">{{ activityDetails.company }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">所属辖区：</div>
|
<div class="category-value">{{ activityDetails.deptName }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">人数：</div>
|
<div class="category-value">{{ activityDetails.number }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">地点：</div>
|
<div class="category-value">{{ activityDetails.place }}</div>
|
</div>
|
<div class="row-box">
|
<div class="category">内容：</div>
|
<div class="category-value">{{ activityDetails.content }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: [
|
'dialogVisible',
|
'activityDetails'
|
],
|
|
data () {
|
return {
|
showDetails: true
|
}
|
},
|
|
methods: {
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.expend {
|
padding: 0 10px;
|
position: fixed;
|
top: 216px;
|
right: 400px;
|
width: 36px;
|
height: 80px;
|
line-height: 40px;
|
z-index: 11;
|
color: #fff;
|
background: $bg-color;
|
border-radius: 10px 0 0 10px;
|
cursor: pointer;
|
}
|
|
.activity-details-box {
|
position: fixed;
|
top: 200px;
|
// right: 10px;
|
right: 0px;
|
width: 400px;
|
padding: 10px;
|
color: #fff;
|
background: $bg-color;
|
z-index: 11;
|
border-radius: 10px 0 0 10px;
|
|
.title {
|
position: relative;
|
height: 36px;
|
line-height: 36px;
|
|
.close {
|
position: absolute;
|
top: 50%;
|
right: 0;
|
transform: translate(0, -50%);
|
cursor: pointer;
|
}
|
|
.close::before {
|
content: '\e6db';
|
font-family: element-icons;
|
}
|
}
|
|
.row-box {
|
width: 100%;
|
line-height: 28px;
|
display: flex;
|
|
& > div {
|
text-align: left;
|
}
|
|
.category {
|
width: 96px;
|
}
|
|
.category-value {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
