all-project/mobile/src/App.vue

<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() {
        console.log('App Launch');
    },
    onShow() {
        console.log('App Show');
    },
    onHide() {
        console.log('App Hide');
    },
} as AppConfig);
</script>

<style lang="scss">
/*每个页面公共css */
/* 注意：必须首先导入自定义主题变量，然后再导入 uview-ui 的样式 */

/* 先导入自定义主题变量 - 温暖商务风格 */
@import '@/common/uview-theme.scss';

/* 然后导入 uview-ui 的样式 */
@import 'uview-ui/index.scss';

/* 引入自定义图标系统 - 暂时禁用，使用uview-ui内置图标 */
@import '@/static/fonts/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: #007dfb !important;
//     border-color: #007dfb !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: #007dfb !important;
    border-color: #007dfb !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;
}

.u-toolbar__wrapper__confirm {
    color: #0051d9 !important;
}

.u-button--plain.u-button--primary {
    color: #ffffff !important;
}

.u-button--plain.u-button--error {
    color: #ffffff !important;
}

.u-button--plain.u-button--info {
    color: #3e3b3b !important;
}

.u-button--plain.u-button--warning {
    color: #ffffff !important;
}

.u-button--plain.u-button--success {
    color: #ffffff !important;
}
</style>