663 lines
12 KiB
Text
663 lines
12 KiB
Text
/* 📢 群公告页面样式 */
|
|
|
|
/* CSS变量定义 */
|
|
page {
|
|
--primary-color: #007AFF;
|
|
--primary-light: #5AC8FA;
|
|
--primary-dark: #0051D5;
|
|
--success-color: #34C759;
|
|
--danger-color: #FF3B30;
|
|
--warning-color: #FF9500;
|
|
--background-color: #F2F2F7;
|
|
--surface-color: #FFFFFF;
|
|
--text-primary: #000000;
|
|
--text-secondary: #8E8E93;
|
|
--text-tertiary: #C7C7CC;
|
|
--border-color: #E5E5EA;
|
|
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
|
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
|
--radius-small: 8rpx;
|
|
--radius-medium: 12rpx;
|
|
--radius-large: 20rpx;
|
|
}
|
|
|
|
/* 🌙 深色模式支持 */
|
|
@media (prefers-color-scheme: dark) {
|
|
page {
|
|
--primary-color: #0A84FF;
|
|
--primary-light: #64D2FF;
|
|
--primary-dark: #0056CC;
|
|
--success-color: #30D158;
|
|
--danger-color: #FF453A;
|
|
--warning-color: #FF9F0A;
|
|
--background-color: #000000;
|
|
--surface-color: #1C1C1E;
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #8E8E93;
|
|
--text-tertiary: #48484A;
|
|
--border-color: #38383A;
|
|
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
|
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
.group-announcement-container {
|
|
height: 100vh;
|
|
background: var(--background-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 🎨 自定义导航栏 */
|
|
.custom-navbar {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
|
box-shadow: var(--shadow-medium);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.navbar-left, .navbar-right {
|
|
width: 120rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-medium);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.navbar-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.navbar-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.navbar-left:active, .navbar-right:active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.back-icon {
|
|
font-size: 48rpx;
|
|
color: white;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.navbar-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.save-text {
|
|
font-size: 32rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.save-text.active {
|
|
color: white;
|
|
}
|
|
|
|
/* 🎨 页面内容 */
|
|
.page-content {
|
|
flex: 1;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
/* 🎨 编辑模式 */
|
|
.edit-mode {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.edit-tips {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 149, 0, 0.1);
|
|
border: 1rpx solid rgba(255, 149, 0, 0.3);
|
|
border-radius: var(--radius-small);
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.tips-icon {
|
|
font-size: 32rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.tips-text {
|
|
font-size: 26rpx;
|
|
color: var(--warning-color);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.edit-container {
|
|
flex: 1;
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-medium);
|
|
border: 1rpx solid var(--border-color);
|
|
box-shadow: var(--shadow-light);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.announcement-textarea {
|
|
flex: 1;
|
|
padding: 32rpx;
|
|
font-size: 30rpx;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
min-height: 400rpx;
|
|
}
|
|
|
|
.edit-footer {
|
|
padding: 24rpx 32rpx;
|
|
border-top: 1rpx solid var(--border-color);
|
|
}
|
|
|
|
.char-counter {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.counter-text {
|
|
font-size: 24rpx;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.edit-actions {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: var(--radius-medium);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: var(--text-tertiary);
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.action-btn.primary.active {
|
|
background: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.action-btn.primary:active {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: var(--surface-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.action-btn.secondary:active {
|
|
background: var(--background-color);
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-btn.primary .btn-text {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.action-btn.primary.active .btn-text {
|
|
color: white;
|
|
}
|
|
|
|
.action-btn.secondary .btn-text {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* 🎨 查看模式 */
|
|
.view-mode {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
/* 🎨 当前公告 */
|
|
.current-announcement {
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-medium);
|
|
border: 1rpx solid var(--border-color);
|
|
box-shadow: var(--shadow-light);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.announcement-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid var(--border-color);
|
|
background: var(--background-color);
|
|
}
|
|
|
|
.announcement-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.header-actions .action-btn {
|
|
font-size: 26rpx;
|
|
color: var(--primary-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.header-actions .action-btn:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.header-actions .action-btn.danger {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.announcement-content {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 30rpx;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.announcement-meta {
|
|
padding: 24rpx 32rpx;
|
|
border-top: 1rpx solid var(--border-color);
|
|
background: var(--background-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.meta-text {
|
|
font-size: 24rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* 🎨 无公告状态 */
|
|
.no-announcement {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 40rpx;
|
|
text-align: center;
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-medium);
|
|
border: 1rpx solid var(--border-color);
|
|
box-shadow: var(--shadow-light);
|
|
}
|
|
|
|
.no-announcement-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 24rpx;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.no-announcement-text {
|
|
font-size: 28rpx;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.no-announcement-action .action-btn {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
background: var(--primary-color);
|
|
border-radius: var(--radius-medium);
|
|
}
|
|
|
|
.no-announcement-action .btn-text {
|
|
color: white;
|
|
}
|
|
|
|
/* 🎨 历史公告 */
|
|
.announcement-history {
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-medium);
|
|
border: 1rpx solid var(--border-color);
|
|
box-shadow: var(--shadow-light);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.history-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid var(--border-color);
|
|
background: var(--background-color);
|
|
}
|
|
|
|
.history-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.history-count {
|
|
font-size: 26rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.history-item {
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid var(--border-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.history-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.history-item:active {
|
|
background: var(--background-color);
|
|
}
|
|
|
|
.history-content {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.history-text {
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.history-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.history-publisher, .history-time {
|
|
font-size: 24rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* 🎨 弹窗样式 */
|
|
.history-detail-modal, .delete-confirm-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.modal-content {
|
|
width: 90%;
|
|
max-width: 600rpx;
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-large);
|
|
box-shadow: var(--shadow-medium);
|
|
animation: scaleIn 0.3s ease-out;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid var(--border-color);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.close-btn {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
background: var(--background-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.close-btn:active {
|
|
background: var(--border-color);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.close-icon {
|
|
font-size: 28rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.detail-content {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.detail-text {
|
|
font-size: 30rpx;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.detail-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.meta-label {
|
|
font-size: 26rpx;
|
|
color: var(--text-secondary);
|
|
margin-right: 16rpx;
|
|
min-width: 120rpx;
|
|
}
|
|
|
|
.meta-value {
|
|
font-size: 26rpx;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.confirm-text {
|
|
font-size: 30rpx;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
border-top: 1rpx solid var(--border-color);
|
|
}
|
|
|
|
.modal-btn {
|
|
flex: 1;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1rpx solid var(--border-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-btn:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.modal-btn:active {
|
|
background: var(--background-color);
|
|
}
|
|
|
|
.modal-btn.cancel .btn-text {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.modal-btn.confirm .btn-text {
|
|
color: var(--danger-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 🎨 加载状态 */
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-content {
|
|
background: var(--surface-color);
|
|
border-radius: var(--radius-medium);
|
|
padding: 48rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 4rpx solid var(--border-color);
|
|
border-top: 4rpx solid var(--primary-color);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 📱 响应式设计 */
|
|
@media screen and (max-width: 375px) {
|
|
.page-content {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.announcement-header,
|
|
.announcement-content,
|
|
.announcement-meta,
|
|
.history-header,
|
|
.history-item {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.no-announcement {
|
|
padding: 80rpx 24rpx;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 414px) {
|
|
.page-content {
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.announcement-header,
|
|
.announcement-content,
|
|
.announcement-meta,
|
|
.history-header,
|
|
.history-item {
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.no-announcement {
|
|
padding: 160rpx 40rpx;
|
|
}
|
|
}
|