achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式

Browse Source
This commit is contained in:
宇阳
2024-08-22 14:56:09 +08:00
parent 2a4fea7775
commit 1a5edb41ca
3 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/File/index.scss
View File

@@ -10,24 +10,18 @@
} }
// 自定义图片预览样式 // 自定义图片预览样式
.ant-image-preview-footer { .customAntdPreviewsItem {
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
.ant-space-gap-col-small { .anticon {
column-gap: 0 font-size: 20px;
} color: #5d5d5d;
padding: 10px;
.ant-space-item {
.anticon {
font-size: 20px;
color: #5d5d5d;
padding: 10px;
}
&:hover { &:hover {
background-color: #f7f7ff; color: #727cf5;
} }
} }
} }

36
src/pages/File/index.tsx
View File

@@ -109,24 +109,26 @@ export default () => {
}, },
) => ( ) => (
<Space className="toolbar-wrapper"> <Space className="toolbar-wrapper">
<Popconfirm <div className='customAntdPreviewsItem'>
title="警告" <Popconfirm
description="删除后无法恢复，确定要删除吗" title="警告"
onConfirm={() => onDeleteImage(item)} description="删除后无法恢复，确定要删除吗"
okText="删除" onConfirm={() => onDeleteImage(item)}
cancelText="取消" okText="删除"
> cancelText="取消"
<DeleteOutlined /> >
</Popconfirm> <DeleteOutlined />
</Popconfirm>
<DownloadOutlined onClick={() => onDownloadImage(item)} /> <DownloadOutlined onClick={() => onDownloadImage(item)} />
<SwapOutlined rotate={90} onClick={onFlipY} /> <SwapOutlined rotate={90} onClick={onFlipY} />
<SwapOutlined onClick={onFlipX} /> <SwapOutlined onClick={onFlipX} />
<RotateLeftOutlined onClick={onRotateLeft} /> <RotateLeftOutlined onClick={onRotateLeft} />
<RotateRightOutlined onClick={onRotateRight} /> <RotateRightOutlined onClick={onRotateRight} />
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} /> <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} /> <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
<UndoOutlined onClick={onReset} /> <UndoOutlined onClick={onReset} />
</div>
</Space> </Space>
), ),
}} /> }} />

5
src/pages/Swiper/index.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, Tabs, Card, Popconfirm, message } from 'antd'; import { Table, Button, Image, Form, Input, Tabs, Card, Popconfirm, message } from 'antd';
import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI } from '@/api/Swiper'; import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI } from '@/api/Swiper';
import { Swiper } from '@/types/app/swiper'; import { Swiper } from '@/types/app/swiper';
import Title from '@/components/Title'; import Title from '@/components/Title';
@@ -12,14 +12,13 @@ const SwiperPage = () => {
const [swiper, setSwiper] = useState<Swiper>({} as Swiper); const [swiper, setSwiper] = useState<Swiper>({} as Swiper);
const [list, setList] = useState<Swiper[]>([]); const [list, setList] = useState<Swiper[]>([]);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [viewImage, setViewImage] = useState<string>('');
const [tab, setTab] = useState<string>('list'); const [tab, setTab] = useState<string>('list');
const columns: ColumnsType<Swiper> = [ const columns: ColumnsType<Swiper> = [
{ title: 'ID', dataIndex: 'id', key: 'id', align: 'center' }, { title: 'ID', dataIndex: 'id', key: 'id', align: 'center' },
{ {
title: '图片', dataIndex: 'image', key: 'image', width: 200, title: '图片', dataIndex: 'image', key: 'image', width: 200,
render: (text: string) => <img src={text} alt="swiper" className="w-full rounded cursor-pointer" onClick={() => setViewImage(text)} /> render: (url: string) => <Image width={200} src={url} className="w-full rounded cursor-pointer" />
}, },
{ title: '标题', dataIndex: 'title', key: 'title' }, { title: '标题', dataIndex: 'title', key: 'title' },
{ title: '描述', dataIndex: 'description', key: 'description', width: 500, }, { title: '描述', dataIndex: 'description', key: 'description', width: 500, },