解决冲突文件/travel-notes/index.vue

src/assets/iconfont/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7eb;</span>
+                <div class="name">right</div>
+                <div class="code-name">&amp;#xe7eb;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7f4;</span>
                 <div class="name">menu</div>
                 <div class="code-name">&amp;#xe7f4;</div>
@@ -186,10 +192,10 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1733989943569') format('woff2'),
-       url('iconfont.woff?t=1733989943569') format('woff'),
-       url('iconfont.ttf?t=1733989943569') format('truetype'),
-       url('iconfont.svg?t=1733989943569#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1734919733283') format('woff2'),
+       url('iconfont.woff?t=1734919733283') format('woff'),
+       url('iconfont.ttf?t=1734919733283') format('truetype'),
+       url('iconfont.svg?t=1734919733283#iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -216,6 +222,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-right"></span>
+            <div class="name">
+              right
+            </div>
+            <div class="code-name">.icon-right
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-menu"></span>
             <div class="name">
               menu
@@ -415,6 +430,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right"></use>
+                </svg>
+                <div class="name">right</div>
+                <div class="code-name">#icon-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-menu"></use>
                 </svg>
                 <div class="name">menu</div>

src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4723464 */
-  src: url('iconfont.woff2?t=1733989943569') format('woff2'),
-       url('iconfont.woff?t=1733989943569') format('woff'),
-       url('iconfont.ttf?t=1733989943569') format('truetype'),
-       url('iconfont.svg?t=1733989943569#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1734919733283') format('woff2'),
+       url('iconfont.woff?t=1734919733283') format('woff'),
+       url('iconfont.ttf?t=1734919733283') format('truetype'),
+       url('iconfont.svg?t=1734919733283#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-right:before {
+  content: "\e7eb";
+}
+
 .icon-menu:before {
   content: "\e7f4";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,13 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "4767011",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e7eb",
+      "unicode_decimal": 59371
+    },
+    {
       "icon_id": "4767059",
       "name": "menu",
       "font_class": "menu",

src/assets/iconfont/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="right" unicode="&#59371;" d="M765.7 409.2L314.9 761.3c-5.3 4.1-12.9 0.4-12.9-6.3v-77.3c0-4.9 2.3-9.6 6.1-12.6l360-281.1-360-281.1c-3.9-3-6.1-7.7-6.1-12.6V13c0-6.7 7.7-10.4 12.9-6.3l450.8 352.1c16.4 12.8 16.4 37.6 0 50.4z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="menu" unicode="&#59380;" d="M904 736H120c-4.4 0-8-3.6-8-8v-64c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v64c0 4.4-3.6 8-8 8zM904 112H120c-4.4 0-8-3.6-8-8v-64c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v64c0 4.4-3.6 8-8 8zM904 424H120c-4.4 0-8-3.6-8-8v-64c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v64c0 4.4-3.6 8-8 8z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="message" unicode="&#59274;" d="M512 384m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM712 384m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM312 384m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM925.2 557.6c-22.6 53.7-55 101.9-96.3 143.3-41.3 41.3-89.5 73.8-143.3 96.3C630.6 820.3 572.2 832 512 832h-2c-60.6-0.3-119.3-12.3-174.5-35.9-53.3-22.8-101.1-55.2-142-96.5-40.9-41.3-73-89.3-95.2-142.8-23-55.4-34.6-114.3-34.3-174.9 0.3-69.4 16.9-138.3 48-199.9v-152c0-25.4 20.6-46 46-46h152.1c61.6-31.1 130.5-47.7 199.9-48h2.1c59.9 0 118 11.6 172.7 34.3 53.5 22.3 101.6 54.3 142.8 95.2 41.3 40.9 73.8 88.7 96.5 142 23.6 55.2 35.6 113.9 35.9 174.5 0.3 60.9-11.5 120-34.8 175.6z m-151.1-438C704 50.2 611 12 512 12h-1.7c-60.3 0.3-120.2 15.3-173.1 43.5l-8.4 4.5H188V200.8l-4.5 8.4C155.3 262.1 140.3 322 140 382.3c-0.4 99.7 37.7 193.3 107.6 263.8 69.8 70.5 163.1 109.5 262.8 109.9h1.7c50 0 98.5-9.7 144.2-28.9 44.6-18.7 84.6-45.6 119-80 34.3-34.3 61.3-74.4 80-119 19.4-46.2 29.1-95.2 28.9-145.8-0.6-99.6-39.7-192.9-110.1-262.7z"  horiz-adv-x="1024" />

src/assets/img/visa/Calendar-thirty.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Calendar-thirty (&#230;&#151;&#165;&#229;&#142;&#134;)">
+<path id="Vector" d="M14.0007 1.33333H2.00065C1.63246 1.33333 1.33398 1.63181 1.33398 1.99999V14C1.33398 14.3682 1.63246 14.6667 2.00065 14.6667H14.0007C14.3688 14.6667 14.6673 14.3682 14.6673 14V1.99999C14.6673 1.63181 14.3688 1.33333 14.0007 1.33333Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M1.33398 4.66667H14.6673" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M1.33398 3.66667V7.66667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M14.666 3.66667V7.66667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd" d="M9.33398 7.33333V12H12.0007V7.33333H9.33398Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M4 7.33333H6.66667V12H4" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M6.66602 9.66667H4.66602" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/Headset_one.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Headset-one (&#232;&#128;&#179;&#230;&#156;&#186;)">
+<path id="Vector" d="M18 16.5C20.2092 16.5 22 14.7092 22 12.5C22 10.2908 20.2092 8.5 18 8.5" stroke="#FA8446" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6 8.5C3.79086 8.5 2 10.2908 2 12.5C2 14.7092 3.79086 16.5 6 16.5" stroke="#FA8446" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 16.5V16.25V15V12.5V8.5C6 5.18629 8.6863 2.5 12 2.5C15.3137 2.5 18 5.18629 18 8.5V16.5C18 19.8137 15.3137 22.5 12 22.5" stroke="#FA8446" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/caret_down_small.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="caret-right-small">
+<path id="Union" d="M8.00033 5.32975L3.33366 9.99641L12.667 9.99641L8.00033 5.32975Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/caret_right_small.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="caret-right-small">
+<path id="Union" d="M7.99967 10.9999L12.6663 6.33325L3.33301 6.33325L7.99967 10.9999Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/consume.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Consume (&#230;&#182;&#136;&#232;&#180;&#185;)">
+<path id="Vector" d="M1.33398 4.66667C1.33398 4.29847 1.63246 4 2.00065 4H14.0007C14.3689 4 14.6673 4.29847 14.6673 4.66667V13.3333C14.6673 13.7015 14.3689 14 14.0007 14H2.00065C1.63246 14 1.33398 13.7015 1.33398 13.3333V4.66667Z" stroke="#666666" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6.33398 6.33334L8.00065 8.00001L9.66732 6.33334" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 8.33334H10" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M6 10.3333H10" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M8 8.33334V11.6667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M2.66602 2H13.3327" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/copy.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Copy (&#229;&#164;&#141;&#229;&#136;&#182;)">
+<path id="Vector" d="M4.33398 4.14387V2.60417C4.33398 2.0864 4.75372 1.66667 5.27148 1.66667H13.3965C13.9143 1.66667 14.334 2.0864 14.334 2.60417V10.7292C14.334 11.2469 13.9143 11.6667 13.3965 11.6667H11.8394" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M10.7285 4.33333H2.60352C2.08575 4.33333 1.66602 4.75307 1.66602 5.27083V13.3958C1.66602 13.9136 2.08575 14.3333 2.60352 14.3333H10.7285C11.2463 14.3333 11.666 13.9136 11.666 13.3958V5.27083C11.666 4.75307 11.2463 4.33333 10.7285 4.33333Z" stroke="#333333" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/delete.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="delete">
+<path id="Union" d="M5.00065 0.666656H11.0007V2.66666H14.6673V3.99999H13.3147L12.9813 15.3333H3.01997L2.68664 3.99999H1.33398V2.66666H5.00065V0.666656ZM6.33398 2.66666H9.66732V1.99999H6.33398V2.66666ZM4.02055 3.99999L4.31466 14H11.6866L11.9808 3.99999H4.02055ZM8.66732 5.33332V12.6667H7.33398V5.33332H8.66732Z" fill="black" fill-opacity="0.9"/>
+</g>
+</svg>

src/assets/img/visa/dizhi.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#666666"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#666666"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/fire.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Endocrine (&#229;&#134;&#133;&#229;&#136;&#134;&#230;&#179;&#140;)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M7.71586 14.6667C10.4314 14.6667 13.3337 14.3369 13.3337 10.0601C13.3337 7.9881 12.8365 6.3014 11.8422 5C10.9134 6.55556 10.225 7.33333 9.77696 7.33333C9.10496 7.33333 9.77696 5.30356 8.99989 3.76379C8.48183 2.73731 7.56296 1.92715 6.24329 1.33333C6.42679 2.8123 6.38709 3.88513 6.12416 4.5518C5.72973 5.5518 2.38404 7.30333 2.68627 10.3116C2.9885 13.32 5.00033 14.6667 7.71586 14.6667Z" fill="#FF476A"/>
+<path id="Vector_2" d="M7.23587 8.00276C5.96761 9.15553 5.42704 10.2225 5.61424 11.2036C5.77537 12.0483 6.41624 12.4588 6.89897 12.5912C7.27321 12.6938 7.92117 12.7512 8.50014 12.2356C9.11341 11.6894 8.86904 10.9129 7.97974 9.95236C7.60461 9.54716 7.35664 8.8973 7.23587 8.00276Z" fill="white"/>
+</g>
+</svg>

src/assets/img/visa/location.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#666666"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#666666"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/lock.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#174;&#162;&#230;&#156;&#141;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M24.4632 13.14V12.4147C24.4632 8.79124 21.5987 5.90591 18.0016 5.90591C14.4044 5.90591 11.54 8.79124 11.54 12.4147V13.14H24.4632ZM9.54157 13.14V12.4147C9.54157 7.78473 13.3386 3.96 18.0016 3.96C22.6646 3.96 26.4616 7.78473 26.4616 12.4818V13.14H26.9599C29.3756 13.14 31.3216 15.0699 31.3216 17.4657V27.7143C31.3216 30.1101 29.3756 32.04 27.027 32.04H9.04335C6.62764 32.04 4.68164 30.1101 4.68164 27.7143V17.4657C4.68164 15.0699 6.62764 13.14 9.04335 13.14H9.54157ZM14.0047 23.6205C14.0047 25.298 15.337 26.64 17.0024 26.64H19.0008C20.6661 26.64 21.9984 25.298 21.9984 23.6205V21.6075C21.9984 19.9299 20.6661 18.5879 19.0008 18.5879H17.0024C15.337 18.5879 14.0047 19.9299 14.0047 21.6075V23.6205ZM16.0031 21.6075C16.0031 21.0706 16.4694 20.6009 17.0024 20.6009H19.0008C19.5337 20.6009 20 21.0706 20 21.6075V23.6205C20 24.1573 19.5337 24.627 19.0008 24.627H17.0024C16.4694 24.627 16.0031 24.1573 16.0031 23.6205V21.6075ZM6.69474 17.4657C6.69474 16.2013 7.76839 15.1365 9.04335 15.1365H26.9599C28.2349 15.1365 29.3085 16.2013 29.3085 17.4657V27.7143C29.3085 28.9787 28.2349 30.0435 26.9599 30.0435H9.04335C7.76839 30.0435 6.69474 28.9787 6.69474 27.7143V17.4657Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/online_order_payment.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#156;&#168;&#231;&#186;&#191;&#228;&#184;&#139;&#229;&#141;&#149;&#230;&#148;&#175;&#228;&#187;&#152;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M19.2255 24.9278H40.6152C41.4295 24.9278 42.0904 25.5914 42.0904 26.4091C42.0904 27.2269 41.4295 27.8905 40.6152 27.8905H19.2255C18.4112 27.8905 17.7503 27.2269 17.7503 26.4091C17.7503 25.5914 18.4112 24.9278 19.2255 24.9278ZM19.2255 33.0279H28.6665C29.4866 33.0279 30.1416 33.6916 30.1416 34.5093C30.1416 35.327 29.4807 35.9907 28.6665 35.9907H19.2255C18.4112 35.9907 17.7503 35.327 17.7503 34.5093C17.7503 33.6916 18.4112 33.0279 19.2255 33.0279ZM23.6745 18.4867H36.1662C37.6413 18.4867 38.8391 17.2779 38.8391 15.8025V11.6843C38.8391 10.2029 37.6413 9 36.1662 9H23.6745C22.1994 9 21.0016 10.2029 21.0016 11.6843V15.8025C21.0016 17.2839 22.1994 18.4867 23.6745 18.4867ZM35.8947 15.524H23.9519V11.9568H35.8947V15.524ZM45.8786 42.088C46.4568 41.5073 47.3891 41.5073 47.9674 42.088C48.5398 42.6628 48.5398 43.605 47.9674 44.1857L41.6124 50.5674C41.3233 50.8578 40.9457 51 40.568 51C40.1904 51 39.8127 50.8578 39.5236 50.5674L33.1686 44.1857C32.5904 43.605 32.5904 42.6687 33.1686 42.088C33.7469 41.5073 34.6792 41.5073 35.2575 42.088L39.0929 45.9396V34.2249C39.0929 33.4072 39.7537 32.7435 40.568 32.7435C41.3823 32.7435 42.0432 33.4072 42.0432 34.2249V45.9396L45.8786 42.088ZM46.0497 32.5302H49V17.112C49 14.5522 46.9289 12.4723 44.3798 12.4723H41.0106V15.4351H44.3798C45.3003 15.4351 46.0497 16.1876 46.0497 17.112V32.5302ZM15.3606 50.366H29.6106V47.3973H15.3606C14.5817 47.3973 13.9503 46.7159 13.9503 45.8804V16.958C13.9503 16.1225 14.5817 15.441 15.3606 15.441H18.5882V12.4783H15.3606C12.959 12.4783 11 14.487 11 16.958V45.8863C11 48.3572 12.959 50.366 15.3606 50.366Z" fill="#999999"/>
+</g>
+</svg>

src/assets/img/visa/orangeLocation.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#FF9300"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#FF9300"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_online_order_payment.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#156;&#168;&#231;&#186;&#191;&#228;&#184;&#139;&#229;&#141;&#149;&#230;&#148;&#175;&#228;&#187;&#152;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M19.2255 24.9278H40.6152C41.4295 24.9278 42.0904 25.5914 42.0904 26.4091C42.0904 27.2269 41.4295 27.8905 40.6152 27.8905H19.2255C18.4112 27.8905 17.7503 27.2269 17.7503 26.4091C17.7503 25.5914 18.4112 24.9278 19.2255 24.9278ZM19.2255 33.0279H28.6665C29.4866 33.0279 30.1416 33.6916 30.1416 34.5093C30.1416 35.327 29.4807 35.9907 28.6665 35.9907H19.2255C18.4112 35.9907 17.7503 35.327 17.7503 34.5093C17.7503 33.6916 18.4112 33.0279 19.2255 33.0279ZM23.6745 18.4867H36.1662C37.6413 18.4867 38.8391 17.2779 38.8391 15.8025V11.6843C38.8391 10.2029 37.6413 9 36.1662 9H23.6745C22.1994 9 21.0016 10.2029 21.0016 11.6843V15.8025C21.0016 17.2839 22.1994 18.4867 23.6745 18.4867ZM35.8947 15.524H23.9519V11.9568H35.8947V15.524ZM45.8786 42.088C46.4568 41.5073 47.3891 41.5073 47.9674 42.088C48.5398 42.6628 48.5398 43.605 47.9674 44.1857L41.6124 50.5674C41.3233 50.8578 40.9457 51 40.568 51C40.1904 51 39.8127 50.8578 39.5236 50.5674L33.1686 44.1857C32.5904 43.605 32.5904 42.6687 33.1686 42.088C33.7469 41.5073 34.6792 41.5073 35.2575 42.088L39.0929 45.9396V34.2249C39.0929 33.4072 39.7537 32.7435 40.568 32.7435C41.3823 32.7435 42.0432 33.4072 42.0432 34.2249V45.9396L45.8786 42.088ZM46.0497 32.5302H49V17.112C49 14.5522 46.9289 12.4723 44.3798 12.4723H41.0106V15.4351H44.3798C45.3003 15.4351 46.0497 16.1876 46.0497 17.112V32.5302ZM15.3606 50.366H29.6106V47.3973H15.3606C14.5817 47.3973 13.9503 46.7159 13.9503 45.8804V16.958C13.9503 16.1225 14.5817 15.441 15.3606 15.441H18.5882V12.4783H15.3606C12.959 12.4783 11 14.487 11 16.958V45.8863C11 48.3572 12.959 50.366 15.3606 50.366Z" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/orange_pay_arrow_left.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M8 12.5682L2.71689 7L8 1.43176L6.64156 1.16125e-06L-1.22392e-06 7L6.64155 14L8 12.5682Z" fill="#FF9300"/>
+<circle id="Ellipse 1" cx="11" cy="7" r="1" transform="rotate(-180 11 7)" fill="#FF9300"/>
+<circle id="Ellipse 2" cx="15" cy="7" r="1" transform="rotate(-180 15 7)" fill="#FF9300"/>
+<circle id="Ellipse 3" cx="19" cy="7" r="1" transform="rotate(-180 19 7)" fill="#FF9300"/>
+<circle id="Ellipse 4" cx="23" cy="7" r="1" transform="rotate(-180 23 7)" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_pay_arrow_right.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M16 1.43176L21.2831 7L16 12.5682L17.3584 14L24 7L17.3584 5.38077e-07L16 1.43176Z" fill="#FD9A00"/>
+<circle id="Ellipse 1" cx="13" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 2" cx="9" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 3" cx="5" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 4" cx="1" cy="7" r="1" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/orange_qianzheng_three.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="qianzheng-3.svg">
+<path id="Vector" d="M8.01563 10.624C5.91963 10.624 4.22363 8.928 4.22363 6.832C4.22363 4.736 5.91963 3.04 8.01563 3.04C10.1116 3.04 11.8076 4.736 11.8076 6.832C11.8076 8.928 10.0956 10.624 8.01563 10.624ZM6.84763 7.232V7.312C6.94363 8.72 7.45563 9.872 7.99963 9.872C8.25563 9.872 8.52763 9.584 8.75163 9.088C8.97563 8.608 9.10363 7.984 9.15163 7.296V7.2H6.95963L6.84763 7.232ZM9.93563 7.296C9.88763 8.048 9.74363 8.736 9.50363 9.296L9.39163 9.552L9.61563 9.408C10.3516 8.944 10.8636 8.176 10.9916 7.312L11.0076 7.216H9.91963L9.93563 7.296ZM5.02363 7.312C5.16763 8.176 5.66363 8.928 6.39963 9.392L6.63963 9.536L6.52763 9.28C6.28763 8.72 6.14363 8.032 6.09563 7.28V7.2H5.00763L5.02363 7.312ZM9.50363 4.368C9.74363 4.928 9.88763 5.616 9.93563 6.368V6.448H11.0236L11.0076 6.352C10.8636 5.488 10.3676 4.736 9.63163 4.256L9.39163 4.112L9.50363 4.368ZM8.01563 3.792C7.75963 3.792 7.48763 4.08 7.26363 4.576C7.03963 5.056 6.89563 5.68 6.86363 6.368V6.464H9.18363V6.368C9.07163 4.944 8.55963 3.792 8.01563 3.792ZM6.39963 4.256C5.66363 4.72 5.15163 5.488 5.02363 6.352L5.00763 6.448H6.09563V6.368C6.14363 5.616 6.28763 4.928 6.52763 4.368L6.63963 4.112L6.39963 4.256Z" fill="#FF9300"/>
+<path id="Vector_2" d="M12.4004 0.16H3.63243C2.41643 0.16 1.44043 1.152 1.44043 2.352V13.648C1.44043 14.864 2.41643 15.84 3.63243 15.84H12.4004C13.6164 15.84 14.5924 14.864 14.5924 13.648V2.352C14.5924 1.152 13.6004 0.16 12.4004 0.16ZM2.36843 2.352C2.36843 1.648 2.92843 1.088 3.63243 1.088H12.4004C13.1044 1.088 13.6644 1.648 13.6644 2.352V13.648C13.6644 14.352 13.1044 14.912 12.4004 14.912H3.63243C2.92843 14.912 2.36843 14.352 2.36843 13.648V2.352Z" fill="#FF9300"/>
+<path id="Vector_3" d="M4.96009 13.168H11.0561C11.3121 13.168 11.5201 12.96 11.5201 12.704C11.5201 12.448 11.3121 12.24 11.0561 12.24H4.96009C4.70409 12.24 4.49609 12.448 4.49609 12.704C4.49609 12.96 4.70409 13.168 4.96009 13.168Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_submit_visa_information.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#143;&#144;&#228;&#186;&#164;&#231;&#173;&#190;&#232;&#175;&#129;&#232;&#181;&#132;&#230;&#150;&#153;">
+<g id="Group 1294">
+<path id="Vector" d="M19.5746 28.6938H29.6249C30.3443 28.6938 30.9242 28.115 30.9242 27.4088C30.9242 26.6973 30.339 26.1239 29.6249 26.1239H19.5746C18.8552 26.1239 18.2754 26.7027 18.2754 27.4088C18.2754 28.1204 18.8606 28.6938 19.5746 28.6938ZM39.031 32.9628H19.5424C18.8445 32.9628 18.2754 33.5257 18.2754 34.2159V34.285C18.2754 34.9752 18.8445 35.5381 19.5424 35.5381H39.031C39.7289 35.5381 40.298 34.9752 40.298 34.285V34.2159C40.298 33.5257 39.7289 32.9628 39.031 32.9628ZM39.031 39.8071H19.5424C18.8445 39.8071 18.2754 40.3699 18.2754 41.0602V41.1292C18.2754 41.8195 18.8445 42.3823 19.5424 42.3823H39.031C39.7289 42.3823 40.298 41.8195 40.298 41.1292V41.0602C40.298 40.3646 39.7289 39.8071 39.031 39.8071Z" fill="#FD9A00"/>
+<path id="Vector_2" d="M48.9678 22.9062C48.9141 22.6142 48.7906 22.3805 48.5866 22.2L47.3786 21.0796L47.384 21.085C42.7884 16.8425 34.6171 9.42478 34.5312 9.34513C34.2574 9.09027 33.9407 9.03717 33.7259 9.02124L33.683 9.01593L33.64 9.02124H33.6239C33.5595 9.01062 33.4843 9.00531 33.4092 9.01062C28.1961 9.00531 13.9045 9 13.7756 9C12.2456 9 11 10.2319 11 11.7451V47.7876C11 49.5611 12.4549 51 14.2481 51H45.7519C47.5451 51 49 49.5611 49 47.7876V23.3788V23.2117L48.9678 22.9062ZM34.9446 13.2796C34.9446 13.1735 35.0198 13.131 35.052 13.1204C35.0681 13.115 35.0949 13.1044 35.1272 13.1044C35.1647 13.1044 35.2023 13.115 35.2453 13.1522L44.1574 21.2708C44.3131 21.4142 44.2648 21.5894 44.2433 21.6372C44.2218 21.685 44.1413 21.8496 43.9319 21.8496H35.5889C35.2345 21.8496 34.9446 21.5628 34.9446 21.2124V13.2796ZM46.3962 47.7876C46.3962 48.1381 46.1062 48.4248 45.7519 48.4248H14.2427C13.8884 48.4248 13.5985 48.1381 13.5985 47.7876V12.2124C13.5985 11.8619 13.8884 11.5752 14.2427 11.5752H32.1582C32.2549 11.5752 32.3354 11.6549 32.3354 11.7504V21.2124C32.3354 22.9858 33.7903 24.4248 35.5835 24.4248H46.2136C46.3103 24.4248 46.3908 24.5044 46.3908 24.6V47.7876H46.3962Z" fill="#FD9A00"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/orange_successful_checkout.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#136;&#144;&#229;&#138;&#159;&#229;&#135;&#186;&#231;&#173;&#190;">
+<path id="Vector" d="M36.6667 35.3333H23.3334C22.597 35.3333 22 35.9303 22 36.6666C22 37.403 22.597 38 23.3334 38H36.6667C37.4029 38 38 37.4031 38 36.6667C38 35.9303 37.403 35.3333 36.6667 35.3333ZM47.3334 18H42V12.6667C42 11.1939 40.8062 10 39.3334 10H20.6667C19.1939 10 18 11.1939 18 12.6667V18H12.6667C11.1939 18 10 19.1939 10 20.6667V34C10 35.4728 11.1939 36.6667 12.6667 36.6667H16.6667V47.3333C16.6667 48.806 17.8605 50 19.3334 50H40.6667C42.1395 50 43.3334 48.806 43.3334 47.3333V36.6667H47.3334C48.8062 36.6667 50 35.4728 50 34V20.6667C50 19.1939 48.8062 18 47.3334 18ZM20.6667 14C20.6667 13.2636 21.2636 12.6667 22 12.6667H38C38.7362 12.6667 39.3333 13.2636 39.3333 14V18H20.6667V14ZM40.6667 46C40.6667 46.7364 40.0696 47.3333 39.3334 47.3333H20.6667C19.9303 47.3333 19.3334 46.7364 19.3334 46V32.6667C19.3334 31.9303 19.9303 31.3334 20.6667 31.3334H39.3334C40.0696 31.3334 40.6667 31.9303 40.6667 32.6667V46ZM47.3334 32.6667C47.3334 33.4031 46.7363 34 46 34H43.3334V31.3333C43.3334 29.8605 42.1395 28.6666 40.6667 28.6666H19.3334C17.8605 28.6666 16.6667 29.8605 16.6667 31.3333V34H14C13.2636 34 12.6667 33.4031 12.6667 32.6667V22C12.6667 21.2636 13.2636 20.6667 14 20.6667H46C46.7363 20.6667 47.3333 21.2636 47.3333 22V32.6667H47.3334ZM43.3334 23.3333C42.597 23.3333 42 23.9303 42 24.6666C42 25.403 42.597 26 43.3334 26C44.0696 26 44.6667 25.4031 44.6667 24.6667C44.6667 23.9303 44.0696 23.3333 43.3334 23.3333ZM36.6667 40.6667H23.3334C22.597 40.6667 22 41.2636 22 42C22 42.7364 22.597 43.3333 23.3334 43.3333H36.6667C37.4029 43.3333 38 42.7364 38 42C38 41.2636 37.403 40.6667 36.6667 40.6667Z" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/pay_arrow_left.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M8 12.5682L2.71689 7L8 1.43176L6.64156 1.16125e-06L-1.22392e-06 7L6.64155 14L8 12.5682Z" fill="#D9D9D9"/>
+<circle id="Ellipse 1" cx="11" cy="7" r="1" transform="rotate(-180 11 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 2" cx="15" cy="7" r="1" transform="rotate(-180 15 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 3" cx="19" cy="7" r="1" transform="rotate(-180 19 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 4" cx="23" cy="7" r="1" transform="rotate(-180 23 7)" fill="#D9D9D9"/>
+</g>
+</svg>

src/assets/img/visa/pay_arrow_right.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M16 1.43176L21.2831 7L16 12.5682L17.3584 14L24 7L17.3584 -4.15597e-07L16 1.43176Z" fill="#D9D9D9"/>
+<circle id="Ellipse 1" cx="13" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 2" cx="9" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 3" cx="5" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 4" cx="1" cy="7" r="1" fill="#D9D9D9"/>
+</g>
+</svg>

src/assets/img/visa/people.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="People (&#228;&#186;&#186;&#229;&#145;&#152;)">
+<path id="Vector" d="M7.99935 6.66667C9.28802 6.66667 10.3327 5.622 10.3327 4.33333C10.3327 3.04467 9.28802 2 7.99935 2C6.71068 2 5.66602 3.04467 5.66602 4.33333C5.66602 5.622 6.71068 6.66667 7.99935 6.66667Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 13.6V14H14V13.6C14 12.1065 14 11.3598 13.7094 10.7894C13.4537 10.2876 13.0457 9.87964 12.544 9.62398C11.9735 9.33334 11.2268 9.33334 9.73333 9.33334H6.26667C4.7732 9.33334 4.02647 9.33334 3.45603 9.62398C2.95426 9.87964 2.54631 10.2876 2.29065 10.7894C2 11.3598 2 12.1065 2 13.6Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/professional_customer_service.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#174;&#162;&#230;&#156;&#141;">
+<g id="Group 1329">
+<path id="Vector" d="M7.80163 32.3571C7.23658 32.3571 6.78125 31.9017 6.78125 31.3367C6.78125 29.1204 9.39804 27.5185 14.0007 26.8766V26.5694C10.8792 24.1775 10.8792 19.7449 10.8792 17.0458C10.8792 12.5913 13.5015 9.93057 17.8903 9.93057H18.1262C22.5149 9.93057 25.1372 12.5913 25.1372 17.0458C25.1372 17.375 25.1317 17.7041 25.1262 18.0443C25.1098 18.6093 24.6489 19.0537 24.0784 19.0372C23.5134 19.0208 23.069 18.5545 23.0855 17.9894C23.0964 17.6712 23.0964 17.3585 23.0964 17.0458C23.0964 13.6775 21.4232 11.9713 18.1262 11.9713H17.8903C14.5932 11.9713 12.92 13.6775 12.92 17.0458C12.92 20.3045 13.123 23.6235 15.5697 25.1815C15.866 25.368 16.0415 25.6917 16.0415 26.0428V27.7818C16.0415 28.303 15.6465 28.7418 15.1308 28.7967C11.0329 29.2301 8.82202 30.4315 8.82202 31.3367C8.82202 31.8963 8.3612 32.3571 7.80163 32.3571Z" fill="#333333"/>
+<path id="Vector_2" d="M28.3137 32.3571C27.7487 32.3571 27.2933 31.9017 27.2933 31.3367C27.2933 30.426 25.0825 29.2301 20.9845 28.7967C20.4633 28.7418 20.0684 28.303 20.0684 27.7818V26.0373C20.0684 25.4722 20.5237 25.0169 21.0887 25.0169C21.6538 25.0169 22.1091 25.4722 22.1091 26.0373V26.8766C26.7118 27.513 29.3286 29.1204 29.3286 31.3367C29.3341 31.8963 28.8788 32.3571 28.3137 32.3571Z" fill="#333333"/>
+<path id="Vector_3" d="M21.2476 23.201C19.8433 23.201 18.7954 23.0584 18.768 23.0529C18.2633 22.8993 17.9616 22.3891 18.0713 21.868C18.1755 21.3523 18.6583 21.0122 19.1849 21.0615C21.7304 21.3413 25.6145 21.0999 26.2947 19.6846C26.5361 19.1799 27.145 18.9604 27.6552 19.2073C28.1654 19.4487 28.3794 20.0631 28.1325 20.5678C27.0682 22.7841 23.645 23.201 21.2476 23.201Z" fill="#333333"/>
+<path id="Vector_4" d="M30.2994 22.1313C29.7343 22.1313 29.279 21.676 29.279 21.1109V17.545L27.913 17.0568C27.507 16.9142 27.2327 16.5247 27.2327 16.0968C27.2327 10.9784 23.1128 6.80907 18.0493 6.80907C12.9858 6.80907 8.86584 10.9784 8.86584 16.0968C8.86584 16.4259 8.70675 16.7331 8.43794 16.9251L7.84546 17.3476V21.1109C7.84546 21.676 7.39012 22.1313 6.82507 22.1313C6.26002 22.1313 5.80469 21.676 5.80469 21.1109V16.8264C5.80469 16.4972 5.96378 16.19 6.23259 15.998L6.83604 15.5646C7.11583 9.5685 12.0367 4.77379 18.0493 4.77379C23.996 4.77379 28.8785 9.46426 29.2516 15.3726L30.6395 15.8663C31.0455 16.009 31.3198 16.3985 31.3198 16.8264V21.1109C31.3198 21.676 30.8644 22.1313 30.2994 22.1313Z" fill="#333333"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/qianzheng_three.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="qianzheng-3.svg">
+<path id="Vector" d="M8.01563 10.624C5.91963 10.624 4.22363 8.928 4.22363 6.832C4.22363 4.736 5.91963 3.04 8.01563 3.04C10.1116 3.04 11.8076 4.736 11.8076 6.832C11.8076 8.928 10.0956 10.624 8.01563 10.624ZM6.84763 7.232V7.312C6.94363 8.72 7.45563 9.872 7.99963 9.872C8.25563 9.872 8.52763 9.584 8.75163 9.088C8.97563 8.608 9.10363 7.984 9.15163 7.296V7.2H6.95963L6.84763 7.232ZM9.93563 7.296C9.88763 8.048 9.74363 8.736 9.50363 9.296L9.39163 9.552L9.61563 9.408C10.3516 8.944 10.8636 8.176 10.9916 7.312L11.0076 7.216H9.91963L9.93563 7.296ZM5.02363 7.312C5.16763 8.176 5.66363 8.928 6.39963 9.392L6.63963 9.536L6.52763 9.28C6.28763 8.72 6.14363 8.032 6.09563 7.28V7.2H5.00763L5.02363 7.312ZM9.50363 4.368C9.74363 4.928 9.88763 5.616 9.93563 6.368V6.448H11.0236L11.0076 6.352C10.8636 5.488 10.3676 4.736 9.63163 4.256L9.39163 4.112L9.50363 4.368ZM8.01563 3.792C7.75963 3.792 7.48763 4.08 7.26363 4.576C7.03963 5.056 6.89563 5.68 6.86363 6.368V6.464H9.18363V6.368C9.07163 4.944 8.55963 3.792 8.01563 3.792ZM6.39963 4.256C5.66363 4.72 5.15163 5.488 5.02363 6.352L5.00763 6.448H6.09563V6.368C6.14363 5.616 6.28763 4.928 6.52763 4.368L6.63963 4.112L6.39963 4.256Z" fill="#666666"/>
+<path id="Vector_2" d="M12.4004 0.16H3.63243C2.41643 0.16 1.44043 1.152 1.44043 2.352V13.648C1.44043 14.864 2.41643 15.84 3.63243 15.84H12.4004C13.6164 15.84 14.5924 14.864 14.5924 13.648V2.352C14.5924 1.152 13.6004 0.16 12.4004 0.16ZM2.36843 2.352C2.36843 1.648 2.92843 1.088 3.63243 1.088H12.4004C13.1044 1.088 13.6644 1.648 13.6644 2.352V13.648C13.6644 14.352 13.1044 14.912 12.4004 14.912H3.63243C2.92843 14.912 2.36843 14.352 2.36843 13.648V2.352Z" fill="#666666"/>
+<path id="Vector_3" d="M4.96009 13.168H11.0561C11.3121 13.168 11.5201 12.96 11.5201 12.704C11.5201 12.448 11.3121 12.24 11.0561 12.24H4.96009C4.70409 12.24 4.49609 12.448 4.49609 12.704C4.49609 12.96 4.70409 13.168 4.96009 13.168Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/refund.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#233;&#128;&#128;&#230;&#172;&#190;">
+<path id="Vector" d="M18.0012 3.78C25.8527 3.78 32.2193 10.1466 32.2193 18.0002C32.2193 25.8518 25.8538 32.2184 18.0012 32.2184C17.965 32.2205 17.9287 32.2205 17.8926 32.2184C17.8567 32.2205 17.8207 32.2205 17.7849 32.2184H5.43375C5.21982 32.2177 5.01094 32.1533 4.83369 32.0335C4.65645 31.9137 4.51888 31.7439 4.43849 31.5457C4.3581 31.3474 4.33853 31.1297 4.38228 30.9203C4.42604 30.7109 4.53112 30.5192 4.68416 30.3698L9.85416 25.3419C9.95553 25.2433 10.0753 25.1657 10.2067 25.1134C10.3381 25.0611 10.4785 25.0352 10.6198 25.0372C10.7612 25.0392 10.9008 25.069 11.0307 25.1249C11.1606 25.1809 11.2781 25.2618 11.3767 25.3632C11.4753 25.4646 11.5529 25.5844 11.6052 25.7158C11.6575 25.8471 11.6834 25.9875 11.6814 26.1289C11.6794 26.2703 11.6496 26.4099 11.5937 26.5398C11.5377 26.6696 11.4568 26.7872 11.3554 26.8858L8.08475 30.065H17.7818C17.818 30.0628 17.8543 30.0628 17.8905 30.065C20.3781 30.0854 22.8111 29.3356 24.8557 27.9185C26.9003 26.5014 28.4565 24.4865 29.3107 22.1501C30.1649 19.8136 30.2753 17.2701 29.6268 14.8684C28.9784 12.4667 27.6027 10.3245 25.6886 8.73554C23.7745 7.14658 21.4157 6.18873 18.9357 5.99336C16.4557 5.798 13.976 6.37469 11.8368 7.64434C9.69747 8.91399 8.00338 10.8144 6.98685 13.0849C5.97032 15.3555 5.68114 17.8849 6.15897 20.3262C6.18598 20.4652 6.18535 20.6082 6.15711 20.7469C6.12887 20.8857 6.07359 21.0175 5.9944 21.1349C5.91522 21.2523 5.8137 21.3529 5.69562 21.431C5.57755 21.5092 5.44524 21.5633 5.30625 21.5903C5.16727 21.6173 5.02432 21.6167 4.88557 21.5884C4.74683 21.5602 4.615 21.5049 4.49763 21.4257C4.38025 21.3466 4.27962 21.245 4.20147 21.127C4.12333 21.0089 4.06921 20.8766 4.0422 20.7376C3.64064 18.6773 3.6997 16.5536 4.21518 14.5188C4.73065 12.484 5.68977 10.5884 7.02383 8.96778C8.35788 7.34716 10.0339 6.04164 11.9317 5.14476C13.8295 4.24787 15.9022 3.78182 18.0012 3.78Z" fill="#333333"/>
+<path id="Vector_2" d="M18.5153 27.54C18.8102 27.5376 19.0924 27.4183 19.3009 27.2078C19.5095 26.9973 19.6277 26.7125 19.63 26.4148V23.4868H22.6783C22.9683 23.478 23.2435 23.3556 23.4456 23.1454C23.6476 22.9353 23.7606 22.6539 23.7606 22.3611C23.7606 22.0682 23.6476 21.7869 23.4456 21.5767C23.2435 21.3666 22.9683 21.2441 22.6783 21.2354H19.63V19.2838H22.6041C22.8918 19.2715 23.1637 19.1474 23.363 18.9376C23.5623 18.7277 23.6736 18.4482 23.6736 18.1575C23.6736 17.8668 23.5623 17.5874 23.363 17.3775C23.1637 17.1677 22.8918 17.0436 22.6041 17.0313H19.62C19.6705 16.9946 19.7176 16.9533 19.7605 16.9078L23.4408 13.1928C23.6404 12.9798 23.7499 12.6965 23.7458 12.4033C23.7418 12.1101 23.6246 11.83 23.4191 11.6226C23.2137 11.4153 22.9362 11.297 22.6457 11.2929C22.3552 11.2888 22.0746 11.3992 21.8635 11.6007L18.5083 14.9895L14.9965 11.4447C14.7832 11.2531 14.5052 11.1514 14.2198 11.1606C13.9344 11.1698 13.6634 11.2892 13.4626 11.4942C13.2619 11.6991 13.1467 11.9741 13.1409 12.2622C13.135 12.5504 13.239 12.8298 13.4313 13.0429L17.1116 16.7578C17.237 16.8834 17.3896 16.9776 17.5581 17.0313H14.4246C14.1368 17.0436 13.8649 17.1676 13.6656 17.3775C13.4663 17.5873 13.3551 17.8668 13.3551 18.1575C13.3551 18.4482 13.4663 18.7277 13.6656 18.9375C13.8649 19.1474 14.1368 19.2714 14.4246 19.2837H17.3996V21.2354H14.5028C14.2127 21.244 13.9374 21.3664 13.7352 21.5766C13.5331 21.7868 13.42 22.0682 13.42 22.3611C13.42 22.654 13.5331 22.9355 13.7352 23.1456C13.9374 23.3558 14.2127 23.4782 14.5028 23.4868H17.3996V26.4138C17.4017 26.7118 17.5199 26.997 17.7287 27.2078C17.9375 27.4185 18.22 27.5379 18.5153 27.54ZM18.3116 17.0131L18.3437 17.09H18.2434C18.2665 17.09 18.2885 17.0597 18.3116 17.0131Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/search.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 10">
+<g id="Search (&#230;&#144;&#156;&#231;&#180;&#162;)">
+<path id="Vector" d="M6.99998 12.6667C10.1296 12.6667 12.6666 10.1296 12.6666 7.00001C12.6666 3.87041 10.1296 1.33334 6.99998 1.33334C3.87038 1.33334 1.33331 3.87041 1.33331 7.00001C1.33331 10.1296 3.87038 12.6667 6.99998 12.6667Z" stroke="#333333" stroke-width="1.4" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.88567 4.78103C8.40311 4.29847 7.73644 4 7.00004 4C6.26367 4 5.59701 4.29847 5.11444 4.78103" stroke="#333333" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M11.0739 11.0739L13.9023 13.9023" stroke="#333333" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/submit_visa_information.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#143;&#144;&#228;&#186;&#164;&#231;&#173;&#190;&#232;&#175;&#129;&#232;&#181;&#132;&#230;&#150;&#153;">
+<g id="Group 1294">
+<path id="Vector" d="M19.5741 28.6938H29.6244C30.3438 28.6938 30.9237 28.1151 30.9237 27.4089C30.9237 26.6974 30.3385 26.1239 29.6244 26.1239H19.5741C18.8547 26.1239 18.2749 26.7027 18.2749 27.4089C18.2749 28.1204 18.8601 28.6938 19.5741 28.6938ZM39.0305 32.9628H19.5419C18.844 32.9628 18.2749 33.5257 18.2749 34.2159V34.285C18.2749 34.9752 18.844 35.5381 19.5419 35.5381H39.0305C39.7284 35.5381 40.2975 34.9752 40.2975 34.285V34.2159C40.2975 33.5257 39.7284 32.9628 39.0305 32.9628ZM39.0305 39.8071H19.5419C18.844 39.8071 18.2749 40.3699 18.2749 41.0602V41.1292C18.2749 41.8195 18.844 42.3823 19.5419 42.3823H39.0305C39.7284 42.3823 40.2975 41.8195 40.2975 41.1292V41.0602C40.2975 40.3646 39.7284 39.8071 39.0305 39.8071Z" fill="#999999"/>
+<path id="Vector_2" d="M48.9678 22.9062C48.9141 22.6142 48.7906 22.3805 48.5866 22.2L47.3786 21.0796L47.384 21.085C42.7884 16.8425 34.6171 9.42478 34.5312 9.34513C34.2574 9.09027 33.9407 9.03717 33.7259 9.02124L33.683 9.01593L33.64 9.02124H33.6239C33.5595 9.01062 33.4843 9.00531 33.4092 9.01062C28.1961 9.00531 13.9045 9 13.7756 9C12.2456 9 11 10.2319 11 11.7451V47.7876C11 49.5611 12.4549 51 14.2481 51H45.7519C47.5451 51 49 49.5611 49 47.7876V23.3788V23.2117L48.9678 22.9062ZM34.9446 13.2796C34.9446 13.1735 35.0198 13.131 35.052 13.1204C35.0681 13.115 35.0949 13.1044 35.1272 13.1044C35.1647 13.1044 35.2023 13.115 35.2453 13.1522L44.1574 21.2708C44.3131 21.4142 44.2648 21.5894 44.2433 21.6372C44.2218 21.685 44.1413 21.8496 43.9319 21.8496H35.5889C35.2345 21.8496 34.9446 21.5628 34.9446 21.2124V13.2796ZM46.3962 47.7876C46.3962 48.1381 46.1062 48.4248 45.7519 48.4248H14.2427C13.8884 48.4248 13.5985 48.1381 13.5985 47.7876V12.2124C13.5985 11.8619 13.8884 11.5752 14.2427 11.5752H32.1582C32.2549 11.5752 32.3354 11.6549 32.3354 11.7504V21.2124C32.3354 22.9858 33.7903 24.4248 35.5835 24.4248H46.2136C46.3103 24.4248 46.3908 24.5044 46.3908 24.6V47.7876H46.3962Z" fill="#999999"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/successful_checkout.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#136;&#144;&#229;&#138;&#159;&#229;&#135;&#186;&#231;&#173;&#190;">
+<path id="Vector" d="M36.6667 35.3333H23.3334C22.597 35.3333 22 35.9303 22 36.6666C22 37.403 22.597 38 23.3334 38H36.6667C37.4029 38 38 37.4031 38 36.6667C38 35.9303 37.403 35.3333 36.6667 35.3333ZM47.3334 18H42V12.6667C42 11.1939 40.8062 10 39.3334 10H20.6667C19.1939 10 18 11.1939 18 12.6667V18H12.6667C11.1939 18 10 19.1939 10 20.6667V34C10 35.4728 11.1939 36.6667 12.6667 36.6667H16.6667V47.3333C16.6667 48.806 17.8605 50 19.3334 50H40.6667C42.1395 50 43.3334 48.806 43.3334 47.3333V36.6667H47.3334C48.8062 36.6667 50 35.4728 50 34V20.6667C50 19.1939 48.8062 18 47.3334 18ZM20.6667 14C20.6667 13.2636 21.2636 12.6667 22 12.6667H38C38.7362 12.6667 39.3333 13.2636 39.3333 14V18H20.6667V14ZM40.6667 46C40.6667 46.7364 40.0696 47.3333 39.3334 47.3333H20.6667C19.9303 47.3333 19.3334 46.7364 19.3334 46V32.6667C19.3334 31.9303 19.9303 31.3334 20.6667 31.3334H39.3334C40.0696 31.3334 40.6667 31.9303 40.6667 32.6667V46ZM47.3334 32.6667C47.3334 33.4031 46.7363 34 46 34H43.3334V31.3333C43.3334 29.8605 42.1395 28.6666 40.6667 28.6666H19.3334C17.8605 28.6666 16.6667 29.8605 16.6667 31.3333V34H14C13.2636 34 12.6667 33.4031 12.6667 32.6667V22C12.6667 21.2636 13.2636 20.6667 14 20.6667H46C46.7363 20.6667 47.3333 21.2636 47.3333 22V32.6667H47.3334ZM43.3334 23.3333C42.597 23.3333 42 23.9303 42 24.6666C42 25.403 42.597 26 43.3334 26C44.0696 26 44.6667 25.4031 44.6667 24.6667C44.6667 23.9303 44.0696 23.3333 43.3334 23.3333ZM36.6667 40.6667H23.3334C22.597 40.6667 22 41.2636 22 42C22 42.7364 22.597 43.3333 23.3334 43.3333H36.6667C37.4029 43.3333 38 42.7364 38 42C38 41.2636 37.403 40.6667 36.6667 40.6667Z" fill="#999999"/>
+</g>
+</svg>

src/assets/img/visa/three_left.svg

@@ -0,0 +1,7 @@
+<svg width="23" height="12" viewBox="0 0 23 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1383">
+<path id="Polygon 1" d="M18.5046 0.950028L15.4346 4.02004C14.2631 5.19161 14.2631 7.09108 15.4346 8.26265L18.5046 11.3326" stroke="#999999" stroke-linecap="round"/>
+<path id="Polygon 2" d="M12.2629 0.950028L9.19292 4.02004C8.02138 5.19161 8.02138 7.09108 9.19294 8.26265L12.2629 11.3326" stroke="#999999" stroke-linecap="round"/>
+<path id="Polygon 3" d="M6.14129 0.950028L3.07134 4.02004C1.89979 5.19161 1.8998 7.09108 3.07136 8.26265L6.14127 11.3326" stroke="#999999" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/visa/visa_arrow_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729589518592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5057" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M566.6 854.6l320-320 0.2-0.2c0.3-0.3 0.6-0.6 0.9-1 0.2-0.2 0.4-0.4 0.5-0.6 0.2-0.2 0.3-0.4 0.5-0.6 0.2-0.3 0.4-0.5 0.6-0.8 0.1-0.2 0.2-0.3 0.3-0.5l0.6-0.9c0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.5-0.9 0.1-0.2 0.2-0.3 0.3-0.5 0.2-0.3 0.3-0.6 0.4-0.9l0.3-0.6c0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.6 0.1-0.9v-0.7c0.1-1.1 0.1-2.1 0-3.2v-0.7c0-0.3 0-0.6-0.1-0.9 0-0.3-0.1-0.6-0.1-0.9 0-0.2-0.1-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8l-0.3-0.6c-0.1-0.3-0.3-0.6-0.4-0.8-0.1-0.2-0.2-0.3-0.3-0.5-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.6-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.4-0.5-0.6-0.2-0.2-0.3-0.4-0.5-0.6-0.4-0.4-0.7-0.8-1.1-1.2l-320-320c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l265.5 266H160c-17.7 0-32 14.3-32 32s14.3 32 32 32h626.7L521.4 809.4c-6.2 6.2-9.4 14.4-9.4 22.6s3.1 16.4 9.4 22.6c12.5 12.5 32.7 12.5 45.2 0z" p-id="5058"></path></svg>

src/components/Car/Home/Banner.vue

@@ -0,0 +1,14 @@
+<template>
+  <van-swipe :autoplay="3000" :show-indicators="false">
+    <van-swipe-item v-for="item in 1">
+      <img
+        class="aspect-[375/166] w-full object-cover"
+        src="~/assets/img/car/car_banner_tmp.png"
+      />
+    </van-swipe-item>
+  </van-swipe>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/components/Car/Home/BaseFilter.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="w-full rounded-xl bg-[#94adb4] px-12 pb-12 pt-20">
+    <div class="text-xl font-bold text-white">逍遥甄选，自由包车</div>
+    <div
+      class="bg-white rounded-xl pt-10 pb-15 mt-10 px-20 text-black-3 text-base"
+    >
+      <div
+        @click="startPlaceOption.show = true"
+        class="flex items-center justify-between py-15"
+      >
+        <span>起点：{{ startPlaceLabel }}</span>
+        <span class="iconfont icon-right"></span>
+      </div>
+      <van-divider />
+      <div class="flex items-center justify-between space-x-30">
+        <div
+          @click="startDateOption.show = true"
+          class="flex-1 py-15 flex items-center"
+        >
+          <span class="flex-1">用车时间：{{ formData.startDate }}</span>
+          <span class="iconfont icon-right"></span>
+        </div>
+        <div
+          @click="daysOption.show = true"
+          class="w-85 flex items-center py-15"
+        >
+          <span>天数：</span>
+          <span class="flex-1">{{ formData.days }}天</span>
+          <span class="iconfont icon-right"></span>
+        </div>
+      </div>
+      <van-divider />
+      <div class="flex items-center justify-center">
+        <van-button
+          @click="handleSearch"
+          color="#FD9A00"
+          round
+          class="w-[80%]"
+          style="font-size: 16px; margin-top: 10px"
+          >查询</van-button
+        >
+      </div>
+    </div>
+    <van-popup
+      v-model:show="startPlaceOption.show"
+      round
+      position="bottom"
+      teleport="body"
+      :style="{ height: '60%' }"
+    >
+      <van-cascader
+        v-model="startPlaceOption.activedId"
+        title="请选择起点"
+        :options="startPlaceOption.options"
+        @close="startPlaceOption.show = false"
+        :field-names="{
+          text: 'menuName',
+          value: 'id',
+          children: 'children',
+        }"
+        @finish="startPlaceOnFinish"
+      />
+    </van-popup>
+    <van-popup
+      v-model:show="startDateOption.show"
+      round
+      position="bottom"
+      teleport="body"
+    >
+      <van-date-picker
+        title="选择日期"
+        @confirm="handleStartDateConfirm"
+        :min-date="new Date()"
+      />
+    </van-popup>
+    <van-popup
+      v-model:show="daysOption.show"
+      round
+      position="bottom"
+      teleport="body"
+    >
+      <van-picker
+        title="选择天数"
+        :columns="daysOption.options"
+        @confirm="handleDaysConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+
+const formData = reactive({
+  startDate: "",
+  startPlace: "",
+  days: "",
+});
+
+// 起点
+const startPlaceOption = reactive({
+  show: false,
+  options: [],
+  selectedOptions: [],
+  activedId: "",
+});
+const startPlaceLabel = computed(() => {
+  return startPlaceOption.selectedOptions
+    .map((item) => item.menuName)
+    .join("/");
+});
+async function getStartPlaceOptions() {
+  const { data } = await request(
+    "/website/app/tourCarCategory/carContractTree"
+  );
+  startPlaceOption.options = tree(data);
+}
+function tree(list) {
+  return list.map((item) => {
+    return {
+      ...item,
+      children: item.children.length ? tree(item.children) : null,
+    };
+  });
+}
+function startPlaceOnFinish({ selectedOptions, value }) {
+  startPlaceOption.show = false;
+  startPlaceOption.selectedOptions = selectedOptions;
+  formData.startPlace = value;
+}
+
+// 用车时间
+const startDateOption = reactive({
+  show: false,
+  activedValue: null,
+  selectedValues: [],
+});
+function handleStartDateConfirm({ selectedValues }) {
+  startDateOption.show = false;
+  startDateOption.selectedValues = selectedValues;
+  formData.startDate = selectedValues.join("-");
+}
+
+// 用车天数
+const daysOption = reactive({
+  show: false,
+  options: Array.from({ length: 10 }, (_, i) => i).map((item) => ({
+    text: `${item + 1}天`,
+    value: `${item + 1}`,
+  })),
+});
+
+function handleDaysConfirm({ selectedOptions }) {
+  daysOption.show = false;
+  formData.days = selectedOptions[0].value;
+}
+
+watchEffect(() => {
+  formData.startDate = route.query.startDate;
+  formData.startPlace = route.query.startPlace;
+  formData.days = route.query.days || 1;
+});
+
+function handleSearch() {
+  if (!formData.startPlace) {
+    showToast("请选择起点");
+    return;
+  }
+  if (!formData.startDate) {
+    showToast("请选择用车时间");
+    return;
+  }
+  if (!formData.days) {
+    showToast("请选择天数");
+    return;
+  }
+  navigateTo({
+    path: "/car/search",
+    query: formData,
+  });
+}
+
+onMounted(() => {
+  getStartPlaceOptions();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Home/IntroSection1.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col items-center pt-15">
+    <div class="text-xl font-bold text-black-3">逍遥游包车</div>
+    <div class="mt-15 grid grid-cols-3 gap-8">
+      <div
+        v-for="(item, index) in data"
+        class="relative cursor-pointer overflow-hidden transition-all"
+        :class="{ 'col-span-2': index === 0 }"
+      >
+        <img
+          :src="item.image"
+          class="h-98 w-full object-fill"
+          :class="[index === 0 ? 'aspect-[221/96]' : 'aspect-[105/96]']"
+        />
+        <div
+          class="absolute bottom-0 left-0 right-0 top-0 bg-gradient-to-r from-[#57A6E1FF] to-[#ffffff00] pl-10 pt-10 text-2xl font-bold text-white"
+        >
+          <div class="text-base">{{ item.title }}</div>
+          <div class="text-sm opacity-60">{{ item.subTitle }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import car_home_card_1 from "~/assets/img/car/car_home_card_1.png";
+import car_home_card_2 from "~/assets/img/car/car_home_card_2.png";
+import car_home_card_3 from "~/assets/img/car/car_home_card_3.png";
+import car_home_card_4 from "~/assets/img/car/car_home_card_4.png";
+import car_home_card_5 from "~/assets/img/car/car_home_card_5.png";
+
+const data = [
+  {
+    image: car_home_card_1,
+    title: "专车服务",
+    subTitle: "专车服务绝不拼车套车",
+  },
+  {
+    image: car_home_card_2,
+    title: "车型任选",
+    subTitle: "以最全车型满足所有用车需求。",
+  },
+  {
+    image: car_home_card_3,
+    title: "一价全包",
+    subTitle: "无其他费用",
+  },
+  {
+    image: car_home_card_4,
+    title: "旅游包车",
+    subTitle: "尊享全天候VIP服务",
+  },
+  {
+    image: car_home_card_5,
+    title: "专属跟单",
+    subTitle: "正规资质车辆证件齐全",
+  },
+];
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Home/IntroSection2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="grid grid-cols-2 gap-10">
+    <div
+      v-for="item in data"
+      class="relative aspect-[160/99] rounded-5xl bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: `url(${item.image})` }"
+    >
+      <div class="absolute left-10 top-10">
+        <div class="text-xl font-bold text-black-3">{{ item.title }}</div>
+        <div class="text-sm text-black-9">{{ item.subTitle }}</div>
+        <div
+          class="mt-5 flex h-18 w-48 text-sm items-center justify-center rounded-full bg-[#c9ddff] text-[#2B7BFF]"
+        >
+          逍遥游
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import car_home_intro_1 from "~/assets/img/car/car_home_intro_1.png";
+import car_home_intro_2 from "~/assets/img/car/car_home_intro_2.png";
+import car_home_intro_3 from "~/assets/img/car/car_home_intro_3.png";
+import car_home_intro_4 from "~/assets/img/car/car_home_intro_4.png";
+
+const data = [
+  {
+    image: car_home_intro_1,
+    title: "24小时客服",
+    subTitle: "在线售后服务，出行无忧",
+  },
+  {
+    image: car_home_intro_2,
+    title: "经验司机",
+    subTitle: "6年以上老司机培训上岗",
+  },
+  {
+    image: car_home_intro_3,
+    title: "行程自由",
+    subTitle: "随走随停行程自由随意!",
+  },
+  {
+    image: car_home_intro_4,
+    title: "航班追踪",
+    subTitle: "追踪航班动态，航变无忧",
+  },
+];
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/BaseFilter.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <div
+      @click="isExpand = !isExpand"
+      class="h-40 w-full rounded-xl px-20 text-white font-semibold bg-gradient-to-r from-[#FD9A00] to-[#FFCC7C] flex items-center justify-between"
+    >
+      <div class="flex items-center space-x-15">
+        <span>{{ startPlaceLabel }}</span>
+        <span>{{ formData.startDate }}</span>
+        <span>包车{{ formData.days }}天</span>
+      </div>
+      <div
+        class="w-20 h-20 bg-[#FD9A00] flex items-center rounded-full justify-center"
+      >
+        <span
+          class="iconfont icon-caret-down text-white"
+          :class="{ 'rotate-180': isExpand }"
+        ></span>
+      </div>
+    </div>
+    <div v-show="isExpand">
+      <van-cell-group>
+        <van-cell
+          title="选择起点"
+          :value="startPlaceLabel"
+          is-link
+          @click="startPlaceOption.show = true"
+        />
+        <van-cell
+          title="选择用车时间"
+          :value="formData.startDate"
+          is-link
+          @click="startDateOption.show = true"
+        />
+        <van-cell
+          title="选择天数"
+          :value="`${formData.days}天`"
+          is-link
+          @click="daysOption.show = true"
+        />
+      </van-cell-group>
+    </div>
+    <van-popup
+      v-model:show="startPlaceOption.show"
+      round
+      position="bottom"
+      :style="{ height: '40%' }"
+    >
+      <van-cascader
+        v-model="startPlaceOption.activedId"
+        title="请选择起点"
+        :options="startPlaceOption.options"
+        @close="startPlaceOption.show = false"
+        :field-names="{
+          text: 'menuName',
+          value: 'id',
+          children: 'children',
+        }"
+        @finish="startPlaceOnFinish"
+      />
+    </van-popup>
+    <van-popup v-model:show="startDateOption.show" round position="bottom">
+      <van-date-picker
+        title="选择日期"
+        @confirm="handleStartDateConfirm"
+        :min-date="new Date()"
+      />
+    </van-popup>
+    <van-popup v-model:show="daysOption.show" round position="bottom">
+      <van-picker
+        title="选择天数"
+        :columns="daysOption.options"
+        @confirm="handleDaysConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+const isExpand = ref(false);
+
+const route = useRoute();
+
+const formData = reactive({
+  startDate: "",
+  startPlace: "",
+  days: "",
+});
+
+watchEffect(() => {
+  formData.startDate = route.query.startDate;
+  formData.startPlace = route.query.startPlace;
+  formData.days = route.query.days;
+});
+
+// watch(
+//   formData,
+//   () => {
+//     console.log(formData);
+//   },
+//   { deep: true, immediate: true }
+// );
+
+// 起点
+const startPlaceOption = reactive({
+  show: false,
+  options: [],
+  selectedOptions: [],
+  activedId: "",
+});
+const startPlaceLabel = computed(() => {
+  return findTextInTree(startPlaceOption.options, formData.startPlace);
+});
+async function getStartPlaceOptions() {
+  const { data } = await request(
+    "/website/app/tourCarCategory/carContractTree"
+  );
+  startPlaceOption.options = tree(data);
+}
+function tree(list) {
+  return list.map((item) => {
+    return {
+      ...item,
+      children: item.children.length ? tree(item.children) : null,
+    };
+  });
+}
+function startPlaceOnFinish({ selectedOptions, value }) {
+  startPlaceOption.show = false;
+  startPlaceOption.selectedOptions = selectedOptions;
+  navigateTo({
+    path: "/car/search",
+    replace: true,
+    query: {
+      ...route.query,
+      startPlace: value,
+    },
+  });
+}
+function findTextInTree(tree, id) {
+  for (let i = 0; i < tree.length; i++) {
+    if (tree[i].id === id) {
+      return tree[i].menuName;
+    }
+    if (tree[i].children && tree[i].children.length) {
+      const text = findTextInTree(tree[i].children, id);
+      if (text) {
+        return text;
+      }
+    }
+  }
+}
+
+// 用车时间
+const startDateOption = reactive({
+  show: false,
+  activedValue: null,
+  selectedValues: [],
+});
+function handleStartDateConfirm({ selectedValues }) {
+  startDateOption.show = false;
+  startDateOption.selectedValues = selectedValues;
+  navigateTo({
+    path: "/car/search",
+    replace: true,
+    query: {
+      ...route.query,
+      startDate: selectedValues.join("-"),
+    },
+  });
+}
+
+// 用车天数
+const daysOption = reactive({
+  show: false,
+  options: Array.from({ length: 10 }, (_, i) => i).map((item) => ({
+    text: `${item + 1}天`,
+    value: `${item + 1}`,
+  })),
+});
+
+function handleDaysConfirm({ selectedOptions }) {
+  daysOption.show = false;
+  navigateTo({
+    path: "/car/search",
+    replace: true,
+    query: {
+      ...route.query,
+      days: selectedOptions[0].value,
+    },
+  });
+}
+
+onMounted(() => {
+  getStartPlaceOptions();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/CarFilter.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <van-dropdown-menu
+      style="--van-dropdown-menu-shadow: none"
+      active-color="#fd9a00"
+    >
+      <van-dropdown-item v-model="category" :options="categoryList" />
+    </van-dropdown-menu>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+
+const category = ref(null);
+
+watchEffect(() => {
+  category.value = route.query.carModel ?? null;
+});
+
+watch(category, (val) => {
+  navigateTo({
+    replace: true,
+    query: {
+      ...route.query,
+      carModel: val,
+    },
+  });
+});
+
+const categoryList = ref([]);
+async function getCarCategoryList() {
+  const { data } = await request("/website/app/tourCarCategory/carModelList");
+  const options = data.dataList.map((e) => {
+    return {
+      text: e.typeName,
+      value: e.id,
+    };
+  });
+  categoryList.value = [
+    {
+      text: "车型不限",
+      value: null,
+    },
+    ...options,
+  ];
+}
+onMounted(() => {
+  getCarCategoryList();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/CarList/Item.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="box-border flex cursor-pointer space-x-12 rounded-5xl border-[3px] bg-white transition-all hover:shadow-card"
+    :class="[active ? 'border-primary shadow-card' : 'border-white']"
+  >
+    <van-image
+      :src="itemData.image"
+      width="127"
+      height="127"
+      radius="10px"
+      fit="cover"
+      class="shrink-0"
+    />
+    <div class="flex w-0 flex-1 flex-col">
+      <div class="truncate text-xl font-semibold text-black-3">
+        {{ itemData.name }}
+      </div>
+      <div class="truncate text-base text-black-6">
+        {{ itemData.seatNumber }}座
+      </div>
+      <div class="truncate text-base text-black-6">
+        {{ itemData.luggageNumber }}行李(建议24寸行李箱)
+      </div>
+      <div class="flex items-center space-x-10">
+        <span class="text-base font-semibold text-black-6">评分</span>
+        <van-rate disabled :size="14" v-model="itemData.score" />
+      </div>
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="truncate text-3xl font-semibold text-[#FF1D1D]">
+            {{ itemData.price }}{{ itemData.unit }}
+          </div>
+          <div class="shrink-0 text-sm text-black-9">(10小时)</div>
+        </div>
+        <van-button
+          @click="$emit('onSelect')"
+          type="primary"
+          color="#FD9A00"
+          size="small"
+          style="width: 70px; font-size: 14px"
+          round
+          >选择</van-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineEmits(["onSelect"]);
+defineProps({
+  itemData: {
+    type: Object,
+    default: () => ({}),
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/CarList/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <van-empty
+      v-if="!listData.length && !loading"
+      image="search"
+      description="暂无相关车型"
+    />
+    <van-list
+      v-else-if="listData.length"
+      class=""
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="-- 没有更多了 --"
+      @load="onLoadMore"
+      :immediate-check="false"
+    >
+      <CarSearchCarListItem
+        v-for="item in listData"
+        :key="item.id"
+        :item-data="item"
+        @on-select="$emit('on-select', item)"
+      >
+      </CarSearchCarListItem>
+    </van-list>
+  </div>
+</template>
+
+<script setup>
+defineEmits(["on-select"]);
+
+const route = useRoute();
+
+const requestQuery = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  model: computed(() => route.query.carModel),
+  startDate: computed(() => route.query.startDate),
+  belongTab: computed(() => route.query.startPlace),
+  days: computed(() => route.query.days),
+  type: computed(() => route.query.type || 1),
+  count: true,
+});
+const listData = ref([]);
+
+const loading = ref(false);
+
+const finished = ref(false);
+
+async function getList() {
+  try {
+    loading.value = true;
+    showLoadingToast({
+      message: "加载中...",
+      duration: 100000,
+    });
+    const { data } = await request("/website/app/tourCarCategory/list", {
+      query: requestQuery,
+    });
+    listData.value = listData.value.concat(data.dataList);
+    loading.value = false;
+    if (data.totalCount <= listData.value.length) {
+      finished.value = true;
+    }
+  } finally {
+    closeToast();
+    loading.value = false;
+  }
+}
+
+function reSearch() {
+  requestQuery.pageNum = 1;
+  finished.value = false;
+  listData.value = [];
+  getList();
+}
+
+function onLoadMore() {
+  requestQuery.pageNum++;
+  getList();
+}
+
+watch(
+  [
+    () => route.query.startPlace,
+    () => route.query.startDate,
+    () => route.query.days,
+    () => route.query.type,
+    () => route.query.carModel,
+  ],
+  () => {
+    reSearch();
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/DriverList/Item.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="flex pb-10 cursor-pointer space-x-10 bg-white"
+    :class="[active ? 'border-primary shadow-card' : 'border-white']"
+  >
+    <van-image
+      :src="itemData.image"
+      height="127"
+      width="127"
+      radius="15px"
+      fit="cover"
+      class="shrink-0"
+    />
+    <div class="flex w-0 flex-1 flex-col text-base text-black-6">
+      <div class="truncate text-xl font-semibold text-black-3">
+        姓名：{{ itemData.name }}
+      </div>
+      <div class="truncate">性别：{{ itemData.sexDictMap?.name }}</div>
+      <div class="truncate">年龄：{{ itemData.age }}</div>
+      <div class="truncate">驾龄：{{ itemData.drivingYears }}年</div>
+      <div class="flex items-center justify-between">
+        <div>
+          <span class="">评分：</span>
+          <van-rate size="14" disabled v-model="itemData.score" />
+        </div>
+        <van-button
+          @click="$emit('onSelect')"
+          type="primary"
+          color="#FD9A00"
+          size="small"
+          style="width: 70px; font-size: 14px"
+          round
+          >选择</van-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  itemData: {
+    type: Object,
+    default: () => ({}),
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/DriverList/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="shrink-0 px-15">
+      <div class="flex items-center justify-between">
+        <div class="py-10 txxt-base text-black-3 font-semibold">选择司机</div>
+        <span
+          @click="$emit('close')"
+          class="iconfont icon-close pl-10 py-5"
+        ></span>
+      </div>
+      <van-divider />
+      <van-dropdown-menu
+        style="--van-dropdown-menu-shadow: none"
+        active-color="#fd9a00"
+      >
+        <van-dropdown-item v-model="driverSex" :options="sexOptions" />
+        <van-dropdown-item v-model="driveAge" :options="ageOptions" />
+      </van-dropdown-menu>
+    </div>
+
+    <div class="flex-1 overflow-scroll px-15">
+      <van-empty
+        v-if="!listData.length && !loading"
+        image="search"
+        description="暂无相关司机"
+      />
+      <div v-else-if="listData.length">
+        <CarSearchDriverListItem
+          v-for="item in listData"
+          :key="item.id"
+          :item-data="item"
+          @click="$emit('onSelect', item)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineEmits(["close", "onSelect"]);
+
+const route = useRoute();
+
+const driverSex = ref(null);
+const driveAge = ref(null);
+const sexOptions = [
+  {
+    text: "性别不限",
+    value: null,
+  },
+  {
+    text: "男",
+    value: 1,
+  },
+  {
+    text: "女",
+    value: 2,
+  },
+];
+const ageOptions = [
+  {
+    text: "年龄不限",
+    value: null,
+  },
+  {
+    text: "20-30岁",
+    value: "20,30",
+  },
+  {
+    text: "30-35岁",
+    value: "30,35",
+  },
+  {
+    text: "35-40岁",
+    value: "35,40",
+  },
+  {
+    text: "40-45岁",
+    value: "40,45",
+  },
+  {
+    text: "45岁以上",
+    value: "45",
+  },
+];
+
+const requestQuery = reactive({
+  pageNum: 1,
+  pageSize: 9999,
+  startDate: computed(() => route.query.startDate),
+  belongTab: computed(() => route.query.startPlace),
+  days: computed(() => route.query.days),
+  type: computed(() => route.query.type || 1),
+  // sex: computed(() => route.query.driverSex),
+  // age: computed(() => route.query.driverAge),
+  count: true,
+});
+
+const listData = ref([]);
+const loading = ref(false);
+
+async function getList() {
+  try {
+    loading.value = true;
+    showLoadingToast({
+      message: "加载中...",
+      duration: 100000,
+    });
+    const { data } = await request("/website/app/tourCarDriver/list", {
+      query: {
+        ...requestQuery,
+        sex: driverSex.value,
+        age: driveAge.value,
+      },
+    });
+    listData.value = data.dataList;
+  } finally {
+    loading.value = false;
+    closeToast();
+  }
+}
+
+watch([driverSex, driveAge], () => {
+  getList();
+});
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/components/Car/Search/TypeTab.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-center space-x-12">
+    <div
+      v-for="item in typeList"
+      :key="item.label"
+      class="box-border flex h-44 flex-1 cursor-pointer items-center justify-center space-x-5 rounded-full border-[1px] border-[#FD9A00] transition-all"
+      :class="[
+        type == item.value
+          ? 'bg-primary text-white'
+          : 'bg-white text-[#FD9A00]',
+      ]"
+      @click="handleClick(item)"
+    >
+      <img :src="item.image" class="h-34 w-58" alt="" srcset="" />
+      <span class="text-base font-semibold">{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import car_from_type_self from "~/assets/img/car/car_from_type_self.png";
+import car_from_type_third from "~/assets/img/car/car_from_type_third.png";
+
+const typeList = [
+  {
+    image: car_from_type_self,
+    value: 1,
+    label: "自营",
+  },
+  {
+    image: car_from_type_third,
+    value: 2,
+    label: "三方",
+  },
+];
+
+const route = useRoute();
+
+const type = computed(() => route.query.type ?? typeList[0].value);
+
+/**
+ * Change the type of car in query string and navigate to the new page.
+ * @param {Object} item - The item which is clicked.
+ * @param {Number} item.value - The value of type.
+ */
+function handleClick(item) {
+  navigateTo({
+    query: {
+      ...route.query,
+      type: item.value,
+    },
+  });
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/CreateNote/Form.vue

@@ -75,7 +75,7 @@
       <template #label>
         <span class="text-16 font-400 text-[#000]/[0.9]">
           目的地
-          <span class="text-white">的</span>
+
           <span class="text-16 text-[#D54941]">*</span>
         </span>
       </template>
@@ -183,7 +183,12 @@ const showCalendar = ref(false)
 
 // 展示时间的格式
 const onConfirm = (date) => {
-  departureTime.value = date ? `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` : ''
+  let year = date?.getFullYear()
+  let month = date?.getMonth() + 1 // getMonth() 返回的月份从 0 开始，所以需要加 1
+  let day = date?.getDate()
+  month = month < 10 ? '0' + month : month
+  day = day < 10 ? '0' + day : day
+  departureTime.value = date ? `${year}-${month}-${day}` : ''
   showCalendar.value = false
 }
 

src/components/Empty/index.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="w-full flex items-center justify-center min-h-200">
-    <div class="text-[#BFC8DB]">暂无数据</div>
+    <div class="text-[#BFC8DB]">{{ title }}</div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '暂无数据'
+  }
+})
+</script>
 
 <style lang="scss" scoped></style>