Forráskód Böngészése

印度支付,调整前端页面样式

nelson 2 hónapja
szülő
commit
f1e335dfbb

+ 19 - 17
sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/razorpayIndex.html

@@ -12,29 +12,28 @@
         }
 
         body {
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            background: url('/images/indianPaymentBackground.png') no-repeat center;
-            background-size: cover;
+            background: url(/images/indianPaymentBackground.png) no-repeat center;
+            /* background-size: cover; */
             background-position: center;
             margin: 0;
             line-height: 1.6;
-            position: relative; /* 为绝对定位子元素提供参照 */
-            /*z-index: 1000;*/
+            position: relative;
+            /* z-index: 1000; */
             height: 610px;
         }
 
         /* 容器样式 */
         .container {
-            /*max-width: 600px;*/
-            /*margin: -20% auto;*/
+            /* max-width: 600px; */
+            /* margin: -20% auto; */
             background: #F5F5F5;
             border-radius: 15px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            /* overflow: hidden;*/
+            overflow: hidden;
             position: absolute;
             top: 15%;
-            width: 100%;
-            height: 50%;
+            width: 380px;
+            height: 300px;
             margin-top: 80%;
         }
 
@@ -456,8 +455,6 @@
         }
 
         .background-container {
-            /* 你可以根据需要设置背景图片或其他背景样式 */
-            /* 例如:background-image: url('your-background-image.jpg'); */
             background-color: #005580;
             display: flex;
             justify-content: center;
@@ -465,9 +462,10 @@
             padding: 20px;
             border-radius: 50px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 130%;
+            width: 310px;
             height: 20px;
             margin-top: 20px;
+            margin-left: 5px;
         }
 
         .purchase-button {
@@ -638,11 +636,13 @@
             color: #2c3e50;
             margin-bottom: 8px;
         }
+
         .benefit-sub {
             font-size: 14px; /* 缩小副标题文字 */
             color: #7f8c8d;
             line-height: 1.5;
         }
+
         .benefit-icon img {
             width: 36px; /* 缩小图片尺寸 */
             height: 36px; /* 缩小图片尺寸 */
@@ -665,7 +665,7 @@
 <div style="
     position: absolute;
     top: 220px;
-    left: 188px;
+    left: 186px;
     width: 300px;
     height: 200px;
     background-color: #025E8E;
@@ -674,7 +674,8 @@
     padding: 20px;
     z-index: 50;
     margin-top: -120px;
-    margin-left: -170px;
+    margin-left: -168px;
+    display: block;
     "></div>
 <div style="
     position: absolute;
@@ -691,7 +692,7 @@
 <div style="position: absolute;
     z-index: 100;
     margin-top: 8%;
-    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt="AI助手"/>
+    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
 </div>
 <div style="
     position: absolute;
@@ -878,7 +879,8 @@
             </div>
         </div>-->
         <div class="background-container">
-            <div class="price-display"> <span class="price-number" th:text="${price}"></span>元/年 </div> <button class="purchase-button" id="purchase-button" th:text="'立即购买'"></button>
+            <div class="price-display"><span class="price-number" th:text="${price}"></span>元/年</div>
+            <button class="purchase-button" id="purchase-button" th:text="'立即购买'"></button>
         </div>
         <input class="validity" type="hidden" th:value="${validity}"/>