صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
waibao
/
NN2022090201
2
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

wesmiler ECY 画画交易平台

APPLE 3 سال پیش
والد
5bed253edc
کامیت
1fd353c976
6فایلهای تغییر یافته به همراه341 افزوده شده و 281 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 2 1
      .gitignore
  2. 69 83
      application/index/view/user/findpwd.html
  3. 77 195
      application/index/view/user/login.html
  4. 2 2
      application/shop/view/goods/index.html
  5. 17 0
      public/assets/shop/time/TweenMax.min.js
  6. 174 0
      public/assets/shop/time/style.css

+ 2 - 1
.gitignore
مشاهده فایل 

@@ -2,4 +2,5 @@
 
 /application/shop/view的副本/*
 
 /application/shop/view的副本/*
 
 /application/shop/*.zip
 
 /application/shop/*.zip
 
 /application/index/view/user-back/*
 
 /application/index/view/user-back/*
 
-/public/uploads/*
 
+/public/uploads/*
 
+/application/index/view/user-new/*

+ 69 - 83
application/index/view/user/findpwd.html
مشاهده فایل 

@@ -1,101 +1,87 @@
 
-<!DOCTYPE html>
 
-<html lang="en" class="no-js">
 
+<!doctype html>
 
+<html class="no-js">
 
 <head>
 
 <head>
 
-	<meta charset="UTF-8">
 
-	<title>找回密码</title>
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 	<meta name="description" content="">
 
 	<meta name="description" content="">
 
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 	<meta name="keywords" content="">
 
 	<meta name="keywords" content="">
 
-	<!-- Set render engine for 360 browser -->
 
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<title>注册</title>
 
 	<meta name="renderer" content="webkit">
 
 	<meta name="renderer" content="webkit">
 
+	<link rel="stylesheet" href="__CDN__/assets/index/css/amazeui.css">
 
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
 
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
 
-	<link rel="stylesheet" href="__CDN__/assets/shop/css/login/style.css">
 
+	<link rel="stylesheet" href="__CDN__/assets/index/css/login1.css" />
 
+	<style>
 
+	    .loginBg{    
+	        background: url({:config('site')['loginBg']});
 
+            background-size: cover;
 
+	        
+	    }
 
+	    .am-form input[type="text"], .am-form input[type="password"]{background:#fff;border-radius: 5px;}
 
+	    #goCode{margin-top:-5rem;}
 
+	    
+	    #yzmcode{height: 38px;}
 
+		.smsverfy{margin-left: 10%;}
 
+		.verifyimg{vertical-align:middle;cursor:pointer;height:39px;width: 40%;}
 
+	</style>
 
 </head>
 
 </head>
 
-<body>
 
-<div class="wrapper">
 
-	<div class="container">
 
-		<div class="sign-in-container">
 
-			<form id="forgetForm" onsubmit="return false;">
 
-				<h1>找回密码</h1>
 
-				<span>使用您的手机号码找回密码</span>
 
-				{:token()}
 
-				<input class="input" type="text" name="mobile" placeholder="手机号码">
 
-				<input class="input" type="password" name="password" placeholder="登录密码">
 
-				<input class="input" type="password" name="repassword" placeholder="再次输入密码">
 
-				<button class="form_btn" onclick="forget()">找回密码</button>
 
-				<a href="login.html" >返回</a>
 
+<body class="loginBg">
 
+<header data-am-widget="header" class="am-header am-header-default" style="background: transparent;">
 
+	<div class="am-header-left am-header-nav">
 
+		<a href="javascript:void(0);" onclick="javascript:history.back(-1);return false;"><i class=" am-header-icon am-icon-angle-left"></i></a>
 
+	</div>
 
+	<h1 class="am-header-title " style="">找回密码
 
+	</h1>
 
+</header>
 
+<div class="wapper fv" style="padding-top:80px;">
 
+	<div class="am-padding-left am-padding-right">
 
+		<form class="am-form" id="form1">
 
+			{:token()}
 
+				<div class="am-form-group">
 
+					<input type="text" name="mobile"  placeholder="请输入手机号">
 
+				</div>
 
+				<div class="am-form-group">
 
+					<input type="text" name="password" placeholder="请输入密码" maxlength="12" min="6">
 
+				</div>
 
+				<div class="am-form-group">
 
+					<input type="text" name="repassword" placeholder="请再次输入密码" maxlength="12" min="6">
 
+				</div>
 
 			</form>
 
 			</form>
 
+
 
 		</div>
 
 		</div>
 
+	<div class=" am-margin-xl">
 
+		<input type="button" class="am-btn am-btn-danger am-btn-block am-round" id="submit" value="找回密码">
 
 	</div>
 
 	</div>
 
 </div>
 
 </div>
 
-<!-- partial -->
 
 <script src="__CDN__/assets/index/js/jquery.min.js"></script>
 
 <script src="__CDN__/assets/index/js/jquery.min.js"></script>
 
 <script src="__CDN__/assets/index/js/amazeui.min.js"></script>
 
 <script src="__CDN__/assets/index/js/amazeui.min.js"></script>
 
 <script src="__CDN__/assets/libs/layer/layer.js"></script>
 
 <script src="__CDN__/assets/libs/layer/layer.js"></script>
 
-<script >
 
-	/**
 
-	 * 找回密码
 
-	 */
 
-	function forget(){
 
-		var dd = decodeURIComponent($("#forgetForm").serialize());
 
-		console.log($('#forgetForm')[0])
 
-		// var formData = new FormData($('#forgetForm')[0]);
 
-		var formData = getFormData('forgetForm');
 
-		console.log(formData)
 
-		// var formData = new FormData($('#forgetForm')[0]);
 
-		if(formData.mobile == ''){
 
-			layer.msg('请输入手机号');
 
-			return false;
 
-		}
 
-		if(formData.password == ''){
 
-			layer.msg('请输入密码');
 
-			return false;
 
-		}
 
-		if(formData.repassword == ''){
 
-			layer.msg('请输入再次输入密码');
 
-			return false;
 
-		}
 
-		console.log(formData)
 
-		$.ajax({
 
-			type: "POST",
 
-			url: "{:url('api/user/findpwd')}",
 
-			data: formData,
 
-			success: function(data) {
 
-				if(data.code>0)
 
-				{
 
-					layer.msg(data.msg,{time:1000},function(){
 
-						location='login.html';
 
-					});
 
-				}else{
 
-					layer.msg(data.msg);
 
-				}
 
-			},
 
-			error: function(XMLHttpRequest, textStatus, errorThrown) {
 
-				layer.msg("{:__('网络错误,请稍后重试')}");
 
-			}
 
-		});
 
-
 
-		return false;
 
-	}
 
-
 
-	/**
 
-	 * 获取表单格式化数据
 
-	 * @param id
 
-	 * @returns {{}}
 
-	 */
 
-	function getFormData(id){
 
-		var fields = {};
 
-		var arr = $("#"+id).serializeArray();
 
-		console.log(arr)
 
-		$.each(arr, function(k,item){
 
-			fields[item.name] = item.value;
 
-		})
 
-
 
-		return fields;
 
-	}
 
+<script>
 
+    //提交
 
+    $('#submit').click(function(){
 
+        var formData = new FormData($('#form1')[0]);
 
+        $.ajax({
 
+            type: "POST",
 
+            url: "{:url('api/user/findpwd')}",
 
+            data: formData,
 
+            contentType: false,
 
+            processData: false,
 
+            success: function(data) {
 
+                if(data.code>0)
 
+                {
 
+                    layer.msg(data.msg,{time:1000},function(){
 
+                        location='login.html';
 
+                    });
 
+                }else{
 
+                    layer.msg(data.msg);
 
+                }
 
+            },
 
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
 
+                layer.msg("{:__('网络错误,请稍后重试')}");
 
+            }
 
+        });
 
+    })
 
 
 
 </script>
 
 </script>
 
 </body>
 
 </body>
 
-</html>
 
+</html>

+ 77 - 195
application/index/view/user/login.html
مشاهده فایل 

@@ -1,213 +1,95 @@
 
-<!DOCTYPE html>
 
-<html lang="en" class="no-js">
 
+<!doctype html>
 
+<html class="no-js">
 
 <head>
 
 <head>
 
-	<meta charset="UTF-8">
 
-	<title>登录</title>
 
 	<meta charset="utf-8">
 
 	<meta charset="utf-8">
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 	<meta name="description" content="">
 
 	<meta name="description" content="">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 	<meta name="keywords" content="">
 
 	<meta name="keywords" content="">
 
+	<title>商城</title>
 
 	<!-- Set render engine for 360 browser -->
 
 	<!-- Set render engine for 360 browser -->
 
 	<meta name="renderer" content="webkit">
 
 	<meta name="renderer" content="webkit">
 
+	<link rel="stylesheet" href="__CDN__/assets/shop/css/normalize.css" />
 
+	<link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
 
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
 
 	<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
 
-	<link rel="stylesheet" href="__CDN__/assets/shop/css/login/style.css">
 
-</head>
 
-<body>
 
-<div class="wrapper">
 
-	<div class="container">
 
-		<div class="sign-up-container">
 
-			<form id="regForm" onsubmit="return false;">
 
-				<h1>创建账号</h1>
 
-				<div class="social-links">
 
-					<div>
 
-						<a><i class="fa fa-facebook" aria-hidden="true"></i></a>
 
-					</div>
 
-					<div>
 
-						<a><i class="fa fa-twitter" aria-hidden="true"></i></a>
 
-					</div>
 
-					<div>
 
-						<a><i class="fa fa-linkedin" aria-hidden="true"></i></a>
 
-					</div>
 
-				</div>
 
-				<span>或者使用您的手机号码</span>
 
-				{:token()}
 
-				<input class="input" type="text" name="mobile" placeholder="手机号码">
 
-				<input class="input" type="email" name="referee" placeholder="邀请码">
 
-				<input class="input" type="password" name="password" placeholder="登录密码">
 
-				<input class="input" type="password" name="password2" placeholder="安全密码">
 
-				<label class="am-checkbox am-secondary am-padding-top-0">
 
-					<input type="checkbox" data-am-ucheck value=""> 我同意<a class="publish" onclick="showAgree()">《注册协议》</a>条款
 
-				</label>
 
-				<button class="form_btn" onclick="register()">注册</button>
 
-				<span id="signIn">登录</span>
 
-			</form>
 
-		</div>
 
-		<div class="sign-in-container">
 
-			<form id="loginForm" onsubmit="return false;">
 
-				<h1>登录</h1>
 
-				<div class="social-links">
 
-					<div>
 
-						<a><i class="fa fa-facebook" aria-hidden="true"></i></a>
 
-					</div>
 
-					<div>
 
-						<a><i class="fa fa-twitter" aria-hidden="true"></i></a>
 
-					</div>
 
-					<div>
 
-						<a><i class="fa fa-linkedin" aria-hidden="true"></i></a>
 
-					</div>
 
-				</div>
 
-				<span>或者使用你的账号</span>
 
-				{:token()}
 
-				<input class="input" type="text" name="account" placeholder="手机号码">
 
-				<input class="input" type="password" name="password" placeholder="登录密码">
 
-				<input class="input" type="text" name="studio" placeholder="商家编号">
 
-				<div class="action">
 
-					<a href="findpwd.html" class="am-u-sm-6" style="color: #fff;">忘记密码</a>
 
-					<a href="{:config('site')['appdowm']}" style="color: #fff;" class="download">下载App</a>
 
-				</div>
 
-				<button class="form_btn" onclick="login()">登录</button>
 
-				<span id="signUp" >注册</span>
 
-			</form>
 
-		</div>
 
-	</div>
 
-</div>
 
-<!-- partial -->
 
-{php}$art1=db('article')->where(['catid'=>3,'status'=>1])->find();{/php}
 
-<script src="__CDN__/assets/index/js/jquery.min.js"></script>
 
-<script src="__CDN__/assets/index/js/amazeui.min.js"></script>
 
-<script src="__CDN__/assets/libs/layer/layer.js"></script>
 
-<script >
 
-	$(function(){
 
-		$("#signUp").click(function(){
 
-			$(".container").addClass('right-panel-active')
 
-		})
 
-
 
-		$("#signIn").click(function(){
 
-			$(".container").removeClass('right-panel-active')
 
-		})
 
-	})
 
-
 
-	/**
 
-	 * 登录
 
-	 */
 
-	function login(){
 
-		var formData = getFormData('loginForm');
 
-		if(formData.account == ''){
 
-			layer.msg('请输入手机号');
 
-			return false;
 
-		}
 
-		if(formData.password == ''){
 
-			layer.msg('请输入登录密码');
 
-			return false;
 
-		}
 
-		if(formData.studio == ''){
 
-			layer.msg('请输入商家编号');
 
-			return false;
 
-		}
 
-		$.ajax({
 
-			type: "POST",
 
-			url: "{:url('user/login')}",
 
-			data: formData,
 
-			success: function(data) {
 
-				console.log(data);
 
-				layer.msg(data.msg,{time:1200},function(){
 
-					if(data.code >0 )
 
-					{
 
-						// location='/shop/index/run';
 
-						location='/shop/index/index';
 
-					}else{
 
-						location.reload()
 
-					}
 
-				});
 
-			},
 
-			error: function(XMLHttpRequest, textStatus, errorThrown) {
 
-				layer.msg("{:__('网络错误,请稍后重试')}");
 
-			}
 
-		});
 
-	}
 
-
 
-	/**
 
-	 * 注册协议
 
-	 */
 
-	function showAgree(){
 
-		layer.alert('{$art1["content"]}',{title:'注册协议',area:['90%','90%']});
 
-	}
 
-
 
-	/**
 
-	 * 注册
 
-	 */
 
-	function register(){
 
-		var formData = getFormData('registerForm');
 
-		if(formData.mobile == ''){
 
-			layer.msg('请输入手机号');
 
-			return false;
 
-		}
 
-		if(formData.referee == ''){
 
-			layer.msg('请输入邀请码');
 
-			return false;
 
+	<link rel="stylesheet" href="__CDN__/assets/shop/css/login.css">
 
+	<style>
 
+		body {
 
+			background: url('{$loginbg}');
 
+			background-size: cover;
 
 		}
 
 		}
 
-		if(formData.password == ''){
 
-			layer.msg('请输入登录密码');
 
-			return false;
 
+		.name{
 
+			font-size: 2rem;
 
+			color: #fff;
 
+			font-weight: bold;
 
 		}
 
 		}
 
-		if(formData.password2 == ''){
 
-			layer.msg('请输入安全密码');
 
-			return false;
 
-		}
 
-		layer.open({
 
-			type: 1
 
-			,title: false //不显示标题栏
 
-			,closeBtn: false
 
-			,area: ['90%','90%']
 
-			,shade: 0.8
 
-			,id: 'LAY_layuipro' //设定一个id，防止重复弹出
 
-			,btn: ['已阅读', '取消']
 
-			,btnAlign: 'c'
 
-			,moveType: 1 //拖拽模式，0或者1
 
-			,content: '<div style="padding:  10px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">{$art1["content"]}</div>'
 
-			,yes: function(){
 
-				layer.close(layer.index);
 
-				parent.$('input[type=checkbox]').prop('checked',true);
 
-				var formData = new FormData($('#form1')[0]);
 
-				$.ajax({
 
-					type: "POST",
 
-					url: "{:url('api/user/register')}",
 
-					data: formData,
 
-					success: function (data) {
 
-						if (data.code > 0) {
 
-							layer.msg(data.msg, {time: 1200}, function () {
 
-								location = 'login.html';
 
-							});
 
-						} else {
 
-							layer.msg(data.msg);
 
-						}
 
-					},
 
-					error: function (XMLHttpRequest, textStatus, errorThrown) {
 
-						layer.msg("{:__('网络错误,请稍后重试')}");
 
-					}
 
-				});
 
+	</style>
 
+</head>
 
+<body data-html="login">
 
 
 
+<!-- form -->
 
+<div class="pos_re am-padding-top-lg" >
 
+	<div class="am-text-center am-padding-top-sm am-padding-bottom-sm">
 
+		<img src="{$logoimg}"style="width: 100px;border-radius: 100%;">
 
+		<p class="name">{$siteName}</p>
 
+	</div>
 
+	<div class="form-box  am-margin-left am-margin-right am-radius"  style="margin-top:2rem;background:ffffff69;    border-radius: 10px;">
 
+		<form class="am-form am-padding-left am-padding-right" id="form1" style="padding-top:4rem;padding-bottom: 2rem;">
 
+			{:token()}
 
+			<div class="am-form-group am-form-icon am-margin-bottom-lg">
 
+				<img class="icons" src="__CDN__/assets/shop/img/login_user.png" >
 
+				<input type="text" class="am-form-field am-input-lg" placeholder="请输入手机号" value="" name="account">
 
+			</div>
 
+			<div class="am-form-group am-form-icon">
 
+				<img class="icons" src="__CDN__/assets/shop/img/login_pwd.png" >
 
+				<input type="password" class="am-form-field" placeholder="请输入登录密码" value="" name="password">
 
+			</div>
 
+			<div class="am-form-group am-form-icon">
 
+				<img class="icons" src="__CDN__/assets/shop/img/login_verify.png" >
 
+				<input type="text" class="am-form-field am-input-lg" placeholder="请输入商家编号" value="" name="studio">
 
+			</div>
 
+			<div class="am-form-group am-form-icon am-margin-top-lg am-margin-bottom-lg">
 
+				<button type="button" class="am-btn am-btn-danger am-round am-btn-block " id="submit">登录</button>
 
+			</div>
 
+			<div class="am-g">
 
+				<a href="findpwd.html" class="am-u-sm-6" style="color: #fff;">忘记密码</a>
 
+				<a href="{:config('site')['appdowm']}" style="color: #fff;" class="am-u-sm-6 am-text-right">下载App</a>
 
+			</div>
 
+		</form>
 
 
 
-			}
 
-		});
 
-	}
 
+	</div>
 
 
 
-	/**
 
-	 * 获取表单格式化数据
 
-	 * @param id
 
-	 * @returns {{}}
 
-	 */
 
-	function getFormData(id){
 
-		var fields = {};
 
-		var arr = $("#"+id).serializeArray();
 
-		console.log(arr)
 
-		$.each(arr, function(k,item){
 
-			fields[item.name] = item.value;
 
-		})
 
+</div>
 
+<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
 
+<script src="__CDN__/assets/shop/js/amazeui.js"></script>
 
+<script src="__CDN__/assets/libs/layer/layer.js"></script>
 
+<script>
 
 
 
-		return fields;
 
-	}
 
+    $('#submit').click(function(){
 
+        var formData = new FormData($('#form1')[0]);
 
+        $.ajax({
 
+            type: "POST",
 
+            url: "{:url('user/login')}",
 
+            data: formData,
 
+            contentType: false,
 
+            processData: false,
 
+            success: function(data) {
 
+                console.log(data);
 
+                layer.msg(data.msg,{time:1000},function(){
 
+                    if(data.code >0 )
 
+                    {
 
+                        // location='/shop/index/run';
 
+                        location='/shop/index/index';
 
+                    }else{
 
+                        location=location;
 
+                    }
 
+                });
 
+            },
 
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
 
+                layer.msg("{:__('网络错误,请稍后重试')}");
 
+            }
 
+        });
 
+    });
 
 </script>
 
 </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 2 - 2
application/shop/view/goods/index.html
مشاهده فایل 

@@ -53,8 +53,8 @@
 
         .header .shop-name {
 
         .header .shop-name {
 
             position: absolute;
 
             position: absolute;
 
             z-index: 2;
 
             z-index: 2;
 
-            width: 138px;
 
-            bottom: 90px;
 
+            width: 14rem;
 
+            bottom: 9rem;
 
             right: 0;
 
             right: 0;
 
             margin: auto;
 
             margin: auto;
 
             border-radius: 4px;
 
             border-radius: 4px;

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 17 - 0
public/assets/shop/time/TweenMax.min.js


+ 174 - 0
public/assets/shop/time/style.css
مشاهده فایل 

@@ -0,0 +1,174 @@
 
+@charset "utf-8";

+body {

+  background-color: #f2f1ed;

+}

+

+.wrap {

+  position: absolute;

+  bottom: 0;

+  top: 0;

+  left: 0;

+  right: 0;

+  margin: auto;

+  height: 310px;

+}

+

+a {

+  text-decoration: none;

+  color: #1a1a1a;

+}

+

+h1 {

+  margin-bottom: 60px;

+  text-align: center;

+  font: 300 2.25em "Lato";

+  text-transform: uppercase;

+}

+h1 strong {

+  font-weight: 400;

+  color: #ea4c4c;

+}

+

+h2 {

+  margin-bottom: 80px;

+  text-align: center;

+  font: 300 0.7em "Lato";

+  text-transform: uppercase;

+}

+h2 strong {

+  font-weight: 400;

+}

+

+.countdown {

+  width: 720px;

+  margin: 0 auto;

+}

+.countdown .bloc-time {

+  float: left;

+  margin-right: 45px;

+  text-align: center;

+}

+.countdown .bloc-time:last-child {

+  margin-right: 0;

+}

+.countdown .count-title {

+  display: block;

+  margin-bottom: 15px;

+  font: normal 1.24em "Lato";

+  color: #1a1a1a;

+  text-transform: uppercase;

+}

+.countdown .figure {

+  position: relative;

+  float: left;

+  height: 110px;

+  width: 100px;

+  margin-right: 10px;

+  background-color: #fff;

+  border-radius: 8px;

+  -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);

+  -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);

+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);

+}

+.countdown .figure:last-child {

+  margin-right: 0;

+}

+.countdown .figure > span {

+  position: absolute;

+  left: 0;

+  right: 0;

+  margin: auto;

+  font: normal 5.94em/107px "Lato";

+  font-weight: 700;

+  color: #de4848;

+}

+.countdown .figure .top:after, .countdown .figure .bottom-back:after {

+  content: "";

+  position: absolute;

+  z-index: -1;

+  left: 0;

+  bottom: 0;

+  width: 100%;

+  height: 100%;

+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

+}

+.countdown .figure .top {

+  z-index: 3;

+  background-color: #f7f7f7;

+  transform-origin: 50% 100%;

+  -webkit-transform-origin: 50% 100%;

+  -moz-border-radius-topleft: 10px;

+  -webkit-border-top-left-radius: 10px;

+  border-top-left-radius: 10px;

+  -moz-border-radius-topright: 10px;

+  -webkit-border-top-right-radius: 10px;

+  border-top-right-radius: 10px;

+  -moz-transform: perspective(200px);

+  -ms-transform: perspective(200px);

+  -webkit-transform: perspective(200px);

+  transform: perspective(200px);

+}

+.countdown .figure .bottom {

+  z-index: 1;

+}

+.countdown .figure .bottom:before {

+  content: "";

+  position: absolute;

+  display: block;

+  top: 0;

+  left: 0;

+  width: 100%;

+  height: 50%;

+  background-color: rgba(0, 0, 0, 0.02);

+}

+.countdown .figure .bottom-back {

+  z-index: 2;

+  top: 0;

+  height: 50%;

+  overflow: hidden;

+  background-color: #f7f7f7;

+  -moz-border-radius-topleft: 10px;

+  -webkit-border-top-left-radius: 10px;

+  border-top-left-radius: 10px;

+  -moz-border-radius-topright: 10px;

+  -webkit-border-top-right-radius: 10px;

+  border-top-right-radius: 10px;

+}

+.countdown .figure .bottom-back span {

+  position: absolute;

+  top: 0;

+  left: 0;

+  right: 0;

+  margin: auto;

+}

+.countdown .figure .top, .countdown .figure .top-back {

+  height: 50%;

+  overflow: hidden;

+  -moz-backface-visibility: hidden;

+  -webkit-backface-visibility: hidden;

+  backface-visibility: hidden;

+}

+.countdown .figure .top-back {

+  z-index: 4;

+  bottom: 0;

+  background-color: #fff;

+  -webkit-transform-origin: 50% 0;

+  transform-origin: 50% 0;

+  -moz-transform: perspective(200px) rotateX(180deg);

+  -ms-transform: perspective(200px) rotateX(180deg);

+  -webkit-transform: perspective(200px) rotateX(180deg);

+  transform: perspective(200px) rotateX(180deg);

+  -moz-border-radius-bottomleft: 10px;

+  -webkit-border-bottom-left-radius: 10px;

+  border-bottom-left-radius: 10px;

+  -moz-border-radius-bottomright: 10px;

+  -webkit-border-bottom-right-radius: 10px;

+  border-bottom-right-radius: 10px;

+}

+.countdown .figure .top-back span {

+  position: absolute;

+  top: -100%;

+  left: 0;

+  right: 0;

+  margin: auto;

+}