init

@@ -9,7 +9,7 @@ body, html{
 .head {
     width: 100%;
     background-color: #fff;
-    padding: 0.38rem 1.77rem 0.58rem 1.77rem;
+    padding: 0.38rem 0 0.58rem 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -37,17 +37,7 @@ body, html{
     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;
@@ -62,6 +52,18 @@ body, html{
     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) ); /* 标准的语法 */
 }
+.seat-num {
+    /*width: 1.8rem;*/
+    height: 0.72rem;
+    line-height: 0.72rem;
+    border: 1px solid #DD3E34;
+    border-radius: 0.36rem;
+    color:  #DD3E34;
+    background: none;
+    background-color: #fff;
+    font-size: 0.24rem;
+    margin-right: 0.36rem;
+}
 .tips {
     color: #979DA8;
     font-size: 0.24rem;

@@ -19,28 +19,31 @@ body, html{
     flex-direction: column;
     justify-content: space-between;
     text-align: center;
+    line-height: 1;
 }
 .area, .line-column{
     color: #000000;
     font-size: 0.36rem;
     font-weight: bold;
-    margin-bottom: 0.31rem;
 }
-.line-column {
-    margin-bottom: 0.5rem;
+.line-column{
+    padding-top: 0.3rem;
+    padding-bottom: 0.35rem; 
 }
 .term, .term-of-validity{
     color: #53555C;
     font-size: 0.28rem;
-    margin-bottom: 0.3rem;
+    padding: 0.15rem 0;
+    /*margin-bottom: 0.3rem;*/
 }
 .term-of-validity {
-    margin-bottom: 0.5rem;
+    /*margin-bottom: 0.5rem;*/
 }
 .price {
     color:#17181A;
     font-size: 0.28rem;
     font-weight: bold;
+    margin-top: 0.35rem;
 }
 .section {
     width: 100%;
@@ -107,6 +110,7 @@ body, html{
     box-sizing: border-box;
     display: flex;
     align-items: center;
+    margin-bottom: 3.2rem;
 }
 .bless-box .bless-title {
     width: 16%;
@@ -114,6 +118,7 @@ body, html{
     font-size: 0.3rem;
     font-weight: bold;
     margin-right: 0.5rem;
+    align-items: flex-start;
 }
 .bless-box .bless-input {
     color: #666666;
@@ -121,14 +126,19 @@ body, html{
     border: none;
     outline: none;
     flex: 1;
+    display: flex;
+}
+.bless-textarea{
+    flex: 1;
+    width: 100%;
+    border: none;
+    resize: none;
+    outline: none;
 }
 .footer {
     width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
+    height: 1.2rem;
+    padding: 0.24rem 0;
     box-sizing: border-box;
 }
 .btn {

@@ -13,8 +13,8 @@
         <div class="head">
             <div class="center">
                 <div class="area"># 武财神内区 #</div>
-                <div class="seat-num">46个空位</div>
-                <div class="btn">
+                <div class="btn"> 
+                    <div class="reset seat-num">46个空位</div>
                     <div class="reset" onclick="resetChoose()">重新选区</div>
                 </div>
                 <div class="tips">灯暗的为可选，灯亮的为已被预定</div>

@@ -7,6 +7,33 @@
     <script src="../js/jquery-2.1.0.js"></script>
     <script src="../js/fontsize.js"></script>
     <link href="../css/temple.css" rel="stylesheet">
+    <style type="text/css" media="screen">
+        html,body{
+            height: 100%;
+            background-color: #F5F6FA;
+        }
+        .content{
+            height: 100%;
+            width: 100%;
+            display: flex;
+            display: -webkit-flex;
+            flex-direction: column;
+        }
+        .head{
+            height: 3.85rem;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            text-align: center;
+            line-height: 1;
+        }
+        .section{
+            width: 100%;
+            flex: 1;
+            -webkit-flex: 1;
+        }
+    </style>
 </head>
 <body>
 <div class="content">
@@ -42,7 +69,10 @@
         </div>
         <div class="bless-box">
             <div class="bless-title">祈祷语</div>
-            <div class="bless-input"><input type="text" placeholder="请输入祈祷语" class="bless-input"/></div>
+            <div class="bless-input">
+                <textarea rows="3" placeholder="请输入祈祷语" class="bless-textarea"></textarea>
+                <!-- <input type="text" placeholder="请输入祈祷语" class="bless-input"/> -->
+            </div>
         </div>
         <div class="footer">
             <div class="btn">