index.vue
2.31 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
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 10:20:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:56:24
* @FilePath: /tswj/src/components/RankingList/index.vue
-->
<template>
<!-- TODO: 捐赠排行榜item组件完善 -->
<div style="margin: 1rem 0; background-color: #FFF; position: relative;">
<van-row>
<van-col span="2" style="position: relative;">
<div style="position: absolute; top: 0; left: 20%;">
<van-icon :name="icon_ranking" size="1.25rem" />
</div>
<div style="position: absolute; top: 0; left: 40%;">1</div>
</van-col>
<van-col span="18" style="padding: 1rem 0;">
<!-- 如果多个学校遍历包裹结构 -->
<div style="position: relative; height: 3rem;" @click="go('/client/chooseBook', { kg_id: item.id })">
<van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
<van-col span="4">
<van-image round width="3rem" height="3rem" :src="item.avatar ? item.avatar : icon_avatar" style="vertical-align: text-bottom;" />
</van-col>
<van-col span="20">
<p class="title">{{ item.name }}</p>
</van-col>
</van-row>
</div>
</van-col>
<van-col span="2">
<div style="text-align: center; position: absolute; top: 40%;" @click="go('/client/donateList', { kg_id: item.id })">
<van-icon name="arrow" color="#c5c5c5" size="1.25rem" />3000
</div>
</van-col>
</van-row>
</div>
</template>
<script setup>
import icon_avatar from '@images/que-logo@2x.png'
import icon_ranking from '@images/icon-shoucang02@2x.png'
import { useGo } from '@/hooks/useGo'
const go = useGo()
// eslint-disable-next-line no-unused-vars
const props = defineProps({
item: {
type: Object,
default(rawProps) {
return rawProps
}
}
})
const emit = defineEmits(['on-icon-click']);
const handle = () => {
emit('on-icon-click', '')
}
</script>
<style lang="less" scoped>
.wrapper {
background-color: #fff;
margin: 2rem 0;
height: 3rem;
// overflow: auto;
.avatar {
vertical-align: middle;
}
.title {
color: #222222;
display: inline-block;
vertical-align: super;
margin-left: 2rem;
}
}
</style>