|
|
@@ -1,17 +1,10 @@
|
|
|
<template>
|
|
|
- <div class="otherAppeal" >
|
|
|
- <div class="title">
|
|
|
+ <div class="otherAppeal">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title" v-if="isOther">
|
|
|
{{ otherAppeal.title }}
|
|
|
</div>
|
|
|
- <div v-if="!isOther">
|
|
|
- <img
|
|
|
- src="/static/appeal/waited.svg"
|
|
|
- class="state"
|
|
|
- v-if="otherAppeal.process === 2"
|
|
|
- />
|
|
|
- <img src="/static/appeal/waiting.svg" class="state" v-else />
|
|
|
- </div>
|
|
|
- <div class="details" v-if="otherAppeal.process === '2'">
|
|
|
+ <div class="details" v-if="isOther && otherAppeal.process === '2'">
|
|
|
<img src="/static/appeal/avator.png" class="icon" />
|
|
|
<p class="msg">
|
|
|
<span class="name">{{ otherAppeal.department_name }}</span
|
|
|
@@ -19,11 +12,22 @@
|
|
|
<span class="msg_body">{{ otherAppeal.reply }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class="details" v-else>
|
|
|
+ <div class="details" v-if="!isOther">
|
|
|
+ <p class="content">
|
|
|
+ <img
|
|
|
+ src="/static/appeal/waited.svg"
|
|
|
+ class="state"
|
|
|
+ v-if="otherAppeal.process === 2"
|
|
|
+ />
|
|
|
+ <img src="/static/appeal/waiting.svg" class="state" v-else />
|
|
|
+ <span class="content_body">{{ otherAppeal.content }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="details" v-else>
|
|
|
<p class="msg">
|
|
|
<span class="msg_body_waiting">正在处理中……</span>
|
|
|
</p>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- <div class="details" v-else>
|
|
|
<img src="/static/appeal/avator.png" class="icon" />
|
|
|
<p class="msg">
|
|
|
@@ -43,22 +47,16 @@ export default {
|
|
|
.otherAppeal {
|
|
|
margin: 5% 8%;
|
|
|
position: relative;
|
|
|
- height: 200rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: center;
|
|
|
.title {
|
|
|
margin-bottom: 5%;
|
|
|
font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .state {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- transform: translateY(-30%);
|
|
|
- width: 94rpx;
|
|
|
- height: 74rpx;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
.details {
|
|
|
- position: relative;
|
|
|
.name {
|
|
|
font-size: 26rpx;
|
|
|
color: red;
|
|
|
@@ -78,6 +76,30 @@ export default {
|
|
|
color: #aaa;
|
|
|
}
|
|
|
}
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .state {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 94rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ }
|
|
|
+ .content_body {
|
|
|
+ width: 80%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.icon {
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|