diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 7cea04d..95bd91f 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -87,4 +87,7 @@ /* 蒙层色*/ --ti-mobile-common-color-mask-light: rgba(0,0,0,0.5); /* 蒙层_相对浅*/ --ti-mobile-common-color-mask-dark: rgba(0,0,0,0.75); /* 蒙层_相对深*/ + + /* 蒙层色*/ + --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ } diff --git a/src/exception/index.js b/src/exception/index.js index 32b5c20..a5f4fe0 100644 --- a/src/exception/index.js +++ b/src/exception/index.js @@ -1,10 +1,14 @@ export default { - 'tiny-mobile-exception-bgcolor': '#fff', - 'tiny-mobile-exception-view-size': '200px', - 'tiny-mobile-exception-main-message-color': '#666', - 'tiny-mobile-exception-main-message-font-size': '14px', - 'tiny-mobile-exception-sub-message-color': '#999', - 'tiny-mobile-exception-sub-message-font-size': '12px', - 'tiny-mobile-exception-footer-color': '#999', - 'tiny-mobile-exception-footer-font-size': '12px' -} + "tiny-mobile-exception-bg-color": "#fff", + "tiny-mobile-exception-main-message-color": "#999", + "tiny-mobile-exception-main-message-font-size": "13px", + "tiny-mobile-exception-sub-message-color": "#999", + "tiny-mobile-exception-sub-message-font-size": "12px", + "tiny-mobile-exception-footer-color": "#999", + "tiny-mobile-exception-footer-font-size": "12px", + "tiny-mobile-exception-image-width": "200px", + "tiny-mobile-exception-image-height": "100px", + "tiny-mobile-exception-content-width": "234px", + "tiny-mobile-exception-button-width": "136px", + "tiny-mobile-exception-button-height": "42px", +}; diff --git a/src/exception/index.less b/src/exception/index.less index 6a3b38c..a24d84b 100644 --- a/src/exception/index.less +++ b/src/exception/index.less @@ -23,7 +23,7 @@ align-items: center; width: 100%; height: 100%; - background-color: var(--ti-mobile-exception-bgcolor, #fff); + background-color: var(--ti-mobile-exception-bg-color, #fff); text-align: center; z-index: 9999; @@ -33,6 +33,17 @@ background-size: 100%; } + &__content { + display: flex; + flex-direction: column; + align-items: center; + width: var(--ti-mobile-exception-content-width, 234px); + } + + &__image { + width: var(--ti-mobile-exception-image-width, 200px); + } + &__content-nodata { background-image: url(../images/nodata.png); } @@ -58,14 +69,17 @@ } &__content-message { + margin-top: 12px; + button { - width: 160px; - margin-top: 32px; + min-width: var(--ti-mobile-exception-button-width, 136px); + height: var(--ti-mobile-exception-button-height, 42px); + margin-top: 24px; } .main-message { - color: var(--ti-mobile-exception-main-message-color, #666); - font-size: var(--ti-mobile-exception-main-message-font-size, 14px); + color: var(--ti-mobile-exception-main-message-color, #999); + font-size: var(--ti-mobile-exception-main-message-font-size, 13px); line-height: 1.5; } diff --git a/src/exception/vars.less b/src/exception/vars.less index 61368f6..e01c75b 100644 --- a/src/exception/vars.less +++ b/src/exception/vars.less @@ -1,10 +1,14 @@ :root { - --ti-mobile-exception-bgcolor: var(--ti-mobile-base-color-light, #fff); - --ti-mobile-exception-view-size: 200px; - --ti-mobile-exception-main-message-color: var(--ti-mobile-base-color-secondary, #666); - --ti-mobile-exception-main-message-font-size: 14px; - --ti-mobile-exception-sub-message-color: var(--ti-mobile-base-color-placeholder, #999); - --ti-mobile-exception-sub-message-font-size: var(--ti-mobile-base-font-size, 12px); - --ti-mobile-exception-footer-color: var(--ti-mobile-base-color-placeholder, #999); - --ti-mobile-exception-footer-font-size: var(--ti-mobile-base-font-size, 12px); + --ti-mobile-exception-bg-color: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-exception-main-message-color: var(--ti-mobile-common-color-text-weaken-dark, #999); + --ti-mobile-exception-main-message-font-size: 13px; + --ti-mobile-exception-sub-message-color: var(--ti-mobile-common-color-text-weaken-dark, #999); + --ti-mobile-exception-sub-message-font-size: 12px; + --ti-mobile-exception-footer-color: var(--ti-mobile-common-color-text-weaken-dark, #999); + --ti-mobile-exception-footer-font-size: 12px; + --ti-mobile-exception-image-width: 200px; + --ti-mobile-exception-image-height: 100px; + --ti-mobile-exception-content-width: 234px; + --ti-mobile-exception-button-width: 136px; + --ti-mobile-exception-button-height: 42px; }