master
parent
951b4f072b
commit
454a5c7f31
|
|
@ -10,8 +10,12 @@ module.exports = {
|
||||||
// Paths
|
// Paths
|
||||||
assetsSubDirectory: 'static',
|
assetsSubDirectory: 'static',
|
||||||
assetsPublicPath: '/',
|
assetsPublicPath: '/',
|
||||||
proxyTable: {},
|
proxyTable: {
|
||||||
|
'/users/':{
|
||||||
|
target:'http://47.109.29.153:50012',
|
||||||
|
changeOrigin:true
|
||||||
|
}
|
||||||
|
},
|
||||||
// Various Dev Server settings
|
// Various Dev Server settings
|
||||||
host: 'localhost', // can be overwritten by process.env.HOST
|
host: 'localhost', // can be overwritten by process.env.HOST
|
||||||
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,11 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.24.0",
|
"axios": "^0.24.0",
|
||||||
|
"good-storage": "^1.1.1",
|
||||||
"mobile-detect": "^1.4.5",
|
"mobile-detect": "^1.4.5",
|
||||||
"static-extend": "^0.1.2",
|
"static-extend": "^0.1.2",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
|
"vue-awesome-swiper": "^4.1.1",
|
||||||
"vue-router": "^3.0.1"
|
"vue-router": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -4948,6 +4950,11 @@
|
||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/good-storage": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.nlark.com/good-storage/download/good-storage-1.1.1.tgz",
|
||||||
|
"integrity": "sha1-CBUBwBYH1f7iohT5To9fnLmUeJ8="
|
||||||
|
},
|
||||||
"node_modules/graceful-fs": {
|
"node_modules/graceful-fs": {
|
||||||
"version": "4.2.8",
|
"version": "4.2.8",
|
||||||
"resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz",
|
"resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz",
|
||||||
|
|
@ -12722,6 +12729,18 @@
|
||||||
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
||||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
|
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-awesome-swiper": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.nlark.com/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
|
||||||
|
"integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4=",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"swiper": "^5.2.0",
|
||||||
|
"vue": "2.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-hot-reload-api": {
|
"node_modules/vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.nlark.com/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
"resolved": "https://registry.nlark.com/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
||||||
|
|
@ -17953,8 +17972,7 @@
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
||||||
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"requires": {}
|
|
||||||
},
|
},
|
||||||
"fast-deep-equal": {
|
"fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
|
|
@ -18254,6 +18272,11 @@
|
||||||
"slash": "^1.0.0"
|
"slash": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"good-storage": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.nlark.com/good-storage/download/good-storage-1.1.1.tgz",
|
||||||
|
"integrity": "sha1-CBUBwBYH1f7iohT5To9fnLmUeJ8="
|
||||||
|
},
|
||||||
"graceful-fs": {
|
"graceful-fs": {
|
||||||
"version": "4.2.8",
|
"version": "4.2.8",
|
||||||
"resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz",
|
"resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz",
|
||||||
|
|
@ -21177,8 +21200,7 @@
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
||||||
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"requires": {}
|
|
||||||
},
|
},
|
||||||
"fast-deep-equal": {
|
"fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
|
|
@ -24370,8 +24392,7 @@
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
||||||
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"requires": {}
|
|
||||||
},
|
},
|
||||||
"fast-deep-equal": {
|
"fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
|
|
@ -24690,6 +24711,11 @@
|
||||||
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
||||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
|
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
|
||||||
},
|
},
|
||||||
|
"vue-awesome-swiper": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.nlark.com/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
|
||||||
|
"integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
|
||||||
|
},
|
||||||
"vue-hot-reload-api": {
|
"vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.nlark.com/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
"resolved": "https://registry.nlark.com/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
||||||
|
|
@ -25058,8 +25084,7 @@
|
||||||
"version": "3.5.2",
|
"version": "3.5.2",
|
||||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
"resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637523772179&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
|
||||||
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
"integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
|
||||||
"dev": true,
|
"dev": true
|
||||||
"requires": {}
|
|
||||||
},
|
},
|
||||||
"camelcase": {
|
"camelcase": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,11 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.24.0",
|
"axios": "^0.24.0",
|
||||||
|
"good-storage": "^1.1.1",
|
||||||
"mobile-detect": "^1.4.5",
|
"mobile-detect": "^1.4.5",
|
||||||
"static-extend": "^0.1.2",
|
"static-extend": "^0.1.2",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
|
"vue-awesome-swiper": "^4.1.1",
|
||||||
"vue-router": "^3.0.1"
|
"vue-router": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'App'
|
name: 'App'
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,31 @@
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
-webkit-user-select:none;
|
||||||
|
-moz-user-select:none;
|
||||||
|
-ms-user-select:none;
|
||||||
|
user-select:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #9c7cfa;
|
background-color: #9c7cfa;
|
||||||
}
|
}
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
width: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 0px;
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
body::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||||
|
border-radius: 0;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
}
|
||||||
div {
|
div {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
@ -43,7 +64,6 @@ img {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.header-box .logo {
|
.header-box .logo {
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -66,8 +86,10 @@ img {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.title-item {
|
.title-item {
|
||||||
padding: 30px 20px 12px 20px;
|
/* padding: 30px 20px 12px 20px; */
|
||||||
|
padding: 30px 20px 9px 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
.activeTitle {
|
.activeTitle {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
|
@ -108,6 +130,12 @@ img {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.main-box {
|
||||||
|
margin: 60px 0 0px 0;
|
||||||
|
padding: 0 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
.main-left {
|
.main-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -119,8 +147,15 @@ img {
|
||||||
background: url(../../../static/img/home/left-kuang.png) no-repeat;
|
background: url(../../../static/img/home/left-kuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 390px;
|
width: 390px;
|
||||||
|
/* height: 296px; */
|
||||||
|
height: 244px;
|
||||||
|
}
|
||||||
|
.left-one:first-child{
|
||||||
height: 296px;
|
height: 296px;
|
||||||
}
|
}
|
||||||
|
.left-one:last-child{
|
||||||
|
height: 222px;
|
||||||
|
}
|
||||||
.left-content {
|
.left-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -135,13 +170,26 @@ img {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.left-one:nth-child(2) .left-title {
|
||||||
|
height: 57px;
|
||||||
|
}
|
||||||
|
.left-one:nth-child(3) .left-title {
|
||||||
|
height: 53px;
|
||||||
|
}
|
||||||
|
.main-right .left-title{
|
||||||
|
height: 57px;
|
||||||
|
}
|
||||||
.pultitle {
|
.pultitle {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
|
/* position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%); */
|
||||||
}
|
}
|
||||||
.three-content {font-size: 18px;line-height: 30px;color: #7557CC;}
|
.three-content {font-size: 18px;line-height: 30px;color: #7557CC;}
|
||||||
.left-last {
|
.left-last {
|
||||||
|
|
@ -160,7 +208,7 @@ img {
|
||||||
color: #9C7CFA;font-size: 18px;
|
color: #9C7CFA;font-size: 18px;
|
||||||
}
|
}
|
||||||
.left-notice {font-size: 18px;line-height: 30px;height: 60px;}
|
.left-notice {font-size: 18px;line-height: 30px;height: 60px;}
|
||||||
.notice-time {display: flex;justify-content: space-between;margin: 10px 0;font-size: 18px;color: #6E6E6E;margin-top: 30px;}
|
.notice-time {display: flex;justify-content: space-between;margin: 10px 0;font-size: 18px;color: #6E6E6E;margin-top: 0px;}
|
||||||
.notice-time div:nth-child(2) {
|
.notice-time div:nth-child(2) {
|
||||||
display: flex;align-items: center;
|
display: flex;align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -177,17 +225,24 @@ img {
|
||||||
.meal-box div {font-size: 18px;line-height: 30px;}
|
.meal-box div {font-size: 18px;line-height: 30px;}
|
||||||
.main-center {
|
.main-center {
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
width: 60%;
|
height: 767px;
|
||||||
|
/* width: 60%; */
|
||||||
}
|
}
|
||||||
.center-title {color: #7557CC;font-size: 36px;text-align: center;line-height: 40px;padding-top: 40px;}
|
.center-title {color: #7557CC;font-size: 36px;text-align: center;line-height: 40px;padding-top: 32px;}
|
||||||
.center-img-box {
|
.center-img-box {
|
||||||
background: url(../../../static/img/home/class-dongt.png) no-repeat;
|
background: url(../../../static/img/home/class-dongt.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 967px;
|
width: 912px;
|
||||||
height: 900px;
|
height: 767px;
|
||||||
}
|
}
|
||||||
.img-box {margin: 76px 83px 192px 74px;}
|
.img-box {
|
||||||
.remind-box {display: flex;justify-content: center;margin-top: 10px;}
|
margin: 76px 83px 0px 74px;
|
||||||
|
position: relative;}
|
||||||
|
.swiper-pagination {position: absolute;left: 50%;transform: translateX(-60%);bottom: 120px;z-index: -1;}
|
||||||
|
.home-slide{height: 430px;}
|
||||||
|
.swiper-pagination .swiper-pagination-bullet {margin: 0 6px;}
|
||||||
|
.swiper-pagination .swiper-pagination-bullet-active {background-color: #9c7cfa;}
|
||||||
|
.remind-box {display: flex;justify-content: center;margin-top: -30px;}
|
||||||
.remind-box > div {background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 174px;height: 64px;display: flex;justify-content: center;align-items: center;}
|
.remind-box > div {background-color: rgba(0,0,0,.3);color: #FFFFFF;border-radius: 50px;position: relative;width: 174px;height: 64px;display: flex;justify-content: center;align-items: center;}
|
||||||
.remind-box > div:nth-child(2) {margin: 0 88px;}
|
.remind-box > div:nth-child(2) {margin: 0 88px;}
|
||||||
.remind-box img {width: 47px;height: 41px;}
|
.remind-box img {width: 47px;height: 41px;}
|
||||||
|
|
@ -197,12 +252,19 @@ img {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 390px;
|
width: 390px;
|
||||||
height: 900px;
|
/* height: 900px; */
|
||||||
|
height:767px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: url(../../../static/img/home/right-back.png) no-repeat;
|
background: url(../../../static/img/home/right-back.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.right-content {color: #7557CC;text-align: center;height: 90%; overflow: hidden;overflow-y: scroll;}
|
.img-box img{
|
||||||
|
position: relative;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.right-content {color: #7557CC;text-align: center;
|
||||||
|
height: 90%;
|
||||||
|
overflow: hidden;overflow-y: scroll;}
|
||||||
.right-content::-webkit-scrollbar {
|
.right-content::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -217,7 +279,7 @@ img {
|
||||||
}
|
}
|
||||||
.oddActive {background-color: #F7F7F7;}
|
.oddActive {background-color: #F7F7F7;}
|
||||||
|
|
||||||
.popu-box {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #FFFFFF;padding: 0px 34px;border-radius: 10px;width: 620px;height: 370px;font-size: 20px;color: #3F3F3F;box-shadow: 0px 15px 29px 3px rgba(93, 79, 133, 0.35);border-radius: 10px;}
|
.popu-box {position: fixed;top: 50%;left: 50%;z-index: 200;transform: translate(-50%,-50%);background-color: #FFFFFF;padding: 0px 34px;border-radius: 10px;width: 620px;height: 370px;font-size: 20px;color: #3F3F3F;box-shadow: 0px 15px 29px 3px rgba(93, 79, 133, 0.35);border-radius: 10px;}
|
||||||
.item-row {
|
.item-row {
|
||||||
display: flex;align-items: center;
|
display: flex;align-items: center;
|
||||||
padding: 33px 0 30px 0;
|
padding: 33px 0 30px 0;
|
||||||
|
|
@ -247,7 +309,8 @@ img {
|
||||||
background: url(../../../static/img/attendancedetail/babyactive-left.png) no-repeat;
|
background: url(../../../static/img/attendancedetail/babyactive-left.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 464px;
|
width: 464px;
|
||||||
height: 826px;
|
/* height: 826px; */
|
||||||
|
height: 764px;
|
||||||
}
|
}
|
||||||
.class-left-title {
|
.class-left-title {
|
||||||
color: #FFE68F;
|
color: #FFE68F;
|
||||||
|
|
@ -255,7 +318,8 @@ img {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 60px;
|
/* height: 66px; */
|
||||||
|
height: 56px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
@ -279,12 +343,14 @@ img {
|
||||||
color: #7557cc;
|
color: #7557cc;
|
||||||
}
|
}
|
||||||
.baby-content-box {
|
.baby-content-box {
|
||||||
height: 760px;
|
/* height: 750px; */
|
||||||
|
height: 705px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
border-radius: 0px 0px 15px 15px;
|
border-radius: 0px 0px 15px 15px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.baby-content-box::-webkit-scrollbar {
|
.baby-content-box::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -293,14 +359,16 @@ img {
|
||||||
font-size: 30px;color: #9C7CFA;font-weight: bold;
|
font-size: 30px;color: #9C7CFA;font-weight: bold;
|
||||||
}
|
}
|
||||||
.class-item-box {
|
.class-item-box {
|
||||||
background: #FFFFFF;border-radius: 5px;padding: 7.5px;margin-bottom: 7px;
|
background: #FFFFFF;border-radius: 5px;padding: 7.5px;margin-bottom: 7px;position: relative;
|
||||||
}
|
}
|
||||||
.teather-title {
|
.teather-title {
|
||||||
font-size: 24px;color: #3F3F3F;font-weight: bold;
|
font-size: 24px;color: #3F3F3F;font-weight: bold;
|
||||||
}
|
}
|
||||||
.teather-box {
|
.teather-box {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
|
height: 204px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
|
|
@ -342,10 +410,11 @@ img {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
/* height: 826px; */
|
||||||
|
height: 764px;
|
||||||
background: url(../../../static/img/attendancedetail/babyactive-right.png) no-repeat;
|
background: url(../../../static/img/attendancedetail/babyactive-right.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
height: 826px;
|
|
||||||
}
|
}
|
||||||
.time-title-box {background-color: #9C7CFA;font-size: 18px;font-weight: bold;color: #FFFFFF; height: 34px;border-radius: 10px;line-height: 34px;display: flex;justify-content: space-around;}
|
.time-title-box {background-color: #9C7CFA;font-size: 18px;font-weight: bold;color: #FFFFFF; height: 34px;border-radius: 10px;line-height: 34px;display: flex;justify-content: space-around;}
|
||||||
.time-title-box div{width: 16%;text-align: center;}
|
.time-title-box div{width: 16%;text-align: center;}
|
||||||
|
|
@ -362,9 +431,10 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 出勤详情 */
|
/* 出勤详情 */
|
||||||
.attendance-box,.babyalbum-box {
|
.attendance-box {
|
||||||
width: 1200px;
|
width: 1210px;
|
||||||
height: 818px;
|
/* height: 818px; */
|
||||||
|
height: 767px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 3px solid #7557CC;
|
border: 3px solid #7557CC;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
@ -372,35 +442,61 @@ img {
|
||||||
margin-top: 57px;
|
margin-top: 57px;
|
||||||
margin-bottom: 110px;
|
margin-bottom: 110px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.attendance-box3{
|
||||||
|
position: relative;
|
||||||
|
width: 1210px;
|
||||||
|
height: 818px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 3px solid #7557CC;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 57px;
|
||||||
|
margin-bottom: 110px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
.babyalbum-box::-webkit-scrollbar,.attendance-box::-webkit-scrollbar{
|
.babyalbum-box::-webkit-scrollbar,.attendance-box::-webkit-scrollbar,.attendance-box3::-webkit-scrollbar{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.attendance-left {
|
.attendance-left {
|
||||||
min-width: 230px;
|
width: 250px;
|
||||||
background-color: #7557cc;
|
background-color: #7557cc;
|
||||||
height: 812px;
|
/* height: 812px; */
|
||||||
|
height: 764px;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
border-radius: 15px 0 0 15px;
|
border-radius: 15px 0 0 15px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding-top: 95px;
|
padding-top: 95px;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
.attendance-right {
|
.attendance-right {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 812px;
|
/* height: 812px; */
|
||||||
|
height: 761px;
|
||||||
padding: 48px 40px;
|
padding: 48px 40px;
|
||||||
display: flex;
|
/* display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap; */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
position: relative;
|
}
|
||||||
|
.attendance-right>div{
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.attendance-right::-webkit-scrollbar{
|
.attendance-right::-webkit-scrollbar{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.attendance-left-item-box {display: flex;align-items: center;font-size: 24px;color: #FFE68F;width: 100%;height: 76px;padding: 0 10px;}
|
.attendance-left-item-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #FFE68F;
|
||||||
|
width: 100%;
|
||||||
|
height: 76px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
.attendance-active {background-color: #6348b0;}
|
.attendance-active {background-color: #6348b0;}
|
||||||
.attendance-left-item-box img{width: 20px;height: 20px;margin-right: 10px;}
|
.attendance-left-item-box img{width: 20px;height: 20px;margin-right: 10px;}
|
||||||
.attendance-right-item-box {
|
.attendance-right-item-box {
|
||||||
|
|
@ -410,6 +506,7 @@ img {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 64px;
|
margin-bottom: 64px;
|
||||||
width: 14.2%;
|
width: 14.2%;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
.attendance-right-item-box img {
|
.attendance-right-item-box img {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
|
|
@ -429,13 +526,25 @@ img {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
.nothing-box {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box;}
|
.nothing-box {width: 879px;height: 641px;display: flex;justify-content: center;align-items: center;box-sizing: border-box;}
|
||||||
.nothing-box img {width: 116px;height: 195px;margin-right: 36px;}
|
.nothing-box img {width: 116px;height: 195px;margin-right: 36px;}
|
||||||
.nothing-box div {font-size: 24px;color: #3F3F3F;font-weight: bold;margin-top: 80px;}
|
.nothing-box div {font-size: 24px;color: #3F3F3F;font-weight: bold;margin-top: 80px;}
|
||||||
/* 宝宝相册 */
|
/* 宝宝相册 */
|
||||||
.babyalbum-box {
|
.babyalbum-box {
|
||||||
padding: 35px 20px;
|
width: 1210px;
|
||||||
|
/* height: 818px; */
|
||||||
|
height: 767px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 3px solid #7557CC;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 57px;
|
||||||
|
margin-bottom: 110px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 35px 20px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.babyalbum-item-box {
|
.babyalbum-item-box {
|
||||||
|
|
@ -462,8 +571,9 @@ img {
|
||||||
}
|
}
|
||||||
/* 疫情管理 */
|
/* 疫情管理 */
|
||||||
.yiqing-box {
|
.yiqing-box {
|
||||||
width: 1200px;
|
width: 1210px;
|
||||||
height: 818px;
|
/* height: 818px; */
|
||||||
|
height: 767px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 3px solid #7557CC;
|
border: 3px solid #7557CC;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
@ -480,6 +590,7 @@ img {
|
||||||
}
|
}
|
||||||
.yiqing-content {
|
.yiqing-content {
|
||||||
height: 680px;
|
height: 680px;
|
||||||
|
height: 621px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -501,7 +612,8 @@ img {
|
||||||
.introduction-item > img {width: 12px;height: 20px;margin-top: 4px;margin-right: 20px;}
|
.introduction-item > img {width: 12px;height: 20px;margin-top: 4px;margin-right: 20px;}
|
||||||
.introduction-right {
|
.introduction-right {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 812px;
|
/* height: 812px; */
|
||||||
|
height: 764px;
|
||||||
padding: 46px 50px;
|
padding: 46px 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -557,8 +669,9 @@ img {
|
||||||
.teacher-right-box {font-size: 16px;color: #666666;line-height: 30px;}
|
.teacher-right-box {font-size: 16px;color: #666666;line-height: 30px;}
|
||||||
/* 宝宝相册详情 */
|
/* 宝宝相册详情 */
|
||||||
.babyalbum-detail-box {
|
.babyalbum-detail-box {
|
||||||
width: 1200px;
|
width: 1210px;
|
||||||
height: 818px;
|
/* height: 818px; */
|
||||||
|
height: 767px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 3px solid #7557CC;
|
border: 3px solid #7557CC;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
@ -575,7 +688,7 @@ img {
|
||||||
.baby-top-box img {width: 48px;height: 48px;}
|
.baby-top-box img {width: 48px;height: 48px;}
|
||||||
.baby-name {font-size: 24px;font-weight: 800;color: #3F3F3F;}
|
.baby-name {font-size: 24px;font-weight: 800;color: #3F3F3F;}
|
||||||
.baby-album-box {padding: 97px 0 126px 0;height: 100%; display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;position: relative;}
|
.baby-album-box {padding: 97px 0 126px 0;height: 100%; display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;position: relative;}
|
||||||
.baby-album-box > img {width: 58px;height: 58px;}
|
.baby-album-box > img {width: 58px;height: 58px; -webkit-tap-highlight-color:transparent;}
|
||||||
.introduce-img {display: flex;flex-wrap: wrap;}
|
.introduce-img {display: flex;flex-wrap: wrap;}
|
||||||
.introduce-img img {margin: 10px 10px 0 0;}
|
.introduce-img img {margin: 10px 10px 0 0;}
|
||||||
|
|
||||||
|
|
@ -592,37 +705,11 @@ img {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
margin-bottom: 78px;
|
margin-bottom: 78px;
|
||||||
}
|
}
|
||||||
.baby-img01{width: 119px;height: 119px;background: #D3D3D3;border: 5px solid #ECE6FF;border-radius: 50%;}
|
.baby-img01{width: 119px;height: 119px;background: #D3D3D3;border: 5px solid #ECE6FF;border-radius: 50%;object-fit: cover;}
|
||||||
.baby-img02{width: 245px;height: 154px;border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #F3F3F3;margin-right: 20px;}
|
.baby-img02{width: 245px;height: 154px;object-fit: cover; border-radius: 10px;display: flex;justify-content: center;align-items: center;background-color: #F3F3F3;margin-right: 20px;}
|
||||||
.attend-title {text-align: left;padding-right: 50px;width: 100%;}
|
.attend-title {text-align: left;padding-right: 50px;width: 100%;}
|
||||||
.chengjian{display: flex;margin-top: 5px;font-size: 16px;color: #666666;}
|
.chengjian{display: flex;margin-top: 5px;font-size: 16px;color: #666666;}
|
||||||
.chengjian>div{display: flex;align-items: flex-end;width: 50%;line-height: 30px;}
|
.chengjian>div{display: flex;align-items: flex-end;width: 50%;line-height: 30px;}
|
||||||
@media screen and (min-width:768px) and (max-width:1400px) {
|
.wellcome-img{position: fixed;z-index: 100;top: 0;left: 0;right: 0;bottom: 0;}
|
||||||
.header-box {
|
.erro-box{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999999;display: flex;justify-content: center;align-items: center;background-color: #FFFFFF;}
|
||||||
height: 70px;
|
.erro-box img{width: 660px;height: 614px;}
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
.main {
|
|
||||||
margin: 40px 0 70px 0;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
.left-one {
|
|
||||||
width: 250px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.line {margin: 5px 0;}
|
|
||||||
.left-title {font-size: 18px;height: 46px;}
|
|
||||||
.left-content {padding: 0 10px;}
|
|
||||||
.second-title {font-size: 16px;}
|
|
||||||
.three-content {font-size: 14px;line-height: 24px;}
|
|
||||||
.left-last > div div:nth-child(1) {font-size: 16px;}
|
|
||||||
.left-last > div div:nth-child(2) {font-size: 14px;}
|
|
||||||
.threeMealActive {font-size: 20px!important;}
|
|
||||||
.eat-three {font-size: 18px;}
|
|
||||||
.meal-box img {width: 76px;
|
|
||||||
max-height: 70px;
|
|
||||||
margin-right: 15px;}
|
|
||||||
.meal-box div {font-size: 14px;line-height: 24px;}
|
|
||||||
.notice-time { margin-top: 10px;font-size: 14px;}
|
|
||||||
.main-center{width: auto;}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -1,34 +1,78 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="width: 100%;">
|
<div style="width: 100%;">
|
||||||
<div class="yiqing-title attend-title">何雨桐</div>
|
<div class="yiqing-title attend-title">{{dataObj.First_Guarder}}</div>
|
||||||
<img src="../../static/img/kindergartenIntroduce/icon-back.png" class="back-img" @click="backNews">
|
<img src="../../static/img/kindergartenIntroduce/icon-back.png" class="back-img" @click="backNews">
|
||||||
<div class="attendance-con">
|
<div class="attendance-con">
|
||||||
<div class="top-row">
|
<div class="top-row">
|
||||||
<img src="../../static/img/seconds/tu-01.png" class="baby-img01" alt="">
|
<img :src="dataObj.Head_Img" class="baby-img01 flex-s0" alt="">
|
||||||
<div class="attenddetail-ring">
|
<div class="attenddetail-ring">
|
||||||
<div>
|
<div class="flex-s0">
|
||||||
<div>性别：女</div>
|
<div>性别：{{['男','女'][dataObj.Sex]}}</div>
|
||||||
<div>班级：中二班</div>
|
<div>班级：{{dataObj.ClassName}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex-s0">
|
||||||
<div>生日：2017-08-21</div>
|
<div>生日：{{dataObj.Born}}</div>
|
||||||
<div>考勤卡：20152222</div>
|
<div>考勤卡：{{dataObj.IdCarld}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex-s0">
|
||||||
<div>家长：母亲 何智刚</div>
|
<div>家长：{{dataObj.Relation}} {{dataObj.StuName}}</div>
|
||||||
<div>电话号码：181****258</div>
|
<div>电话号码：{{dataObj.First_GuarderTel}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="yiqing-title attend-title">今日晨检考勤</div>
|
<div class="yiqing-title attend-title">今日晨检考勤</div>
|
||||||
<div class="attendance-con">
|
<div class="attendance-con">
|
||||||
<div class="chengjian">
|
<div class="chengjian" v-if="dataArr.length!=0">
|
||||||
|
<!-- <div v-for="(item,index) in dataArr" :key="index">
|
||||||
|
<img v-if="item.CheckDate!=null || item.CheckTime!=null" class="baby-img02" :src="dataObj.Head_Img" >
|
||||||
|
<div v-else class="baby-img02" >
|
||||||
|
<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="baby-img02" src="../../static/img/seconds/tu-01.png" >
|
<div v-if="item.CheckType=='OnDuty'">入院时间：</div>
|
||||||
|
<div v-else>离院时间：</div>
|
||||||
|
<div v-if="item.CheckType=='OnDuty'">
|
||||||
|
<div v-if="item.CheckDate!=null">{{item.CheckDate}}</div>
|
||||||
|
<div v-else>暂无数据展示</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div v-if="item.CheckTime!=null">{{item.CheckTime}}</div>
|
||||||
|
<div v-else>暂无数据展示</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div>
|
||||||
|
<img v-if="dataArr[0].CheckDate!=null" class="baby-img02" :src="dataObj.Head_Img" >
|
||||||
|
<div v-else class="baby-img02" >
|
||||||
|
<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>入院时间：</div>
|
<div>入院时间：</div>
|
||||||
<div>08:20:04</div>
|
<div v-if="dataArr[0].CheckDate!=null">{{dataArr[0].CheckDate}}</div>
|
||||||
|
<div v-else>暂无数据展示</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img v-if="dataArr[1].CheckDate!=null" class="baby-img02" :src="dataObj.Head_Img" >
|
||||||
|
<div v-else class="baby-img02" >
|
||||||
|
<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>离院时间：</div>
|
||||||
|
<div v-if="dataArr[1].CheckDate!=null">{{dataArr[0].CheckDate}}</div>
|
||||||
|
<div v-else>暂无数据展示</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chengjian" v-else>
|
||||||
|
<div>
|
||||||
|
<div class="baby-img02" >
|
||||||
|
<img src="../../static/img/attendancedetail/icon-wu.png" style="width: 156px;height: 106px;" >
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>入院时间：</div>
|
||||||
|
<div>暂无数据展示</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -54,17 +98,24 @@
|
||||||
default:()=>{
|
default:()=>{
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
dataArr:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
stuData:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
backNews(){
|
backNews(){
|
||||||
this.$emit('backNews',false);
|
this.$emit('backNews',false);
|
||||||
}
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<error-page v-if="showError" @closeError="closeError"></error-page>
|
||||||
<!-- 主体内容 -->
|
<!-- 主体内容 -->
|
||||||
<div class="attendance-box">
|
<div v-if="!showError" class="attendance-box">
|
||||||
<div class="attendance-left">
|
<div class="attendance-left">
|
||||||
<div @click="chooseNavEv(index)" class="attendance-left-item-box" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
|
<div @click="chooseNavEv(index)" class="attendance-left-item-box" :class="navIndex==index?'attendance-active':''" v-for="(item,index) in navArr" :key="index">
|
||||||
<img :src="item.icon">
|
<img :src="item.icon">
|
||||||
|
|
@ -10,17 +11,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="attendance-right">
|
<div class="attendance-right">
|
||||||
<div v-if="!showDetail" style="display: flex;flex-wrap: wrap;">
|
<div v-if="!showDetail" style="display: flex;flex-wrap: wrap;">
|
||||||
<div v-if="!isNothing" class="attendance-right-item-box" @click="goDetail(index)" v-for="(item,index) in babyArr" :key="index">
|
<div v-if="isNothing" class="attendance-right-item-box" @click="goDetail(index)" v-for="(item,index) in babyArr" :key="index">
|
||||||
<img :src="item.Head_Img" alt="">
|
<img :src="item.Head_Img" alt="">
|
||||||
<span>{{item.DisplayName}}</span>
|
<span>{{item.DisplayName}}</span>
|
||||||
<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
|
<div :style="{background:['#9C7CFA','#FF9393','#D3D3D3','#F4B52F'][item.CheckResult]}">{{['正常','未到校','离校','请假'][item.CheckResult]}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isNothing" class="nothing-box">
|
<div v-if="!isNothing" class="nothing-box">
|
||||||
<img src="../../static/img/attendancedetail/icon-nothing.png">
|
<img src="../../static/img/attendancedetail/icon-nothing.png">
|
||||||
<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
|
<div>{{['没有出勤','暂无离校','暂无未到校','没有请假'][navIndex]}}的宝宝</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<attendanceBabuDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews"></attendanceBabuDetail>
|
<attendanceBabuDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews" :dataArr="dataArr"></attendanceBabuDetail>
|
||||||
|
<loading :isShow="showLoading"></loading>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,17 +44,29 @@
|
||||||
],
|
],
|
||||||
navIndex:0,
|
navIndex:0,
|
||||||
babyArr:[],
|
babyArr:[],
|
||||||
isNothing:false,
|
isNothing:true,
|
||||||
cunArr:[],
|
cunArr:[],
|
||||||
showDetail:false,
|
showDetail:false,
|
||||||
dataObj:''
|
dataObj:{},
|
||||||
|
dataArr:[],
|
||||||
|
stuIndex:0,
|
||||||
|
showLoading:true,
|
||||||
|
showError:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
closeError(){
|
||||||
|
this.showError = false;
|
||||||
|
},
|
||||||
goDetail(e){
|
goDetail(e){
|
||||||
this.showDetail = true;
|
if(this.$storage.get('network')){
|
||||||
|
this.showLoading = true;
|
||||||
|
this.stuIndex = e;
|
||||||
// 获取当前学生信息
|
// 获取当前学生信息
|
||||||
this.queryattendancebyidEv(this.babyArr[e].StuGuid);
|
this.getupdatestudentlistEv(this.babyArr[e].StuGuid);
|
||||||
|
} else {
|
||||||
|
this.showError = true;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 继承详情返回事件
|
// 继承详情返回事件
|
||||||
backNews(e){
|
backNews(e){
|
||||||
|
|
@ -63,12 +77,15 @@
|
||||||
if(e==0){
|
if(e==0){
|
||||||
this.babyArr = this.cunArr;
|
this.babyArr = this.cunArr;
|
||||||
} else {
|
} else {
|
||||||
this.babyArr = this.cunArr.filter(item=>{item.CheckResult==e});
|
this.babyArr = this.cunArr.filter(item=>item.CheckResult===e);
|
||||||
}
|
}
|
||||||
this.babyArr.length ? this.isNothing = false : this.isNothing = true
|
this.babyArr.length ? this.isNothing = true : this.isNothing = false
|
||||||
|
this.showDetail = false;
|
||||||
},
|
},
|
||||||
// 获取出勤详情数量问题
|
// 获取出勤数据
|
||||||
async checkAttendanceNum(){
|
async checkAttendanceNum(){
|
||||||
|
if(this.$storage.get('network')){
|
||||||
|
this.showError = false;
|
||||||
let data = await this.$axios({
|
let data = await this.$axios({
|
||||||
// 调用 serviceAPI
|
// 调用 serviceAPI
|
||||||
url: this.$https.getstudentattendanceinfo,
|
url: this.$https.getstudentattendanceinfo,
|
||||||
|
|
@ -77,46 +94,75 @@
|
||||||
EquipmentGuid: "yaohaotest001"
|
EquipmentGuid: "yaohaotest001"
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
if(data.data.data!=undefined){
|
||||||
let leftInfo = data.data.data;
|
let leftInfo = data.data.data;
|
||||||
|
this.navArr[0].num = leftInfo.outSchoolNum + leftInfo.notSchoolNum + leftInfo.leaveSchoolNum;
|
||||||
this.navArr[0].num = leftInfo.toSchoolNum;
|
|
||||||
this.navArr[1].num = leftInfo.outSchoolNum;
|
this.navArr[1].num = leftInfo.outSchoolNum;
|
||||||
this.navArr[2].num = leftInfo.notSchoolNum;
|
this.navArr[2].num = leftInfo.notSchoolNum;
|
||||||
this.navArr[3].num = leftInfo.leaveSchoolNum;
|
this.navArr[3].num = leftInfo.leaveSchoolNum;
|
||||||
this.babyArr = leftInfo.list;
|
this.babyArr = leftInfo.list;
|
||||||
this.cunArr = leftInfo.list;
|
this.cunArr = leftInfo.list;
|
||||||
|
this.$storage.set('num0',this.navArr[0].num);
|
||||||
|
this.$storage.set('num1',this.navArr[1].num);
|
||||||
|
this.$storage.set('num2',this.navArr[2].num);
|
||||||
|
this.$storage.set('num3',this.navArr[3].num);
|
||||||
|
this.$storage.set('babyArr',this.babyArr);
|
||||||
|
this.$storage.set('cunArr',this.cunArr);
|
||||||
|
} else {
|
||||||
|
this.babyArr = [];
|
||||||
|
this.$storage.set('babyArr',this.babyArr);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.navArr[0].num = this.$storage.get('num0');
|
||||||
|
this.navArr[1].num = this.$storage.get('num1');
|
||||||
|
this.navArr[2].num = this.$storage.get('num2');
|
||||||
|
this.navArr[3].num = this.$storage.get('num3');
|
||||||
|
this.babyArr = this.$storage.get('babyArr');
|
||||||
|
this.cunArr = this.$storage.get('cunArr');
|
||||||
|
if(this.cunArr==undefined){
|
||||||
|
this.showError = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.showLoading = false;
|
||||||
},
|
},
|
||||||
// 获取出勤详情数量问题
|
// 获取
|
||||||
async queryattendancebyidEv(UserGuid){
|
async getupdatestudentlistEv(Guid){
|
||||||
|
if(this.$storage.get('network')){
|
||||||
|
this.getuserattendanceinfoEv(this.babyArr[this.stuIndex].StuGuid);
|
||||||
let data = await this.$axios({
|
let data = await this.$axios({
|
||||||
// 调用 serviceAPI
|
// 调用 serviceAPI
|
||||||
url: this.$https.queryattendancebyid,
|
url:this.$https.getupdatestudentlist,
|
||||||
methods: "get",
|
params:{Guid}
|
||||||
params: {
|
|
||||||
UserGuid
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
console.log(data.data.data);
|
this.dataObj = data.data.data;
|
||||||
|
this.$storage.set('dataObjatten',this.dataObj);
|
||||||
|
} else {
|
||||||
|
this.dataObj = this.$storage.get('dataObjatten');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 获取出勤详情数量问题
|
// 获取今日晨检考勤
|
||||||
async getuserattendanceinfoEv(){
|
async getuserattendanceinfoEv(StuGuid){
|
||||||
|
if(this.$storage.get('network')){
|
||||||
let data = await this.$axios({
|
let data = await this.$axios({
|
||||||
// 调用 serviceAPI
|
// 调用 serviceAPI
|
||||||
url: this.$https.getuserattendanceinfo,
|
url: this.$https.getuserattendanceinfo,
|
||||||
methods: "get",
|
methods: "get",
|
||||||
params: {
|
params: {
|
||||||
UserGuid:'1ec20f7e-85c7-a982-b506-67f71d64d1f6'
|
UserGuid:StuGuid
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
console.log(data.data.data);
|
this.dataArr = data.data.data;
|
||||||
|
this.$storage.set('dataArratten',this.dataArr);
|
||||||
|
} else {
|
||||||
|
this.dataArr = this.$storage.get('dataArratten');
|
||||||
|
}
|
||||||
|
this.showDetail = true;
|
||||||
|
this.showLoading = false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 获取出勤数据
|
// 获取出勤数据
|
||||||
this.checkAttendanceNum();
|
this.checkAttendanceNum();
|
||||||
this.getuserattendanceinfoEv();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
<link rel="stylesheet" href="/webconfig/layui/css/layui.css?t=202006016" media="all" />
|
||||||
|
<!--统一LAYUI前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="/webconfig/layui/css/global.css?t=20200616" media="all">
|
||||||
|
<!--统一公共前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/jquery-ui.css?t=20200613" media="all" />
|
||||||
|
<!--提示信息前端样式文件-->
|
||||||
|
<title>日常保教统计</title>
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/careEducation.css">
|
||||||
|
<!-- 引入jquery -->
|
||||||
|
<script src="/webconfig/js/jquery.min.js"></script>
|
||||||
|
<script src="/webconfig/js/echarts.min.js"></script>
|
||||||
|
<script src="/webconfig/js/vue.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="all">
|
||||||
|
<div class="h1">
|
||||||
|
<div>
|
||||||
|
<a id="html5" href="wisdomMedic.html" style="margin-right: 20px;">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_01.png">
|
||||||
|
<span>xx市教育局云端大数据</span>
|
||||||
|
</a>
|
||||||
|
<a id="html1" href="everdayData.html" style="margin-right: 20px;">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_01.png">
|
||||||
|
<span>每日数据检测</span>
|
||||||
|
</a>
|
||||||
|
<a id="html2" href="kindergartenThings.html">
|
||||||
|
<img style="width: 25px;height: 25px;margin-right:5px;position:relative;top:-1px" src="/webconfig/images/everdayData/img1/icon_02.png">
|
||||||
|
<span>园区统计分析</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a id="html3" href="javascript:;" style="margin-right: 5px;" class="in">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_33.png">
|
||||||
|
<span>日常保教统计</span>
|
||||||
|
</a>
|
||||||
|
<a id="html4" href="homeInteraction.html">
|
||||||
|
<img style="width: 35px;height: 35px;" src="/webconfig/images/everdayData/img1/icon_04.png">
|
||||||
|
<span>家园互动情况</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top">
|
||||||
|
<div class="left">
|
||||||
|
<h2><span>巡班统计</span></h2>
|
||||||
|
<div v-for="(item,index) in length1" :id="'echarts0'+(index+1)"></div>
|
||||||
|
<!--<div id="echarts01"></div>
|
||||||
|
<div id="echarts02"></div>
|
||||||
|
<div id="echarts03"></div>
|
||||||
|
<div id="echarts04"></div>
|
||||||
|
<div id="echarts05"></div>
|
||||||
|
<div id="echarts06"></div>
|
||||||
|
<div id="echarts07"></div>
|
||||||
|
<div id="echarts08"></div>
|
||||||
|
<div id="echarts09"></div>-->
|
||||||
|
<div class="total">
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;">
|
||||||
|
<div style="width: 16px;height: 16px;background: linear-gradient(135deg, #EF6E18, #FCC204);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;">总班数</span>
|
||||||
|
<span style="margin-left: 10px;color: #EF6E18;">{{classTotal}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;">
|
||||||
|
<div style="width: 16px;height: 16px;background: linear-gradient(135deg, #3E7DFC, #4D82FC);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;">已完成</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;">
|
||||||
|
<div style="width: 16px;height: 16px;background: linear-gradient(135deg, #FED866, #03CACC);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;">未完成</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div style="display: flex;align-items: center;flex-wrap: nowrap;">
|
||||||
|
<h2><span>宝宝食谱</span></h2>
|
||||||
|
<div style="width: 60%;height: 240px;padding-top: 60px;padding-left: 20px;box-sizing: border-box;">
|
||||||
|
<div style="display: flex;flex-wrap: wrap;">
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;margin: 15px;">
|
||||||
|
<div style="width: 12px;height: 12px;background: linear-gradient(135deg, #0FD5F9, #0487ED);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;font-size: 14px;">食谱总数</span>
|
||||||
|
<span style="margin-left: 10px;color: #EF6E18;font-size: 14px;">{{dataFood.Recipes_recommend}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;margin: 15px;">
|
||||||
|
<div style="width: 12px;height: 12px;background: linear-gradient(135deg, #0666E8, #0487ED);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;font-size: 14px;">菜品数</span>
|
||||||
|
<span style="margin-left: 10px;color: #EF6E18;font-size: 14px;">{{dataFood.Recipes_Foods}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;margin: 15px;">
|
||||||
|
<div style="width: 12px;height: 12px;background: linear-gradient(135deg, #A2FFD0, #3EB076);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;font-size: 14px;">食谱照片数</span>
|
||||||
|
<span style="margin-left: 10px;color: #EF6E18;font-size: 14px;">{{dataFood.RecipesImg}}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;height: 40px;align-items: center;margin: 15px;">
|
||||||
|
<div style="width: 12px;height: 12px;background: linear-gradient(135deg, #FFFE95, #C1C049);"></div>
|
||||||
|
<span style="color: #FFFFFF;margin-left: 10px;font-size: 14px;">食谱建议数</span>
|
||||||
|
<span style="margin-left: 10px;color: #EF6E18;font-size: 14px;">{{dataFood.RecipeMsg}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="echarts2"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3><span>推荐食谱</span></h3>
|
||||||
|
<div id="echarts3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="left">
|
||||||
|
<h2><span>周计划</span></h2>
|
||||||
|
<div id="echarts4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="middle">
|
||||||
|
<h2><span>教师培训及科研获奖统计</span></h2>
|
||||||
|
<div id="echarts5"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h2><span>发展评价统计</span></h2>
|
||||||
|
<div id="echarts61"></div>
|
||||||
|
<div id="echarts62"></div>
|
||||||
|
<div id="echarts63"></div>
|
||||||
|
<div id="echarts64"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.url = "http://sysapi.it996.tech"
|
||||||
|
// window.url = "http://192.168.1.152:56010"
|
||||||
|
window.guid = ''
|
||||||
|
|
||||||
|
function getParams() {
|
||||||
|
var url = window.location.href;
|
||||||
|
if (url.indexOf("?") > 0) {
|
||||||
|
url = url.split("?")[1];
|
||||||
|
arr = url.split("&");
|
||||||
|
var obj = {};
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
var arr_list = arr[i].split("=");
|
||||||
|
obj[arr_list[0]] = arr_list[1];
|
||||||
|
}
|
||||||
|
var EquipmentID = obj.EquipmentID;
|
||||||
|
window.guid = EquipmentID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getParams()
|
||||||
|
</script>
|
||||||
|
<!--layui必须JS-->
|
||||||
|
<script type="text/javascript" src="/webconfig/layui/layui.js?t=20200606" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="/webconfig/js/careEducation.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,385 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #040c30;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1800px;
|
||||||
|
max-width: 1920px;
|
||||||
|
min-height: 800px;
|
||||||
|
max-height: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #040c30;
|
||||||
|
}
|
||||||
|
#all h1 {
|
||||||
|
height: 75px;
|
||||||
|
background-image: url("../src/images/headimg1.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 75px;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #01c5f5;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
}
|
||||||
|
#all > .top {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#all > .top > div {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
#all > .top > .left {
|
||||||
|
width: 25%;
|
||||||
|
height: 350px;
|
||||||
|
background-image: url("../src/images/bg_01.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#all > .top > .left > h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 28%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .top > .left > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service {
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
background-color: #0b1647;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .top {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .bot {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service h3 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .context {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .context p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .context p span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .context p span b {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
#all > .top > .left .service .context p span img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled {
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #0b1647;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .top {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .bot {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled h3 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context {
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p > span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p > span b {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p > span img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(1) > span:last-child {
|
||||||
|
color: #01f6ff;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(2) > span:last-child {
|
||||||
|
color: #22c223;
|
||||||
|
}
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(3) > span:last-child {
|
||||||
|
color: #f8b01b;
|
||||||
|
}
|
||||||
|
#all > .top > .middle {
|
||||||
|
width: 40%;
|
||||||
|
height: 350px;
|
||||||
|
background-image: url("../src/images/bg_02.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#all > .top > .middle > h2 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 280px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .top > .middle > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .top > .middle #echarts1 {
|
||||||
|
width: 90%;
|
||||||
|
height: 340px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#all > .top > .right {
|
||||||
|
width: 25%;
|
||||||
|
height: 350px;
|
||||||
|
background-image: url("../src/images/bg_01.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#all > .top > .right > h2 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 30%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .top > .right > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .top > .right #echarts2 {
|
||||||
|
width: 90%;
|
||||||
|
height: 340px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#all > .bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-bottom: 31px;
|
||||||
|
}
|
||||||
|
#all > .bottom > div {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
#all > .bottom > .left {
|
||||||
|
width: 25%;
|
||||||
|
height: 480px;
|
||||||
|
background-image: url("../src/images/bg_03.png");
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#all > .bottom > .left > h2 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 28%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .bottom > .left > h2 img {
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .bottom > .left #echarts3 {
|
||||||
|
width: 92%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
#all > .bottom > .left > img {
|
||||||
|
width: 70px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: 46%;
|
||||||
|
left: 43%;
|
||||||
|
}
|
||||||
|
#all > .bottom > .middle {
|
||||||
|
width: 40%;
|
||||||
|
height: 480px;
|
||||||
|
background-image: url("../src/images/bg_04.png");
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#all > .bottom > .middle > h2 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 280px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .bottom > .middle > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .bottom > .middle #echarts4 {
|
||||||
|
width: 96%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 20px auto;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
#all > .bottom > .right {
|
||||||
|
width: 25%;
|
||||||
|
height: 480px;
|
||||||
|
background-image: url("../src/images/bg_03（第二排左右）.png");
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#all > .bottom > .right > h2 {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 30%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
#all > .bottom > .right > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
#all > .bottom > .right #echarts5 {
|
||||||
|
width: 90%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
/* border: 0; */
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
/* blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
} */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,437 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #040c30;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1800px;
|
||||||
|
max-width: 1920px;
|
||||||
|
min-height: 800px;
|
||||||
|
max-height: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #040c30;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all h1 {
|
||||||
|
height: 75px;
|
||||||
|
background-image: url("../src/images/headimg1.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 75px;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #01c5f5;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-wrap: nowrap;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > div {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left {
|
||||||
|
width: 29%;
|
||||||
|
height: 350px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left > h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 28%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service {
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .top {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .bot {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service h3 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .context {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: space-evenly;
|
||||||
|
-ms-flex-pack: space-evenly;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .context p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .context p span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .context p span b {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .service .context p span img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled {
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .top {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .bot {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled h3 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context {
|
||||||
|
padding: 0 10px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p > span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p > span b {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p > span img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(1) > span:last-child {
|
||||||
|
color: #01f6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(2) > span:last-child {
|
||||||
|
color: #22c223;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .left .settled .context p:nth-of-type(3) > span:last-child {
|
||||||
|
color: #f8b01b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .middle {
|
||||||
|
width: 40%;
|
||||||
|
height: 350px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .middle > h2 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 320px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 32%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .middle > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .middle #echarts1 {
|
||||||
|
width: 90%;
|
||||||
|
height: 150px;
|
||||||
|
margin: 10px auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .middle #echarts3 {
|
||||||
|
width: 90%;
|
||||||
|
height: 150px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .right {
|
||||||
|
width: 29%;
|
||||||
|
height: 350px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .right > h2 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 30%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .right > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .top > .right #echarts2 {
|
||||||
|
width: 94%;
|
||||||
|
height: 300px;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-ms-flex-wrap: nowrap;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-bottom: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > div {
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left {
|
||||||
|
width: 49%;
|
||||||
|
height: 480px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left > h2 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left > h2 img {
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left #echarts5 {
|
||||||
|
width: 30%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left #echarts6 {
|
||||||
|
width: 94%;
|
||||||
|
height: 230px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .left #echarts7 {
|
||||||
|
width: 68%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .middle {
|
||||||
|
width: 49%;
|
||||||
|
height: 480px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .middle > h2 {
|
||||||
|
font-family: 'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 280px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .middle > h2 img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all > .bottom > .middle #echarts4 {
|
||||||
|
width: 96%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 20px auto;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=wisdomMedic.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,367 @@
|
||||||
|
body{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #040c30;
|
||||||
|
}
|
||||||
|
#all{
|
||||||
|
width: 100%;
|
||||||
|
min-width: 1800px;
|
||||||
|
max-width: 1920px;
|
||||||
|
min-height: 800px;
|
||||||
|
max-height: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #040c30;
|
||||||
|
h1{
|
||||||
|
height: 75px;
|
||||||
|
background-image: url("../src/images/headimg1.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 75px;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #01c5f5;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
}
|
||||||
|
>.top{
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
>div{
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
>.left{
|
||||||
|
width: 29%;
|
||||||
|
height: 350px;
|
||||||
|
// background-image: url("../src/images/bg_01\(第一排左右两个\).png");
|
||||||
|
// background-position: center;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
>h2{
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 28%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.service{
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
|
.top{
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.bot{
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
.context{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
p{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
b{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.settled{
|
||||||
|
width: 90%;
|
||||||
|
height: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 40px;
|
||||||
|
position: relative;
|
||||||
|
.top{
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.bot{
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background-image: url("../src/images/line.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #02dafe;
|
||||||
|
background-image: url("../src/images/kuang_xiao.png");
|
||||||
|
width: 95px;
|
||||||
|
height: 24px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
left: 40%;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
.context{
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
p{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #a8b3e6;
|
||||||
|
>span{
|
||||||
|
display: block;
|
||||||
|
b{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #5280b6;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(1)>span:last-child{
|
||||||
|
color: #01f6ff;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2)>span:last-child{
|
||||||
|
color: #22c223;
|
||||||
|
}
|
||||||
|
&:nth-of-type(3)>span:last-child{
|
||||||
|
color: #f8b01b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.middle{
|
||||||
|
width: 40%;
|
||||||
|
height: 350px;
|
||||||
|
// background-image: url("../src/images/bg_02（第一排中间）.png");
|
||||||
|
// background-position: center;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
>h2{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 320px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
left:32%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#echarts1{
|
||||||
|
width: 90%;
|
||||||
|
height: 150px;
|
||||||
|
margin: 10px auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
#echarts3{
|
||||||
|
width: 90%;
|
||||||
|
height: 150px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.right{
|
||||||
|
width: 29%;
|
||||||
|
height: 350px;
|
||||||
|
// background-image: url("../src/images/bg_01\(第一排左右两个\).png");
|
||||||
|
// background-position: center;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
>h2{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 30%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#echarts2{
|
||||||
|
width: 94%;
|
||||||
|
height: 300px;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.bottom{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-bottom: 31px;
|
||||||
|
>div{
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
>.left{
|
||||||
|
width: 49%;
|
||||||
|
height: 480px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
>h2{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_da.png");
|
||||||
|
width: 220px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left: 36%;
|
||||||
|
top: -16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
img{
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#echarts5{
|
||||||
|
width: 30%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
#echarts6{
|
||||||
|
width: 94%;
|
||||||
|
height: 230px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
#echarts7{
|
||||||
|
width: 68%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.middle{
|
||||||
|
width: 49%;
|
||||||
|
height: 480px;
|
||||||
|
background-color: #0e2039;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
>h2{
|
||||||
|
font-family:'Microsoft YaHei';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #01dbfc;
|
||||||
|
background-image: url("../src/images/kuang_zhong.png");
|
||||||
|
width: 280px;
|
||||||
|
height: 36px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 36px;
|
||||||
|
position: absolute;
|
||||||
|
left:36%;
|
||||||
|
top: -15px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
img{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#echarts4{
|
||||||
|
width: 96%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 20px auto;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
<link rel="stylesheet" href="/webconfig/layui/css/layui.css?t=202006016" media="all" />
|
||||||
|
<!--统一LAYUI前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="/webconfig/layui/css/global.css?t=20200616" media="all">
|
||||||
|
<!--统一公共前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/jquery-ui.css?t=20200613" media="all" />
|
||||||
|
<!--提示信息前端样式文件-->
|
||||||
|
<title>每日数据监测</title>
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="/webconfig/css/everdayData.css">
|
||||||
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
|
||||||
|
<!-- <script type="text/javascript" src = "https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script> -->
|
||||||
|
<!-- 引入layui -->
|
||||||
|
<script src="/webconfig/layui/layui.all.js"></script>
|
||||||
|
<!-- 引入jquery -->
|
||||||
|
<script type="text/javascript" src="/webconfig/js/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/webconfig/js/plugins/echarts/echarts.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/webconfig/js/vue.js"></script>
|
||||||
|
<script type="text/javascript" src="/webconfig/js/moment.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="all">
|
||||||
|
<div class="h1">
|
||||||
|
<div>
|
||||||
|
<a id="html5" href="wisdomMedic.html" style="margin-right: 20px;">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_01.png">
|
||||||
|
<span>xx市教育局云端大数据</span>
|
||||||
|
</a>
|
||||||
|
<a id="html1" href="javascript:;" class="in" style="margin-right: 20px;">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_011.png">
|
||||||
|
<span>每日数据监测</span>
|
||||||
|
</a>
|
||||||
|
<a id="html2" href="kindergartenThings.html">
|
||||||
|
<img style="width: 25px;height: 25px;margin-right:5px;position:relative;top:-1px" src="/webconfig/images/everdayData/img1/icon_02.png">
|
||||||
|
<span>园区统计分析</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a id="html3" href="careEducation.html" style="margin-right: 5px;">
|
||||||
|
<img src="/webconfig/images/everdayData/img1/icon_03.png">
|
||||||
|
<span>日常保教统计</span>
|
||||||
|
</a>
|
||||||
|
<a id="html4" href="homeInteraction.html">
|
||||||
|
<img style="width: 35px;height: 35px;" src="/webconfig/images/everdayData/img1/icon_04.png">
|
||||||
|
<span>家园互动情况</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top">
|
||||||
|
<div class="left">
|
||||||
|
<h2>{{data1.OrganName}}</h2>
|
||||||
|
<div class="service">
|
||||||
|
<div class="top"></div>
|
||||||
|
<h3>园区情况</h3>
|
||||||
|
<div class="context">
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<img src="/webconfig/images/everdayData/icon_tongji03.png">
|
||||||
|
<b>园区数</b>
|
||||||
|
</span>
|
||||||
|
<span>{{data1.TerritoryAreaCount}}个</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<img src="/webconfig/images/everdayData/icon_tongji01.png">
|
||||||
|
<b>总班级数</b>
|
||||||
|
</span>
|
||||||
|
<span>{{data1.ClassCount}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bot"></div>
|
||||||
|
</div>
|
||||||
|
<div class="settled">
|
||||||
|
<div class="top"></div>
|
||||||
|
<h3>人员情况</h3>
|
||||||
|
<div class="context">
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<img src="/webconfig/images/everdayData/icon_tongji03.png">
|
||||||
|
<b>教职工数</b>
|
||||||
|
</span>
|
||||||
|
<span>{{data1.WorkersNumber}}人</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<img src="/webconfig/images/everdayData//icon_tongji01.png">
|
||||||
|
<b>教师数</b>
|
||||||
|
</span>
|
||||||
|
<span>{{data1.TeachNumber}}人</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>
|
||||||
|
<img src="/webconfig/images/everdayData/icon_tongji02.png">
|
||||||
|
<b>幼儿数</b>
|
||||||
|
</span>
|
||||||
|
<span>{{data1.StudentNumber}}个</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bot"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="middle">
|
||||||
|
<h2>今日出入校情况</h2>
|
||||||
|
<div id="echarts1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h2>教师考勤情况</h2>
|
||||||
|
<div id="echarts3" style="height:300px"></div>
|
||||||
|
<img src="/webconfig/images/everdayData/icon_renyuan.png" style="top:40%" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="left">
|
||||||
|
<h2>幼儿入园情况统计 </h2>
|
||||||
|
<div id="echarts2" style="width:90%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="middle">
|
||||||
|
<h2>班级出勤率前十名</h2>
|
||||||
|
<div id="echarts4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h2>提醒预警信息</h2>
|
||||||
|
<div id="echarts5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.url = "http://sysapi.it996.tech"
|
||||||
|
// window.url = "http://192.168.1.152:56010"
|
||||||
|
window.guid = ''
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getParams() {
|
||||||
|
var url = window.location.href;
|
||||||
|
if (url.indexOf("?") > 0) {
|
||||||
|
url = url.split("?")[1];
|
||||||
|
arr = url.split("&");
|
||||||
|
var obj = {};
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
var arr_list = arr[i].split("=");
|
||||||
|
obj[arr_list[0]] = arr_list[1];
|
||||||
|
}
|
||||||
|
var EquipmentID = obj.EquipmentID;
|
||||||
|
window.guid = EquipmentID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getParams()
|
||||||
|
</script>
|
||||||
|
<!--layui必须JS-->
|
||||||
|
<script type="text/javascript" src="/webconfig/layui/layui.js?t=20200606" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="/webconfig/js/everdayData.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="format-detection" content="telephone=no" />
|
||||||
|
<link rel="stylesheet" href="webconfig/layui/css/layui.css?t=202006016" media="all" />
|
||||||
|
<!--统一LAYUI前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="webconfig/layui/css/global.css?t=20200616" media="all">
|
||||||
|
<!--统一公共前端样式文件-->
|
||||||
|
<link rel="stylesheet" href="webconfig/css/jquery-ui.css?t=20200613" media="all" />
|
||||||
|
<!--提示信息前端样式文件-->
|
||||||
|
<title>日常保教统计</title>
|
||||||
|
<link rel="stylesheet" href="webconfig/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="webconfig/css/homeInteraction.css">
|
||||||
|
<!-- 引入jquery -->
|
||||||
|
<script src="webconfig/js/jquery.min.js"></script>
|
||||||
|
<script src="webconfig/js/echarts.min.js"></script>
|
||||||
|
<script src="webconfig/js/vue.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="all">
|
||||||
|
<div class="h1">
|
||||||
|
<div>
|
||||||
|
<a id="html5" href="wisdomMedic.html" style="margin-right: 20px;">
|
||||||
|
<img src="webconfig/images/everdayData/img1/icon_01.png">
|
||||||
|
<span>xx市教育局云端大数据</span>
|
||||||
|
</a>
|
||||||
|
<a id="html1" href="everdayData.html" style="margin-right: 20px;">
|
||||||
|
<img src="webconfig/images/everdayData/img1/icon_01.png">
|
||||||
|
<span>每日数据检测</span>
|
||||||
|
</a>
|
||||||
|
<a id="html2" href="kindergartenThings.html">
|
||||||
|
<img style="width: 25px;height: 25px;margin-right:5px;position:relative;top:-1px" src="webconfig/images/everdayData/img1/icon_02.png">
|
||||||
|
<span>园区统计分析</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a id="html3" href="careEducation.html" style="margin-right: 5px;">
|
||||||
|
<img src="webconfig/images/everdayData/img1/icon_03.png">
|
||||||
|
<span>日常保教统计</span>
|
||||||
|
</a>
|
||||||
|
<a id="html4" href="javascript:;" class="in">
|
||||||
|
<img style="width: 35px;height: 35px;" src="webconfig/images/everdayData/img1/icon_44.png">
|
||||||
|
<span>家园互动情况</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top">
|
||||||
|
<div class="left">
|
||||||
|
<h2><span>宝宝动态统计</span></h2>
|
||||||
|
<div id="echarts1"></div>
|
||||||
|
<div class="order">
|
||||||
|
<h3><span>班级动态发布数量排名前十</span></h3>
|
||||||
|
<div id="echarts2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h2><span>教育资源统计</span></h2>
|
||||||
|
<div id="echarts3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="left" style="position: relative;">
|
||||||
|
<h2><span>活跃统计</span></h2>
|
||||||
|
<div style="width: 40%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;height: 100%;padding: 30px;box-sizing: border-box;">
|
||||||
|
<div style="cursor: pointer;" @click="change(index+1)" class="box1" v-for="(item,index) in nav" :key="index">
|
||||||
|
<div style="color: #F58350;font-size: 22px;margin-top: 20px;">{{item}}</div>
|
||||||
|
<div style="color: #EFEFEF;font-size: 14px;margin-top: 5px;">前五排名</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="width: 50%;line-height: 4em;padding: 40px 0;box-sizing: border-box;position:relative;left:-30px">
|
||||||
|
<div v-for="(item,index) in data6" :key="index" style="width: 100%;display: flex;align-items: center;flex-wrap: nowrap;">
|
||||||
|
<span style="color: #FFFFFF;font-size: 16px;white-space: nowrap;margin-right: 10px;display:inline-block;width:80px;">{{item.name}}</span>
|
||||||
|
<div style="width: 70%;height: 30px;border: 2px solid #147ab1;position: relative;display: flex;align-items: center;">
|
||||||
|
<div :class="'changeWidth'+index" style="height: 30px;background-color: #136997;"></div>
|
||||||
|
<span style="color: #0552AF;margin-left: 10px;font-size: 16px;">{{item.number}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<select @change="changeMounth" style="position: absolute;right: 20px;top: 20px;font-size: 24px;color: #4EFAFA;background-color:rgba(0,0,0,0);border:none;cursor: pointer;cursor: pointer;">
|
||||||
|
<option v-for="(item,index) in mounthList" v-if="item.selected" selected="selected" :value="item.value">{{item.value}}月查询</option>
|
||||||
|
<option v-for="(item,index) in mounthList" v-if="!item.selected" :value="item.value">{{item.value}}月查询</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h2><span>其他统计</span></h2>
|
||||||
|
<div id="echarts5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.url = "http://sysapi.it996.tech"
|
||||||
|
// window.url = "http://192.168.1.152:56010"
|
||||||
|
window.guid = ''
|
||||||
|
|
||||||
|
function getParams() {
|
||||||
|
var url = window.location.href;
|
||||||
|
if (url.indexOf("?") > 0) {
|
||||||
|
url = url.split("?")[1];
|
||||||
|
arr = url.split("&");
|
||||||
|
var obj = {};
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
var arr_list = arr[i].split("=");
|
||||||
|
obj[arr_list[0]] = arr_list[1];
|
||||||
|
}
|
||||||
|
var EquipmentID = obj.EquipmentID;
|
||||||
|
window.guid = EquipmentID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getParams()
|
||||||
|
</script>
|
||||||
|
<!--layui必须JS-->
|
||||||
|
<script type="text/javascript" src="webconfig/layui/layui.js?t=20200606" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="webconfig/js/homeInteraction.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,687 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#all',
|
||||||
|
data: function data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted: function mounted() {
|
||||||
|
//班级运行情况
|
||||||
|
this.getData();
|
||||||
|
this.changeWindow();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 请求数据
|
||||||
|
request: function request(_ref) {
|
||||||
|
var type = _ref.type,
|
||||||
|
url = _ref.url,
|
||||||
|
_ref$data = _ref.data,
|
||||||
|
data = _ref$data === void 0 ? {} : _ref$data,
|
||||||
|
_ref$headers = _ref.headers,
|
||||||
|
headers = _ref$headers === void 0 ? {} : _ref$headers;
|
||||||
|
return new Promise(function (resolve) {
|
||||||
|
$.ajax({
|
||||||
|
type: type,
|
||||||
|
url: url,
|
||||||
|
data: data,
|
||||||
|
headers: headers,
|
||||||
|
success: function success(data) {
|
||||||
|
resolve(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeWindow: function changeWindow() {
|
||||||
|
window.onresize = function () {
|
||||||
|
setTimeout(function () {
|
||||||
|
window.location.reload();
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getData: function getData() {
|
||||||
|
return regeneratorRuntime.async(function getData$(_context) {
|
||||||
|
while (1) {
|
||||||
|
switch (_context.prev = _context.next) {
|
||||||
|
case 0:
|
||||||
|
// let {data} = await this.request({
|
||||||
|
// type: "GET",
|
||||||
|
// data:{
|
||||||
|
// userid:window.phone,
|
||||||
|
// days:this.days,
|
||||||
|
// },
|
||||||
|
// url: `${window.url}/api/admin/healthinfo/getnewbloodpressure`,
|
||||||
|
// })
|
||||||
|
// console.log(data,"xieya");
|
||||||
|
this.Charts1();
|
||||||
|
this.charts2();
|
||||||
|
this.charts3();
|
||||||
|
this.charts4();
|
||||||
|
this.charts5();
|
||||||
|
|
||||||
|
case 5:
|
||||||
|
case "end":
|
||||||
|
return _context.stop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, null, this);
|
||||||
|
},
|
||||||
|
Charts1: function Charts1() {
|
||||||
|
var chartDom = document.getElementById('echarts1');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
option = {
|
||||||
|
color: ['#02dcfd', "#f96e00", "#0178e9", "rgb(255, 230, 88)", "#ff01ff", "#f9ad12"],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// data: ['移动能力重度障碍', '握力测量平均值', '中重度失能',"中重度抑郁","营养不良","尿失禁状况"],
|
||||||
|
data: ["移动能力重度障碍", '中重度失能', "中重度抑郁", "营养不良"],
|
||||||
|
y: "bottom",
|
||||||
|
textStyle: {
|
||||||
|
color: '#5380b4'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '1%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '10%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
// boundaryGap:false,
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#151d3d']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: ["60以下", "60-70岁", "70-80岁", "80-90岁", "90岁以上"]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: true,
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}%",
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#151d3d']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '移动能力重度障碍',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 1,
|
||||||
|
data: [2, 5, 25, 60, 85]
|
||||||
|
}, // {
|
||||||
|
// name: '握力测量平均值',
|
||||||
|
// smooth:true,
|
||||||
|
// type: 'line',
|
||||||
|
// symbolSize: 1,
|
||||||
|
// data: [72,56,21,33,11],
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '中重度失能',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 1,
|
||||||
|
data: [1, 6, 20, 54, 90]
|
||||||
|
}, {
|
||||||
|
name: '中重度抑郁',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 1,
|
||||||
|
data: [4, 7, 30, 49, 55]
|
||||||
|
}, {
|
||||||
|
name: '营养不良',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 1,
|
||||||
|
data: [3, 6, 28, 40, 79]
|
||||||
|
} // {
|
||||||
|
// name: '尿失禁状况',
|
||||||
|
// smooth:true,
|
||||||
|
// type: 'line',
|
||||||
|
// symbolSize: 1,
|
||||||
|
// data: [8,12,14,26,91],
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
charts2: function charts2() {
|
||||||
|
var chartDom = document.getElementById('echarts2');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function formatter(params) {
|
||||||
|
return params[0].name + "：" + params[0].value + "人";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true // data: ['2021年']
|
||||||
|
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['医护人数', '老人干预人数', '咨询回复人数', '上门随访人数', '健康评估人数'],
|
||||||
|
axisLabel: {
|
||||||
|
color: '#03d1f3'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['rgba(0,0,0,1)']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
// name: '2021年',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 15,
|
||||||
|
data: [601, 15634, 30212, 23432, 16411],
|
||||||
|
//顶部数字展示pzr
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
barBorderRadius: [100, 100, 100, 100],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
normal: {
|
||||||
|
//柱形图圆角，初始化效果
|
||||||
|
barBorderRadius: [100, 100, 100, 100],
|
||||||
|
// color:new echarts.graphic.LinearGradient(
|
||||||
|
// 0, 0, 1, 0,
|
||||||
|
// [
|
||||||
|
// {offset: 0, color: '#011135'},
|
||||||
|
// {offset: 0.5, color: '#01367b'},
|
||||||
|
// {offset: 1, color: '#0178e9'}
|
||||||
|
// ]
|
||||||
|
// ),
|
||||||
|
color: function color(params) {
|
||||||
|
var colorList1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#011135'
|
||||||
|
}, {
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#01367b'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#0178e9'
|
||||||
|
}]);
|
||||||
|
var colorList2 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#051130'
|
||||||
|
}, {
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#734a1a'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#f96e00'
|
||||||
|
}]);
|
||||||
|
var colorList3 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#031133'
|
||||||
|
}, {
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#2a7262'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#45e190'
|
||||||
|
}]);
|
||||||
|
var colorList = [colorList1, colorList2, colorList3];
|
||||||
|
return colorList[params.dataIndex % colorList.length];
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
charts3: function charts3() {
|
||||||
|
var chartDom = document.getElementById('echarts3');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function formatter(params) {
|
||||||
|
return params.data.name + "：" + params.data.value + "人";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#00affd',
|
||||||
|
fontSize: "14"
|
||||||
|
},
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
//让series 中的文字进行换行
|
||||||
|
return val.name + "\n" + val.percent + "%";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: function color(params) {
|
||||||
|
var colorList = ["#00f6fe", "#f36ff9", "#f8b019", "#fe6e82", "#08b16b"];
|
||||||
|
return colorList[params.dataIndex % colorList.length];
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
// smooth: true,
|
||||||
|
length: 30,
|
||||||
|
length1: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
textColor: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
value: 751,
|
||||||
|
name: '60岁以下'
|
||||||
|
}, {
|
||||||
|
value: 8743,
|
||||||
|
name: '60-70岁'
|
||||||
|
}, {
|
||||||
|
value: 4835,
|
||||||
|
name: '70-80岁'
|
||||||
|
}, {
|
||||||
|
value: 1162,
|
||||||
|
name: '80-90岁'
|
||||||
|
}, {
|
||||||
|
value: 920,
|
||||||
|
name: '90岁以上'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
charts4: function charts4() {
|
||||||
|
var chartDom = document.getElementById('echarts4');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
var dataAxis = ['建档', '血压', '血糖', '身高', '体重', '体脂', '心电', '心率', '体温', '其他'];
|
||||||
|
var data = [16411, 8402, 8301, 9432, 12243, 6400, 3632, 6732, 9223, 11032]; // var yMax = 10000;
|
||||||
|
// var dataShadow = [];
|
||||||
|
// for (var i = 0; i < data.length; i++) {
|
||||||
|
// dataShadow.push(yMax);
|
||||||
|
// }
|
||||||
|
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: dataAxis,
|
||||||
|
axisLabel: {
|
||||||
|
// inside: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
z: 10
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
max: 20000,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}人",
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#151d3d']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// dataZoom: [
|
||||||
|
// {
|
||||||
|
// type: 'inside'
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
showBackground: true,
|
||||||
|
stack: '总量',
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: [12, 12, 12, 12],
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1bc6f5'
|
||||||
|
}, {
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#1dadee'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#207ce2'
|
||||||
|
}]),
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: [-1, 0],
|
||||||
|
color: "#fff",
|
||||||
|
formatter: "{Circle|}",
|
||||||
|
rich: {
|
||||||
|
Circle: {
|
||||||
|
height: 19,
|
||||||
|
backgroundColor: {
|
||||||
|
image: 'src/images/circle1.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: [12, 12, 12, 12],
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1bc6f5'
|
||||||
|
}, {
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#1dadee'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#207ce2'
|
||||||
|
}])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}]
|
||||||
|
}; // Enable data zoom when user click bar.
|
||||||
|
// var zoomSize = 4;
|
||||||
|
// myChart.on('click', function (params) {
|
||||||
|
// console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
||||||
|
// myChart.dispatchAction({
|
||||||
|
// type: 'dataZoom',
|
||||||
|
// startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
||||||
|
// endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
charts5: function charts5() {
|
||||||
|
var chartDom = document.getElementById('echarts5');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
var weatherIcons = {
|
||||||
|
'bmi': 'src/images/yinjing_01.png',
|
||||||
|
'sleep': 'src/images/yinjing_02.png',
|
||||||
|
'xieya': 'src/images/yinjing_03.png',
|
||||||
|
'fat': 'src/images/yinjing_04.png',
|
||||||
|
'temperature': 'src/images/yinjing_05.png',
|
||||||
|
'xietang': 'src/images/yinjing_06.png',
|
||||||
|
'xinliu': 'src/images/yinjing_07.png'
|
||||||
|
};
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
// formatter: '{a} <br/>{b} : {c}',
|
||||||
|
formatter: function formatter(params) {
|
||||||
|
return params.data.name.split(" ")[0] + "：" + params.data.value + "次";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '42%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
selectedMode: 'single',
|
||||||
|
data: [{
|
||||||
|
value: 5832,
|
||||||
|
name: 'BMI',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.bmi
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 11322,
|
||||||
|
name: '睡眠',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.sleep
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 4367,
|
||||||
|
name: '体脂',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.fat
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 2722,
|
||||||
|
name: '血压',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.xieya
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 3760,
|
||||||
|
name: '血糖',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.xietang
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 7128,
|
||||||
|
name: '体温',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.temperature
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
value: 8620,
|
||||||
|
name: '心率',
|
||||||
|
label: {
|
||||||
|
formatter: function formatter(val) {
|
||||||
|
var str = "{Img|}" + "-" + val.name + "-" + val.percent + "%";
|
||||||
|
str = str.split("-").join("\n");
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
Img: {
|
||||||
|
height: 40,
|
||||||
|
align: 'left',
|
||||||
|
backgroundColor: {
|
||||||
|
image: weatherIcons.xinliu
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: 14,
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function color(params) {
|
||||||
|
var colorList = ["#59adff", "#258aed", "#006fdd", "#74f3fd", "#1368bd", "#267afe", "#0067cd"];
|
||||||
|
return colorList[params.dataIndex % colorList.length];
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
// smooth: true,
|
||||||
|
length: 20,
|
||||||
|
length1: 10
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#00affd',
|
||||||
|
fontSize: "14"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
textColor: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
||||||
|
/** layui-v2.5.6 MIT License By https://www.layui.com */
|
||||||
|
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue