Browse Source

事件管理样式

feature
mk 2 years ago
parent
commit
35bb015230
  1. BIN
      src/assets/images/index/bubble.png
  2. BIN
      src/assets/images/index/title-icon-cljz.png
  3. 38
      src/assets/scss/modules/shequzhili/event-info.scss
  4. 25
      src/views/modules/shequzhili/event/cpts/event-detail.vue
  5. 48
      src/views/modules/shequzhili/event/cpts/event-info.vue

BIN
src/assets/images/index/bubble.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/index/title-icon-cljz.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

38
src/assets/scss/modules/shequzhili/event-info.scss

@ -119,8 +119,10 @@
.div-btn{
margin-top:50px;
display: flex;
justify-content: center;
justify-content: right;
position: absolute;
bottom: 20px;
width: calc(100% - 40px);
.item_btn {
font-size: 14px;
padding: 8px 16px;
@ -222,7 +224,6 @@
padding-left: 15px;
.line{
text-decoration:underline;
color: #3e8ef7;
}
.line:hover{
@ -339,9 +340,8 @@
margin-left: 50px/2;
padding: 0 0 0 30px/2;
width: 680px/2;
border-left: 3px solid #0c81fe;
padding-right: 10px;
margin-left: 10px;
&::before {
content: "";
position: absolute;
@ -361,6 +361,7 @@
padding-bottom: 8px;
font-size: 16px;
font-family: PingFang SC;
border-left: 1px solid #E6F0FF;;
font-weight: 400;
color: #333;
line-height: 24px;
@ -375,15 +376,23 @@
left: -11px;
width: 18px;
height: 18px;
background: #0c81fe;
border: 4px solid lighten(#0c81fe, 15);
background: #ffffff;
padding: 5px;
border: 1px solid #0056d6;
border-radius: 100%;
}
&.z-on {
&::before {
background: #e08400;
border-color: lighten(#e08400, 15);
&::after {
content: "";
display: block;
position: absolute;
top: -1px;
left: -7px;
width: 10px;
height: 10px;
background: #0056d6;
border-radius: 100%;
}
}
@ -401,15 +410,14 @@
.name {
position: relative;
padding: 0 10px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #fff;
line-height: 22px;
height: 22px;
border-radius: 10px 0 10px 0;
background-color: #0c81fe;
color: #0056d6;
// border-radius: 10px 0 10px 0;
// background-color: #0c81fe;
// background-color: #e08400;
}
@ -418,7 +426,7 @@
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #7ca1d2;
color: rgba(0,0,0,0.45);
line-height: 25px;
}

25
src/views/modules/shequzhili/event/cpts/event-detail.vue

@ -1,8 +1,8 @@
<template>
<div class="">
<el-card :class="{'box-card':source==='visiual'}"
<el-card style="min-height: calc(88vh - 50px); overflow: auto;position: relative;" :class="{'box-card':source==='visiual'}"
v-if="showType==''">
<h3 v-if="source==='manage'">事件详情</h3>
<h3 v-if="source==='manage'"> <img src="../../../../../assets/images/index/title-icon-sqzl.png" width="30px" height="30px" alt=""> 事件详情</h3>
<div class="m-detail-main">
<div class="m-info">
<div :class="['m-info-prop',{'m-info-prop-vis':source==='visiual'}]">
@ -79,7 +79,7 @@
:class="['m-info-prop',{'m-info-prop-vis':source==='visiual'}]">
<span class="u-info-title-2">已转议题</span>
<div class="line"
@click="handleToIssue">查看议题</div>
@click="handleToIssue"><i class="el-icon-view"></i> 查看议题</div>
</div>
<div v-if="info.satisfactionName"
:class="['m-info-prop',{'m-info-prop-vis':source==='visiual'}]">
@ -365,5 +365,24 @@ export default {
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.m-info{
padding-left: 0px !important;
}
.m-info-prop{
margin: 25px 0 !important;
padding-left: 0px !important;
&::before {
content: "";
display: block;
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background: none !important;
border-radius: 3px;
margin-right: 10px;
}
}
</style>

48
src/views/modules/shequzhili/event/cpts/event-info.vue

@ -41,6 +41,13 @@
v-if="pageTypeCopy == 'dispose' || pageTypeCopy == 'info'"
class="g-page"
>
<!-- 面包屑放到这里-->
<div class="tabs" v-if="pageTypeCopy == 'info'">
<i class="el-icon-arrow-left"></i>
<el-button class="diy-button--white" style="height: 20px" @click="handleClose">
查看详情</el-button
>
</div>
<div :class="['g-total', { 'g-left': projectProcess.length > 0 }]">
<event-detail
ref="ref_detail"
@ -58,7 +65,7 @@
v-if="!eventDetailData.operationId && pageTypeCopy == 'dispose'"
class="process-form"
>
<el-card :class="{ 'box-card': source === 'visiual' }">
<el-card :class="{ 'box-card': source === 'visiual' }">
<div
:class="[
'process-title',
@ -91,7 +98,7 @@
<div v-if="projectProcess.length > 0" class="g-right">
<el-card
:class="{ 'box-card': source === 'visiual' }"
style="max-height: 90vh; overflow: auto"
style="min-height: calc(88vh - 50px); overflow: auto"
>
<div class="m-process">
<div
@ -100,7 +107,7 @@
{ 'process-title-vis': source === 'visiual' },
]"
>
处理进展
<img src="../../../../../assets/images/index/title-icon-cljz.png" width="30px" height="30px" alt=""> 处理进展
</div>
<div class="list">
<div
@ -544,8 +551,8 @@ export default {
} else {
this.$message.error(msg);
}
}else if(this.formData.operationType == ''){
this.$message.error('请选择处理方式!')
} else if (this.formData.operationType == "") {
this.$message.error("请选择处理方式!");
}
},
@ -683,4 +690,35 @@ export default {
<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.tabs {
position: absolute;
margin-left: 30px;
height: 50px;
line-height: 50px;
.diy-button--white {
border: none !important;
color: rgba(0,0,0,0.65) !important;
height: 30px !important;
padding: 0 12px!important;
margin-left: 10px;
}
}
.list{
&>:first-child{//
border: none !important;
.name{
background: url('../../../../../assets/images/index/bubble.png') no-repeat;
color: #fff !important;
padding: 0px 10px 3px 13px!important;
background-size: 100% 100%;
border: none !important;
}
}
}
.g-left {
margin-top: 40px;
}
.g-right {
margin-top: 40px;
}
</style>

Loading…
Cancel
Save