样式调整，结构测试

hookehuyr
Commit fbe2fada9bcf32971775fe639cbdec22c1618d96 fbe2fada 1 parent c07af0c6
Showing 5 changed files with 79 additions and 19 deletions
src/App.vue
src/components/RankingItem/index.vue
src/composables/useBookList.js
src/views/client/chooseBook.vue
src/views/client/donateList.vue
--- a/src/App.vue
View file @fbe2fad
+++ b/src/App.vue
View file @fbe2fad
@@ -65,4 +65,10 @@ body {
 .@{prefix} {
   color: red;
 }
+
+.glob-center {
+  position: relative; 
+  top: 50%; 
+  transform: translateY(-50%);
+}
 </style>
--- a/src/components/RankingItem/index.vue
View file @fbe2fad
+++ b/src/components/RankingItem/index.vue
View file @fbe2fad
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 10:20:34
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 17:19:07
+ * @LastEditTime: 2022-05-31 17:38:37
  * @FilePath: /tswj/src/components/RankingList/index.vue
 -->
 <template>
@@ -44,11 +44,7 @@
 </template>
 <script setup>
-import icon_avatar from '@images/que-logo@2x.png'
+import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
-import icon_ranking1 from '@images/1@2x.png'
-import icon_ranking2 from '@images/2@2x.png'
-import icon_ranking3 from '@images/3@2x.png'
-import icon_flower from '@images/xiaohua@2x.png'
 import { ref } from 'vue'
 import _ from 'lodash'
--- a/src/composables/useBookList.js
View file @fbe2fad
+++ b/src/composables/useBookList.js
View file @fbe2fad
+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-07 17:46:54
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-05-31 15:10:44
+ * @FilePath: /tswj/src/composables/useBookList.js
+ * @Description: 
+ */
 import { ref } from 'vue'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
@@ -12,6 +20,7 @@ export const useBookList = () => {
     id: '',
     logo: '',
     name: '',
+    multi_name: '',
     book_list: []
   });
   if (kg_id) { // 从学校列表进入
@@ -23,6 +32,12 @@ export const useBookList = () => {
       .then(res => {
         if (res.data.code === 1) {
           kgInfo.value = res.data.data;
+          // 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(' ');
+          }
           if (!kgInfo.value.book_list.length) {
             emptyStatus.value = true;
           }
--- a/src/views/client/chooseBook.vue
View file @fbe2fad
+++ b/src/views/client/chooseBook.vue
View file @fbe2fad
 <template>
   <div class="choose-book-page content-bg">
     <div class="modify-top" />
-    <div v-if="kg_id" class="belong-school">
+    <div v-if="kg_id" :class="[kgInfo.multi_name ? 'height6rem' : 'height3rem', 'belong-school']">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%)">
         <van-col span="2">
           <van-image
@@ -24,9 +24,14 @@
           </van-image>
         </van-col>
         <van-col span="22">
-          <p class="title">
+          <div v-if="kgInfo.multi_name" class="title">
-            {{ kgInfo.name }}
+            <!-- 名字中间带空格，需要分割成两个名字 -->
-          </p>
+            <p>{{ kgInfo.multi_name[0] }}</p>
+            <p>{{ kgInfo.multi_name[1] }}</p>
+          </div>
+          <div v-else class="title">
+            <p>{{ kgInfo.name }}</p>
+          </div>
         </van-col>
       </van-row>
     </div>
@@ -52,7 +57,11 @@
       </template>
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
     </div>
-    <div style="height: 1rem" />
+    <div style="height: 5rem" />
+    <!-- TODO: 新需求：爱心助力捐钱弹框 -->
+    <div class="fix-btn">
+      <div class="text">爱心助力</div>
+    </div>
     <shortcut-fixed type="C" :item="shortcutItem" />
   </div>
 </template>
@@ -88,8 +97,6 @@ const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
 .choose-book-page {
   .belong-school {
     padding: 1.5rem;
-    height: 3rem;
-
     .title {
       color: #222222;
       display: inline-block;
@@ -97,6 +104,12 @@ const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
       margin-left: 2rem;
     }
   }
+  .height3rem {
+    height: 3rem;
+  }
+  .height6rem {
+    height: 6rem;
+  }
   .book-list {
     margin: 1rem;
@@ -125,5 +138,25 @@ const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
       right: 8rem;
     }
   }
+  .fix-btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+
+    .text {
+      text-align: center;
+      padding: 0.7rem;
+      margin: 0.8rem;
+      font-size: 1rem;
+      font-weight: bold;
+      border-radius: 24px;
+      // border: 1px solid F7F7F7;
+      color: #713610;
+      background-color: @base-color;
+      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
+    }
+  }
 }
 </style>
--- a/src/views/client/donateList.vue
View file @fbe2fad
+++ b/src/views/client/donateList.vue
View file @fbe2fad
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-30 13:51:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 17:06:26
+ * @LastEditTime: 2022-05-31 17:45:22
  * @FilePath: /tswj/src/views/client/donateList.vue
  * @Description: 幼儿园捐赠人捐赠金额排行榜
 -->
@@ -47,8 +47,8 @@
       </van-col>
       <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" />
+          <van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
-          <span>&nbsp;x2</span>
+          <span>&nbsp;2</span>
         </div>
       </van-col>
     </van-row>
@@ -58,11 +58,9 @@
 <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'
-import { icon_avatar } from '@/utils/generateIcons.js'
+import { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 const $route = useRoute();
 const $router = useRouter();
@@ -71,6 +69,18 @@ useTitle($route.meta.title);
 const info = ref({
   avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
   name: '杨妮妮'
+}, {
+  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
+  name: '杨妮妮'
+}, {
+  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
+  name: '杨妮妮'
+}, {
+  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
+  name: '杨妮妮'
+}, {
+  avatar: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76a8e87552945e0800cea4e5eb14ff2175cc7816e6acb5c79d714793c82d37f5',
+  name: '杨妮妮'
 })
 const kgInfo = ref({