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

@@ -2,28 +2,54 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 13:51:47
  * @Date: 2022-05-30 13:51:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /tswj/src/views/client/donateList.vue
  * @Description: 幼儿园捐赠人捐赠金额排行榜
  * @Description: 幼儿园捐赠人捐赠金额排行榜
 -->
 -->
 <template>
 <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">
   <div class="van-hairline--bottom">
     <van-row style="padding: 0.5rem 1rem;">
     <van-row style="padding: 0.5rem 1rem;">
       <van-col span="4">
       <van-col span="4">
         <van-image v-if="info.avatar" round width="3rem" height="3rem" :src="info.avatar ? info.avatar : icon_avatar" />
         <van-image v-if="info.avatar" round width="3rem" height="3rem" :src="info.avatar ? info.avatar : icon_avatar" />
       </van-col>
       </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>
-      <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>
           <span>&nbsp;x2</span>
-        </p>
+        </div>
       </van-col>
       </van-col>
     </van-row>
     </van-row>
   </div>
   </div>
@@ -32,6 +58,7 @@
 <script setup>
 <script setup>
 import { ref } from 'vue'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 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 { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateModules.js'
@@ -45,8 +72,62 @@ const info = ref({
   avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
   avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
   name: '杨妮妮'
   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>
 </script>
 
 
 <style lang="less" scoped>
 <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>
 </style>