提交代码

2025-08-22 12:08:18 +08:00
1 parent c43680f0aa
commit e54cb0bca0
@@ -1,5 +1,14 @@
 <script lang="ts">
 import Vue from 'vue';
+
+// uni-app 应用配置接口
+interface AppConfig {
+    mpType: string;
+    onLaunch(): void;
+    onShow(): void;
+    onHide(): void;
+}
+
 export default Vue.extend({
    mpType: 'app',
    onLaunch() {
@@ -11,13 +20,310 @@ export default Vue.extend({
    onHide() {
        console.log('App Hide');
    },
-});
+} as AppConfig);
 </script>

 <style lang="scss">
-/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+/*每个页面公共css */
+/* 注意：必须首先导入自定义主题变量，然后再导入 uview-ui 的样式 */
+
+/* 先导入自定义主题变量 - 温暖商务风格 */
+@import '@/common/uview-theme.scss';
+
+/* 然后导入 uview-ui 的样式 */
@import 'uview-ui/index.scss';

-/* 引入自定义图标系统 */
-@import '@/static/fonts/iconfont.css';
+/* 引入自定义图标系统 - 暂时禁用，使用uview-ui内置图标 */
+/* @import 'common/icons/iconfont.css'; */
+
+/* 修复uni-app和uview-ui兼容性问题 */
+page {
+    height: 100%;
+}
+
+/* 全局字体设置 */
+.app {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+/* 修复uview-ui组件默认样式问题 */
+.u-border-top,
+.u-border-bottom,
+.u-border-left,
+.u-border-right,
+.u-border {
+    position: relative;
+}
+
+.u-border-top::after,
+.u-border-bottom::after,
+.u-border-left::after,
+.u-border-right::after,
+.u-border::after {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid #dadbde;
+    color: #dadbde;
+    transform-origin: 0 0;
+    transform: scaleY(0.5);
+}
+
+/* 修复微信小程序兼容性 */
+.u-safe-area-inset-bottom {
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* uview-ui 按钮组件的图标修复 */
+.u-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 确保图标字体正确加载 */
+.u-iconfont {
+    font-family: 'uview-iconfont' !important;
+    font-size: inherit;
+    font-style: normal;
+    color: #909399 !important;
+}
+
+/* 强制覆盖 uview-ui 的主题色 */
+/* 按钮主题色覆盖 */
+.u-button--primary {
+    background-color: #0051d9 !important;
+    border-color: #0051d9 !important;
+}
+
+.u-button--success {
+    background-color: #388e3c !important;
+    border-color: #388e3c !important;
+}
+
+.u-button--warning {
+    background-color: #f57c00 !important;
+    border-color: #f57c00 !important;
+}
+
+.u-button--error {
+    background-color: #d32f2f !important;
+    border-color: #d32f2f !important;
+}
+
+.u-button--info {
+    background-color: #1976d2 !important;
+    border-color: #1976d2 !important;
+}
+
+/* 标签主题色覆盖 */
+.u-tag--primary {
+    background-color: #0051d9 !important;
+    border-color: #0051d9 !important;
+}
+
+.u-tag--success {
+    background-color: #388e3c !important;
+    border-color: #388e3c !important;
+}
+
+.u-tag--warning {
+    background-color: #f57c00 !important;
+    border-color: #f57c00 !important;
+}
+
+.u-tag--error {
+    background-color: #d32f2f !important;
+    border-color: #d32f2f !important;
+}
+
+.u-tag--info {
+    background-color: #1976d2 !important;
+    border-color: #1976d2 !important;
+}
+
+/* ========== 全局温暖商务风格样式 ========== */
+
+/* 全局页面背景 */
+page {
+    background-color: #fafafa;
+    color: #2c2c2c;
+}
+
+/* 全局滚动条样式 - 温暖商务风格 */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #bdbdbd;
+}
+
+/* 全局链接样式 - 温暖商务风格 */
+.link {
+    color: #0051d9;
+    text-decoration: none;
+}
+
+.link:hover {
+    color: #1976d2;
+}
+
+/* 全局按钮重置 - 应用温暖商务渐变 */
+.btn-primary {
+    background: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
+    border: none;
+    color: white;
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
+    border: none;
+    color: white;
+}
+
+.btn-accent {
+    background: linear-gradient(135deg, #ff6f00 0%, #ffb74d 100%);
+    border: none;
+    color: white;
+}
+
+/* 全局卡片样式 - 温暖商务风格 */
+.card {
+    background: #fafafa;
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 2px 12px rgba(45, 45, 45, 0.1);
+}
+
+/* 全局分割线 - 温暖商务风格 */
+.divider {
+    border-color: #e0e0e0;
+}
+
+/* 全局文本样式 - 温暖商务风格 */
+.text-primary {
+    color: #0051d9 !important;
+}
+.text-success {
+    color: #388e3c !important;
+}
+.text-warning {
+    color: #f57c00 !important;
+}
+.text-error {
+    color: #d32f2f !important;
+}
+.text-info {
+    color: #1976d2 !important;
+}
+.text-secondary {
+    color: #5d4037 !important;
+}
+.text-accent {
+    color: #ff6f00 !important;
+}
+
+.text-main {
+    color: #2c2c2c !important;
+}
+.text-content {
+    color: #616161 !important;
+}
+.text-tips {
+    color: #757575 !important;
+}
+.text-light {
+    color: #9e9e9e !important;
+}
+
+/* 全局样式 - 温暖商务风格 */
+/*每个页面公共css */
+
+/* 温暖商务风格全局样式 */
+.warm-gradient-primary {
+    background: linear-gradient(135deg, #0051d9 0%, #1565c0 100%);
+}
+
+.warm-gradient-secondary {
+    background: linear-gradient(135deg, #5d4037 0%, #8d6e63 100%);
+}
+
+.warm-gradient-accent {
+    background: linear-gradient(135deg, #ff6f00 0%, #ffb74d 100%);
+}
+
+/* 温暖商务文字颜色工具类 */
+.text-primary {
+    color: #0051d9;
+}
+.text-secondary {
+    color: #5d4037;
+}
+.text-accent {
+    color: #ff6f00;
+}
+.text-success {
+    color: #388e3c;
+}
+.text-warning {
+    color: #f57c00;
+}
+.text-error {
+    color: #d32f2f;
+}
+.text-info {
+    color: #1976d2;
+}
+.text-warm-gold {
+    color: #ffc107;
+}
+.text-warm-green {
+    color: #689f38;
+}
+
+/* 温暖商务背景颜色工具类 */
+.bg-primary {
+    background-color: #0051d9;
+}
+.bg-secondary {
+    background-color: #5d4037;
+}
+.bg-accent {
+    background-color: #ff6f00;
+}
+.bg-success {
+    background-color: #388e3c;
+}
+.bg-warning {
+    background-color: #f57c00;
+}
+.bg-error {
+    background-color: #d32f2f;
+}
+.bg-info {
+    background-color: #1976d2;
+}
+.bg-warm-gold {
+    background-color: #ffc107;
+}
+.bg-warm-green {
+    background-color: #689f38;
+}
 </style>
@@ -0,0 +1,117 @@
+/* ========================================
+   uview-ui 主题变量定义文件
+   2025新版配色方案 - 温暖商务风格
+   ======================================== */
+
+/* 主色调系统 */
+$u-primary: #0051d9 !default;
+$u-warning: #f57c00 !default;
+$u-success: #388e3c !default;
+$u-error: #d32f2f !default;
+$u-info: #1976d2 !default;
+
+/* 主色调变体 */
+$u-primary-disabled: #b3d4fc !default;
+$u-primary-dark: #003db8 !default;
+$u-primary-light: #4285f4 !default;
+
+$u-warning-disabled: #ffcc80 !default;
+$u-warning-dark: #ef6c00 !default;
+$u-warning-light: #ffb74d !default;
+
+$u-success-disabled: #a5d6a7 !default;
+$u-success-dark: #2e7d32 !default;
+$u-success-light: #4caf50 !default;
+
+$u-error-disabled: #ef9a9a !default;
+$u-error-dark: #c62828 !default;
+$u-error-light: #f44336 !default;
+
+$u-info-disabled: #90caf9 !default;
+$u-info-dark: #0d47a1 !default;
+$u-info-light: #2196f3 !default;
+
+/* 中性色系统 */
+$u-main-color: #303133 !default;
+$u-content-color: #606266 !default;
+$u-tips-color: #909399 !default;
+$u-light-color: #c0c4cc !default;
+$u-disabled-color: #c0c4cc !default;
+
+/* 背景色系统 */
+$u-bg-color: #f2f3f5 !default;
+$u-bg-color-light: #f8f9fa !default;
+$u-bg-color-dark: #ffffff !default;
+
+/* 边框色系统 */
+$u-border-color: #dadbde !default;
+$u-border-color-light: #e4e7ed !default;
+$u-border-color-lighter: #f2f6fc !default;
+$u-border-color-dark: #d4d7de !default;
+
+/* 文本色系统 */
+$u-text-color: #2c3e50 !default;
+$u-text-color-inverse: #ffffff !default;
+$u-text-color-grey: #909399 !default;
+$u-text-color-placeholder: #c0c4cc !default;
+
+/* 尺寸系统 */
+$u-font-size-mini: 24rpx !default;
+$u-font-size-small: 26rpx !default;
+$u-font-size-default: 28rpx !default;
+$u-font-size-large: 32rpx !default;
+
+/* 圆角系统 */
+$u-border-radius-default: 8rpx !default;
+$u-border-radius-small: 6rpx !default;
+$u-border-radius-large: 12rpx !default;
+$u-border-radius-circle: 50% !default;
+
+/* 间距系统 */
+$u-spacing-mini: 10rpx !default;
+$u-spacing-small: 15rpx !default;
+$u-spacing-default: 20rpx !default;
+$u-spacing-large: 30rpx !default;
+
+/* 阴影系统 */
+$u-box-shadow-light: 0 0 5px rgba(0, 0, 0, 0.08) !default;
+$u-box-shadow-default: 0 1px 3px rgba(0, 0, 0, 0.1) !default;
+$u-box-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
+
+/* 层级系统 */
+$u-z-index-mask: 1000 !default;
+$u-z-index-navbar: 980 !default;
+$u-z-index-sticky: 970 !default;
+$u-z-index-popup: 500 !default;
+$u-z-index-toast: 1090 !default;
+
+/* 动画时间 */
+$u-animation-duration-fast: 0.2s !default;
+$u-animation-duration-base: 0.3s !default;
+$u-animation-duration-slow: 0.5s !default;
+
+/* 表单元素 */
+$u-form-item-height: 70rpx !default;
+$u-form-item-border-color: #e4e7ed !default;
+$u-form-input-height: 70rpx !default;
+$u-form-textarea-height: 100rpx !default;
+
+/* 按钮特殊变量 */
+$u-button-height: 80rpx !default;
+$u-button-border-radius: $u-border-radius-default !default;
+$u-button-font-size: $u-font-size-default !default;
+
+/* 特殊组件变量 */
+$u-navbar-height: 88rpx !default;
+$u-tabbar-height: 100rpx !default;
+$u-tabs-height: 80rpx !default;
+
+/* 温暖商务风格扩展色彩 */
+$u-warm-brown: #5d4037 !default;
+$u-warm-orange: #ff6f00 !default;
+$u-warm-gold: #ffc107 !default;
+$u-warm-green: #689f38 !default;
+
+/* 渐变色定义 */
+$u-gradient-primary: linear-gradient(135deg, #{$u-primary} 0%, #{$u-primary-light} 100%) !default;
+$u-gradient-warm: linear-gradient(135deg, #{$u-warm-brown} 0%, #{$u-warm-orange} 100%) !default; 
@@ -12,31 +12,68 @@
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

-/* 颜色变量 */
-/* uni.scss */
-@import 'uview-ui/theme.scss';
+/* ========== 温暖商务风格配色方案 ========== */
+/* 基于主题色 #0051d9 的温暖商务风格 - 专业、亲和、温暖可信 */
+/* 💡 重要：uview-ui 变量必须在导入 uview-ui/theme.scss 之前定义 */

-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
+/* uview-ui 核心主题变量 - 温暖商务风格 */
+$u-primary: #0051d9 !default;           // 主题蓝 - 专业可信
+$u-warning: #f57c00 !default;           // 温暖橙 - 警告提示
+$u-success: #388e3c !default;           // 温暖绿 - 成功状态
+$u-error: #d32f2f !default;             // 商务红 - 错误状态
+$u-info: #1976d2 !default;              // 商务蓝 - 信息提示

-/* 文字基本颜色 */
-$uni-text-color: #333; // 基本色
-$uni-text-color-inverse: #fff; // 反色
-$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable: #c0c0c0;
+/* 温暖商务扩展色彩 */
+$u-secondary: #5d4037 !default;         // 温暖棕色 - 辅助色
+$u-accent: #ff6f00 !default;            // 温暖橙色 - 强调色
+$u-warm-gold: #ffc107 !default;         // 温暖金 - 装饰色
+$u-warm-green: #689f38 !default;        // 温暖绿 - 自然色

-/* 背景颜色 */
-$uni-bg-color: #fff;
-$uni-bg-color-grey: #f8f8f8;
-$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
-$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
+/* uview-ui 文字颜色变量 */
+$u-main-color: #2c2c2c !default;        // 主要文字 - 温暖深灰
+$u-content-color: #616161 !default;     // 内容文字 - 温暖中灰
+$u-tips-color: #757575 !default;        // 提示文字 - 温暖浅灰
+$u-light-color: #9e9e9e !default;       // 轻量文字 - 温暖极浅灰
+$u-disabled-color: #bdbdbd !default;    // 禁用色 - 温暖禁用灰

-/* 边框颜色 */
-$uni-border-color: #c8c7cc;
+/* uview-ui 背景颜色变量 */
+$u-bg-color: #fafafa !default;          // 页面背景 - 温暖白
+$u-bg-color-light: #f5f5f5 !default;    // 浅色背景 - 温暖浅灰背景
+$u-bg-color-dark: #eeeeee !default;     // 深色背景 - 温暖深灰背景
+
+/* uview-ui 边框颜色变量 */
+$u-border-color: #e0e0e0 !default;      // 边框色 - 温暖边框
+$u-border-color-light: #f0f0f0 !default; // 浅边框 - 温暖浅边框
+$u-border-color-dark: #d0d0d0 !default;  // 深边框 - 温暖深边框
+
+/* uni-app 原生颜色变量 - 与 uview-ui 保持一致 */
+$uni-color-primary: $u-primary;         // 主题蓝 - 专业可信
+$uni-color-success: $u-success;         // 温暖绿 - 成功状态 
+$uni-color-warning: $u-warning;         // 温暖橙 - 警告提示
+$uni-color-error: $u-error;             // 商务红 - 错误状态
+
+/* 温暖商务扩展色彩 */
+$uni-color-secondary: $u-secondary;     // 温暖棕色 - 辅助色
+$uni-color-accent: $u-accent;           // 温暖橙色 - 强调色  
+$uni-color-info: $u-info;               // 商务蓝 - 信息提示
+$uni-color-warm-gold: $u-warm-gold;     // 温暖金 - 装饰色
+$uni-color-warm-green: $u-warm-green;   // 温暖绿 - 自然色
+
+/* 文字基本颜色 - 温暖商务调整 */
+$uni-text-color: $u-main-color;         // 基本色 - 稍微温暖的深灰
+$uni-text-color-inverse: #fff;          // 反色
+$uni-text-color-grey: $u-tips-color;    // 辅助灰色 - 更温暖的灰色
+$uni-text-color-placeholder: $u-light-color; // 占位符 - 温暖灰
+$uni-text-color-disable: #bdbdbd;       // 禁用色 - 温暖禁用灰
+
+/* 背景颜色 - 温暖商务调整 */
+$uni-bg-color: $u-bg-color;             // 主背景 - 温暖白色
+$uni-bg-color-grey: $u-bg-color-light;  // 灰色背景 - 温暖灰背景
+$uni-bg-color-hover: $u-bg-color-dark;  // 点击状态 - 温暖点击态
+$uni-bg-color-mask: rgba(45, 45, 45, 0.5); // 遮罩 - 温暖遮罩
+
+/* 边框颜色 - 温暖商务调整 */
+$uni-border-color: $u-border-color;     // 边框 - 温暖边框色

 /* 尺寸变量 */

@@ -70,9 +107,9 @@ $uni-spacing-col-lg: 12px;
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度

 /* 文章场景相关 */
-$uni-color-title: #2c405a; // 文章标题颜色
+$uni-color-title: #2C405A; // 文章标题颜色
 $uni-font-size-title: 20px;
-$uni-color-subtitle: #555; // 二级标题颜色
+$uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
-$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph: 15px;