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;
background: #fff;
border-radius: 10px;
.ant-space-gap-col-small {
column-gap: 0
}
.ant-space-item {
.anticon {
font-size: 20px;
color: #5d5d5d;
padding: 10px;
}
.anticon {
font-size: 20px;
color: #5d5d5d;
padding: 10px;
&:hover {
background-color: #f7f7ff;
color: #727cf5;
}
}
}

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

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

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

@@ -1,5 +1,5 @@
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 { Swiper } from '@/types/app/swiper';
import Title from '@/components/Title';
@@ -12,14 +12,13 @@ const SwiperPage = () => {
const [swiper, setSwiper] = useState<Swiper>({} as Swiper);
const [list, setList] = useState<Swiper[]>([]);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [viewImage, setViewImage] = useState<string>('');
const [tab, setTab] = useState<string>('list');
const columns: ColumnsType<Swiper> = [
{ title: 'ID', dataIndex: 'id', key: 'id', align: 'center' },
{
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: 'description', key: 'description', width: 500, },