修改发布日历
This commit is contained in:
62
src/components/CommonDialog/CommonDialog.tsx
Normal file
62
src/components/CommonDialog/CommonDialog.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import React from 'react'
|
||||
import { Dialog } from '@nutui/nutui-react-taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export interface CommonDialogProps {
|
||||
visible: boolean
|
||||
title?: string
|
||||
content?: React.ReactNode
|
||||
cancelText?: string
|
||||
confirmText?: string
|
||||
onCancel?: () => void
|
||||
onConfirm?: () => void
|
||||
showCancel?: boolean
|
||||
showConfirm?: boolean
|
||||
children?: React.ReactNode
|
||||
contentTitle?: string
|
||||
contentDesc?: string
|
||||
}
|
||||
|
||||
const CommonDialog: React.FC<CommonDialogProps> = ({
|
||||
visible,
|
||||
title,
|
||||
content,
|
||||
cancelText = '取消',
|
||||
confirmText = '确认',
|
||||
onCancel,
|
||||
onConfirm,
|
||||
children,
|
||||
contentTitle,
|
||||
contentDesc
|
||||
}) => {
|
||||
|
||||
const getContent = () => {
|
||||
if (content) {
|
||||
return content
|
||||
}
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
return (
|
||||
<View className={styles['confirm-content']}>
|
||||
<Text className={styles['confirm-content-title']}>{contentTitle}</Text>
|
||||
<Text className={styles['confirm-content-desc']}>{contentDesc}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Dialog
|
||||
visible={visible}
|
||||
title={title}
|
||||
content={getContent()}
|
||||
onCancel={onCancel}
|
||||
onConfirm={onConfirm}
|
||||
cancelText={cancelText}
|
||||
confirmText={confirmText}
|
||||
className={styles['custom-dialog']}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default CommonDialog
|
||||
86
src/components/CommonDialog/index.module.scss
Normal file
86
src/components/CommonDialog/index.module.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@use '~@/scss/themeColor.scss' as theme;
|
||||
|
||||
.custom-dialog {
|
||||
:global(.nut-dialog) {
|
||||
border-radius: 12px !important;
|
||||
padding: 0 !important;
|
||||
max-width: 320px !important;
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
:global(.nut-dialog-content) {
|
||||
margin:0 !important;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-header) {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-title) {
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-content) {
|
||||
min-width: 280px !important;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-footer) {
|
||||
display: flex !important;
|
||||
padding: 0 !important;
|
||||
height: 47.5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid theme.$primary-border-light-color;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-footer .nut-button) {
|
||||
flex: 1 !important;
|
||||
font-size: 15px !important;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-right: 1px solid theme.$primary-border-light-color !important;
|
||||
height: 100%;
|
||||
&:last-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.nut-dialog-footer .nut-button-default) {
|
||||
color: rgba(22, 24, 35, 0.75) !important;
|
||||
}
|
||||
|
||||
:global(.nut-dialog-footer .nut-button-primary) {
|
||||
color: #161823 !important;
|
||||
|
||||
}
|
||||
|
||||
:global(.nut-dialog-footer .nut-button:hover) {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
.confirm-content{
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
.confirm-content-title{
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #161823;
|
||||
}
|
||||
.confirm-content-desc{
|
||||
font-size: 14px;
|
||||
color: rgba(22, 24, 35, 0.75)
|
||||
}
|
||||
}
|
||||
}
|
||||
2
src/components/CommonDialog/index.ts
Normal file
2
src/components/CommonDialog/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
import CommonDialog from './CommonDialog.tsx'
|
||||
export default CommonDialog
|
||||
Reference in New Issue
Block a user