修改官网，设置响应式 支持多端
This commit is contained in:
lVAL
parent
5b875e311a
commit
1b75e086e6
104
package-lock.json
generated
104
package-lock.json
generated
@ -1120,6 +1120,61 @@
|
|||||||
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
|
"integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@nuxt/opencollective": {
|
||||||
|
"version": "0.3.2",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/@nuxt/opencollective/download/@nuxt/opencollective-0.3.2.tgz",
|
||||||
|
"integrity": "sha1-g8twzbK6xfrW+Mk1KeexEYfUnAI=",
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"consola": "^2.15.0",
|
||||||
|
"node-fetch": "^2.6.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792302448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591686984650&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
|
||||||
|
"integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
|
||||||
|
},
|
||||||
|
"has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s="
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@soda/friendly-errors-webpack-plugin": {
|
"@soda/friendly-errors-webpack-plugin": {
|
||||||
"version": "1.7.1",
|
"version": "1.7.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
|
||||||
@ -2865,6 +2920,23 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/boolbase/download/boolbase-1.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/boolbase/download/boolbase-1.0.0.tgz",
|
||||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
||||||
},
|
},
|
||||||
|
"bootstrap": {
|
||||||
|
"version": "4.5.3",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/bootstrap/download/bootstrap-4.5.3.tgz",
|
||||||
|
"integrity": "sha1-xqcrNVqvMjkgvoACRqbk7zCZf+Y="
|
||||||
|
},
|
||||||
|
"bootstrap-vue": {
|
||||||
|
"version": "2.21.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/bootstrap-vue/download/bootstrap-vue-2.21.1.tgz",
|
||||||
|
"integrity": "sha1-INPO2WtzWRfYvnG3dxfu50u0DG8=",
|
||||||
|
"requires": {
|
||||||
|
"@nuxt/opencollective": "^0.3.2",
|
||||||
|
"bootstrap": ">=4.5.3 <5.0.0",
|
||||||
|
"popper.js": "^1.16.1",
|
||||||
|
"portal-vue": "^2.1.7",
|
||||||
|
"vue-functional-data-merge": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
|
||||||
@ -3733,6 +3805,11 @@
|
|||||||
"integrity": "sha1-izIIk1kwjRERFdgcrT/Oq4iPl7w=",
|
"integrity": "sha1-izIIk1kwjRERFdgcrT/Oq4iPl7w=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"consola": {
|
||||||
|
"version": "2.15.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/consola/download/consola-2.15.0.tgz?cache=0&sync_timestamp=1596625700864&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsola%2Fdownload%2Fconsola-2.15.0.tgz",
|
||||||
|
"integrity": "sha1-QPxO76TS+O8uKAYUfwVuogf8wOk="
|
||||||
|
},
|
||||||
"console-browserify": {
|
"console-browserify": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/console-browserify/download/console-browserify-1.2.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/console-browserify/download/console-browserify-1.2.0.tgz",
|
||||||
@ -7267,6 +7344,11 @@
|
|||||||
"type-check": "~0.3.2"
|
"type-check": "~0.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"lib-flexible": {
|
||||||
|
"version": "0.3.2",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/lib-flexible/download/lib-flexible-0.3.2.tgz",
|
||||||
|
"integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
|
||||||
|
},
|
||||||
"lines-and-columns": {
|
"lines-and-columns": {
|
||||||
"version": "1.1.6",
|
"version": "1.1.6",
|
||||||
"resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
|
"resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
|
||||||
@ -7965,6 +8047,11 @@
|
|||||||
"lower-case": "^1.1.1"
|
"lower-case": "^1.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node-fetch": {
|
||||||
|
"version": "2.6.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/node-fetch/download/node-fetch-2.6.1.tgz?cache=0&sync_timestamp=1599309202591&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-fetch%2Fdownload%2Fnode-fetch-2.6.1.tgz",
|
||||||
|
"integrity": "sha1-BFvTI2Mfdu0uK1VXM5RBa2OaAFI="
|
||||||
|
},
|
||||||
"node-forge": {
|
"node-forge": {
|
||||||
"version": "0.10.0",
|
"version": "0.10.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz?cache=0&sync_timestamp=1599010757493&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-forge%2Fdownload%2Fnode-forge-0.10.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz?cache=0&sync_timestamp=1599010757493&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-forge%2Fdownload%2Fnode-forge-0.10.0.tgz",
|
||||||
@ -8844,6 +8931,16 @@
|
|||||||
"ts-pnp": "^1.1.6"
|
"ts-pnp": "^1.1.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"popper.js": {
|
||||||
|
"version": "1.16.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.1.tgz",
|
||||||
|
"integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs="
|
||||||
|
},
|
||||||
|
"portal-vue": {
|
||||||
|
"version": "2.1.7",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/portal-vue/download/portal-vue-2.1.7.tgz",
|
||||||
|
"integrity": "sha1-6ggGmyW2QMoIpbhvZ8YS8V9OStQ="
|
||||||
|
},
|
||||||
"portfinder": {
|
"portfinder": {
|
||||||
"version": "1.0.28",
|
"version": "1.0.28",
|
||||||
"resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596019946887&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
|
"resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz?cache=0&sync_timestamp=1596019946887&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.28.tgz",
|
||||||
@ -12379,7 +12476,7 @@
|
|||||||
},
|
},
|
||||||
"vue": {
|
"vue": {
|
||||||
"version": "2.6.12",
|
"version": "2.6.12",
|
||||||
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600441210971&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
|
||||||
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
|
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
|
||||||
},
|
},
|
||||||
"vue-clipboard2": {
|
"vue-clipboard2": {
|
||||||
@ -12416,6 +12513,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-functional-data-merge": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/vue-functional-data-merge/download/vue-functional-data-merge-3.1.0.tgz",
|
||||||
|
"integrity": "sha1-CKd5dYO381aAWH+KHVHXKaodxlc="
|
||||||
|
},
|
||||||
"vue-hot-reload-api": {
|
"vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
||||||
|
|||||||
@ -3,14 +3,17 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"dev": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
|
"bootstrap": "^4.5.3",
|
||||||
|
"bootstrap-vue": "^2.21.1",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"element-ui": "^2.13.2",
|
"element-ui": "^2.13.2",
|
||||||
|
"lib-flexible": "^0.3.2",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"script-ext-html-webpack-plugin": "^2.1.4",
|
"script-ext-html-webpack-plugin": "^2.1.4",
|
||||||
"svg-sprite-loader": "^5.0.0",
|
"svg-sprite-loader": "^5.0.0",
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
body {
|
body {
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
@ -15,5 +15,6 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
font-size: 62.5%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -27,28 +27,28 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
a {
|
a {
|
||||||
margin: 0 15px;
|
margin: 0 1.5em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group {
|
.btn-group {
|
||||||
margin-top: 20px;
|
margin-top: 2em;
|
||||||
position: relproduct;
|
position: relproduct;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
.btn-rect {
|
.btn-rect {
|
||||||
padding: 0 30px;
|
padding: 0 3em;
|
||||||
min-width: 140px;
|
min-width: 14em;
|
||||||
height: 40px !important;
|
height: 4em !important;
|
||||||
line-height: 40px !important;
|
line-height: 4em !important;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #d1d1d1;
|
border: 0.1em solid #d1d1d1;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #111;
|
color: #111;
|
||||||
padding-left: 20px;
|
padding-left: 2em;
|
||||||
padding-right: 20px;
|
padding-right: 2em;
|
||||||
font-size: 16px;
|
font-size: 1.6em;
|
||||||
background: #efefef;
|
background: #efefef;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<div class="image-box">
|
<div class="image-box">
|
||||||
<div class="mask" />
|
<div class="mask" />
|
||||||
<picture>
|
<picture>
|
||||||
<el-image style="height: 100%;width: 100%" :src="source" />
|
<b-img style="height: 100%;width: 100%" :src="source" />
|
||||||
</picture>
|
</picture>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-box">
|
<div class="text-box">
|
||||||
@ -44,7 +44,7 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.card {
|
.card {
|
||||||
&:hover {
|
&:hover {
|
||||||
.el-image {
|
.b-img {
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
@ -85,9 +85,9 @@ export default {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
padding: 25px 30px;
|
padding: 2.5em 3em;
|
||||||
font-size: 20px;
|
font-size: 2em;
|
||||||
bottom: -50px;
|
bottom: -5em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -109,7 +109,7 @@ export default {
|
|||||||
.text {
|
.text {
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 1.7em;
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
@ -139,7 +139,7 @@ export default {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
float: left;
|
float: left;
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateX(5px);
|
transform: translateX(0.5em);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<div class="card" v-if="active">
|
<div class="card" v-if="active">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(el, i) in menus" :key="i" @click="onClick(el, i)">
|
<li v-for="(el, i) in menus" :key="i" @click="onClick(el, i)">
|
||||||
<i :class="el.icon" style="margin-right: 10px;font-size: 18px" />
|
<i :class="el.icon" style="margin-right: 1em;font-size: 1.8em" />
|
||||||
<span>{{ el.name }}</span>
|
<span>{{ el.name }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -60,18 +60,18 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 40px;
|
height: 4em;
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
i {
|
i {
|
||||||
font-size: 26px;
|
font-size: 2.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
font-size: 14px;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,20 +82,20 @@ export default {
|
|||||||
ul {
|
ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transform: translateY(59px);
|
transform: translateY(6em);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
min-width: 180px;
|
min-width: 18em;
|
||||||
width: auto;
|
width: auto;
|
||||||
li {
|
li {
|
||||||
border: 1px solid #d4d4d4;
|
border: 0.1em solid #d4d4d4;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
height: 42px;
|
height: 4.2em;
|
||||||
line-height: 42px;
|
line-height: 4.2em;
|
||||||
padding-left: 26px;
|
padding-left: 2.6em;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #777;
|
color: #777;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
11
src/components/eLoading/index.js
Normal file
11
src/components/eLoading/index.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import directive from './src/directive';
|
||||||
|
import service from './src/index';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(Vue) {
|
||||||
|
Vue.use(directive);
|
||||||
|
Vue.prototype.$loading = service;
|
||||||
|
},
|
||||||
|
directive,
|
||||||
|
service
|
||||||
|
};
|
||||||
133
src/components/eLoading/src/directive.js
Normal file
133
src/components/eLoading/src/directive.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import Loading from './loading.vue';
|
||||||
|
import { addClass, removeClass, getStyle } from '../utils/dom';
|
||||||
|
import { PopupManager } from '../utils/popup';
|
||||||
|
import afterLeave from '../utils/after-leave';
|
||||||
|
const Mask = Vue.extend(Loading);
|
||||||
|
|
||||||
|
const loadingDirective = {};
|
||||||
|
loadingDirective.install = Vue => {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
|
const toggleLoading = (el, binding) => {
|
||||||
|
if (binding.value) {
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
if (binding.modifiers.fullscreen) {
|
||||||
|
el.originalPosition = getStyle(document.body, 'position');
|
||||||
|
el.originalOverflow = getStyle(document.body, 'overflow');
|
||||||
|
el.maskStyle.zIndex = PopupManager.nextZIndex();
|
||||||
|
|
||||||
|
addClass(el.mask, 'is-fullscreen');
|
||||||
|
insertDom(document.body, el, binding);
|
||||||
|
} else {
|
||||||
|
removeClass(el.mask, 'is-fullscreen');
|
||||||
|
|
||||||
|
if (binding.modifiers.body) {
|
||||||
|
el.originalPosition = getStyle(document.body, 'position');
|
||||||
|
|
||||||
|
['top', 'left'].forEach(property => {
|
||||||
|
const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
|
||||||
|
el.maskStyle[property] = el.getBoundingClientRect()[property] +
|
||||||
|
document.body[scroll] +
|
||||||
|
document.documentElement[scroll] -
|
||||||
|
parseInt(getStyle(document.body, `margin-${ property }`), 10) +
|
||||||
|
'px';
|
||||||
|
});
|
||||||
|
['height', 'width'].forEach(property => {
|
||||||
|
el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
insertDom(document.body, el, binding);
|
||||||
|
} else {
|
||||||
|
el.originalPosition = getStyle(el, 'position');
|
||||||
|
insertDom(el, el, binding);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
afterLeave(el.instance, _ => {
|
||||||
|
if (!el.instance.hiding) return;
|
||||||
|
el.domVisible = false;
|
||||||
|
const target = binding.modifiers.fullscreen || binding.modifiers.body
|
||||||
|
? document.body
|
||||||
|
: el;
|
||||||
|
removeClass(target, 'el-loading-parent--relative');
|
||||||
|
removeClass(target, 'el-loading-parent--hidden');
|
||||||
|
el.instance.hiding = false;
|
||||||
|
}, 300, true);
|
||||||
|
el.instance.visible = false;
|
||||||
|
el.instance.hiding = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const insertDom = (parent, el, binding) => {
|
||||||
|
if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
|
||||||
|
Object.keys(el.maskStyle).forEach(property => {
|
||||||
|
el.mask.style[property] = el.maskStyle[property];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
|
||||||
|
addClass(parent, 'el-loading-parent--relative');
|
||||||
|
}
|
||||||
|
if (binding.modifiers.fullscreen && binding.modifiers.lock) {
|
||||||
|
addClass(parent, 'el-loading-parent--hidden');
|
||||||
|
}
|
||||||
|
el.domVisible = true;
|
||||||
|
|
||||||
|
parent.appendChild(el.mask);
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
if (el.instance.hiding) {
|
||||||
|
el.instance.$emit('after-leave');
|
||||||
|
} else {
|
||||||
|
el.instance.visible = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
el.domInserted = true;
|
||||||
|
} else if (el.domVisible && el.instance.hiding === true) {
|
||||||
|
el.instance.visible = true;
|
||||||
|
el.instance.hiding = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Vue.directive('loading', {
|
||||||
|
bind: function(el, binding, vnode) {
|
||||||
|
const textExr = el.getAttribute('element-loading-text');
|
||||||
|
const spinnerExr = el.getAttribute('element-loading-spinner');
|
||||||
|
const backgroundExr = el.getAttribute('element-loading-background');
|
||||||
|
const customClassExr = el.getAttribute('element-loading-custom-class');
|
||||||
|
const vm = vnode.context;
|
||||||
|
const mask = new Mask({
|
||||||
|
el: document.createElement('div'),
|
||||||
|
data: {
|
||||||
|
text: vm && vm[textExr] || textExr,
|
||||||
|
spinner: vm && vm[spinnerExr] || spinnerExr,
|
||||||
|
background: vm && vm[backgroundExr] || backgroundExr,
|
||||||
|
customClass: vm && vm[customClassExr] || customClassExr,
|
||||||
|
fullscreen: !!binding.modifiers.fullscreen
|
||||||
|
}
|
||||||
|
});
|
||||||
|
el.instance = mask;
|
||||||
|
el.mask = mask.$el;
|
||||||
|
el.maskStyle = {};
|
||||||
|
|
||||||
|
binding.value && toggleLoading(el, binding);
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function(el, binding) {
|
||||||
|
el.instance.setText(el.getAttribute('element-loading-text'));
|
||||||
|
if (binding.oldValue !== binding.value) {
|
||||||
|
toggleLoading(el, binding);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
unbind: function(el, binding) {
|
||||||
|
if (el.domInserted) {
|
||||||
|
el.mask &&
|
||||||
|
el.mask.parentNode &&
|
||||||
|
el.mask.parentNode.removeChild(el.mask);
|
||||||
|
toggleLoading(el, { value: false, modifiers: binding.modifiers });
|
||||||
|
}
|
||||||
|
el.instance && el.instance.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default loadingDirective;
|
||||||
106
src/components/eLoading/src/index.js
Normal file
106
src/components/eLoading/src/index.js
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import loadingVue from './loading.vue';
|
||||||
|
import { addClass, removeClass, getStyle } from '../utils/dom';
|
||||||
|
import { PopupManager } from '../utils/popup';
|
||||||
|
import afterLeave from '../utils/after-leave';
|
||||||
|
import merge from '../utils/merge';
|
||||||
|
|
||||||
|
const LoadingConstructor = Vue.extend(loadingVue);
|
||||||
|
|
||||||
|
const defaults = {
|
||||||
|
text: null,
|
||||||
|
fullscreen: true,
|
||||||
|
body: false,
|
||||||
|
lock: false,
|
||||||
|
customClass: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
let fullscreenLoading;
|
||||||
|
|
||||||
|
LoadingConstructor.prototype.originalPosition = '';
|
||||||
|
LoadingConstructor.prototype.originalOverflow = '';
|
||||||
|
|
||||||
|
LoadingConstructor.prototype.close = function() {
|
||||||
|
if (this.fullscreen) {
|
||||||
|
fullscreenLoading = undefined;
|
||||||
|
}
|
||||||
|
afterLeave(this, _ => {
|
||||||
|
const target = this.fullscreen || this.body
|
||||||
|
? document.body
|
||||||
|
: this.target;
|
||||||
|
removeClass(target, 'el-loading-parent--relative');
|
||||||
|
removeClass(target, 'el-loading-parent--hidden');
|
||||||
|
if (this.$el && this.$el.parentNode) {
|
||||||
|
this.$el.parentNode.removeChild(this.$el);
|
||||||
|
}
|
||||||
|
this.$destroy();
|
||||||
|
}, 300);
|
||||||
|
this.visible = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const addStyle = (options, parent, instance) => {
|
||||||
|
let maskStyle = {};
|
||||||
|
if (options.fullscreen) {
|
||||||
|
instance.originalPosition = getStyle(document.body, 'position');
|
||||||
|
instance.originalOverflow = getStyle(document.body, 'overflow');
|
||||||
|
maskStyle.zIndex = PopupManager.nextZIndex();
|
||||||
|
} else if (options.body) {
|
||||||
|
instance.originalPosition = getStyle(document.body, 'position');
|
||||||
|
['top', 'left'].forEach(property => {
|
||||||
|
let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
|
||||||
|
maskStyle[property] = options.target.getBoundingClientRect()[property] +
|
||||||
|
document.body[scroll] +
|
||||||
|
document.documentElement[scroll] +
|
||||||
|
'px';
|
||||||
|
});
|
||||||
|
['height', 'width'].forEach(property => {
|
||||||
|
maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
instance.originalPosition = getStyle(parent, 'position');
|
||||||
|
}
|
||||||
|
Object.keys(maskStyle).forEach(property => {
|
||||||
|
instance.$el.style[property] = maskStyle[property];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const Loading = (options = {}) => {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
|
options = merge({}, defaults, options);
|
||||||
|
if (typeof options.target === 'string') {
|
||||||
|
options.target = document.querySelector(options.target);
|
||||||
|
}
|
||||||
|
options.target = options.target || document.body;
|
||||||
|
if (options.target !== document.body) {
|
||||||
|
options.fullscreen = false;
|
||||||
|
} else {
|
||||||
|
options.body = true;
|
||||||
|
}
|
||||||
|
if (options.fullscreen && fullscreenLoading) {
|
||||||
|
return fullscreenLoading;
|
||||||
|
}
|
||||||
|
|
||||||
|
let parent = options.body ? document.body : options.target;
|
||||||
|
let instance = new LoadingConstructor({
|
||||||
|
el: document.createElement('div'),
|
||||||
|
data: options
|
||||||
|
});
|
||||||
|
|
||||||
|
addStyle(options, parent, instance);
|
||||||
|
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
|
||||||
|
addClass(parent, 'el-loading-parent--relative');
|
||||||
|
}
|
||||||
|
if (options.fullscreen && options.lock) {
|
||||||
|
addClass(parent, 'el-loading-parent--hidden');
|
||||||
|
}
|
||||||
|
parent.appendChild(instance.$el);
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
instance.visible = true;
|
||||||
|
});
|
||||||
|
if (options.fullscreen) {
|
||||||
|
fullscreenLoading = instance;
|
||||||
|
}
|
||||||
|
return instance;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Loading;
|
||||||
41
src/components/eLoading/src/loading.vue
Normal file
41
src/components/eLoading/src/loading.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="el-loading-fade" @after-leave="handleAfterLeave">
|
||||||
|
<div
|
||||||
|
v-show="visible"
|
||||||
|
class="el-loading-mask"
|
||||||
|
:style="{ backgroundColor: background || '' }"
|
||||||
|
:class="[customClass, { 'is-fullscreen': fullscreen }]">
|
||||||
|
<div class="el-loading-spinner">
|
||||||
|
<svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
|
||||||
|
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<i v-else :class="spinner"></i>
|
||||||
|
<p v-if="text" class="el-loading-text">{{ text }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
text: null,
|
||||||
|
spinner: null,
|
||||||
|
background: null,
|
||||||
|
fullscreen: true,
|
||||||
|
visible: false,
|
||||||
|
customClass: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleAfterLeave() {
|
||||||
|
this.$emit('after-leave');
|
||||||
|
},
|
||||||
|
setText(text) {
|
||||||
|
this.text = text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
27
src/components/eLoading/utils/after-leave.js
Normal file
27
src/components/eLoading/utils/after-leave.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/**
|
||||||
|
* Bind after-leave event for vue instance. Make sure after-leave is called in any browsers.
|
||||||
|
*
|
||||||
|
* @param {Vue} instance Vue instance.
|
||||||
|
* @param {Function} callback callback of after-leave event
|
||||||
|
* @param {Number} speed the speed of transition, default value is 300ms
|
||||||
|
* @param {Boolean} once weather bind after-leave once. default value is false.
|
||||||
|
*/
|
||||||
|
export default function(instance, callback, speed = 300, once = false) {
|
||||||
|
if (!instance || !callback) throw new Error('instance & callback is required');
|
||||||
|
let called = false;
|
||||||
|
const afterLeaveCallback = function() {
|
||||||
|
if (called) return;
|
||||||
|
called = true;
|
||||||
|
if (callback) {
|
||||||
|
callback.apply(null, arguments);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (once) {
|
||||||
|
instance.$once('after-leave', afterLeaveCallback);
|
||||||
|
} else {
|
||||||
|
instance.$on('after-leave', afterLeaveCallback);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
afterLeaveCallback();
|
||||||
|
}, speed + 100);
|
||||||
|
};
|
||||||
227
src/components/eLoading/utils/dom.js
Normal file
227
src/components/eLoading/utils/dom.js
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
/* istanbul ignore next */
|
||||||
|
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
const isServer = Vue.prototype.$isServer;
|
||||||
|
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
|
||||||
|
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
|
||||||
|
const ieVersion = isServer ? 0 : Number(document.documentMode);
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
const trim = function(string) {
|
||||||
|
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||||
|
};
|
||||||
|
/* istanbul ignore next */
|
||||||
|
const camelCase = function(name) {
|
||||||
|
return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
|
||||||
|
return offset ? letter.toUpperCase() : letter;
|
||||||
|
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export const on = (function() {
|
||||||
|
if (!isServer && document.addEventListener) {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event && handler) {
|
||||||
|
element.addEventListener(event, handler, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event && handler) {
|
||||||
|
element.attachEvent('on' + event, handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export const off = (function() {
|
||||||
|
if (!isServer && document.removeEventListener) {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event) {
|
||||||
|
element.removeEventListener(event, handler, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return function(element, event, handler) {
|
||||||
|
if (element && event) {
|
||||||
|
element.detachEvent('on' + event, handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export const once = function(el, event, fn) {
|
||||||
|
var listener = function() {
|
||||||
|
if (fn) {
|
||||||
|
fn.apply(this, arguments);
|
||||||
|
}
|
||||||
|
off(el, event, listener);
|
||||||
|
};
|
||||||
|
on(el, event, listener);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function hasClass(el, cls) {
|
||||||
|
if (!el || !cls) return false;
|
||||||
|
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||||
|
if (el.classList) {
|
||||||
|
return el.classList.contains(cls);
|
||||||
|
} else {
|
||||||
|
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function addClass(el, cls) {
|
||||||
|
if (!el) return;
|
||||||
|
var curClass = el.className;
|
||||||
|
var classes = (cls || '').split(' ');
|
||||||
|
|
||||||
|
for (var i = 0, j = classes.length; i < j; i++) {
|
||||||
|
var clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.add(clsName);
|
||||||
|
} else if (!hasClass(el, clsName)) {
|
||||||
|
curClass += ' ' + clsName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = curClass;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function removeClass(el, cls) {
|
||||||
|
if (!el || !cls) return;
|
||||||
|
var classes = cls.split(' ');
|
||||||
|
var curClass = ' ' + el.className + ' ';
|
||||||
|
|
||||||
|
for (var i = 0, j = classes.length; i < j; i++) {
|
||||||
|
var clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.remove(clsName);
|
||||||
|
} else if (hasClass(el, clsName)) {
|
||||||
|
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = trim(curClass);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export const getStyle = ieVersion < 9 ? function(element, styleName) {
|
||||||
|
if (isServer) return;
|
||||||
|
if (!element || !styleName) return null;
|
||||||
|
styleName = camelCase(styleName);
|
||||||
|
if (styleName === 'float') {
|
||||||
|
styleName = 'styleFloat';
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
switch (styleName) {
|
||||||
|
case 'opacity':
|
||||||
|
try {
|
||||||
|
return element.filters.item('alpha').opacity / 100;
|
||||||
|
} catch (e) {
|
||||||
|
return 1.0;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
return element.style[styleName];
|
||||||
|
}
|
||||||
|
} : function(element, styleName) {
|
||||||
|
if (isServer) return;
|
||||||
|
if (!element || !styleName) return null;
|
||||||
|
styleName = camelCase(styleName);
|
||||||
|
if (styleName === 'float') {
|
||||||
|
styleName = 'cssFloat';
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
var computed = document.defaultView.getComputedStyle(element, '');
|
||||||
|
return element.style[styleName] || computed ? computed[styleName] : null;
|
||||||
|
} catch (e) {
|
||||||
|
return element.style[styleName];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function setStyle(element, styleName, value) {
|
||||||
|
if (!element || !styleName) return;
|
||||||
|
|
||||||
|
if (typeof styleName === 'object') {
|
||||||
|
for (var prop in styleName) {
|
||||||
|
if (styleName.hasOwnProperty(prop)) {
|
||||||
|
setStyle(element, prop, styleName[prop]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styleName = camelCase(styleName);
|
||||||
|
if (styleName === 'opacity' && ieVersion < 9) {
|
||||||
|
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
|
||||||
|
} else {
|
||||||
|
element.style[styleName] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isScroll = (el, vertical) => {
|
||||||
|
if (isServer) return;
|
||||||
|
|
||||||
|
const determinedDirection = vertical !== null || vertical !== undefined;
|
||||||
|
const overflow = determinedDirection
|
||||||
|
? vertical
|
||||||
|
? getStyle(el, 'overflow-y')
|
||||||
|
: getStyle(el, 'overflow-x')
|
||||||
|
: getStyle(el, 'overflow');
|
||||||
|
|
||||||
|
return overflow.match(/(scroll|auto)/);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getScrollContainer = (el, vertical) => {
|
||||||
|
if (isServer) return;
|
||||||
|
|
||||||
|
let parent = el;
|
||||||
|
while (parent) {
|
||||||
|
if ([window, document, document.documentElement].includes(parent)) {
|
||||||
|
return window;
|
||||||
|
}
|
||||||
|
if (isScroll(parent, vertical)) {
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
parent = parent.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
return parent;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isInContainer = (el, container) => {
|
||||||
|
if (isServer || !el || !container) return false;
|
||||||
|
|
||||||
|
const elRect = el.getBoundingClientRect();
|
||||||
|
let containerRect;
|
||||||
|
|
||||||
|
if ([window, document, document.documentElement, null, undefined].includes(container)) {
|
||||||
|
containerRect = {
|
||||||
|
top: 0,
|
||||||
|
right: window.innerWidth,
|
||||||
|
bottom: window.innerHeight,
|
||||||
|
left: 0
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
containerRect = container.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
return elRect.top < containerRect.bottom &&
|
||||||
|
elRect.bottom > containerRect.top &&
|
||||||
|
elRect.right > containerRect.left &&
|
||||||
|
elRect.left < containerRect.right;
|
||||||
|
};
|
||||||
15
src/components/eLoading/utils/merge.js
Normal file
15
src/components/eLoading/utils/merge.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export default function(target) {
|
||||||
|
for (let i = 1, j = arguments.length; i < j; i++) {
|
||||||
|
let source = arguments[i] || {};
|
||||||
|
for (let prop in source) {
|
||||||
|
if (source.hasOwnProperty(prop)) {
|
||||||
|
let value = source[prop];
|
||||||
|
if (value !== undefined) {
|
||||||
|
target[prop] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
1276
src/components/eLoading/utils/popper.js
Normal file
1276
src/components/eLoading/utils/popper.js
Normal file
File diff suppressed because it is too large
Load Diff
218
src/components/eLoading/utils/popup/index.js
Normal file
218
src/components/eLoading/utils/popup/index.js
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import merge from 'element-ui/src/utils/merge';
|
||||||
|
import PopupManager from 'element-ui/src/utils/popup/popup-manager';
|
||||||
|
import getScrollBarWidth from '../scrollbar-width';
|
||||||
|
import { getStyle, addClass, removeClass, hasClass } from '../dom';
|
||||||
|
|
||||||
|
let idSeed = 1;
|
||||||
|
|
||||||
|
let scrollBarWidth;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
openDelay: {},
|
||||||
|
closeDelay: {},
|
||||||
|
zIndex: {},
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
modalFade: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
modalClass: {},
|
||||||
|
modalAppendToBody: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
lockScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
closeOnPressEscape: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
closeOnClickModal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeMount() {
|
||||||
|
this._popupId = 'popup-' + idSeed++;
|
||||||
|
PopupManager.register(this._popupId, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
PopupManager.deregister(this._popupId);
|
||||||
|
PopupManager.closeModal(this._popupId);
|
||||||
|
|
||||||
|
this.restoreBodyStyle();
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
opened: false,
|
||||||
|
bodyPaddingRight: null,
|
||||||
|
computedBodyPaddingRight: 0,
|
||||||
|
withoutHiddenClass: true,
|
||||||
|
rendered: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
visible(val) {
|
||||||
|
if (val) {
|
||||||
|
if (this._opening) return;
|
||||||
|
if (!this.rendered) {
|
||||||
|
this.rendered = true;
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
this.open();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
open(options) {
|
||||||
|
if (!this.rendered) {
|
||||||
|
this.rendered = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = merge({}, this.$props || this, options);
|
||||||
|
|
||||||
|
if (this._closeTimer) {
|
||||||
|
clearTimeout(this._closeTimer);
|
||||||
|
this._closeTimer = null;
|
||||||
|
}
|
||||||
|
clearTimeout(this._openTimer);
|
||||||
|
|
||||||
|
const openDelay = Number(props.openDelay);
|
||||||
|
if (openDelay > 0) {
|
||||||
|
this._openTimer = setTimeout(() => {
|
||||||
|
this._openTimer = null;
|
||||||
|
this.doOpen(props);
|
||||||
|
}, openDelay);
|
||||||
|
} else {
|
||||||
|
this.doOpen(props);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
doOpen(props) {
|
||||||
|
if (this.$isServer) return;
|
||||||
|
if (this.willOpen && !this.willOpen()) return;
|
||||||
|
if (this.opened) return;
|
||||||
|
|
||||||
|
this._opening = true;
|
||||||
|
|
||||||
|
const dom = this.$el;
|
||||||
|
|
||||||
|
const modal = props.modal;
|
||||||
|
|
||||||
|
const zIndex = props.zIndex;
|
||||||
|
if (zIndex) {
|
||||||
|
PopupManager.zIndex = zIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modal) {
|
||||||
|
if (this._closing) {
|
||||||
|
PopupManager.closeModal(this._popupId);
|
||||||
|
this._closing = false;
|
||||||
|
}
|
||||||
|
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
|
||||||
|
if (props.lockScroll) {
|
||||||
|
this.withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden');
|
||||||
|
if (this.withoutHiddenClass) {
|
||||||
|
this.bodyPaddingRight = document.body.style.paddingRight;
|
||||||
|
this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);
|
||||||
|
}
|
||||||
|
scrollBarWidth = getScrollBarWidth();
|
||||||
|
let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
|
||||||
|
let bodyOverflowY = getStyle(document.body, 'overflowY');
|
||||||
|
if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
|
||||||
|
document.body.style.paddingRight = (this.computedBodyPaddingRight + scrollBarWidth)/10 + 'em';
|
||||||
|
}
|
||||||
|
addClass(document.body, 'el-popup-parent--hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (getComputedStyle(dom).position === 'static') {
|
||||||
|
dom.style.position = 'absolute';
|
||||||
|
}
|
||||||
|
|
||||||
|
dom.style.zIndex = PopupManager.nextZIndex();
|
||||||
|
this.opened = true;
|
||||||
|
|
||||||
|
this.onOpen && this.onOpen();
|
||||||
|
|
||||||
|
this.doAfterOpen();
|
||||||
|
},
|
||||||
|
|
||||||
|
doAfterOpen() {
|
||||||
|
this._opening = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
if (this.willClose && !this.willClose()) return;
|
||||||
|
|
||||||
|
if (this._openTimer !== null) {
|
||||||
|
clearTimeout(this._openTimer);
|
||||||
|
this._openTimer = null;
|
||||||
|
}
|
||||||
|
clearTimeout(this._closeTimer);
|
||||||
|
|
||||||
|
const closeDelay = Number(this.closeDelay);
|
||||||
|
|
||||||
|
if (closeDelay > 0) {
|
||||||
|
this._closeTimer = setTimeout(() => {
|
||||||
|
this._closeTimer = null;
|
||||||
|
this.doClose();
|
||||||
|
}, closeDelay);
|
||||||
|
} else {
|
||||||
|
this.doClose();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
doClose() {
|
||||||
|
this._closing = true;
|
||||||
|
|
||||||
|
this.onClose && this.onClose();
|
||||||
|
|
||||||
|
if (this.lockScroll) {
|
||||||
|
setTimeout(this.restoreBodyStyle, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.opened = false;
|
||||||
|
|
||||||
|
this.doAfterClose();
|
||||||
|
},
|
||||||
|
|
||||||
|
doAfterClose() {
|
||||||
|
PopupManager.closeModal(this._popupId);
|
||||||
|
this._closing = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
restoreBodyStyle() {
|
||||||
|
if (this.modal && this.withoutHiddenClass) {
|
||||||
|
document.body.style.paddingRight = this.bodyPaddingRight;
|
||||||
|
removeClass(document.body, 'el-popup-parent--hidden');
|
||||||
|
}
|
||||||
|
this.withoutHiddenClass = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
PopupManager
|
||||||
|
};
|
||||||
194
src/components/eLoading/utils/popup/popup-manager.js
Normal file
194
src/components/eLoading/utils/popup/popup-manager.js
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import { addClass, removeClass } from 'element-ui/src/utils/dom';
|
||||||
|
|
||||||
|
let hasModal = false;
|
||||||
|
let hasInitZIndex = false;
|
||||||
|
let zIndex;
|
||||||
|
|
||||||
|
const getModal = function() {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
|
let modalDom = PopupManager.modalDom;
|
||||||
|
if (modalDom) {
|
||||||
|
hasModal = true;
|
||||||
|
} else {
|
||||||
|
hasModal = false;
|
||||||
|
modalDom = document.createElement('div');
|
||||||
|
PopupManager.modalDom = modalDom;
|
||||||
|
|
||||||
|
modalDom.addEventListener('touchmove', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
modalDom.addEventListener('click', function() {
|
||||||
|
PopupManager.doOnModalClick && PopupManager.doOnModalClick();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return modalDom;
|
||||||
|
};
|
||||||
|
|
||||||
|
const instances = {};
|
||||||
|
|
||||||
|
const PopupManager = {
|
||||||
|
modalFade: true,
|
||||||
|
|
||||||
|
getInstance: function(id) {
|
||||||
|
return instances[id];
|
||||||
|
},
|
||||||
|
|
||||||
|
register: function(id, instance) {
|
||||||
|
if (id && instance) {
|
||||||
|
instances[id] = instance;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deregister: function(id) {
|
||||||
|
if (id) {
|
||||||
|
instances[id] = null;
|
||||||
|
delete instances[id];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
nextZIndex: function() {
|
||||||
|
return PopupManager.zIndex++;
|
||||||
|
},
|
||||||
|
|
||||||
|
modalStack: [],
|
||||||
|
|
||||||
|
doOnModalClick: function() {
|
||||||
|
const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||||||
|
if (!topItem) return;
|
||||||
|
|
||||||
|
const instance = PopupManager.getInstance(topItem.id);
|
||||||
|
if (instance && instance.closeOnClickModal) {
|
||||||
|
instance.close();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
openModal: function(id, zIndex, dom, modalClass, modalFade) {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
|
if (!id || zIndex === undefined) return;
|
||||||
|
this.modalFade = modalFade;
|
||||||
|
|
||||||
|
const modalStack = this.modalStack;
|
||||||
|
|
||||||
|
for (let i = 0, j = modalStack.length; i < j; i++) {
|
||||||
|
const item = modalStack[i];
|
||||||
|
if (item.id === id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalDom = getModal();
|
||||||
|
|
||||||
|
addClass(modalDom, 'v-modal');
|
||||||
|
if (this.modalFade && !hasModal) {
|
||||||
|
addClass(modalDom, 'v-modal-enter');
|
||||||
|
}
|
||||||
|
if (modalClass) {
|
||||||
|
let classArr = modalClass.trim().split(/\s+/);
|
||||||
|
classArr.forEach(item => addClass(modalDom, item));
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
removeClass(modalDom, 'v-modal-enter');
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||||||
|
dom.parentNode.appendChild(modalDom);
|
||||||
|
} else {
|
||||||
|
document.body.appendChild(modalDom);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (zIndex) {
|
||||||
|
modalDom.style.zIndex = zIndex;
|
||||||
|
}
|
||||||
|
modalDom.tabIndex = 0;
|
||||||
|
modalDom.style.display = '';
|
||||||
|
|
||||||
|
this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
|
||||||
|
},
|
||||||
|
|
||||||
|
closeModal: function(id) {
|
||||||
|
const modalStack = this.modalStack;
|
||||||
|
const modalDom = getModal();
|
||||||
|
|
||||||
|
if (modalStack.length > 0) {
|
||||||
|
const topItem = modalStack[modalStack.length - 1];
|
||||||
|
if (topItem.id === id) {
|
||||||
|
if (topItem.modalClass) {
|
||||||
|
let classArr = topItem.modalClass.trim().split(/\s+/);
|
||||||
|
classArr.forEach(item => removeClass(modalDom, item));
|
||||||
|
}
|
||||||
|
|
||||||
|
modalStack.pop();
|
||||||
|
if (modalStack.length > 0) {
|
||||||
|
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let i = modalStack.length - 1; i >= 0; i--) {
|
||||||
|
if (modalStack[i].id === id) {
|
||||||
|
modalStack.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalStack.length === 0) {
|
||||||
|
if (this.modalFade) {
|
||||||
|
addClass(modalDom, 'v-modal-leave');
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
if (modalStack.length === 0) {
|
||||||
|
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||||||
|
modalDom.style.display = 'none';
|
||||||
|
PopupManager.modalDom = undefined;
|
||||||
|
}
|
||||||
|
removeClass(modalDom, 'v-modal-leave');
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.defineProperty(PopupManager, 'zIndex', {
|
||||||
|
configurable: true,
|
||||||
|
get() {
|
||||||
|
if (!hasInitZIndex) {
|
||||||
|
zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
|
||||||
|
hasInitZIndex = true;
|
||||||
|
}
|
||||||
|
return zIndex;
|
||||||
|
},
|
||||||
|
set(value) {
|
||||||
|
zIndex = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const getTopPopup = function() {
|
||||||
|
if (Vue.prototype.$isServer) return;
|
||||||
|
if (PopupManager.modalStack.length > 0) {
|
||||||
|
const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||||||
|
if (!topPopup) return;
|
||||||
|
const instance = PopupManager.getInstance(topPopup.id);
|
||||||
|
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!Vue.prototype.$isServer) {
|
||||||
|
// handle `esc` key when the popup is shown
|
||||||
|
window.addEventListener('keydown', function(event) {
|
||||||
|
if (event.keyCode === 27) {
|
||||||
|
const topPopup = getTopPopup();
|
||||||
|
|
||||||
|
if (topPopup && topPopup.closeOnPressEscape) {
|
||||||
|
topPopup.handleClose
|
||||||
|
? topPopup.handleClose()
|
||||||
|
: (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PopupManager;
|
||||||
29
src/components/eLoading/utils/scrollbar-width.js
Normal file
29
src/components/eLoading/utils/scrollbar-width.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
let scrollBarWidth;
|
||||||
|
|
||||||
|
export default function() {
|
||||||
|
if (Vue.prototype.$isServer) return 0;
|
||||||
|
if (scrollBarWidth !== undefined) return scrollBarWidth;
|
||||||
|
|
||||||
|
const outer = document.createElement('div');
|
||||||
|
outer.className = 'el-scrollbar__wrap';
|
||||||
|
outer.style.visibility = 'hidden';
|
||||||
|
outer.style.width = '100px';
|
||||||
|
outer.style.position = 'absolute';
|
||||||
|
outer.style.top = '-9999px';
|
||||||
|
document.body.appendChild(outer);
|
||||||
|
|
||||||
|
const widthNoScroll = outer.offsetWidth;
|
||||||
|
outer.style.overflow = 'scroll';
|
||||||
|
|
||||||
|
const inner = document.createElement('div');
|
||||||
|
inner.style.width = '100%';
|
||||||
|
outer.appendChild(inner);
|
||||||
|
|
||||||
|
const widthWithScroll = inner.offsetWidth;
|
||||||
|
outer.parentNode.removeChild(outer);
|
||||||
|
scrollBarWidth = widthNoScroll - widthWithScroll;
|
||||||
|
|
||||||
|
return scrollBarWidth;
|
||||||
|
};
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<router-link :to="home" class="logo">
|
|
||||||
<el-image style="width:40px; height:40px" :src="logo" />
|
|
||||||
<h2>北京玖琏科技有限公司</h2>
|
|
||||||
</router-link>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import logo from "@/assets/logo.png";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
home: {
|
|
||||||
type: String,
|
|
||||||
default: "/home"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
logo() {
|
|
||||||
return logo;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
h2 {
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -67,8 +67,8 @@ export default {
|
|||||||
},
|
},
|
||||||
loadFile(url) {
|
loadFile(url) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
let loadingTask = pdfjsLib.getDocument(url);
|
let pdfTask = pdfjsLib.getDocument(url);
|
||||||
loadingTask.promise
|
pdfTask.promise
|
||||||
.then(pdf => {
|
.then(pdf => {
|
||||||
this.pdfDoc = pdf;
|
this.pdfDoc = pdf;
|
||||||
this.numPages = this.pdfDoc.numPages;
|
this.numPages = this.pdfDoc.numPages;
|
||||||
@ -107,8 +107,8 @@ export default {
|
|||||||
if (canvas) {
|
if (canvas) {
|
||||||
canvas.width = width * ratio;
|
canvas.width = width * ratio;
|
||||||
canvas.height = height * ratio;
|
canvas.height = height * ratio;
|
||||||
canvas.style.width = width + "px";
|
canvas.style.width = width/10 + "em";
|
||||||
canvas.style.height = height + "px";
|
canvas.style.height = height/10 + "em";
|
||||||
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||||||
|
|
||||||
let renderTask = page.render({
|
let renderTask = page.render({
|
||||||
|
|||||||
@ -3,11 +3,11 @@
|
|||||||
<transition name="el-fade-in">
|
<transition name="el-fade-in">
|
||||||
<el-input
|
<el-input
|
||||||
v-show="show"
|
v-show="show"
|
||||||
style="width:430px"
|
style="width:43em"
|
||||||
placeholder="请输入关键词"
|
placeholder="请输入关键词"
|
||||||
v-model="search"
|
v-model="search"
|
||||||
>
|
>
|
||||||
<el-button slot="append" icon="el-icon-search" @click="onSearch" />
|
<b-button slot="append" icon="el-icon-search" @click="onSearch" />
|
||||||
</el-input>
|
</el-input>
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="el-fade-in">
|
<transition name="el-fade-in">
|
||||||
@ -15,7 +15,7 @@
|
|||||||
<a
|
<a
|
||||||
class="el-icon-close"
|
class="el-icon-close"
|
||||||
@click="onHide"
|
@click="onHide"
|
||||||
style="font-size: 26px;margin-left: 10px"
|
style="font-size: 2.6em;margin-left: 1em"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="flex">
|
<div v-else class="flex">
|
||||||
@ -23,7 +23,7 @@
|
|||||||
<a
|
<a
|
||||||
class="el-icon-search"
|
class="el-icon-search"
|
||||||
@click="onShow"
|
@click="onShow"
|
||||||
style="font-size: 26px;margin-left: 10px"
|
style="font-size: 2.6em;margin-left: 1em"
|
||||||
/>
|
/>
|
||||||
<slot name="after" />
|
<slot name="after" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -91,25 +91,25 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@media screen and (min-width: 576px) {
|
@media screen and (min-width: 576px) {
|
||||||
.video {
|
.video {
|
||||||
max-width: 540px;
|
max-width: 54em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.video {
|
.video {
|
||||||
max-width: 720px;
|
max-width: 72em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 992px) {
|
@media screen and (min-width: 992px) {
|
||||||
.video {
|
.video {
|
||||||
max-width: 960px;
|
max-width: 96em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1200px) {
|
@media screen and (min-width: 1200px) {
|
||||||
.video {
|
.video {
|
||||||
max-width: 1140px;
|
max-width: 114em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="copy">
|
<div class="copy">
|
||||||
<template v-for="(el, i) in copys">
|
<div class="container">
|
||||||
<router-link :key="i" v-if="el.href" :to="el.href">
|
<div v-for="(el, i) in copys" :key="i">
|
||||||
|
<b-link v-if="el.href" :href="el.href">
|
||||||
{{ el.name }}
|
{{ el.name }}
|
||||||
</router-link>
|
</b-link>
|
||||||
<span :key="i" v-else> {{ el.name }} </span>
|
<span v-else> {{ el.name }} </span>
|
||||||
</template>
|
</div>
|
||||||
<div class="line" />
|
<div class="line" />
|
||||||
<ul class="list-unstyled">
|
<div v-for="(el, i) in links" :key="copys.length+i">
|
||||||
<li v-for="(el, i) in links" :key="i">
|
<b-link :href="el.href"> {{ el.name }}</b-link>
|
||||||
<router-link :to="el.href"> {{ el.name }}</router-link>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -46,35 +46,26 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.list-unstyled {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #595757;
|
color: #595757;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy {
|
.copy {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
background-color: #e6e6e6;
|
background-color: #e6e6e6;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 40px;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
a,
|
|
||||||
span {
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
@ -1,56 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom">
|
<div class="custom">
|
||||||
<div class="footer-nav">
|
<b-row>
|
||||||
<div
|
<b-col
|
||||||
class="col-md"
|
|
||||||
v-for="(it, i) in abouts"
|
v-for="(it, i) in abouts"
|
||||||
:key="i"
|
:key="i"
|
||||||
:style="{ 'text-align': i == abouts.length - 1 ? 'center' : '' }"
|
style="min-width:20em"
|
||||||
>
|
>
|
||||||
<h3 class="collapsed">
|
<h5>
|
||||||
{{ it.name }}
|
{{ it.name }}
|
||||||
<span class="iconfont icon-arrow-down hidden-md hidden-lg"></span>
|
<span class="iconfont icon-arrow-down hidden-md hidden-lg"></span>
|
||||||
</h3>
|
</h5>
|
||||||
|
|
||||||
<div class="collapse navbar-collapse row">
|
|
||||||
<ul
|
<ul
|
||||||
class="list-unstyled col-md"
|
class="col-md"
|
||||||
v-for="(el, j) in it.children"
|
v-for="(el, j) in it.children"
|
||||||
:key="j"
|
:key="j"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<router-link v-if="el.href" :to="el.href">
|
<b-link v-if="el.href" :href="el.href">
|
||||||
{{ el.name }}
|
<h6> {{ el.name }} </h6>
|
||||||
</router-link>
|
</b-link>
|
||||||
|
<b-img
|
||||||
<el-popover
|
|
||||||
v-else-if="el.src"
|
v-else-if="el.src"
|
||||||
placement="top"
|
style="width:14em;height:14em"
|
||||||
width="200"
|
|
||||||
trigger="hover"
|
|
||||||
>
|
|
||||||
<el-image style="width:100%;height:100%;" :src="el.src" />
|
|
||||||
<el-image
|
|
||||||
slot="reference"
|
|
||||||
style="width:80px;height:80px"
|
|
||||||
:src="el.src"
|
:src="el.src"
|
||||||
/>
|
/>
|
||||||
</el-popover>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</b-col>
|
||||||
</div>
|
</b-row>
|
||||||
</div>
|
<b-row style="margin-top:3em;padding-bottom:3em">
|
||||||
<div class="footer-link">
|
<b-col>
|
||||||
<div class="title">合作方</div>
|
<h5>合作方</h5>
|
||||||
<ul class="list-unstyled share">
|
<ul>
|
||||||
<li v-for="(el, i) in images" :key="i">
|
<li>
|
||||||
<el-tooltip placement="top" :content="el.name" effect="light">
|
<template v-for="(el, i) in images" >
|
||||||
<el-image style="width:80px;height:80px;" :src="el.src" />
|
<b-img :key="i" v-b-tooltip.hover :title="el.name" style="width:8em;height:8em;margin-right:17px" :src="el.src" />
|
||||||
</el-tooltip>
|
</template>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</b-col>
|
||||||
|
</b-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -146,75 +135,20 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.list-unstyled {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #595757;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #595757;
|
color: #595757;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul,li {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.custom {
|
.custom {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 85.652%;
|
|
||||||
max-width: 1430.016px;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
||||||
.footer-nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid #e2e2e2;
|
|
||||||
margin-bottom: 38px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #595757;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-link {
|
|
||||||
.title {
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding: 0;
|
|
||||||
width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
i {
|
|
||||||
font-size: 42px;
|
|
||||||
color: #3f3f3f;
|
|
||||||
&:hover {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -20,10 +20,10 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.footer {
|
.footer {
|
||||||
|
background-color: #f1f1f1;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
.container {
|
.container {
|
||||||
background-color: #f1f1f1;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
48
src/layout/eHeader/eMenuItem.vue
Normal file
48
src/layout/eHeader/eMenuItem.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div @mouseenter.stop="onMouseEnter" @mouseleave.stop="onMouseLeave">
|
||||||
|
<template v-if="hasChildren">
|
||||||
|
<b-navbar-nav>
|
||||||
|
<b-nav-item-dropdown :text="node.meta.name" right style="font-size:16px">
|
||||||
|
<template v-for="(el, j) in node.children" >
|
||||||
|
<e-menu-item :key="j" :node="el" />
|
||||||
|
</template>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</b-navbar-nav>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<b-nav-item :href="node.redirect||node.path" style="font-size:16px">
|
||||||
|
{{ node.meta.name }}
|
||||||
|
</b-nav-item>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "eMenuItem",
|
||||||
|
props: {
|
||||||
|
node: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasChildren() {
|
||||||
|
return this.node.children&&this.node.children.length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onMouseEnter() {
|
||||||
|
this.show = true;
|
||||||
|
},
|
||||||
|
onMouseLeave() {
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
37
src/layout/eHeader/eMenuList.vue
Normal file
37
src/layout/eHeader/eMenuList.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<b-navbar-nav class="flex">
|
||||||
|
<template v-for="(node, i) in routes">
|
||||||
|
<e-menu-item v-if="!node.hidden"
|
||||||
|
:key="i"
|
||||||
|
:node="node"/>
|
||||||
|
</template>
|
||||||
|
</b-navbar-nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import eMenuItem from './eMenuItem';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
eMenuItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
routes: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/layout/eHeader/index.vue
Normal file
89
src/layout/eHeader/index.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<header class="header">
|
||||||
|
<b-navbar class="sticky" toggleable="lg" type="light" variant="light">
|
||||||
|
<b-navbar-brand href="#">
|
||||||
|
<b-img :src="logo" fluid alt="logo" style="width:2em; height:2em" />
|
||||||
|
<span style="margin: 0 0.6em">北京玖琏科技有限公司</span>
|
||||||
|
</b-navbar-brand>
|
||||||
|
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||||
|
<b-collapse id="nav-collapse" is-nav>
|
||||||
|
<e-menu-list class="center" :routes="routes"/>
|
||||||
|
<!-- <b-navbar-nav class="ml-auto">
|
||||||
|
<b-nav-item-dropdown text="语言" right>
|
||||||
|
<b-dropdown-item href="#">CH</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
<b-nav-item-dropdown right>
|
||||||
|
<template #button-content>
|
||||||
|
<em>用户</em>
|
||||||
|
</template>
|
||||||
|
<b-dropdown-item href="#">信息</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">登出</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</b-navbar-nav> -->
|
||||||
|
</b-collapse>
|
||||||
|
</b-navbar>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import logo from "@/assets/logo.png";
|
||||||
|
import eMenuList from "./eMenuList.vue";
|
||||||
|
import router from '@/router/index';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
eMenuList
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollT: 0,
|
||||||
|
logo: logo,
|
||||||
|
routes: router.options.routes[0].children,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("scroll", this.onScroll);
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.removeEventListener("scroll", this.onScroll);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onScroll(e) {
|
||||||
|
let headerEl = document.querySelector(".header");
|
||||||
|
let stickyEl = document.querySelector(".sticky");
|
||||||
|
let stickyT = stickyEl.offsetTop;
|
||||||
|
let scrollT = e.target.scrollingElement.scrollTop;
|
||||||
|
|
||||||
|
let diff = scrollT - this.scrollT;
|
||||||
|
if (scrollT < 160) {
|
||||||
|
if (scrollT > stickyT) {
|
||||||
|
headerEl.classList.add("fixed-top");
|
||||||
|
} else {
|
||||||
|
headerEl.classList.remove("fixed-top");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (diff > 0) {
|
||||||
|
headerEl.style.top = "-7.8em";
|
||||||
|
} else {
|
||||||
|
headerEl.style.top = "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollT = scrollT;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fixed-top {
|
||||||
|
background: #fff;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
transition: top 0.5s;
|
||||||
|
z-index: 99;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
25
src/layout/index.vue
Normal file
25
src/layout/index.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout">
|
||||||
|
<e-header />
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<router-view />
|
||||||
|
</transition>
|
||||||
|
<e-footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import eHeader from "./eHeader/index";
|
||||||
|
import eFooter from "./eFooter/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
eHeader,
|
||||||
|
eFooter
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.layout {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
src/main.js
12
src/main.js
@ -1,14 +1,15 @@
|
|||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import store from "./store";
|
|
||||||
import ElementUI from "element-ui";
|
|
||||||
import VueVideoPlayer from "vue-video-player";
|
import VueVideoPlayer from "vue-video-player";
|
||||||
import VueClipboard from "vue-clipboard2";
|
import VueClipboard from "vue-clipboard2";
|
||||||
import Animated from "animate.css";
|
import Animated from "animate.css";
|
||||||
|
import Loading from '@/components/eLoading/index';
|
||||||
|
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
|
||||||
|
|
||||||
import "./permission";
|
import "./permission";
|
||||||
import "element-ui/lib/theme-chalk/index.css";
|
import 'bootstrap/dist/css/bootstrap.css';
|
||||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css';
|
||||||
import "video.js/dist/video-js.css";
|
import "video.js/dist/video-js.css";
|
||||||
import "vue-video-player/src/custom-theme.css";
|
import "vue-video-player/src/custom-theme.css";
|
||||||
import "videojs-flash";
|
import "videojs-flash";
|
||||||
@ -20,13 +21,14 @@ import "@/style/iconfont.css";
|
|||||||
window.router = router;
|
window.router = router;
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
Vue.use(ElementUI);
|
Vue.use(BootstrapVue)
|
||||||
|
Vue.use(IconsPlugin)
|
||||||
Vue.use(VueVideoPlayer);
|
Vue.use(VueVideoPlayer);
|
||||||
Vue.use(VueClipboard);
|
Vue.use(VueClipboard);
|
||||||
Vue.use(Animated);
|
Vue.use(Animated);
|
||||||
|
Vue.use(Loading);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
store,
|
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount("#app");
|
}).$mount("#app");
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import VueRouter from "vue-router";
|
import VueRouter from "vue-router";
|
||||||
import Layout from "../views/Layout/index.vue";
|
import Layout from "@/layout/index.vue";
|
||||||
import Home from "../views/Home/index.vue";
|
import Home from "@/views/Home/index.vue";
|
||||||
|
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
@ -15,20 +15,17 @@ const routes = [
|
|||||||
path: "/",
|
path: "/",
|
||||||
component: Layout,
|
component: Layout,
|
||||||
children: [
|
children: [
|
||||||
{
|
|
||||||
path: "/home",
|
|
||||||
name: "Home",
|
|
||||||
component: Home
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/preview/pdf",
|
path: "/preview/pdf",
|
||||||
name: "PreviewPdf",
|
name: "PreviewPdf",
|
||||||
|
hidden: true,
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "pdf" */ "../views/PreviewPdf/index.vue")
|
import(/* webpackChunkName: "pdf" */ "../views/PreviewPdf/index.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/preview/image",
|
path: "/preview/image",
|
||||||
name: "PreviewImage",
|
name: "PreviewImage",
|
||||||
|
hidden: true,
|
||||||
component: () =>
|
component: () =>
|
||||||
import(
|
import(
|
||||||
/* webpackChunkName: "image" */ "../views/PreviewImage/index.vue"
|
/* webpackChunkName: "image" */ "../views/PreviewImage/index.vue"
|
||||||
@ -37,20 +34,51 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: "/preview/player",
|
path: "/preview/player",
|
||||||
name: "PreviewPlayer",
|
name: "PreviewPlayer",
|
||||||
|
hidden: true,
|
||||||
component: () =>
|
component: () =>
|
||||||
import(
|
import(
|
||||||
/* webpackChunkName: "player" */ "../views/PreviewPlayer/index.vue"
|
/* webpackChunkName: "player" */ "../views/PreviewPlayer/index.vue"
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/home",
|
||||||
|
name: "Home",
|
||||||
|
meta: {
|
||||||
|
name: '首页'
|
||||||
|
},
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/honor",
|
path: "/honor",
|
||||||
name: "Honor",
|
name: "Honor",
|
||||||
|
meta: {
|
||||||
|
name: '我们的产品'
|
||||||
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "honor" */ "../views/Honor/index.vue")
|
import(/* webpackChunkName: "honor" */ "../views/Exhibition/index.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/exhibition",
|
path: "/exhibition",
|
||||||
name: "Exhibition",
|
name: "Exhibition",
|
||||||
|
meta: {
|
||||||
|
name: '经典案例'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: "/preview/pdf?src=西安铁路职业技术学院.pdf",
|
||||||
|
meta: {
|
||||||
|
name: "西安铁路职业技术学院",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: "/preview/pdf?src=贵州装备制造职业学院机电技术专业实训室建设.pdf",
|
||||||
|
meta: {
|
||||||
|
name: "贵州装备制造职业学院",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
component: () =>
|
component: () =>
|
||||||
import(
|
import(
|
||||||
/* webpackChunkName: "exhibition" */ "../views/Exhibition/index.vue"
|
/* webpackChunkName: "exhibition" */ "../views/Exhibition/index.vue"
|
||||||
@ -59,12 +87,18 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: "/about",
|
path: "/about",
|
||||||
name: "About",
|
name: "About",
|
||||||
|
meta: {
|
||||||
|
name: '关于玖琏'
|
||||||
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "about" */ "../views/About.vue")
|
import(/* webpackChunkName: "about" */ "../views/About.vue")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/relation",
|
path: "/relation",
|
||||||
name: "Relation",
|
name: "Relation",
|
||||||
|
meta: {
|
||||||
|
name: '联系我们'
|
||||||
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "relation" */ "../views/Relation.vue")
|
import(/* webpackChunkName: "relation" */ "../views/Relation.vue")
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
import Vue from "vue";
|
|
||||||
import Vuex from "vuex";
|
|
||||||
|
|
||||||
Vue.use(Vuex);
|
|
||||||
|
|
||||||
export default new Vuex.Store({
|
|
||||||
state: {},
|
|
||||||
mutations: {},
|
|
||||||
actions: {},
|
|
||||||
modules: {}
|
|
||||||
});
|
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
font-size: 16px;
|
font-size: 1.6em;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<article id="introduce">
|
<article id="introduce">
|
||||||
<h3>公司简介</h3>
|
<h6>公司简介</h6>
|
||||||
<p>
|
<p>
|
||||||
北京玖琏科技有限公司成立于2017年1月3日，公司总部位于首都北京，在古都西安设有研发中心。公司致力服务于轨道交通行业、化学化工行业、电力电厂行业等，
|
北京玖琏科技有限公司成立于2017年1月3日，公司总部位于首都北京，在古都西安设有研发中心。公司致力服务于轨道交通行业、化学化工行业、电力电厂行业等，
|
||||||
针对各个行业需求及痛点提供一体化培训解决方案。我公司自主研发的行业数字孪生云平台力求站在行业内城市轨道交通的最前沿，集云计算、真实系统逻辑及日常
|
针对各个行业需求及痛点提供一体化培训解决方案。我公司自主研发的行业数字孪生云平台力求站在行业内城市轨道交通的最前沿，集云计算、真实系统逻辑及日常
|
||||||
@ -11,24 +11,17 @@
|
|||||||
铁路职业技术学院等多所高校合作，完成相关培训中心和实验室建设等。
|
铁路职业技术学院等多所高校合作，完成相关培训中心和实验室建设等。
|
||||||
</p>
|
</p>
|
||||||
<div class="images">
|
<div class="images">
|
||||||
<el-image class="world" style="width:50%;height:auto" :src="world" />
|
<b-img class="world" style="width:50%;height:auto" :src="world" />
|
||||||
<div class="group" style="width:50%;height:auto">
|
<div class="group" style="width:50%;height:auto">
|
||||||
<template v-for="(el, i) in imageList">
|
<template v-for="(el, i) in imageList">
|
||||||
<el-tooltip
|
<b-img :key="i" v-b-tooltip.hover :title="el.name" style="width:30%;height:30%" :src="el.src" />
|
||||||
placement="top"
|
|
||||||
:content="el.name"
|
|
||||||
:key="i"
|
|
||||||
effect="light"
|
|
||||||
>
|
|
||||||
<el-image style="width:30%;height:30%" :src="el.src" />
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article id="proxy">
|
<article id="proxy">
|
||||||
<h3>招商及代理</h3>
|
<h6>招商及代理</h6>
|
||||||
<p>
|
<p>
|
||||||
为进一步加快行业职教互联网化进程，提高职业教育的教学水平，提升个人能力的共享实训平台，我公司长期面向社会寻求代理合作，
|
为进一步加快行业职教互联网化进程，提高职业教育的教学水平，提升个人能力的共享实训平台，我公司长期面向社会寻求代理合作，
|
||||||
代理商主要负责市场推广及商务交流、项目招投标等内容，详情咨询
|
代理商主要负责市场推广及商务交流、项目招投标等内容，详情咨询
|
||||||
@ -37,17 +30,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article id="join" style="padding-top: 360px">
|
<article id="join">
|
||||||
<div class="image-box">
|
<b-img style="width:100%;height:auto" :src="offer" />
|
||||||
<el-image class="image" :src="offer" />
|
<h6>加入玖琏</h6>
|
||||||
<h3>加入玖琏</h3>
|
|
||||||
<p>
|
<p>
|
||||||
你的加入可以给我们带来新的活力，我们同样也可以赠你无限的发展空间。世界那么大，你不来，谁知道你牛逼？多一份了解，多一份选择，
|
你的加入可以给我们带来新的活力，我们同样也可以赠你无限的发展空间。世界那么大，你不来，谁知道你牛逼？多一份了解，多一份选择，
|
||||||
选择不对努力白费，寻找合伙人寻找最优秀的你，欢迎将你的简历投递至
|
选择不对努力白费，寻找合伙人寻找最优秀的你，欢迎将你的简历投递至
|
||||||
<strong><em>henry@joylink.club</em></strong>
|
<strong><em>henry@joylink.club</em></strong>。
|
||||||
。
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -97,27 +87,23 @@ export default {
|
|||||||
.main {
|
.main {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background: #f7f7f9;
|
background: #f7f7f9;
|
||||||
padding: 10px;
|
padding: 1em;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 50%;
|
width: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 80px;
|
padding: 4.8em;
|
||||||
|
|
||||||
article {
|
article {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 70px;
|
padding-bottom: 7em;
|
||||||
p {
|
p {
|
||||||
text-indent: 2em;
|
text-indent: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-box {
|
.image-box {
|
||||||
position: absolute;
|
h6 {
|
||||||
left: calc(-80px - 2.5%);
|
|
||||||
right: -80px;
|
|
||||||
top: 0;
|
|
||||||
h3 {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 25%;
|
top: 25%;
|
||||||
left: 28%;
|
left: 28%;
|
||||||
@ -138,7 +124,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
height: 420px;
|
|
||||||
.world {
|
.world {
|
||||||
width: 49%;
|
width: 49%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="errPage-container">
|
<div class="errPage-container">
|
||||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
|
<b-button icon="arrow-left" class="pan-back-btn" @click="back">
|
||||||
返回
|
返回
|
||||||
</el-button>
|
</b-button>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<h1 class="text-jumbo text-ginormous">
|
<h1 class="text-jumbo text-ginormous">
|
||||||
@ -68,7 +68,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.errPage-container {
|
.errPage-container {
|
||||||
width: 800px;
|
width: 80em;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 100px auto;
|
margin: 100px auto;
|
||||||
|
|
||||||
|
|||||||
@ -1,30 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<el-card shadow="never">
|
<b-table
|
||||||
<el-table
|
sticky-header
|
||||||
:data="tableData"
|
striped
|
||||||
:span-method="objectSpanMethod"
|
bordered
|
||||||
border
|
hover
|
||||||
style="width: 100%;"
|
:items="items"
|
||||||
|
:fields="fields"
|
||||||
|
style="margin-top:5em;min-height:100vh"
|
||||||
|
outlined
|
||||||
>
|
>
|
||||||
<el-table-column prop="platform" label="平台" width="200" />
|
<template #cell(href)="data">
|
||||||
<el-table-column prop="name" label="系统名称" />
|
|
||||||
<el-table-column prop="href" label="系统入口">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<i
|
<i
|
||||||
v-clipboard:copy="row.href"
|
v-clipboard:copy="data.item.href"
|
||||||
v-clipboard:success="onCopy"
|
v-clipboard:success="onCopy"
|
||||||
v-clipboard:error="onError"
|
v-clipboard:error="onError"
|
||||||
class="el-icon-document-copy"
|
class="el-icon-document-copy"
|
||||||
/>
|
/>
|
||||||
<a style="margin-left: 10px" target="_blank" :href="row.href">
|
<a style="margin-left: 10px" target="_blank" :href="data.item.href">
|
||||||
{{ row.href }}
|
{{ data.item.href }}
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</b-table>
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -34,7 +32,23 @@ export default {
|
|||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
tableData() {
|
fields() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
key: 'platform',
|
||||||
|
label: '平台',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
label: '系统名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'href',
|
||||||
|
label: '系统入口'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
items() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
platform: "轨道交通",
|
platform: "轨道交通",
|
||||||
@ -42,12 +56,12 @@ export default {
|
|||||||
href: "https://joylink.club/cbtc"
|
href: "https://joylink.club/cbtc"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
platform: "",
|
platform: "轨道交通",
|
||||||
name: "城轨设计平台",
|
name: "城轨设计平台",
|
||||||
href: "https://joylink.club/cbtc/design"
|
href: "https://joylink.club/cbtc/design"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
platform: "",
|
platform: "轨道交通",
|
||||||
name: "国赛备战版",
|
name: "国赛备战版",
|
||||||
href: "https://joylink.club/cbtc/login?project=drts"
|
href: "https://joylink.club/cbtc/login?project=drts"
|
||||||
},
|
},
|
||||||
@ -65,20 +79,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
objectSpanMethod({ rowIndex, columnIndex }) {
|
|
||||||
const sum = 3;
|
|
||||||
if (columnIndex === 0) {
|
|
||||||
if (rowIndex < sum) {
|
|
||||||
if (rowIndex % sum == 0) {
|
|
||||||
return { rowspan: sum, colspan: 1 };
|
|
||||||
} else {
|
|
||||||
return { rowspan: 0, colspan: 0 };
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return { rowspan: 1, colspan: 1 };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onCopy() {
|
onCopy() {
|
||||||
this.$message.success("复制成功");
|
this.$message.success("复制成功");
|
||||||
},
|
},
|
||||||
@ -90,35 +90,11 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.main {
|
.main {
|
||||||
background: #f7f7f9;
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
.container {
|
.container {
|
||||||
padding: 10px;
|
width: 100%;
|
||||||
width: 70%;
|
|
||||||
max-width: 1430.016px;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: left;
|
|
||||||
padding-bottom: 200px;
|
|
||||||
|
|
||||||
/deep/ {
|
|
||||||
.el-card__body {
|
|
||||||
padding: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i,
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 32px;
|
|
||||||
color: #373737;
|
|
||||||
pointer-events: auto;
|
|
||||||
&:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -30,10 +30,9 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.main {
|
.main {
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.container {
|
.container {
|
||||||
width: 70%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="title-box">
|
<div class="title-box">
|
||||||
<h2>{{ title }}</h2>
|
<h3>{{ title }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<el-card shadow="always">
|
<b-card>
|
||||||
<el-carousel
|
<b-link href="/honor">
|
||||||
class="carousel"
|
<b-carousel
|
||||||
type="card"
|
id="carousel-1"
|
||||||
:interval="5000"
|
v-model="slide"
|
||||||
arrow="always"
|
:interval="4000"
|
||||||
height="480px"
|
controls
|
||||||
|
indicators
|
||||||
|
background="#ababab"
|
||||||
|
img-width="1024"
|
||||||
|
img-height="480"
|
||||||
|
style="text-shadow: 1px 1px 2px #333;"
|
||||||
|
@sliding-start="onSlideStart"
|
||||||
|
@sliding-end="onSlideEnd"
|
||||||
>
|
>
|
||||||
<el-carousel-item v-for="(el, i) in imageList" :key="i">
|
<b-carousel-slide
|
||||||
<router-link to="/honor">
|
v-for="(el, i) in imageList" :key="i"
|
||||||
<el-image
|
caption=""
|
||||||
style="width:auto;height:100%"
|
text=""
|
||||||
:src="buildUrl(el.src)"
|
:img-src="buildUrl(el.src)"
|
||||||
></el-image>
|
></b-carousel-slide>
|
||||||
</router-link>
|
</b-carousel>
|
||||||
</el-carousel-item>
|
</b-link>
|
||||||
</el-carousel>
|
</b-card>
|
||||||
</el-card>
|
<b-button-group :buttonList="buttonList" />
|
||||||
<e-button-group :buttonList="buttonList" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -35,7 +41,10 @@ export default {
|
|||||||
eButtonGroup
|
eButtonGroup
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
slide: 0,
|
||||||
|
sliding: null
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
title() {
|
title() {
|
||||||
@ -49,43 +58,45 @@ export default {
|
|||||||
},
|
},
|
||||||
buttonList() {
|
buttonList() {
|
||||||
return [
|
return [
|
||||||
// {
|
|
||||||
// name: "了解更多",
|
|
||||||
// href: "/honor"
|
|
||||||
// }
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
onSlideStart(slide) {
|
||||||
|
this.sliding = true
|
||||||
|
},
|
||||||
|
onSlideEnd(slide) {
|
||||||
|
this.sliding = false
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
margin-bottom: 80px !important;
|
margin-bottom: 5em !important;
|
||||||
.title-box {
|
.title-box {
|
||||||
margin-bottom: 50px !important;
|
margin-bottom: 3em !important;
|
||||||
h2 {
|
h3 {
|
||||||
color: #333;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 0.8em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
font-size: 1.9em;
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 7px;
|
height: 0.5em;
|
||||||
background-color: red;
|
background-color: red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
min-width: 35px;
|
min-width: 3.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,37 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="product-layer">
|
<div class="product-layer">
|
||||||
<div class="title-box">
|
<div class="title-box">
|
||||||
<h2 class="title">
|
<h3> {{ title }} </h3>
|
||||||
{{ title }}
|
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<el-card shadow="naver">
|
<b-card>
|
||||||
<div class="container">
|
<b-row>
|
||||||
<div
|
<b-col v-for="(el, i) in productList" :key="i" style="min-width:20em">
|
||||||
class="product card"
|
<b-card
|
||||||
v-for="(el, i) in productList"
|
:title="el.name"
|
||||||
:key="i"
|
:img-src="el.src"
|
||||||
@click="goLinkPage(el, i)"
|
img-alt="Image"
|
||||||
|
img-top
|
||||||
|
tag="article"
|
||||||
|
class="mb-2"
|
||||||
>
|
>
|
||||||
<el-image :src="el.src" style="width:100%;height:auto;" fit="cover" />
|
<div>
|
||||||
<div
|
|
||||||
class="type"
|
|
||||||
:style="{
|
|
||||||
background: `linear-gradient(45deg, ${el.type}, transparent)`
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ el.name }}
|
|
||||||
</div>
|
|
||||||
<div class="textbox" />
|
|
||||||
<div class="context" style="overflow-wrap: break-word;">
|
|
||||||
<div class="describe">
|
|
||||||
{{ el.describe }}
|
{{ el.describe }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<b-button :href="el.href" variant="primary">详情</b-button>
|
||||||
</div>
|
</b-card>
|
||||||
</div>
|
</b-col >
|
||||||
</el-card>
|
</b-row>
|
||||||
<e-button-group :buttonList="buttonList" />
|
</b-card>
|
||||||
|
<b-button-group :buttonList="buttonList" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -82,10 +73,6 @@ export default {
|
|||||||
},
|
},
|
||||||
buttonList() {
|
buttonList() {
|
||||||
return [
|
return [
|
||||||
// {
|
|
||||||
// name: "了解更多",
|
|
||||||
// href: "/honor"
|
|
||||||
// }
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -106,142 +93,30 @@ a {
|
|||||||
.product-layer {
|
.product-layer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 80px !important;
|
margin-bottom: 5em !important;
|
||||||
.title-box {
|
.title-box {
|
||||||
margin-bottom: 50px !important;
|
margin-bottom: 3em !important;
|
||||||
h2 {
|
h3 {
|
||||||
color: #333;
|
color: #333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 0.8em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
font-size: 1.9em;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 7px;
|
height: 0.5em;
|
||||||
background-color: brown;
|
background-color: brown;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 0px;
|
margin-left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
min-width: 35px;
|
min-width: 3.5em;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: grid;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
grid-template-columns: repeat(3, 33.33%);
|
|
||||||
grid-gap: 20px 20px;
|
|
||||||
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #e4e7ed;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product {
|
|
||||||
.type {
|
|
||||||
top: 0;
|
|
||||||
left: 0px;
|
|
||||||
position: absolute;
|
|
||||||
padding: 7px 20px;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 90%;
|
|
||||||
color: #fff;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 8;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textbox {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 80px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: left;
|
|
||||||
background: #3a68c2;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context {
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 80px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: left;
|
|
||||||
color: #fff;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.describe {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layer {
|
|
||||||
padding: 20px;
|
|
||||||
background: #f1f1f1;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #d1d1d1;
|
|
||||||
height: 485px;
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: rgb(239, 239, 239);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #bfbfbf;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #666;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-corner {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
h4 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<el-carousel height="640px">
|
<b-carousel
|
||||||
<el-carousel-item v-for="(el, i) in imageList" :key="i">
|
id="carousel-1"
|
||||||
<el-image style="height:100%;width:100%" :src="el.src" />
|
v-model="slide"
|
||||||
</el-carousel-item>
|
:interval="4000"
|
||||||
</el-carousel>
|
controls
|
||||||
|
indicators
|
||||||
|
background="#ababab"
|
||||||
|
img-width="1024"
|
||||||
|
img-height="480"
|
||||||
|
style="text-shadow: 1px 1px 2px #333;"
|
||||||
|
@sliding-start="onSlideStart"
|
||||||
|
@sliding-end="onSlideEnd"
|
||||||
|
>
|
||||||
|
<b-carousel-slide
|
||||||
|
v-for="(el, i) in imageList"
|
||||||
|
:key="i"
|
||||||
|
caption=""
|
||||||
|
text=""
|
||||||
|
:img-src="el.src">
|
||||||
|
</b-carousel-slide>
|
||||||
|
</b-carousel>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<e-button-group :buttonList="buttonList" />
|
<b-button-group :buttonList="buttonList" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -20,7 +36,10 @@ export default {
|
|||||||
eButtonGroup
|
eButtonGroup
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
slide: 0,
|
||||||
|
sliding: null
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
imageList() {
|
imageList() {
|
||||||
@ -33,30 +52,33 @@ export default {
|
|||||||
},
|
},
|
||||||
buttonList() {
|
buttonList() {
|
||||||
return [
|
return [
|
||||||
// {
|
|
||||||
// name: "了解更多",
|
|
||||||
// href: "/honor"
|
|
||||||
// }
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSlideStart(slide) {
|
||||||
|
this.sliding = true
|
||||||
|
},
|
||||||
|
onSlideEnd(slide) {
|
||||||
|
this.sliding = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.main {
|
.main {
|
||||||
max-width: 1920px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 80px !important;
|
margin-bottom: 0.5em !important;
|
||||||
.content {
|
.content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
bottom: 140px;
|
bottom: 14em;
|
||||||
left: 360px;
|
left: 36em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,27 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="recommend">
|
<div class="recommend">
|
||||||
<div class="title-box">
|
<div class="title-box">
|
||||||
<h2>{{ title }}</h2>
|
<h3>{{ title }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<el-card shadow="never" style="margin-bottom:30px">
|
<b-card style="margin-bottom:3em" header-tag="header">
|
||||||
<div slot="header" class="clearfix" style="text-align:left">
|
<template #header>
|
||||||
<span>精彩视频</span>
|
<h6 style="display:flex">精彩视频</h6>
|
||||||
</div>
|
</template>
|
||||||
<div class="flex">
|
<b-row>
|
||||||
<div
|
<b-col v-for="(el, i) in videoList" :key="i" style="width:30em">
|
||||||
class="item"
|
|
||||||
style="flex:1;min-width:460px"
|
|
||||||
v-for="(el, i) in videoList"
|
|
||||||
:key="i"
|
|
||||||
@click="goLinkPage"
|
|
||||||
:style="{
|
|
||||||
'grid-column-start': el.start,
|
|
||||||
'grid-column-end': el.end
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<iframe
|
<iframe
|
||||||
style="width:calc(100% - 10px);height:420px"
|
style="position: relative;left: -1.3em;"
|
||||||
:src="el.source"
|
:src="el.source"
|
||||||
scrolling="no"
|
scrolling="no"
|
||||||
border="0"
|
border="0"
|
||||||
@ -29,26 +19,27 @@
|
|||||||
framespacing="0"
|
framespacing="0"
|
||||||
allowfullscreen="true"
|
allowfullscreen="true"
|
||||||
/>
|
/>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-card>
|
||||||
|
<b-card header-tag="header">
|
||||||
|
<template #header>
|
||||||
|
<h6 style="display:flex">精彩图集</h6>
|
||||||
|
</template>
|
||||||
|
<b-row>
|
||||||
|
<b-col v-for="(el, i) in imageList" :key="i" style="min-width:30em">
|
||||||
|
<b-link :href="`/preview/image?id=${i}`">
|
||||||
|
<b-card class="text-center" :img-src="el.src" :img-alt="el.name">
|
||||||
|
<template>
|
||||||
|
<h6 class="mb-0">{{ el.name }}</h6>
|
||||||
|
</template>
|
||||||
|
</b-card>
|
||||||
|
</b-link>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<b-button-group :buttonList="buttonList" />
|
||||||
</el-card>
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header" class="clearfix" style="text-align:left">
|
|
||||||
<span>精彩图集</span>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div v-for="(el, i) in imagesList" :key="i" class="item">
|
|
||||||
<div class="info-box">
|
|
||||||
<h3>{{ el.name }}</h3>
|
|
||||||
</div>
|
|
||||||
<router-link :to="`/preview/image?id=${i}`">
|
|
||||||
<el-image lazy style="width:100%;height:auto" :src="el.src" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
<e-button-group :buttonList="buttonList" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -89,140 +80,133 @@ export default {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
imagesList() {
|
imageList() {
|
||||||
return Object.values(images);
|
return Object.values(images);
|
||||||
},
|
},
|
||||||
buttonList() {
|
buttonList() {
|
||||||
return [
|
return [
|
||||||
// {
|
|
||||||
// name: "更多精彩视频",
|
|
||||||
// href: "/preview/player?id=0"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "更多精彩图集",
|
|
||||||
// href: "/preview/image?id=0"
|
|
||||||
// }
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
check(el, type) {
|
check(el, type) {
|
||||||
return el.type == type;
|
return el.type == type;
|
||||||
},
|
}
|
||||||
goLinkPage() {}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
a {
|
.recommend {
|
||||||
text-decoration: none;
|
margin: auto;
|
||||||
font-size: 14px;
|
margin-bottom: 5em !important;
|
||||||
color: #666;
|
|
||||||
|
|
||||||
&:hover {
|
.title-box {
|
||||||
color: #3f3f3f;
|
margin-bottom: 3em !important;
|
||||||
}
|
h3 {
|
||||||
}
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
.title {
|
position: relative;
|
||||||
color: #111;
|
padding: 0;
|
||||||
font-weight: 500;
|
padding-bottom: 0.5em;
|
||||||
font-size: 20px;
|
display: inline-block;
|
||||||
margin-bottom: 10px;
|
margin: 0;
|
||||||
cursor: pointer;
|
float: none !important;
|
||||||
}
|
max-width: 80%;
|
||||||
|
&::after {
|
||||||
.notes {
|
content: "";
|
||||||
color: #111;
|
|
||||||
text-align: left;
|
|
||||||
padding: 10px 0;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
height: 0.5em;
|
||||||
font-size: 15px;
|
background-color: navy;
|
||||||
font-weight: 400;
|
position: absolute;
|
||||||
line-height: 22px;
|
left: 0;
|
||||||
text-overflow: ellipsis;
|
margin-left: 0;
|
||||||
white-space: nowrap;
|
bottom: 0;
|
||||||
cursor: pointer;
|
min-width: 3.5em;
|
||||||
&:hover {
|
|
||||||
color: #ff5c38;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-gap: 20px 20px;
|
grid-gap: 2em 2em;
|
||||||
.item {
|
}
|
||||||
width: 100%;
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.component {
|
||||||
|
width: 200px;
|
||||||
|
background: #ff0000;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 320px) {
|
||||||
|
.component {
|
||||||
|
width: 300px;
|
||||||
|
background: #00ffff;
|
||||||
|
font-size: 23px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
@media (min-width: 375px) {
|
||||||
display: flex;
|
.component {
|
||||||
justify-content: space-between;
|
width: 360px;
|
||||||
align-items: center;
|
background: #0000ff;
|
||||||
flex-wrap: wrap;
|
font-size: 26px;
|
||||||
box-sizing: border-box;
|
|
||||||
.item {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.recommend {
|
@media (min-width: 375px) and (min-resolution: 192dpi) {
|
||||||
margin: auto;
|
.component {
|
||||||
margin-bottom: 80px !important;
|
background-image: url(/img/retina2x.png);
|
||||||
|
background: #6666ff;
|
||||||
.el-image {
|
|
||||||
&:hover {
|
|
||||||
/deep/ img {
|
|
||||||
transform: scale(1.1);
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-box {
|
@media (max-width: 480px) {
|
||||||
margin-bottom: 50px !important;
|
.component {
|
||||||
h2 {
|
background: #00ff00;
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
float: none !important;
|
|
||||||
max-width: 80%;
|
|
||||||
font-size: 1.9em;
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
height: 7px;
|
|
||||||
background-color: navy;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
margin-left: 0px;
|
|
||||||
bottom: 0;
|
|
||||||
min-width: 35px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-box {
|
@media (max-width: 767px) {
|
||||||
position: relative;
|
.component {
|
||||||
top: 0;
|
background: #00ff00;
|
||||||
text-align: left;
|
}
|
||||||
color: #fff;
|
}
|
||||||
background: linear-gradient(45deg, crimson, transparent);
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
h3 {
|
@media (min-width: 768px) and (max-width: 979px) {
|
||||||
margin: 0;
|
.component {
|
||||||
padding: 5px 10px;
|
width: 600px;
|
||||||
|
background: #00ff00;
|
||||||
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
.component {
|
||||||
|
background: #00fff0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 980px) {
|
||||||
|
.component {
|
||||||
|
width: 900px;
|
||||||
|
background: #00ff00;
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.component {
|
||||||
|
width: 1000px;
|
||||||
|
background: #00ff00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -4,31 +4,29 @@
|
|||||||
<article id="knowledge">
|
<article id="knowledge">
|
||||||
<h2 style="background:yellowgreen;">知识产权</h2>
|
<h2 style="background:yellowgreen;">知识产权</h2>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<el-card
|
<b-card
|
||||||
class="image"
|
class="image"
|
||||||
shadow="hover"
|
|
||||||
v-for="(el, i) in pdfList"
|
v-for="(el, i) in pdfList"
|
||||||
:key="i"
|
:key="i"
|
||||||
>
|
>
|
||||||
<a target="_blank" :href="buildUrl(el.src)">
|
<a target="_blank" :href="buildUrl(el.src)">
|
||||||
<el-image :src="buildUrl(el.src)" class="image-knowledge" />
|
<b-img :src="buildUrl(el.src)" class="image-knowledge" />
|
||||||
</a>
|
</a>
|
||||||
</el-card>
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article id="honor">
|
<article id="honor">
|
||||||
<h2 style="background:crimson;">荣  誉</h2>
|
<h2 style="background:crimson;">荣  誉</h2>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<el-card
|
<b-card
|
||||||
class="image"
|
class="image"
|
||||||
shadow="hover"
|
|
||||||
v-for="(el, i) in imgList"
|
v-for="(el, i) in imgList"
|
||||||
:key="i"
|
:key="i"
|
||||||
>
|
>
|
||||||
<a target="_blank" :href="buildUrl(el.src)">
|
<a target="_blank" :href="buildUrl(el.src)">
|
||||||
<el-image :src="buildUrl(el.src)" lazy class="image-honor" />
|
<b-img :src="buildUrl(el.src)" lazy class="image-honor" />
|
||||||
</a>
|
</a>
|
||||||
</el-card>
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
@ -78,8 +76,6 @@ export default {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-left: 80px;
|
|
||||||
padding-right: 80px;
|
|
||||||
padding-bottom: 120px;
|
padding-bottom: 120px;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -105,14 +101,16 @@ export default {
|
|||||||
|
|
||||||
&-knowledge {
|
&-knowledge {
|
||||||
display: block;
|
display: block;
|
||||||
width: 415px !important;
|
max-width: 520px !important;
|
||||||
height: 564px !important;
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-honor {
|
&-honor {
|
||||||
display: block;
|
display: block;
|
||||||
width: 415px !important;
|
max-width: 520px !important;
|
||||||
height: 293px !important;
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,83 +0,0 @@
|
|||||||
<template>
|
|
||||||
<li class="menu-item" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
|
|
||||||
<div class="title" @click.self="goLinkPage(node)">{{ node.name }}</div>
|
|
||||||
<ul class="list" v-if="show && node.children && node.children.length">
|
|
||||||
<e-menu-item
|
|
||||||
v-for="(el, i) in node.children"
|
|
||||||
:key="i"
|
|
||||||
:node="el"
|
|
||||||
@index="onClick"
|
|
||||||
@close="onClose"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "eMenuItem",
|
|
||||||
props: {
|
|
||||||
node: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onMouseEnter() {
|
|
||||||
this.show = true;
|
|
||||||
},
|
|
||||||
onMouseLeave() {
|
|
||||||
this.show = false;
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
this.$emit("index");
|
|
||||||
},
|
|
||||||
onClose() {
|
|
||||||
this.show = false;
|
|
||||||
this.$emit("close");
|
|
||||||
},
|
|
||||||
goLinkPage(node) {
|
|
||||||
if (node.href) {
|
|
||||||
this.$router.push({ path: node.href });
|
|
||||||
this.onClick();
|
|
||||||
this.onClose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.menu-item {
|
|
||||||
padding: 0px 20px;
|
|
||||||
line-height: 42px;
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
min-width: 100px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #d4d4d4;
|
|
||||||
border-top: 0;
|
|
||||||
&:hover {
|
|
||||||
color: slateblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
margin-top: -43px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="list">
|
|
||||||
<div
|
|
||||||
class="menu"
|
|
||||||
v-for="(node, i) in options"
|
|
||||||
:key="i"
|
|
||||||
@mouseenter="onMouseEnter(i + 1)"
|
|
||||||
@mouseleave="onMouseLeave(0)"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
v-if="node.href"
|
|
||||||
@click="goLinkPage(node, i)"
|
|
||||||
:style="{
|
|
||||||
background: index == i ? '#f1f4f6' : '#fff'
|
|
||||||
}"
|
|
||||||
>{{ node.name }}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
:style="{
|
|
||||||
background: index == i ? '#f1f4f6' : '#fff'
|
|
||||||
}"
|
|
||||||
>{{ node.name }}</a
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="context"
|
|
||||||
v-if="node.children"
|
|
||||||
:class="active == i + 1 ? 'open' : 'close'"
|
|
||||||
>
|
|
||||||
<ul v-for="(el, j) in node.children" :key="j">
|
|
||||||
<e-menu-item :node="el" @close="active = -1" @index="onClick(i)" />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import eMenuItem from "./eMenuItem";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
eMenuItem
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
index: -1,
|
|
||||||
active: -1
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick(index) {
|
|
||||||
this.index = index;
|
|
||||||
},
|
|
||||||
onMouseEnter(active) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.active = active;
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
onMouseLeave(active) {
|
|
||||||
this.active = active;
|
|
||||||
},
|
|
||||||
goLinkPage(node, index) {
|
|
||||||
this.onClick(index);
|
|
||||||
this.$router.push({ path: node.href });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.list {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
float: none;
|
|
||||||
margin: 0;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #333333;
|
|
||||||
display: block;
|
|
||||||
line-height: 78px;
|
|
||||||
height: 78px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #ebeef5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 99;
|
|
||||||
border-top: 1px solid #ebeef5;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 2px;
|
|
||||||
list-style: none;
|
|
||||||
background-color: #fff;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.open {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
visibility: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
<template>
|
|
||||||
<header class="header">
|
|
||||||
<div class="navbar sticky">
|
|
||||||
<div class="container">
|
|
||||||
<div class="left">
|
|
||||||
<e-logo />
|
|
||||||
</div>
|
|
||||||
<transition name="el-zoom-in-center">
|
|
||||||
<e-menu-list class="center" :options="menus" v-if="show" />
|
|
||||||
</transition>
|
|
||||||
<div class="right" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import eLogo from "@/components/eLogo/index.vue";
|
|
||||||
import eMenuList from "./eMenuList.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
eLogo,
|
|
||||||
eMenuList
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scrollT: 0,
|
|
||||||
show: true
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
menus() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
name: "首页",
|
|
||||||
href: "/home"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "我们的产品",
|
|
||||||
href: "/exhibition"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "经典案例",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: "西安铁路职业技术学院",
|
|
||||||
href: "/preview/pdf?src=西安铁路职业技术学院.pdf"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "贵州装备制造职业学院",
|
|
||||||
href:
|
|
||||||
"/preview/pdf?src=贵州装备制造职业学院机电技术专业实训室建设.pdf"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "关于玖琏",
|
|
||||||
href: "/about"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "联系方式",
|
|
||||||
href: "/relation"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
buyList() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
icon: "el-icon-wallet",
|
|
||||||
name: "商城",
|
|
||||||
click: this.goLinkPage()
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.addEventListener("scroll", this.onScroll);
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
window.removeEventListener("scroll", this.onScroll);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onScroll(e) {
|
|
||||||
let headerEl = document.querySelector(".header");
|
|
||||||
let stickyEl = document.querySelector(".sticky");
|
|
||||||
let stickyT = stickyEl.offsetTop;
|
|
||||||
let scrollT = e.target.scrollingElement.scrollTop;
|
|
||||||
|
|
||||||
let diff = scrollT - this.scrollT;
|
|
||||||
if (scrollT < 160) {
|
|
||||||
if (scrollT > stickyT) {
|
|
||||||
headerEl.classList.add("fixed-top");
|
|
||||||
} else {
|
|
||||||
headerEl.classList.remove("fixed-top");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (diff > 0) {
|
|
||||||
headerEl.style.top = "-78px";
|
|
||||||
} else {
|
|
||||||
headerEl.style.top = "0";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.scrollT = scrollT;
|
|
||||||
},
|
|
||||||
goLinkPage() {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.navbar {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
width: 93.705%;
|
|
||||||
max-width: 1799.136px;
|
|
||||||
margin: auto;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
min-height: 78px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
border: none;
|
|
||||||
float: left;
|
|
||||||
font-size: 0.9375em;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 300px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed-top {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
transition: top 0.5s;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 99;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-open {
|
|
||||||
transition: opacity 0.65s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout">
|
|
||||||
<e-header />
|
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
||||||
<transition name="fade" mode="out-in">
|
|
||||||
<router-view />
|
|
||||||
</transition>
|
|
||||||
</el-scrollbar>
|
|
||||||
<e-footer />
|
|
||||||
<el-backtop>
|
|
||||||
<div
|
|
||||||
style="{
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
background-color: #f2f5f6;
|
|
||||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
color: #1989fa;
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
UP
|
|
||||||
</div>
|
|
||||||
</el-backtop>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import eHeader from "./eHeader/index";
|
|
||||||
import eFooter from "./eFooter/index";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
eHeader,
|
|
||||||
eFooter
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.scrollbar-wrapper {
|
|
||||||
overflow: scroll;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -3,11 +3,11 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(el, i) in list"
|
v-for="(el, i) in list"
|
||||||
:key="i"
|
:key="i"
|
||||||
class="card"
|
class="item"
|
||||||
:style="{ color: index == i ? '#ff6428' : '#666' }"
|
:style="{ color: index == i ? '#ff6428' : '#666' }"
|
||||||
@click="onPlayVideo(el, i)"
|
@click="onPlayVideo(el, i)"
|
||||||
>
|
>
|
||||||
<h4>{{ i + 1 }}. {{ el.name }}</h4>
|
<h6>{{ i + 1 }}. {{ el.name }}</h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -33,20 +33,41 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.list {
|
.list {
|
||||||
position: absolute;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.card {
|
height: calc(100vh - 60px);
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: rgb(239, 239, 239);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: #bfbfbf;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-corner {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
h4 {
|
h6 {
|
||||||
margin: 5px 10px;
|
margin: 5px 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color:blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pre-image">
|
<div class="pre-image">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="layer">
|
<b-carousel
|
||||||
<div class="main">
|
v-model="slide"
|
||||||
<el-carousel trigger="click" height="calc(100%)">
|
:interval="4000"
|
||||||
<el-carousel-item
|
controls
|
||||||
v-for="(img, i) in model.sources"
|
indicators
|
||||||
:key="i"
|
background="#ababab"
|
||||||
style="width:100%;height:100%"
|
style="text-shadow: 1px 1px 2px #333;"
|
||||||
|
@sliding-start="onSlideStart"
|
||||||
|
@sliding-end="onSlideEnd"
|
||||||
>
|
>
|
||||||
<el-image :src="buildUrl(img)" />
|
<b-carousel-slide v-for="(img, i) in model.sources" :key="i" :img-src="buildUrl(img)"></b-carousel-slide>
|
||||||
</el-carousel-item>
|
</b-carousel>
|
||||||
</el-carousel>
|
<b-button class="btn" v-b-toggle.sidebar-right>菜单</b-button>
|
||||||
</div>
|
<b-sidebar id="sidebar-right" shown title="" right shadow>
|
||||||
<div class="side">
|
|
||||||
<e-list :list="imageList" @play="onPreview" :index="index" />
|
<e-list :list="imageList" @play="onPreview" :index="index" />
|
||||||
</div>
|
</b-sidebar>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -33,7 +33,9 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
model: {},
|
model: {},
|
||||||
index: 0
|
index: 0,
|
||||||
|
slide: 0,
|
||||||
|
sliding: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -55,65 +57,28 @@ export default {
|
|||||||
onPreview(el, i) {
|
onPreview(el, i) {
|
||||||
this.model = el;
|
this.model = el;
|
||||||
this.index = i;
|
this.index = i;
|
||||||
|
},
|
||||||
|
onSlideStart(slide) {
|
||||||
|
this.sliding = true
|
||||||
|
},
|
||||||
|
onSlideEnd(slide) {
|
||||||
|
this.sliding = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.pre-image {
|
.pre-image {
|
||||||
position: relative;
|
width: 100%;
|
||||||
height: 100vh;
|
|
||||||
.container {
|
.container {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 80px);
|
|
||||||
|
|
||||||
.layer {
|
|
||||||
min-width: 1400px;
|
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
.main {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.el-carousel {
|
|
||||||
height: 100%;
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.side {
|
|
||||||
width: 320px;
|
|
||||||
position: relative;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: #111;
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: rgb(239, 239, 239);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #bfbfbf;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #666;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-corner {
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
img {
|
||||||
|
max-height: calc(100vh - 105px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<p><span v-html="`邮  箱：`" />henry@joylink.club</p>
|
<p><span v-html="`邮  箱：`" />henry@joylink.club</p>
|
||||||
<p><span v-html="`微  信：`" /></p>
|
<p><span v-html="`微  信：`" /></p>
|
||||||
<div class="picture">
|
<div class="picture">
|
||||||
<el-image :src="wxcode" />
|
<b-img class="image" :src="wxcode" />
|
||||||
</div>
|
</div>
|
||||||
</address>
|
</address>
|
||||||
</div>
|
</div>
|
||||||
@ -27,19 +27,21 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
background: #f7f7f9;
|
background: #f7f7f9;
|
||||||
|
height: calc(100vh - 66px);
|
||||||
.container {
|
.container {
|
||||||
width: 50%;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 30px 50px;
|
padding: 4.8em;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
.picture {
|
.picture {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.el-image {
|
.image {
|
||||||
width: 400px;
|
width:100%;
|
||||||
border: 1px solid #eee;
|
max-width: 40em;
|
||||||
|
height:auto;
|
||||||
|
border: 0.1em solid #eee;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,6 +16,7 @@ module.exports = {
|
|||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
devServer: {
|
devServer: {
|
||||||
port: port,
|
port: port,
|
||||||
|
hotOnly: true,
|
||||||
open: false,
|
open: false,
|
||||||
overlay: {
|
overlay: {
|
||||||
warnings: false,
|
warnings: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user