Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fbe2fada 1 parent c07af0c6

样式调整，结构测试

Inline Side-by-side
Showing 5 changed files with 79 additions and 19 deletions
......@@ -65,4 +65,10 @@ body {
.@{prefix} {
color: red;
}
.glob-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
......
......@@ -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_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 { icon_avatar, icon_ranking1, icon_ranking2, icon_ranking3, icon_flower } from '@/utils/generateIcons.js'
import { ref } from 'vue'
import _ from 'lodash'
......
/*
* @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;
}
......
<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">
{{ kgInfo.name }}
</p>
<div v-if="kgInfo.multi_name" class="title">
<!-- 名字中间带空格，需要分割成两个名字 -->
<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>
......
......@@ -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" />
<span>&nbsp;x2</span>
<van-icon style="vertical-align: top;" size="1.25rem" :name="icon_flower" />
<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({
......