questionFeedBack.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<view style="padding: 20rpx 32rpx;">
<view class="questionFeedBack">
<view class="questionNameWrap">
<text>第二季度税务报表单据</text>
<!-- 条件判断是否已办理,注意颜色切换(待办理、已办理、已解决)-->
<view
class="questionStatus"
:style="{
background:status == 1 ? ' #fffbe8' : status == 2 ? ' #f7f8fa' : '#cbe0ff',
color:status == 1 ? ' #fa700c' : status == 2 ? ' #323233' : '#2e7ff9'}"
>
{{status == 1 ? '待办理' : status == 2 ? '已办理' : '已解决'}}
</view>
</view>
<view class="roomName">
财务科
</view>
<view class="imgList">
<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
<image src="../../static/image/del/ic_90@2x.png" mode=""></image>
</view>
<view class="questionContent">
税务报表已经提交了,什么时候可以查询的到相应信息从时间上可以追溯到20世纪30年代;最为典型的是30年代英国一则判例。1935年,英国上议院议员汤姆林爵士针对“税务局长 。
</view>
<view class="questionTime">
2020/12/12
</view>
<!-- 条件判断是否已办理,已办理显示此项 -->
<view class="userInfo">
<view class="infoItem">
人员名称:张某人
</view>
<view class="infoItem">
职位:销售总经理
</view>
<view class="infoItem">
手机号:182023569652
</view>
</view>
<!-- 条件判断是否已办理,未办理显示此项 -->
<!-- 底部按钮区域 -->
<view class="loginBtnWrap">
<view class="loginBtn">
{{status == 3 ? '已解决' : '解决'}}
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
status:3
}
}
}
</script>
<style lang="scss">
page{
background-color: $uni-bg-color-hui;
}
.questionFeedBack{
background: $uni-bg-bai-color;
border-radius: 20rpx;
padding: 32rpx;
.questionNameWrap{
display: flex;
justify-content: space-between;
align-items: center;
text{font-size: 34rpx;}
.questionStatus{
width: 100rpx;
height: 40rpx;
border-radius: 20rpx;
text-align: center;
line-height: 40rpx;
font-size: $uni-font-size-24;
}
}
.roomName{
font-size: $uni-font-size-26;
color: $uni-text-color-hui;
}
.imgList{
display: flex;
flex-wrap: wrap;
image{width: 198rpx;height: 194rpx;margin-right: 14rpx;margin-top: 20rpx;}
image:nth-of-type(3n){margin-right:0;}
}
.questionContent{
padding-top: 32rpx;
font-size: $uni-font-size-28;
color: $uni-text-color-hui;
line-height: 48rpx;
}
.questionTime{
padding-top: 32rpx;
text-align: right;
font-size: $uni-font-size-26;
color: $uni-text-color-hui;
}
.userInfo{
padding: 0 32rpx 32rpx 32rpx;
margin-top: 32rpx;
background: #f7f8fa;
border-radius: 20rpx;
.infoItem{
padding-top: 32rpx;
}
}
/* 底部按钮区域 */
.loginBtnWrap{
padding-top: 32rpx;
display: flex;
justify-content: center;
align-items: center;
.loginBtn{
width: 686rpx;
height: 88rpx;
background: $uni-bg-main-color;
border-radius: 96rpx;
text-align: center;
color: $uni-bg-bai-color;
line-height: 88rpx;
font-size: $uni-font-size-32;
}
}
}
</style>