| | |
| | | Inherits="H5_WCSM" %> |
| | | <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> |
| | | <style> |
| | | /* 全局样式 */ |
| | | /* 全局样式 - 淡蓝色渐变背景 */ |
| | | #app { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%); |
| | | min-height: 100vh; |
| | | padding: 0; |
| | | margin: 0; |
| | |
| | | margin: 4px 16px 4px; |
| | | border-radius: 16px; |
| | | background-color: #fff; |
| | | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| | | box-shadow: 0 8px 32px rgba(200, 220, 230, 0.15); |
| | | overflow: hidden; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .card-container:hover { |
| | | box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15); |
| | | box-shadow: 0 12px 48px rgba(200, 220, 230, 0.2); |
| | | transform: translateY(-2px); |
| | | } |
| | | |
| | | /* 卡片头部和标题样式 */ |
| | | /* 卡片头部和标题样式 - 淡蓝色渐变 */ |
| | | .card-header { |
| | | padding: 16px 20px; |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | background: linear-gradient(135deg, #87ceeb 0%, #4fc3f7 100%); |
| | | color: #fff; |
| | | } |
| | | |
| | |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 导航栏样式优化 */ |
| | | /* 导航栏样式优化 - 淡蓝色系 */ |
| | | .van-nav-bar { |
| | | background: linear-gradient(135deg, #5568d3 0%, #6b46c1 100%); |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | background: linear-gradient(135deg, #7bc6ec 0%, #42a5f5 100%); |
| | | box-shadow: 0 2px 8px rgba(200, 220, 230, 0.15); |
| | | } |
| | | |
| | | .van-nav-bar__title { |
| | |
| | | /* 表单字段样式 */ |
| | | .van-field { |
| | | padding: 8px 10px; |
| | | border-bottom: 1px solid #ebedf0; |
| | | border-bottom: 1px solid #e3f2fd; |
| | | transition: background-color 0.2s ease; |
| | | } |
| | | |
| | |
| | | border-bottom: none; |
| | | } |
| | | |
| | | /* 输入框聚焦样式 */ |
| | | /* 输入框聚焦样式 - 淡蓝色边框 */ |
| | | .van-field--focused { |
| | | background-color: #fafafa; |
| | | border-left: 3px solid #0283EF; |
| | | background-color: #f8fbfe; |
| | | border-left: 3px solid #2196f3; |
| | | } |
| | | |
| | | /* 输入框样式 */ |
| | |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 只读字段样式 */ |
| | | /* 只读字段样式 - 淡蓝色背景 */ |
| | | .van-field--disabled { |
| | | background-color: #fafafa; |
| | | background-color: #f5fafe; |
| | | } |
| | | |
| | | .van-field--disabled .van-cell__title, |
| | |
| | | } |
| | | |
| | | .van-field--disabled .van-cell__value { |
| | | background-color: #e8ebed; |
| | | background-color: #e1f5fe; |
| | | border-radius: 6px; |
| | | padding: 6px 10px; |
| | | } |
| | |
| | | margin: 8px 16px; |
| | | background-color: #fff; |
| | | border-radius: 16px; |
| | | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| | | box-shadow: 0 8px 32px rgba(200, 220, 230, 0.15); |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 标签页头部样式 */ |
| | | /* 标签页头部样式 - 淡蓝色背景 */ |
| | | .van-tabs__nav { |
| | | border-bottom: 2px solid #f0f2f5; |
| | | border-bottom: 2px solid #e3f2fd; |
| | | padding: 0 16px; |
| | | background: #fafbfc; |
| | | background: #f5fafe; |
| | | } |
| | | |
| | | /* 标签样式 */ |
| | |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 激活标签样式 */ |
| | | /* 激活标签样式 - 淡蓝色文字 */ |
| | | .van-tab--active { |
| | | font-weight: 700; |
| | | color: #667eea; |
| | | color: #2196f3; |
| | | } |
| | | |
| | | /* 激活标签下划线样式 */ |
| | | /* 激活标签下划线样式 - 淡蓝色渐变 */ |
| | | .van-tabs__line { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | background: linear-gradient(135deg, #87ceeb 0%, #2196f3 100%); |
| | | height: 3px; |
| | | bottom: 0; |
| | | transform: translateY(0); |
| | |
| | | |
| | | .van-row { |
| | | padding: 10px 12px; |
| | | border-bottom: 1px solid #ebedf0; |
| | | border-bottom: 1px solid #e3f2fd; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | |
| | | border-bottom: none; |
| | | } |
| | | |
| | | /* 表格行悬停样式 */ |
| | | /* 表格行悬停样式 - 淡蓝色背景 */ |
| | | .van-row:hover { |
| | | background-color: #f0f4ff; |
| | | background-color: #e3f2fd; |
| | | transform: translateX(4px); |
| | | } |
| | | |
| | | /* 表格头部样式 */ |
| | | /* 表格头部样式 - 淡蓝色渐变 */ |
| | | .van-row:nth-child(1) { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | background: linear-gradient(135deg, #87ceeb 0%, #42a5f5 100%); |
| | | font-weight: 700; |
| | | color: #fff; |
| | | } |
| | | |
| | | /* 交替行样式 */ |
| | | /* 交替行样式 - 淡蓝色浅背景 */ |
| | | .van-row:nth-child(even) { |
| | | background-color: #fafbfc; |
| | | background-color: #f8fbfe; |
| | | } |
| | | |
| | | /* 单元格样式 */ |
| | |
| | | } |
| | | |
| | | .van-field__control:focus { |
| | | box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| | | box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); |
| | | } |
| | | |
| | | /* 按钮样式优化 */ |
| | | /* 按钮样式优化 - 淡蓝色渐变 */ |
| | | .van-button { |
| | | border-radius: 8px; |
| | | font-weight: 500; |
| | |
| | | } |
| | | |
| | | .van-button--primary { |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | background: linear-gradient(135deg, #87ceeb 0%, #2196f3 100%); |
| | | border: none; |
| | | } |
| | | |
| | | .van-button--primary:hover { |
| | | transform: translateY(-2px); |
| | | box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3); |
| | | box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2); |
| | | } |
| | | |
| | | /* 加载组件样式 */ |
| | |
| | | |
| | | <asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="server"> |
| | | <script src="Js/WCSM.js?=20251118"></script> |
| | | </asp:Content> |
| | | </asp:Content> |