173 lines
3.6 KiB
Vue
173 lines
3.6 KiB
Vue
<template>
|
||
<OutMask :bg="'loading'">
|
||
<div class="loadContent">
|
||
<div class="imgBox">
|
||
<div class="left" :class="type" :style="{ width: imgWidth }">
|
||
<!-- <img src="../assets/mobile/loading_line.png" alt="" /> -->
|
||
</div>
|
||
|
||
<div class="right" :class="type" :style="{ width: imgWidth }">
|
||
<!-- <img src="../assets/mobile/loading_line.png" alt="" /> -->
|
||
</div>
|
||
<img
|
||
class="load_img"
|
||
:class="type"
|
||
src="@/assets/mobile/loading.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<p class="loadText">{{ loading }} %</p>
|
||
</div>
|
||
</OutMask>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
components: {
|
||
OutMask: () => import("./outMask.vue"),
|
||
},
|
||
props: {
|
||
bg: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
loading: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
content: "",
|
||
imgWidth: 0,
|
||
title: "",
|
||
};
|
||
},
|
||
watch: {
|
||
loading: {
|
||
handler(val, oldName) {
|
||
if (this.type === "pc") {
|
||
// this.imgWidth = ((val / 100) * 884) / 100 + "rem";
|
||
this.imgWidth = (val / 100) * 46 + "vw";
|
||
} else {
|
||
this.imgWidth = ((val / 100) * 310) / 100 + "rem";
|
||
}
|
||
},
|
||
// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
console.log(this.loading);
|
||
// this.imgWidth = (this.loading / 100) * 884 + "px";
|
||
},
|
||
methods: {
|
||
closeArgument() {
|
||
this.$emit("closeArgument");
|
||
},
|
||
// loadNumber() {
|
||
// this.intervalId = setInterval(() => {
|
||
// if (this.percent > this.loading) {
|
||
// this.loading += 1;
|
||
// console.log(this.loading);
|
||
// } else {
|
||
// window.clearInterval(this.intervalId);
|
||
// this.intervalId = null;
|
||
// setTimeout(() => {
|
||
// // this.showloading = false;
|
||
// }, 20);
|
||
// }
|
||
// }, 10);
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.loadContent {
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-self: center;
|
||
flex-direction: column;
|
||
.imgBox {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
|
||
.left,
|
||
.right {
|
||
position: absolute;
|
||
width: 88px;
|
||
height: auto;
|
||
bottom: 20px;
|
||
height: 3px;
|
||
background-image: linear-gradient(to left, #d89c85, #f4d1bf);
|
||
&.pc {
|
||
bottom: 12px;
|
||
img {
|
||
height: 100%;
|
||
}
|
||
}
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 46px;
|
||
height: 44px;
|
||
background: url("@/assets/mobile/load_star.png");
|
||
background-size: contain;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
left: 0;
|
||
transform: translate(-48%, -50%);
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
// height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.left {
|
||
left: 0;
|
||
// transform: rotate(180deg);
|
||
background-image: linear-gradient(to right, #d89c85, #f4d1bf);
|
||
&::after {
|
||
right: 0;
|
||
left: auto;
|
||
transform: translate(45%, -50%);
|
||
}
|
||
}
|
||
|
||
.right {
|
||
right: 0;
|
||
}
|
||
}
|
||
.load_img {
|
||
width: 136px;
|
||
// width: 135px;
|
||
&.pc {
|
||
width: 154px;
|
||
// width: 153px;
|
||
}
|
||
}
|
||
|
||
.loadText {
|
||
font-size: 35px;
|
||
text-align: center;
|
||
color: #eeccae;
|
||
}
|
||
}
|
||
</style>
|