first commit

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/chat.css

@@ -0,0 +1,505 @@
+.chatContainer,.chatContainer div, .chatContainer ul, .chatContainer li, .chatContainer p{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+    width:5px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+    border-radius:10px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    border-radius:10px;
+    background:#8C85E6;
+    -webkit-box-shadow:#8C85E6;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+    background: rgba(175, 190, 255, 0.4);
+}
+/*按钮样式*/
+.btn-default-styles {
+    outline: none;
+    resize: none;
+    border: none;
+    display: inline-block;
+    padding: 5px 10px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    background: #bbb;
+    color: #fff;
+    border-radius: 4px;
+}
+.btn-default-styles:focus {
+    outline: none;
+}
+.btn-default-styles:hover {
+    background: #c5c5c5;
+    animation: anniu 1s infinite;
+}
+.btn-default-styles:active {
+    box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
+}
+
+
+.chatContainer{
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 999;
+    font-size: 16px;
+    color: black;
+}
+.chatBtn{
+    width: 50px;
+    height: 50px;
+    background: #01bef0;
+    color: #fff;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 50%;
+    box-shadow: 2px 2px 2px #d4d4d4;
+    cursor: pointer;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+}
+.chatBtn:hover{
+    background: #01b3df;
+    box-shadow: none;
+}
+.chatBtn>i{
+    font-size: 25px;
+}
+.chatBox{
+    width: 370px;
+    min-width: 320px;
+    height: 570px;
+    border-radius: 10px;
+    background: #f5ecff;
+    position: absolute;
+    bottom: 0;
+    right: 70px;
+
+    overflow: hidden;
+    border: solid 1px #d5d5d5;
+    box-shadow: 1px 1px 2px #c0c0c0;
+    z-index: 1005;
+}
+.chatBox-head{
+    width: 100%;
+    height: 75px;
+    background: #01aee0;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.chatBox-head-one{
+    width: 100%;
+    height: 75px;
+    line-height: 75px;
+    color: #fff;
+    font-size: 20px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.chatBox-head-two{
+    width: 100%;
+    height: 75px;
+    color: #fff;
+    padding: 10px 10px;
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.chat-return{
+    float: left;
+    width: 55px;
+    height: 55px;
+    line-height: 55px;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+}
+
+.chat-return:hover{
+    background: #0188b7;
+}
+.chat-close{
+    float: right;
+    width: 55px;
+    height: 55px;
+    line-height: 55px;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+}
+.chat-close:hover{
+    background: #0188b7;
+}
+.chat-people{
+    float: left;
+}
+.chat-people>div{
+    height: 55px;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 55px;
+    margin-left: 5px;
+}
+.chat-people>div:nth-of-type(1){
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #eee;
+    overflow: hidden;
+}
+.chat-people>div:nth-of-type(1)>img{
+    width: 50px;
+    height: 50px;
+}
+.chat-people>div:nth-of-type(2){
+    width: 165px;
+    text-align: left;
+    height: 55px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.chatBox-info{
+    width: 100%;
+    height: 495px;
+    background: #fff;
+    text-align: left;
+    position: absolute;
+    top: 75px;
+    left: 0;
+}
+
+.chatBox-list{
+    width: 100%;
+    height: 495px;
+    overflow-y: scroll;
+}
+.chat-list-people:hover{
+    cursor: pointer;
+    background: #f8f8f8;
+}
+.chat-list-people>div{
+    height: 55px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+}
+.chat-list-people>div:nth-of-type(1){
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #eee;
+    overflow: hidden;
+}
+.chat-list-people>div:nth-of-type(1)>img{
+    width: 40px;
+    height: 40px;
+}
+
+
+.chat-name{
+    width: 230px;
+}
+.chat-name>p{
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.chat-name>p:nth-of-type(1){
+    line-height: 55px;
+}
+.chat-list-people>div.message-num{
+    display: inline-block;
+    height: auto;
+    min-width: 10px;
+    padding: 3px 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border-radius: 10px;
+    margin-right: 15px;
+    margin-top: 14px;
+    color: #fff;
+    background: #f46266;
+    float: right;
+}
+.chat-message-num{
+    display: inline-block;
+    height: auto;
+    min-width: 10px;
+    padding: 3px 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border-radius: 10px;
+    margin-right: 15px;
+    margin-top: 14px;
+    color: #fff;
+    background: #f46266;
+    position: absolute;
+    bottom: 40px;
+    right: -24px;
+}
+.chatBox-kuang{
+    width: 100%;
+    height: 495px;
+    display: none;
+}
+.chatBox-content{
+    width: 100%;
+}
+.chatBox-content-demo{
+    width: 100%;
+    overflow-y: scroll;
+}
+
+.clearfloat:after{
+    display:block;
+    clear:both;
+    content:"";
+    visibility:hidden;
+    height:0
+}
+.clearfloat{
+    zoom:1;
+    margin: 10px 10px;
+}
+.clearfloat .right{
+    float: right;
+}
+.author-name{
+    text-align: center;
+    margin: 15px 0 5px 0;
+    color: #888;
+}
+
+.clearfloat .chat-message{
+    max-width: 252px;
+    text-align: left;
+    padding: 8px 12px;
+    border-radius: 6px;
+    word-wrap:break-word;
+    display: inline-block;
+    position: relative;
+}
+
+
+.clearfloat .left .chat-message{
+    background: #D9D9D9;
+    min-height: 36px;
+}
+.clearfloat .left .chat-message:before{
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: -6px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid #D9D9D9;
+}
+
+.clearfloat .right{
+    text-align: right;
+}
+.clearfloat .right .chat-message{
+    background: #8c85e6;
+    color: #fff;
+    text-align: left;
+    min-height: 36px;
+}
+.clearfloat .right .chat-message:before{
+    position: absolute;
+    content: "";
+    top: 8px;
+    right: -6px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid #8c85e6;
+}
+
+.clearfloat .chat-avatars{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: #eee;
+    vertical-align: top;
+    overflow: hidden;
+}
+.clearfloat .chat-avatars>img{
+    width: 30px;
+    height: 30px;
+}
+.clearfloat .left .chat-avatars{
+    margin-right: 10px;
+}
+.clearfloat .right .chat-avatars{
+    margin-left: 10px;
+}
+
+.chatBox-send{
+    width: 100%;
+    padding: 10px 5px;
+    background: #eee;
+    border-top: 1px #D0D0D0 solid;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+.div-textarea{
+    width: 260px;
+    min-height: 20px;
+    max-height: 100px;
+    _height: 120px;
+    padding: 3px;
+    outline: 0;
+    background: #fff;
+    font-size: 14px;
+    line-height: 20px;
+    word-wrap: break-word;
+    overflow-x: hidden;
+    overflow-y: auto;
+    user-modify: read-write-plaintext-only;    /*纯文本*/
+    -webkit-user-modify: read-write-plaintext-only;
+    -moz-user-modify: read-write-plaintext-only;
+}
+.div-textarea:focus{
+    box-shadow: 0 0 15px rgba(82, 168, 236, 0.6);
+}
+.chatBox-send>div{
+    float: left;
+}
+.chatBox-send>div:nth-of-type(2){
+    font-size: 0;
+}
+.chatBox-send>div button{
+    padding: 1px 5px;
+    margin-left: 3px;
+}
+.chatBox-send>div label{
+    padding: 1px 5px;
+    margin-left: 3px;
+}
+#chat-biaoqing{
+    position: relative;
+
+}
+.hidden{
+    display: none;
+}
+.biaoqing-photo{
+    width: 200px;
+    height: 160px;
+    background: #ffffff;
+    position: absolute;
+    top: -160px;
+    right: 40px;
+    text-align: left;
+    border-radius: 5px;
+    border: solid 1px #c5c5c5;
+    display: none;
+}
+.biaoqing-photo::before{
+    content: '';
+    position: absolute;
+    border-top: solid 7px #c5c5c5;
+    border-left: solid 9px transparent;
+    border-right: solid 9px transparent;
+    bottom: -7px;
+    right: 36px;
+}
+.biaoqing-photo::after{
+    content: '';
+    position: absolute;
+    border-top: solid 7px #fff;
+    border-left: solid 10px transparent;
+    border-right: solid 10px transparent;
+    bottom: -5px;
+    right: 35px;
+}
+.biaoqing-photo>ul{
+    margin: 0;
+    width: 200px;
+    height: 160px;
+    padding: 3px 2px;
+    list-style: none;
+}
+.biaoqing-photo>ul>li{
+    float: left;
+    height: 30px;
+    margin-left: 2px;
+}
+.emoji-picker-image{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background: url(../img/bqxtb01.png) no-repeat;
+    background-size: 200px auto;
+    cursor: pointer;
+}
+.biaoqing-photo>ul>li span.emoji-picker-image:hover{
+    border: solid 1px #f5f5f5;
+}
+.chat-message img{
+    width: 220px;
+    height:auto;
+}
+
+@media all and (max-width: 768px) {
+    .chatBox{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+@media all and (max-width: 370px){
+    .chat-name{
+        width: 185px;
+    }
+    .chat-people>div:nth-of-type(2){
+        width: 120px;
+    }
+    .clearfloat .chat-message{
+        max-width: 240px;
+    }
+}
+.nameText {
+    font-size: 16px;
+}

css/idangerous.swiper.css

@@ -0,0 +1,125 @@
+/*
+ * Swiper 2.7.6
+ * Mobile touch slider and framework with hardware accelerated transitions
+ *
+ * http://www.idangero.us/sliders/swiper/
+ *
+ * Copyright 2010-2015, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under GPL & MIT
+ *
+ * Released on: February 11, 2015
+*/
+/* ===============================================================
+Basic Swiper Styles 
+================================================================*/
+.swiper-container {
+	margin:0 auto;
+	position:relative;
+	overflow:hidden;
+	direction:ltr;
+	-webkit-backface-visibility:hidden;
+	-moz-backface-visibility:hidden;
+	-ms-backface-visibility:hidden;
+	-o-backface-visibility:hidden;
+	backface-visibility:hidden;
+	/* Fix of Webkit flickering */
+	/* z-index:1; */
+}
+.swiper-wrapper {
+	position:relative;
+	width:100%;
+	-webkit-transition-property:-webkit-transform, left, top;
+	-webkit-transition-duration:0s;
+	-webkit-transform:translate3d(0px,0,0);
+	-webkit-transition-timing-function:ease;
+	
+	-moz-transition-property:-moz-transform, left, top;
+	-moz-transition-duration:0s;
+	-moz-transform:translate3d(0px,0,0);
+	-moz-transition-timing-function:ease;
+	
+	-o-transition-property:-o-transform, left, top;
+	-o-transition-duration:0s;
+	-o-transform:translate3d(0px,0,0);
+	-o-transition-timing-function:ease;
+	-o-transform:translate(0px,0px);
+	
+	-ms-transition-property:-ms-transform, left, top;
+	-ms-transition-duration:0s;
+	-ms-transform:translate3d(0px,0,0);
+	-ms-transition-timing-function:ease;
+	
+	transition-property:transform, left, top;
+	transition-duration:0s;
+	transform:translate3d(0px,0,0);
+	transition-timing-function:ease;
+
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+.swiper-free-mode > .swiper-wrapper {
+	-webkit-transition-timing-function: ease-out;
+	-moz-transition-timing-function: ease-out;
+	-ms-transition-timing-function: ease-out;
+	-o-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+	margin: 0 auto;
+}
+.swiper-slide {
+	float: left;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/* IE10 Windows Phone 8 Fixes */
+.swiper-wp8-horizontal {
+	-ms-touch-action: pan-y;
+}
+.swiper-wp8-vertical {
+	-ms-touch-action: pan-x;
+}
+
+/* ===============================================================
+Your custom styles, here you need to specify container's and slide's
+sizes, pagination, etc.
+================================================================*/
+.swiper-container {
+	/* Specify Swiper's Size: */
+
+	/*width:200px;
+	height: 100px;*/
+}
+.swiper-slide {
+	/* Specify Slides's Size: */
+	
+	/*width: 100%;
+	height: 100%;*/
+}
+.swiper-slide-active {
+	/* Specific active slide styling: */
+	
+}
+.swiper-slide-visible {
+	/* Specific visible slide styling: */	
+
+}
+/* ===============================================================
+Pagination Styles
+================================================================*/
+.swiper-pagination-switch {
+	/* Stylize pagination button: */	
+
+}
+.swiper-active-switch {
+	/* Specific active button style: */	
+	
+}
+.swiper-visible-switch {
+	/* Specific visible button style: */	
+	
+}

css/style.css

@@ -0,0 +1,130 @@
+*{
+	margin:0;
+	padding:0;
+	font-family:microsoft yahei,'黑体';
+}
+#youdaoBanner{
+	margin-top:15vh;
+	height:85vh;
+	position:relative;
+}
+#youdaoBanner .swiper-slide{
+	width: 315px;
+	padding:0 30px;
+	position:relative;
+	border-radius: 5px;
+	overflow: hidden;
+}
+#youdaoBanner .swiper-slide .bg{
+	height: 200px;
+	background-repeat: no-repeat;
+    background-position: center top;
+	position:relative;
+	overflow:hidden;
+	}
+#youdaoBanner .swiper-slide .white-top{
+	background:url(../images/white-top.png);
+	position:absolute;
+	z-index:900;
+	top:0;
+	left:0;
+	width:100%;
+	height:8px;
+}
+#youdaoBanner .swiper-slide .white-bottom{
+	background:url(../images/white-bottom.png);
+	position:absolute;
+	z-index:900;
+	bottom:0;
+	left:0;
+	width:100%;
+	height:8px;}
+#youdaoBanner .bg .black-mask{
+	width:315px;
+	height:200px;
+	position:absolute;
+	z-index:1;
+	top:0;
+	left:0;
+	background:url(../images/black-mask.png);
+	border-radius: 10px;
+
+}
+#youdaoBanner .bg:hover .black-mask{
+	display:none;
+}
+#youdaoBanner .swiper-button-prev,#youdaoBanner .swiper-button-next{
+	position:absolute;
+	z-index:999;
+	top:85%;
+	left:35%;
+	margin-top:-30px;
+	margin-left:-30px;
+	width: 60px;
+    height: 60px;
+	background:url(../images/swiper-btn.png);
+	cursor:pointer;
+	/* display:none; */
+}
+#youdaoBanner .swiper-button-next{
+	background-position:0 -60px;
+	left:65%;
+	/* right:10px; */
+}
+#youdaoBanner:hover .swiper-button-prev,#youdaoBanner:hover .swiper-button-next{
+	display:block;
+}
+#youdaoBanner .slide1 .bg{background-image:url(../images/banner/Obanner1.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
+#youdaoBanner .slide2 .bg{background-image:url(../images/banner/Obanner2.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}	
+#youdaoBanner .slide3 .bg{background-image:url(../images/banner/Obanner3.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}	
+#youdaoBanner .slide4 .bg{background-image:url(../images/banner/Obanner4.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}	
+#youdaoBanner .slide5 .bg{background-image:url(../images/banner/Obanner5.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}	
+#youdaoBanner .slide6 .bg{background-image:url(../images/banner/Obanner6.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}	
+
+#youdaoBanner .swiper-slide .bg:hover{
+	/* background: url(../images/fire.png) #fc6760 340px 210px no-repeat; */
+	}
+
+#youdaoBanner .info{
+	position: absolute;
+	padding:30px;
+	z-index:999;
+    bottom: -149px;
+	color:#fff;
+	font-size:14px;
+	padding-top:30px;
+}
+#youdaoBanner .info .date{
+    font-size: 14px;
+    margin-bottom: 16px;
+}
+#youdaoBanner .info h3{
+	margin-bottom: 18px;
+}
+#youdaoBanner .info h3 a{
+    color: #fff;
+    font-size: 24px;
+    font-weight: 500;
+	text-decoration:none;
+}
+#youdaoBanner .info p{
+	text-indent:2em;
+	font-size: 16px;
+}
+#youdaoBanner .info .btn{
+	margin-top: 40px;
+	display:block;
+    color: #fff;
+    font-size: 16px;
+	text-align:center;
+	width:106px;
+	height:42px;
+    line-height: 40px;
+	text-decoration:none;
+	background:url(../images/link_bg.png) no-repeat;
+}
+#youdaoBanner .info .btn:hover{
+	
+	color:#000;
+	background:url(../images/link_bg.png) no-repeat left -42px;
+}

font_Icon/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

font_Icon/demo_fontclass.html

@@ -0,0 +1,484 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-gouwuche2"></i>
+                    <div class="name">购物车空</div>
+                    <div class="fontclass">.icon-gouwuche2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-verylarger-view"></i>
+                    <div class="name">大图显示</div>
+                    <div class="fontclass">.icon-verylarger-view</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tehui"></i>
+                    <div class="name">特惠</div>
+                    <div class="fontclass">.icon-tehui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gengduo1"></i>
+                    <div class="name">更多</div>
+                    <div class="fontclass">.icon-gengduo1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-houtui"></i>
+                    <div class="name">后退 ＋ 前进 </div>
+                    <div class="fontclass">.icon-houtui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gouwuche"></i>
+                    <div class="name">购物车</div>
+                    <div class="fontclass">.icon-gouwuche</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-guojia"></i>
+                    <div class="name">建筑</div>
+                    <div class="fontclass">.icon-guojia</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi1"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang"></i>
+                    <div class="name">收 藏</div>
+                    <div class="fontclass">.icon-shoucang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tuxiang"></i>
+                    <div class="name">图像</div>
+                    <div class="fontclass">.icon-tuxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yushou"></i>
+                    <div class="name">预售</div>
+                    <div class="fontclass">.icon-yushou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-icon05"></i>
+                    <div class="name">返回顶部</div>
+                    <div class="fontclass">.icon-icon05</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiadian"></i>
+                    <div class="name">家电</div>
+                    <div class="fontclass">.icon-jiadian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang1"></i>
+                    <div class="name">收藏</div>
+                    <div class="fontclass">.icon-shoucang1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dingdan"></i>
+                    <div class="name">订单</div>
+                    <div class="fontclass">.icon-dingdan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shuaxin"></i>
+                    <div class="name">刷新</div>
+                    <div class="fontclass">.icon-shuaxin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang2"></i>
+                    <div class="name">收藏</div>
+                    <div class="fontclass">.icon-shoucang2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wode2"></i>
+                    <div class="name">我的</div>
+                    <div class="fontclass">.icon-wode2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gengduo"></i>
+                    <div class="name">更多</div>
+                    <div class="fontclass">.icon-gengduo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-larger-view"></i>
+                    <div class="name">列表显示</div>
+                    <div class="fontclass">.icon-larger-view</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tuxiang1"></i>
+                    <div class="name">图像</div>
+                    <div class="fontclass">.icon-tuxiang1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-geren2-copy"></i>
+                    <div class="name">个人中心</div>
+                    <div class="fontclass">.icon-geren2-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiushui"></i>
+                    <div class="name">酒水</div>
+                    <div class="fontclass">.icon-jiushui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shuji"></i>
+                    <div class="name">书籍</div>
+                    <div class="fontclass">.icon-shuji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fasong"></i>
+                    <div class="name">发送</div>
+                    <div class="fontclass">.icon-fasong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xuanzhuan"></i>
+                    <div class="name">旋转</div>
+                    <div class="fontclass">.icon-xuanzhuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouye"></i>
+                    <div class="name">首页</div>
+                    <div class="fontclass">.icon-shouye</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-guanbi"></i>
+                    <div class="name">关闭</div>
+                    <div class="fontclass">.icon-guanbi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wode"></i>
+                    <div class="name">我的</div>
+                    <div class="fontclass">.icon-wode</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-app"></i>
+                    <div class="name">app</div>
+                    <div class="fontclass">.icon-app</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fanhui"></i>
+                    <div class="name">返回</div>
+                    <div class="fontclass">.icon-fanhui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-guanbi1"></i>
+                    <div class="name">关闭</div>
+                    <div class="fontclass">.icon-guanbi1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yingyangbaojian"></i>
+                    <div class="name">营养保健</div>
+                    <div class="fontclass">.icon-yingyangbaojian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fenlei"></i>
+                    <div class="name">分类</div>
+                    <div class="fontclass">.icon-fenlei</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi2"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shanchu"></i>
+                    <div class="name">删除</div>
+                    <div class="fontclass">.icon-shanchu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qian"></i>
+                    <div class="name">待付款</div>
+                    <div class="fontclass">.icon-qian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucangjia"></i>
+                    <div class="name">收藏夹</div>
+                    <div class="fontclass">.icon-shoucangjia</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-meishi"></i>
+                    <div class="name">美食</div>
+                    <div class="fontclass">.icon-meishi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-larger-view2"></i>
+                    <div class="name">大图显示</div>
+                    <div class="fontclass">.icon-larger-view2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dingbu"></i>
+                    <div class="name">顶部</div>
+                    <div class="fontclass">.icon-dingbu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-pingjia"></i>
+                    <div class="name">评价</div>
+                    <div class="fontclass">.icon-pingjia</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi3"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wode1"></i>
+                    <div class="name">我的</div>
+                    <div class="fontclass">.icon-wode1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wode4"></i>
+                    <div class="name">wode</div>
+                    <div class="fontclass">.icon-wode4</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yingerfeng"></i>
+                    <div class="name">婴儿风</div>
+                    <div class="fontclass">.icon-yingerfeng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi4"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi4</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiaoxi5"></i>
+                    <div class="name">消息</div>
+                    <div class="fontclass">.icon-xiaoxi5</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ccgl-shouhuoguanli-3"></i>
+                    <div class="name">收货</div>
+                    <div class="fontclass">.icon-ccgl-shouhuoguanli-3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-liwu_gift"></i>
+                    <div class="name">礼物</div>
+                    <div class="fontclass">.icon-liwu_gift</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang3"></i>
+                    <div class="name">收 藏</div>
+                    <div class="fontclass">.icon-shoucang3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiaju"></i>
+                    <div class="name">家居</div>
+                    <div class="fontclass">.icon-jiaju</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang4"></i>
+                    <div class="name">收藏</div>
+                    <div class="fontclass">.icon-shoucang4</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-sousuo2"></i>
+                    <div class="name">搜索</div>
+                    <div class="fontclass">.icon-sousuo2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-biaoqing"></i>
+                    <div class="name">表情</div>
+                    <div class="fontclass">.icon-biaoqing</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kouhong"></i>
+                    <div class="name">口红</div>
+                    <div class="fontclass">.icon-kouhong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gengduo2"></i>
+                    <div class="name">更多</div>
+                    <div class="fontclass">.icon-gengduo2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gift"></i>
+                    <div class="name">礼物</div>
+                    <div class="fontclass">.icon-gift</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lingquan"></i>
+                    <div class="name">领优惠券</div>
+                    <div class="fontclass">.icon-lingquan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jifen"></i>
+                    <div class="name">积分</div>
+                    <div class="fontclass">.icon-jifen</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qianjin"></i>
+                    <div class="name">后退 ＋ 前进 </div>
+                    <div class="fontclass">.icon-qianjin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shoucang11"></i>
+                    <div class="name">收 藏</div>
+                    <div class="fontclass">.icon-shoucang11</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shuaxin1"></i>
+                    <div class="name">刷新</div>
+                    <div class="fontclass">.icon-shuaxin1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhongxin"></i>
+                    <div class="name">中心</div>
+                    <div class="fontclass">.icon-zhongxin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-list-view"></i>
+                    <div class="name">列表显示</div>
+                    <div class="fontclass">.icon-list-view</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fushi"></i>
+                    <div class="name">服饰美装</div>
+                    <div class="fontclass">.icon-fushi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-saoyisao"></i>
+                    <div class="name">扫一扫</div>
+                    <div class="fontclass">.icon-saoyisao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-double-vertical"></i>
+                    <div class="name">双向箭头</div>
+                    <div class="fontclass">.icon-double-vertical</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-up-down"></i>
+                    <div class="name">双向箭头</div>
+                    <div class="fontclass">.icon-up-down</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-sousuo1"></i>
+                    <div class="name">搜索--1</div>
+                    <div class="fontclass">.icon-sousuo1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-double-cross"></i>
+                    <div class="name">双向箭头</div>
+                    <div class="fontclass">.icon-double-cross</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-left-right"></i>
+                    <div class="name">双向箭头</div>
+                    <div class="fontclass">.icon-left-right</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

index.html

@@ -0,0 +1,243 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>荔枝悦动APP下载</title>
+<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+<link rel="stylesheet" href="jquery.fullPage.css">
+<link rel="stylesheet" href="pcOrMobile.css">
+<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+<link rel="stylesheet" href="css/idangerous.swiper.css">
+<link rel="stylesheet" href="css/style.css">
+<link rel="stylesheet" type="text/css" href="font_Icon/iconfont.css">
+<link rel="stylesheet" type="text/css" href="css/chat.css">
+<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+<style type="text/css">
+  .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
+  .section p{ font: 30px "Microsoft Yahei";}
+  .logoBox {width: 150px;height: 35px;position: relative;top: 50px;left:106px}
+  .zhutuBox {width: 100%;height: 474px;position: relative;top: 40px;}
+  .iosBtn {width: 150px;height: 50px;position: absolute;top: 610px;
+    text-align: center;
+    line-height: 46px;color: #14D59C;
+    border: 1px solid #14D59C;
+    border-radius: 5px;
+    left: 25px;
+  }
+  .iosAnzhuo {width: 150px;height: 50px;position: absolute;top: 610px;
+    text-align: center;
+    line-height: 46px;color: #14D59C;
+    border: 1px solid #14D59C;
+    border-radius: 5px;
+    right: 25px;
+  }
+  .iosIcon {
+    width: 23px;
+    height: 23px;
+    position: absolute;
+    top: -3px;
+    left: 20px;
+  }
+  .openIt {
+    width:100%;
+    height: 30px;
+    position: absolute;
+    top: 710px;
+    text-align: center;
+    line-height: 30px;
+    color: #fff;
+  }
+</style>
+  
+</head>
+<body>
+<div id="fullPage" style="background-color: #1A1A1A;">
+   <div class="logoBox">
+     <img style="width: 100%;height:100%" src="./images/logo.png" alt="">
+   </div>
+   <div class="zhutuBox">
+    <img style="width: 100%;height:100%" src="./images/zhutu.png" alt="">
+  </div>
+  <div class="iosBtn">
+    <div class="iosIcon">
+      <img style="width: 100%;height:100%" src="./images/pingguo.png" alt="">
+    </div>
+    <p style="margin-left:20px">iPhone下载</p>
+  </div>
+  <div class="iosAnzhuo">
+    <div class="iosIcon">
+      <img style="width: 100%;height:100%" src="./images/anzhuo.png" alt="">
+    </div>
+    <p style="margin-left:20px">安卓下载</p>
+  </div>
+  <div class="openIt">已安装APP？<p style="color: #14D59C;display: inline;">点此打开</p></div>
+    
+    
+</div>
+
+  
+</div>
+<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
+<script src="jquery.fullPage.js"></script>
+<!-- <script src="js/jquery-1.10.1.min.js"></script> -->
+<script src="js/idangerous.swiper.min.js"></script>
+<script>
+$(function(){
+    $('#fullPage').fullpage({
+        sectionsColor : ['#fff', '#fff', '#fff', '#fff', '#454545'],
+        loopBottom: true,
+        controlArrows: false,
+        continuousVertical: true,
+        continuousHorizontal:true
+    });
+
+    setInterval(function(){
+        $.fn.fullpage.moveSlideRight();
+    }, 5000);
+});
+</script>
+<script>
+  function IsPC() {
+    var userAgentInfo = navigator.userAgent;
+    var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone", "iPod"];
+    var flag = true;
+    for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = false;
+            break;
+        }
+        // 移动端就是false
+
+    }
+    if(window.screen.width>=768){
+         flag = true;
+    }
+    console.log(flag)
+    return flag;
+  }
+  IsPC()
+  // function kuangaobi() {
+  //   var kuan = document.body.clientWidth
+  //   var gao = document.body.clientHeight 
+  //   console.log(kuan,gao)
+  //   if(kuan/gao >= 0.6){
+  //       $(".introduce").removeClass("introduce")
+  //       $("#tanchuang1").addClass("introduce1")
+  //   }else {
+  //       $(".introduce").removeClass("introduce1")
+  //       $("#tanchuang1").addClass("introduce")
+  //   }
+  // }
+  // kuangaobi()
+  var ydSwiper = new Swiper ('#youdaoBanner', {
+    centeredSlides : true,
+	slidesPerView : 'auto'
+  })
+   $('.swiper-button-prev').on('click', function(e){
+    e.preventDefault()
+    ydSwiper.swipePrev()
+  })
+  $('.swiper-button-next').on('click', function(e){
+    e.preventDefault()
+    ydSwiper.swipeNext()
+  })
+  $('.logo').on('click', function(e){
+        $.fn.fullpage.moveTo(1)
+  })
+  $('#youdaoBanner .bg').hover(function(){
+	  $(this).find('.info').animate({bottom:'0px'},200,'linear');
+	  },function(){
+       $(this).find('.info').animate({bottom:'-149px'},200,'linear');
+    });
+
+    $('.lunbo').on('click', function() {
+      $("#tanchuang1").removeClass("display")
+    })
+    $('.imgBigBox').on('click', function() {
+        $("#tanchuang2").removeClass("display")
+    })
+    $('.swiper-slide').on('click', function() {
+        $("#tanchuang3").removeClass("display")
+    })
+    $('.HZSImg').on('click', function() {
+        $("#tanchuang4").removeClass("display")
+    })
+    $('.HZSBtn').on('click', function() {
+      $("#tanchuang4").removeClass("display")
+    })
+    $('.PTLogo1').on('click', function() {
+      $("#tanchuang4-1").removeClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-2").addClass("display")
+        $("#tanchuang4-3").addClass("display")
+    })
+    $('.PTLogo2').on('click', function() {
+      $("#tanchuang4-2").removeClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-1").addClass("display")
+        $("#tanchuang4-3").addClass("display")
+    })
+    $('.PTLogo3').on('click', function() {
+      $("#tanchuang4-3").removeClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-2").addClass("display")
+        $("#tanchuang4-1").addClass("display")
+    })
+    
+    $("#tanchuang1").on('click', function() {
+        $("#tanchuang1").addClass("display")
+    })
+    $("#tanchuang2").on('click', function() {
+        $("#tanchuang2").addClass("display")
+    })
+    $("#tanchuang3").on('click', function() {
+        $("#tanchuang3").addClass("display")
+    })
+    $("#tanchuang4").on('click', function() {
+        $("#tanchuang4").addClass("display")
+    })
+    $("#tanchuang4-1").on('click', function() {
+        $("#tanchuang4-1").addClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-2").addClass("display")
+        $("#tanchuang4-3").addClass("display")
+    })
+    $("#tanchuang4-2").on('click', function() {
+        $("#tanchuang4-2").addClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-1").addClass("display")
+        $("#tanchuang4-3").addClass("display")
+    })
+    $("#tanchuang4-3").on('click', function() {
+        $("#tanchuang4-3").addClass("display")
+        $("#tanchuang1").addClass("display")
+        $("#tanchuang2").addClass("display")
+        $("#tanchuang3").addClass("display")
+        $("#tanchuang4").addClass("display")
+        $("#tanchuang4-2").addClass("display")
+        $("#tanchuang4-1").addClass("display")
+    })
+</script>
+<script language="javascript" src="http://pdt.zoosnet.net/JS/LsJS.aspx?siteid=PDT69566089&float=1&lng=cn"></script>
+</body>
+</html>

jquery.fullPage.css

@@ -0,0 +1,213 @@
+/*!
+ * fullPage 2.7.8
+ * https://github.com/alvarotrigo/fullPage.js
+ * MIT licensed
+ *
+ * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
+ */
+html.fp-enabled,
+.fp-enabled body {
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+
+    /*Avoid flicker on slides transitions for mobile phones #336 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+#superContainer {
+    height: 100%;
+    position: relative;
+
+    /* Touch detection for Windows 8 */
+    -ms-touch-action: none;
+
+    /* IE 11 on Windows Phone 8.1*/
+    touch-action: none;
+}
+.fp-section {
+    position: relative;
+    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
+    -moz-box-sizing: border-box; /* <=28 */
+    box-sizing: border-box;
+}
+.fp-slide {
+    float: left;
+}
+.fp-slide, .fp-slidesContainer {
+    height: 100%;
+    display: block;
+}
+.fp-slides {
+    z-index:1;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
+    transition: all 0.3s ease-out;
+}
+.fp-section.fp-table, .fp-slide.fp-table {
+    display: table;
+    table-layout:fixed;
+    width: 100%;
+}
+.fp-tableCell {
+    display: table-cell;
+    vertical-align: middle;
+    width: 100%;
+    height: 100%;
+}
+.fp-slidesContainer {
+    float: left;
+    position: relative;
+}
+.fp-controlArrow {
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+    position: absolute;
+    z-index: 4;
+    top: 50%;
+    cursor: pointer;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    margin-top: -38px;
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+}
+.fp-controlArrow.fp-prev {
+    left: 15px;
+    width: 0;
+    border-width: 38.5px 34px 38.5px 0;
+    border-color: transparent #fff transparent transparent;
+}
+.fp-controlArrow.fp-next {
+    right: 15px;
+    border-width: 38.5px 0 38.5px 34px;
+    border-color: transparent transparent transparent #fff;
+}
+.fp-scrollable {
+    overflow: scroll;
+}
+.fp-notransition {
+    -webkit-transition: none !important;
+    transition: none !important;
+}
+#fp-nav {
+    position: fixed;
+    z-index: 100;
+    margin-top: -32px;
+    top: 50%;
+    opacity: 1;
+    -webkit-transform: translate3d(0,0,0);
+}
+#fp-nav.right {
+    right: 17px;
+}
+#fp-nav.left {
+    left: 17px;
+}
+.fp-slidesNav{
+    position: absolute;
+    z-index: 4;
+    left: 50%;
+    opacity: 1;
+}
+.fp-slidesNav.bottom {
+    bottom: 17px;
+}
+.fp-slidesNav.top {
+    top: 17px;
+}
+#fp-nav ul,
+.fp-slidesNav ul {
+  margin: 0;
+  padding: 0;
+}
+#fp-nav ul li,
+.fp-slidesNav ul li {
+    display: block;
+    width: 14px;
+    height: 13px;
+    margin: 7px;
+    position:relative;
+}
+.fp-slidesNav ul li {
+    display: inline-block;
+}
+#fp-nav ul li a,
+.fp-slidesNav ul li a {
+    display: block;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    text-decoration: none;
+}
+#fp-nav ul li a.active span,
+.fp-slidesNav ul li a.active span,
+#fp-nav ul li:hover a.active span,
+.fp-slidesNav ul li:hover a.active span{
+    height: 12px;
+    width: 12px;
+    margin: -6px 0 0 -6px;
+    border-radius: 100%;
+ }
+#fp-nav ul li a span,
+.fp-slidesNav ul li a span {
+    border-radius: 50%;
+    position: absolute;
+    z-index: 1;
+    height: 4px;
+    width: 4px;
+    border: 0;
+    background: #333;
+    left: 50%;
+    top: 50%;
+    margin: -2px 0 0 -2px;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+#fp-nav ul li:hover a span,
+.fp-slidesNav ul li:hover a span{
+    width: 10px;
+    height: 10px;
+    margin: -5px 0px 0px -5px;
+}
+#fp-nav ul li .fp-tooltip {
+    position: absolute;
+    top: -2px;
+    color: #fff;
+    font-size: 14px;
+    font-family: arial, helvetica, sans-serif;
+    white-space: nowrap;
+    max-width: 220px;
+    overflow: hidden;
+    display: block;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+}
+#fp-nav ul li:hover .fp-tooltip,
+#fp-nav.fp-show-active a.active + .fp-tooltip {
+    -webkit-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+    width: auto;
+    opacity: 1;
+}
+#fp-nav ul li .fp-tooltip.right {
+    right: 20px;
+}
+#fp-nav ul li .fp-tooltip.left {
+    left: 20px;
+}
+.fp-auto-height.fp-section,
+.fp-auto-height .fp-slide,
+.fp-auto-height .fp-tableCell{
+    height: auto !important;
+}

pcOrMobile.css

@@ -0,0 +1,289 @@
+/* body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+} */
+/* div {
+    width: 100%;
+    height: 100%;
+} */
+
+html {
+    font-size: 100px;
+}
+
+/* @media screen and (min-width:900px) { */
+    .BGImage1 {
+        background-image: url(./images/banner/bannerM1.jpg);
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+        background-position: center center ;
+    }
+    .BGImage2 {
+        background-image: url(./images/banner/bannerM2.jpg);
+        background-size:auto 100%;
+        background-repeat: no-repeat;
+        background-position: center center ;
+    }
+    .BGImage3 {
+        background-image: url(./images/banner/bannerM3.jpg);
+        background-size:  auto 100%;
+        background-repeat: no-repeat;
+        background-position: center center ;
+    }
+    .BGImage4 {
+        background-image: url(./images/banner/bannerM4.jpg);
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+        background-position: center center ;
+    }
+    .logo {
+        width: 22%;
+        /* height: 4%; */
+        position: absolute;
+        top: 10px;
+        left: 15px;
+        z-index: 999;
+    }
+    .pageTwoBox {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-evenly;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .container {
+        /* margin: 20px; */
+        width: 20%;
+        /* flex:auto; */
+        /* height: 30%; */
+        /* perspective: 1000px; */
+    }
+    .card {
+        margin-top: -10px;
+        transition: transform 2s;
+        transform-style: preserve-3d;
+        cursor: pointer;
+    }
+    .front,
+    .back {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        backface-visibility: hidden;
+    }
+
+    .back {
+        transform: rotateY(180deg);
+    }
+
+    .threeTitle {
+        width: 100%;
+        font-size :3vh;
+        color: black;
+        letter-spacing: 3px;
+        position: absolute;
+        top: 2vh;
+    }
+    .HZSBox {
+        width: 100%;
+        height: 75vh;
+        margin-top: 7vh;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+        /* background-color: brown; */
+    }
+    .HZSImg {
+        width: 30%;
+        height: 13%;
+    }
+    .HZSBtn {
+        background-color: #fff;
+        color: #61579B;
+        border-radius: 5px;
+        border: 1px solid #61579B;
+        font-size: 2vh;
+        padding: 1vh;
+        margin-top: 1vh;
+    }
+    .PTLogo1 {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/wechat.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+    .PTLogo1:hover {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/wechat.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+
+    .PTLogo2 {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/weibo.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+    .PTLogo2:hover {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/weibo.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+
+    .PTLogo3 {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/toutiao.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+    .PTLogo3:hover {
+        width: 40px;
+        height: 30px;
+        margin: 20px;
+        background-image: url("./images//hezuoshang/toutiao.png");
+        background-size: 100% 100%;
+        /* background-color: chartreuse; */
+    }
+    .PTLogoBox {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+    }
+    .otherTitleBox {
+        position: absolute;
+        top: 3vh;
+        left: 3vw;
+        color: black;
+        font-size: 4vw;
+        margin-top: 3vh;
+        text-align: left;
+    }
+    .otherTitle1 {
+        font-weight: 600;
+        font-size: 4vw;
+    }
+    .tooth {
+        position: absolute;
+        top: 37vh;
+        left: 50%;
+        margin-left: -8vw;
+        width: 16vw;
+        height: 16vw;
+        /* margin-top: -100vh; */
+        
+    }
+    .TitleBox {
+        position: absolute;
+        /* left: 50%; */
+        top: 48vh;
+        /* margin-left: -15vw; */
+        /* width: 30vw; */
+        width: 100%;
+        text-align: center;
+        color: black;
+        text-align: left;
+    }
+    
+    .Title {
+        text-align: center;
+        width: 100%;
+        font-size: 18px;
+    }
+    .Title1 {
+        text-align: center;
+        width: 100%;
+        font-size: 18px;
+        font-weight: 600;
+    }
+    a {
+        display: block;
+    }
+    a:hover {
+        color: #fff;
+    }
+    a:active {
+        color: #fff;
+    }
+    .tanchuang {
+        width: 100vw;
+        height: 100vh;
+        background-image: url(./images/xiaochengxu.jpg);
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+        background-position: center center ;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 99999;
+    }
+    .tanchuangO {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 99999;
+    }
+    
+    .tanchuangImg {
+        width: 50vw;
+        height: 50vw;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -25vw;
+        margin-top: -15vw;
+    }
+    .display{
+      display: none;
+    }
+    .imgBigBox {
+        width: 100%;
+        height: 60vh;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-evenly;
+        margin-top: 3vh;
+    }
+    .introduce {
+        width: 60%;
+        margin-top: 1vh;
+        /* flex:auto; */
+        /* height: 85%; */
+
+    }
+    .introduce1 {
+        width: 50%;
+        margin-top: 2vh;
+        /* flex:auto; */
+        /* height: 85%; */
+
+    }
+    .imgBox {
+        width: 100%;
+    }
+/* } */
+
+
+