Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f1c11464 1 parent b4764354

✨ feat(选择幼儿园): 新需求样式调整，列表变成排行榜形式

Inline Side-by-side
Showing 2 changed files with 75 additions and 28 deletions
......@@ -2,35 +2,41 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-30 10:20:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:56:24
* @LastEditTime: 2022-05-31 16:30:54
* @FilePath: /tswj/src/components/RankingList/index.vue
-->
<template>
<!-- TODO: 捐赠排行榜item组件完善 -->
<div style="margin: 1rem 0; background-color: #FFF; position: relative;">
<div class="wrapper">
<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" />
<van-col span="2" class="rank">
<div v-if="indexKey < 3" class="avatar">
<van-icon v-if="indexKey === 0" :name="icon_ranking1" size="1.75rem" />
<van-icon v-if="indexKey === 1" :name="icon_ranking2" size="1.75rem" />
<van-icon v-if="indexKey === 2" :name="icon_ranking3" size="1.75rem" />
</div>
<div style="position: absolute; top: 0; left: 40%;">1</div>
<div v-else class="text">{{ indexKey + 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-col span="18" style="padding: 1rem 0.5rem 1rem 0;">
<div :class="[rankInfo.multi_name ? 'height6rem' : 'height3rem', 'kg-name']" @click="go('/client/chooseBook', { kg_id: rankInfo.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-image round width="3rem" height="3rem" :src="rankInfo.avatar ? rankInfo.avatar : icon_avatar" style="vertical-align: text-bottom;" />
</van-col>
<van-col span="20">
<p class="title">{{ item.name }}</p>
<div v-if="rankInfo.multi_name" style="margin-left: 0.5rem;">
<p>{{ rankInfo.multi_name[0] }}</p>
<p>{{ rankInfo.multi_name[1] }}</p>
</div>
<p v-else style="margin-left: 0.5rem;">
{{ rankInfo.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 class="flower" @click="go('/client/donateList', { kg_id: rankInfo.id })">
<van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="vertical-align: bottom;" />&nbsp;3000
</div>
</van-col>
</van-row>
......@@ -39,7 +45,13 @@
<script setup>
import icon_avatar from '@images/que-logo@2x.png'
import icon_ranking from '@images/icon-shoucang02@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 { ref } from 'vue'
import _ from 'lodash'
import { useGo } from '@/hooks/useGo'
const go = useGo()
......@@ -51,30 +63,65 @@ const props = defineProps({
default(rawProps) {
return rawProps
}
},
indexKey: {
type: Number,
default(rawProps) {
return rawProps
}
}
})
const emit = defineEmits(['on-icon-click']);
const handle = () => {
emit('on-icon-click', '')
}
const rankInfo = ref('');
rankInfo.value = _.cloneDeep(props.item);
// TEMP: 测试数据
// rankInfo.value.name = rankInfo.value.name + ' ' + rankInfo.value.name;
// 有空格分割name
if (rankInfo.value.name.indexOf(' ') > -1) {
rankInfo.value.multi_name = rankInfo.value.name.split(' ');
}
</script>
<style lang="less" scoped>
.wrapper {
background-color: #fff;
margin: 2rem 0;
height: 3rem;
// overflow: auto;
margin: 1rem 0;
background-color: #FFF;
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;
}
.kg-name {
position: relative;
height: 3rem;
}
.avatar {
vertical-align: middle;
.height3rem {
height: 3rem;
}
.title {
color: #222222;
display: inline-block;
vertical-align: super;
margin-left: 2rem;
.height6rem {
height: 6rem;
}
}
</style>
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-04-21 11:21:39
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 11:30:12
* @LastEditTime: 2022-05-31 15:52:12
* @FilePath: /tswj/src/views/client/chooseSchool.vue
* @Description: 选择学校列表
-->
......@@ -11,7 +11,7 @@
<div class="modify-top" />
<div class="wrapper-content">
<template v-for="(item, key) in schoolList" :key="key">
<ranking-item :item="item" />
<ranking-item :item="item" :index-key="key" />
</template>
</div>
</div>
......