|
@@ -481,13 +481,20 @@
|
|
|
background: white;
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- max-width: 400px;
|
|
|
|
|
- max-height: 80vh;
|
|
|
|
|
|
|
+ max-width: 500px; // 🔥 增加最大宽度,适应企微侧边栏
|
|
|
|
|
+ max-height: 85vh; // 🔥 增加最大高度
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
animation: slideUp 0.3s ease-out;
|
|
animation: slideUp 0.3s ease-out;
|
|
|
|
|
+
|
|
|
|
|
+ // 🔥 移动端/企微端适配
|
|
|
|
|
+ @media (max-width: 640px) {
|
|
|
|
|
+ max-width: 95vw;
|
|
|
|
|
+ max-height: 90vh;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.gallery-header, .modal-header {
|
|
.gallery-header, .modal-header {
|
|
|
padding: 16px;
|
|
padding: 16px;
|
|
@@ -583,6 +590,12 @@
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
+ // 🔥 移动端/小屏幕适配
|
|
|
|
|
+ @media (max-width: 480px) {
|
|
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.preview-image-item {
|
|
.preview-image-item {
|
|
|
aspect-ratio: 1;
|
|
aspect-ratio: 1;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
@@ -607,12 +620,14 @@
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
|
|
+ max-height: 280px; // 🔥 限制最大高度
|
|
|
|
|
+ overflow-y: auto; // 🔥 支持滚动
|
|
|
|
|
|
|
|
.template-option {
|
|
.template-option {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
|
gap: 10px;
|
|
gap: 10px;
|
|
|
- padding: 10px;
|
|
|
|
|
|
|
+ padding: 10px 12px; // 🔥 优化内边距
|
|
|
border: 2px solid #e2e8f0;
|
|
border: 2px solid #e2e8f0;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
@@ -665,13 +680,16 @@
|
|
|
|
|
|
|
|
.custom-input {
|
|
.custom-input {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding: 10px;
|
|
|
|
|
|
|
+ padding: 12px; // 🔥 增加内边距,更易点击
|
|
|
border: 2px solid #e2e8f0;
|
|
border: 2px solid #e2e8f0;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ font-size: 14px; // 🔥 增大字体
|
|
|
color: #334155;
|
|
color: #334155;
|
|
|
resize: vertical;
|
|
resize: vertical;
|
|
|
|
|
+ min-height: 80px; // 🔥 设置最小高度
|
|
|
|
|
+ max-height: 150px; // 🔥 设置最大高度
|
|
|
transition: border-color 0.2s;
|
|
transition: border-color 0.2s;
|
|
|
|
|
+ line-height: 1.6; // 🔥 增加行高
|
|
|
|
|
|
|
|
&:focus {
|
|
&:focus {
|
|
|
outline: none;
|
|
outline: none;
|
|
@@ -686,26 +704,32 @@
|
|
|
|
|
|
|
|
// 只发图片选项
|
|
// 只发图片选项
|
|
|
.send-options {
|
|
.send-options {
|
|
|
- margin-bottom: 12px;
|
|
|
|
|
|
|
+ margin-bottom: 14px; // 🔥 增加下边距
|
|
|
|
|
+ padding: 10px; // 🔥 增加内边距
|
|
|
|
|
+ background: #f8fafc; // 🔥 添加背景色
|
|
|
|
|
+ border-radius: 6px; // 🔥 圆角
|
|
|
|
|
|
|
|
.checkbox-option {
|
|
.checkbox-option {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 8px;
|
|
|
|
|
|
|
+ gap: 10px; // 🔥 增加间距
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
+ user-select: none; // 🔥 禁止文字选中
|
|
|
|
|
|
|
|
input[type="checkbox"] {
|
|
input[type="checkbox"] {
|
|
|
- width: 16px;
|
|
|
|
|
- height: 16px;
|
|
|
|
|
|
|
+ width: 18px; // 🔥 增大尺寸
|
|
|
|
|
+ height: 18px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
+ flex-shrink: 0; // 🔥 防止收缩
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.checkbox-label {
|
|
.checkbox-label {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
gap: 6px;
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ font-size: 14px; // 🔥 增大字体
|
|
|
color: #475569;
|
|
color: #475569;
|
|
|
|
|
+ font-weight: 500; // 🔥 加粗
|
|
|
|
|
|
|
|
svg {
|
|
svg {
|
|
|
color: #6366f1;
|
|
color: #6366f1;
|
|
@@ -740,11 +764,18 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.gallery-footer, .modal-footer {
|
|
.gallery-footer, .modal-footer {
|
|
|
- padding: 12px 16px;
|
|
|
|
|
|
|
+ padding: 14px 16px; // 🔥 增加上下内边距
|
|
|
border-top: 1px solid #e2e8f0;
|
|
border-top: 1px solid #e2e8f0;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
- gap: 8px;
|
|
|
|
|
|
|
+ gap: 10px; // 🔥 增加按钮间距
|
|
|
|
|
+ background: #fafafa; // 🔥 添加浅灰背景
|
|
|
|
|
+
|
|
|
|
|
+ // 🔥 移动端适配
|
|
|
|
|
+ @media (max-width: 480px) {
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.add-files-btn {
|
|
.add-files-btn {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -768,10 +799,11 @@
|
|
|
background: white;
|
|
background: white;
|
|
|
border: 1px solid #e2e8f0;
|
|
border: 1px solid #e2e8f0;
|
|
|
color: #64748b;
|
|
color: #64748b;
|
|
|
- padding: 8px 12px;
|
|
|
|
|
|
|
+ padding: 10px 18px; // 🔥 增大内边距
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ font-size: 14px; // 🔥 增大字体
|
|
|
|
|
+ font-weight: 500; // 🔥 加粗
|
|
|
transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
@@ -783,25 +815,28 @@
|
|
|
.btn-send {
|
|
.btn-send {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 6px;
|
|
|
|
|
|
|
+ gap: 8px; // 🔥 增加图标间距
|
|
|
background: #10b981;
|
|
background: #10b981;
|
|
|
color: white;
|
|
color: white;
|
|
|
border: none;
|
|
border: none;
|
|
|
- padding: 8px 16px;
|
|
|
|
|
|
|
+ padding: 10px 20px; // 🔥 增大内边距
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- font-size: 13px;
|
|
|
|
|
|
|
+ font-size: 15px; // 🔥 增大字体
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
|
|
|
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); // 🔥 添加阴影
|
|
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
&:hover:not(:disabled) {
|
|
|
background: #059669;
|
|
background: #059669;
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
|
|
+ box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); // 🔥 hover阴影
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&:disabled {
|
|
&:disabled {
|
|
|
- opacity: 0.6;
|
|
|
|
|
|
|
+ opacity: 0.5;
|
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|
|
|
|
|
+ box-shadow: none; // 🔥 禁用时移除阴影
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
svg {
|
|
svg {
|