4 years ago · 93f3531875
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,188 @@
 
				+html,
			
 
				+body,
			
 
				+p,
			
 
				+img,
			
 
				+button {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  border: none;
			
 
				+  outline: none;
			
 
				+}
			
 
				+
			
 
				+html {
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  height: 100%;
			
 
				+  font-family: "PingFang-SC-Regular", Arial;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+  width: 100%;
			
 
				+  height: 105%;
			
 
				+  min-width: 1280px;
			
 
				+  background: url(../img/bg.png) no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+
			
 
				+.content-area {
			
 
				+  width: 95%;
			
 
				+  height: 95%;
			
 
				+  margin: 0 auto;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.l-bt {
			
 
				+  float: left;
			
 
				+  width: 40%;
			
 
				+  height: 100%;
			
 
				+  padding-left: 5%;
			
 
				+  padding-top: 8%;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.logo-area {
			
 
				+  display: inline-block;
			
 
				+  height: 223px;
			
 
				+}
			
 
				+
			
 
				+.logo-area img {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+  display: inline-block;
			
 
				+  width: 180px;
			
 
				+  height: 180px;
			
 
				+  border-radius: 50px;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.logo-tit {
			
 
				+  display: inline-block;
			
 
				+  margin-left: 30px;
			
 
				+  width: 145px;
			
 
				+  height: 69px;
			
 
				+  vertical-align: 53px;
			
 
				+}
			
 
				+
			
 
				+.show-area {
			
 
				+  float: right;
			
 
				+  position: relative;
			
 
				+  margin-top: 40px;
			
 
				+  width: 30%;
			
 
				+  height: auto;
			
 
				+}
			
 
				+
			
 
				+.show-area img {
			
 
				+  width: 50%;
			
 
				+  height: auto;
			
 
				+}
			
 
				+
			
 
				+.slogan {
			
 
				+  display: inline-block;
			
 
				+  width: 60px;
			
 
				+  height: 300px;
			
 
				+  margin-top: 200px;
			
 
				+  margin-left: 180px;
			
 
				+}
			
 
				+
			
 
				+.slogan img {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.pic-1 {
			
 
				+  position: absolute;
			
 
				+  right: 30px;
			
 
				+  top: 0;
			
 
				+  z-index: 10;
			
 
				+}
			
 
				+
			
 
				+.pic-2 {
			
 
				+  margin-top: 50px;
			
 
				+}
			
 
				+
			
 
				+.download {
			
 
				+  height: 50%;
			
 
				+  margin-left: -15px;
			
 
				+  margin-top: 10%;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  width: 100%;
			
 
				+  height: 65px;
			
 
				+  border-radius: 5px;
			
 
				+  font-size: 26px;
			
 
				+  font-weight: 200;
			
 
				+  color: #fff;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+button.ios {
			
 
				+  background: #fd9b9a;
			
 
				+}
			
 
				+
			
 
				+button.android {
			
 
				+  background: #b0a9f7;
			
 
				+}
			
 
				+
			
 
				+.tips {
			
 
				+  display: none;
			
 
				+  position: absolute;
			
 
				+  top: 40%;
			
 
				+  left: 40%;
			
 
				+  width: 200px;
			
 
				+  height: 50px;
			
 
				+  text-align: center;
			
 
				+  line-height: 50px;
			
 
				+  font-size: 20px;
			
 
				+  color: #fff;
			
 
				+  background: rgba(0, 0, 0, 0.3);
			
 
				+  border-radius: 50px;
			
 
				+}
			
 
				+
			
 
				+.footer {
			
 
				+  width: 100%;
			
 
				+  height: 25px;
			
 
				+  line-height: 25px;
			
 
				+  text-align: center;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 200;
			
 
				+  color: #333;
			
 
				+  background: #fff;
			
 
				+}
			
 
				+
			
 
				+.android-pic {
			
 
				+  width: 0%;
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  top: 90px;
			
 
				+}
			
 
				+
			
 
				+.ios-pic {
			
 
				+  width: 0%;
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				+  top: 90px;
			
 
				+}
			
 
				+
			
 
				+.down-android {
			
 
				+  display: inline-block;
			
 
				+  width: 40%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.down-ios {
			
 
				+  margin-left: 50px;
			
 
				+  display: inline-block;
			
 
				+  width: 40%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+}
			
--- a/img/android-200.png
+++ b/img/android-200.png
--- a/img/android-xby-200.png
+++ b/img/android-xby-200.png
--- a/img/bg.png
+++ b/img/bg.png
--- a/img/ios-200.png
+++ b/img/ios-200.png
--- a/img/logo-tit.png
+++ b/img/logo-tit.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/phone1.png
+++ b/img/phone1.png
--- a/img/phone2.png
+++ b/img/phone2.png
--- a/img/slogan.png
+++ b/img/slogan.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+	<meta charset="UTF-8">
			
 
				+	<meta name="viewport" content="width=device-width" , initial-scale=1, minimun-scale=1.0, maximum-scale=1.0,
			
 
				+		user-scalable=no />
			
 
				+	<link rel="stylesheet" type="text/css" href="css/index.css">>
			
 
				+	<title>说说-永不孤单</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+	<div class="content">
			
 
				+		<div class="content-area">
			
 
				+			<div class="l-bt">
			
 
				+				<div class="logo-area">
			
 
				+					<span class="logo"><img src="img/logo.png" alt=""></span>
			
 
				+					<span class="logo-tit"><img src="img/logo-tit.png" alt=""></span>
			
 
				+				</div>
			
 
				+				<div class="download">
			
 
				+					<div class="down-android">
			
 
				+						<button class="android" onmouseover="showAndroidDownloadPic()"
			
 
				+							onmouseout="hideAndroidDownloadPic()">安卓Android</button>
			
 
				+						<img src="img/android-200.png" alt="" class="android-pic">
			
 
				+					</div>
			
 
				+					<div class="down-ios">
			
 
				+						<button class="ios" onmouseover="showiOSDownloadPic()"
			
 
				+							onmouseout="hideiOSDownloadPic()">苹果iOS</button>
			
 
				+						<img src="img/ios-200.png" alt="" class="ios-pic">
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="slogan"><img src="img/slogan.png" alt=""></div>
			
 
				+			<div class="show-area">
			
 
				+				<img src="img/phone1.png" alt="" class="pic-1">
			
 
				+				<img src="img/phone2.png" alt="" class="pic-2">
			
 
				+			</div>
			
 
				+			<div class="tips">敬请期待</div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div class="footer"><span>版权所有 &copy; 北京暖光科技有限公司</span></div>
			
 
				+</body>
			
 
				+<script type="text/javascript" src="js/index.js"></script>
			
 
				+
			
 
				+</html>
			
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,48 @@
 
				+let tips = document.querySelector('.tips');
			
 
				+	let lib = {
			
 
				+		GetRequest: () => {
			
 
				+			let url = location.search; //获取url中"?"符后的字串
			
 
				+			let theRequest = new Object();
			
 
				+			if (url.indexOf("?") != -1) {
			
 
				+				let str = url.substr(1);
			
 
				+				strs = str.split("&");
			
 
				+				for (let i = 0; i < strs.length; i++) {
			
 
				+					theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			
 
				+				}
			
 
				+			}
			
 
				+			return theRequest;
			
 
				+		}
			
 
				+	}
			
 
				+	let params = lib.GetRequest();
			
 
				+	let from_xby = params['fromurl']
			
 
				+	if (from_xby === 'xby1' || from_xby === 'xby2' || from_xby === 'xby3') {
			
 
				+		document.querySelector('.android-pic').setAttribute('src', 'img/android-xby-200.png')
			
 
				+	}
			
 
				+
			
 
				+	function showDialog() {
			
 
				+		tips.style.display = 'block';
			
 
				+		setTimeout(hideDialog, 3000)
			
 
				+	}
			
 
				+
			
 
				+	function hideDialog() {
			
 
				+		tips.style.display = 'none'
			
 
				+	}
			
 
				+	let android = document.querySelector('.android-pic')
			
 
				+	let ios = document.querySelector('.ios-pic')
			
 
				+
			
 
				+	function showAndroidDownloadPic() {
			
 
				+		android.style.width = '100%'
			
 
				+		android.style.transition = 'all .5s ease-out'
			
 
				+	}
			
 
				+
			
 
				+	function hideAndroidDownloadPic() {
			
 
				+		android.style.width = '0%'
			
 
				+	}
			
 
				+	function showiOSDownloadPic() {
			
 
				+		ios.style.width = '100%'
			
 
				+		ios.style.transition = 'all .5s ease-out'
			
 
				+	}
			
 
				+
			
 
				+	function hideiOSDownloadPic() {
			
 
				+		ios.style.width = '0%'
			
 
				+	}