Initial commit

This commit is contained in:
yuany3721 2020-01-17 17:51:32 +08:00
commit 0403684ce8
59 changed files with 3218 additions and 0 deletions

275
css/achievement.css Normal file
View File

@ -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;
}
}

339
css/animation.css Normal file
View File

@ -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);
}
}

256
css/global.css Normal file
View File

@ -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;
}
}

578
css/index.css Normal file
View File

@ -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: "楷体";
}
}

283
css/intellegence.css Normal file
View File

@ -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;
}
}

101
css/policy.css Normal file
View File

@ -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;
}
}

336
css/wlw.css Normal file
View File

@ -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%;
}
}

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

186
html/achievement.html Normal file
View File

@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="zh">
<link rel="icon" href="../favicon.ico">
<title>成果展</title>
<script src="../js/index.js"></script>
<link type="text/css" rel="styleSheet" href="../css/animation.css">
<link type="text/css" rel="styleSheet" href="../css/global.css">
<link type="text/css" rel="styleSheet" href="../css/achievement.css">
</head>
<body>
<img src="../img/loading.png" alt="" class="loading">
<div class="body-all ishide">
<a href="https://yuany3721.top"><img src="../img/nav-index.png" alt="" id="home"></a>
<div class="to-top" onclick="totop()">
<img src="../img/totop.png" alt="">
</div>
<div class="header sub-header">
<img src="../img/achievement-banner1.jfif" alt="">
<div class="slogan">
</div>
</div>
<!-- 导航 -->
<div class="nav-container">
<div class="nav-item" onclick="index()">
<img src="../img/nav-index.png" alt="">
<span>首页</span>
</div>
<div class="nav-item" onclick="policy()">
<img src="../img/nav-item1.png" alt="">
<span>宏观政策</span>
</div>
<div class="nav-item" onclick="wlw()">
<img src="../img/nav-item2.png" alt="">
<span>物联网+</span>
</div>
<div class="nav-item" onclick="intellegence()">
<img src="../img/nav-item3.png" alt="">
<span>智能+</span>
</div>
<div class="nav-item" onclick="achievement()">
<img src="../img/nav-item4.png" alt="">
<span>成果展</span>
</div>
</div>
<hr>
<div class="container">
<br>
<!-- breadcrumb -->
<div class="breadcrumb">
<span onclick="index()">首页</span> / 成果展
</div>
<div class="seperator"></div>
<div class="achievement-container">
<div class="achievement-header">
<img src="../img/achievement-left.jpg" alt="">
<p>
自2009年8月我国提出“感知中国”国家战略物联网发展受到各方广泛关注。几年的发展实践表明物联网在带动技术创新能力增强、壮大新一代信息技术产业、培育新的经济增长点、促进产业转型升级、提升社会管理和公共服务水平等方面具有重要作用。现阶段经过前期的市场培育物联网应用需求全面升级、与传统行业融合更加深入、创新要素空前活跃、标准体系和安全保障建设更为迫切相关产业形态、各地发展状态、市场环境等都发生了诸多深刻变化物联网已进入全新发展阶段。
</p>
<span class="title"><strong>典型案例</strong></span>
<ul>
<li><a href="http://www.iotcn.org.cn/2017/12/06/698/">易华录城市数据湖</a></li>
<li><a href="http://www.iotcn.org.cn/2017/12/05/604/">数焓智慧农业物联网平台</a></li>
<li><a href="http://www.iotcn.org.cn/2017/12/05/644/">魔豆科技智能井盖管理系统</a></li>
<li><a href="http://www.iotcn.org.cn/2017/12/05/649/">华大安全可信平台模块</a></li>
<li><a href="http://www.iotcn.org.cn/2017/12/05/677/">港澳大家公共文化服务平台</a></li>
<li><a href="http://www.iotcn.org.cn/2017/12/05/673/">Micro-Free AR热感系统</a></li>
</ul>
</div>
<!-- 成果介绍 -->
<br>
<span class="title"><strong>成果介绍</strong></span>
<br>
<br>
<div class="pic">
<div class="box">
<img src="../img/pic1.jpg" alt="">
<span class="title">
公共数字文化服务大数据系统
</span>
<span class="abstract">
公共数字文化服务大数据系统活跃了群众文化生活,推进社会文化发展;深化公共数字文化服务领域的服务创新应用,推动艺术普及服务与高新技术融合发展。
</span>
</div>
<div class="box">
<img src="../img/pic2.jpg" alt="">
<span class="title">
智慧水务云平台
</span>
<span class="abstract">
该系统集计量技术、通讯技术、网络技术、数据技术于一体,实现了计量仪表在精准计量同时可将计量数据通过多种通讯技术传输至计算机获服务器的一整套抄表技术。
</span>
</div>
<div class="box">
<img src="../img/pic3.jpg" alt="">
<span class="title">
地下管网安全监控智能处置系统
</span>
<span class="abstract">
针对城镇地下管网及化粪池气体进行安全监控及智能处置,集实时监测地下管网、超标气体自动处理、地下管线三维可视成像及人工智能视频监控为一体的综合系统。
</span>
</div>
<div class="box">
<img src="../img/pic4.jpg" alt="">
<span class="title">
安全智能锁
</span>
<span class="abstract">
以“安全智能锁”运行信息化系统及相应的服务管理体系为支撑,解决的主要问题是海关对进出口货物在海关监管场所之间转运的严密高效监管需要。
</span>
</div>
</div>
<div class="pic">
<div class="box">
<img src="../img/pic5.jpg" alt="">
<span class="title">
交通综合运行协调与应急指挥平台
</span>
<span class="abstract">
打造智慧交通数据湖,建设权威、全面、综合的交通数据资源中心,全面提升综合交通运行监测与预警能力,增强综合交通管理决策支持能力,改善出行信息服务质量。
</span>
</div>
<div class="box">
<img src="../img/pic6.jpg" alt="">
<span class="title">
物联网一级回收项目
</span>
<span class="abstract">
基于物联网、移动互联网、云计算等技术,搭建信息化智能管理平台,实现数据实时监控、远程状态监控、回收运输路径规划与监控等云服务功能,回收过程可溯源。
</span>
</div>
<div class="box">
<img src="../img/pic7.jpg" alt="">
<span class="title">
HPLC+高速无线本地通信技术方案
</span>
<span class="abstract">
融合HPLC载波、高速微功率无线两种通信技术的一种高度冗余、高速率、高稳定性的新型本地通信技术方案是目前智能电表应用的新一代用电信息采集本地通信方案。
</span>
</div>
<div class="box">
<img src="../img/pic8.jpg" alt="">
<span class="title">
中国电信:智慧社区解决方案
</span>
<span class="abstract">
系统基于HINET智能网关采集设备或者采集现场工控机内的数据并通过互联网对设备实现远程实时数据采集、设备远程维护、故障远程诊断分析。
</span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="text">
<p>
互联网ICP备案<a href="http://www.beian.miit.gov.cn/" target="_blank">
鄂ICP备19027833号-1
</a>
| 公安联网备案:<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102003698"
target="_blank">
<img src="../img/beian.png" />
鄂公网安备 42011102003698号
</a>
</p>
<p>
<a href="http://www.hbjubao.com:1888/page/index.do" target="_blank">湖北互联网违法和不良信息举报平台</a>
| 网上有害信息举报专区:<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do" target="_blank">
中国互联网违法和不良信息举报中心
</a>
</p>
</div>
<div class="support">lcl提供技术支持</div>
</div>
</div>
</body>
</html>

166
html/intellegence.html Normal file
View File

@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="zh">
<link rel="icon" href="../favicon.ico">
<title>智能+</title>
<script src="../js/index.js"></script>
<link type="text/css" rel="styleSheet" href="../css/animation.css">
<link type="text/css" rel="styleSheet" href="../css/global.css">
<link type="text/css" rel="styleSheet" href="../css/intellegence.css">
</head>
<body>
<img src="../img/loading.png" alt="" class="loading">
<div class="body-all ishide">
<a href="https://yuany3721.top"><img src="../img/nav-index.png" alt="" id="home"></a>
<div class="to-top" onclick="totop()">
<img src="../img/totop.png" alt="">
</div>
<div class="header sub-header">
<div class="slogan">
</div>
</div>
<!-- 导航 -->
<div class="nav-container">
<div class="nav-item" onclick="index()">
<img src="../img/nav-index.png" alt="">
<span>首页</span>
</div>
<div class="nav-item" onclick="policy()">
<img src="../img/nav-item1.png" alt="">
<span>宏观政策</span>
</div>
<div class="nav-item" onclick="wlw()">
<img src="../img/nav-item2.png" alt="">
<span>物联网+</span>
</div>
<div class="nav-item" onclick="intellegence()">
<img src="../img/nav-item3.png" alt="">
<span>智能+</span>
</div>
<div class="nav-item" onclick="achievement()">
<img src="../img/nav-item4.png" alt="">
<span>成果展</span>
</div>
</div>
<hr>
<div class="container">
<br>
<!-- breadcrumb -->
<div class="breadcrumb">
<span onclick="index()">首页</span> / 智能+
</div>
<div class="seperator"></div>
<!-- 轮播图 -->
<div class='banner-box'>
<ul id="imgul">
<li class="animated-5 toShowImg">
<a href="http://www.iotcn.org.cn/2019/05/24/6948/">
<img src="../img/banner1.jpg" alt="" />
</a>
</li>
<li class="animated-5 toShowImg">
<a href="http://www.iotcn.org.cn/2019/05/20/6883/">
<img src="../img/banner2.jfif" alt="" />
</a>
</li>
<li class="animated-5 toShowImg">
<a href="http://www.iotcn.org.cn/2019/05/17/6865/">
<img src="../img/banner3.jfif" alt="" />
</a>
</li>
<li class="animated-5 toShowImg">
<a href="http://www.iotcn.org.cn/2019/05/06/6775/">
<img src="../img/banner4.jfif" alt="" />
</a>
</li>
<li class="animated-5 toShowImg">
<a href="http://www.iotcn.org.cn/2019/04/12/6632/">
<img src="../img/banner5.jpg" alt="" />
</a>
</li>
</ul>
<span id="left">
&lt; </span> <span id="right"> &gt;
</span>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div class="row row-1">
<div class="box box-left">
<!-- 人工智能 -->
<a href="http://www.iotcn.org.cn/zhn/rgzn/">
<div class="imgbox"><img src="../img/intellegence-box1.jpg" alt=""></div>
<h4>人工智能</h4>
<p>唤醒万物:让设备听懂用户说话、懂得用户需求</p>
</a>
</div>
<div class="box box-right">
<!-- 智慧+ -->
<a href="http://www.iotcn.org.cn/zhn/zh/">
<div class="imgbox"><img src="../img/intelligence-box2.jfif" alt=""></div>
<h4>智慧+</h4>
<p>凝智聚势,变革飞跃,用智慧推动融合</p>
</a>
</div>
</div>
<div class="row row-2">
<div class="box box-left">
<!-- 车联网 -->
<a href="http://www.iotcn.org.cn/zhn/clw/">
<div class="imgbox"><img src="../img/intellegence-box3.jpg" alt=""></div>
<h4>车联网</h4>
<p>车载智能,自动驾驶,汽车行业数字化转型</p>
</a>
</div>
<div class="box box-right">
<!-- 智能制造 -->
<a href="http://www.iotcn.org.cn/zhn/znzz/">
<div class="imgbox"><img src="../img/intelligence-box4.jfif" alt=""></div>
<h4>智能制造</h4>
<p>业务整合,推进工业互联网技术,科技改变工程</p>
</a>
</div>
</div>
</div>
<div class="footer">
<div class="text">
<p>
互联网ICP备案<a href="http://www.beian.miit.gov.cn/" target="_blank">
鄂ICP备19027833号-1
</a>
| 公安联网备案:<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102003698"
target="_blank">
<img src="../img/beian.png" />
鄂公网安备 42011102003698号
</a>
</p>
<p>
<a href="http://www.hbjubao.com:1888/page/index.do" target="_blank">湖北互联网违法和不良信息举报平台</a>
| 网上有害信息举报专区:<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do" target="_blank">
中国互联网违法和不良信息举报中心
</a>
</p>
</div>
<div class="support">lcl提供技术支持</div>
</div>
</div>
</body>
<!-- 轮播图 -->
<script type="text/javascript" src="../js/banner.js"></script>
</html>

209
html/policy.html Normal file
View File

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="zh">
<link rel="icon" href="../favicon.ico">
<title>宏观政策</title>
<script src="../js/index.js"></script>
<link type="text/css" rel="styleSheet" href="../css/animation.css">
<link type="text/css" rel="styleSheet" href="../css/global.css">
<link type="text/css" rel="styleSheet" href="../css/policy.css">
</head>
<body>
<img src="../img/loading.png" alt="" class="loading">
<div class="body-all ishide">
<a href="https://yuany3721.top"><img src="../img/nav-index.png" alt="" id="home"></a>
<div class="to-top" onclick="totop()">
<img src="../img/totop.png" alt="">
</div>
<div class="header sub-header">
<div class="slogan">
</div>
</div>
<!-- 导航 -->
<div class="nav-container">
<div class="nav-item" onclick="index()">
<img src="../img/nav-index.png" alt="">
<span>首页</span>
</div>
<div class="nav-item" onclick="policy()">
<img src="../img/nav-item1.png" alt="">
<span>宏观政策</span>
</div>
<div class="nav-item" onclick="wlw()">
<img src="../img/nav-item2.png" alt="">
<span>物联网+</span>
</div>
<div class="nav-item" onclick="intellegence()">
<img src="../img/nav-item3.png" alt="">
<span>智能+</span>
</div>
<div class="nav-item" onclick="achievement()">
<img src="../img/nav-item4.png" alt="">
<span>成果展</span>
</div>
</div>
<hr>
<div class="container">
<br>
<!-- breadcrumb -->
<div class="breadcrumb">
<span onclick="index()">首页</span> / 宏观政策
</div>
<div class="seperator"></div>
<details open>
<summary>国务院</summary>
<ul class="policy-details">
<li>
<a href="http://www.iotcn.org.cn/2019/01/23/6053/">国务院印发“无废城市”建设试点工作方案</a>
<span class="policy-time">2019-01-23</span>
<span class="policy-from">中国政府网</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2018/09/06/5076/">域名不能乱用 国务院:加强政府网站域名管理</a>
<span class="policy-time">2018-09-06</span>
<span class="policy-from"></span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2018/08/09/4738/">北京等22个城市新设跨境电商综合试验区</a>
<span class="policy-time">2018-08-09</span>
<span class="policy-from"></span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2018/08/07/4717/">国务院办公厅印发《关于改革完善医疗卫生行业综合监管制度的指导意见》</a>
<span class="policy-time">2018-08-07</span>
<span class="policy-from">中国物联网</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2018/05/09/3664/">国务院印发《关于推行终身职业技能培训制度的意见》</a>
<span class="policy-time">2018-05-09</span>
<span class="policy-from">中国政府网</span>
</li>
</ul>
<div class="policy-more"><a href="http://www.iotcn.org.cn/hgzc/gwy/">更多>>></a></div>
</details>
<details open>
<summary>工信部</summary>
<ul class="policy-details">
<li>
<a href="http://www.iotcn.org.cn/2019/04/19/6691/">一图读懂《2019年IPv6网络就绪专项行动》</a>
<span class="policy-time">2019-04-19</span>
<span class="policy-from">工信微报</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/03/12/6358/">第七批减免车船税车型公布</a>
<span class="policy-time">2019-03-12</span>
<span class="policy-from">工信部</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/03/08/6344/">两部委印发《工业互联网综合标准化体系建设指南》</a>
<span class="policy-time">2019-03-08</span>
<span class="policy-from">工信部</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/03/04/6289/">三部委印发《超高清视频产业发展行动计划2019-2022年</a>
<span class="policy-time">2019-03-04</span>
<span class="policy-from">工信部</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/02/18/6165/">工信部公示2018年工业互联网APP优秀解决方案</a>
<span class="policy-time">2019-02-18</span>
<span class="policy-from">工信部</span>
</li>
</ul>
<div class="policy-more"><a href="http://www.iotcn.org.cn/hgzc/gxb/">更多>>></a></div>
</details>
<details open>
<summary>其他部委</summary>
<ul class="policy-details">
<li>
<a href="http://www.iotcn.org.cn/2019/05/17/6865/">七部门联合发布《智能航运发展指导意见》</a>
<span class="policy-time">2019-05-17</span>
<span class="policy-from">交通运输部</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/04/08/6563/">工信部信息中心开启2019年中国互联网企业100强申报</a>
<span class="policy-time">2019-04-08</span>
<span class="policy-from">工业和信息化部网络安全产业发展中心</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/04/03/6542/">国家互联网信息办公室发布《区块链信息服务管理规定》</a>
<span class="policy-time">2019-04-03</span>
<span class="policy-from">网信办</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/01/23/6061/">经信委印发北京5G产业发展行动方案</a>
<span class="policy-time">2019-01-23</span>
<span class="policy-from">北京市经济和信息化局</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2018/12/18/5842/">北京市智能制造关键技术装备供应商推荐目录公示</a>
<span class="policy-time">2018-12-18</span>
<span class="policy-from">北京市经济和信息化局</span>
</li>
</ul>
<div class="policy-more"><a href="http://www.iotcn.org.cn/hgzc/qtbw/">更多>>></a></div>
</details>
<details open>
<summary>相关报道</summary>
<ul class="policy-details">
<li>
<a href="http://www.iotcn.org.cn/2019/03/13/6370/">工信部公布1月治理“黑广播”“伪基站”情况</a>
<span class="policy-time">2019-03-13</span>
<span class="policy-from"></span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/03/06/6313/">李克强移动网络流量平均资费再降低20%以上</a>
<span class="policy-time">2019-03-06</span>
<span class="policy-from">转载</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/03/04/6287/">《超高清视频产业发展行动计划2019-2022年》解读</a>
<span class="policy-time">2019-03-04</span>
<span class="policy-from"></span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/02/28/6274/">清理有害信息4437万余条国家网信办持续推进网络生态专项治理</a>
<span class="policy-time">2019-02-28</span>
<span class="policy-from">光明日报</span>
</li>
<li>
<a href="http://www.iotcn.org.cn/2019/01/24/6068/">陈肇雄出席数字中国产业发展联盟成立大会暨高峰论坛</a>
<span class="policy-time">2019-01-24</span>
<span class="policy-from">工信部</span>
</li>
</ul>
<div class="policy-more"><a href="http://www.iotcn.org.cn/hgzc/gxb/">更多>>></a></div>
</details>
</div>
<div class="footer">
<div class="text">
<p>
互联网ICP备案<a href="http://www.beian.miit.gov.cn/" target="_blank">
鄂ICP备19027833号-1
</a>
| 公安联网备案:<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102003698"
target="_blank">
<img src="../img/beian.png" />
鄂公网安备 42011102003698号
</a>
</p>
<p>
<a href="http://www.hbjubao.com:1888/page/index.do" target="_blank">湖北互联网违法和不良信息举报平台</a>
| 网上有害信息举报专区:<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do" target="_blank">
中国互联网违法和不良信息举报中心
</a>
</p>
</div>
<div class="support">lcl提供技术支持</div>
</div>
</div>
</body>
</html>

119
html/wlw.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="zh">
<link rel="icon" href="../favicon.ico">
<title>物联网+</title>
<script src="../js/index.js"></script>
<link type="text/css" rel="styleSheet" href="../css/animation.css">
<link type="text/css" rel="styleSheet" href="../css/global.css">
<link type="text/css" rel="styleSheet" href="../css/wlw.css">
</head>
<body>
<img src="../img/loading.png" alt="" class="loading">
<div class="body-all ishide">
<a href="https://yuany3721.top"><img src="../img/nav-index.png" alt="" id="home"></a>
<div class="to-top" onclick="totop()">
<img src="../img/totop.png" alt="">
</div>
<div class="header sub-header">
<div class="slogan">
</div>
</div>
<!-- 导航 -->
<div class="nav-container">
<div class="nav-item" onclick="index()">
<img src="../img/nav-index.png" alt="">
<span>首页</span>
</div>
<div class="nav-item" onclick="policy()">
<img src="../img/nav-item1.png" alt="">
<span>宏观政策</span>
</div>
<div class="nav-item" onclick="wlw()">
<img src="../img/nav-item2.png" alt="">
<span>物联网+</span>
</div>
<div class="nav-item" onclick="intellegence()">
<img src="../img/nav-item3.png" alt="">
<span>智能+</span>
</div>
<div class="nav-item" onclick="achievement()">
<img src="../img/nav-item4.png" alt="">
<span>成果展</span>
</div>
</div>
<hr>
<div class="container">
<br>
<!-- breadcrumb -->
<div class="breadcrumb">
<span onclick="index()">首页</span> / 物联网+
</div>
<div class="seperator"></div>
<div class="bg">
<div class="board">
<h4>物联网+</h4>
<span>“新数据时代 新存储之道”</span>
</div>
<div class="sm-board board1">
<img src="../img/wlw.png" alt="">
<h5>云计算</h5>
<span>可以通过网络和移动设备访问的云计算平台使世界发生了翻天覆地的变化。这将其从必须获取技术的世界转变为人们生活的现实世界。</span>
</div>
<div class="sm-board board2">
<img src="../img/wlw.png" alt="">
<h5>大数据</h5>
<span>大数据辅助科学决策和社会治理的机制,推进政府管理和社会治理模式创新,要运用大数据提升国家治理现代化水平。</span>
</div>
<div class="sm-board board3">
<img src="../img/wlw.png" alt="">
<h5>万物互联</h5>
<span>将人、流程、数据和事物结合,使得网络连接变得更加相关、更有价值,给企业,个人和国家带来更加丰富的体验和前所未有的经济发展机遇。</span>
</div>
<div class="sm-board board4">
<img src="../img/wlw.png" alt="">
<h5>物联网安全</h5>
<span>推进网络基础设施安全防护、用户个人信息保护、网络数据安全保障、网络安全产业培育、工业互联网安全体系建设等重点工作,努力营造安全可靠的网络环境。</span>
</div>
</div>
<h3>物联网+ 数据云图</h3>
<img src="../img/data-infrastructure.jpg" alt="">
</div>
<div class="footer">
<div class="text">
<p>
互联网ICP备案<a href="http://www.beian.miit.gov.cn/" target="_blank">
鄂ICP备19027833号-1
</a>
| 公安联网备案:<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102003698"
target="_blank">
<img src="../img/beian.png" />
鄂公网安备 42011102003698号
</a>
</p>
<p>
<a href="http://www.hbjubao.com:1888/page/index.do" target="_blank">湖北互联网违法和不良信息举报平台</a>
| 网上有害信息举报专区:<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do" target="_blank">
中国互联网违法和不良信息举报中心
</a>
</p>
</div>
<div class="support">lcl提供技术支持</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

BIN
img/achievement-left.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

BIN
img/application1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
img/application2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

BIN
img/application3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

BIN
img/banner1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

BIN
img/banner2.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

BIN
img/banner3.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
img/banner4.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
img/banner5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

BIN
img/beian.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
img/data-infrastructure.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

BIN
img/hwcloud.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

BIN
img/intellegence-box1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/intellegence-box3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/intelligence-box2.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

BIN
img/intelligence-box4.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/key-tech1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
img/key-tech2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
img/key-tech3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
img/key-tech4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
img/loading.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
img/marker.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
img/nav-index.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
img/nav-item1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/nav-item2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
img/nav-item3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
img/nav-item4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
img/pic1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/pic2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/pic3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/pic4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
img/pic5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
img/pic6.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
img/pic7.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/pic8.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
img/superiority1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
img/superiority2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
img/superiority3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
img/superiority4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
img/totop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/wlw-bg.jfif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
img/wlw-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

BIN
img/wlw.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

231
index.html Normal file
View File

@ -0,0 +1,231 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="zh">
<link rel="icon" href="favicon.ico">
<title>物联网简介</title>
<script src="js/index.js"></script>
<link type="text/css" rel="styleSheet" href="css/animation.css">
<link type="text/css" rel="styleSheet" href="css/index.css">
<link type="text/css" rel="styleSheet" href="css/global.css">
</head>
<body>
<img src="img/loading.png" alt="" class="loading">
<div class="body-all ishide">
<a href="https://yuany3721.top"><img src="img/nav-index.png" alt="" id="home"></a>
<div class="to-top" onclick="totop()">
<img src="img/totop.png" alt="">
</div>
<!-- 导航 -->
<div class="nav-container">
<div class="nav-item" onclick="main_index()">
<img src="img/nav-index.png" alt="">
<span>首页</span>
</div>
<div class="nav-item" onclick="main_policy()">
<img src="img/nav-item1.png" alt="">
<span>宏观政策</span>
</div>
<div class="nav-item" onclick="main_wlw()">
<img src="img/nav-item2.png" alt="">
<span>物联网+</span>
</div>
<div class="nav-item" onclick="main_intellegence()">
<img src="img/nav-item3.png" alt="">
<span>智能+</span>
</div>
<div class="nav-item" onclick="main_achievement()">
<img src="img/nav-item4.png" alt="">
<span>成果展</span>
</div>
</div>
<hr>
<div class="header">
<div class="slogan">
<span>万物互联</span>
<span>见智 · 见未来</span>
</div>
</div>
<div class="container">
<br><br>
<!-- 特征 -->
<h2>特 征</h2>
<h3>Characteristic</h3>
<div class="float-container">
<div class="float-box">
<img src="img/superiority1.png" alt="行业领先技术" class="superiority-img">
<h3>整体感知</h3>
<br>
<span>
RFID、传感器、二维码
</span>
<br>
<span>
随时随地智能感知获取物体信息
</span>
<br>
<span>
信息采集、协同处理、智能组网
</span>
</div>
<div class="float-box">
<img src="img/superiority3.png" alt="监控" class="superiority-img">
<h3>可靠传输</h3>
<br>
<span>
无线通信网络、5G技术
</span>
<br>
<span>
互联网、无线网络相融合
</span>
<br>
<span>
实时、准确传输信息
</span>
</div>
<div class="float-box">
<img src="img/superiority4.png" alt="节约成本" class="superiority-img">
<h3>智能处理</h3>
<br>
<span>
云计算、模糊识别
</span>
<br>
<span>
跨地域、跨行业、跨部门
<!-- 的海量数据和信息 -->
</span>
<br>
<span>
智能化监测与控制
</span>
</div>
</div>
<br>
<hr>
<!-- 应用 -->
<h2>应 用</h2>
<h3>Application</h3>
<p>
物联网的应用领域涉及到方方面面,在工业、农业、环境、交通、物流、安保等基础设施领域的应用,有效的推动了这些方面的智能化发展,使得有限的资源更加合理的使用分配,从而提高了行业效率、效益。
</p>
<p>
在家居、医疗健康、教育、金融与服务业、旅游业等与生活息息相关的领域的应用,从服务范围、服务方式到服务的质量等方面都有了极大的改进,大大的提高了人们的生活质量;
</p>
<div class="application-container">
<div class="app-item1">
<img src="img/application1.jpg" alt="">
</div>
<div class="app-item2">
<span>颠覆传统</span>
<span>没有做不到<br><br>&nbsp;&nbsp;&nbsp;&nbsp;只有想不到</span>
</div>
<div class="app-item3">
<span>万物互联</span>
<span>物物相连<br><br>&nbsp;&nbsp;&nbsp;&nbsp;走向未来</span>
<img src="img/application2.jpg" alt="">
</div>
<div class="app-item4">
<img src="img/application3.jpg" alt="">
<div></div>
<span>创新融合</span>
<span>数字化转型<br><br>&nbsp;&nbsp;&nbsp;&nbsp;把握窗口机遇期</span>
</div>
</div>
<p>
在涉及国防军事领域方面,虽然还处在研究探索阶段,但物联网应用带来的影响也不可小觑,大到卫星、导弹、飞机、潜艇等装备系统,小到单兵作战装备,物联网技术的嵌入有效提升了军事智能化、信息化、精准化,极大提升了军事战斗力,是未来军事变革的关键。
</p>
<hr>
<!-- 关键技术 -->
<h2>关 键 技 术</h2>
<h3>Key Technology</h3>
<div class="float-container">
<div class="float-box text-left">
<img src="img/key-tech1.png" alt="行业领先技术" class="superiority-img">
<h3>射频识别技术</h3>
<br>
<span>
射频识别RFID的原理是阅读器与标签之间进行非接触式的数据通信达到识别目标的目的。
</span>
<br>
<span>
RFID 的应用非常广泛,典型应用有动物晶片、汽车晶片防盗器、门禁管制、停车场管制、生产线自动化、物料管理。
</span>
</div>
<div class="float-box text-left">
<img src="img/key-tech2.png" alt="行业领先技术" class="superiority-img">
<h3>传感网</h3>
<br>
<span>
MEMS微机电系统是由微传感器、微执行器、信号处理和控制电路、通讯接口和电源等部件组成的一体化的微型器件系统。
</span>
<br>
<span>
MEMS的目标是把信息的获取、处理和执行集成在一起组成具有多功能的微型系统集成于大尺寸系统中从而大幅度地提高系统的自动化、智能化和可靠性水平。
</span>
</div>
</div>
<div class="float-container">
<div class="float-box text-left">
<img src="img/key-tech3.png" alt="监控" class="superiority-img">
<h3>M2M系统框架</h3>
<br>
<span>
M2M是Machine-to-Machine / Man的简称是一种以机器终端智能交互为核心的、网络化的应用与服务。它将使对象实现智能化的控制。
</span>
<br>
<span>
M2M技术涉及5个重要的技术部分机器、M2M硬件、通信网络、中间件、应用。基于云计算平台和智能网络可以依据传感器网络获取的数据进行决策改变对象的行为进行控制和反馈。
</span>
</div>
<div class="float-box text-left">
<img src="img/key-tech4.png" alt="节约成本" class="superiority-img">
<h3>云计算</h3>
<br>
<span>
云计算旨在通过网络把多个成本相对较低的计算实体整 合成一个具有强大计算能力的完美系统,并借助先进的商业模式让终端用户可以得到这些强大计算能力的服务。
</span>
<br>
<span>
物联网感知层获取大量数据信息,在经过网络层传输以后,放到一个标准平台上,再利用高性能的云计算对其进行处理,赋予这些数据智能,最终转换成对终端用户有用的信息。
</span>
</div>
</div>
</div>
<div class="footer">
<div class="text">
<p>
互联网ICP备案<a href="http://www.beian.miit.gov.cn/" target="_blank">
鄂ICP备19027833号-1
</a>
| 公安联网备案:<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102003698"
target="_blank">
<img src="img/beian.png" />
鄂公网安备 42011102003698号
</img>
</p>
<p>
<a href="http://www.hbjubao.com:1888/page/index.do" target="_blank">湖北互联网违法和不良信息举报平台</a>
| 网上有害信息举报专区:<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do" target="_blank">
中国互联网违法和不良信息举报中心
</a>
</p>
</div>
<div class="support">lcl提供技术支持</div>
</div>
</div>
</body>
</html>

63
js/banner.js Normal file
View File

@ -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 希望他从当前再开始
}
}

76
js/index.js Normal file
View File

@ -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'
}