123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <u-transition
- :show="loading"
- :custom-style="{
- position: 'fixed',
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- backgroundColor: bgColor,
- display: 'flex',
- }"
- >
- <view class="u-loading-page">
- <view class="u-loading-page__warpper">
- <view class="u-loading-page__warpper__loading-icon">
- <image
- v-if="image"
- :src="image"
- class="u-loading-page__warpper__loading-icon__img"
- mode="widthFit"
- :style="{
- width: $u.addUnit(iconSize),
- height: $u.addUnit(iconSize)
- }"
- ></image>
- <u-loading-icon
- v-else
- :mode="loadingMode"
- :size="$u.addUnit(iconSize)"
- :color="loadingColor"
- ></u-loading-icon>
- </view>
- <slot>
- <text
- class="u-loading-page__warpper__text"
- :style="{
- fontSize: $u.addUnit(fontSize),
- color: color,
- }"
- >{{ loadingText }}</text
- >
- </slot>
- </view>
- </view>
- </u-transition>
- </template>
- <script>
- import props from "./props.js";
- export default {
- name: "u-loading-page",
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {};
- },
- methods: {},
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $text-color: rgb(200, 200, 200) !default;
- $text-size: 19px !default;
- $u-loading-icon-margin-bottom: 10px !default;
- .u-loading-page {
- @include flex(column);
- flex: 1;
- align-items: center;
- justify-content: center;
- &__warpper {
- margin-top: -150px;
- justify-content: center;
- align-items: center;
-
- color: $text-color;
- font-size: $text-size;
-
- @include flex(column);
- &__loading-icon {
- margin-bottom: $u-loading-icon-margin-bottom;
- &__img {
- width: 40px;
- height: 40px;
- }
- }
- &__text {
- font-size: $text-size;
- color: $text-color;
- }
- }
- }
- </style>
|