Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3f7165a3 1 parent f1c11464

✨ feat(捐赠明细): 新增捐赠明细页面明细

Inline Side-by-side
Showing 1 changed file with 92 additions and 11 deletions
......@@ -2,28 +2,54 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 13:51:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:28:54
* @LastEditTime: 2022-05-31 17:06:26
* @FilePath: /tswj/src/views/client/donateList.vue
* @Description: 幼儿园捐赠人捐赠金额排行榜
-->
<template>
<!-- TODO: 排行榜详情列表 -->
<!-- src/components/RankingItem/index.vue 到时候使用这一部分，可能有几个学校 -->
<div class="wrapper">
<van-row>
<van-col span="20" style="padding: 1rem 0.5rem 1rem 0;">
<div :class="[kgInfo.multi_name ? 'heightHigh' : 'heightLow', 'kg-name']">
<van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
<van-col span="4">
<van-image round width="4rem" height="4rem" :src="kgInfo.avatar ? kgInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" />
</van-col>
<van-col span="20">
<div v-if="kgInfo.multi_name" style="margin-left: 1.5rem;">
<p>{{ kgInfo.multi_name[0] }}</p>
<p>{{ kgInfo.multi_name[1] }}</p>
</div>
<p v-else style="margin-left: 1.5rem;">
{{ kgInfo.name }}
</p>
</van-col>
</van-row>
</div>
</van-col>
<van-col span="4">
<div class="flower">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.5rem" style="vertical-align: bottom;" />&nbsp;3000
</div>
</van-col>
</van-row>
</div>
<div class="van-hairline--bottom">
<van-row style="padding: 0.5rem 1rem;">
<van-col span="4">
<van-image v-if="info.avatar" round width="3rem" height="3rem" :src="info.avatar ? info.avatar : icon_avatar" />
</van-col>
<van-col span="6" style="line-height: 3rem;">
<div class="name-info">{{ info.name }}</div>
<van-col span="16">
<div class="name-info" style="position: relative; top: 50%; transform: translateY(-50%);">
<p>{{ info.name }}</p>
<p style="color: #C5C5C5;">2022-05-27</p>
</div>
</van-col>
<van-col span="14" style="text-align: right; font-size: 0.9rem;">
<p style="color: #C5C5C5; line-height: 1.5;">2022-05-27</p>
<p style="color: #222222;">
<span>《逃家小兔绘本》</span>
<van-icon style="vertical-align: middle;" size="1rem" name="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng73a86b62d29d42c2544d9bbb316217575224457db387ef42182b087764cb1fbd" />
<van-col span="4" style="text-align: right; font-size: 1rem;">
<div style="color: #222222;position: relative; top: 50%; transform: translateY(-50%);">
<van-icon style="vertical-align: middle;" size="1.25rem" :name="icon_flower" />
<span>&nbsp;x2</span>
</p>
</div>
</van-col>
</van-row>
</div>
......@@ -32,6 +58,7 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import icon_flower from '@images/xiaohua@2x.png'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
......@@ -45,8 +72,62 @@ const info = ref({
avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
name: '杨妮妮'
})
const kgInfo = ref({
name: '杨浦民办科技幼稚园',
multi_name: '',
avatar: '',
})
// TEMP: 测试数据
// kgInfo.value.name = kgInfo.value.name + ' ' + kgInfo.value.name;
// 有空格分割name
if (kgInfo.value.name.indexOf(' ') > -1) {
kgInfo.value.multi_name = kgInfo.value.name.split(' ');
}
</script>
<style lang="less" scoped>
.wrapper {
padding: 0 2rem 0 0.5rem;
background-color: #F7F7F7;
position: relative;
.rank {
position: relative;
.avatar {
position: absolute;
top: 0;
left: 20%;
}
.text {
position: absolute;
top: 0.5rem;
left: 40%;
color: #84909F;
}
}
.flower {
text-align: center;
position: absolute;
top: 40%;
color: #713610;
font-size: 1.25rem;
}
.kg-name {
position: relative;
height: 3rem;
}
.heightLow {
height: 3rem;
}
.heightHigh {
height: 6rem;
}
}
</style>
......