123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <view>
- <u-overlay :show="ishow">
- <view class="dialog">
- <view class="dialog-top">
- <view class="sheild">
- <image class="sheild-img" src="../static/images/home/sheild.png" mode="widthFix"></image>
- </view>
- <view class="star">
- <image class="star-img" src="../static/images/home/stars.png" mode="widthFix"></image>
- </view>
- <view class="yellow-circle">
- </view>
- <view class="dialog-title">
- <text>账号正在审核</text>
- </view>
- </view>
- <view class="dialog-bottom">
- <text class="mt">待城管部门审核完毕</text>
- <text>即可正常使用企业功能</text>
- <u-button class="dialog-button" @click="ishow = false"
- color="linear-gradient(to top, #F59A02, #FFD334 )" shape="circle" type="warning" text="">
- 我知道了
- </u-button>
- </view>
- </view>
- </u-overlay>
- </view>
- </template>
- <script>
- export default {
- name: 'HomeHint',
- props: {
- show: {
- type: Boolean,
- default: "",
- }
- },
- data() {
- return {
- ishow: false
- }
- },
- watch: {
- show: {
- handler(value) {
- this.ishow = value;
- },
- immediate: true, //设置为 true 时,第一次进入页面时即监听
- deep: true, // 深度监听父组件传过来对象变化
- }
- },
- }
- </script>
- <style>
- .dialog {
- position: fixed;
- width: 80%;
- height: 462rpx;
- padding: 0 0 20rpx 0;
- background: rgba(185, 196, 201, 0.85);
- border: 2rpx solid #77A8FF;
- box-shadow: 0rpx 0rpx 24rpx 6rpx rgba(109, 160, 251, 0.6);
- border-radius: 28rpx;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .sheild {
- width: 197rpx;
- height: 197rpx;
- background: #FFFCF6;
- box-shadow: 0rpx 9rpx 7rpx 0rpx rgba(24, 51, 129, 0.14);
- border-radius: 50%;
- position: absolute;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .sheild-img {
- position: absolute;
- width: 120rpx;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .star {
- position: absolute;
- width: 450rpx;
- left: 50%;
- top: 15%;
- transform: translate(-50%, -50%);
- }
- .star-img {
- width: 450rpx;
- }
- .dialog-top {
- position: relative;
- height: 220rpx;
- width: 100%;
- border-bottom: 1rpx solid #77A8FF;
- border-top-left-radius: 28rpx;
- border-top-right-radius: 28rpx;
- border-bottom-left-radius: 48%;
- border-bottom-right-radius: 48%;
- background-color: #D3E0FF;
- }
- .yellow-circle {
- width: 31rpx;
- height: 31rpx;
- background: linear-gradient(0deg, #EFC20D 0%, #EBCC12 100%);
- border-radius: 50%;
- opacity: 0.6;
- position: absolute;
- top: 20%;
- left: 70%;
- }
- .dialog-title {
- text-align: center;
- position: absolute;
- bottom: 15%;
- left: 50%;
- transform: translate(-50%);
- font-weight: bold;
- color: #2F4173;
- font-size: 30rpx;
- }
- .mt {
- margin-top: 26rpx;
- }
- .dialog-bottom {
- /* width: 542rpx; */
- /* height: 200rpx; */
- /* position: absolute; */
- /* bottom: 15rpx; */
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 28rpx;
- font-weight: bold;
- color: #485B93;
- line-height: 41rpx;
- }
- .dialog-button {
- width: 238rpx;
- height: 85rpx;
- margin-top: 35rpx;
- font-size: 28rpx;
- font-weight: bold;
- }
- </style>
|