commit 0403684ce87766eae043aee60ad34f1b90adb672 Author: yuany3721 Date: Fri Jan 17 17:51:32 2020 +0800 Initial commit diff --git a/css/achievement.css b/css/achievement.css new file mode 100644 index 0000000..1d475e6 --- /dev/null +++ b/css/achievement.css @@ -0,0 +1,275 @@ +.header { + background-image: none; +} + +.achievement-banner>img { + width: 100%; +} + +li>a { + color: black; + text-decoration: none; +} + +li>a:hover { + color: purple; + text-decoration: underline purple; +} + +ul { + margin-bottom: 15px; +} + +.abstract { + font-family: "楷体"; +} + +@media screen and (min-width: 992px) { + .header { + height: calc(32000vw / 1366) !important; + } + + .header>img { + width: 100vw; + height: calc(32000vw / 1366); + } + + .achievement-header>img { + float: left; + margin: 2%; + width: 30%; + } + + + .achievement-header p { + padding: 2%; + border: rgba(128, 0, 128, 0.314) 2px dashed; + text-indent: 2em; + margin-top: 2%; + margin-bottom: 2%; + transition: all 0.5s; + } + + .achievement-header p:hover { + background-color: rgba(128, 0, 128, 0.063); + } + + .pic { + display: flex; + } + + .box { + border: purple 1px solid; + width: 23%; + margin: 1% auto; + transition: all 0.3s; + } + + .box>img { + width: 100%; + } + + .box:hover { + color: white; + /* background-color: rgba(128, 0, 128, 0.314); */ + /* background-color: rgba(19, 0, 19, 0.502); */ + background-color: rgba(16, 72, 176, 0.69); + } + + .box>span { + display: block; + } + + .title { + text-align: center; + position: relative; + font-size: 1vw; + line-height: 1.5vw; + font-family: "楷体"; + font-weight: bolder; + } + + .abstract { + text-indent: 2em; + margin: 1% 3%; + font-size: 0.9vw; + } +} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + .achievement-header p { + font-size: x-large; + } + + + .achievement-header { + width: 100vw; + } + + .achievement-header>img { + margin-bottom: 1% !important; + } + + strong { + font-size: 2.5vw; + padding-left: 1em; + } + + .achievement-header>ul { + margin-top: 2vw; + list-style-type: none; + } + + ul>li { + font-size: 2vw; + line-height: 2vw; + max-width: 40%; + } + + li:before { + content: "»» "; + font-weight: bolder; + color: purple; + padding-right: 0.5em; + } + + ul>li:nth-child(2n+1) { + position: relative; + left: 2%; + } + + ul>li:nth-child(2n) { + position: relative; + left: 52%; + top: -1.5vw; + } +} + +@media screen and (min-width: 1366px) { + .achievement-header p { + font-size: x-large; + } + + .achievement-header { + width: calc(1366px - 4%); + margin: 2%; + } + + strong { + font-size: 2vw; + } + + .achievement-container>.title { + margin-left: 2%; + } + + .achievement-header>ul { + margin-top: 2vw; + list-style-type: none; + } + + ul>li { + font-size: 1.5vw; + line-height: 1.5vw; + max-width: 40%; + } + + li:before { + content: "»» "; + font-weight: bolder; + color: purple; + padding-right: 0.5em; + } + + ul>li:nth-child(2n+1) { + position: relative; + left: 2%; + } + + ul>li:nth-child(2n) { + position: relative; + left: 52%; + top: -1.5vw; + } + +} + +@media screen and (max-width: 992px) { + .header { + height: calc(32000vw / 1366) !important; + } + + .header>img { + width: 100vw; + height: calc(32000vw / 1366); + } + + .achievement-header>img { + display: none; + } + + .achievement-header p { + padding: 3.5%; + border: rgba(128, 0, 128, 0.314) 2px dashed; + text-indent: 4em; + margin-top: 2%; + margin-bottom: 2%; + font-size: 3vw; + line-height: 6.5vw; + } + + strong { + font-size: 4vw; + padding-left: 1.5em; + } + + .achievement-header>ul { + margin-top: 2vw; + list-style-type: none; + } + + ul>li { + font-size: 3vw; + line-height: 6vw; + padding-left: 1em; + } + + li:before { + content: "»» "; + font-weight: bolder; + color: purple; + padding-right: 0.5em; + } + + .box { + position: relative; + border: purple 2px solid; + width: 95%; + margin: 1% auto; + } + + .box>img { + width: calc(95vw * 0.48); + height: calc(95vw * 0.40); + } + + .title { + display: block; + text-align: center; + position: relative; + font-size: 2vw; + line-height: 6vw; + font-family: "楷体"; + font-weight: bolder; + } + + .abstract { + position: absolute; + width: calc(95vw * 0.48); + right: 0; + top: 0; + text-indent: 2em; + margin: 1% 3%; + font-size: 4vw; + } +} \ No newline at end of file diff --git a/css/animation.css b/css/animation.css new file mode 100644 index 0000000..d825e30 --- /dev/null +++ b/css/animation.css @@ -0,0 +1,339 @@ +.animated { + animation-duration: 1.5s !important; + -webkit-animation-duration: 1.5s !important; + animation-fill-mode: both !important; + -webkit-animation-fill-mode: both !important; +} + +.animated-5 { + animation-duration: 0.5s !important; + -webkit-animation-duration: 0.5s !important; + animation-fill-mode: both !important; + -webkit-animation-fill-mode: both !important; +} + +/*逐渐显示*/ +.toShow { + /* position: absolute; */ + animation: toShow 1.5s 0.5s; + animation: toShow 1.5s 0.5s; + animation-fill-mode: both !important; + -webkit-animation-fill-mode: both !important; +} + +.toShowImg { + /* position: absolute; */ + animation: toShowImg 1.5s 0s; + animation: toShowImg 1.5s 0s; + animation-fill-mode: both !important; + -webkit-animation-fill-mode: both !important; +} + +/* 放大效果*/ +.enlarge { + animation-name: enlarge; + -webkit-animation: enlarge; +} + +/*从上到下进入*/ +.fadeInDown { + animation-name: fadeInDown; + -webkit-animation: fadeInDown; +} + +/*从下到上进入*/ +.fadeInUpLeft { + animation-name: fadeInUpLeft; + -webkit-animation: fadeInUpLeft; +} + +/*从右到左进入*/ +.fadeInRight { + animation-name: fadeInRight; + -webkit-animation: fadeInRight; +} + +/*从左到右进入*/ +.fadeInLeft { + animation-name: fadeInLeft; + -webkit-animation: fadeInLeft; +} + +/*中心旋转*/ +.coreRotate { + animation-name: coreRotate; + -webkit-animation-name: coreRotate; +} + +@keyframes toShow { + 0% { + opacity: 0; + } + + 60% { + opacity: 0.8; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes toShow { + 0% { + opacity: 0; + } + + 40% { + opacity: 0.6; + } + + 100% { + opacity: 1; + } +} + +@keyframes toShowImg { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes toShowImg { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@keyframes enlarge { + from { + opacity: 0; + -ms-transform: scale(0.1, 0.1); + /* IE 9 */ + -webkit-transform: scale(0.1, 0.1); + /* Safari */ + transform: scale(0.1, 0.1); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + } +} + +@-webkit-keyframes enlarge { + from { + opacity: 0; + -ms-transform: scale(0.1, 0.1); + /* IE 9 */ + -webkit-transform: scale(0.1, 0.1); + /* Safari */ + transform: scale(0.1, 0.1); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + } +} + +/*从上到下*/ +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate(0, -1000px); + /* Safari */ + transform: stranslate(0, -1000px); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: translate(0, 10px); + /* Safari */ + transform: stranslate(0, 10px); + /* 标准语法 */ + } +} + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate(0, -1000px); + /* Safari */ + transform: stranslate(0, -1000px); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: translate(0, 10px); + /* Safari */ + transform: stranslate(0, 10px); + /* 标准语法 */ + } +} + +/*从左下到右上*/ +@keyframes fadeInUpLeft { + from { + opacity: 0; + -webkit-transform: translate(-1000px, 1000px); + /* Safari */ + transform: stranslate(-1000px, 1000px); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: translate(0, 10px); + /* Safari */ + transform: stranslate(0, 10px); + /* 标准语法 */ + } +} + +@-webkit-keyframes fadeInUpLeft { + from { + opacity: 0; + -webkit-transform: translate(-1000px, 1000px); + /* Safari */ + transform: stranslate(-1000px, 1000px); + /* 标准语法 */ + } + + to { + opacity: 1; + -webkit-transform: translate(0, 10px); + /* Safari */ + transform: stranslate(0, 10px); + /* 标准语法 */ + } +} + +/*从右到左进入*/ +@keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate(1000px, 0); + transform: stranslate(1000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate(10px, 0); + transform: stranslate(10px, 0); + } +} + +@-webkit-keyframes fadeInRight { + from { + opacity: 0; + -webkit-transform: translate(1000px, 0); + transform: stranslate(1000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate(10px, 0); + transform: stranslate(10px, 0); + } +} + +/*从左到右进入*/ +@keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate(-1000px, 0); + transform: stranslate(-1000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate(10px, 0); + transform: stranslate(10px, 0); + } +} + +@-webkit-keyframes fadeInLeft { + from { + opacity: 0; + -webkit-transform: translate(-1000px, 0); + transform: stranslate(-1000px, 0); + } + + to { + opacity: 1; + -webkit-transform: translate(10px, 0); + transform: stranslate(10px, 0); + } +} + +/*绕中心旋转*/ +@keyframes coreRotate { + 5% { + transform: rotate(5deg); + -ms-transform: rotate(5deg); + /* IE 9 */ + -webkit-transform: rotate(5deg); + /* Safari and Chrome */ + } + + 30% { + transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + } + + 60% { + transform: rotate(5deg); + -ms-transform: rotate(5deg); + -webkit-transform: rotate(5deg); + } + + 90% { + transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + } +} + +@-webkit-keyframes coreRotate { + 5% { + transform: rotate(5deg); + -ms-transform: rotate(5deg); + /* IE 9 */ + -webkit-transform: rotate(5deg); + /* Safari and Chrome */ + } + + 30% { + transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + } + + 60% { + transform: rotate(5deg); + -ms-transform: rotate(5deg); + -webkit-transform: rotate(5deg); + } + + 90% { + transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + } +} \ No newline at end of file diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..344497a --- /dev/null +++ b/css/global.css @@ -0,0 +1,256 @@ +* { + margin: 0; + padding: 0; +} + +body { + overflow-x: hidden; + cursor: default; + transition: all 0.5s; +} + +.ishide { + opacity: 0; +} + +.loading { + -webkit-transition-property: -webkit-transform; + -webkit-transition-duration: 1s; + transition-property: -moz-transform; + transition-duration: 1s; + -webkit-animation: rotate 4s steps(12, start) infinite; + -moz-animation: rotate 4s steps(12, start) infinite; + -o-animation: rotate 4s steps(12, start) infinite; + animation: rotate 4s steps(12, start) infinite; +} + +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + } +} + +@-moz-keyframes rotate { + from { + -moz-transform: rotate(0deg); + } + + to { + -moz-transform: rotate(359deg); + } +} + +@-o-keyframes rotate { + from { + -o-transform: rotate(0deg); + } + + to { + -o-transform: rotate(359deg); + } +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(359deg); + } +} + +.to-top { + position: fixed; + bottom: 10px; + right: 10px; + z-index: 999; + cursor: pointer; +} + +#home { + position: fixed; + bottom: 10px; + left: 10px; + width: 48px; + height: 48px; + z-index: 999; + cursor: pointer; +} + +.header { + margin: 0 auto; + background-image: url('../img/hwcloud.jpg'); +} + +.sub-header { + height: 10vw !important; + background-size: cover !important; +} + +.breadcrumb { + margin: 1.5% 2%; +} + +.breadcrumb>span { + font-weight: bolder; +} + +.breadcrumb>span:hover { + color: purple; + cursor: pointer; + text-decoration: underline; +} + +.seperator { + display: block; + width: 60px; + height: 2.5px; + margin: 10px 0 20px; + background-color: rgb(128, 0, 128); + position: relative; + left: 2%; +} + +.header>img { + position: absolute; + top: 0; + z-index: -1; +} + +.container { + max-width: 1366px; + min-height: 100px; + margin: 0 auto; +} + +.nav-container { + width: 100%; + display: flex; + text-align: center; + height: 128px; + position: sticky; + top: 0; + background-color: white; + /* background: linear-gradient( + to top, + rgba(255, 255, 255, 0), + rgb(255, 255, 255), + rgb(255, 255, 255), + rgb(255, 255, 255), + rgb(255, 255, 255) + ); */ + z-index: 999; + box-shadow: 0 10px 10px -10px #aaaaaa; +} + +.nav-item { + position: relative; + float: left; + width: 25%; + line-height: 128px; + font-size: 25px; + cursor: default; + margin: 0 20px; +} + +.nav-item:hover { + cursor: pointer; + color: rgb(180, 0, 128); +} + +.nav-item>img { + position: relative; + top: 4px; + height: 28px; +} + +.footer { + height: 50px; + line-height: 50px; + width: 100%; + text-align: center; + color: rgb(119, 119, 119); + border-top: 1px solid rgb(220, 223, 230); +} + +.footer p { + line-height: 20px; + margin: 0; + padding: 0; +} + +.support { + color: grey; +} + +@media screen and (min-width: 992px) { + .header { + width: 100vw; + height: calc(55800vw / 1366); + background-size: contain; + } + + .loading { + position: fixed; + width: 50px; + height: 50px; + left: calc(50% - 25px); + top: calc(50% - 25px); + } + + .footer p { + font-size: 14px; + } + + .footer { + font-size: 14px; + } +} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + .header { + width: 100vw; + height: calc(55800vw / 1366); + } +} + +@media screen and (min-width: 1366px) {} + +@media screen and (max-width: 992px) { + .header { + width: 100vw; + height: calc(55800vw / 1366 / 2); + background-size: cover; + } + + .loading { + position: fixed; + width: 12vw; + height: 12vw; + left: calc(50% - 6vw); + top: calc(50% - 6vw); + } + + .breadcrumb { + font-size: 3vw; + } + + .to-top>img, + #home { + height: 8vw; + width: 8vw; + } + + .footer p { + font-size: 1.8vw; + } + + .footer { + font-size: 1.8vw; + } +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..afa3e88 --- /dev/null +++ b/css/index.css @@ -0,0 +1,578 @@ +.slogan { + color: purple; +} + +.slogan>span { + max-width: 6em; +} + + +.slogan>span:nth-child(2) { + font-family: "楷体"; + min-width: 8em; +} + +.container>p { + font-family: "楷体"; +} + +.float-box { + width: 90%; + /* height: 400px; */ + position: inherit; + left: 5%; + background: rgba(255, 255, 255, 0.2); + padding: 1%; + margin-top: 20px; + text-align: center; + padding-bottom: calc(1% + 50px); +} + +.text-left>span { + text-indent: 2em; + margin-left: 7.5%; + margin-right: 7.5%; + text-align: left; +} + +.text-left>img { + margin-top: 20%; +} + +.float-box>h3 { + font-weight: bold; +} + +.float-box>span { + font-family: "楷体"; + font-weight: bolder; +} + +.float-box:hover, +.float-box:focus { + box-shadow: 0 11px 32px rgba(115, 115, 156, 0.3); + transition: all 0.4s linear; +} + +.float-container { + width: 100%; + /* background: url("../img/superiority.png"); */ + display: flex; +} + +.superiority-img { + margin: 40px auto; + margin-top: 25%; + width: 40%; +} + +@media screen and (min-width: 992px) { + p { + margin: 5% 10%; + font-size: 1.3vw; + text-indent: 2em; + } + + h2 { + text-align: center; + font-size: 3vw; + } + + h3 { + text-align: center; + font-size: 2vw; + font-weight: normal; + } + + .float-box>span { + display: block; + margin-top: 1%; + margin-bottom: 1%; + font-weight: 400; + line-height: 30px; + font-size: 1.5vw; + } +} + +@media screen and (min-width: 1366px) { + .header { + height: 558px; + max-width: 1366px; + max-height: 558px; + } + + .slogan>span:nth-child(1) { + position: relative; + display: block; + font-size: 105px; + font-weight: bolder; + left: 150px; + top: 80px; + } + + .slogan>span:nth-child(2) { + position: relative; + display: block; + font-size: 55px; + top: 195px; + left: 150px; + } + + .application-container { + width: 1366px; + height: 1366px; + margin: auto; + margin-bottom: 136.6px; + } + + .application-container>div { + width: 683px; + height: 546.4px; + position: relative; + } + + .app-item1 { + top: 0; + left: 0; + } + + .app-item1>img { + height: 546.4px; + width: 683px; + } + + .app-item2 { + top: -546.4px; + left: 683px; + } + + .app-item2>span { + position: relative; + display: block; + max-width: 478.1px; + } + + .app-item2>span:first-child { + font-size: 95px; + top: 20%; + left: 10%; + line-height: 95px; + font-weight: bolder; + } + + .app-item2>span:last-child { + font-size: 54px; + line-height: 54px; + top: 35%; + left: 14%; + font-family: "楷体"; + } + + .app-item3 { + top: -546.4px; + left: 0; + background-color: rgba(16, 72, 176, 0.69); + color: white; + } + + .app-item3>span { + position: relative; + display: block; + } + + .app-item3>span:first-child { + font-size: 95px; + top: 15%; + left: 16%; + line-height: 95px; + font-weight: bolder; + } + + .app-item3>span:nth-child(2) { + font-size: 54px; + line-height: 54px; + top: 30%; + left: 20%; + font-family: "楷体"; + } + + .app-item3>img { + width: 546.4px; + height: 409.8px; + position: relative; + top: 191.24px; + left: 204.9px; + } + + .app-item4 { + top: -1092.8px; + left: 683px; + display: flex; + } + + .app-item4>* { + position: relative; + } + + .app-item4>img { + left: -68.3px; + width: 478.1px; + height: 321px; + } + + .app-item4>div { + left: -68.3px; + top: -68.3px; + background-color: rgb(16, 72, 176); + height: 389.31px; + width: 341.5px; + } + + .app-item4>span:nth-child(3) { + position: absolute; + font-size: 95px; + top: 85%; + left: 20%; + line-height: 95px; + font-weight: bolder; + } + + .app-item4>span:nth-child(4) { + position: absolute; + font-size: 54px; + line-height: 54px; + top: 115%; + left: 25%; + font-family: "楷体"; + } + + +} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + .slogan>span:nth-child(1) { + position: relative; + display: block; + font-size: 8.5vw; + font-weight: bolder; + left: 13%; + top: 6vw + } + + .slogan>span:nth-child(2) { + position: relative; + display: block; + font-size: 4.5vw; + top: 12vw; + left: 13%; + } + + .application-container { + width: 100vw; + height: 100vw; + margin: auto; + margin-bottom: 10vw; + } + + .application-container>div { + width: 50vw; + height: 40vw; + position: relative; + } + + .app-item1 { + top: 0; + left: 0; + } + + .app-item1>img { + height: 40vw; + width: 50vw; + } + + .app-item2 { + top: -40vw; + left: 50vw; + } + + .app-item2>span { + position: relative; + display: block; + max-width: 35vw; + } + + .app-item2>span:first-child { + font-size: 7vw; + top: 20%; + left: 10%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item2>span:last-child { + font-size: 4vw; + line-height: 4vw; + top: 35%; + left: 14%; + font-family: "楷体"; + } + + .app-item3 { + top: -40vw; + left: 0; + background-color: rgba(16, 72, 176, 0.69); + color: white; + } + + .app-item3>span { + position: relative; + display: block; + } + + .app-item3>span:first-child { + font-size: 7vw; + top: 15%; + left: 16%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item3>span:nth-child(2) { + font-size: 4vw; + line-height: 4vw; + top: 30%; + left: 20%; + font-family: "楷体"; + } + + .app-item3>img { + width: 40vw; + height: 30vw; + position: relative; + top: 14vw; + left: 15vw; + } + + + .app-item4 { + top: -80vw; + left: 50vw; + display: flex; + } + + .app-item4>* { + position: relative; + } + + .app-item4>img { + left: -5vw; + width: 35vw; + height: 23.5vw; + } + + .app-item4>div { + left: -5vw; + top: -5vw; + background-color: rgb(16, 72, 176); + height: 28.5vw; + width: 25vw; + } + + .app-item4>span:nth-child(3) { + position: absolute; + font-size: 7vw; + top: 85%; + left: 20%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item4>span:nth-child(4) { + position: absolute; + font-size: 4vw; + line-height: 4vw; + top: 115%; + left: 25%; + font-family: "楷体"; + } +} + +@media screen and (max-width: 992px) { + + + p { + margin: 5% 10%; + text-indent: 4em; + } + + h2 { + text-align: center; + font-size: 5.5vw; + } + + h3 { + text-align: center; + font-size: 3.5vw; + font-weight: normal; + } + + .slogan>span:nth-child(1) { + position: relative; + display: none; + font-size: 12vw; + font-weight: bolder; + left: 11%; + top: 6vw; + } + + .slogan>span:nth-child(2) { + position: relative; + display: none; + font-size: 6vw; + top: 12vw; + left: 12%; + font-family: "楷体"; + } + + .nav-item { + font-size: 27px !important; + } + + .float-box>span { + display: block; + margin-top: 1%; + margin-bottom: 1%; + font-weight: 400; + line-height: 30px; + font-size: 2vw; + } + + .application-container { + width: 100vw; + height: 100vw; + margin: auto; + margin-bottom: 10vw; + } + + .application-container>div { + width: 50vw; + height: 40vw; + position: relative; + } + + .app-item1 { + top: 0; + left: 0; + } + + .app-item1>img { + height: 40vw; + width: 50vw; + } + + .app-item2 { + top: -40vw; + left: 50vw; + } + + .app-item2>span { + position: relative; + display: block; + max-width: 35vw; + } + + .app-item2>span:first-child { + font-size: 7vw; + top: 20%; + left: 10%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item2>span:last-child { + font-size: 4vw; + line-height: 4vw; + top: 35%; + left: 14%; + font-family: "楷体"; + } + + .app-item3 { + top: -40vw; + left: 0; + background-color: rgba(16, 72, 176, 0.69); + color: white; + } + + .app-item3>span { + position: relative; + display: block; + } + + .app-item3>span:first-child { + font-size: 7vw; + top: 15%; + left: 16%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item3>span:nth-child(2) { + font-size: 4vw; + line-height: 4vw; + top: 30%; + left: 20%; + font-family: "楷体"; + } + + .app-item3>img { + width: 40vw; + height: 30vw; + position: relative; + top: 14vw; + left: 15vw; + } + + + .app-item4 { + top: -80vw; + left: 50vw; + display: flex; + } + + .app-item4>* { + position: relative; + } + + .app-item4>img { + left: -5vw; + width: 35vw; + height: 23.5vw; + } + + .app-item4>div { + left: -5vw; + top: -5vw; + background-color: rgb(16, 72, 176); + height: 28.5vw; + width: 25vw; + } + + .app-item4>span:nth-child(3) { + position: absolute; + font-size: 7vw; + top: 85%; + left: 20%; + line-height: 7vw; + font-weight: bolder; + } + + .app-item4>span:nth-child(4) { + position: absolute; + font-size: 4vw; + line-height: 4vw; + top: 115%; + left: 25%; + font-family: "楷体"; + } +} \ No newline at end of file diff --git a/css/intellegence.css b/css/intellegence.css new file mode 100644 index 0000000..5860e28 --- /dev/null +++ b/css/intellegence.css @@ -0,0 +1,283 @@ +a { + text-decoration: none; + color: black; +} + +@media screen and (min-width: 992px) { + .banner-box span { + position: absolute; + top: calc(45% - 60px); + margin-top: -30px; + width: 30px; + height: 120px; + line-height: 120px; + color: rgb(255, 255, 255); + font-size: 40px; + opacity: 0; + transition: all 0.5s; + } + + .banner-box span:hover { + opacity: 1; + background-color: rgba(17, 17, 17, 0.188); + } + + .banner-box #left { + left: 0px; + } + + .banner-box #right { + right: 0px; + } + + .banner-box ol { + position: absolute; + top: 20px; + right: 30px; + list-style: none; + } + + .banner-box ol li { + width: 20px; + height: 20px; + background: rgba(17, 17, 17, 0.188); + color: white; + font-size: 15px; + line-height: 20px; + float: left; + margin: 0px 3px; + text-align: center; + } + + .banner-box ol .active { + background: rgba(17, 17, 17, 0.502); + color: rgb(255, 112, 255); + } + + .row { + position: relative; + width: 100%; + min-height: 300px; + display: flex; + } + + .box p { + color: rgba(128, 0, 128, 0.5); + transition: all 1s ease-in-out; + } + + .box p:hover { + text-decoration: underline; + } + + .box-left { + position: absolute; + left: 3%; + } + + .box-right { + position: absolute; + right: 3%; + } + + .box img { + width: 100%; + height: 100%; + transition: all 0.5s ease-in-out; + } + + .box img:hover { + transform: scale(1.2); + } + + .box h4 { + margin: 4%; + font-size: 25px; + } + + .box p { + margin: 4%; + font-size: 20px; + } +} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + .banner-box { + position: relative; + width: 100vw; + height: 53vw; + margin: 50px auto; + overflow: hidden; + } + + .banner-box #imgul { + width: 100vw; + height: 53vw; + } + + .banner-box #imgul li { + width: 100vw; + height: 53vw; + } + + .banner-box #imgul li img { + width: 100vw; + height: 53vw; + display: block; + float: left; + } + + + .row-1 { + top: -10vw; + height: 40vw; + } + + .row-2 { + top: -5vw; + height: 40vw; + } + + .box { + width: 45%; + height: 38.5vw; + box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); + border: white 2px solid; + overflow: hidden; + } + + .imgbox { + width: calc(100vw * 0.45 + 4px); + height: calc(53vw * 0.45 + 4px); + overflow: hidden; + } + +} + +@media screen and (min-width: 1366px) { + .banner-box { + position: relative; + width: 1360px; + height: 720px; + margin: 50px auto; + overflow: hidden; + } + + .banner-box #imgul { + width: 1360px; + height: 720px; + } + + .banner-box #imgul li { + width: 1360px; + height: 720px; + } + + .banner-box #imgul li img { + width: 1360px; + height: 720px; + display: block; + float: left; + } + + .row-1 { + top: -150px; + height: 500px; + } + + .row-2 { + top: -50px; + height: 550px; + } + + .box { + width: 45%; + height: 530px; + box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); + border: white 2px solid; + overflow: hidden; + } + + .imgbox { + width: calc(1360px * 0.45 + 4px); + height: calc(840px * 0.45 + 4px); + overflow: hidden; + } +} + +@media screen and (max-width: 992px) { + .banner-box span { + display: none; + } + + .banner-box ol { + display: none; + } + + .banner-box { + position: relative; + width: 100vw; + height: 53vw; + margin: 50px auto; + overflow: hidden; + } + + .banner-box #imgul { + width: 100vw; + height: 53vw; + } + + .banner-box #imgul li { + width: 100vw; + height: 53vw; + } + + .banner-box #imgul li img { + width: 100vw; + height: 53vw; + display: block; + float: left; + } + + .row { + position: relative; + width: 100%; + min-height: 300px; + } + + .box p { + color: rgba(128, 0, 128, 0.5); + margin: 4%; + font-size: 5vw; + } + + .box img { + width: 100%; + height: 100%; + transition: all 0.5s ease-in-out; + } + + .box img:hover { + transform: scale(1.2); + } + + .box h4 { + margin: 4%; + font-size: 6vw; + } + + .box { + width: 95vw; + margin: 1vw auto 3.5vw auto; + box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); + border: white 8px solid; + overflow: hidden; + } + + .imgbox { + width: calc(95vw - 8px); + height: calc(45vw - 8px); + margin: auto; + overflow: hidden; + } +} \ No newline at end of file diff --git a/css/policy.css b/css/policy.css new file mode 100644 index 0000000..7eaf002 --- /dev/null +++ b/css/policy.css @@ -0,0 +1,101 @@ +.policy-details { + list-style-type: none; + margin-left: 2%; +} + +.policy-details>li { + margin-top: 22px; + font-family: "楷体"; +} + +li>a { + color: black; + text-decoration: none; +} + +li>a:hover { + color: purple; + text-decoration: underline purple; +} + +ul { + margin-bottom: 15px; +} + +summary { + font-weight: bold; +} + +@media screen and (min-width: 992px) {} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + details { + margin-left: 2%; + font-size: 2vw; + } + + .policy-more { + position: relative; + left: 1.5em; + top: 0; + font-size: 1.5vw; + margin: 8px 0; + } + + .policy-time, + .policy-from { + font-size: 1vw; + color: gray; + margin-left: 10px; + } +} + +@media screen and (min-width: 1366px) { + details { + margin-left: 2%; + font-size: 1.2vw; + } + + .policy-more { + position: relative; + left: 2em; + top: 0; + font-size: 0.5vw; + margin: 8px 0; + } + + .policy-time, + .policy-from { + font-size: 0.6vw; + color: gray; + margin-left: 10px; + } +} + +@media screen and (max-width: 992px) { + details { + margin-left: 3.5%; + margin-right: 3.5%; + font-size: 3.5vw; + } + + summary { + font-size: 4vw; + } + + .policy-more { + position: relative; + left: 80vw; + width: 5em; + top: 0; + font-size: 3vw; + margin: 8px 0; + } + + .policy-time, + .policy-from { + font-size: 1.2vw; + color: gray; + margin-left: 10px; + } +} \ No newline at end of file diff --git a/css/wlw.css b/css/wlw.css new file mode 100644 index 0000000..a6f94f0 --- /dev/null +++ b/css/wlw.css @@ -0,0 +1,336 @@ +.container>img { + display: block; + margin: auto; +} + +h3 { + text-align: center; + font-family: "楷体"; + color: purple; +} + +.board>span { + font-family: "楷体"; +} + +.sm-board>span { + font-family: "楷体"; +} + +@media screen and (min-width: 992px) { + .bg { + position: relative; + /* background-image: url("../img/wlw-bg.jfif"); */ + background-size: contain; + background-repeat: no-repeat; + } + + .bg::before { + content: ''; + background-image: url('../img/wlw-bg.jfif'); + background-size: contain; + background-repeat: no-repeat; + + filter: blur(1px); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + } +} + +@media screen and (min-width: 992px) and (max-width: 1366px) { + .bg { + width: 100vw; + height: calc(100vw * 768 / 1366); + } + + .board, + .sm-board { + background-color: rgba(255, 255, 255, 0.65); + color: purple; + border-radius: calc(100vw * 768 / 1366 * 0.35 * 0.05); + box-shadow: + 5px 5px 20px 0 black, + -5px -5px 20px 0 white; + } + + .board { + position: absolute; + width: calc(100vw * 0.35); + height: calc(100vw * 768 / 1366 * 0.35); + top: 17.5vw; + left: 5vw; + } + + .board>h4 { + margin-left: 5%; + font-size: 3vw; + line-height: calc(100vw * 768 / 1366 * 0.35 * 0.5); + } + + .board>span { + margin-left: 5%; + font-size: 2vw; + line-height: 3vw; + } + + .sm-board { + position: absolute; + width: calc(100vw * 0.445); + height: calc(100vw * 768 / 1366 * 0.2); + } + + .sm-board>img { + position: relative; + height: 3.5vw; + width: 3.5vw; + top: calc(100vw * 768 / 1366 * 0.15 / 2 - 3.5vw / 2); + right: 5vw; + } + + .sm-board>h5 { + font-size: 2.5vw; + font-weight: 400; + display: inline; + } + + .sm-board>span { + display: block; + text-indent: 2em; + margin-left: 5%; + margin-right: 5%; + font-size: 1.5vw; + line-height: 2.5vw; + } + + .board1 { + right: 2vw; + top: 5%; + } + + .board2 { + right: 7.5vw; + top: 28%; + } + + .board3 { + right: 2vw; + bottom: 28%; + } + + .board4 { + right: 7.5vw; + bottom: 5%; + } + + h3 { + font-size: 60px; + line-height: 120px; + } +} + +@media screen and (min-width: 1366px) { + .bg { + width: 1366px; + height: 768px; + } + + .board, + .sm-board { + background-color: rgba(255, 255, 255, 0.65); + color: purple; + border-radius: calc(786px * 0.35 * 0.05); + box-shadow: + 5px 5px 20px 0 black, + -5px -5px 20px 0 white; + } + + .board { + position: absolute; + width: calc(1366px * 0.35); + height: calc(768px * 0.35); + top: 250px; + left: 110px; + } + + .board>h4 { + margin-left: 5%; + font-size: 40px; + line-height: calc(768px * 0.35 * 0.5); + } + + .board>span { + margin-left: 5%; + font-size: 30px; + line-height: 45px; + } + + .sm-board { + position: absolute; + width: calc(1366px * 0.355); + height: calc(768px * 0.16); + } + + .sm-board>img { + position: relative; + height: 45px; + width: 45px; + top: calc(768px * 0.15 / 2 - 45px / 2); + right: 60px; + } + + .sm-board>h5 { + font-size: 30px; + font-weight: 400; + display: inline; + } + + .sm-board>span { + display: block; + text-indent: 2em; + margin-left: 5%; + margin-right: 5%; + font-size: 17px; + } + + .board1 { + right: 70px; + top: 10%; + } + + .board2 { + right: 130px; + top: 32.5%; + } + + .board3 { + right: 70px; + bottom: 32.5%; + } + + .board4 { + right: 130px; + bottom: 10%; + } + + h3 { + font-size: 60px; + line-height: 120px; + } +} + +@media screen and (max-width: 992px) { + .bg { + position: relative; + /* background-image: url("../img/wlw-bg.jfif"); */ + background-size: contain; + background-repeat: no-repeat; + width: 100vw; + height: 130vw; + } + + .bg::before { + content: ''; + background-image: url('../img/wlw-bg.jfif'); + background-size: cover; + background-repeat: no-repeat; + + filter: blur(1px); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + } + + .board, + .sm-board { + background-color: rgba(255, 255, 255, 0.65); + color: purple; + border-radius: calc(100vw * 768 / 1366 * 0.35 * 0.05); + box-shadow: + 5px 5px 20px 0 black, + -5px -5px 20px 0 white; + } + + .board { + position: absolute; + width: calc(100vw * 0.35); + height: calc(100vw * 768 / 1366 * 0.80); + top: 18vw; + left: 2vw; + } + + .board>h4 { + margin-left: 5%; + font-size: 8vw; + line-height: 15vw; + } + + .board>span { + display: block; + margin-top: 10%; + margin-left: 5%; + font-size: 5vw; + line-height: 8vw; + } + + .sm-board { + position: absolute; + width: 50vw; + height: 29vw; + right: 2vw; + } + + .sm-board>img { + position: relative; + height: 3.5vw; + width: 3.5vw; + top: calc(100vw * 768 / 1366 * 0.15 / 2 - 3.5vw / 2); + right: 5vw; + } + + .sm-board>h5 { + font-size: 4vw; + font-weight: 400; + display: inline; + } + + .sm-board>span { + display: block; + text-indent: 2em; + margin-left: 5%; + margin-right: 5%; + font-size: 3vw; + } + + .board1 { + top: 2%; + } + + .board2 { + top: 27%; + line-height: 5vw; + } + + .board3 { + bottom: 27%; + } + + .board4 { + bottom: 2%; + } + + h3 { + font-size: 60px; + line-height: 120px; + } + + .container>img { + width: 100%; + } +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..0a1704c Binary files /dev/null and b/favicon.ico differ diff --git a/html/achievement.html b/html/achievement.html new file mode 100644 index 0000000..9146bd6 --- /dev/null +++ b/html/achievement.html @@ -0,0 +1,186 @@ + + + + + + + + 成果展 + + + + + + + + +
+ +
+ +
+
+ +
+
+
+ +
+
+ + 首页 +
+
+ + 宏观政策 +
+
+ + 物联网+ +
+
+ + 智能+ +
+
+ + 成果展 +
+
+
+ +
+
+ +
+ 首页 / 成果展 +
+
+
+
+ + +

+ 自2009年8月我国提出“感知中国”国家战略，物联网发展受到各方广泛关注。几年的发展实践表明，物联网在带动技术创新能力增强、壮大新一代信息技术产业、培育新的经济增长点、促进产业转型升级、提升社会管理和公共服务水平等方面具有重要作用。现阶段，经过前期的市场培育，物联网应用需求全面升级、与传统行业融合更加深入、创新要素空前活跃、标准体系和安全保障建设更为迫切，相关产业形态、各地发展状态、市场环境等都发生了诸多深刻变化，物联网已进入全新发展阶段。 +

+ + 典型案例 + +
+ + +
+ 成果介绍 +
+
+
+
+ + + 公共数字文化服务大数据系统 + + + 公共数字文化服务大数据系统活跃了群众文化生活，推进社会文化发展；深化公共数字文化服务领域的服务创新应用，推动艺术普及服务与高新技术融合发展。 + +
+
+ + + 智慧水务云平台 + + + 该系统集计量技术、通讯技术、网络技术、数据技术于一体，实现了计量仪表在精准计量同时可将计量数据通过多种通讯技术传输至计算机获服务器的一整套抄表技术。 + +
+
+ + + 地下管网安全监控智能处置系统 + + + 针对城镇地下管网及化粪池气体进行安全监控及智能处置，集实时监测地下管网、超标气体自动处理、地下管线三维可视成像及人工智能视频监控为一体的综合系统。 + +
+
+ + + 安全智能锁 + + + 以“安全智能锁”运行信息化系统及相应的服务管理体系为支撑，解决的主要问题是海关对进出口货物在海关监管场所之间转运的严密高效监管需要。 + +
+
+
+
+ + + 交通综合运行协调与应急指挥平台 + + + 打造智慧交通数据湖，建设权威、全面、综合的交通数据资源中心，全面提升综合交通运行监测与预警能力，增强综合交通管理决策支持能力，改善出行信息服务质量。 + +
+
+ + + 物联网一级回收项目 + + + 基于物联网、移动互联网、云计算等技术，搭建信息化智能管理平台，实现数据实时监控、远程状态监控、回收运输路径规划与监控等云服务功能，回收过程可溯源。 + +
+
+ + + HPLC+高速无线本地通信技术方案 + + + 融合HPLC载波、高速微功率无线两种通信技术的一种高度冗余、高速率、高稳定性的新型本地通信技术方案，是目前智能电表应用的新一代用电信息采集本地通信方案。 + +
+
+ + + 中国电信：智慧社区解决方案 + + + 系统基于HINET智能网关，采集设备或者采集现场工控机内的数据，并通过互联网对设备实现远程实时数据采集、设备远程维护、故障远程诊断分析。 + +
+
+
+
+ +
+
+

+ 互联网ICP备案： + 鄂ICP备19027833号-1 + + | 公安联网备案： + + 鄂公网安备 42011102003698号 + +

+

+ 湖北互联网违法和不良信息举报平台 + | 网上有害信息举报专区： + 中国互联网违法和不良信息举报中心 + +

+
+
lcl提供技术支持
+
+
+ + + \ No newline at end of file diff --git a/html/intellegence.html b/html/intellegence.html new file mode 100644 index 0000000..c87d0f6 --- /dev/null +++ b/html/intellegence.html @@ -0,0 +1,166 @@ + + + + + + + + 智能+ + + + + + + + + +
+ +
+ +
+
+
+
+
+ +
+
+ + 首页 +
+
+ + 宏观政策 +
+
+ + 物联网+ +
+
+ + 智能+ +
+
+ + 成果展 +
+
+
+ +
+
+ +
+ 首页 / 智能+ +
+
+ + + + +
+
+ + +
+

人工智能

+

唤醒万物：让设备听懂用户说话、懂得用户需求

+ +
+
+ + +
+

智慧+

+

凝智聚势，变革飞跃，用智慧推动融合

+ +
+
+
+
+ + +
+

车联网

+

车载智能，自动驾驶，汽车行业数字化转型

+ +
+
+ + +
+

智能制造

+

业务整合，推进工业互联网技术，科技改变工程

+ +
+
+
+ + +
+
+

+ 互联网ICP备案： + 鄂ICP备19027833号-1 + + | 公安联网备案： + + 鄂公网安备 42011102003698号 + +

+

+ 湖北互联网违法和不良信息举报平台 + | 网上有害信息举报专区： + 中国互联网违法和不良信息举报中心 + +

+
+
lcl提供技术支持
+
+
+ + + + + + \ No newline at end of file diff --git a/html/policy.html b/html/policy.html new file mode 100644 index 0000000..89550aa --- /dev/null +++ b/html/policy.html @@ -0,0 +1,209 @@ + + + + + + + + 宏观政策 + + + + + + + + +
+ +
+ +
+
+
+
+
+ +
+
+ + 首页 +
+
+ + 宏观政策 +
+
+ + 物联网+ +
+
+ + 智能+ +
+
+ + 成果展 +
+
+
+ +
+
+ +
+ 首页 / 宏观政策 +
+
+
+ 国务院 + +
更多>>>
+
+
+ 工信部 + +
更多>>>
+
+
+ 其他部委 + +
更多>>>
+
+
+ 相关报道 + +
更多>>>
+
+
+ +
+
+

+ 互联网ICP备案： + 鄂ICP备19027833号-1 + + | 公安联网备案： + + 鄂公网安备 42011102003698号 + +

+

+ 湖北互联网违法和不良信息举报平台 + | 网上有害信息举报专区： + 中国互联网违法和不良信息举报中心 + +

+
+
lcl提供技术支持
+
+
+ + + + \ No newline at end of file diff --git a/html/wlw.html b/html/wlw.html new file mode 100644 index 0000000..f9e8782 --- /dev/null +++ b/html/wlw.html @@ -0,0 +1,119 @@ + + + + + + + + 物联网+ + + + + + + + + +
+ +
+ +
+
+
+
+
+ +
+
+ + 首页 +
+
+ + 宏观政策 +
+
+ + 物联网+ +
+
+ + 智能+ +
+
+ + 成果展 +
+
+
+ +
+
+ +
+ 首页 / 物联网+ +
+
+ +
+
+

物联网+

+ “新数据时代 新存储之道” +
+
+ +
云计算
+ 可以通过网络和移动设备访问的云计算平台使世界发生了翻天覆地的变化。这将其从必须获取技术的世界转变为人们生活的现实世界。 +
+
+ +
大数据
+ 大数据辅助科学决策和社会治理的机制，推进政府管理和社会治理模式创新，要运用大数据提升国家治理现代化水平。 +
+
+ +
万物互联
+ 将人、流程、数据和事物结合，使得网络连接变得更加相关、更有价值，给企业，个人和国家带来更加丰富的体验和前所未有的经济发展机遇。 +
+
+ +
物联网安全
+ 推进网络基础设施安全防护、用户个人信息保护、网络数据安全保障、网络安全产业培育、工业互联网安全体系建设等重点工作，努力营造安全可靠的网络环境。 +
+
+ +

物联网+ 数据云图

+ + + + + + +
+ +
+
+

+ 互联网ICP备案： + 鄂ICP备19027833号-1 + + | 公安联网备案： + + 鄂公网安备 42011102003698号 + +

+

+ 湖北互联网违法和不良信息举报平台 + | 网上有害信息举报专区： + 中国互联网违法和不良信息举报中心 + +

+
+
lcl提供技术支持
+
+
+ + + \ No newline at end of file diff --git a/img/achievement-banner1.jfif b/img/achievement-banner1.jfif new file mode 100644 index 0000000..5e5cd43 Binary files /dev/null and b/img/achievement-banner1.jfif differ diff --git a/img/achievement-left.jpg b/img/achievement-left.jpg new file mode 100644 index 0000000..706a4aa Binary files /dev/null and b/img/achievement-left.jpg differ diff --git a/img/application1.jpg b/img/application1.jpg new file mode 100644 index 0000000..40b5fed Binary files /dev/null and b/img/application1.jpg differ diff --git a/img/application2.jpg b/img/application2.jpg new file mode 100644 index 0000000..b10bed9 Binary files /dev/null and b/img/application2.jpg differ diff --git a/img/application3.jpg b/img/application3.jpg new file mode 100644 index 0000000..1f3c5f0 Binary files /dev/null and b/img/application3.jpg differ diff --git a/img/banner1.jpg b/img/banner1.jpg new file mode 100644 index 0000000..007bb19 Binary files /dev/null and b/img/banner1.jpg differ diff --git a/img/banner2.jfif b/img/banner2.jfif new file mode 100644 index 0000000..8e328cc Binary files /dev/null and b/img/banner2.jfif differ diff --git a/img/banner3.jfif b/img/banner3.jfif new file mode 100644 index 0000000..0d5b870 Binary files /dev/null and b/img/banner3.jfif differ diff --git a/img/banner4.jfif b/img/banner4.jfif new file mode 100644 index 0000000..4b74e6e Binary files /dev/null and b/img/banner4.jfif differ diff --git a/img/banner5.jpg b/img/banner5.jpg new file mode 100644 index 0000000..7036c4a Binary files /dev/null and b/img/banner5.jpg differ diff --git a/img/beian.png b/img/beian.png new file mode 100644 index 0000000..9f76394 Binary files /dev/null and b/img/beian.png differ diff --git a/img/data-infrastructure.jpg b/img/data-infrastructure.jpg new file mode 100644 index 0000000..7faa1c4 Binary files /dev/null and b/img/data-infrastructure.jpg differ diff --git a/img/hwcloud.jpg b/img/hwcloud.jpg new file mode 100644 index 0000000..9b7bfed Binary files /dev/null and b/img/hwcloud.jpg differ diff --git a/img/intellegence-box1.jpg b/img/intellegence-box1.jpg new file mode 100644 index 0000000..7e74220 Binary files /dev/null and b/img/intellegence-box1.jpg differ diff --git a/img/intellegence-box3.jpg b/img/intellegence-box3.jpg new file mode 100644 index 0000000..81c9f65 Binary files /dev/null and b/img/intellegence-box3.jpg differ diff --git a/img/intelligence-box2.jfif b/img/intelligence-box2.jfif new file mode 100644 index 0000000..d55cc7d Binary files /dev/null and b/img/intelligence-box2.jfif differ diff --git a/img/intelligence-box4.jfif b/img/intelligence-box4.jfif new file mode 100644 index 0000000..1a77961 Binary files /dev/null and b/img/intelligence-box4.jfif differ diff --git a/img/key-tech1.png b/img/key-tech1.png new file mode 100644 index 0000000..8f33acd Binary files /dev/null and b/img/key-tech1.png differ diff --git a/img/key-tech2.png b/img/key-tech2.png new file mode 100644 index 0000000..bfae82d Binary files /dev/null and b/img/key-tech2.png differ diff --git a/img/key-tech3.png b/img/key-tech3.png new file mode 100644 index 0000000..e96be88 Binary files /dev/null and b/img/key-tech3.png differ diff --git a/img/key-tech4.png b/img/key-tech4.png new file mode 100644 index 0000000..3840f41 Binary files /dev/null and b/img/key-tech4.png differ diff --git a/img/loading.png b/img/loading.png new file mode 100644 index 0000000..af6a139 Binary files /dev/null and b/img/loading.png differ diff --git a/img/marker.png b/img/marker.png new file mode 100644 index 0000000..5b98d14 Binary files /dev/null and b/img/marker.png differ diff --git a/img/nav-index.png b/img/nav-index.png new file mode 100644 index 0000000..a4942b4 Binary files /dev/null and b/img/nav-index.png differ diff --git a/img/nav-item1.png b/img/nav-item1.png new file mode 100644 index 0000000..0f4eed3 Binary files /dev/null and b/img/nav-item1.png differ diff --git a/img/nav-item2.png b/img/nav-item2.png new file mode 100644 index 0000000..cc81941 Binary files /dev/null and b/img/nav-item2.png differ diff --git a/img/nav-item3.png b/img/nav-item3.png new file mode 100644 index 0000000..1912011 Binary files /dev/null and b/img/nav-item3.png differ diff --git a/img/nav-item4.png b/img/nav-item4.png new file mode 100644 index 0000000..08c651f Binary files /dev/null and b/img/nav-item4.png differ diff --git a/img/pic1.jpg b/img/pic1.jpg new file mode 100644 index 0000000..96a4918 Binary files /dev/null and b/img/pic1.jpg differ diff --git a/img/pic2.jpg b/img/pic2.jpg new file mode 100644 index 0000000..e971486 Binary files /dev/null and b/img/pic2.jpg differ diff --git a/img/pic3.jpg b/img/pic3.jpg new file mode 100644 index 0000000..1cb0e4a Binary files /dev/null and b/img/pic3.jpg differ diff --git a/img/pic4.jpg b/img/pic4.jpg new file mode 100644 index 0000000..7f84380 Binary files /dev/null and b/img/pic4.jpg differ diff --git a/img/pic5.jpg b/img/pic5.jpg new file mode 100644 index 0000000..3bc1e90 Binary files /dev/null and b/img/pic5.jpg differ diff --git a/img/pic6.jpg b/img/pic6.jpg new file mode 100644 index 0000000..dc819b9 Binary files /dev/null and b/img/pic6.jpg differ diff --git a/img/pic7.jpg b/img/pic7.jpg new file mode 100644 index 0000000..13bfa82 Binary files /dev/null and b/img/pic7.jpg differ diff --git a/img/pic8.jpg b/img/pic8.jpg new file mode 100644 index 0000000..ca8aee0 Binary files /dev/null and b/img/pic8.jpg differ diff --git a/img/superiority1.png b/img/superiority1.png new file mode 100644 index 0000000..4f58cd0 Binary files /dev/null and b/img/superiority1.png differ diff --git a/img/superiority2.png b/img/superiority2.png new file mode 100644 index 0000000..eadb971 Binary files /dev/null and b/img/superiority2.png differ diff --git a/img/superiority3.png b/img/superiority3.png new file mode 100644 index 0000000..ab1886f Binary files /dev/null and b/img/superiority3.png differ diff --git a/img/superiority4.png b/img/superiority4.png new file mode 100644 index 0000000..a9305c1 Binary files /dev/null and b/img/superiority4.png differ diff --git a/img/totop.png b/img/totop.png new file mode 100644 index 0000000..8f9905a Binary files /dev/null and b/img/totop.png differ diff --git a/img/wlw-bg.jfif b/img/wlw-bg.jfif new file mode 100644 index 0000000..d8b3e48 Binary files /dev/null and b/img/wlw-bg.jfif differ diff --git a/img/wlw-bg.png b/img/wlw-bg.png new file mode 100644 index 0000000..0e02dcb Binary files /dev/null and b/img/wlw-bg.png differ diff --git a/img/wlw.png b/img/wlw.png new file mode 100644 index 0000000..0fb494e Binary files /dev/null and b/img/wlw.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e087186 --- /dev/null +++ b/index.html @@ -0,0 +1,231 @@ + + + + + + + + 物联网简介 + + + + + + + + +
+ +
+ +
+ +
+
+ + 首页 +
+
+ + 宏观政策 +
+
+ + 物联网+ +
+
+ + 智能+ +
+
+ + 成果展 +
+
+
+
+
+ 万物互联 + 见智 · 见未来 +
+
+ +
+

+ +

特 征

+

Characteristic

+
+
+ 行业领先技术 +

整体感知

+
+ + RFID、传感器、二维码 + +
+ + 随时随地智能感知获取物体信息 + +
+ + 信息采集、协同处理、智能组网 + +
+
+ 监控 +

可靠传输

+
+ + 无线通信网络、5G技术 + +
+ + 互联网、无线网络相融合 + +
+ + 实时、准确传输信息 + +
+
+ 节约成本 +

智能处理

+
+ + 云计算、模糊识别 + +
+ + 跨地域、跨行业、跨部门 + + +
+ + 智能化监测与控制 + +
+
+
+
+ + + +

应 用

+

Application

+

+ 物联网的应用领域涉及到方方面面，在工业、农业、环境、交通、物流、安保等基础设施领域的应用，有效的推动了这些方面的智能化发展，使得有限的资源更加合理的使用分配，从而提高了行业效率、效益。 +

+

+ 在家居、医疗健康、教育、金融与服务业、旅游业等与生活息息相关的领域的应用，从服务范围、服务方式到服务的质量等方面都有了极大的改进，大大的提高了人们的生活质量; +

+
+
+ +
+
+ 颠覆传统 + 没有做不到

    只有想不到 +
+
+ 万物互联 + 物物相连

    走向未来 + +
+
+ +
+ 创新融合 + 数字化转型

    把握窗口机遇期 +
+
+

+ 在涉及国防军事领域方面，虽然还处在研究探索阶段，但物联网应用带来的影响也不可小觑，大到卫星、导弹、飞机、潜艇等装备系统，小到单兵作战装备，物联网技术的嵌入有效提升了军事智能化、信息化、精准化，极大提升了军事战斗力，是未来军事变革的关键。 +

+
+ + + +

关 键 技 术

+

Key Technology

+
+
+ 行业领先技术 +

射频识别技术

+
+ + 射频识别（RFID）的原理是阅读器与标签之间进行非接触式的数据通信，达到识别目标的目的。 + +
+ + RFID 的应用非常广泛，典型应用有动物晶片、汽车晶片防盗器、门禁管制、停车场管制、生产线自动化、物料管理。 + +
+
+ 行业领先技术 +

传感网

+
+ + MEMS，微机电系统，是由微传感器、微执行器、信号处理和控制电路、通讯接口和电源等部件组成的一体化的微型器件系统。 + +
+ + MEMS的目标是把信息的获取、处理和执行集成在一起，组成具有多功能的微型系统，集成于大尺寸系统中，从而大幅度地提高系统的自动化、智能化和可靠性水平。 + +
+
+
+
+ 监控 +

M2M系统框架

+
+ + M2M是Machine-to-Machine / Man的简称，是一种以机器终端智能交互为核心的、网络化的应用与服务。它将使对象实现智能化的控制。 + +
+ + M2M技术涉及5个重要的技术部分：机器、M2M硬件、通信网络、中间件、应用。基于云计算平台和智能网络，可以依据传感器网络获取的数据进行决策，改变对象的行为进行控制和反馈。 + +
+
+ 节约成本 +

云计算

+
+ + 云计算旨在通过网络把多个成本相对较低的计算实体整 合成一个具有强大计算能力的完美系统，并借助先进的商业模式让终端用户可以得到这些强大计算能力的服务。 + +
+ + 物联网感知层获取大量数据信息，在经过网络层传输以后，放到一个标准平台上，再利用高性能的云计算对其进行处理，赋予这些数据智能，最终转换成对终端用户有用的信息。 + +
+
+
+ +
+
+

+ 互联网ICP备案： + 鄂ICP备19027833号-1 + + | 公安联网备案： + + 鄂公网安备 42011102003698号 + +

+

+ 湖北互联网违法和不良信息举报平台 + | 网上有害信息举报专区： + 中国互联网违法和不良信息举报中心 + +

+
+
lcl提供技术支持
+
+
+ + + + + \ No newline at end of file diff --git a/js/banner.js b/js/banner.js new file mode 100644 index 0000000..453265f --- /dev/null +++ b/js/banner.js @@ -0,0 +1,63 @@ +var left = document.getElementById('left'); //左按钮 +var right = document.getElementById('right'); //右按钮 +var banner = document.getElementsByClassName('banner-box')[0]; +var li_list = document.querySelectorAll('#imgul li'); //获取图片的li +var ol_list = document.querySelectorAll('ol li'); +var timer = null; //声明定时器 +var count = 0; + +function auto() { //执行自动轮播 + count++; + if (count > li_list.length - 1) { + count = 0; + } + for (var i = 0; i < li_list.length; i++) { + li_list[i].style = 'display:none;'; + ol_list[i].className = ''; + } + li_list[count].style = 'display:block;' + ol_list[count].className = 'active'; + +} +timer = setInterval(auto, 1500); //调用定时器 + +// 点击右侧，切换下一个 +right.onclick = function () { + auto(); +} +// 点击左侧，切换上一个 +left.onclick = function () { + count--; + if (count < 0) { + count = li_list.length - 1; + } + // console.log(count); + for (var i = 0; i < li_list.length; i++) { + li_list[i].style = 'display:none;'; + ol_list[count].className = ''; + } + li_list[count].style = 'display:block;'; + ol_list[count].className = 'active'; +} + +banner.onmouseover = function () { //鼠标划上去，停止轮播 + clearInterval(timer); +} +banner.onmouseout = function () { //鼠标划出，继续轮播 + timer = setInterval(auto, 1500); //调用定时器 +} + + +//点击小按钮，切换图片 +for (var j = 0; j < ol_list.length; j++) { + ol_list[j].ind = j; //为每个小按钮添加下标 + ol_list[j].onclick = function () { //进入点击事件 + for (var i = 0; i < li_list.length; i++) { //干掉所有人 + li_list[i].style = 'display:none;'; + ol_list[i].className = ''; + } + li_list[this.ind].style = 'display:block;'; //留下我自己 + ol_list[this.ind].className = 'active'; //留下我自己 + count = this.ind; // 把当前的角标值赋值给count 希望他从当前再开始 + } +} \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..1cb4820 --- /dev/null +++ b/js/index.js @@ -0,0 +1,76 @@ +window.onload = function () { + this.totop_hide() + this.setTimeout(function () { + document.getElementsByClassName('loading')[0].classList.add('ishide') + document.getElementsByClassName('body-all')[0].classList.remove('ishide') + document + .getElementsByClassName('body-all')[0] + .classList.add('animated', 'toShow') + }, 1000) //为了本地演示能看到loading的效果 +} +window.onscroll = function () { + this.totop_hide() +} + +// 隐藏显示totop +function totop_hide() { + if ( + document.documentElement.scrollTop > 300 || + document.body.scrollTop > 300 + ) { + document + .getElementsByClassName('to-top')[0] + .setAttribute('style', 'display:block;') + } else { + document + .getElementsByClassName('to-top')[0] + .setAttribute('style', 'display:none;') + } +} +//直达顶部 +function totop() { + document.body.scrollTop = 0 + document.documentElement.scrollTop = 0 +} + +//跳转 + +function main_index() { + window.location.href = 'index.html' +} + +function main_policy() { + window.location.href = 'html/policy.html' +} + +function main_wlw() { + window.location.href = 'html/wlw.html' +} + +function main_intellegence() { + window.location.href = 'html/intellegence.html' +} + +function main_achievement() { + window.location.href = 'html/achievement.html' +} + +function index() { + window.location.href = '../index.html' +} + +function policy() { + window.location.href = '../html/policy.html' +} + +function wlw() { + window.location.href = '../html/wlw.html' +} + +function intellegence() { + window.location.href = '../html/intellegence.html' +} + +function achievement() { + window.location.href = '../html/achievement.html' +} \ No newline at end of file