index.vue
3.21 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
<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>
</template>
<script setup>
import icon_cert from '@images/zhengshu@2x.png'
import icon_stamp01 from '@images/stamp01.png'
import icon_stamp02 from '@images/stamp02.png'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
onMounted(() => {
})
</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('@images/zhengshu-banner@2x.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;
}
}
</style>