Commit 66f002e3 authored by zhanglw's avatar zhanglw

加载蒙版

parent 6b57c52a
ENV = 'development'
# 接口地址
VUE_APP_BASE_API = 'http://192.168.3.23:7001'
VUE_APP_WS_API = 'ws://192.168.3.23:7001'
#VUE_APP_BASE_API = 'http://192.168.3.23:7001'
#VUE_APP_WS_API = 'ws://192.168.3.23:7001'
#VUE_APP_BASE_API = 'http://60.217.78.224:7001'
#VUE_APP_WS_API = 'ws://60.217.78.224:7001'
VUE_APP_BASE_API = 'http://60.217.78.224:7001'
VUE_APP_WS_API = 'ws://60.217.78.224:7001'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true
import Vue from 'vue'
import loadingCom from './index.vue'
const LoadingConstructor = Vue.extend(loadingCom)
const instance = new LoadingConstructor({
el: document.createElement('div')
})
instance.show = false
const loading = {
show() {
instance.show = true
document.body.appendChild(instance.$el)
},
hide() {
instance.show = false
}
}
export default {
install() {
if (!Vue.$showLoading) {
Vue.$showLoading = loading
}
Vue.mixin({
created() {
this.$showLoading = Vue.$showLoading
}
})
}
}
<template>
<div v-show="show" class="mask">
<div class="loader-rainbow">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line" />
</div>
<div class="loader-line-wrap">
<div class="loader-line" />
</div>
<div class="loader-line-wrap">
<div class="loader-line" />
</div>
<div class="loader-line-wrap">
<div class="loader-line" />
</div>
<div class="loader-line-wrap">
<div class="loader-line" />
</div>
</div>
<div style="font-size: 32px;margin-top: 150px">Loading...</div>
</div>
</div>
</template>
<script>
export default {
name: 'Loading',
props: {
show: Boolean
},
data() {
return {}
}
}
</script>
<style scoped>
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
z-index: 1000;
}
.loader-rainbow {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.loader-inner {
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
@keyframes spin {
0%,
15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
......@@ -27,6 +27,10 @@ import router from './router/routers'
import './assets/icons' // icon
import './router/index' // permission control
// loading
import loading from '@/components/Loading/index.js'
Vue.use(loading)
Vue.use(checkPer)
Vue.use(permission)
Vue.use(dict)
......
......@@ -10,7 +10,8 @@
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div v-show="loading" style="width: 88%;height:66vh;padding-left: 9%;" />
<div v-show="!loading" style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
......@@ -156,6 +157,7 @@ export default {
return {
defaultImgProduct: default_product,
imgSrcStart: process.env.VUE_APP_BASE_API,
loading: false,
carouseIndex: 0,
projectObj: {
productId: null,
......@@ -195,6 +197,8 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.loading = true
this.$showLoading.show()
HttpReq.webClientApi.productDetails({
productId: this.$route.params.id
}).then((res) => {
......@@ -206,6 +210,8 @@ export default {
this.projectObj.productFeatureList = this.projectObj.productFeature.split(';')
}
document.title = this.projectObj.productName
this.loading = false
this.$showLoading.hide()
})
})
},
......@@ -242,6 +248,7 @@ export default {
background-color: #1961c5;
opacity: 0.2;
}
.touch {
cursor:pointer;
}
......@@ -592,3 +599,4 @@ export default {
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment