feat: 首页更新

pages/HomeScreen/components/NoticeBar/styles.ts

@@ -0,0 +1,156 @@
+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,
+  },
+}));