index.vue
3.43 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<template>
<div class="donate-certificate">
<div class="header-bg">
<van-image width="100" height="100" fit="contain" :src="icon_cert" style="margin-top: 15vh;" />
</div>
<div class="title">
<van-row align="center">
<van-col>
<span style="font-size: 0.8rem; color: #272727;">尊敬的</span>
</van-col>
<van-col>
<div style="color: #713610; padding: 1rem;" class="van-hairline--bottom">{{ item.name }}</div>
</van-col>
<van-col>：</van-col>
</van-row>
</div>
<div class="content">
感谢您为“童声无界”活动的捐赠，让更多的孩子体验到了阅读的乐趣。您的爱心行为增加了两地儿童的牵绊，使更多的孩子交到了远方的朋友。共读一本书，传递一份爱。初心为爱，童声无界感谢您对公益事业的支持。
</div>
<div class="price">
<div>爱心捐赠</div>
<div>{{ item.amt }} 元</div>
</div>
<div class="organizer">
<div class="wrapper">
<p>上海市儿童基金会</p>
<p>上海初心为爱公益基金会</p>
<div style="position: absolute; width: 50%; height: 100%; top: 0; left: 0;">
<van-image height="100%" fit="contain" :src="icon_stamp01" />
</div>
<div style="position: absolute; width: 50%; height: 100%; top: 0; right: 0;">
<van-image height="100%" fit="contain" :src="icon_stamp02" />
</div>
</div>
</div>
<div class="date">{{ item.donate_date }}</div>
<div style="color: #713610; padding: 1rem 2rem; font-size: 0.9rem;">
证书编号：{{ item.cert_code }}
</div>
<div class="wrapper-border" />
<div style="height: 2rem;" />
</div>
</template>
<script setup>
// TODO：图片需要更换
import icon_cert from '@images/zhengshu@2x.png'
import icon_stamp01 from '@images/stamp01.png'
import icon_stamp02 from '@images/stamp02.png'
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
props: ['item'],
data() {
return {
name: '',
price: '',
datetime: ''
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.donate-certificate {
background-image: url('http://gyzs.onwall.cn/zhengshu-banner.png');
background-color: white;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
position: relative;
border-radius: 10px;
// height: 85vh;
.header-bg {
text-align: center;
}
.title {
padding: 0 2rem;
}
.content {
font-size: 0.85rem;
padding: 2rem;
line-height: 1.75;
}
.price {
margin-left: 5rem;
div:first-child {
display: inline-block;
font-size: 0.5rem;
vertical-align: middle;
margin-right: 0.5rem;
}
div:last-child {
display: inline-block;
font-size: 1.25rem;
color: red;
vertical-align: middle;
}
}
.organizer {
margin: 1rem;
overflow: hidden;
.wrapper {
float: right;
font-size: 0.8rem;
text-align: center;
line-height: 2;
position: relative;
color: #0B3A72;
padding: 0.5rem 0;
}
}
.date {
color: #272727;
font-size: 0.85rem;
text-align: right;
padding-right: 2rem;
}
.wrapper-border {
position: absolute;
border: 1px dashed #000;
height: 95%;
top: 0;
width: 93%;
margin: 3%;
border-radius: 1rem;
}
}
</style>