355 lines
7.0 KiB
Vue
355 lines
7.0 KiB
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>
|