rn-app/pages/HomeScreen/components/NoticeBar/styles.ts

import { Dimensions } from 'react-native';
import { createThemeStyles } from '@/theme';

const { width, height } = Dimensions.get('window');

/**
 * 创建主题样式
 */
export const styles = createThemeStyles((colors) => ({
  // 顶部通知栏
  container: {
    backgroundColor: colors.background,
    paddingVertical: 10,
    paddingHorizontal: 12,
    marginHorizontal: 0,
    marginBottom: 0,
    borderRadius: 0,
    flexDirection: 'row',
    alignItems: 'center',
    elevation: 2,
    shadowColor: colors.cardShadow,
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
  },
  volumeIcon: {
    marginRight: 8,
  },
  label: {
    fontSize: 12,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginRight: 8,
    backgroundColor: colors.primary,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  content: {
    flex: 1,
    fontSize: 12,
    color: colors.text,
    overflow: 'hidden',
  },
  closeButton: {
    marginLeft: 8,
    padding: 4,
  },
  closeText: {
    fontSize: 16,
    color: colors.textSecondary,
  },
  // 右侧按钮组
  rightButtonsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 8,
  },
  actionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 6,
    // paddingVertical: 6,
    marginLeft: 8,
    borderRadius: 3,
    borderWidth: 1,
    borderColor: colors.border,
    height: 20,
    // backgroundColor: colors.primary,
  },
  actionButtonText: {
    fontSize: 10,
    color: colors.text,
    fontWeight: '500',
    marginLeft: 4,
  },
  // 弹窗样式
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: colors.card,
    borderRadius: 12,
    width: width * 0.9,
    maxHeight: height * 0.8,
    overflow: 'hidden',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },
  modalTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: colors.text,
  },
  modalCloseButton: {
    padding: 8,
  },
  modalCloseText: {
    fontSize: 20,
    color: colors.textSecondary,
  },
  modalBody: {
    padding: 16,
  },
  noticeTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    color: colors.text,
    marginBottom: 8,
  },
  noticeDate: {
    fontSize: 12,
    color: colors.textSecondary,
    marginBottom: 12,
  },
  noticeTextContent: {
    fontSize: 13,
    color: colors.text,
    lineHeight: 20,
    marginBottom: 12,
  },
  noticeImageContainer: {
    width: '100%',
    height: 200,
    borderRadius: 8,
    marginBottom: 12,
    backgroundColor: colors.backgroundSecondary,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  noticeImage: {
    width: '100%',
    height: 200,
    borderRadius: 8,
  },
  imageLoader: {
    position: 'absolute',
  },
  noticeLink: {
    fontSize: 13,
    color: colors.primary,
    textDecorationLine: 'underline',
    marginBottom: 12,
  },
}));