修改

controllers/index_controller.go

@@ -60,7 +60,26 @@ func (this *IndexController) CDMIndex() {
 
 // /about [get]
 func (this *IndexController) AboutUs() {
-	this.SetTpl("new_main/about.html")
+	mobileAgents := []string{"Android", "iPhone", "iPod", "iPad", "Windows Phone", "MQQBrowser"}
+	isFromMobile := false
+
+	userAgent := this.Ctx.Request.Header.Get("User-Agent")
+	if !strings.Contains(userAgent, "Windows NT") || (strings.Contains(userAgent, "Windows NT") && strings.Contains(userAgent, "compatible; MSIE 9.0;")) {
+		if !strings.Contains(userAgent, "Windows NT") && !strings.Contains(userAgent, "Macintosh") {
+			for _, mobileAgent := range mobileAgents {
+				if strings.Contains(userAgent, mobileAgent) {
+					isFromMobile = true
+					break
+				}
+			}
+		}
+	}
+
+	if isFromMobile {
+		this.SetTpl("mobile_site/about.html")
+	} else {
+		this.SetTpl("new_main/about.html")
+	}
 }
 
 func (this *IndexController) Help() {

static/css/mobileAbout.css

@@ -0,0 +1,261 @@
+body{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
+}
+header{
+    height: 56px;
+    display: block;
+    justify-content:space-around;
+    align-content: space-around;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 999;
+    padding: 0 10px;
+    box-shadow: 0 0 18px 0 rgba(82,94,102,0.15); 
+    
+}
+.logo{  
+    width: 120px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 56px;
+}
+.logo img{
+    width: 100%;
+}
+.head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.expand{
+    width: 0.18rem;
+    height: 0.14rem;
+    display: flex;
+    flex-direction: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+}
+.expand>div {
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background-color: #9C9C9C;
+}
+.outerSlider{
+    background: rgba(0,0,0,.5);
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: none;
+}
+.show{
+    position: fixed;
+    left: 0;
+}
+.outerSlider .menuBox {
+    position: absolute;
+    width: 100%;
+    background: #fff;
+    height: 100%;
+    top: 0;
+    -webkit-transition: bottom .3s ease-in-out;
+    transition: bottom .3s ease-in-out;
+
+}
+.menuNav{
+    position: relative;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+.scrollList>a{
+    height: 0.5rem;
+    line-height: 0.5rem;
+    padding-left: 0.2rem;
+    border-bottom: 1px solid #e5e5e5;
+}
+.scrollList>a:last-of-type{
+    border:none;
+}
+a{
+    color: #333;
+    display: block;
+}
+.aboutBanner{
+    width: 100%;
+    height: 3.34rem;
+    background-image: url(/static/images/img/banner6.jpg);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+    color: #fff;
+    text-align: center;
+    margin-top: 56px;
+    position: relative;
+}
+.aboutBannerTitle{
+    font-size:0.24rem;
+    line-height:0.18rem;
+    padding-top: 1rem;
+    font-weight: bold;
+}
+.aboutTips{
+    width: 3.1rem;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 0.12rem;
+    font-weight: lighter!important;
+    margin-top: 0.2rem;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+
+.tabs{
+    width: 100%;
+    background:rgba(5,18,43,.5);
+    height: 0.46rem;
+    position: absolute;
+    bottom: 0;
+}
+.tabOne{
+    width: 1.32rem;
+    text-align: center;
+    cursor: pointer;
+    height: 100%;
+    line-height: 0.46rem;
+    font-size: 0.15rem;
+}
+.tabActive{
+    background:rgba(5,18,43,1);
+    color: #2780F6;
+}
+.tab-item{
+    display: none;
+}
+.show1{
+    display: block;
+}
+.aboutMain{
+    color:#333;
+    padding: 0 0.22rem;
+}
+.aboutUsTitle{
+    font-size: 0.2rem !important;
+    font-weight: bold;
+    margin: 0.36rem auto 0.2rem !important;
+    text-align: center;
+}
+.tab-item>p{
+    margin-bottom: 0.24rem;
+    font-size: 0.15rem;
+    font-weight: lighter!important;
+}
+
+.photoBox{
+    /* display: flex; */
+}
+.photo > img{
+    width: 100%;
+    height: 3.56rem;
+    border-radius:5px;
+}
+.aboutMessage{
+    margin-top: 0.36rem;
+}
+.message{
+    font-size: 0.15rem;
+    color:#333;
+    font-weight: lighter!important;
+}
+.codeBox{
+    text-align: center;
+}
+.codeBox>img{
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-top: 0.34rem;
+}
+.codeBox>p{
+    font-size: 0.15rem;
+    color: #333;
+    font-weight: lighter!important;
+}
+.map{
+    width: 100%;
+    height: 2rem;
+    margin-top: 0.34rem;
+    margin-bottom: 0.3rem;
+}
+.map>img{
+    width: 100%;
+    height: 100%;
+}
+
+.slogan{
+    width: 100%;
+    height: 1.89rem;
+    background-image: url(/static/images/img/28.png);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+    text-align: center;
+    color: #fff;
+}
+.slogan>p:first-of-type{
+    font-size: 0.24rem;
+    padding-top: 0.5rem;
+    margin-bottom: 0.2rem;
+}
+.slogan>p:last-of-type{
+    font-size: 0.2rem;
+}
+.footer{
+    width: 100%;
+    height: 2.86rem;
+    background: #181D30;
+    color:rgba(255,255,255,0.6);
+    padding-top: 0.56rem;
+}
+.footer>p{
+    padding-left: 0.28rem;
+    line-height: 0.3rem;
+}
+.beian{
+    margin-top: 0.32rem;
+    font-size: 0.1rem;
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+}
+.beian>a{
+    color:rgba(255,255,255,0.6);
+}
+.useBox{
+    width: 100%;
+    height: 0.5rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+}
+.free{
+    background: #2780F6;
+    color: #fff;
+    width: 100%;
+    line-height: 0.5rem;
+    text-align: center;
+    font-size: 0.18rem; 
+}

static/css/mobileIndex.css

@@ -0,0 +1,388 @@
+body{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
+}
+.head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.expand{
+    width: 0.18rem;
+    height: 0.14rem;
+    display: flex;
+    flex-direction: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+}
+.expand>div {
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background-color: #9C9C9C;
+}
+.outerSlider{
+    background: rgba(0,0,0,.5);
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: none;
+}
+.show{
+    position: fixed;
+    left: 0;
+}
+.outerSlider .menuBox {
+    position: absolute;
+    width: 100%;
+    background: #fff;
+    height: 100%;
+    top: 0;
+    -webkit-transition: bottom .3s ease-in-out;
+    transition: bottom .3s ease-in-out;
+
+}
+.menuNav{
+    position: relative;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+.scrollList>a{
+    height: 0.5rem;
+    line-height: 0.5rem;
+    padding-left: 0.2rem;
+    border-bottom: 1px solid #e5e5e5;
+}
+.scrollList>a:last-of-type{
+    border:none;
+}
+a{
+    color: #333;
+    display: block;
+}
+.main-container .banner{
+    background-image: url(/static/images/img/banner3.jpg);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+    color: #fff;
+    text-align: center;
+    height: 3.5rem;
+    box-sizing: border-box;
+    padding-top: 0.48rem;
+}
+.bannerBox{
+    width:100%;
+    height:1.4rem;
+    border-radius:5px;
+    margin: 0 auto;
+    padding-top:0.2rem;
+    box-sizing: border-box;
+}
+.bannerTitle{
+    font-size:0.24rem;
+    font-weight:bold;
+    color:#2780F6;
+    line-height:0.2rem;
+    margin: 0 0 0.18rem;
+    font-family:PingFangSC;
+}
+.bannerTips{
+    font-size:0.12rem;
+    color:#333;
+    line-height:0.18rem;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.freeuse{
+    width:1.5rem;
+    height:.36rem;
+    background:rgba(43,126,246,1);
+    border-radius:18px;
+    color:#fff;
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    line-height: 0.36rem;
+}
+.special{
+    width: 3rem;
+    height: 3.6rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0.2rem auto 0;
+    margin-top: -1rem;
+}
+.specialOne{
+    width: 48%;
+    height: 48%;
+    background:#fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 0.2rem;
+    box-shadow:0px 2px 13px 0px rgba(43,126,246,0.11);
+    border-radius: 10px;
+}
+.specialImg{
+    width: 0.5rem;
+    margin-top: 0.3rem;
+    margin-bottom: 0.1rem;
+}
+.specialTip1{
+    font-size: 0.20rem;
+    color: #333;
+    margin-bottom: 0.1rem;
+}
+.specialTip2{
+    font-size: 0.16rem;
+    color: #666;
+    font-weight: lighter!important;
+}
+.introduceTitle{
+    width: 100%;
+    text-align: center;
+    font-size: 0.24rem;
+    color: #333;
+    line-height: 0.36rem;
+    margin: 0.3rem 0;
+}
+.introduceBox{
+    height: 1.4rem;
+    display: flex;
+    padding: .3rem 0.16rem ;
+    justify-content: space-between;
+    background: #F8FBFF;
+}
+.introduceOne{
+    width: 1.02rem;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    /* justify-content: space-around; */
+    box-shadow:0px 2px 13px 0px rgba(43,126,246,0.11);
+    color: #353535;
+    border-radius: 10px;
+}
+.introduceImg{
+    width: 50%;
+    margin-top: .24rem;
+}
+.commonTitle{
+    width: 100%;
+    text-align: center;
+    font-size: 0.24rem;
+    color: #333;
+    line-height: 0.36rem;
+    padding-top: 0.3rem;
+}
+.commonTit1{
+    font-size:.16rem;
+    font-weight:bold;
+    color:#333;
+    line-height:.28rem;
+    text-align: center;
+}
+.commonTit2{
+    text-align: center;
+    font-size:.14rem;
+    color:#666;
+    line-height:.28rem;
+    margin-bottom: 0.05rem;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+
+.downloadOne{
+    width:3.38rem;
+    height:4.68rem;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 1px 15px 0px rgba(0, 0, 0, 0.12);
+    border-radius:5px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.downloadOne>img:first-of-type{
+    width: 1.28rem;
+    height: 1.28rem;
+    margin-top: 0.4rem;
+}
+.downloadOne>img:last-of-type{
+    width: 90%;
+}
+.downloadOne>span{
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 1vw;
+    font-weight: bold;
+    margin-top: 6px;
+}
+.downloadOne>p{
+    font-size: 14px;
+    color: #333;
+}
+.swiper-container-horizontal > .swiper-pagination{
+    bottom: 0 !important;
+}
+
+.forBox{
+    width: 100%;
+    height: 2.8rem;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0.5rem 0;
+}
+.forOne{
+    width: 50%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+.forOne>img{
+    width: 0.8rem;
+    height: 0.8rem;
+}
+.forOne>span{
+    font-size: 0.16rem;
+    color: #333;
+}
+.forOne>p{
+    font-size: 0.12rem;
+    color: #666;
+}
+.backgroundBlue{
+    width:100%;
+    height:4.9rem;
+    background:linear-gradient(0deg,rgba(72,166,253,1),rgba(43,126,246,1));
+}
+.blueTitle{
+    text-align: center;
+    font-size: 0.2rem;
+    color: #fff;
+    line-height:0.3rem;
+    padding-top: 0.3rem;
+}
+.productBox1{
+    width: 100%;
+    height: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.6rem;
+}
+.product{
+    width: 50%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+.product>img{
+    width: 0.6rem;
+    height: 0.6rem;
+}
+.product>p{
+    font-size: 0.13rem;
+    color: #fff;
+}
+
+.position1{
+    width: 3.32rem;
+    margin: 0 auto;
+    margin-top: -1.2rem;
+    text-align: center;
+}
+.sort{
+    color:#fff;
+    font-size: 0.1rem;
+}
+.sponsorBox{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    background: #fff;
+    padding-bottom: 0.3rem;
+}
+.sponsorOne{
+    width: 50%;
+    height: 1.66rem;
+    display: flex;
+    flex-direction: column;
+}
+.background{
+    background: #F8F8F8;
+}
+.sponsorOne>img{
+    width: 100%;
+    margin-top: 0.4rem;
+    margin-bottom: 0.2rem;
+}
+.slogan{
+    width: 100%;
+    height: 1.89rem;
+    background-image: url(/static/images/img/28.png);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+    text-align: center;
+    color: #fff;
+}
+.slogan>p:first-of-type{
+    font-size: 0.24rem;
+    padding-top: 0.5rem;
+    margin-bottom: 0.2rem;
+}
+.slogan>p:last-of-type{
+    font-size: 0.2rem;
+}
+.footer{
+    width: 100%;
+    height: 2.86rem;
+    background: #181D30;
+    color:rgba(255,255,255,0.6);
+    padding-top: 0.56rem;
+}
+.footer>p{
+    padding-left: 0.28rem;
+    line-height: 0.3rem;
+}
+.beian{
+    margin-top: 0.32rem;
+    font-size: 0.1rem;
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+}
+.beian>a{
+    color:rgba(255,255,255,0.6);
+}
+.useBox{
+    width: 100%;
+    height: 0.5rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+}
+.free{
+    background: #2780F6;
+    color: #fff;
+    width: 100%;
+    line-height: 0.5rem;
+    text-align: center;
+    font-size: 0.18rem; 
+}

static/css/newAbout.css

@@ -0,0 +1,251 @@
+body{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
+}
+.header{
+    height: 80px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #fff;
+    z-index: 100;
+}
+.newNav{
+    align-items: center;
+    height: 100%;
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+.newNav .logo{
+    width:120px;
+    margin-right: 60px;
+}
+.navList{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    height: 100%;
+}
+.nav-link{
+    height: 100%;
+    margin-left: 3vw;
+    color:#333;
+    display: flex;
+    align-items: center;
+}
+.nav-link:hover, .nav-link_active{
+    color:#2780F6;
+    /* border-bottom: 3px solid #2780F6; */
+}
+.loginBtn{
+    padding: 6px 30px;
+    background:rgba(39,128,246,0);
+    border:1px solid rgba(39, 128, 246, 1);
+    border-radius:18px;
+    font-size: 14px;
+}
+.loginBtn:hover{
+    color: #3388ff;
+}
+.freeUse{
+    padding:6px 30px;
+    background:rgba(39,128,246,1);
+    border:1px solid rgba(39, 128, 246, 1);
+    border-radius:18px; 
+    color: #fff;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.freeUse:hover{
+    color: #fff;
+}
+.aboutBanner{
+    /* background: url(../images/about-bg.jpg) no-repeat 50%; */
+    width: 100%;
+    height: 42vw;
+    position: relative;
+    margin-top: 80px;
+    background-image: url(/static/images/img/banner6.jpg);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+    color: #fff;
+    text-align: center;
+}
+.bannerTitle{
+    font-size: 40px;
+    width: 100%;
+    padding-top: 12vw;
+    padding-bottom: 2vw;
+    font-weight: bold;
+    font-family: PingFangSC-Regular,Microsoft YaHei,Helvetica Neue,Roboto,Segoe UI,"sans-serif" !important;
+}
+.bannerTips{
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.tabs{
+    width: 100%;
+    background:rgba(5,18,43,.5);
+    height: 5vw;
+    position: absolute;
+    bottom: 0;
+}
+.tabOne{
+    width: 160px;
+    text-align: center;
+    cursor: pointer;
+    height: 100%;
+    line-height: 5vw;
+    font-size: 22px;
+}
+.tabActive{
+    background:rgba(5,18,43,1);
+    color: #2780F6;
+}
+.tab-item{
+    display: none;
+}
+.show{
+    display: block;
+}
+.aboutMain{
+    width: 100%;
+    color: #333;
+    
+}
+.aboutTitle{
+    text-align: center;
+    font-size: 40px !important;
+    margin-top: 50px;
+    margin-bottom: 40px !important;
+}
+.tab-item{
+    width: 72vw;
+    margin: 0 auto;
+}
+.tab-item>p{
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.photoBox{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5vw;
+    padding-bottom: 6vw;
+}
+.photo > img{
+    border-radius:10px;
+    width: 22vw;
+    height: 26vw;
+    margin-bottom: 1vw;
+}
+.contactUs{
+    width: 66vw;
+    margin: 0 auto;
+    padding-top: 50px;
+    display: flex;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.contactLeft{
+    flex: 1;
+    font-size: 18px;
+}
+.contactRight{
+    display: flex;
+    justify-content: space-around;
+    font-size: 18px;
+}
+.rightOne{
+    display: flex;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin-left:4vw;
+}
+.rightOne>img{
+    width: 8vw;
+}
+.rightOne>p{
+    font-size: 14px;
+    margin: 0;
+}
+.map{
+    width: 66vw; 
+    margin: 0 auto;
+}
+.map>img{
+    width: 100%;
+    height: 39vw;
+    margin: 3vw 0;
+}
+
+
+.slogan{
+    width: 100%;
+    font-size: 30px;
+    color: #fff;
+    height: 14vw;
+    display: flex;
+    align-items: center;
+    background-image: url(/static/images/img/28.png);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+}
+.slogan>p{
+    width: 100%;
+    text-align: center;
+    margin: 0;
+}
+.footer{
+    width: 100%;
+    padding-bottom: 1vw;
+    background: #171E2F;
+    color: #fff;
+}
+.footerBox{
+    width: 72vw;
+    margin: 0 auto;
+}
+.point{
+    padding-top: 5vw;
+    padding-bottom: 1vw;
+}
+.contactBox{
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+}
+.copyRight{
+    font-size: 12px;
+    text-align: center;
+    margin-top: 4vw;
+}
+
+.suspension{
+    border:none;
+    box-shadow: none;
+    right:30px;
+    bottom:12%;
+}
+.suspension .a{
+    background: none;
+    border: none;
+    height: 70px;
+    margin-bottom: 10px;
+    width: 70px;
+}
+.suspension .a:hover{
+    background: none;
+}

static/css/newIndex.css

@@ -0,0 +1,444 @@
+
+body{
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
+}
+.header{
+    height: 80px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #fff;
+    z-index: 100;
+}
+.newNav{
+    align-items: center;
+    height: 100%;
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+}
+.newNav .logo{
+    width:120px;
+    margin-right: 60px;
+}
+.navList{
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    height: 100%;
+}
+.nav-link{
+    height: 100%;
+    margin-left: 3vw;
+    color:#333;
+    display: flex;
+    align-items: center;
+}
+.nav-link:hover, .nav-link_active{
+    color:#2780F6;
+    /* border-bottom: 3px solid #2780F6; */
+}
+.loginBtn{
+    padding: 6px 30px;
+    background:rgba(39,128,246,0);
+    border:1px solid rgba(39, 128, 246, 1);
+    border-radius:18px;
+    font-size: 14px;
+}
+.loginBtn:hover{
+    color: #3388ff;
+}
+.freeUse{
+    padding:6px 30px;
+    background:rgba(39,128,246,1);
+    border:1px solid rgba(39, 128, 246, 1);
+    border-radius:18px; 
+    color: #fff;
+    font-size: 14px;
+    margin-left: 10px;
+}
+.freeUse:hover{
+    color: #fff;
+}
+.banner{
+    width: 100%;
+    height: 45vw;
+    position: relative;
+    margin-top: 80px;
+    /* background-image: url(https://kuyi.shengws.com/WechatIMG895.png); */
+    background-image: url(/static/images/img/banner3.jpg);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+}
+.bannerBox{
+    position: absolute;
+}
+.bannerImg{
+    width: 100%;
+}
+.bannerTip{
+    /* background:rgba(39,128,246,1); */
+    border-radius:10px;
+    width: 560px;
+    height: 70px;
+    line-height: 70px;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 42px;
+    color: #2780F6;
+    font-weight: bold;
+    font-family: PingFangSC-Regular,Microsoft YaHei,Helvetica Neue,Roboto,Segoe UI,"sans-serif" !important;
+    
+}
+.bannerMain{
+    /* padding-top: 100px; */
+    position: absolute;
+    width: 100%;
+    top: 15%;
+}
+.bannerTxt{
+    width: 780px;
+    text-align: center;
+    margin: 0 auto;
+    color: #333;
+    font-size: 20px;
+    margin-top: 34px;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.digital{
+    /* width: 700px; */
+    width: 100%;
+    height: 16vw;
+    display: flex;
+    margin: 100px auto 0;
+    /* color: #fff; */
+}
+.digital-one{
+    width: 15vw;
+    /* background:rgba(39,128,246,.9); */
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-around;
+    border-radius: 10px;
+}
+.digital-two{
+    width: 15vw;
+    background: #fff;
+    /* background:rgba(119,167,212,.9); */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-around;
+    border-radius: 10px;
+}
+.digitalImg{
+    width: 6vw;
+    margin-top: 2vw;
+}
+.introduce{
+    height: 30vw;
+}
+.introduceTitle{
+    width: 100%;
+    text-align: center;
+    color: #333;
+    font-size: 32px;
+    margin: 70px 0;
+}
+.introduceBox{
+    height: 22vw;
+}
+.introduceMain{
+    width: 66vw;
+    display: flex;
+    margin: 0 auto;
+    height: 100%;
+    justify-content: space-between;
+}
+.introduceOne{
+    width: 20vw;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    /* justify-content: space-around; */
+    margin-right: 20px;
+    box-shadow:0px 4px 25px 0px rgba(39,128,246,0.11);
+    color: #353535;
+    border-radius: 10px;
+}
+.introduceImg{
+    width: 6vw;
+    margin-top: 4vw;
+    margin-bottom: 2vw;
+}
+.programme{
+    width: 1200px;
+    margin: 0 auto;
+    /* height: 45vw; */
+    /* padding-left: 40px; */
+    padding-top: 80px;
+    padding-bottom: 100px;
+}
+.programmeTitle{
+    text-align: center;
+    width: 100%;
+    padding: 0px 0 70px;
+    font-size: 32px;
+    color: #333;
+}
+.programmeDescribe{
+    flex: 1;
+}
+.describeTip1{
+    color: #333;
+    font-size: 18px;
+    margin: 0;
+    font-weight: bold;
+    margin-bottom: 6px;
+}
+.describeTip2{
+    color: #333;
+    font-size: 16px;
+    margin: 0;
+    font-weight: lighter!important;
+    font-family: AlibabaPuHuiTiL,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+}
+.mainImg{
+    width: 43vw;
+    height: 28vw;
+    margin-top: -2vw;
+}
+.free{
+    display: block;
+    width: 166px;
+    background: rgba(39,128,246,1);
+    border-radius: 22px;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    font-size: 14px;
+}
+.free:hover{
+    color: #fff;
+}
+
+.download{
+    width: 100%;
+    padding-top: 80px;
+    padding-bottom: 100px;
+}
+.downloadTitle{
+    text-align: center;
+    width: 100%;
+    padding: 0px 0 70px;
+    font-size: 32px;
+    color: #333; 
+}
+.downloadBox{
+    width: 1200px;
+    display: flex;
+    margin: 0 auto;
+    justify-content: space-between;
+}
+.downOne{
+    width: 24%;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    border: 1px solid #EEEEEE;
+}
+.downOne>img:first-of-type{
+    width: 8vw;
+    margin-top: 3vw;
+}
+.downOne>img:last-of-type{
+    width: 18vw;
+    margin-bottom: 2vw;
+}
+.downOne>span{
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 1vw;
+    font-weight: bold;
+    margin-top: 6px;
+}
+.downOne>p{
+    font-size: 14px;
+    color: #333;
+}
+.tipBox{
+    width:50vw;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 6vw;
+}
+.tipOne{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+}
+.tipOne>img{
+    width: 5vw;
+}
+.tipOne>span{
+    font-size: 22px;
+    font-weight: bold;
+    color: #333;
+    margin-top: 1vw;
+}
+.tipOne>p{
+    font-size: 16px;
+    color: #666666;
+    margin-top: 5px;
+}
+.advert{
+    width: 100%;
+    position: relative;
+}
+.advertBlue{
+    width: 100%;
+    height: 40vw;
+    background: #2780F6;
+    padding-top: 80px;
+}
+.advertWhite{
+    width: 100%;
+    height: 40vw;
+}
+.advertTitle{
+    text-align: center;
+    width: 100%;
+    padding: 0px 0 40px;
+    font-size: 28px;  
+    color: #fff;
+}
+.productBox{
+    width: 40vw;
+    margin: 0 auto 20px;
+    display: flex;
+    justify-content: space-between;
+}
+.productOne{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    color:#fff;
+}
+.productOne>img{
+    width: 5vw;
+}
+.sort{
+    color:#fff;
+    font-size: 12px;
+    text-align: center;
+    width: 100%;
+    margin-top: 2vw;
+}
+.position{
+    position: absolute;
+    left: 50%;
+    top: 58%;
+    transform: translate(-50%,-50%);
+}
+.sponsorBox{
+    width: 60vw;
+    background: #fff;
+    
+    display: flex;
+    flex-wrap: wrap;
+}
+.sponsorOne{
+    width: 12vw;
+    height: 12vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.sponsorOne>img{
+    width: 100%;
+    margin-top: 3vw;
+    margin-bottom: 1vw;
+}
+.sponsorOne>p{
+    font-size: 14px;
+    color: #333;
+}
+.background{
+    background: #F8F8F8;
+}
+.slogan{
+    width: 100%;
+    font-size: 22px;
+    color: #fff;
+    height: 14vw;
+    display: flex;
+    align-items: center;
+    background-image: url(/static/images/img/28.png);
+    background-position: center center;
+    background-size: cover;
+    -webkit-background-size: cover;
+    zoom: 1;
+    background-repeat: no-repeat;
+}
+.slogan>p{
+    width: 100%;
+    text-align: center;
+    margin: 0;
+    font-size: 30px;
+}
+.footer{
+    width: 100%;
+    padding-bottom: 1vw;
+    background: #171E2F;
+    color: #fff;
+}
+.footerBox{
+    width: 72vw;
+    margin: 0 auto;
+}
+.point{
+    padding-top: 5vw;
+    padding-bottom: 1vw;
+}
+.contactBox{
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+}
+.copyRight{
+    font-size: 12px;
+    text-align: center;
+    margin-top: 4vw;
+}
+.suspension{
+    border:none;
+    box-shadow: none;
+    right:30px;
+    bottom:12%;
+}
+.suspension .a{
+    background: none;
+    border: none;
+    height: 70px;
+    margin-bottom: 10px;
+    width: 70px;
+}
+.suspension .a:hover{
+    background: none;
+}

views/mobile_site/about.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="keywords" content="酷医,酷医云,数字化,血透软件,血透管理系统,血液透析系统,血液净化系统,肾内科信息化软件,血透,透析,血液透析,透析中心,透析耗材,智能透析,慢病管理,营销管理,医护培训,SCRM,信息化管理软件">
+    <meta name="description"
+        content="酷医云，全国领先的透析中心数字化平台，满足患者管理、透析管理、质控管理、慢病管理、运营管理、经营管理等各种协作需求。在全国覆盖25个省份，拥有超千家透析中心用户，开始免费使用吧。">
+    <title>酷医云-透析中心数字化平台</title>
+    <link rel="stylesheet" href="/static/css/mobile.css?v=1.0.0">
+    <link rel="stylesheet" href="/static/css/mobileAbout.css?v=1.0.0">
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.8/css/swiper.css" rel="stylesheet">
+    <!-- 百度统计 -->
+    <script>
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement("script");
+          hm.src = "https://hm.baidu.com/hm.js?7577c975fa7ae685efd61deb009d1b5b";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+        </script>
+</head>
+
+<body>
+    <div class="pageAbout">
+        <header class="head">
+            <div class="logo">
+                <img onclick="window.location.href='/';" src="../../static/images/img/logo2.png" alt="">
+            </div>
+            <div class="expand">
+               <div></div>
+               <div></div>
+               <div></div>
+            </div>
+        </header>
+        <div class="outerSlider show">
+            <div class="menuBox">
+                <div class="menuNav">
+                    <div class="logo">
+                        <img src="../../static/images/img/logo2.png" alt="">
+                    </div>
+                    <div class="expand">
+                       <div></div>
+                       <div></div>
+                       <div></div>
+                    </div>
+                </div>
+                <div class="scrollList">
+                    <a href="/"><p>首页</p></a>
+                    <!-- <p>产品与服务</p>
+                    <p>酷医商城</p> -->
+                    <a href="/about"><p>关于酷医</p></a>
+                </div>
+            </div>
+        </div>
+        <div class="aboutBanner">
+            <p class="aboutBannerTitle">酷医，透析互联网生态平台</p>
+            <p class="aboutTips">作为国内首个血液透析数字化服务商，酷医致力于用数字化赋能肾病患者、透析中心、透析厂商，践行“平台+生态”战略为中国“数字医疗”的落地提供强有力的支撑，并提升患者生命品质，成为一家有社会责任感的企业</p>
+
+            <div class="tabs">
+                <div style="display: flex;align-items: center;height: 100%;width:2.64rem;margin: 0 auto;">
+                    <div tabid="1" class="tabOne tabActive">关于我们</div>
+                    <div tabid="2" class="tabOne">联系我们</div>
+                </div>
+            </div>
+        </div>
+        <div class="aboutMain">
+            <div class="tab-item show1">
+                <p class="aboutUsTitle">关于我们</p>
+                <p class="">酷医，是专注于透析互联网生态建设的服务型公司，致力于用移动互联网和数字技术连接1.2亿肾病病人、300万透析患者、过万家透析中心、数千家厂商，为透 析产业的患者、透析中心、医疗机构、厂商/服务商、公益组织实现信息共享、达成快捷交易、提高管理效率、提升服务水平、聚合资源、降低成本。</p>   
+
+                <p>酷医旗下酷医云，是国内领先的透析中心管理SaaS应用软件及增值服务供应商，是国内首个完全免费使用的智能透析管理平台，5年透析中心服务经验,为透析中心提供覆盖透析管理、慢病管理、营销管理、分销商城、医护培训、供应链等透析中心全流程的SaaS软件和服务解决方案,全国数百家透析中心信赖的选择。</p>
+
+                <p>我们既着眼于现实，用产品和服务帮助每一所透析机构实现互联网+医疗的改革方案；也放眼于未来，通过数据挖掘、人工智能为透析医疗机构带来真正更深远的价值。</p>
+
+                <div class="photoBox">
+                    <div class="photo">
+                        <img src="../../static/images/img/29.png" alt="">
+                        <p style="font-size:0.2rem;font-weight:bold;color: #333;margin: 0.2rem 0 0.1rem;">愿景</p>
+                        <p style="font-size:0.15rem;color: #666666;margin-bottom: 0.34rem;">持续帮助肾友提升生命品质</p>
+                    </div>
+                    <div class="photo">
+                        <img src="../../static/images/img/30.png" alt="">
+                        <p style="font-size:0.2rem;font-weight:bold;color: #333;margin: 0.2rem 0 0.1rem;">使命</p>
+                        <p style="font-size:0.15rem;color: #666666;margin-bottom: 0.34rem;">创造好的诊疗环境为肾友有尊严的生命体验服务</p>
+                    </div>
+                    <div class="photo">
+                        <img src="../../static/images/img/31.png" alt="">
+                        <p style="font-size:0.2rem;font-weight:bold;color: #333;margin: 0.2rem 0 0.1rem;">价值观</p>
+                        <p style="font-size:0.15rem;color: #666666;margin-bottom: 0.34rem;">客户第一、团队协作、创新、敬业、诚信</p>
+                    </div>
+                </div>
+            </div>
+            <div class="tab-item">
+                <div class="aboutMessage">
+                    <div style="margin-bottom: 0.3rem">
+                        <p class="message">咨询热线：0755-86526342</p>
+                        <p class="message">服务邮箱：service@shengws.com</p>
+                    </div>
+                    <div style="margin-bottom: 0.3rem;">
+                        <p class="message">客服手机：18682078150</p>
+                        <p class="message">客服微信：kuyicloud</p>
+                    </div>
+                    <div>
+                        <p class="message">工作时间：上午9:00-12:00</p>
+                        <p class="message"><span style="visibility: hidden;">工作时间：</span>下午13:30-18:00</p>
+                        <p class="message">公司地址：深圳市南山区南山智园A4栋09楼</p>
+                    </div>
+                </div>
+                <div class="codeBox">
+                    <img src="../../static/images/img/img13.png" alt="">
+                    <p>扫描下载酷医云APP</p>
+                </div>
+                <div class="codeBox">
+                    <img src="../../static/images/img/img13.png" alt="">
+                    <p>关注酷医云公众号</p>
+                </div>
+                <div class="map">
+                    <img src="../../static/images/img/map.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="slogan">
+            <p>酷医</p>
+            <p>帮助透析中心从优秀到卓越</p>
+        </div>
+        <div class="footer">
+            <p>咨询热线：0755-86526342</p>
+            <p>服务邮箱：service@shengws.com</p>
+            <p>客服手机：18682078150</p>
+            <p>客服微信：kuyicloud</p>
+            <p>工作时间：上午9:00-12:00,下午13:30-18:00</p>
+            <p>公司地址：深圳市南山区南山智园A4栋09楼</p>
+            <span class="beian">© Copyright 2015-2020 深圳市健康互动科技有限公司<a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></span>
+        </div>
+        <div class="useBox">
+            <div class="free" onclick="window.location.href='/mobile/regist';">免费使用</div>
+        </div>
+    </div>
+
+
+        <script src="/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
+        <script type="text/javascript">
+            (function(doc, win) {
+                var docEl = doc.documentElement,
+                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+                    recalc = function() {
+                        var clientWidth = docEl.clientWidth;
+                        if (!clientWidth) return;
+                    // 设置设计稿的宽度clientWidth为750
+                        if (clientWidth >= 750) {
+                            docEl.style.fontSize = '75px';
+                        } else {
+                            // 设置设计稿的宽度clientWidth为750
+                            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
+                        };
+                    };
+                if (!doc.addEventListener) return;
+                win.addEventListener(resizeEvt, recalc, false);
+                doc.addEventListener('DOMContentLoaded', recalc, false);
+            })(document, window);
+            $(".expand").click(function(){
+                $(".outerSlider").slideToggle();
+            });
+
+
+            // $('#bootstrap-touch-slider').bsTouchSlider();
+            $(".tabOne").click(function(){
+                var i = $(this).index();
+                $(this).addClass('tabActive').siblings().removeClass('tabActive');
+                $('.aboutMain .tab-item').eq(i).addClass('show1').siblings().removeClass('show1');
+            })
+        </script>
+</body>
+
+</html>
+

views/mobile_site/index.html

@@ -3,13 +3,16 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="keywords" content="酷医,酷医云,酷医聚客,病人关系管理,微信管理平台,肾病科宣,慢病管理云平台,SCRM,SPRM,血透管理,科室品牌推广">
+    <meta name="keywords" content="酷医,酷医云,数字化,血透软件,血透管理系统,血液透析系统,血液净化系统,肾内科信息化软件,血透,透析,血液透析,透析中心,透析耗材,智能透析,慢病管理,营销管理,医护培训,SCRM,信息化管理软件">
     <meta name="description"
-        content="酷医云，是专为肾科和血透中心研发的免费血透管理平台，覆盖诊前、诊中、诊后全流程管理；为血透中心提供覆盖智能营销管理、血透管理、慢病管理、医患沟通、进销存管理以及商城管理等全流程一体化的管理平台。全国数百家血透中心信赖的选择。">
-    <title>酷医云-血透管理软件</title>
+        content="酷医云，全国领先的透析中心数字化平台，满足患者管理、透析管理、质控管理、慢病管理、运营管理、经营管理等各种协作需求。在全国覆盖25个省份，拥有超千家透析中心用户，开始免费使用吧。">
+    <title>酷医云-透析中心数字化平台</title>
     <link rel="stylesheet" href="/static/css/mobile.css?v=1.0.0">
+    <link rel="stylesheet" href="/static/css/mobileIndex.css?v=1.0.0">
+    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.8/css/swiper.css" rel="stylesheet">
     <script>
         var _hmt = _hmt || [];
         (function() {
@@ -22,142 +25,386 @@
 </head>
 
 <body>
-    <header>
+    <header class="head">
         <div class="logo">
-            <img src="/static/images/mobile_site/logo.png" alt="">
+            <img onclick="window.location.href='/';" src="../../static/images/img/logo2.png" alt="">
         </div>
+        <div class="expand">
+           <div></div>
+           <div></div>
+           <div></div>
+        </div>
+        
     </header>
-    <div class="main-container">
-        <div class="baner-box">
-            <img src="/static/images/mobile_site/banner.jpg" alt="">
-            <div class="free-box">
-                <p>构建智慧肾科/透析中心</p>
-            </div>
-        </div>
-        <!-- 血透 -->
-        <div class="custom-title">
-            <span class="name">血透管理</span>
-            <p class="txt">规范机构的血透流程 提升患者透析质量</p>
-        </div>
-        <div class="customer-card">
-            <div class="customer-card-image">
-                <img src="/static/images/mobile_site/xt.png" alt="">
-            </div>
-            <p class="text">基于血透临床标准应用流程研发，规范可控；平板操作，随时随地记录和监测患者病情；和圣卫士打通，实现医患互动、透析数据共享；多维度数据分析管理，轻松掌握和提升透析质量。</p>
-        </div>
-        <!-- 慢病 -->
-        <div class="custom-title">
-            <span class="name">慢病管理</span>
-            <p class="txt">提升机构的临床科研 控制患者病情进展</p>
-        </div>
-        <div class="customer-card">
-            <div class="customer-card-image">
-                <img src="/static/images/mobile_site/mb.png" alt="">
-            </div>
-            <p class="text">24小时实时动态采集监测数据；监测指标发现异常，智能提醒医生和患者；多维度大数据分析，助力医生优化治疗方案；一键连接患者，快速干预患者行为。</p>
-        </div>
-        <!-- scrm -->
-        <div class="custom-title">
-            <span class="name">SCRM</span>
-            <p class="txt">帮助机构获得患者流量 拉近机构和患者距离</p>
-        </div>
-        <div class="customer-card">
-            <div class="customer-card-image">
-                <img src="/static/images/mobile_site/scrm.png" alt="">
-            </div>
-            <p class="text">建立机构独一无二的品牌展示；向精准用户快速裂变传播信息；多渠道患者来源建立会员用户池；多维度数据分析提升客户转化率。</p>
-        </div>
-        <!-- 微商城 -->
-        <div class="custom-title">
-            <span class="name">微商城</span>
-            <p class="txt">帮助机构提升整体营收 为商家输出更多的商业价值</p>
-        </div>
-        <div class="customer-card">
-            <div class="customer-card-image">
-                <img src="/static/images/mobile_site/wsc.jpg" alt="">
-            </div>
-            <p class="text">实时数据监控，订单、物流、成交金额等实时数据；下单客户自动进入机构患者用户库；支持从酷医云分销产品，零成本赚钱；帮助机构快速卖货，解决销售渠道问题。</p>
-        </div>
-        <!-- 合作伙伴 -->
-        <div class="custom-title clearfix">
-            <span class="name">合作伙伴</span>
-        </div>
-        <div class="hz clearfix">
-            <ul>
-                <li>
-                    <img src="/static/images/mobile_site/hz-1.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-2.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-3.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-4.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-5.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-6.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-7.png" alt="">
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/hz-8.png" alt="">
-                </li>
-            </ul>
-        </div>
-        <div class="clearfix"></div>
-        <!-- 酷医云 -->
-        <div class="custom-title clearfix">
-            <span class="name">酷医云</span>
-            <p class="txt">助力肾科/透析中心医疗建设 提升整体服务水平</p>
-        </div>
-        <div class="hz service clearfix">
-            <ul>
-                <li>
-                    <img src="/static/images/mobile_site/service-1.jpg" alt="">
-                    <p>品牌提升</p>
-                    <p>精准营销</p>
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/service-2.jpg" alt="">
-                    <p>就医体验</p>
-                    <p>网络医疗</p>
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/service-3.jpg" alt="">
-                    <p>透析质量</p>
-                    <p>院外服务</p>
-                </li>
-                <li>
-                    <img src="/static/images/mobile_site/service-4.jpg" alt="">
-                    <p>医护培训</p>
-                    <p>快捷采购</p>
-                </li>
-            </ul>
-        </div>
-        <div class="clearfix"></div>
-        <!-- 版权   -->
-        <div class="copyright">
-            <h2>深圳市健康互动科技有限公司</h2>
-            <p>咨询热线：0755-86526342</p>
-            <p>服务邮箱：service@shengws.com</p>
-            <p>工作时间：上午9:00-12:00,下午13:30-18:00</p>
-            <p>公司地址：深圳市南山区学苑大道1001号南山智园A4栋9楼918</p>
-        </div>
-        <p>© 2016-2019 kuyicloud.com 酷医云 版权所有 <a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></p>
-        <!-- 免费使用 -->
-        <div class="freeBtn">
-            <button class="button" onclick="window.location.href='/mobile/regist';">免费使用</button>
+    <div class="outerSlider show">
+        <div class="menuBox">
+            <div class="menuNav">
+                <div class="logo">
+                    <img src="../../static/images/img/logo2.png" alt="">
+                </div>
+                <div class="expand">
+                   <div></div>
+                   <div></div>
+                   <div></div>
+                </div>
+            </div>
+            <div class="scrollList">
+                <a href="/"><p>首页</p></a>
+                <!-- <p>产品与服务</p>
+                <p>酷医商城</p> -->
+                <a href="/about"><p>关于酷医</p></a>
+            </div>
+        </div>
+    </div>
+    <div class="main-container" style="margin-bottom:0">
+        <div class="banner">
+            <!-- <img src="/static/images/mobile_site/banner.jpg" alt=""> -->
+            <div class="bannerBox">
+                <p class="bannerTitle">数字化，让透析中心降本增效</p>
+                <p class="bannerTips">每个透析中心，都需要酷医的产品与服务，</p>
+                <p class="bannerTips">无论是透析管理、品牌建设、耗材采购、医护培训或者经营管理，</p>
+                <p class="bannerTips">我们非常乐意帮助您打造卓越的透析服务。</p>
+            </div>
+            <p class="freeuse" onclick="window.location.href='/mobile/regist';">免费使用</p>
+        </div>
+        <!-- <div style="position: absolute;left: 50%;top: 58%;transform: translate(-50%,-50%);"> -->
+            <div class="special">
+                <div class="specialOne">
+                    <img class="specialImg" src="../../static/images/img/p5.png" alt="">
+                    <div>
+                        <p class="specialTip1">超千家</p>
+                        <p class="specialTip2">透析中心覆盖</p>
+                    </div>
+                </div>
+                <div class="specialOne">
+                    <img class="specialImg" src="../../static/images/img/p6.png" alt="">
+                    <div>
+                        <p class="specialTip1">数千位</p>
+                        <p class="specialTip2">透析医护覆盖</p>
+                    </div>
+                </div>
+                <div class="specialOne">
+                    <img class="specialImg" src="../../static/images/img/p7.png" alt="">
+                    <div>
+                        <p class="specialTip1">千万次透析/年</p>
+                        <p class="specialTip2">酷医大数据</p>
+                    </div>
+                </div>
+                <div class="specialOne">
+                    <img class="specialImg" src="../../static/images/img/p8.png" alt="">
+                    <div>
+                        <p class="specialTip1">25个省市区</p>
+                        <p class="specialTip2">酷医SaaS覆盖</p>
+                    </div>
+                </div>
+            </div>
+        <!-- </div> -->
+            <div class="introduceTitle">
+                <p>透析中心</p>
+                <p>一站式服务平台</p>
+            </div>
+            <div class="introduceBox">
+                <div class="introduceOne">
+                    <img class="introduceImg" src="../../static/images/img/img5.png" alt="">
+                    <div>
+                        <p style="font-size: 0.12rem">透析中心</p>
+                        <p style="font-size: 0.16rem">数字化服务 </p>
+                    </div>
+                </div>
+                <div class="introduceOne">
+                    <img class="introduceImg" src="../../static/images/img/img6.png" alt="">
+                    <div>
+                        <p style="font-size: 0.12rem">透析中心</p>
+                        <p style="font-size: 0.16rem">供应链服务</p>
+                    </div>
+                </div>
+                <div class="introduceOne" style="margin-right: 0;">
+                    <img class="introduceImg" src="../../static/images/img/img7.png" alt="">
+                    <div>
+                        <p style="font-size: 0.12rem">透析中心</p>
+                        <p style="font-size: 0.16rem">增值服务</p>
+                    </div>
+                </div>
+            </div>
+        
+    </div>
+    <div class="common" style="padding-bottom: 0.2rem;">
+        <div class="commonTitle">
+            <p>新透析</p>
+            <p>透析中心的互联网解决方案</p>
+        </div>
+        <div class="commonMain">
+            <img style="width: 100%;" src="../../static/images/img/img8.png" alt="">
+            <p class="commonTit1">轻松患者引流</p>
+            <p class="commonTit2">拓宽线上线下渠道，建设品牌，轻松解决患者流量难题</p>
+            <p class="commonTit1">高效透析管理</p>
+            <p class="commonTit2">智能病历、排班、签到、透析记录，快速提升工作效率</p>
+            <p class="commonTit1">随时随地工作</p>
+            <p class="commonTit2">手机、平板、电脑多终端使用，医生随时开医嘱远程看病情</p>
+            <p class="commonTit1">透析质量可控</p>
+            <p class="commonTit2">患者病历、医嘱、记录、检验、院外数据汇总分析，质控有保障</p>
+        </div>
+    </div>
+    <div class="common" style="background: #F8FBFF;padding-bottom: 0.2rem;">
+        <div class="commonTitle">
+            <p>透析管理</p>
+            <p>让您一小时实现无纸化透析服务</p>
+        </div>
+        <div class="commonMain">
+            <img style="width: 100%;" src="../../static/images/img/img9.png" alt="">
+            <p class="commonTit1">透析过程记录</p>
+            <p class="commonTit2">手机、平板、电脑轻松完成医嘱和透析记录，永久保存</p>
+            <p class="commonTit1">智能数据采集</p>
+            <p class="commonTit2">智能采集透析称/血压计/透析机等数据，提升效率减少错误</p>
+            <p class="commonTit1">便捷管理工具</p>
+            <p class="commonTit2">库存、院感和设备的统一管理，智能预警，管理看得见</p>
+            <p class="commonTit1">精准数据分析</p>
+            <p class="commonTit2">随时掌控患者透析质量，多维分析经营状态</p>
+        </div>
+    </div>
+    <div class="common" style="padding-bottom: 0.2rem;">
+        <div class="commonTitle">
+            <p>品牌经营</p>
+            <p>让您一分钟实现自己的移动门户</p>
+        </div>
+        <div class="commonMain">
+            <img style="width: 100%;" src="../../static/images/img/img10.png" alt="">
+            <p class="commonTit1">展示透析中心</p>
+            <p class="commonTit2">可配置的移动门户，多种内容展示，提升品牌形象</p>
+            <p class="commonTit1">经营粉丝流量</p>
+            <p class="commonTit2">绑定公众号，实现粉丝和会员的双重流量增长</p>
+            <p class="commonTit1">人气营销工具</p>
+            <p class="commonTit2">品牌传播快速获客工具，持续提升透析服务患者客群</p>
+            <p class="commonTit1">搭建患教中心</p>
+            <p class="commonTit2">清晰的分类，强大的发布功能，助力实现专属患教中心</p>
+        </div>
+    </div>
+    <div class="common" style="background: #F8FBFF;padding-bottom: 0.2rem;">
+        <div class="commonTitle">
+            <p>零售商城</p>
+            <p>让您零成本拥有自己的网络商城</p>
         </div>
+        <div class="commonMain">
+            <img style="width: 100%;" src="../../static/images/img/img11.png" alt="">
+            <p class="commonTit1">数百款产品</p>
+            <p class="commonTit2">和国内外品牌厂商合作，共建优质肾病患者商品库</p>
+            <p class="commonTit1">零成本开店</p>
+            <p class="commonTit2">无需压款、压货，酷医统一提供商品、物流和售后</p>
+            <p class="commonTit1">增强患者黏性</p>
+            <p class="commonTit2">商品销售是透析之外的增值服务，可增加服务黏性</p>
+            <p class="commonTit1">分销流水看得见</p>
+            <p class="commonTit2">交易安全账单透明，提现便捷到账迅速</p>
+        </div>
+    </div>
+    <div class="commonTitle">
+        <p>多种终端支持</p>
+        <p>工作随时随地</p>
+    </div>
+
+    
+
+    
+    <div class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+              <div style="width: 100%; height: 5rem;display: flex;justify-content: space-between;margin-top: 0.3rem;">
+                <div class="downloadOne">
+                    <img src="../../static/images/img/12.png" alt="">
+                    <span>PC工作台</span>
+                    <p>屏幕超大，录入方便</p>
+                    <img src="../../static/images/img/17.png" alt="">
+                </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div style="width: 100%; height: 5rem;display: flex;justify-content: space-between;margin-top: 0.3rem;">
+                <div class="downloadOne">
+                    <img src="../../static/images/img/13.png" alt="">
+                    <span>手机APP</span>
+                    <p>即开即用，在哪都行</p>
+                    <img src="../../static/images/img/16.png" alt="">
+                </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div style="width: 100%; height: 5rem;display: flex;justify-content: space-between;margin-top: 0.3rem;">
+                <div class="downloadOne">
+                    <img src="../../static/images/img/14.png" alt="">
+                    <span>平板APP</span>
+                    <p>大小合适，移动护理</p>
+                    <img src="../../static/images/img/19.png" alt="">
+                </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div style="width: 100%; height: 5rem;display: flex;justify-content: space-between;margin-top: 0.3rem;">
+                <div class="downloadOne">
+                    <img src="../../static/images/img/15.png" alt="">
+                    <span>手机微信</span>
+                    <p>无需安装，关注即用</p>
+                    <img src="../../static/images/img/18.png" alt="">
+                </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+    </div>
+    
+    <div class="forBox">
+        <div class="forOne">
+            <img src="../../static/images/img/20.png" alt="">
+            <span>技术领先</span>
+            <p>专业团队倾力研发</p>
+        </div>
+        <div class="forOne">
+            <img src="../../static/images/img/21.png" alt="">
+            <span>系统稳定</span>
+            <p>7x24小时实时护航</p>
+        </div>
+        <div class="forOne">
+            <img src="../../static/images/img/22.png" alt="">
+            <span>服务专业</span>
+            <p>在线客服随时响应</p>
+        </div>
+        <div class="forOne">
+            <img src="../../static/images/img/23.png" alt="">
+            <span>口碑优质</span>
+            <p>知名机构信赖之选</p>
+        </div>
+    </div>
+    <div class="backgroundBlue">
+        <div class="blueTitle">
+            <p>热情用心做服务</p>
+            <p>工匠精神做产品</p>
+        </div>
+        <div class="productBox1">
+            <div class="product">
+                <img src="../../static/images/img/p1.png" alt="">
+                <p>透析中心</p>
+            </div>
+            <div class="product">
+                <img src="../../static/images/img/p2.png" alt="">
+                <p>肾病医院</p>
+            </div>
+            <div class="product">
+                <img src="../../static/images/img/p3.png" alt="">
+                <p>肾病内科</p>
+            </div>
+            <div class="product">
+                <img src="../../static/images/img/p4.png" alt="">
+                <p>医生集团</p>
+            </div>
+        </div>
+    </div>
+    <div class="position1">
+        <p class="sort">(*以下排名不分先后顺序)</p>
+        <div class="sponsorBox">
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/iii1.png" alt="">
+                <p>费森尤斯</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i2.png" alt="">
+                <p>华润医疗</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i3.png" alt="">
+                <p>达康医疗</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/ii4.png" alt="">
+                <p>七喜医疗</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/ii5.png" alt="">
+                <p>同爱医疗</p>
+            </div>
+
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i6.png" alt="">
+                <p>圣迪康透析连锁</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i7.png" alt="">
+                <p>百伦透析连锁</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/i8.png" alt="">
+                <p>乐生透析连锁</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/ii9.png" alt="">
+                <p>百荣连锁透析</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i10.png" alt="">
+                <p>小豆连锁透析</p>
+            </div>
+
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i11.png" alt="">
+                <p>深圳华侨医院</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/i12.png" alt="">
+                <p>驻马店月亮湾医院</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/i13.png" alt="">
+                <p>湘潭捷雅肾病医院</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i14.png" alt="">
+                <p>张家口仁济医院</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i15.png" alt="">
+                <p>深圳龙岗二院</p>
+            </div>
+
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/i16.png" alt="">
+                <p>襄阳博爱医院</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/ii17.png" alt="">
+                <p>深圳宝兴医院</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i18.png" alt="">
+                <p>湘潭爱心美医院</p>
+            </div>
+            <div class="sponsorOne">
+                <img src="../../static/images/img/i19.png" alt="">
+                <p>南昌广济医院</p>
+            </div>
+            <div class="sponsorOne background">
+                <img src="../../static/images/img/i20.png" alt="">
+                <p>唐山朝阳医院</p>
+            </div>
+        </div>
+    </div>
+    <div class="slogan">
+        <p>酷医</p>
+        <p>帮助透析中心从优秀到卓越</p>
+    </div>
+    <div class="footer">
+        <p>咨询热线：0755-86526342</p>
+        <p>服务邮箱：service@shengws.com</p>
+        <p>客服手机：18682078150</p>
+        <p>客服微信：kuyicloud</p>
+        <p>工作时间：上午9:00-12:00,下午13:30-18:00</p>
+        <p>公司地址：深圳市南山区南山智园A4栋09楼</p>
+        <span class="beian">© Copyright 2015-2020 深圳市健康互动科技有限公司<a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></span>
+    </div>
+    <div class="useBox">
+        <div class="free" onclick="window.location.href='/mobile/regist';">免费使用</div>
     </div>
 
 </body>
-<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
+<script src="/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.8/js/swiper.min.js"></script>
 <script type="text/javascript">
     $(function () {
         $(window).scroll(function () {
@@ -170,5 +417,42 @@
         })
     })
 </script>
+<script type="text/javascript">
+    (function(doc, win) {
+        var docEl = doc.documentElement,
+            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+            recalc = function() {
+                var clientWidth = docEl.clientWidth;
+                if (!clientWidth) return;
+            // 设置设计稿的宽度clientWidth为750
+                if (clientWidth >= 750) {
+                    docEl.style.fontSize = '75px';
+                } else {
+                    // 设置设计稿的宽度clientWidth为750
+                    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
+                };
+            };
+        if (!doc.addEventListener) return;
+        win.addEventListener(resizeEvt, recalc, false);
+        doc.addEventListener('DOMContentLoaded', recalc, false);
+    })(document, window);
+    $(".expand").click(function(){
+        $(".outerSlider").slideToggle();
+    });
+
+
+    // 
+    var mySwiper = new Swiper('.swiper-container', {
+        loop: true, // 循环模式选项
+        autoplay : 5000,
+        autoplayDisableOnInteraction : false,
+        pagination : '.swiper-pagination',
+    })
+
+
+ 
+</script>
+
+</html>
+
 
-</html>

views/new_main/about.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta name="keywords" content="酷医,酷医云,酷医聚客,病人关系管理,微信管理平台,肾病科宣,慢病管理云平台,SCRM,SPRM,血透管理,科室品牌推广">
-    <meta name="description" content="酷医云，是专为肾科和血透中心研发的免费血透管理平台，覆盖诊前、诊中、诊后全流程管理；为血透中心提供覆盖智能营销管理、血透管理、慢病管理、医患沟通、进销存管理以及商城管理等全流程一体化的管理平台。全国数百家血透中心信赖的选择。">
+    <meta name="description" content="酷医云，全国领先的透析中心数字化平台，满足患者管理、透析管理、质控管理、慢病管理、运营管理、经营管理等各种协作需求。在全国覆盖25个省份，拥有超千家透析中心用户，开始免费使用吧。">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="/static/css/style.css?v=5.0.0" media="screen">
     <link rel="stylesheet" href="/static/css/index.css?v=4.0.1" media="screen">
     <link rel="stylesheet" href="/static/css/suspension.css">
+    <link rel="stylesheet" href="/static/css/newAbout.css?v=4.0.1" media="screen">
     <link href="/static/css/bootstrap.min.css?v=4.0.0" rel="stylesheet">
     <link href="/static/css/font-awesome.min.css?v=4.0.0" rel="stylesheet" media="all">
     <link href="/static/css/animate.min.css?v=4.0.0" rel="stylesheet" media="all">
@@ -31,183 +32,164 @@
 </head>
 
 <body>
-    <div class="phptpl-header">
-        <div class="header-container">
-            <a class="logo" href="/"></a>
-
-            <nav class="navbar navbar-default navbar-mobile bootsnav on">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
-                        <i class="fa fa-bars"></i>
-                    </button>
+    <div class="pageAbout">
+        <div class="header">
+            <div class="newNav">
+                <div style="display: flex;align-items: center;height: 100%;">
+                    <img class='logo' onclick="window.location.href='/';" src="../../static/images/img/logo2.png" alt="">
+                    <div class="navList">
+                        <a class="nav-link" href="/">首页</a>
+                        <!-- <a class="nav-link">产品与服务</a>
+                        <a class="nav-link">酷医商城</a> -->
+                        <a class="nav-link nav-link_active" href="/about">关于酷医</a>
+                    </div>
                 </div>
-                <div class="collapse navbar-collapse" id="navbar-menu">
-                    <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
-                        <li>
-                            <a href="/">首页</a>
-                        </li>
-                        <li>
-                            <a href="/xt">血透管理</a>
-                        </li>
-                        <li>
-                            <a href="/cdm">慢病管理</a>
-                        </li>
-                        <li>
-                            <a href="/scrm">SCRM</a>
-                        </li>
-                        <li>
-                            <a href="/mmall">微商城</a>
-                        </li>
-                        <li>
-                            <a href="/help">帮助中心</a>
-                        </li>
-                        <li>
-                            <a href="/about">关于我们</a>
-                        </li>
-                        <!-- <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务</a>
-                            <ul class="dropdown-menu animated fadeOutUp" style="display: none; opacity: 1;">
-                                <li><a href="http://sso.kuyicloud.com/scrm">SCRM</a></li>
-                                <li><a href="http://sso.kuyicloud.com/mmall">微商城</a></li>
-                                <li><a href="http://sso.kuyicloud.com/xt">血透管理</a></li>
-                                <li><a href="http://sso.kuyicloud.com/cdm">慢病管理</a></li>
-                            </ul>
-                        </li> -->
-                    </ul>
+                <div>
+                    <a class="loginBtn" href="http://sso.kuyicloud.com/login">登录</a>
+                    <a class="freeUse" href="http://sso.kuyicloud.com/register">免费使用</a>
                 </div>
-            </nav>
-
-            <ul class="nav-list">
-                <li class="last login_common_">
-                    <a class="btn-login" href="http://sso.kuyicloud.com/login">登录</a>
-                </li>
-                <li class="last register_common_">
-                    <a id="yz_register_" class="btn-register_" href="http://sso.kuyicloud.com/register">注册</a>
-                </li>
-            </ul>
+            </div>
         </div>
-    </div>
+        <div class="aboutBanner">
+            <div class="bannerTitle">酷医，透析生态互联网平台</div>
+            <p class="bannerTips" style="font-size:20px;">作为国内首个血液透析数字化服务商，酷医致力于用数字化赋能肾病患者、透析中心、透析厂商，践行“平台+生态”战略</p>
+            <p class="bannerTips" style="font-size:20px;">为中国“数字医疗”的落地提供强有力的支撑，并提升患者生命品质，成为一家有社会责任感的企业</p>
 
-    <!-- scrm -->
-    <div class="intro-main">
-        <div class="head-block about-bg">
-            <h1>关于酷医云</h1>
-            <p> ABOUT KUYICLOUD </p>
-        </div>
-        <div class="introduce-box">
-            <h2 class="name">酷医云是一家正在改变血透行业的科技公司</h2>
-            <p>我们致力于用技术赋能血透产业，打造值得信赖的血透医疗互联网平台，推动血透产业升级。</p>
-            <p>酷医云，是专为肾科和血透中心研发的免费血透管理平台，覆盖诊前、诊中、诊后全流程管理；为血透中心提供覆盖智能营销管理、血透管理、慢病管理、医患沟通、进销存管理以及商城管理等全流程一体化的管理平台。</p>
-            <p>平台目前有血液透析管理、患者关系管理、慢病管理系统、线上商城系统几大业务，我们致力于用一个平台实现院内院外全方位管理。</p>
-             <p>在酷医云，我们既着眼于现实，用产品和服务帮助每一所血透机构实现互联网医疗+的改革方案；也放眼于未来，通过数据挖掘、人工智能为血透医疗机构带来真正更深远的价值。</p>
+            <div class="tabs">
+                <div style="display: flex;align-items: center;height: 100%;width:320px;margin: 0 auto;">
+                    <div tabid="1" class="tabOne tabActive">关于我们</div>
+                    <div tabid="2" class="tabOne">联系我们</div>
+                </div>
+            </div>
         </div>
+        <div class="aboutMain">
+            <div class="tab-item show">
+                <p class="aboutTitle">关于我们</p>
+                <p>酷医，专注于血液透析行业互联网生态平台建设，以数字化服务为核心，致力于用移动互联网和数字技术链接1.2亿肾病患者、数百万透析患者、数万家透析中心、数千家厂商，为透析产业的患者、透析中心、医疗机构、厂商/服务商、公益组织实现信息共享、达成快捷交易、提高管理效率、提升服务水平、聚合资源、降低成本。</p>   
 
-    </div>
-    <!-- scrm end-->
+                <p>酷医旗下酷医云，是国内领先的透析中心管理SaaS应用软件及增值服务供应商，是国内首个完全免费的智能透析管理平台，5年透析中心服务经验，为透析中心提供覆盖透析管理、慢病管理、营销管理、零售商城、医护培训、供应链等透析中心全流程SaaS软件和服务解决方案，全国超千家透析中心信赖的选择。</p>
 
-    <!-- <div class="promote mb">
-        <p>帮助肾科/透析中心建立患者院内院外一体化的服务模式</p><a href="http://sso.kuyicloud.com/register">立即注册</a>    
-    </div> -->
-    <div class="copyright">
-        <div class="copyright-box">
-            <div class="copyright-right">
-                <dl>
-                    <dt>
-                        <img src="/static/images/wei-1.png" alt="">
-                    </dt>
-                    <dd>平板扫码下载应用</dd>
-                </dl>
-                <dl>
-                    <dt>
-                        <img src="/static/images/wei-2.png?v=3.0.0" alt="">
-                    </dt>
-                    <dd>手机微信扫码关注</dd>
-                </dl>
+                <p>我们既着眼于当下，用产品和服务帮助行业的上下游实现互联网+医疗的转型之路；也放眼于未来，通过云技术、数据挖掘和人工智能为透析行业带来创新的数字产品。</p>
+                <div class="photoBox">
+                    <div class="photo">
+                        <img src="../../static/images/img/29.png" alt="">
+                        <p style="font-size:24px;font-weight:bold;color: #333;">愿景</p>
+                        <p style="font-size: 16px;color: #666666;">持续帮助肾友提升生命品质</p>
+                    </div>
+                    <div class="photo">
+                        <img src="../../static/images/img/30.png" alt="">
+                        <p style="font-size:24px;font-weight:bold;color: #333;">使命</p>
+                        <p style="font-size: 16px;color: #666666;">创造好的诊疗环境为肾友有尊严的生命体验服务</p>
+                    </div>
+                    <div class="photo">
+                        <img src="../../static/images/img/31.png" alt="">
+                        <p style="font-size:24px;font-weight:bold;color: #333;">价值观</p>
+                        <p style="font-size: 16px;color: #666666;">客户第一、团队协作、创新、敬业、诚信</p>
+                    </div>
+                </div>
             </div>
-            <div class="copyright-left">
-                <h3>深圳市健康互动科技有限公司</h3>
-                <ul>
-                    <li>咨询热线：0755-86526342</li>
-                    <li>服务邮箱：service@shengws.com</li>
-                    <li>工作时间：上午9:00-12:00,下午13:30-18:00</li>
-                    <li>公司地址：深圳市南山区学苑大道1001号南山智园A4栋9楼918</li>
-                </ul>
+            <div class="tab-item">
+                <div class="contactUs">
+                    <div class="contactLeft">
+                        <div style="margin-bottom: 2vw;">
+                            <p style="margin: 0;">咨询热线：0755-86526342</p>
+                            <p style="margin: 0;">服务邮箱：service@shengws.com</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p style="margin: 0;">客服手机：18682078150</p>
+                            <p style="margin: 0;">客服微信：kuyicloud</p>
+                        </div>
+                        <div>
+                            <p style="margin: 0;">工作时间：上午9:00-12:00</p>
+                            <p style="margin: 0;"><span style="visibility: hidden;">工作时间：</span>下午13:30-18:00</p>
+                            <p style="margin: 0;">公司地址：深圳市南山区南山智园A4栋09楼</p>
+                        </div>
+                    </div>
+                    <div class="contactRight">
+                        <div class="rightOne">
+                            <img src="../../static/images/img/img13.png" alt="">
+                            <p>扫描下载酷医云APP</p>
+                        </div>
+                        <div class="rightOne">
+                            <img src="../../static/images/img/img13.png" alt="">
+                            <p>关注酷医云公众号</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="map">
+                    <img src="../../static/images/img/map.png" alt="">
+                </div>
             </div>
-            <div class="copyright-text">
-                <p>© 2016-2019 kuyicloud.com 酷医云 版权所有 <a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></p>
+        </div>
+        <div class="slogan">
+            <p>酷医，帮助透析中心从优秀到卓越</p>
+        </div>
+        <div class="footer">
+            <div class="footerBox">
+                <p class="point" style="visibility: hidden;">友情链接：</p>
+                <div class="contactBox">
+                    <div>
+                        <p>咨询热线：0755-86526342</p>
+                        <p>服务邮箱：service@shengws.com</p>
+                    </div>
+                    <div>
+                        <p>客服手机：18682078150</p>
+                        <p>客服微信：kuyicloud</p>
+                    </div>
+                    <div>
+                        <p>工作时间：上午9:00-12:00,下午13:30-18:00</p>
+                        <p>公司地址：深圳市南山区南山智园A4栋09楼</p>
+                    </div>
+                </div>
+                <p class="copyRight">© Copyright 2015-2020 深圳市健康互动科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></p>
             </div>
         </div>
-    </div>
 
-    <!-- 右侧悬浮菜单开始 -->
-    <div class="suspension">
-        <div class="suspension-box">
-            <a href="#" class="a a-service ">
-                <i class="i"></i>
-            </a>
-            <a href="javascript:;" class="a a-service-phone ">
-                <i class="i"></i>
-            </a>
-            <a href="javascript:;" class="a a-qrcode">
-                <i class="i"></i>
-            </a>
-            <a href="javascript:;" class="a a-top">
-                <i class="i"></i>
-            </a>
-            <!-- <div class="d d-service" style="display:none;">
-                <i class="arrow"></i>
-                <div class="inner-box">
-                    <div class="d-service-item clearfix">
-                        <a href="#" class="clearfix">
-                            <h3>咨询在线客服</h3>
-                        </a>
+        <div class="suspension">
+            <div class="suspension-box">
+                <img class="a a-service " src="../../static/images/img/33.png" alt="">
+                <img class="a a-service-phone" src="../../static/images/img/34.png" alt="">
+                <img class="a a-qrcode" src="../../static/images/img/32.png" alt="">
+                <!-- <a href="#" class="a a-service "><i class="i"></i></a>
+                <a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>
+                <a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
+                <a href="javascript:;" class="a a-top"><i class="i"></i></a> -->
+                <div class="d d-service" style="display:none;">
+                    <i class="arrow"></i>
+                    <div class="inner-box">
+                        <div class="d-service-item clearfix">
+                            <a href="http://p.qiao.baidu.com/cps/chat?siteId=13548640&userId=28119034&siteToken=7577c975fa7ae685efd61deb009d1b5b" class="clearfix">
+                                <h3>咨询在线客服</h3>
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div> -->
-            <div class="d d-service-phone">
-                <i class="arrow"></i>
-                <div class="inner-box" style="width:200px;">
-                    <div class="d-service-item clearfix">
-                        <span class="circle">
-                            <i class="i-tel"></i>
-                        </span>
-                        <div class="text">
-                            <p>服务热线</p>
-                            <p class=" number">0755-86526342</p>
+                <div class="d d-service-phone">
+                    <i class="arrow"></i>
+                    <div class="inner-box" style="width:200px;">
+                        <div class="d-service-item clearfix">
+                            <span class="circle"><i class="i-tel"></i></span>
+                            <div class="text">
+                                <p>服务热线</p>
+                                <p class=" number">0755-86526342</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="d d-qrcode">
-                <i class="arrow"></i>
-                <div class="inner-box">
-                    <div class="qrcode-img">
-                        <img src="/static/images/side_ewm.png" alt="">
+                <div class="d d-qrcode">
+                    <i class="arrow"></i>
+                    <div class="inner-box">
+                        <div class="qrcode-img"><img src="/static/images/side_ewm.png" alt=""></div>
+                        <p>微信服务号</p>
                     </div>
-                    <p>微信服务号</p>
-                </div>
-                <div class="inner-box">
-                    <div class="qrcode-img">
-                        <img src="/static/images/kefu.jpg" alt="">
-                        <p>微信客服号</p>
+                    <div class="inner-box">
+                        <div class="qrcode-img"><img src="/static/images/img/kefu.jpg" alt="">
+                        <p>微信客服号</p>					
                     </div>
                 </div>
             </div>
         </div>
-        <!-- 右侧悬浮菜单结束 -->
-        <!-- 底部悬浮内容 -->
-        <div class="wraper-1vdHN1Z2BV" id="wraper-1vdHN1Z2BV">
-            <div>
-                <div class="logo-pic">
-                    <img src="/static/images/fulogo.png" alt="">
-                </div>
-                <a href="http://sso.kuyicloud.com/register" class="btn-1hyk61Z2BV">
-                    <button type="button" class="ivu-btn ivu-btn-primary">
-                        <span>免费使用</span>
-                    </button>
-                </a>
-            </div>
-        </div>
+    </div>
 
         <script src="/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
         <script src="/static/js/bootstrap.min.js"></script>
@@ -217,7 +199,13 @@
         <script src="/static/js/suspension.js"></script>
         <script type="text/javascript">
             $('#bootstrap-touch-slider').bsTouchSlider();
+            $(".tabOne").click(function(){
+                var i = $(this).index();
+                $(this).addClass('tabActive').siblings().removeClass('tabActive');
+                $('.aboutMain .tab-item').eq(i).addClass('show').siblings().removeClass('show');
+            })
         </script>
 </body>
 
-</html>
+</html>
+

views/new_main/index.html

@@ -2,15 +2,18 @@
 <html lang="zh">
 
 <head>
-    <meta name="keywords" content="酷医,酷医云,酷医聚客,病人关系管理,微信管理平台,肾病科宣,慢病管理云平台,SCRM,SPRM,血透管理,科室品牌推广">
-    <meta name="description" content="酷医云，是专为肾科和血透中心研发的免费血透管理平台，覆盖诊前、诊中、诊后全流程管理；为血透中心提供覆盖智能营销管理、血透管理、慢病管理、医患沟通、进销存管理以及商城管理等全流程一体化的管理平台。全国数百家血透中心信赖的选择。">
+    <meta name="keywords" content="酷医,酷医云,数字化,血透软件,血透管理系统,血液透析系统,血液净化系统,肾内科信息化软件,血透,透析,血液透析,透析中心,透析耗材,智能透析,慢病管理,营销管理,医护培训,SCRM,信息化管理软件">
+    <meta name="description" content="酷医云，全国领先的透析中心数字化平台，满足患者管理、透析管理、质控管理、慢病管理、运营管理、经营管理等各种协作需求。在全国覆盖25个省份，拥有超千家透析中心用户，开始免费使用吧。">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>酷医云-肾科管理软件-血透管理软件</title>
+    <title>酷医云-透析中心数字化平台</title>
     <link rel="stylesheet" href="/static/css/style.css?v=5.0.0" media="screen">
     <link rel="stylesheet" href="/static/css/index.css?v=4.0.3" media="screen">
+    
     <link rel="stylesheet" href="/static/css/suspension.css" >
+    <link rel="stylesheet" href="/static/css/newIndex.css?v=4.0.3" media="screen">
+
     <link href="/static/css/bootstrap.min.css?v=4.0.0" rel="stylesheet">
     <link href="/static/css/font-awesome.min.css?v=4.0.0" rel="stylesheet" media="all">
     <link href="/static/css/animate.min.css?v=4.0.0" rel="stylesheet" media="all">
@@ -18,6 +21,7 @@
     <link href="/static/css/bootstrap-touch-slider.css?v=4.0.0" rel="stylesheet" media="all">
     <link href="/static/css/bootsnav.css?v=4.0.0" rel="stylesheet" media="all">
     <link href="/static/css/zzsc-demo.css?v=4.0.0" rel="stylesheet" media="all">
+    
     <!-- 百度统计 -->
     <script>
         var _hmt = _hmt || [];
@@ -32,338 +36,438 @@
 </head>
 
 <body>
-    <div class="phptpl-header">
-        <div class="header-container">
-            <a class="logo" href="/"></a>
-            <nav class="navbar navbar-default navbar-mobile bootsnav on">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
-                        <i class="fa fa-bars"></i>
-                    </button>
+    <div class="pageIndex">
+        <div class="header">
+            <div class="newNav">
+                <div style="display: flex;align-items: center;height: 100%;">
+                    <img class='logo' onclick="window.location.href='/';" src="../../static/images/img/logo2.png" alt="">
+                    <div class="navList">
+                        <a class="nav-link nav-link_active">首页</a>
+                        <!-- <a class="nav-link">产品与服务</a>
+                        <a class="nav-link">酷医商城</a> -->
+                        <a class="nav-link" href="/about">关于酷医</a>
+                    </div>
                 </div>
-                <div class="collapse navbar-collapse" id="navbar-menu">
-                    <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
-                        <li class="active"><a href="/">首页</a></li>                        
-                        <li><a href="/xt">血透管理</a></li>
-                        <li><a href="/cdm">慢病管理</a></li>
-                        <li><a href="/scrm">SCRM</a></li>
-                        <li><a href="/mmall">微商城</a></li>
-                        <li>
-                            <a href="/help">帮助中心</a>
-                        </li>
-                        <li><a href="/about">关于我们</a></li>
-                       
-                    </ul>
+                <div>
+                    <a class="loginBtn" href="http://sso.kuyicloud.com/login">登录</a>
+                    <a class="freeUse" href="http://sso.kuyicloud.com/register">免费使用</a>
                 </div>
-            </nav>
-
-            <ul class="nav-list">
-                <li class="last login_common_"><a class="btn-login"
-                        href="http://sso.kuyicloud.com/login">登录</a></li>
-                <li class="last register_common_"><a id="yz_register_" class="btn-register_"
-                        href="http://sso.kuyicloud.com/register">注册</a></li>
-            </ul>
+            </div>
         </div>
-    </div>
-
-    <!-- banner -->
-    <div id="bootstrap-touch-slider" class="carousel bs-slider fade  control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" >
-
-			<!-- Indicators -->
-			<ol class="carousel-indicators">
-				<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
-				<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
-			</ol>
-
-			<!-- Wrapper For Slides -->
-			<div class="carousel-inner" role="listbox">
-				<!-- Second Slide -->
-				<div class="item active">
-
-					<!-- Slide Background -->
-					<img src="/static/images/slide1.png" alt="Bootstrap Touch Slider"  class="slide-image"/>
-					<div class="bs-slider-overlay"></div>
-					<!-- Slide Text Layer -->
-					<div class="slide-text slide_style_center">
-						<h1 data-animation="animated flipInX">构建智慧肾科/透析中心</h1>
-						<p data-animation="animated fadeInDown">或致电0755-86526342</p>
-						<a href="http://sso.kuyicloud.com/register" class="btn btn-primary"  data-animation="animated lightSpeedIn">免费使用</a>
-					</div>
-				</div>
-				<!-- End of Slide -->
-
-				<!-- Third Slide -->
-				<div class="item">
-
-					<!-- Slide Background -->
-					<img src="/static/images/slide2.jpg" alt="Bootstrap Touch Slider"  class="slide-image"/>
-					<div class="bs-slider-overlay"></div>
-					<!-- Slide Text Layer -->
-					<div class="slide-text slide_style_center">
-						<h1 data-animation="animated zoomInLeft">一个软件实现院内院外全方位管理</h1>
-						<p data-animation="animated fadeInRight">或致电0755-86526342</p>
-						<a href="http://sso.kuyicloud.com/register" class="btn btn-primary" data-animation="animated fadeInRight">免费使用</a>
-					</div>
-				</div>
-				<!-- End of Slide -->
-			</div><!-- End of Wrapper For Slides -->
-			<!-- Left Control -->
-			<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
-				<span class="fa fa-angle-left" aria-hidden="true"></span>
-				<span class="sr-only">Previous</span>
-			</a>
-			<!-- Right Control -->
-			<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
-				<span class="fa fa-angle-right" aria-hidden="true"></span>
-				<span class="sr-only">Next</span>
-			</a>
-    </div> 
-    <!-- banner end -->
-    <div class="main-container" style="height: 620px" yz_ctn_module="retail">
-        <div class="wrapper wcard-container">
-            <h3><span style="color:#409eff;">血透管理</span> 规范机构的血透流程 提升患者透析质量</h3>
-            <div class="wcard-content ">
-                <div class="wcard-left">
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">基于血透临床标准应用流程研发，规范可控</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">平板操作，随时随地记录和监测患者病情</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">和圣卫士打通，实现医患互动、透析数据共享</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">多维度数据分析管理，轻松掌握和提升透析质量</p>
-                    </div>
-                    <div class="wcard-section"><a href="http://sso.kuyicloud.com/register"
-                            class="button blue" style="margin-right: 15px">免费使用</a> <a href="/xt"
-                            class="button blue-outline" style="margin-left: 15px">功能介绍</a></div>
+        <div class="banner">
+            <!-- <div class="bannerBox">
+                <img class="bannerImg" src="../../static/images/img/banner.png" alt="">
+            </div> -->
+            <div class="bannerMain">
+                <div class="bannerTip">数字化，让透析中心降本增效</div>
+                <div class="bannerTxt">
+                    <p>每个透析中心，都需要酷医的产品与服务，无论是透析管理、品牌建设、耗材采购、</p>
+                    <p>医护培训或者经营管理，我们非常乐意帮助您打造卓越的透析服务</p>
                 </div>
-                <div class="wcard-right">
-                    <img src="/static/images/index_1.jpg" alt="" />
+                <div class="digital">
+                    <div style="margin:0 auto;display: flex;width: 66vw;justify-content: space-between;">
+                        <div class="digital-one">
+                            <img class="digitalImg" src="../../static/images/img/p5.png" alt="">
+                            <div style="margin-bottom: 26px;">
+                                <p style="font-size: 20px;color:#333;font-weight: bold;">超千家</p>
+                                <p style="font-size: 16px;color:#666;">透析中心覆盖</p>
+                            </div>
+                        </div>
+                        <div class="digital-two">
+                            <img class="digitalImg" src="../../static/images/img/p6.png" alt="">
+                            <div style="margin-bottom: 26px;">
+                                <p style="font-size: 20px;color:#333;font-weight: bold;">数千位</p>
+                                <p style="font-size: 16px;color:#666;">透析医护覆盖</p>
+                            </div>
+                        </div>
+                        <div class="digital-one">
+                            <img class="digitalImg" src="../../static/images/img/p7.png" alt="">
+                            <div style="margin-bottom: 26px;">
+                                <p style="font-size: 20px;color:#333;font-weight: bold;">千万次透析/年</p>
+                                <p style="font-size: 16px;color:#666;">酷医大数据</p>
+                            </div>
+                        </div>
+                        <div class="digital-two">
+                            <img class="digitalImg" src="../../static/images/img/p8.png" alt="">
+                            <div style="margin-bottom: 26px;">
+                                <p style="font-size: 20px;color:#333;font-weight: bold;">25个省市区</p>
+                                <p style="font-size: 16px;color:#666;">酷医SaaS覆盖</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="main-container" style="height: 620px" yz_ctn_module="retail">
-        <div class="wrapper wcard-container">
-            <h3><span style="color:#409eff;">慢病管理</span> 提升机构的临床科研 控制患者病情进展</h3>
-            <div class="wcard-content wcard-reverse">
-                <div class="wcard-left">
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">24小时实时动态采集监测数据</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">监测指标发现异常，智能提醒医生和患者</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">多维度大数据分析，助力医生优化治疗方案</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">一键连接患者，快速干预患者行为</p>
-                    </div>
-                    <div class="wcard-section"><a href="http://sso.kuyicloud.com/register"
-                            class="button blue" style="margin-right: 15px">免费使用</a> <a href="/cdm"
-                            class="button blue-outline" style="margin-left: 15px">功能介绍</a></div>
-                </div>
-                <div class="wcard-right">
-                    <img src="/static/images/index_2.jpg" alt="" />
+        <div class="introduce">
+            <p class="introduceTitle">透析中心一站式服务平台</p>
+            <div class="introduceBox">
+                <div class="introduceMain">
+                    <div class="introduceOne">
+                        <img class="introduceImg" src="../../static/images/img/img5.png" alt="">
+                        <div>
+                            <p style="font-size: 18px;">透析中心</p>
+                            <p style="font-size: 24px;">数字化服务 </p>
+                        </div>
+                    </div>
+                    <div class="introduceOne">
+                        <img class="introduceImg" src="../../static/images/img/img6.png" alt="">
+                        <div>
+                            <p style="font-size: 18px;">透析中心</p>
+                            <p style="font-size: 24px;">供应链服务</p>
+                        </div>
+                    </div>
+                    <div class="introduceOne" style="margin-right: 0;">
+                        <img class="introduceImg" src="../../static/images/img/img7.png" alt="">
+                        <div>
+                            <p style="font-size: 18px;">透析中心</p>
+                            <p style="font-size: 24px;">增值服务</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="main-container" style="height: 620px" yz_ctn_module="retail">
-        <div class="wrapper wcard-container">
-            <h3><span style="color:#409eff;">SCRM</span> 帮助机构获得患者流量 拉近机构和患者距离</h3>
-            <div class="wcard-content ">
-                <div class="wcard-left">
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">建立机构独一无二的品牌展示</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">向精准用户快速裂变传播信息</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">多渠道患者来源建立会员用户池</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">多维度数据分析提升客户转化率</p>
-                    </div>
-                    <div class="wcard-section"><a href="http://sso.kuyicloud.com/register"
-                            class="button blue" style="margin-right: 15px">免费使用</a> <a
-                            href="/scrm" class="button blue-outline"
-                            style="margin-left: 15px">功能介绍</a></div>
+        <div class="main">
+            <div class="programme">
+                <p class="programmeTitle">新透析·透析中心的互联网解决方案</p>
+                <div style="display: flex;">
+                    <div>
+                        <img class="mainImg" src="../../static/images/img/8.png" alt="">
+                    </div>
+                    <div id="showDiv1" class="programmeDescribe animated" style="margin-left: 4vw;">
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">轻松患者引流</p>
+                            <p class="describeTip2">拓宽线上线下渠道，建设品牌，轻松解决患者流量难题</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">高效透析管理</p>
+                            <p class="describeTip2">智能病历、排班、签到、透析记录，快速提升工作效率</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">随时随地工作</p>
+                            <p class="describeTip2">手机、平板、电脑多终端使用，医生随时开医嘱远程看病情</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">透析质量可控</p>
+                            <p class="describeTip2">患者病历、医嘱、记录、检验、院外数据汇总分析，质控有保障</p>
+                        </div>
+                        <a class="free" href="http://sso.kuyicloud.com/register">免费使用</a>
+                    </div>
                 </div>
-                <div class="wcard-right">
-                    <img src="/static/images/index_3.jpg" alt="">
+            </div>
+            <div class="programme" style="background: #F8FBFF;">
+                <p class="programmeTitle">透析管理·让您一小时实现无纸化透析服务</p>
+                <div style="display: flex;">
+                    <div id='showDiv2' class="programmeDescribe animated" style="padding-left: 60px;">
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">透析过程记录</p>
+                            <p class="describeTip2">手机、平板、电脑轻松完成医嘱和透析记录，永久保存</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">智能数据采集</p>
+                            <p class="describeTip2">智能采集透析称/血压计/透析机等数据，提升效率减少错误</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">便捷管理工具</p>
+                            <p class="describeTip2">库存、院感和设备的统一管理，智能预警，管理看得见</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">精准数据分析</p>
+                            <p class="describeTip2">随时掌控患者透析质量，多维分析经营状态</p>
+                        </div>
+                        <a class="free" href="http://sso.kuyicloud.com/register">免费使用</a>
+                    </div>
+                    <div>
+                        <img style="margin-right: 2vw;" class="mainImg" src="../../static/images/img/img30.png" alt="">
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
-
-    <div class="main-container" style="height: 690px" yz_ctn_module="wsc" onclick="">
-        <div class="wrapper wcard-container">
-            <h3><span style="color:#409eff;">微商城</span> 帮助机构提升整体营收 为商家输出更多的商业价值</h3>
-            <div class="wcard-content wcard-reverse">
-                <div class="wcard-left ">
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">实时数据监控，订单、物流、成交金额等实时数据</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">下单客户自动进入机构患者用户库</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">支持从酷医云分销产品，零成本赚钱</p>
-                    </div>
-                    <div class="wcard-section">
-                        <p class="wcard-sectitle">帮助机构快速卖货，解决销售渠道问题</p>
-                    </div>
-                    <div class="wcard-section"><a href="http://sso.kuyicloud.com/register" class="button blue"
-                            style="margin-right: 15px">免费使用</a> <a href="/mmall"
-                            class="button blue-outline" style="margin-left: 15px">功能介绍</a></div>
+            <div class="programme">
+                <p class="programmeTitle">品牌经营·让您一分钟实现自己的移动门户</p>
+                <div style="display: flex;">
+                    <div>
+                        <img class="mainImg" src="../../static/images/img/10.png" alt="">
+                    </div>
+                    <div id='showDiv3' class="programmeDescribe animated" style="margin-left: 4vw;">
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">展示透析中心</p>
+                            <p class="describeTip2">可配置的移动门户，多种内容展示，提升品牌形象</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">经营粉丝流量</p>
+                            <p class="describeTip2">绑定公众号，实现粉丝和会员的双重流量增长</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">人气营销工具</p>
+                            <p class="describeTip2">品牌传播快速获客工具，持续提升透析服务患者客群</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">搭建患教中心</p>
+                            <p class="describeTip2">清晰的分类，强大的发布功能，助力实现专属患教中心</p>
+                        </div>
+                        <a class="free" href="http://sso.kuyicloud.com/register">免费使用</a>
+                    </div>
                 </div>
-                <div class="wcard-right">
-                    <img src="/static/images/index_4.jpg" alt="">
+            </div>
+            <div class="programme" style="background: #F8FBFF;">
+                <p class="programmeTitle">零售商城·让您零成本拥有自己的网络商城</p>
+                <div style="display: flex;">
+                    <div id='showDiv4' class="programmeDescribe animated" style="padding-left: 60px;">
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">数百款产品</p>
+                            <p class="describeTip2">和国内外品牌厂商合作，共建优质肾病患者商品库</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">零成本开店</p>
+                            <p class="describeTip2">无需压款、压货，酷医统一提供商品、物流和售后</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">增强患者黏性</p>
+                            <p class="describeTip2">商品销售是透析之外的增值服务，可增加服务黏性</p>
+                        </div>
+                        <div style="margin-bottom: 2vw;">
+                            <p class="describeTip1">分销流水看得见</p>
+                            <p class="describeTip2">交易安全账单透明，提现便捷到账迅速</p>
+                        </div>
+                        <a class="free" href="http://sso.kuyicloud.com/register">免费使用</a>
+                    </div>
+                    <div>
+                        <img style="margin-right: 2vw;" class="mainImg" src="../../static/images/img/11.png" alt="">
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="use_yz" yz_ctn_module="example">
-        <h2 class="section-title">合作伙伴</h2>
-        <div class="use_yz-container">
-            <div class="case-container">
-                <ul>
-                    <li><img src="/static/images/hz-1.jpg" alt=""><p> 费森尤斯</p></li>
-                    <li><img src="/static/images/hz-2.jpg" alt=""><p>百伦透析连锁</p></li>
-                    <li><img src="/static/images/hz-3.jpg" alt=""><p>圣迪康透析连锁</p></li>
-                </ul>
-                <ul>
-                    <li><img src="/static/images/hz-4.jpg" alt=""><p>乐生透析连锁</p></li>
-                    <li><img src="/static/images/hz-5.jpg" alt=""><p>肾友透析连锁</p></li>
-                    <li><img src="/static/images/hz-6.jpg" alt=""><p>七喜医疗</p></li>
-                </ul>
-                <ul>
-                    <li><img src="/static/images/hz-7.jpg" alt=""><p>同爱医疗</p></li>
-                    <li><img src="/static/images/hz-8.jpg" alt=""><p>恒生医院</p></li>
-                </ul>
+        <div class="download">
+            <div class="downloadTitle">多种终端支持  工作随时随地</div>
+            <div class="downloadBox">
+                <div class="downOne">
+                    <img src="../../static/images/img/12.png" alt="">
+                    <span>PC工作台</span>
+                    <p>屏幕超大，录入方便</p>
+                    <img src="../../static/images/img/17.png" alt="">
+                </div>
+                <div class="downOne">
+                    <img src="../../static/images/img/13.png" alt="">
+                    <span>手机APP</span>
+                    <p>即开即用，在哪都行</p>
+                    <img src="../../static/images/img/16.png" alt="">
+                </div>
+                <div class="downOne">
+                    <img src="../../static/images/img/14.png" alt="">
+                    <span>平板APP</span>
+                    <p>大小合适，移动护理</p>
+                    <img src="../../static/images/img/19.png" alt="">
+                </div>
+                <div class="downOne">
+                    <img src="../../static/images/img/15.png" alt="">
+                    <span>手机微信</span>
+                    <p>无需安装，关注即用</p>
+                    <img src="../../static/images/img/18.png" alt="">
+                </div>
+            </div>
+            <div class="tipBox">
+                <div class="tipOne">
+                    <img src="../../static/images/img/20.png" alt="">
+                    <span>技术领先</span>
+                    <p>专业团队倾力研发</p>
+                </div>
+                <div class="tipOne">
+                    <img src="../../static/images/img/21.png" alt="">
+                    <span>系统稳定</span>
+                    <p>7x24小时实时护航</p>
+                </div>
+                <div class="tipOne">
+                    <img src="../../static/images/img/22.png" alt="">
+                    <span>服务专业</span>
+                    <p>在线客服随时响应</p>
+                </div>
+                <div class="tipOne">
+                    <img src="../../static/images/img/23.png" alt="">
+                    <span>口碑优质</span>
+                    <p>知名机构信赖之选</p>
+                </div>
             </div>
         </div>
-    </div>
+        <div class="advert">
+            <div class="advertBlue">
+                <div class="advertTitle">热情用心做服务  工匠精神做产品</div>
+                <div class="productBox">
+                   <div class="productOne">
+                       <img src="../../static/images/img/p1.png" alt="">
+                       <p>透析中心</p>
+                   </div>
+                   <div class="productOne">
+                       <img src="../../static/images/img/p2.png" alt="">
+                       <p>肾病医院</p>
+                   </div>
+                   <div class="productOne">
+                       <img src="../../static/images/img/p3.png" alt="">
+                       <p>肾病内科</p>
+                   </div>
+                   <div class="productOne">
+                       <img src="../../static/images/img/p4.png" alt="">
+                       <p>医生集团</p>
+                   </div>
+                </div>
+                
+            </div>
+            <div class="advertWhite"></div>
+            <div class="position">
+                <p class="sort">(*以下排名不分先后顺序)</p>
+                <div class="sponsorBox">
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/iii1.png" alt="">
+                        <p>费森尤斯</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i2.png" alt="">
+                        <p>华润医疗</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/ii3.png" alt="">
+                        <p>达康医疗</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i4.png" alt="">
+                        <p>七喜医疗</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/ii5.png" alt="">
+                        <p>同爱医疗</p>
+                    </div>
 
-    <div class="service">
-        <h2 class="section-title">酷医云，助力肾科/透析中心医疗建设、提升整体服务水平</h2>
-        <ul class="icon-container">
-            <li>
-                <div id="service-1-img"></div>
-                <p>品牌提升</p>
-                <p class="desc">精准营销</p>
-            </li>
-            <li>
-                <div id="service-2-img"></div>
-                <p>就医体验</p>
-                <p class="desc">网络医疗</p>
-            </li>
-            <li>
-                <div id="service-3-img"></div>
-                <p>透析质量</p>
-                <p class="desc">院外服务</p>
-            </li>
-            <li>
-                <div id="service-4-img"></div>
-                <p>医护培训</p>
-                <p class="desc">快捷采购</p>
-            </li>
-        </ul>
-    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i6.png" alt="">
+                        <p>圣迪康透析连锁</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/i7.png" alt="">
+                        <p>百伦透析连锁</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i8.png" alt="">
+                        <p>乐生透析连锁</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/ii9.png" alt="">
+                        <p>百荣连锁透析</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i10.png" alt="">
+                        <p>小豆连锁透析</p>
+                    </div>
 
-    <div class="copyright">
-        <div class="copyright-box">
-            <div class="copyright-right">
-                <dl>
-                    <dt><img src="/static/images/wei-1.png" alt=""></dt>
-                    <dd>平板扫码下载应用</dd>
-                </dl>
-                <dl>
-                    <dt><img src="/static/images/wei-2.png?v=3.0.0" alt=""></dt>
-                    <dd>手机微信扫码关注</dd>
-                </dl>
-            </div>
-            <div class="copyright-left">
-                <h3>深圳市健康互动科技有限公司</h3>
-                <ul>
-                    <li>咨询热线：0755-86526342</li>
-                    <li>服务邮箱：service@shengws.com</li>
-                    <li>工作时间：上午9:00-12:00,下午13:30-18:00</li>
-                    <li>公司地址：深圳市南山区学苑大道1001号南山智园A4栋9楼918</li>
-                </ul>
-            </div>
-            <div class="copyright-text">
-                <p>© 2016-2019 kuyicloud.com 酷医云 版权所有 <a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></p>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/ii11.png" alt="">
+                        <p>深圳华侨医院</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i12.png" alt="">
+                        <p>驻马店月亮湾医院</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/i13.png" alt="">
+                        <p>湘潭捷雅肾病医院</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i14.png" alt="">
+                        <p>张家口仁济医院</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/i15.png" alt="">
+                        <p>深圳龙岗二院</p>
+                    </div>
+
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i16.png" alt="">
+                        <p>襄阳博爱医院</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/ii17.png" alt="">
+                        <p>深圳宝兴医院</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i18.png" alt="">
+                        <p>湘潭爱心美医院</p>
+                    </div>
+                    <div class="sponsorOne background">
+                        <img src="../../static/images/img/i19.png" alt="">
+                        <p>南昌广济医院</p>
+                    </div>
+                    <div class="sponsorOne">
+                        <img src="../../static/images/img/i20.png" alt="">
+                        <p>唐山朝阳医院</p>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-    
-
-    <!-- 右侧悬浮菜单开始 -->
-    <div class="suspension">
-        <div class="suspension-box">
-            <a href="#" class="a a-service "><i class="i"></i></a>
-            <a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>
-            <a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
-            <a href="javascript:;" class="a a-top"><i class="i"></i></a>
-            <!-- <div class="d d-service" style="display:none;">
-                <i class="arrow"></i>
-                <div class="inner-box">
-                    <div class="d-service-item clearfix">
-                        <a href="#" class="clearfix">
-                            <h3>咨询在线客服</h3>
-                        </a>
+        <div class="slogan">
+            <p>酷医，帮助透析中心从优秀到卓越</p>
+        </div>
+        <div class="footer">
+            <div class="footerBox">
+                <p class="point" style="visibility: hidden;">友情链接：</p>
+                <div class="contactBox">
+                    <div>
+                        <p>咨询热线：0755-86526342</p>
+                        <p>服务邮箱：service@shengws.com</p>
+                    </div>
+                    <div>
+                        <p>客服手机：18682078150</p>
+                        <p>客服微信：kuyicloud</p>
+                    </div>
+                    <div>
+                        <p>工作时间：上午9:00-12:00,下午13:30-18:00</p>
+                        <p>公司地址：深圳市南山区南山智园A4栋09楼</p>
                     </div>
                 </div>
-            </div> -->
-            <div class="d d-service-phone">
-                <i class="arrow"></i>
-                <div class="inner-box" style="width:200px;">
-                    <div class="d-service-item clearfix">
-                        <span class="circle"><i class="i-tel"></i></span>
-                        <div class="text">
-                            <p>服务热线</p>
-                            <p class=" number">0755-86526342</p>
+                <p class="copyRight">© Copyright 2015-2020 深圳市健康互动科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备15079323号-4</a></p>
+            </div>
+        </div>
+        <div class="suspension">
+            <div class="suspension-box">
+                <img class="a a-service " src="../../static/images/img/33.png" alt="">
+                <img class="a a-service-phone" src="../../static/images/img/34.png" alt="">
+                <img class="a a-qrcode" src="../../static/images/img/32.png" alt="">
+                <!-- <a href="#" class="a a-service "><i class="i"></i></a>
+                <a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>
+                <a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
+                <a href="javascript:;" class="a a-top"><i class="i"></i></a> -->
+                <div class="d d-service" style="display:none;">
+                    <i class="arrow"></i>
+                    <div class="inner-box">
+                        <div class="d-service-item clearfix">
+                            <a href="http://p.qiao.baidu.com/cps/chat?siteId=13548640&userId=28119034&siteToken=7577c975fa7ae685efd61deb009d1b5b" class="clearfix">
+                                <h3>咨询在线客服</h3>
+                            </a>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="d d-qrcode">
-                <i class="arrow"></i>
-                <div class="inner-box">
-                    <div class="qrcode-img"><img src="/static/images/side_ewm.png" alt=""></div>
-                    <p>微信服务号</p>
+                <div class="d d-service-phone">
+                    <i class="arrow"></i>
+                    <div class="inner-box" style="width:200px;">
+                        <div class="d-service-item clearfix">
+                            <span class="circle"><i class="i-tel"></i></span>
+                            <div class="text">
+                                <p>服务热线</p>
+                                <p class=" number">0755-86526342</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="inner-box">
-                    <div class="qrcode-img"><img src="/static/images/kefu.jpg" alt="">
-                    <p>微信客服号</p>					
+                <div class="d d-qrcode">
+                    <i class="arrow"></i>
+                    <div class="inner-box">
+                        <div class="qrcode-img"><img src="/static/images/side_ewm.png" alt=""></div>
+                        <p>微信服务号</p>
+                    </div>
+                    <div class="inner-box">
+                        <div class="qrcode-img"><img src="/static/images/img/kefu.jpg" alt="">
+                        <p>微信客服号</p>					
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-    <!-- 右侧悬浮菜单结束 -->
-    
-    <!-- 底部悬浮内容 -->
-    <div class="wraper-1vdHN1Z2BV" id="wraper-1vdHN1Z2BV">
-        <div >
-            <div class="logo-pic"><img src="/static/images/fulogo.png" alt=""></div>
-            <a href="http://sso.kuyicloud.com/register" class="btn-1hyk61Z2BV">
-                <button type="button" class="ivu-btn ivu-btn-primary">
-                    <span>免费使用</span>
-                </button>
-            </a>
-        </div>
-    </div>
-
     
     <script src="/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
     <script src="/static/js/bootstrap.min.js"></script>
@@ -373,6 +477,51 @@
     <script src="/static/js/suspension.js"></script>
     <script type="text/javascript">
         $('#bootstrap-touch-slider').bsTouchSlider();
+        $(function(){
+            var windowHeight = $(window).height();  //窗口高度
+
+            // 监听页面滚动
+            $(window).scroll(function(event){
+                var showId1 = document.getElementById('showDiv1');
+                var is_Animat1  = is_Visible_Area(showId1);
+                if (is_Animat1){
+                    showId1.classList.add('fadeInRight');
+                }
+                var showId2 = document.getElementById('showDiv2');
+                var is_Animat2  = is_Visible_Area(showId2);
+                if (is_Animat2){
+                    showId2.classList.add('fadeInLeft');
+                }
+                var showId3 = document.getElementById('showDiv3');
+                var is_Animat3  = is_Visible_Area(showId3);
+                if (is_Animat3){
+                    showId3.classList.add('fadeInRight');
+                }
+                var showId4 = document.getElementById('showDiv4');
+                var is_Animat4  = is_Visible_Area(showId4);
+                if (is_Animat4){
+                    showId4.classList.add('fadeInLeft');
+                }
+            });
+
+            //计算元素是否到达可视区域
+            function is_Visible_Area(element) {
+                var objHeight = $(element).offset().top;//元素到顶部的高度
+                let winPos = $(window).scrollTop();//距离顶部滚动
+                let val = objHeight-winPos;
+                if (val<windowHeight && val > 0) {
+                    //可视区域
+                    // console.log("有动画")
+                    return true;
+                }else {
+                    //不可视区域
+                    // console.log("不在可视区域内")
+                    return false;
+                }
+            }
+        });
+
     </script>
 </body>
-</html>
+</html>
+