From aceed79529f53528d86e9db5472807cf6d7e961f Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Tue, 2 Jan 2024 15:08:30 +0800
Subject: [PATCH] style:

---
 index.html | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 312f0aa..0235929 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
   </style>
   <style>#loading-mask{width:100vw;height:100vh;background-color:#00000099;position:fixed;left:0;top:0;display:flex}.lds-facebook{display:inline-block;position:relative;width:80px;height:80px;margin:auto}.lds-facebook div{display:inline-block;position:absolute;left:8px;width:16px;background:#fff;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite}.lds-facebook div:nth-child(1){left:8px;animation-delay:-.24s}.lds-facebook div:nth-child(2){left:32px;animation-delay:-.12s}.lds-facebook div:nth-child(3){left:56px;animation-delay:0}@keyframes lds-facebook{0%{top:8px;height:64px}100%,50%{top:24px;height:32px}}</style>
   <style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:200px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.city-list li{padding:20px;border-top:1px solid #d54e21;border-bottom:1px solid #d54e21;transition:background-color .3s}.city-list li:hover{background-color:#d54e21;color:#fff}</style>
-  <style>.float-button{position:fixed;right:20px;bottom:120px;background-color:transparent;color:#d54e21;border:1px solid #d54e21;border-radius:50%;width:60px;height:60px;text-align:center;line-height:60px;font-size:24px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1}.float-button:hover{background-color:#d54e21;color:#fff}.float-text{position:fixed;right:20px;bottom:190px;color:#d54e21;font-size:18px;text-align:right;z-index:-1}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}.expand-list.open{max-height:500px;opacity:1}.expand-list li{padding:20px;border-bottom:1px solid #d54e21;transition:background-color .3s}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li:hover{background-color:#d54e21;color:#fff}</style>
+  <style>.float-button{position:fixed;right:20px;bottom:120px;background-color:transparent;color:#d54e21;border:1px solid #d54e21;border-radius:50%;width:60px;height:60px;text-align:center;line-height:60px;font-size:24px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1}.float-button:hover{background-color:#d54e21;color:#fff}.float-text{position:fixed;right:20px;bottom:190px;color:#d54e21;font-size:18px;text-align:right;z-index:-1}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}.expand-list.open{max-height:500px;opacity:1;z-index: 99;}.expand-list li{padding:20px;border-bottom:1px solid #d54e21;transition:background-color .3s}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li:hover{background-color:#d54e21;color:#fff}</style>
   <style>.star-rating{direction:rtl;display:inline-block}.star-rating input[type=radio]{display:none}.star-rating label{font-size:30px;color:#d3d3d3;cursor:pointer}.star-rating input[type=radio]:checked~label,.star-rating input[type=radio]~label.checked,.star-rating label:hover,.star-rating label:hover~label{color:#d54e21}.rate-meaning{display:inline-block;margin-left:15px;vertical-align:middle;color:#d54e21}</style>
   <script src="./utils.js"></script>
   <script src="./vue@2.js"></script>
@@ -39,6 +39,7 @@
       </svg>
       <h2>Error!</h2>
       <p>{{errorMsg}}</p>
+      <button type="button" id="back0" class="form-btn cancel-btn" v-on:click="error=false;cityListPage=true;">Go Back</button>
     </div>
 
     <template v-else>
@@ -116,7 +117,7 @@
           <div class="signature">
             <h4>Signature:</h4>
             <div class="signature-container">
-              <canvas id="signature-pad" class="signature-pad" width='auto' height=200></canvas>
+              <canvas id="signature-pad" class="signature-pad" v-bind:width="drawWidth" height=200 ></canvas>
               <div class="button-container">
                 <button type="button" id="clear" class="button" v-on:click="clearSignature()">Clear</button>
               </div>
@@ -245,6 +246,9 @@
         isWideScreen() {
           return window.innerWidth >= 768; // Adjust the threshold as needed
         },
+        drawWidth() {
+          return window.innerWidth < 768 ? Math.floor(window.innerWidth-100) : 760; // Adjust the threshold as needed
+        },
       },
       data() {
         return {
@@ -335,8 +339,8 @@
           });
         },
         clearSignature() {
-          var data = this.signaturePad.toDataURL("image/svg+xml");
-          console.log(data);
+          // var data = this.signaturePad.toDataURL("image/svg+xml");
+          // console.log(data);
           this.signaturePad.clear();
         },
         getData(param) {