chore: 我的待办 样式

This commit is contained in:
dap 2024-11-21 19:53:16 +08:00
parent 53e1a6fdf7
commit 28f8ee440d
2 changed files with 35 additions and 10 deletions

View File

@ -22,8 +22,11 @@ function handleClick() {
<template> <template>
<div <div
:class="{ '!border-primary': info.active, '!border-[2px]': info.active }" :class="{
class="cursor-pointer rounded-lg border-[1px] border-solid border-gray-200 p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg dark:border-gray-600" 'border-primary': info.active,
'border-[2px]': info.active,
}"
class="cursor-pointer rounded-lg border-[1px] border-solid p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
@click.stop="handleClick" @click.stop="handleClick"
> >
<Descriptions :column="1" :title="info.title" size="middle"> <Descriptions :column="1" :title="info.title" size="middle">

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue'; import { reactive, ref } from 'vue';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
@ -8,6 +8,7 @@ import {
Avatar, Avatar,
Card, Card,
Divider, Divider,
InputSearch,
Space, Space,
TabPane, TabPane,
Tabs, Tabs,
@ -44,21 +45,34 @@ const data = reactive(
})), })),
); );
const lastSelectId = ref('');
function handleCardClick(id: string) { function handleCardClick(id: string) {
//
if (lastSelectId.value === id) {
return;
}
// & &
data.forEach((item) => { data.forEach((item) => {
item.active = item.id === id ? !item.active : false; item.active = item.id === id;
}); });
lastSelectId.value = id;
} }
</script> </script>
<template> <template>
<Page :auto-content-height="true"> <Page :auto-content-height="true">
<div class="flex h-full gap-2"> <div class="flex h-full gap-2">
<div class="bg-background flex h-full w-[320px] flex-col rounded-lg">
<!-- 搜索条件 -->
<div <div
class="bg-background h-full w-[320px] overflow-y-auto rounded-lg py-3" class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
>
<InputSearch placeholder="搜索" />
</div>
<div
class="flex flex-1 flex-col gap-2 overflow-y-auto py-3"
@scroll="handleScroll" @scroll="handleScroll"
> >
<div class="flex flex-col gap-2">
<ApprovalCard <ApprovalCard
v-for="item in data" v-for="item in data"
:key="item.id" :key="item.id"
@ -67,6 +81,14 @@ function handleCardClick(id: string) {
@click="handleCardClick" @click="handleCardClick"
/> />
</div> </div>
<!-- total显示 -->
<div
class="bg-background sticky bottom-0 w-full rounded-b-lg border-t-[1px] py-2"
>
<div class="flex items-center justify-center">
{{ data.length }} 条记录
</div>
</div>
</div> </div>
<Card class="flex-1" size="small" title="编号: 1234567890123456789012"> <Card class="flex-1" size="small" title="编号: 1234567890123456789012">
<div class="flex flex-col gap-5 p-4"> <div class="flex flex-col gap-5 p-4">
@ -100,7 +122,7 @@ function handleCardClick(id: string) {
</div> </div>
<!-- 固定底部 --> <!-- 固定底部 -->
<div <div
class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] border-t-slate-300 p-3 dark:border-t-slate-600" class="border-t-solid absolute bottom-0 left-0 w-full border-t-[1px] p-3"
> >
<div class="flex justify-end"> <div class="flex justify-end">
<Space> <Space>