webfront / fupai · 提交

转到一个项目

作者 吴孟雨
提交 b49982a7cd6898d52ed41e183a554c108a3e586a 0 个父辈

init

内嵌 并排对比
正在显示 35 个修改的文件 包含 1540 行增加 和 0 行删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>我的福牌</title>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/fontsize.js"></script>
<link href="css/blessing.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="cards-list">
<div class="item" onclick="enter()">
<image src="./images/bpic01@2x.png" class="img"></image>
<div class="right">
<div class="name">天津大悲院</div>
<div class="author">萧何</div>
<div class="time">2018年10月16日-2019年10月16日</div>
</div>
</div>
<div class="item" onclick="enter()">
<image src="./images/bpic01@2x.png" class="img"></image>
<div class="right">
<div class="name">天津大悲院</div>
<div class="author">萧何</div>
<div class="time">2018年10月16日-2019年10月16日</div>
</div>
</div>
</div>
</div>
</body>
<script>
function enter() {
window.location.href='./cards-detail.html';
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>我的福牌</title>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/fontsize.js"></script>
<link href="css/cards.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="head">
<div class="border-line">
<div class="order-num">编号:201807122659</div>
</div>
<div class="center">
<div class="author">萧何</div>
<div class="area">武财神内区 3行-6列</div>
<div class="term">预定为固定期限1年</div>
<div class="term-of-validity">2018年10月16日-2019年10月16日</div>
</div>
<div class="renew-box">
<div class="renew-btn">续费</div>
</div>
</div>
<div class="bottom">
<div class="border-box">
<div class="name">福牌信息</div>
<div class="edit" onclick="enter()">
<div class="name-info">信息有误，要修改</div>
<image src="./images/bicon03@2x.png" class="arrow"></image>
</div>
</div>
</div>
<div class="personal-info">
<div class="top">
<image src="./images/head01@2x.png" class="avatar"></image>
<div class="detail">
<div class="support">奉养人:萧何</div>
<div class="blessing">祈祷语:祝你平平安安，幸福健康</div>
</div>
</div>
<div class="img-box">
<image src="./images/bicon02@2x.png" class="image"></image>
</div>
</div>
</div>
</body>
<script>
function enter() {
window.location.href='./edit.html';
}
</script>
</html>
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
background-color: #f5f6fa;
}
.content {
}
.head {
width: 100%;
background-color: #fff;
padding: 0.38rem 1.77rem 0.58rem 1.77rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.24rem;
}
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
}
.area {
color: #000000;
font-size: 0.36rem;
font-weight: bold;
margin-bottom: 0.31rem;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 0.36rem;
}
.seat-num {
/*width: 1.8rem;*/
height: 0.72rem;
line-height: 0.72rem;
/*border: 1px solid #DD3E34;*/
border-radius: 0.36rem;
color: #DD3E34;
background-color: #fff;
font-size: 0.24rem;
/*margin-right: 0.36rem;*/
}
.reset {
width: 1.8rem;
height: 0.72rem;
line-height: 0.72rem;
background-color: #DD3E34;
color: #ffffff;
border-radius: 0.36rem;
font-size: 0.3rem;
box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1) ); /* 标准的语法 */
}
.tips {
color: #979DA8;
font-size: 0.24rem;
}
.seat-list {
}
.list-item {
/*padding: 0 0.32rem;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 0.16rem;
}
.line-num {
font-weight: bold;
font-size: 0.26rem;
color: #292525;
height: 0.6rem;
line-height: 0.6rem;
padding: 0 0.32rem;
border-bottom: 1px solid #EBEBEB;
}
.column-list {
display: flex;
justify-content: space-between;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
padding: 0.16rem 0.32rem 0.21rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item {
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
margin-right: 0.08rem;
position: relative;
}
.column-list .item:last-child {
padding-right: 0.32rem;
}
.img {
width: 1.16rem;
height: 1.7rem;
margin-bottom: 0.1rem;
}
.column-num {
font-size: 0.24rem;
color: #000000;
}
.modal {
width: 1.16rem;
height: 1.7rem;
background-color: #000000;
opacity: 0.5;
/*display: none;*/
position: absolute;
top: 0;
left: 0;
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
}
.content {
width: 100%;
}
.cards-list {
width: 100%;
display: flex;
flex-direction:column;
padding: 0 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item {
width: 100%;
padding: 0.36rem 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.right {
display: flex;
flex-direction: column;
flex:1;
margin-left: 0.32rem;
}
.item .img {
width: 1.8rem;
height: 1.8rem;
}
.name {
color: #000000;
font-size: 0.32rem;
margin-bottom: 0.3rem;
}
.author {
color: #666666;
font-size: 0.26rem;
margin-bottom: 0.29rem;
}
.time {
color:#53555C;
font-size: 0.24rem;
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
}
.content {
background-color: #f5f6fa;
}
.head {
background-color: #fff;
}
.border-line {
padding: 0.32rem 0.43rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
}
.order-num {
font-size: 0.26rem;
color: #1A1A1A;
}
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0.36rem 0.42rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #ebebeb;
}
.author {
font-size: 0.26rem;
color: #1A1A1A;
font-weight: bold;
margin-bottom: 0.23rem;
}
.area{
color: #000000;
font-size: 0.28rem;
font-weight: bold;
margin-bottom: 0.23rem;
}
.term, .term-of-validity{
color: #53555C;
font-size: 0.26rem;
margin-bottom: 0.23rem;
}
.term-of-validity {
margin-bottom: 0;
}
.renew-box {
width: 100%;
height: 1.08rem;
padding: 0.24rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 0.16rem;
}
.renew-btn {
width: 1.8rem;
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
background-color: #E04338;
color: #ffffff;
font-size: 0.26rem;
border-radius: 0.3rem;
}
.bottom {
background-color: #fff;
padding: 0.31rem 0.37rem 0.32rem 0.37rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #EBEBEB;
}
.border-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.avatar-img {
width: 0.84rem;
height: 0.84rem;
}
.edit {
display: flex;
align-items: center;
justify-content: space-between;
color: #666666;
font-size: 0.26rem;
}
.arrow {
margin-left: 0.16rem;
width: 0.16rem;
height: 0.28rem;
}
.name {
font-size: 0.3rem;
color: #000000;
font-weight: bold;
}
.personal-info {
width: 100%;
padding: 0.24rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}
.top {
display: flex;
align-items: center;
}
.avatar {
width: 0.99rem;
height: 0.99rem;
border-radius: 50%;
}
.detail {
display: flex;
flex:1;
flex-direction: column;
justify-content: space-between;
margin-left: 0.25rem;
}
.support, .blessing {
font-size: 0.28rem;
color: #000000;
}
.support {
margin-bottom: 0.23rem;
}
.img-box {
margin-top: 0.31rem;
text-align: center;
}
.image {
width: 3.12rem;
height: 4.55rem;
}
.name-info {
text-align: right;
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
}
.content {
/*width: 7.5rem;*/
/*height: 12.06rem;*/
width: 100%;
height: 100%;
background-image: url('../images/bbg01@2x.png');
background-repeat: no-repeat;
background-position:center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: fixed;
}
.head {
padding: 0.81rem 1.69rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #000000;
text-align: center;
}
.title {
font-size: 0.36rem;
margin-bottom: 0.16rem;
font-weight: bold;
}
.tips {
font-size: 0.28rem;
font-weight: bold;
}
.swiper-list {
padding: 0 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
.swiper-item {
width: 1.2rem;
height: 7.11rem;
background-image: url('../images/bele01@2x.png');
background-repeat: no-repeat;
background-position:center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/*position: fixed;*/
color: #6A3706;
font-size: 0.64rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
}
.name {
/*margin-top: 1.77rem;*/
}
.number {
font-size: 0.36rem;
position: absolute;
bottom: 0.42rem;
left: 0.34rem;
/*margin-bottom: 0.42rem;*/
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
}
.btn {
background-color: #DD3E34;
border-radius: 0.36rem;
}
.btn .reset {
width: 100%;
}
.name-info {
border: none;
line-height: 1rem;
width: 100%;
font-size: 0.26rem;
text-align: right;
outline: none;
}
.edit-box {
flex: 1;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
height: 1rem;
}
\ No newline at end of file
... ...
body, html {
margin: 0;
padding: 0;
background-color: #f5f6fa;
}
.head {
width: 100%;
height: 0.88rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}
.city {
/*width: 20%;*/
position: relative;
margin-right: 0.34rem;
display: flex;
align-items: baseline;
}
.city div {
color: #292625;
font-size: 0.26rem;
line-height: 0.88rem;
margin-right: 0.1rem;
}
.city_name {
position: relative;
}
.city img {
width: 0.1rem;
height: 0.1rem;
position: absolute;
right: -0.2rem;
bottom: 0.3rem;
}
.input-box {
flex: 1;
height: 0.64rem;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FAFAFA;
border-radius: 0.32rem;
font-size: 0.26rem;
padding: 0 0.31rem;
}
.input-box input {
border: none;
outline: none;
font-size: 0.26rem;
background-color: #FAFAFA;
/*padding: 0 0.31rem;*/
}
.icon {
width: 0.33rem;
height: 0.33rem;
}
.section {
margin-top: 0.16rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-item {
padding: 0.28rem 0.4rem 0.26rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 0.07rem;
}
.list-item .img {
width: 3rem;
height: 3.02rem;
}
.list-item .name {
color: #000000;
font-size: 0.28rem;
margin-bottom:0.18rem;
}
.people-num {
font-size: 0.25rem;
color: #666666;
}
.people-num span {
color: #FF0000;
font-size: 0.32rem;
}
.enter {
width: 1rem;
height: 0.5rem;
color: #ffffff;
font-size: 0.28rem;
background-color: #9D0A00;
border-radius: 0.25rem;
text-align: center;
position: absolute;
right: 0.2rem;
bottom: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
... ...
body, html {
margin: 0;
padding: 0;
}
.content {
/*width: 7.5rem;*/
/*height: 12.06rem;*/
width: 100%;
height: 100%;
background-image: url('../images/abg01@2x.png');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: fixed;
}
.input-box {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3.6rem;
}
.top-input, .bottom-input {
width: 100%;
/*height: 4rem;*/
padding: 0 1.15rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0.8rem;
}
.phone-icon {
width: 0.24rem;
height: 0.35rem;
margin-right: 0.26rem;
}
.code-icon {
width: 0.32rem;
height: 0.34rem;
margin-right: 0.26rem;
}
.phone-input, .code-input {
border: none;
width: 5.2rem;
height: 1rem;
font-size: 0.28rem;
background-color: transparent;
outline: none;
}
.input-code-box {
display: flex;
align-items: center;
}
.code-input {
/*width: 20%;*/
width: 2rem;
}
.border-line-box, .border-line-box2 {
border-bottom: 1px solid #DEDEDE;
display: flex;
align-items: center;
justify-content: space-between;
}
.getCode {
border: none;
background: none;
font-size: 0.24rem;
color: #FE0A01;
outline: none;
}
.next-btn {
width: 100%;
height: 0.88rem;
padding: 2.08rem 1.95rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.next {
width: 3.6rem;
line-height: 0.88rem;
font-size: 0.32rem;
color: #ffffff;
border-radius: 0.44rem;
border: none;
/*box-shadow: 0.15rem 0.15rem 5 #FE0A01;*/
/*box-shadow: 2px 26px 40px #F8CDCA;*/
box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* 标准的语法 */
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
}
.name-box, .age-box, .sex-box, .family-box{
width: 100%;
height: 1rem;
display: flex;
align-items: center;
font-size: 0.3rem;
color: #000000;
margin-bottom: 0.3rem;
padding: 0 0.33rem;
}
.family-box{
margin-bottom: 3.5rem;
}
.name-box input, .age-box input, .sex-box input, .family-box input {
border: none;
font-size: 0.28rem;
color: #1A1A1A;
line-height: 1rem;
outline: none;
background: none;
}
.input-box {
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #ebebeb;
}
.input-box text {
margin-right: 0.36rem;
}
.man, .women {
/*padding: 0.17rem 0.46rem;*/
width: 1.18rem;
height: 0.6rem;
background-color: #fff;
border: 1px solid #DD3D32;
border-radius: 0.3rem;
color: #DD3D32;
margin-right: 0.24rem;
text-align: center;
font-size: 0.28rem;
display: flex;
align-items: center;
justify-content: center;
}
.sex-box {
border-bottom: 0.16rem solid #fcfbfa;
}
.sex-box .input-box {
border-bottom: 0;
}
.family-box {
height: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.family-box .input-box {
height: 1rem;
}
.family-box .input-box text {
line-height: 1rem;
}
.family-box input {
height: 1rem;
}
.address-input .input{
width: 7rem;
}
.footer {
width: 100%;
height: 0.88rem;
padding: 0 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*position: fixed;*/
/*bottom: 0.32rem;*/
/*left: 0;*/
}
.confirm-btn {
width: 100%;
line-height: 0.88rem;
text-align: center;
color: #ffffff;
font-size: 0.32rem;
border-radius: 0.44rem;
box-shadow: 0 0.15rem 0.3rem 0 #F8CDCA;
background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1) ); /* 标准的语法 */
}
.active{
background: #DD3D32;
color: #fff;
}
\ No newline at end of file
... ...
body, html{
margin: 0;
padding: 0;
}
.head {
width: 100%;
background-color: #fff;
padding: 0.38rem 1.36rem 0.4rem 1.36rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.16rem;
}
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
}
.area, .line-column{
color: #000000;
font-size: 0.36rem;
font-weight: bold;
margin-bottom: 0.31rem;
}
.line-column {
margin-bottom: 0.5rem;
}
.term, .term-of-validity{
color: #53555C;
font-size: 0.28rem;
margin-bottom: 0.3rem;
}
.term-of-validity {
margin-bottom: 0.5rem;
}
.price {
color:#17181A;
font-size: 0.28rem;
font-weight: bold;
}
.section {
width: 100%;
background: #fff;
}
.section .title {
height: 0.6rem;
line-height: 0.6rem;
font-size: 0.26rem;
color: #292525;
padding: 0 0.37rem;
font-weight: bold;
border-bottom: 1px solid #EBEBEB;
}
.avatar-box, .name-box {
width: 100%;
height: 1.08rem;
padding: 0.13rem 0.32rem 0.11rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.border-box {
height: 1.08rem;
border-bottom: 1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
}
.avatar-img {
width: 0.84rem;
height: 0.84rem;
border-radius: 50%;
}
.edit {
display: flex;
align-items: center;
justify-content: space-between;
color: #666666;
font-size: 0.26rem;
}
.arrow {
margin-left: 0.16rem;
width: 0.16rem;
height: 0.28rem;
}
.name {
font-size: 0.3rem;
color: #000000;
font-weight: bold;
}
.name-input {
border: none;
outline: none;
width: 0.6rem;
height: 1.08rem;
font-size: 0.26rem;
}
.bless-box {
width: 100%;
padding: 0.35rem 0.32rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
align-items: center;
}
.bless-box .bless-title {
width: 16%;
color: #000000;
font-size: 0.3rem;
font-weight: bold;
margin-right: 0.5rem;
}
.bless-box .bless-input {
color: #666666;
font-size: 0.26rem;
border: none;
outline: none;
flex: 1;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
margin: 0 0.32rem 0.24rem 0.32rem;
}
.seat-num {
width: 3.23rem;
height: 0.72rem;
line-height: 0.72rem;
border: 1px solid #DD3E34;
border-radius: 0.36rem;
color: #DD3E34;
background-color: #fff;
font-size: 0.28rem;
margin-right: 0.36rem;
}
.reset {
width: 3.23rem;
height: 0.72rem;
line-height: 0.72rem;
background-color: #DD3E34;
color: #ffffff;
border-radius: 0.36rem;
font-size: 0.3rem;
box-shadow: 0 0.15rem 0.25rem 0 #F8CDCA;
background: -webkit-linear-gradient(left, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, RGBA(233, 91, 81, 1), RGBA(221, 60, 49, 1)); /* 标准的语法 */
}
.list_input{
width: 1.5rem;
text-align: right;
position: relative;
}
.list_input input{
border: none;
outline: none;
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>我的福牌</title>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/fontsize.js"></script>
<link href="css/edit.css" rel="stylesheet">
<link href="css/temple.css" rel="stylesheet">
</head>
<body>
<div class="section">
<div class="title">福牌显示信息</div>
<div class="avatar-box">
<div class="border-box">
<image src="./images/head01@2x.png" class="avatar-img"></image>
<div class="edit">
<div class="list_input">
<input type="file" value="">
编辑头像
</div>
<image src="./images/bicon03@2x.png" class="arrow"></image>
</div>
</div>
</div>
<div class="name-box">
<div class="border-box">
<div class="name">姓名</div>
<!--<input type="text" placeholder="" class="name-input"/>-->
<div class="edit-box">
<input class="name-info" type="text" placeholder="" ></input>
<image src="./images/bicon03@2x.png" class="arrow"></image>
</div>
</div>
</div>
<div class="bless-box">
<div class="bless-title">祈祷语</div>
<input type="text" placeholder="请输入祈祷语" class="bless-input"/>
</div>
<div class="footer">
<div class="btn">
<!--<div class="seat-num">重新选区</div>-->
<div class="reset" onclick="confirm()">确定</div>
</div>
</div>
</div>
</body>
<script>
function confirm() {
window.history.go(-1);
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>预定具体财神灯位置</title>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../js/fontsize.js"></script>
<link href="../css/appointment.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="head">
<div class="center">
<div class="area"># 武财神内区 #</div>
<div class="seat-num">46个空位</div>
<div class="btn">
<div class="reset" onclick="resetChoose()">重新选区</div>
</div>
<div class="tips">灯暗的为可选，灯亮的为已被预定</div>
</div>
</div>
<div class="seat-list">
<div class="list-item">
<div class="line-num">一行</div>
<div class="column-list">
<div class="item" onclick="showModal()">
<div class="modal"></div>
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="enter()">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="showModal()">
<div class="modal"></div>
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="enter()">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="enter()">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="enter()">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item" onclick="showModal()">
<div class="modal"></div>
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
</div>
</div>
<div class="list-item" onclick="enter()">
<div class="line-num">二行</div>
<div class="column-list">
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
<div class="item">
<image src="../images/bicon01@2x.png" class="img"></image>
<div class="column-num">9列</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
function enter() {
window.location.href='./temple-info.html';
}
function resetChoose() {
window.history.go(-1);
}
function showModal() {
alert("不能选择")
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>福牌公众号</title>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../js/fontsize.js"></script>
<link href="../css/detail.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="head">
<div class="title">预定财神庙财神灯供奉</div>
<div class="tips">选择区域:左右滑动查看所有区域</div>
</div>
<div class="swiper-list">
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">Q</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
<div class="swiper-item" onclick="enter()">
<div class="name">武财神外</div>
<div class="number">95</div>
</div>
</div>
</div>
</body>
<script>
function enter() {
window.location.href='./appointment-seat.html';
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>福牌公众号</title>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../js/fontsize.js"></script>
<link href="../css/home-index.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="head">
<div class="city">
<div class="city_name">
<text>北京</text>
<image src="../images/aicon03@2x.png"></image>
</div>
</div>
<div class="input-box">
<input type="text" class="search-input" placeholder="输入寺庙名称"/>
<image src="../images/fangdajing.png" class="icon" onclick="enterSearch()"></image>
</div>
</div>
<div class="section">
<div class="list-item" onclick="enter()">
<image src="../images/aicon01@2x.png" class="img"></image>
<div class="name">天津大悲禅院</div>
<div class="people-num">已有<span>4268</span>人供奉</div>
<div class="enter">进入</div>
</div>
<div class="list-item">
<image src="../images/aicon01@2x.png" class="img"></image>
<div class="name">天津大悲禅院</div>
<div class="people-num">已有<span>4268</span>人供奉</div>
<div class="enter">进入</div>
</div>
<div class="list-item">
<image src="../images/aicon01@2x.png" class="img"></image>
<div class="name">天津大悲禅院</div>
<div class="people-num">已有<span>4268</span>人供奉</div>
<div class="enter">进入</div>
</div>
</div>
</div>
</body>
<script>
function enter() {
window.location.href = './detail.html';
}
function enterSearch() {
window.location.href = '../blessing-cards.html';
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>财神庙</title>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../js/fontsize.js"></script>
<link href="../css/temple.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="head">
<div class="center">
<div class="area"># 武财神内区 #</div>
<div class="line-column">3行-6列</div>
<div class="term">预定为固定期限1年</div>
<div class="term-of-validity">2018年10月16日-2019年10月16日</div>
<div class="price">价格：1800元</div>
</div>
</div>
<div class="section">
<div class="title">福牌显示信息</div>
<div class="avatar-box" onclick="editAvatar()">
<div class="border-box">
<image src="../images/head01@2x.png" class="avatar-img"></image>
<div class="edit">
<div class="">编辑头像</div>
<image src="../images/bicon03@2x.png" class="arrow"></image>
</div>
</div>
</div>
<div class="name-box" onclick="editAvatar()">
<div class="border-box">
<div class="name">姓名</div>
<!--<input type="text" placeholder="" class="name-input"/>-->
<div class="edit">
<div class="name-info">向昱筱</div>
<image src="../images/bicon03@2x.png" class="arrow"></image>
</div>
</div>
</div>
<div class="bless-box">
<div class="bless-title">祈祷语</div>
<div class="bless-input"><input type="text" placeholder="请输入祈祷语" class="bless-input"/></div>
</div>
<div class="footer">
<div class="btn">
<div class="seat-num" onclick="resetChoose()">重新选区</div>
<div class="reset" onclick="">我要预定</div>
</div>
</div>
</div>
</div>
</body>
<script>
function resetChoose() {
window.location.href = './detail.html';
}
function editAvatar() {
window.location.href = '../edit.html';
}
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>福牌公众号</title>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/fontsize.js"></script>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="input-box">
<div class="top-input">
<div class="border-line-box">
<image src="./images/phone_icon.png" class="phone-icon"></image>
<!--<form action="" onsubmit="return doValidate()" name="forma" class="form">-->
<input type="number" name="name" id="phone" placeholder="手机号" class="phone-input" value="">
<!--</form>-->
</div>
</div>
<div class="bottom-input">
<div class="border-line-box2">
<div class="input-code-box">
<image src="./images/code_icon.png" class="code-icon"></image>
<input type="number" placeholder="验证码" class="code-input">
</div>
<button class="getCode">获取验证码</button>
</div>
</div>
</div>
<div class="next-btn">
<div class="next" onclick="goNext()">下一步</div>
</div>
</div>
</body>
<script>
function goNext() {
window.location.href = './personal-info.html';
}
// function doValidate() {
// var phone = document.getElementById('phone').value;
// if (!(/(^[0-9]{3,4}\-[0-9]{7}$)|(^[0-9]{7}$)|(^[0-9]{3,4}[0-9]{7}$)|(^0{0,1}13[0-9]{9}$)/.test(phone))) {
// alert("手机号码有误，请重填");
// return false;
// } else {
// // btnCheck()
// }
// }
// $("input[type='button']").click(doValidate);
/**
* [btnCheck 按钮倒计时常用于获取手机短信验证码]
*/
// function btnCheck() {
// $(this).addClass("on");
// var time = 60;
// $(this).attr("disabled", true);
// var timer = setInterval(function() {
// if (time == 0) {
// clearInterval(timer);
// $(".button").attr("disabled", false);
// $(".button").val("获取验证码");
// $(".button").removeClass("on");
// } else {
// $('.button').val(time + "秒");
// time--;
// }
// }, 1000);
// }
$(function () {
//获取短信验证码
var validCode = true;
$(".getCode").click(function () {
var time = 60;
var $code = $(this);
if (validCode) {
validCode = false;
var t = setInterval(function () {
time--;
$code.html(time + "秒");
if (time == 0) {
clearInterval(t);
$code.html("重新获取");
validCode = true;
}
}, 1000)
}
})
})
</script>
</html>
\ No newline at end of file
... ...
!function(a){
function b(){
var b=a.document,c=b.documentElement,
d=c.getBoundingClientRect().width;
document.documentElement.style.fontSize=100*(d/750)+"px"}
window.addEventListener("DOMContentLoaded",function(){b()},!1),
window.addEventListener("resize",function(){b()}),b()}(window);
\ No newline at end of file
... ...
此 diff 太大无法显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>福牌公众号</title>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/fontsize.js"></script>
<link href="css/personal-info.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="name-box">
<div class="input-box">
<text>姓名</text>
<input class="input" type="text" placeholder="向昱筱" cursor="100" placeholder-class="placeholder-style"
value="" bindinput="inputName"/>
</div>
</div>
<div class="age-box">
<div class="input-box">
<text>年龄</text>
<input class="input" type="text" placeholder="18" cursor="100" placeholder-class="placeholder-style"
value="" bindinput="inputName"/>
</div>
</div>
<div class="sex-box">
<div class="input-box">
<text>性别</text>
<div class="man active">男</div>
<div class="women">女</div>
</div>
</div>
<div class="family-box">
<div class="input-box">家庭住址</div>
<div class="address-input">
<input class="input" type="text" placeholder="请填写您的家庭住址" cursor="100" placeholder-class="placeholder-style"
value="" bindinput="inputName"/>
</div>
</div>
<div class="footer" onclick="goNext()">
<div class="confirm-btn">
<text>确定</text>
</div>
</div>
</div>
</body>
<script>
function goNext() {
window.location.href='./home/index.html';
}
</script>
</html>
\ No newline at end of file
... ...