diff --git a/download.html b/download.html
new file mode 100644
index 0000000..4e9cfab
--- /dev/null
+++ b/download.html
@@ -0,0 +1,1344 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="pragma" content="no-cache">
+		<meta name="viewport"
+			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<title>Hello uni-app</title>
+		<style type="text/css">
+			* {
+				box-sizing: border-box;
+				-webkit-box-sizing: border-box
+			}
+
+			body,
+			html {
+				margin: 0;
+				padding: 0;
+				background-color: #fff;
+				font-size: 14px
+			}
+
+			a {
+				text-decoration: none
+			}
+
+			.main {
+				padding: 0
+			}
+
+			.info,
+			.main {
+				height: 100%
+			}
+
+			img[src=""] {
+				opacity: 0
+			}
+
+			.bottom-wrap .head-content *,
+			.list-wrap ul li,
+			.logo-wrap * {
+				vertical-align: middle
+			}
+
+			.downloads-content .package,
+			.pc-info .mask {
+				visibility: hidden
+			}
+
+			.main {
+				text-align: center;
+				margin: 0 auto;
+				max-width: 100%;
+				width: 700px
+			}
+
+			.info {
+				position: relative
+			}
+
+			.downloads-wrap,
+			.logo-wrap {
+				width: 100%
+			}
+
+			.downloads-wrap {
+				bottom: 0;
+				position: absolute
+			}
+
+			.logo-wrap {
+				padding-top: 30px
+			}
+
+			.logo-wrap>img {
+				border-radius: 5px;
+				width: 79px;
+				height: 79px
+			}
+
+			.logo-wrap h2 {
+				font-size: 18px;
+				color: #2a2a2a;
+				font-weight: 700
+			}
+
+			.desc-content h2,
+			.screenshots-content h2 {
+				font-weight: 400;
+				font-size: 15px;
+				color: #2a2a2a
+			}
+
+			.logo-wrap p {
+				margin-top: 21px;
+				font-size: 18px;
+				font-weight: 400;
+				color: #2a2a2a;
+				padding: 0 20px
+			}
+
+			.logo-wrap #show_qrcode {
+				display: block;
+				font-size: 10px;
+				color: #007aff;
+				text-decoration: none;
+				margin-top: 28px
+			}
+
+			.logo-wrap #show_qrcode>img {
+				width: 11px;
+				height: 11px
+			}
+
+			.logo-wrap #show_qrcode>span {
+				display: inline-block;
+				margin-left: 10px
+			}
+
+			.command-content p {
+				display: inline-block;
+				font-size: 12px;
+				color: #2a2a2a
+			}
+
+			.command-content .stream-token {
+				font-size: 12px;
+				color: #2a2a2a;
+				background-color: #f8f8f8;
+				border-radius: 3px;
+				padding: 5px
+			}
+
+			.command-content a {
+				display: inline-block;
+				font-size: 11px;
+				color: #007aff;
+				width: 50px
+			}
+
+			.qrcode-content {
+				display: none;
+				margin-top: 50px;
+				margin-bottom: 20px;
+				font-size: 20px
+			}
+
+			.qrcode-content img {
+				width: 120px;
+				height: 120px
+			}
+
+			.qrcode-content span {
+				display: block
+			}
+
+			.qrcode-content .code {
+				display: inline-block;
+				color: #007aff
+			}
+
+			.qrcode-content p {
+				margin: 0;
+				padding: 0;
+				display: inline-block
+			}
+
+			.btn-primary,
+			.btn-secondary {
+				background-color: #007aff;
+				color: #fff;
+				margin-top: 10px
+			}
+
+			.btn {
+				font-size: 12px;
+				width: 288px;
+				height: 40px;
+				line-height: 40px;
+				border-radius: 5px;
+				outline: 0
+			}
+
+			.btn-primary {
+				border: 1px solid #007aff
+			}
+
+			.btn-secondary {
+				border: 1px solid #fff;
+				margin-bottom: 10px
+			}
+
+			.btn.stream {
+				background-color: #fff;
+				color: #007aff
+			}
+
+			.more img {
+				height: 10px;
+				margin-bottom: 5px
+			}
+
+			.more.down img {
+				transform: rotateX(0)
+			}
+
+			.more.up img {
+				transform: rotateX(180deg)
+			}
+
+			.screenshots-content {
+				border-top: 1px solid #bfbfbf;
+				margin: 0 15px;
+				padding: 0 24px;
+				position: relative
+			}
+
+			.screenshots-content h2 {
+				margin-top: 40px;
+				margin-bottom: 21px;
+				text-align: left
+			}
+
+			.list-wrap {
+				overflow-x: auto;
+				white-space: nowrap;
+				margin-bottom: 36px;
+				margin-left: 39px
+			}
+
+			.list-wrap ul {
+				display: block;
+				list-style: none;
+				white-space: nowrap;
+				-webkit-padding-start: 0;
+				-moz-padding-start: 0
+			}
+
+			.bottom-wrap .tips-content .tip-desc,
+			.desc-content pre {
+				white-space: pre-wrap;
+				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+				word-break: break-all
+			}
+
+			.list-wrap ul li {
+				display: inline-block;
+				margin: 0 9px
+			}
+
+			.list-wrap ul li:first-child {
+				margin: 0 9px 0 0
+			}
+
+			.list-wrap ul li img {
+				width: 176px;
+				height: 311px;
+				border: 1px solid #949494
+			}
+
+			.desc-content {
+				border-top: 1px solid #bfbfbf;
+				margin: 0 15px 36px;
+				padding: 0 24px;
+				text-align: center
+			}
+
+			.desc-content h2 {
+				margin-top: 40px;
+				margin-bottom: 21px;
+				text-align: left
+			}
+
+			.desc-content pre {
+				width: 100%;
+				font-size: 14px;
+				color: #2a2a2a;
+				text-align: left
+			}
+
+			.footer {
+				text-align: center;
+				padding: 20px;
+				border-top: 1px solid #dae2e3
+			}
+
+			.show {
+				display: block
+			}
+
+			.hide {
+				display: none !important
+			}
+
+			.overlay {
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background: rgba(0, 0, 0, .6);
+				z-index: 200;
+				position: fixed
+			}
+
+			.bottom-wrap {
+				position: absolute;
+				bottom: 0;
+				z-index: 201;
+				width: 100%;
+				padding-bottom: 18px;
+				background-color: #fff
+			}
+
+			.bottom-wrap .head-content {
+				padding: 12px 0;
+				text-align: left;
+				margin-left: 21px
+			}
+
+			.bottom-wrap .head-content img {
+				display: inline-block;
+				width: 28px;
+				height: 28px
+			}
+
+			.bottom-wrap .head-content h2 {
+				display: inline-block;
+				font-size: 15px;
+				font-weight: 700;
+				color: #313131;
+				margin-left: 10px
+			}
+
+			.bottom-wrap .tips-content {
+				text-align: left;
+				margin-left: 21px;
+				margin-right: 21px;
+				border-top: 1px solid #bfbfbf
+			}
+
+			.bottom-wrap .tips-content .tip-desc {
+				font-size: 13px
+			}
+
+			.bottom-wrap .tips-content .tip-title {
+				font-size: 14px;
+				color: #313131;
+				margin: 8px 0 0;
+				font-weight: 400
+			}
+
+			.bottom-wrap .tips-content .tip-token {
+				font-size: 13px;
+				color: #313131;
+				margin: 8px 0 0;
+				display: inline-block;
+				padding: 3px;
+				background-color: #96d2fa
+			}
+
+			.bottom-wrap .tips-content .tip-guide {
+				font-size: 14px;
+				margin: 8px 0 0
+			}
+
+			.bottom-wrap .tips-content .guide-launch {
+				margin: 15px 0
+			}
+
+			.bottom-wrap .tips-content ul {
+				-webkit-padding-start: 21px
+			}
+
+			.bottom-wrap .tips-content ul li {
+				margin: 0;
+				padding: 0;
+				-webkit-padding-start: 0
+			}
+
+			.bottom-wrap button {
+				width: 327px
+			}
+
+			.qrcode-wrap {
+				position: absolute;
+				width: 320px;
+				height: 350px;
+				background-color: #fff;
+				top: 50%;
+				left: 50%;
+				margin-top: -164px;
+				margin-left: -160px;
+				border-radius: 5px
+			}
+
+			.qrcode-wrap div.close {
+				display: block;
+				width: 30px;
+				height: 30px;
+				position: absolute;
+				right: 15px;
+				top: 10px
+			}
+
+			.qrcode-wrap div.close img {
+				width: 14px;
+				height: 14px;
+				margin-top: 8px
+			}
+
+			.qrcode-wrap .kuaima-wrap {
+				width: 211px;
+				height: 211px;
+				display: inline-block;
+				margin-top: 28px;
+				border: 1px solid #8eceab;
+				background-color: #fbfffe;
+				border-radius: 5px
+			}
+
+			.qrcode-wrap .kuaima-wrap .qrcode {
+				width: 161px;
+				height: 161px;
+				margin-top: 25px
+			}
+
+			.qrcode-wrap .kuaima-wrap .app-name {
+				display: block;
+				font-size: 12px
+			}
+
+			.qrcode-wrap .channel {
+				width: 211px
+			}
+
+			.qrcode-wrap .desc {
+				color: #c5c5c5;
+				font-size: 12px
+			}
+
+			.pc-info {
+				display: none;
+				position: relative;
+				text-align: left;
+				margin-top: 80px
+			}
+
+			.pc-name h2 {
+				font-size: 24px;
+				color: #2a2a2a;
+				font-weight: 700
+			}
+
+			.pc-name p {
+				font-size: 22px;
+				color: #2a2a2a;
+				font-weight: 400;
+				margin-top: 30px;
+				width: 520px;
+				word-wrap: break-word;
+				word-break: break-all;
+				overflow: hidden
+			}
+
+			.contact-list-item .contact-title,
+			.h5-title,
+			.mp-title-input {
+				font-weight: 700
+			}
+
+			.btn-download {
+				width: 260px;
+				background-color: #fff;
+				border: 1px solid #007aff;
+				color: #007aff
+			}
+
+			.btn-download .icon {
+				margin-right: 5px;
+				line-height: 14px
+			}
+
+		
+
+			.publish_iconfont {
+				font-family: publish_iconfont !important;
+				font-size: 14px;
+				font-style: normal;
+				-webkit-font-smoothing: antialiased;
+				-webkit-text-stroke-width: .2px;
+				-moz-osx-font-smoothing: grayscale
+			}
+
+			#pc_download .btn-download,
+			#pc_download_plus .btn-download {
+				display: inline-block;
+				text-decoration: none;
+				text-align: center
+			}
+
+			.pc-download.plus-app {
+				display: flex;
+				position: relative;
+				flex-direction: row;
+				padding-top: 50px;
+				padding-bottom: 50px
+			}
+
+			.pc-download.plus-app.center {
+				justify-content: center
+			}
+
+			.pc-download.plus-app .qrcode-row {
+				display: inline-block;
+				width: 200px;
+				text-align: center
+			}
+
+			.pc-download.plus-app .qrcode-row .qrcode-img {
+				width: 200px;
+				height: 200px
+			}
+
+			.pc-download.plus-app .qrcode-row .app-tip {
+				margin: 0
+			}
+
+			.pc-download.plus-app .btn-row {
+				display: inline-flex;
+				flex-direction: column;
+				margin-left: 80px;
+				justify-content: center
+			}
+
+			.pc-download.plus-app .btn-row .btn-download {
+				margin: 15px 0;
+				width: 240px
+			}
+
+			.pc-download.plus-app:after {
+				position: absolute;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				height: 1px;
+				content: "";
+				transform: scaleY(.5);
+				background-color: #c8c7cc
+			}
+
+			@media only screen and (min-width:768px) {
+
+
+				.pc-info {
+					display: block
+				}
+
+				.desc-content {
+					padding: 0;
+					margin: 0 0 80px;
+					border: none
+				}
+
+				.desc-content pre {
+					color: #818181;
+					font-size: 14px
+				}
+
+				.desc-content h2 {
+					font-size: 22px;
+					margin-bottom: 40px
+				}
+
+				.screenshots-content {
+					border: none;
+					margin: 0;
+					padding: 0
+				}
+
+				.screenshots-content h2 {
+					font-size: 22px;
+					margin-bottom: 40px
+				}
+
+				.list-wrap {
+					margin-left: 0
+				}
+
+				.tab-item {
+					font-size: 20px !important
+				}
+			}
+
+			@media only screen and (max-width:320px) {
+				body {
+					font-size: 12px
+				}
+			}
+
+			.command-content p {
+				width: 288px;
+				text-align: left;
+				position: relative
+			}
+
+			.command-content p .stream-token {
+				width: 230px;
+				border: none
+			}
+
+			.command-content .copy-command {
+				text-align: center;
+				position: absolute;
+				right: 0;
+				top: -5px;
+				font-size: 14px;
+				line-height: 14px;
+				width: auto;
+				background-color: #c5c5c5;
+				color: #fff;
+				padding: 6px;
+				border-radius: 3px;
+				text-decoration: none
+			}
+
+			.pc-logo {
+				position: absolute;
+				left: -126px
+			}
+
+			.pc-logo img {
+				border-radius: 5px;
+				width: 90px;
+				height: 90px
+			}
+
+			.pc-barcode {
+				position: absolute;
+				right: 0;
+				width: 160px;
+				height: 160px;
+				border: 1px solid #8eceab;
+				background-color: #fbfffe;
+				border-radius: 5px;
+				text-align: center
+			}
+
+			.pc-barcode .kuaima-wrap .qrcode {
+				width: 120px;
+				height: 120px;
+				margin-top: 15px
+			}
+
+			.pc-barcode .kuaima-wrap .app-name {
+				display: block;
+				font-size: 12px
+			}
+
+			.pc-barcode .tip {
+				color: #296a43;
+				margin-top: 10px;
+				font-size: 14px
+			}
+
+			.bottom-wrap .head-content .loading-tip {
+				display: inline-block;
+				position: absolute;
+				font-size: 12px;
+				right: 21px;
+				color: #c5c5c5
+			}
+
+			.loading-tip .spinner {
+				margin-right: 5px
+			}
+
+			.spinner {
+				display: inline-block;
+				width: 16px;
+				height: 16px;
+				transform-origin: 50%;
+				animation: a 1s step-end infinite
+			}
+
+		
+
+			#download_list a.stream,
+			.pc-info .mask a,
+			.tab-item {
+				display: inline-block;
+				text-decoration: none
+			}
+
+			@keyframes a {
+				0% {
+					transform: rotate(0)
+				}
+
+				8.33333333% {
+					transform: rotate(30deg)
+				}
+
+				16.66666667% {
+					transform: rotate(60deg)
+				}
+
+				25% {
+					transform: rotate(90deg)
+				}
+
+				33.33333333% {
+					transform: rotate(120deg)
+				}
+
+				41.66666667% {
+					transform: rotate(150deg)
+				}
+
+				50% {
+					transform: rotate(180deg)
+				}
+
+				58.33333333% {
+					transform: rotate(210deg)
+				}
+
+				66.66666667% {
+					transform: rotate(240deg)
+				}
+
+				75% {
+					transform: rotate(270deg)
+				}
+
+				83.33333333% {
+					transform: rotate(300deg)
+				}
+
+				91.66666667% {
+					transform: rotate(330deg)
+				}
+
+				to {
+					transform: rotate(1turn)
+				}
+			}
+
+			.tip-button-row {
+				text-align: right;
+				padding-right: 21px
+			}
+
+			.pc-info .mask,
+			.tab-content.pc .tab-content-item.app,
+			.tab-content.pc .tab-content-item.mp {
+				text-align: center
+			}
+
+			.tip-button-row .tip-btn {
+				border: none;
+				height: 30px;
+				border-radius: 3px;
+				color: #fff;
+				margin: 0;
+				padding: 0;
+				font-size: 12px
+			}
+
+			.app-tip,
+			.mp-tip,
+			.share-tip {
+				font-size: 14px
+			}
+
+			.tip-button-row .tip-btn.tip-btn-primary {
+				width: 70px;
+				background-color: #007aff
+			}
+
+			.tip-button-row .tip-btn.tip-btn-cancel {
+				background-color: transparent;
+				color: #007aff;
+				width: 40px
+			}
+
+			.pc-info .mask {
+				position: absolute;
+				right: 0;
+				width: 162px;
+				height: 162px;
+				background-color: rgba(0, 0, 0, .6);
+				border-radius: 3px;
+				cursor: pointer
+			}
+
+			.pc-info .mask a {
+				width: 100%;
+				color: #fff;
+				line-height: 160px
+			}
+
+			#download_list .btn.stream.disabled {
+				background-color: #ccc;
+				border-color: #ccc;
+				color: #fff
+			}
+
+			.tab {
+				border-bottom: 1px solid #f7f7f7
+			}
+
+			.tab-item {
+				padding: 10px 18px;
+				margin: 0 30px;
+				color: #007aff;
+				font-size: 16px
+			}
+
+			.h5-link,
+			.mp-clip,
+			.mp-title-copy,
+			.website-url {
+				text-decoration: underline
+			}
+
+			.tab-item.active {
+				border-bottom: 2px solid #007aff;
+				font-weight: 700
+			}
+
+			.tab-content {
+				border-bottom: 1px solid #f7f7f7;
+				padding: 50px 0
+			}
+
+			.pc-download {
+				margin: 0
+			}
+
+			.tab-content-item {}
+
+			.pkg-download,
+			.tab-content-item.active,
+			.website-url {
+				display: block
+			}
+
+			.tab-content.pc .tab-content-item {
+				height: 350px
+			}
+
+			.app-qrcode {
+				border: 1px solid #279a36;
+				border-radius: 5px;
+				-webkit-border-radius: 5px;
+				-moz-border-radius: 5px;
+				-ms-border-radius: 5px;
+				-o-border-radius: 5px
+			}
+
+			.mp-qrcode {
+				width: 135px;
+				height: 135px;
+				margin-top: 20px
+			}
+
+			.list-media {
+				position: relative;
+				padding: 11px 15px
+			}
+
+			.list-media-object {
+				float: left;
+				width: 42px;
+				height: 42px;
+				margin-right: 15px
+			}
+
+			.list-media-body {
+				height: 42px;
+				position: relative
+			}
+
+			.pc-share,
+			.toast {
+				position: absolute
+			}
+
+			.list-media-desc {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				font-size: 14px;
+				color: #8f8f94;
+				margin: 0
+			}
+
+			.contact-list {
+				padding: 30px 0 0 50px
+			}
+
+			.contact-list-item {
+				padding: 5px
+			}
+
+			.contact-list-item .contact-text {
+				color: #007aff
+			}
+
+			.tab-wrap {
+				bottom: 10px;
+				width: 100%
+			}
+
+			#mb_tab .tab-item {
+				margin: 0
+			}
+
+			.pkg-download {
+				margin: 0 auto;
+				width: 300px;
+				background-color: #007aff;
+				border: 1px solid #007aff;
+				color: #fff;
+				padding: 8px 10px;
+				border-radius: 5px
+			}
+
+			#mb_tab_content {
+				border: none;
+				padding: 15px 0
+			}
+
+			@media only screen and (min-height:650px) {
+				#mb_tab_content {
+					padding: 30px 0
+				}
+			}
+
+			@media only screen and (min-height:750px) {
+				#mb_tab_content {
+					padding: 50px 0
+				}
+			}
+
+			#mb_tab_content .app-qrcode,
+			#mb_tab_content .mp-qrcode {
+				width: 150px;
+				height: 150px
+			}
+
+			#mb_tab_content .tab-content-item {
+				height: 260px
+			}
+
+			.app-tip {
+				margin: 5px 0 10px;
+				height: 20px;
+				color: #007aff
+			}
+
+			.website-label,
+			.website-url {
+				margin-left: 50px
+			}
+
+			.mp-clip {
+				color: #007aff
+			}
+
+			.mp-tip {
+				color: #777
+			}
+
+			#mb_tab_content .tab-content-item.contact,
+			#mb_tab_content .tab-content-item.h5 {
+				text-align: left
+			}
+
+			#mb_tab_content .tab-content-item.h5 {
+				padding-top: 50px;
+				font-size: 20px
+			}
+
+			.footer-wrap,
+			.mp-title-input,
+			.pc-share,
+			.share-qrcode {
+				text-align: center
+			}
+
+			.website-url {
+				color: #007aff
+			}
+
+			.pkg-download.hide {
+				display: none
+			}
+
+			.pkg-download.show {
+				display: block
+			}
+
+			.pc-share {
+				top: 0;
+				right: 10px;
+				color: #007aff;
+				cursor: pointer;
+				background-color: #fff;
+				width: 200px;
+				z-index: 9
+			}
+
+			.share-qrcode {
+				width: 200px;
+				height: 200px;
+				box-shadow: 0 0 10px #666;
+				border-radius: 5px;
+				-webkit-border-radius: 5px;
+				-moz-border-radius: 5px;
+				-ms-border-radius: 5px;
+				-o-border-radius: 5px;
+				display: flex;
+				justify-content: center;
+				align-items: center
+			}
+
+			.share-qrcode.hide {
+				display: none
+			}
+
+			.share-qrcode img {
+				width: 100%;
+				height: 100%;
+				border: none
+			}
+
+			.share-tip {
+				color: #007aff
+			}
+
+			.top-arrow {
+				width: 15px;
+				height: 15px;
+				border-top: 2px solid #ccc;
+				border-right: 2px solid #ccc;
+				transform: rotate(-45deg)
+			}
+
+			.download-app {
+				margin-bottom: 0
+			}
+
+			@media only screen and (min-height:600px) {
+				.tab-wrap {
+					bottom: 50px
+				}
+
+				.download-app {
+					margin-bottom: 50px
+				}
+			}
+
+			@media only screen and (min-height:700px) {
+				.tab-wrap {
+					bottom: 100px
+				}
+
+				.download-app {
+					margin-bottom: 100px
+				}
+			}
+
+			.download-app .qrcode {
+				width: 150px;
+				height: 150px
+			}
+
+			.download-app .app-tip {
+				margin: 0
+			}
+
+			.download-tip {
+				color: #949494
+			}
+
+			.footer-wrap {
+				padding: 5px
+			}
+
+			.footer-wrap .power-by {
+				font-size: 12px;
+				color: #aeaeae
+			}
+
+			.footer-wrap .power-by a {
+				color: #007aff
+			}
+
+			.mp-title {
+				margin-bottom: 10px;
+				display: flex;
+				flex-direction: column
+			}
+
+			.mp-title-input {
+				border: none;
+				font-size: 16px
+			}
+
+			.mp-title-input.input-hidden {
+				visibility: hidden;
+				position: absolute;
+				top: 0;
+				z-index: -99
+			}
+
+			.mp-title-copy {
+				color: #007aff;
+				font-size: 16px;
+				margin: 0 auto;
+				margin-top: 10px
+			}
+
+			.mp-title-tip {
+				font-size: 12px;
+				color: #aeaeae
+			}
+
+			.toast {
+				left: 0;
+				right: 0;
+				bottom: 50px;
+				margin: auto;
+				width: 320px
+			}
+
+			.toast.hide {
+				display: none
+			}
+
+			.toast.show {
+				display: block
+			}
+
+			.toast-text {
+				-webkit-margin-before: 0;
+				-webkit-margin-after: 0;
+				background-color: #000;
+				color: #fff;
+				border-radius: 3px;
+				padding: 3px 0;
+				font-size: 14px;
+				opacity: .5
+			}
+
+			.mb-no-pkg {
+				line-height: 240px
+			}
+
+			.pc-no-pkg {
+				line-height: 350px
+			}
+
+			.h5-title {
+				padding: 0 0 20px 50px
+			}
+
+			.h5-content-pc .h5-title {
+				display: inline-block;
+				margin-top: 50px
+			}
+
+			.h5-link {
+				padding: 20px 50px 0;
+				color: #007aff;
+				display: inline-block;
+				word-break: break-all;
+				font-size: 15px
+			}
+
+			.h5-content-m .h5-title {
+				display: block
+			}
+
+			@media screen and (max-width:360px) and (max-height:500px) {
+				.logo-wrap {
+					top: 5px
+				}
+
+				#mb_tab_content .tab-content-item {
+					height: 220px
+				}
+
+				.btn-primary,
+				.btn-secondary {
+					margin-top: 5px
+				}
+
+				#mb_tab_content .app-qrcode {
+					width: 120px;
+					height: 120px
+				}
+			}
+
+			.mp-wrap {
+				display: flex
+			}
+
+			.mp-side {
+				width: 95px;
+				left: 0;
+				border-right: 1px solid #eaeaea;
+				height: 260px;
+				padding-left: 10px
+			}
+
+			.mp-content {
+				display: flex;
+				flex: 1;
+				justify-content: center
+			}
+
+			.mp-content-item {
+				display: none
+			}
+
+			.mp-content-item.active {
+				display: block
+			}
+
+			.mp-side-item {
+				color: #727272;
+				opacity: .45;
+				line-height: 40px;
+				text-align: left
+			}
+
+			.mp-side-item.active {
+				color: #0f0f0f;
+				opacity: 1
+			}
+
+			.mp-side-item.active .inner-item {
+				background-color: #f3f3f3
+			}
+
+			.mp-icon {
+				width: 25px;
+				height: 25px;
+				vertical-align: middle;
+				display: inline-block
+			}
+
+			.pc-mp-item {
+				display: inline-block;
+				margin: 0 20px
+			}
+
+			.tab-content.pc .tab-content-item.mp.active {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: center
+			}
+		</style>
+	</head>
+
+	<body>
+		<div class="main">
+			<!--移动端-->
+			<div class="info mobile" id="mobile_info">
+				<!--logo-->
+				<div class="logo-wrap">
+					<img src="https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png" />
+			
+					<p>uni-app框架演示示例</p>
+				</div>
+				<!-- 选项卡 -->
+
+				<div class="tab-wrap">
+
+					<div class="tab-content mb">
+
+						<div class="tab-content-item app">
+							<img class="app-qrcode" style="width:150px;height:150px;" src="https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png">
+							<p class="app-tip">扫码获取</p>
+							<div class="pc-download" id="pc_download">
+								<a href="javascript:;" class="btn btn-download android" type="button">
+									<span class="icon icon-android publish_iconfont">&#xe616;</span>
+									<span>Android平台下载</span>
+								</a>
+								<a href="javascript:;" class="btn btn-download ios" type="button">
+									<span class="icon icon-ios publish_iconfont">&#xe61f;</span>
+									<span>iOS平台下载</span>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="desc-content">
+				<h2>应用描述</h2>
+				<pre>uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架 。
+开发者通过编写 Vue.js 代码， uni - app 将其编译到 iOS、 Android、 微信小程序、 支付宝小程序、 百度小程序、 H5等多个平台， 保证其正确运行并达到优秀体验。
+
+Hello uni - app 演示 uni - app 框架的组件、 接口、 模板。 </pre>
+			</div>
+
+			<!--应用截图-->
+
+			<div class="screenshots-content">
+				<h2>应用截图</h2>
+			</div>
+			<div class="list-wrap">
+				<ul>
+
+					<li>
+						<img src="https://img-cdn-aliyun.dcloud.net.cn/stream/screen/__UNI__HelloUniApp_0.jpg">
+					</li>
+
+					<li>
+						<img src="https://img-cdn-aliyun.dcloud.net.cn/stream/screen/__UNI__HelloUniApp_1.jpg">
+					</li>
+
+					<li>
+						<img src="https://img-cdn-aliyun.dcloud.net.cn/stream/screen/__UNI__HelloUniApp_2.png">
+					</li>
+
+					<li>
+						<img src="https://img-cdn-aliyun.dcloud.net.cn/stream/screen/__UNI__HelloUniApp_3.jpg">
+					</li>
+
+				</ul>
+			</div>
+
+		</div>
+
+		<script type="text/javascript">
+
+		</script>
+</html>
\ No newline at end of file
