Vue + Uniapp ，Loading+logo 的加载等待透明层效果

uniapp内容：

                <view class="loader-wrapper loaddata" v-if="isShowLoading">
                    <view class="loader loaddata">
                        <image style="width: 64px;height: 64px;" class="logo-loading tn-text-shadow-aquablue loaddata" 
                        src="/static/images/home/logo.png" mode="aspectFill"></image>
                    </view>
                    <view class="loading-text" >
                      <text style="font-size: 20px;color: #fff;">加载中...</text>
                    </view>
                </view>

 或 Vue 3

<div class="loader-wrapper loaddata" v-if="spinning">
                <div class="loader loaddata">
                    <img style="width: 64px; height: 64px"
                        class="logo-loading loaddata"
                        src="/public/img/logo.png">
                </div>
                <div class="loading-text">
                    <span style="font-size: 20px; color: #fff">加载中...</span>
                </div>
            </div>

 

 

 

样式：

<style lang="scss" scoped>

@-webkit-keyframes img-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
}
}
@keyframes img-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
}
@-webkit-keyframes spin-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(0deg);
}
}
@keyframes spin-reverse-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
}
.loader-wrapper.loaddata {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8); /* 背景颜色为黑色，透明度为50% */
  z-index: 1000; /* 确保遮层在其他内容之上 */
  top:0;
}
.loader.loaddata {
  display: flex;
  position: relative;
  left: 50%;
  top: 40%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4B98FE;
  -webkit-animation: spin-loaddata 1.7s linear infinite;
          animation: spin-loaddata 1.7s linear infinite;
  z-index: 11;
}
.loader.loaddata:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FFAC00;
  -webkit-animation: spin-reverse-loaddata 5.6s linear infinite;
          animation: spin-reverse-loaddata 5.6s linear infinite;
}
.loader.loaddata:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #00D05E;
  -webkit-animation: spin-loaddata 2.3s linear infinite;
          animation: spin-loaddata 2.3s linear infinite;
}
.logo-loading.loaddata {
  font-size: 120rpx;
  color: #01BEFF;
  margin: auto;
  align-items: center;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  -webkit-animation: img-loaddata 1.7s linear infinite;
          animation: img-loaddata 1.7s linear infinite;
}

.loading-text{
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    color: #c8c8c8;
    font-size: 19px;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 40%;
}
 
 
 
.tn-text-shadow-aquablue {
    text-shadow: 6rpx 6rpx 8rpx #D7DAFF;
}    
</style>