<template>
|
<div v-show="dialogVisible" class="activity-details-box">
|
<div class="title">
|
详情
|
<div class="close" @click="closeActivityDetails"></div>
|
</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>
|
</template>
|
|
<script>
|
export default {
|
props: [
|
'dialogVisible',
|
'activityDetails'
|
],
|
methods: {
|
closeActivityDetails () {
|
this.$emit('closeActivityDetails')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-details-box {
|
position: fixed;
|
top: 90px;
|
// right: 10px;
|
right: 20px;
|
width: 400px;
|
padding: 10px;
|
border-radius: 10px;
|
color: #fff;
|
background: $bg-color;
|
overflow-x: hidden;
|
overflow-y: auto;
|
z-index: 11;
|
|
.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>
|
