vue3前端开发-flex布局篇
文章目录
- 1.传统布局与flex布局优缺点
-
- 传统布局
- flex布局
- 建议
- 2. flex布局原理
-
- 2.1 布局原理
- 3. flex常见属性
-
- 3.1 父项常见属性
- 3.2 子项常见属性
- 4.案例实战(携程网首页)
1.传统布局与flex布局优缺点
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flex布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差
- IE11或者更低版本，不支持或仅部分支持
建议
- 如果是PC端页面布局，还是传统布局
- 如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局
2. flex布局原理
2.1 布局原理
采用flex布局的元素，成为flex容器，它的所有子元素自动成为容器成员。
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
3. flex常见属性
3.1 父项常见属性
| 属性 | 名称 | 值 |
|---|---|---|
| flex-direction | 设置主轴的方向 | row：默认值，从左向右 row-reverse：从右向左 column: 主轴变成y轴，从上到下 column-reverse:从下到上 |
| justify-content | 设置主轴上的子元素排列方式 | flex-start:默认值,如果主轴是x轴，则子元素从左到右。 flex-end:从尾部开始排列 center: 在主轴居中对齐 space-around: 平分剩余空间 space-between: 先两边贴边，再平分剩余空间(重要) |
| flex-wrap | 设置子元素是否换行 | nowrap:不换行(默认) wrap: 换行 |
| align-content | 设置侧轴上的子元素的排列方式(多行) | flex-start:默认值,侧轴的头部从左到右。 flex-end:侧轴的尾部开始排列 center: 在侧轴居中对齐 space-around: 平分剩余空间 space-between: 先两边贴边，再平分剩余空间(重要) stretch:拉伸 |
| align-items | 设置侧轴上的子元素的排列方式(单行) | flex-start：从上到下(默认值) flex-end：从下到上 center 挤在一起居中(垂直居中) stretch：拉伸 |
| flex-flow | 复合属性，相当于设置了flex-direction和flex-wrap |
3.2 子项常见属性
| 属性 | 名称 | 值 |
|---|---|---|
| flex | 子项目占的份数 | flex:1 表示在剩余的空间中占比多少 |
| align-self | 控制子项自己在侧轴的排列方式。 允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性。 |
auto:默认值，表示继承父元素align-items属性，如果没有父元素等同于stretch flex-end表示当前子元素纵轴上从下向上排列 |
| order | 定义子项目的排列顺序(前后顺序) | 数值越小，排列位置越靠前。允许负数 |
4.案例实战(携程网首页)
待制作的页面如下：
实战案例源码：
<template>
<div class="container">
<!--顶部搜索-->
<div class="search-index">
<div class="search">
<svg t="1696683463899" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="9051" width="16" height="16">
<path
d="M907.815385 840.861538L720.738462 653.784615c42.141538-55.926154 66.953846-125.636923 66.953846-200.861538 0-184.713846-150.055385-334.769231-334.769231-334.769231s-334.769231 150.055385-334.769231 334.769231 150.055385 334.769231 334.769231 334.769231c75.224615 0 144.935385-24.812308 200.861538-66.953846l187.076923 187.076923 66.953847-66.953847zM212.676923 452.923077c0-132.332308 107.913846-240.246154 240.246154-240.246154s240.246154 107.913846 240.246154 240.246154-107.913846 240.246154-240.246154 240.246154-240.246154-107.913846-240.246154-240.246154z"
fill="#515151" p-id="9052"></path>
</svg>
搜索:目的地/酒店/景点/航班号
</div>
<div class="user">
<svg t="1696682202329" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4189" width="32" height="32">
<path d="M510.7 509.5m-400.3 0a400.3 400.3 0 1 0 800.6 0 400.3 400.3 0 1 0-800.6 0Z" fill="#1296db"
p-id="4190"></path>
<path
d="M748.1 727c-9.6-48.3-32-92.8-65.4-128.6-31.3-33.6-69.8-56.9-111.7-68.3 53.5-23.4 91-76.8 91-138.8 0-83.4-67.9-151.3-151.3-151.3s-151.3 67.9-151.3 151.3c0 62 37.5 115.4 91 138.8-41.9 11.4-80.4 34.7-111.7 68.3-33.4 35.8-55.8 80.2-65.4 128.6-0.9 4.7 0.5 9.6 3.8 13.1l0.3 0.3c8.3 8.7 23 4.5 25.4-7.3 20.6-103.3 106.1-180.9 208-180.9 102 0 187.4 77.6 208 180.9 2.4 11.8 17.1 16.1 25.4 7.3l0.3-0.3c3.1-3.6 4.6-8.4 3.6-13.1zM389.3 391.4c0-66.9 54.4-121.3 121.3-121.3s121.3 54.4 121.3 121.3-54.4 121.3-121.3 121.3c-66.8 0-121.3-54.4-121.3-121.3z"
fill="#ffffff" p-id="4191"></path>
</svg>
<span>我的</span>
</div>
</div>
<!-- 焦点图 -->
<div class="focus"><img src="@/assets/images/focus.jpg" alt=""></div>
<!-- 旅游导航 -->
<ul class="trip-nav">
<li>
<svg t="1696690782032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4341" width="48" height="48">
<path
d="M795.776 550.229333v253.312h79.36v67.584h47.658667V938.666667H97.194667v-67.541334h47.658666v-67.584h95.274667v-253.312H85.333333l218.24-152.021333H148.906667l345.258666-236.416V85.333333h31.744v76.458667l365.226667 236.416h-160.256l207.872 152.021333h-142.933333z m-508.032 0v202.666667h79.36v-202.666667h-79.36z m206.378667 0h-79.36v202.666667h79.36v-202.666667z m127.018666 0h-79.36v202.666667h79.36v-202.666667z m47.658667 202.666667h79.36v-202.666667h-79.36v202.666667z"
fill="#0095FF" p-id="4342"></path>
</svg>
<span>景点游玩</span>
</li>
<li>
<svg t="1696691115751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="14559" width="48" height="48">
<path
d="M892.6208 859.904H128.1536c-18.0736 0-32.7168-14.6432-32.7168-32.7168v-19.456c0-18.0736 14.6432-32.7168 32.7168-32.7168h764.416c18.0736 0 32.7168 14.6432 32.7168 32.7168v19.456c0.0512 18.0736-14.6432 32.7168-32.6656 32.7168zM166.8608 740.3008h683.8784c40.8576 0 68.4032-41.8304 52.2752-79.36L752.64 310.8352c-18.5344-43.1104-78.336-46.5408-101.632-5.8368l-123.904 216.1152c-12.4928 21.76-43.6736 22.4256-57.0368 1.1776L392.4992 399.104c-21.7088-34.4576-71.4752-35.6352-94.7712-2.2528l-177.4592 254.0032c-26.368 37.6832 0.6144 89.4464 46.592 89.4464z"
fill="#6C6CEA" p-id="14560"></path>
<path d="M385.2288 207.6672m-70.5536 0a70.5536 70.5536 0 1 0 141.1072 0 70.5536 70.5536 0 1 0-141.1072 0Z"
fill="#8D92F8" p-id="14561"></path>
<path
d="M836.096 505.1392L752.64 310.8352c-18.5344-43.1104-78.336-46.5408-101.632-5.8368l-123.904 216.1152c-12.4928 21.76-43.6736 22.4256-57.0368 1.1776L392.4992 399.104c-21.7088-34.4576-71.4752-35.6352-94.7712-2.2528l-177.4592 254.0032c-26.368 37.7344 0.6144 89.4976 46.6432 89.4976h586.9056c44.9536-68.9152 74.1376-148.992 82.2784-235.2128zM137.8816 775.0144c-23.4496 0-42.4448 18.9952-42.4448 42.4448 0 23.4496 18.9952 42.4448 42.4448 42.4448h508.3648c30.72-25.0368 58.4704-53.5552 82.7904-84.8896H137.8816z"
fill="#757BF2" p-id="14562"></path>
<path
d="M695.6032 276.5824c-17.5104 1.3824-34.5088 10.752-44.6464 28.416l-123.904 216.1152c-12.4928 21.76-43.6736 22.4256-57.0368 1.1776L392.4992 399.104c-21.7088-34.4576-71.4752-35.6352-94.7712-2.2528l-177.4592 254.0032c-26.368 37.7344 0.6144 89.4976 46.6432 89.4976h233.6256c172.8512-83.5072 292.5568-259.5328 295.0656-463.7696zM173.9776 791.9104c45.6704 0 89.9072-5.888 132.096-16.896H137.8816c-11.776 0-22.4768 4.8128-30.1568 12.5952 21.76 2.7136 43.8272 4.3008 66.2528 4.3008z"
fill="#8486F8" p-id="14563"></path>
<path
d="M421.12 444.5696l-28.6208-45.4656c-21.7088-34.4576-71.4752-35.6352-94.7712-2.2528l-137.6768 197.0176c101.5296-23.3472 191.744-76.288 261.0688-149.2992z"
fill="#8D92F8" p-id="14564"></path>
</svg>
<span>周边游</span>
</li>
<li>
<svg t="1696691046275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5652" width="48" height="48">
<path
d="M488.33 490.74a28 28 0 0 1-28 28H168.19q-0.08-3.37-0.07-6.77v-49.23h292.21a28 28 0 0 1 28 28zM629.06 518.74h-80.89a28 28 0 1 1 0-56h80.89a28 28 0 0 1 0 56z"
fill="#FFB640" p-id="5653"></path>
<path
d="M604 330.21l217.57-131.32A28 28 0 0 0 792.63 151l-270 163 121.64-186.71a28 28 0 1 0-46.91-30.58l-152.2 233.5h-301a32 32 0 0 0-32 32V512a400.4 400.4 0 0 0 195.82 344 28 28 0 0 0-25.89 28.17c0.14 15.46 13.13 27.74 28.59 27.74h402.68c15.46 0 28.45-12.28 28.59-27.75a28 28 0 0 0-25.9-28.16 399.36 399.36 0 0 0 195.83-344V362.21a32 32 0 0 0-32-32zM855.88 512a343.26 343.26 0 0 1-343.77 343.85h-0.22a343.87 343.87 0 0 1-343.7-337.11q-0.08-3.37-0.07-6.77V386.21h687.76z"
fill="#1F61C1" p-id="5654"></path>
</svg>
<span>美食林</span>
</li>
<li>
<svg t="1696690983564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="16479" width="48" height="48">
<path
d="M872.296 558.46c-3.792 0-8.533-0.949-12.326-2.845-14.222-6.637-19.91-23.704-13.274-37.926 13.274-26.548 19.911-54.993 19.911-85.333 0-107.141-87.23-194.37-194.37-194.37-78.696 0-149.807 47.407-180.148 120.414-5.689 14.222-22.756 21.807-36.978 15.17-14.222-5.689-21.807-22.755-15.17-36.977 38.874-94.815 129.896-155.497 232.296-155.497 138.43 0 251.26 112.83 251.26 251.26 0 38.874-8.534 75.851-25.6 109.985-4.741 10.43-15.171 16.118-25.6 16.118z"
fill="#0097FF" p-id="16480"></path>
<path
d="M938.667 667.496c-8.534 0-17.067-3.792-22.756-11.377L759.467 452.267 635.259 606.815c-5.689 6.637-14.222 11.378-23.703 10.43-9.482 0-17.067-4.741-22.756-12.326L354.607 255.052C106.193 667.496 105.244 667.496 85.333 667.496c-16.118 0-28.444-12.326-28.444-28.444 0-7.585 2.844-14.222 7.585-19.911 17.067-23.704 166.874-269.274 264.533-431.408 4.741-8.533 14.223-13.274 23.704-13.274 10.43 0 18.963 4.741 24.652 12.326l237.985 353.66 123.26-152.652c5.688-6.637 14.222-10.43 22.755-10.43s17.067 3.793 21.807 11.378l178.252 233.244c9.482 12.326 7.585 30.34-5.689 39.822-4.74 3.793-11.377 5.69-17.066 5.69zM719.644 737.66H85.334c-16.12 0-28.445-12.326-28.445-28.444s12.326-28.445 28.444-28.445h634.311c16.119 0 28.445 12.326 28.445 28.445s-13.274 28.444-28.445 28.444zM680.77 850.49H208.593c-16.119 0-28.445-12.326-28.445-28.445s12.326-28.444 28.445-28.444h471.23c16.118 0 28.444 12.326 28.444 28.444 0.948 15.17-12.326 28.445-27.497 28.445z m223.763 0h-117.57c-16.119 0-28.444-12.326-28.444-28.445s12.325-28.444 28.444-28.444h117.57c16.119 0 28.445 12.326 28.445 28.444 0 15.17-12.326 28.445-28.445 28.445z"
fill="#0097FF" p-id="16481"></path>
</svg>
<span>一日游</span>
</li>
<li>
<svg t="1696690911245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="8614" width="48" height="48">
<path
d="M970.24 258.944v499.456c0 13.696-1.28 27.136-3.84 40.064l-1.536 6.912c-0.512 2.304-1.024 4.352-1.792 6.656-14.72 54.784-52.096 100.736-100.992 126.976-2.048 1.28-4.096 2.304-6.4 3.328-2.048 1.28-4.352 2.304-6.656 3.328-25.6 11.392-54.144 18.048-84.096 18.048h-499.2c-11.136 0-22.4-1.024-33.024-2.56-2.048-0.512-4.352-0.768-6.4-1.28s-4.352-0.768-6.4-1.536c-91.136-20.608-159.488-102.272-159.488-199.808V258.944c0-26.88 5.376-52.864 14.72-76.416 0.768-2.048 1.792-4.096 2.816-5.888 0.768-2.048 1.536-4.096 2.56-6.144C107.264 114.688 158.208 72.832 219.904 58.88c2.048-0.512 4.352-1.024 6.4-1.28 2.048-0.512 4.352-0.768 6.4-1.28 10.368-1.536 20.864-2.56 31.744-2.56h500.736C878.336 53.76 970.24 145.664 970.24 258.944z"
fill="#8ED980" p-id="8615"></path>
<path
d="M964.864 805.248c-0.512 2.304-1.024 4.352-1.792 6.656-14.72 54.784-52.096 100.736-100.992 126.976-2.048 1.28-4.096 2.304-6.4 3.328l-88.576-62.72-27.904-19.84-10.368-7.424-12.16-8.576-83.84-59.392-11.392-7.808s-0.256 0-0.256-0.256L611.84 769.28l-20.48-14.464-146.944-104.064-32-22.656-12.672-9.088-42.368-29.952-45.696-32.512-16.512-11.648-30.72-21.888-31.744-22.4-12.672-9.088-10.368-7.424-149.12-105.6v-119.552c0-26.88 5.376-52.864 14.72-76.416 0.768-2.048 1.792-4.096 2.816-5.888l141.952 100.608 12.672 9.088 31.744 22.4 103.04 73.088 32.256 22.912 12.672 9.088 308.992 218.88 18.048 12.672 5.888 4.352 6.4 4.352 56.832 40.32 17.792 12.672 53.12 37.632 5.888 4.352 5.888 3.84v0.256l13.184 9.344 60.416 42.752z"
fill="#FFD34A" p-id="8616"></path>
<path
d="M406.016 53.76v909.696H265.728c-11.136 0-22.4-1.024-33.024-2.56-2.048-0.512-4.352-0.768-6.4-1.28V57.6c2.048-0.512 4.352-0.768 6.4-1.28 10.368-1.536 20.864-2.56 31.744-2.56h141.568z"
fill="#FFFFFF" p-id="8617"></path>
<path d="M264.448 53.76h103.04v502.784h-103.04z" fill="#008DDA" p-id="8618"></path>
<path
d="M667.904 53.76h-161.28C509.44 311.936 714.368 522.752 970.24 534.656V373.12C803.2 361.472 670.336 223.104 667.904 53.76z"
fill="#FFFFFF" p-id="8619"></path>
<path
d="M674.176 53.76h-12.672c2.56 172.928 138.112 314.112 308.736 325.76v-12.672C806.528 355.2 676.736 219.776 674.176 53.76z m0 0h-12.672c2.56 172.928 138.112 314.112 308.736 325.76v-12.672C806.528 355.2 676.736 219.776 674.176 53.76z m0 0h-12.672c2.56 172.928 138.112 314.112 308.736 325.76v-12.672C806.528 355.2 676.736 219.776 674.176 53.76z m-161.152 0H500.48c2.56 261.76 210.176 475.264 469.76 487.04v-12.416C717.824 516.096 515.712 308.48 513.024 53.76z"
fill="#80C073" p-id="8620"></path>
<path
d="M441.344 656.256L593.92 764.416l22.4 16 11.392 7.808 0.256 0.256 16 11.392 53.376 37.888h0.256l16.512 11.648s0 0.256 0.256 0.256l11.904 8.576 29.952 21.888h0.768l92.16 65.28c2.304-1.024 4.608-2.048 6.656-3.328 2.304-1.024 4.352-2.048 6.4-3.328l-86.016-60.928-25.344-17.664-8.832-6.656c-0.256 0-0.256 0-0.512-0.256l-10.112-6.912-68.352-48.384-4.096-3.072-32.768-23.04-9.344-6.656-8.32-5.888-18.816-13.44-142.464-100.992c-1.92 3.84-3.84 7.68-5.888 11.392zM213.888 479.616L60.544 370.944v15.488l144.64 102.528c2.816-3.2 5.632-6.4 8.704-9.344zM80.512 170.496c-1.024 2.048-1.792 4.096-2.56 6.144-1.024 1.792-2.048 3.84-2.816 5.888l144.768 102.528v-15.488L80.512 170.496zM905.984 755.84l-13.952-9.856-5.632-4.096-5.888-4.096-43.136-30.72-9.088-6.4-8.832-6.4-44.928-31.744v-0.256l-20.864-14.464c-0.256-0.256-0.512-0.256-0.768-0.512L746.24 642.56l-17.28-12.16-316.544-224.512v15.488l300.928 213.248 19.072 13.44 6.144 4.608 6.144 4.096 52.864 37.632 8.832 6.4 9.088 6.4 62.72 44.672 5.632 3.84 5.632 3.84 13.184 9.344 60.672 43.136c0.768-2.304 1.28-4.352 1.792-6.656l1.536-6.912-60.672-42.624z"
fill="#FFA934" p-id="8621"></path>
<path
d="M219.904 958.208c2.048 0.768 4.352 1.024 6.4 1.536 2.048 0.512 4.352 0.768 6.4 1.28V701.824c-4.48-3.072-8.704-6.528-12.672-10.112v266.496z"
fill="#FFB0BD" p-id="8622"></path>
<path
d="M232.704 278.4V56.32c-2.048 0.512-4.352 0.768-6.4 1.28-2.048 0.256-4.352 0.768-6.4 1.28v210.688l6.4 4.352 6.4 4.48z"
fill="#C5C3BD" p-id="8623"></path>
<path d="M232.704 293.888l-6.4-4.352-6.4-4.608v188.928c4.096-3.584 8.32-6.912 12.672-10.112V293.888z"
fill="#EAC243" p-id="8624"></path>
<path d="M412.416 53.76h-12.672v343.04l12.672 9.088z" fill="#80C073" p-id="8625"></path>
<path d="M399.744 963.456h12.672V691.328c-4.096 3.584-8.32 7.04-12.672 10.112v262.016z" fill="#C5C3BD"
p-id="8626"></path>
<path d="M399.744 412.544v51.84c4.48 3.2 8.704 6.528 12.672 10.112v-53.12l-6.4-4.352-6.272-4.48z"
fill="#EAC243" p-id="8627"></path>
<path
d="M399.744 396.8v15.744l6.272 4.608 6.4 4.224v-15.488zM232.704 293.888v-15.488l-6.4-4.48-6.4-4.352v15.488l6.4 4.608z"
fill="#EE9B30" p-id="8628"></path>
<path
d="M447.232 644.864c8.832-18.816 13.952-39.68 13.952-61.952 0-43.136-18.944-81.792-48.768-108.416v145.664l34.816 24.704zM205.184 488.96c-21.504 25.344-34.56 58.112-34.56 93.952 0 43.392 19.2 82.304 49.28 108.928V499.328l-14.72-10.368zM232.704 464v29.056l31.744 22.4 33.024 23.296 24.832 17.792 31.488 22.4h0.256l45.696 32.512V464.384c-23.68-16.768-52.608-26.752-83.84-26.752-30.976 0-59.648 9.856-83.2 26.368zM360.832 599.424l-60.416-42.88-7.68-5.376-28.416-20.352-31.744-22.4v193.408c23.552 16.512 52.224 26.368 83.328 26.368 31.232 0 60.16-9.984 83.84-26.752v-74.624l-38.912-27.392zM219.904 474.112c-2.048 1.792-4.096 3.584-6.016 5.504l6.016 4.352v-9.856zM412.416 691.328c11.392-10.112 21.12-21.888 28.8-35.2l-28.8-20.48v55.68z"
fill="#0078D3" p-id="8629"></path>
<path
d="M357.376 588.928l-45.696-32.384-16.512-11.776-30.72-21.76-31.744-22.4v7.936l31.744 22.272 28.416 20.352 7.552 5.376 60.416 42.88 38.912 27.392v-7.936z"
fill="#0078D3" p-id="8630"></path>
<path
d="M353.792 578.816l-31.488-22.272-24.96-17.792-32.896-23.424-31.744-22.272v7.552l31.744 22.4 30.72 21.76 16.512 11.776 45.696 32.384 42.368 29.952v-7.552l-45.696-32.512zM219.904 483.84l-6.016-4.352c-3.072 2.944-5.888 6.144-8.704 9.344l14.72 10.368v-15.36zM412.416 635.648l28.8 20.48c2.176-3.712 4.096-7.424 6.016-11.392l-34.816-24.576v15.488zM219.904 499.328v192.512c4.096 3.584 8.32 6.912 12.672 10.112V508.544l-12.672-9.216zM406.016 631.424l-6.4-4.608V701.44c4.48-3.2 8.704-6.528 12.672-10.112v-55.68l-6.272-4.224z"
fill="#0078D3" p-id="8631"></path>
<path
d="M399.744 611.328l6.4 4.608 6.4 4.352V474.496c-4.096-3.584-8.32-7.04-12.672-10.112v146.944zM232.704 493.056v-29.056c-4.48 3.072-8.704 6.528-12.672 10.112v9.856l12.672 9.088z"
fill="#0078D3" p-id="8632"></path>
<path
d="M232.704 493.056l-12.8-9.216v15.488l12.8 9.216v-7.936zM399.744 626.816l6.272 4.608 6.4 4.224v-15.488l-6.4-4.224-6.272-4.608v7.552zM910.592 718.848c0 89.344-72.32 161.792-161.792 161.792-89.344 0-161.792-72.32-161.792-161.792 0-33.792 10.368-65.28 28.16-91.392 18.816 7.808 39.04 11.904 60.672 11.904 27.648 0 53.632-6.912 76.16-19.328 22.656 12.416 48.512 19.328 76.16 19.328 19.584 0 38.144-3.584 55.296-9.856 17.152 25.6 27.136 56.32 27.136 89.344z"
fill="#0078D3" p-id="8633"></path>
<path
d="M887.552 725.376c0 70.912-62.08 128.384-138.752 128.384-76.672 0-138.752-57.472-138.752-128.384 0-26.88 8.96-51.84 24.192-72.576 16.128 6.272 33.536 9.472 52.096 9.472 23.808 0 45.952-5.504 65.408-15.36 19.456 9.856 41.6 15.36 65.408 15.36 16.768 0 32.64-2.816 47.488-7.808 14.464 20.224 22.912 44.672 22.912 70.912z"
fill="#0078D3" p-id="8634"></path>
<path
d="M892.8 707.072l-1.536-7.68v-0.256c-1.536-7.68-3.84-14.976-6.912-22.144-0.256-0.256-0.256-0.768-0.512-1.024l-2.304-5.376c-3.328-7.168-7.424-13.696-11.904-20.352l-2.816-3.584-4.352 1.536c-7.424 2.56-14.976 4.352-22.656 5.632-7.424 1.024-15.232 1.792-23.168 1.792-22.656 0-43.392-4.864-62.208-14.464l-2.816-1.536-2.816 1.664c-0.768 0.512-1.536 0.768-2.56 1.28-2.304 1.024-4.608 2.048-6.912 2.816-2.304 1.28-4.608 2.048-7.168 2.816-14.464 5.12-29.952 7.68-46.208 7.68-17.28 0-34.048-3.072-49.792-8.832l-4.352-1.792-3.072 3.84c-2.56 3.328-4.608 6.912-6.656 10.112-1.28 2.048-2.56 4.096-3.584 6.144-0.512 1.024-1.024 2.048-1.28 2.816-1.536 2.56-2.816 5.376-3.84 8.064-2.56 5.632-4.608 11.648-5.888 17.536-0.768 2.048-1.024 3.84-1.536 5.888v0.768l-1.536 6.4v0.512c-0.768 6.144-1.28 12.16-1.28 18.304 0 11.648 1.536 23.168 4.864 34.048 0.768 3.328 1.792 6.656 3.328 9.856 1.28 3.84 2.816 7.68 4.608 11.136 19.84 40.832 60.928 70.784 109.952 77.952 4.352 0.768 8.32 1.28 12.928 1.28 3.072 0.512 6.4 0.512 9.6 0.512h2.048c66.56-0.768 122.368-43.392 138.368-100.736 0.768-2.048 1.28-4.096 1.792-6.4v-0.256c0.512-2.304 1.024-4.608 1.024-6.912 1.536-6.656 2.048-13.44 2.048-20.608 0.384-6.272-0.128-12.416-0.896-18.432zM879.36 744.576c0 2.56-0.512 4.864-1.28 7.168-12.928 54.528-66.048 95.744-129.28 95.744-6.144 0-11.904-0.256-17.536-1.024-5.12-0.768-9.856-1.536-14.72-2.816-6.656-1.28-12.928-3.328-19.072-5.888h-0.256c-21.12-8.064-39.296-21.376-53.376-37.888-4.096-4.864-7.808-10.112-11.136-15.744-2.56-3.84-4.608-8.064-6.656-12.416-6.4-14.208-9.856-29.952-9.856-46.464 0-6.144 0.512-12.16 1.536-18.304 0.256-2.048 0.768-4.096 1.28-6.4 0.512-2.048 1.024-4.352 1.536-6.4 0.512-1.536 1.024-3.328 1.536-4.864 0.512-2.048 1.28-4.096 2.304-6.144 2.048-5.12 4.352-10.112 7.168-14.976 1.536-2.816 3.328-5.376 5.12-8.064 15.744 5.376 32.512 8.064 49.536 8.064 20.864 0 40.32-3.84 58.368-11.648 2.304-0.512 4.864-1.792 7.168-2.816 7.424 3.584 14.976 6.4 22.912 8.32v0.256c13.44 3.84 27.648 5.888 42.368 5.888 4.352 0 8.32-0.256 12.672-0.512 10.88-0.768 21.888-2.816 32.512-6.144 6.144 9.344 11.136 19.584 14.208 30.464 0.256 0.512 0.512 1.28 0.512 2.048 0.768 2.048 1.28 4.096 1.792 6.4 0.512 2.048 1.024 4.096 1.28 6.4 1.024 6.144 1.536 12.16 1.536 18.304 0 4.352-0.256 8.32-0.768 12.416-0.384 2.56-0.64 4.864-1.408 7.04z"
fill="#EEEAE5" p-id="8635"></path>
<path
d="M884.992 700.672H612.608c3.584-17.536 11.136-33.792 21.632-48 16 6.144 33.536 9.344 52.096 9.344 23.808 0 45.952-5.376 65.536-15.232 19.328 9.856 41.344 15.232 65.28 15.232 16.768 0 32.768-2.816 47.488-7.808 9.728 13.696 16.896 29.44 20.352 46.464z"
fill="#FFFFFF" p-id="8636"></path>
<path
d="M884.992 700.672H612.608c3.584-17.536 11.136-33.792 21.632-48 16 6.144 33.536 9.344 52.096 9.344 23.808 0 45.952-5.376 65.536-15.232 19.328 9.856 41.344 15.232 65.28 15.232 16.768 0 32.768-2.816 47.488-7.808 9.728 13.696 16.896 29.44 20.352 46.464z"
fill="#E7322C" p-id="8637"></path>
<path
d="M891.264 699.392v-0.256c-1.792-7.68-4.096-14.976-6.912-22.144-0.256-0.256-0.256-0.768-0.512-1.024l-2.304-5.376c-3.328-7.168-7.424-13.696-11.904-20.352l-2.816-3.584v-0.256l-4.608 1.536c-7.424 2.56-14.72 4.352-22.4 5.888-7.424 1.024-15.232 1.792-23.168 1.792-22.656 0-43.392-4.864-62.208-14.464l-2.816-1.536-2.816 1.664c-0.768 0.512-1.536 0.768-2.56 1.28-2.304 1.024-4.608 2.048-6.912 2.816-2.304 1.28-4.608 2.048-7.168 2.816-14.464 5.12-29.952 7.68-46.208 7.68-17.28 0-34.048-3.072-49.792-8.832l-4.352-1.792h-0.256l-2.816 3.84c-2.56 3.328-4.608 6.912-6.656 10.112-1.28 2.048-2.56 4.096-3.584 6.144-0.512 1.024-1.024 2.048-1.28 2.816-1.536 2.56-2.816 5.376-3.84 8.064-2.56 5.632-4.608 11.648-5.888 17.536-0.768 2.048-1.024 3.84-1.536 5.888v0.768l-1.536 6.4v0.512h287.872l-1.024-7.936z m-270.592-4.992c0.512-1.536 1.024-3.328 1.536-4.864 0.512-2.048 1.28-4.096 2.304-6.144 1.792-5.12 4.352-10.112 7.168-14.976 1.536-2.816 3.328-5.376 5.12-8.064 15.744 5.376 32.512 8.064 49.536 8.064 20.864 0 40.32-3.84 58.368-11.648 2.304-0.512 4.864-1.792 7.168-2.816 7.424 3.584 14.976 6.4 22.912 8.32v0.256c13.44 3.84 27.648 5.888 42.368 5.888 4.352 0 8.32-0.256 12.672-0.512 11.136-1.024 22.144-3.072 32.512-6.144 6.144 9.344 11.136 19.584 14.208 30.464 0.256 0.768 0.512 1.28 0.768 2.048H620.672z"
fill="#EEEAE5" p-id="8638"></path>
<path
d="M698.752 763.136c4.096-6.144 6.4-11.264 6.784-15.872 0.512-4.608-0.128-8.704-1.92-12.16-1.792-3.328-4.096-6.016-6.784-7.68-2.688-1.664-5.376-2.688-7.808-3.2-2.432-0.512-5.248-0.512-8.064-0.256-5.248 0.256-9.984 2.048-13.824 5.248-3.84 3.072-6.912 7.936-9.344 14.464l-1.28 3.584 14.208 2.176 0.896-2.432c1.152-3.072 2.688-5.248 4.736-6.784 2.048-1.536 4.224-2.304 6.528-2.56 1.92-0.128 3.584 0.256 5.12 1.408 1.536 1.28 2.432 2.688 2.688 4.48 0.256 2.048-0.256 4.608-1.536 7.68-1.536 3.328-4.864 8.32-10.112 14.72-5.248 6.528-9.728 11.264-13.056 14.336-4.096 3.712-6.4 7.936-6.784 12.672v4.864h47.36V784.64h-25.344c8.448-9.472 14.208-16.64 17.536-21.504zM771.2 763.904c-1.28-1.792-3.072-3.584-5.376-4.864 2.816-2.304 4.608-5.12 5.632-8.32 1.536-4.864 1.536-9.088 0.256-12.928-1.28-3.584-3.584-6.656-6.656-8.576-2.816-2.048-5.376-3.328-7.808-3.84-4.864-1.28-11.392-1.28-16.512 0-2.816 1.024-5.632 2.56-7.808 4.608-2.048 2.304-3.84 4.608-4.864 6.912-1.28 2.56-1.792 5.632-1.536 8.832 0.256 3.328 0.768 6.4 2.048 8.832 1.024 1.536 2.048 3.072 3.84 4.608-2.304 1.792-4.096 3.584-5.376 5.888-1.792 3.584-2.816 7.168-2.816 10.624 0 3.584 0.512 6.656 1.28 9.344 0.768 3.072 2.304 5.632 4.608 7.808 2.304 2.048 5.12 3.84 8.32 4.864 3.328 1.024 6.912 1.536 11.136 1.536 4.608 0 8.064-0.512 10.88-1.536 3.072-1.024 5.632-2.56 7.424-4.608 1.792-1.792 3.328-4.096 4.608-6.656 1.536-2.816 2.304-6.4 2.304-10.88s-1.28-8.32-3.584-11.648zM742.272 739.84c1.024-1.28 3.072-2.048 6.144-2.048 0.512 0 0.768-0.256 1.28-0.256 2.56 0 4.608 0.512 5.888 1.536 1.024 0.768 2.304 1.792 2.304 4.864 0.256 2.56-0.512 4.608-2.048 6.4-1.28 1.536-3.584 2.304-6.656 2.304-3.072 0-5.12-0.768-6.4-2.304-1.536-1.792-2.304-3.584-2.304-5.632 0-1.92 0.512-3.328 1.792-4.864z m16.512 41.088c-1.024 2.048-2.56 3.328-5.12 3.84-3.072 0.768-6.144 0.768-8.832 0.256-2.816-0.768-3.84-2.048-4.352-2.816-1.024-2.048-1.536-4.352-1.28-6.912 0-2.304 0.768-4.096 2.56-5.632 1.792-1.536 4.096-2.56 6.912-2.816h0.768c2.56 0 4.864 0.768 6.912 2.048 2.304 1.536 3.328 3.328 3.584 5.12 0.384 2.304-0.128 4.608-1.152 6.912zM840.704 746.368c-1.28-6.144-3.84-11.392-7.808-15.744-4.096-4.608-9.088-6.656-14.72-6.656s-10.112 1.536-13.952 4.608c-3.84 2.816-6.656 6.656-8.576 11.136-1.792 4.352-2.816 10.112-3.328 17.536-0.256 7.168 0.256 12.928 1.024 17.28 0.768 4.352 2.304 8.32 4.352 12.416 2.304 4.096 6.144 7.68 11.136 10.112 3.072 1.28 6.144 2.048 9.088 2.048 2.56 0 4.864-0.512 7.424-1.536 5.376-2.048 9.344-5.888 12.16-11.136 2.304-5.12 3.84-11.648 4.352-19.584 0.128-7.552-0.128-14.336-1.152-20.48z m-15.488 31.488c-1.28 3.584-3.072 5.888-5.376 6.912-1.536 0.768-3.584 1.024-6.4-1.024-2.56-1.792-4.352-5.376-5.376-10.112-1.28-5.12-1.536-11.392-0.768-18.048 0.768-6.656 2.048-11.392 4.352-14.464 1.792-2.304 3.84-3.584 6.144-3.584h0.256c1.28 0 3.328 0.512 5.376 3.84 1.792 2.816 2.816 6.4 3.328 9.856 0.256 4.096 0.512 8.576 0.512 13.696 0 4.608-0.768 9.088-2.048 12.928zM314.624 491.392l-60.032 164.352c-1.664 4.48 3.84 8.192 7.68 5.248l54.016-41.6c1.792-1.408 4.48-1.408 6.272 0.128l49.792 40.96c3.712 3.072 9.344-0.512 7.808-4.992l-56.192-163.84c-1.536-4.48-7.808-4.48-9.344-0.256z"
fill="#FFFFFF" p-id="8639"></path>
<path
d="M756.224 880.256c-2.432 0.128-4.864 0.384-7.424 0.384-73.6 0-135.552-49.152-155.136-116.352l-152.32-107.904-0.128-0.128c-7.68 13.184-17.408 25.088-28.8 35.2v272.128h352.64c29.952 0 58.368-6.656 84.096-18.048l-92.16-65.28h-0.768zM219.904 59.392c-61.696 13.952-112.64 55.808-139.392 111.744L219.904 270.08V59.392z"
fill="#DFDCD6" p-id="8640"></path>
<path
d="M170.624 584.064c0-35.84 13.056-68.608 34.56-93.952l-144.64-102.656v371.968c0 97.536 68.352 179.2 159.488 199.808v-266.24c-30.208-26.624-49.408-65.536-49.408-108.928z"
fill="#FFC9D1" p-id="8641"></path>
</svg>
<span>当地攻略</span>
</li>
</ul>
<!-- 酒店机票旅游 -->
<div class="hpt">
<div class="hotel">
<div><span>酒店</span>
<span>
<svg t="1696697575596" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="15891" width="32" height="32">
<path
d="M913.162822 342.982974c-222.488061-10.591494-307.780264-158.458881-314.970208-171.664899V26.678825a26.678825 26.678825 0 0 0-26.678825-26.678825H112.131101A26.678825 26.678825 0 0 0 85.452276 26.678825v970.64235a26.678825 26.678825 0 0 0 26.678825 26.678825h799.737798a26.678825 26.678825 0 0 0 26.678825-26.678825V369.621781a26.678825 26.678825 0 0 0-25.384902-26.638807zM683.804963 912.05565a26.678825 26.678825 0 0 1-26.678825 26.678825h-58.693415V341.222172l70.885638 36.349899a26.678825 26.678825 0 0 1 14.499942 23.744154z m171.091305-170.531049a26.678825 26.678825 0 0 1-26.678825 26.678825h-58.693415V426.8612l68.417847 26.678825a26.678825 26.678825 0 0 1 16.981072 24.851325z"
fill="#2674FD" p-id="15892"></path>
<path d="M170.811177 173.278968l340.79531 0 0 84.331766-340.79531 0 0-84.331766Z" fill="#FFE41F"
p-id="15893"></path>
<path d="M170.811177 512.300137l260.118544 0 0 86.706181-260.118544 0 0-86.706181Z" fill="#FFE41F"
p-id="15894"></path>
<path d="M170.811177 341.662372l340.715274 0 0 86.706181-340.715274 0 0-86.706181Z" fill="#FFE41F"
p-id="15895"></path>
</svg>
</span>
</div>
<div><span>海外酒店</span><span>特价酒店</span></div>
<div><span>团购</span><span>民宿·客栈</span></div>
</div>
<div class="plane-ticket">
<div><span>机票</span>
<span>
<svg t="1696697665388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="17219" width="32" height="32">
<path
d="M310.39488 599.299413l80.418133-44.89216-170.502826-167.294293c-14.103893-13.974187-22.8352-22.739627-26.25536-26.364587l-3.05152-3.447466c-17.44896-20.8896-23.98208-50.223787-8.669867-73.54368 17.885867-27.2384 61.508267-20.206933 111.479467 3.938986l283.101866 145.134934 2.587307 0.341333c10.151253 0.989867 23.26528-1.59744 38.775467-10.082987l155.293013-88.76032 3.6864-1.88416c3.2768-1.624747 7.058773-3.392853 11.277653-5.236053l7.488854-3.140267c14.042453-5.666133 28.439893-10.226347 42.707626-13.08672 42.243413-8.465067 77.134507-0.989867 97.368747 29.969067 21.149013 32.283307 15.107413 65.488213-10.752 95.60064-17.421653 20.2752-41.765547 37.70368-73.27744 55.412053l-454.656 239.028907-7.154347 3.495253a231.2192 231.2192 0 0 1-4.082346 1.897814l-5.495467 2.409813c-37.280427 15.919787-76.82048 23.4496-117.712213 16.186027-28.8768-5.12-56.128853-17.626453-81.408-38.76864l-30.173867-27.163307-11.605333-10.601813c-21.01248-19.326293-33.860267-31.880533-39.082667-38.242987l-0.771413-0.96256-8.710827-10.4448c-4.799147-6.0416-8.567467-11.721387-11.3664-17.687893-7.645867-16.315733-6.59456-32.918187 6.915413-45.390507 13.47584-12.445013 30.139733-14.267733 49.60256-8.88832 5.911893 1.6384 11.414187 3.638613 18.90304 6.79936L173.397333 571.528533l99.00032 38.434134c12.049067 0.723627 23.217493-2.3552 37.9904-10.6496z"
fill="#3296FA" p-id="17220"></path>
</svg>
</span>
</div>
<div><span>火车票</span><span>特价机票</span></div>
<div><span>汽车票·船票</span><span>专车·租车</span></div>
</div>
<div class="travel">
<div><span>旅游</span><span>
<svg t="1696697701846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="18355" width="32" height="32">
<path
d="M619.008 162.816C936.96 293.376 936.96 538.624 936.96 538.624c-158.72-192-423.936-161.28-423.936-161.28-14.848 299.52 317.952 645.12 317.952 645.12H619.52c-28.16-137.216-98.816-247.808-189.44-295.936-24.576-114.688-32.256-231.936-23.04-349.184-205.312 80.896-265.216 268.8-265.216 268.8-46.592-282.112 211.968-375.808 211.968-375.808-172.544-40.448-265.216 161.28-265.216 161.28-33.28-309.248 265.216-268.8 265.216-268.8L407.552 1.536l105.984 107.52c242.688-168.96 371.2 53.76 371.2 53.76-113.664-53.76-265.728 0-265.728 0z"
fill="#3366FF" p-id="18356"></path>
<path
d="M327.68 753.664c108.032 0 198.144 113.664 227.328 268.8H100.352c29.184-155.136 119.296-268.8 227.328-268.8z"
fill="#AEC9FF" p-id="18357"></path>
</svg>
</span></div>
<div><span>门票</span><span>目的地攻略</span></div>
<div><span>游轮旅行</span><span>定制旅行</span></div>
</div>
</div>
<!-- 其他 -->
<div class="other">
<div><span>
<svg t="1696698517408" class="icon" viewBox="0 0 1122 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2457" width="32" height="32">
<path
d="M561.152 910.336c-7.68 0-25.088-13.824-53.248-41.984-27.648-28.16-41.472-45.568-41.472-53.248 0-12.288 11.776-22.528 35.84-30.72s43.52-12.8 59.392-12.8c15.872 0 35.328 4.096 59.392 12.8s35.84 18.432 35.84 30.72c0 7.68-13.824 25.6-41.472 53.248-29.184 28.16-46.592 41.984-54.272 41.984z"
fill="#1296DB" p-id="2458"></path>
<path
d="M715.264 755.712c-0.512 0-8.192-4.608-23.04-14.336-14.336-9.728-33.792-18.944-57.856-28.672-24.064-9.728-48.64-14.336-73.216-14.336-24.576 0-49.152 4.608-73.216 14.336-24.064 9.728-43.52 18.944-57.856 28.672-14.336 9.728-22.016 14.336-23.04 14.336-6.656 0-24.576-14.336-53.248-43.008s-43.008-46.08-43.008-53.248c0-5.12 2.048-9.216 5.632-13.312 29.696-29.184 67.072-52.224 112.128-69.12s89.088-25.088 133.12-25.088c44.032 0 88.064 8.192 133.12 25.088 45.056 16.896 82.432 39.936 112.128 69.12 3.584 3.584 5.632 8.192 5.632 13.312 0 6.656-14.336 24.576-43.008 53.248-29.696 28.672-47.104 43.008-54.272 43.008z"
fill="#19A3E0" p-id="2459"></path>
<path
d="M871.424 600.064c-4.096 0-8.704-1.536-13.312-4.608-51.712-39.936-99.84-69.632-143.872-88.064s-95.232-28.16-153.088-28.16c-32.256 0-65.024 4.096-97.28 12.8S402.944 510.464 378.88 522.24c-24.064 11.776-45.568 23.552-65.024 35.328s-34.304 22.016-45.056 30.208c-11.264 8.192-16.896 12.8-17.92 12.8-6.656 0-24.064-14.336-52.736-43.008s-43.008-46.08-43.008-53.248c0-4.608 2.048-8.704 5.632-12.8 50.176-50.176 111.104-89.088 182.784-117.248 71.68-27.648 143.872-41.472 217.088-41.472s145.408 13.824 217.088 41.472c71.68 27.648 132.608 67.072 182.784 117.248 3.584 3.584 5.632 8.192 5.632 12.8 0 6.656-14.336 24.576-43.008 53.248s-45.056 42.496-51.712 42.496z"
fill="#48B5E5" p-id="2460"></path>
<path
d="M1026.048 445.44c-4.096 0-8.192-1.536-12.8-5.12-68.096-59.904-138.752-104.96-212.48-135.168-73.216-30.208-153.6-45.568-240.128-45.568-87.04 0-166.912 15.36-240.128 45.568S176.64 380.416 108.544 440.32c-4.096 3.584-8.192 5.12-12.8 5.12-6.656 0-24.064-14.336-52.736-43.008S0 356.352 0 349.184c0-5.12 2.048-9.216 5.632-13.312C76.8 265.216 161.792 210.432 260.096 171.52s198.656-58.368 301.056-58.368 202.752 19.456 301.056 58.368 183.296 93.696 254.464 164.352c3.584 3.584 5.632 8.192 5.632 13.312 0 6.656-14.336 24.576-43.008 53.248-28.672 28.672-46.592 43.008-53.248 43.008z"
fill="#80D8FF" p-id="2461"></path>
</svg>
</span><span>WiFi电话卡</span></div>
<div><span>
<svg t="1696698585295" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="3729" width="32" height="32">
<path
d="M751.371 126.707H113.488c-34.901 0-64.006 28.42-64.006 63.32v767.704c0 34.216 28.667 63.386 64.006 63.386H751.37c34.903 0 63.944-28.36 63.944-63.386V190.028c0-34.217-28.67-63.321-63.944-63.321z m-318.973 63.32c176.25 0 319.097 141.85 319.097 316.856S608.648 823.674 432.398 823.674c-176.252 0-319.097-141.785-319.097-316.79s142.845-316.857 319.097-316.857z m286.564 768.267H145.835c-17.95 0-32.534-14.833-32.534-31.972 0-17.576 14.584-31.91 32.534-31.91h573.188c17.889 0 32.534 14.833 32.534 31.91-0.06 17.698-14.645 31.972-32.595 31.972z"
fill="#1296DB" p-id="3730"></path>
<path
d="M225.731 555.619c9.972-1.748 18.262-7.227 31.038-19.385 1.37-1.244 32.036-29.351 53.163-29.351 21.127 0 47.614 30.288 51.416 32.967 8.853 6.169 13.588 8.974 16.951 10.16 3.99 1.373 24.37 0.683 33.22-5.672 8.913-6.356 10.222-19.57 7.728-34.341-2.057-12.153-7.79-25.115-18.385-43.374-1.87-3.304-15.084-25.865-17.08-30.04-6.602-13.402-8.723-23.746-3.61-33.905 10.591-20.88 25.238-26.178 58.956-30.041 4.486-0.5 35.274-6.608 42.005-13.65 10.345-10.78 10.722-46.242-5.546-73.544-9.413-15.828-9.91-30.6-0.312-42.19 3.114-3.741 13.275-9.287 22.81-13.96-21.066-4.924-43.126-7.543-65.69-7.543-158.55 0-287.187 127.64-287.187 285.134 0 11.215 0.624 22.31 1.868 33.152 4.363 1.87 9.036 3.864 10.346 4.489 27.737 11.779 44.627 15.209 68.309 11.094zM417.316 791.578c4.985 0.311 10.032 0.434 15.082 0.434 124.647 0 230.722-78.839 270.484-188.965-4.61-0.5-8.975-0.188-12.964 0.81-12.838 3.242-22.31 14.832-26.673 39.64-3.49 34.529-29.791 43.813-80.648 44.933-3.116 0.063-24.928 0.374-32.41 0.564-52.973-6.234-103.893 5.36-131.875 28.295-25.302 20.628-27.17 45.804-0.996 74.289z"
fill="#1296DB" p-id="3731"></path>
<path
d="M879.01 0.003H241.126c-34.901 0-64.006 26.3-64.006 58.834v5.046h638.195c35.214 0 63.82 29.044 63.82 63.884v702.76c34.837-0.062 63.82-26.363 63.82-58.834V58.837c0-31.849-28.671-58.834-63.945-58.834z"
fill="#1296DB" p-id="3732"></path>
</svg>
</span><span>保险·签证</span></div>
<div><span>
<svg t="1696698621247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5036" width="32" height="32">
<path
d="M511.658667 948.053333c-241.834667 0-437.76-194.218667-437.76-433.834666 0-74.410667 18.944-145.92 54.442666-209.578667 4.266667-7.509333 12.288-12.288 20.992-12.458667a24.439467 24.439467 0 0 1 21.674667 36.352 381.0816 381.0816 0 0 0-48.298667 185.856c0 212.650667 174.08 385.194667 389.12 385.194667 46.933333 0 92.672-8.192 135.68-24.064 26.794667-9.898667 45.738667 26.453333 22.357334 42.837333l-144.042667 100.181334c-7.168 4.949333-16.384 5.802667-24.234667 2.048a24.746667 24.746667 0 0 1-13.994666-19.968c-0.682667-8.704 3.242667-17.066667 10.410666-22.016l45.226667-31.573334c-10.752 0.682667-21.162667 1.024-31.573333 1.024z m0-867.669333c241.834667 0 437.76 194.218667 437.76 433.834667 0 89.770667-27.648 175.616-78.336 247.637333-7.68 10.922667-22.869333 13.653333-33.962667 5.973333-10.922667-7.68-13.653333-22.869333-5.973333-33.962666 45.397333-64.341333 69.632-141.141333 69.461333-219.648 0-212.650667-174.08-385.194667-389.12-385.194667-67.925333-0.170667-134.826667 17.408-193.877333 51.029333-25.258667 14.336-49.834667-19.797333-28.330667-39.253333L437.248 7.338667c6.485333-6.144 15.530667-8.192 24.064-5.461334 8.362667 2.730667 14.677333 9.728 16.554667 18.261334 1.706667 8.704-1.194667 17.578667-8.021334 23.381333l-51.882666 46.762667c31.061333-6.656 62.293333-9.898667 93.696-9.898667z m0 0"
fill="#185FFF" p-id="5037"></path>
<path
d="M353.109333 322.901333c-6.144-6.485333-8.362667-15.701333-5.632-24.234666 2.730667-8.533333 9.898667-14.848 18.773334-16.384 8.874667-1.706667 17.749333 1.706667 23.381333 8.704l140.288 159.573333a24.302933 24.302933 0 0 1-36.522667 32.085333l-140.288-159.744z m0 0"
fill="#185FFF" p-id="5038"></path>
<path
d="M671.061333 322.901333a24.302933 24.302933 0 0 0-36.522666-32.085333l-140.117334 159.573333c-6.144 6.485333-8.362667 15.701333-5.632 24.234667 2.730667 8.533333 9.898667 14.848 18.773334 16.384 8.874667 1.706667 17.749333-1.706667 23.381333-8.704l140.117333-159.402667z m0 0"
fill="#185FFF" p-id="5039"></path>
<path
d="M356.010667 514.730667a24.405333 24.405333 0 1 1 0-48.810667h291.84a24.405333 24.405333 0 1 1 0 48.810667h-291.84z m24.234666 145.92a24.405333 24.405333 0 1 1 0-48.810667h243.2a24.405333 24.405333 0 1 1 0 48.810667H380.245333z m0 0"
fill="#185FFF" p-id="5040"></path>
<path
d="M487.253333 490.325333a24.405333 24.405333 0 1 1 48.810667 0v302.762667a24.405333 24.405333 0 1 1-48.810667 0V490.325333z m0 0"
fill="#185FFF" p-id="5041"></path>
</svg>
</span><span>外币兑换</span></div>
<div><span>
<svg t="1696698661760" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="6659" width="32" height="32">
<path
d="M930.794293 921.123661l-31.930667-536.549018c-0.399613-33.155081-27.493366-60.002672-60.73796-60.002672H775.408823l-16.921208-155.171278c-0.831195-22.707602-20.920533-40.942737-45.495126-40.942737h-40.770104l-2.57031-31.406375c-0.49552-32.132072-24.632138-58.106909-54.232263-58.106909h-200.986095c-29.596928 0-53.736743 25.974837-54.229065 58.106909l-18.615566 227.52039H191.727864c-33.244594 0-60.338347 26.847591-60.73796 60.002672L99.056039 921.123661a23.084837 23.084837 0 0 0-0.038362 1.329912c0 33.493953 27.247204 60.741157 60.741157 60.741157h710.335862c33.493953 0 60.741157-27.247204 60.741157-60.741157a20.524117 20.524117 0 0 0-0.04156-1.329912z m-217.805001-747.909063c0.358053 0 0.658562 0.038363 0.901526 0.089514l16.492823 151.264662h-42.119197l-12.384802-151.357373h37.10965z m-69.628548 151.357373h-93.768362l16.492823-151.264662a4.155974 4.155974 0 0 1 0.901527-0.089514h63.98921l12.384802 151.354176z m-238.485767-224.684737c0.05115-0.607412 0.073529-1.214823 0.073529-1.825431 0-8.219238 5.00635-14.360488 9.482014-14.360489h200.986095c4.475664 0 9.482014 6.141251 9.482014 14.360489 0 0.607412 0.025575 1.21802 0.073529 1.825431l2.336936 28.573919h-60.328756c-24.57779 0-44.670326 18.235135-45.495127 40.942737l-16.921207 155.171278h-118.074416l18.385389-224.687934z m433.250689 269.441379c8.813862 0 15.984515 7.170653 15.984515 15.984515 0 0.44437 0.012788 0.885542 0.04156 1.329912l25.396197 426.709824H150.305591l25.396198-426.709824c0.025575-0.44437 0.038363-0.885542 0.038363-1.329912 0-8.813862 7.170653-15.984515 15.984515-15.984515h146.197571l-4.207125 51.418988a22.378321 22.378321 0 0 0 20.479361 24.127027c12.352833 1.035797 23.120002-8.161693 24.127027-20.479361l4.504436-55.069851m264.195261 0.003197l4.504437 55.069851a22.378321 22.378321 0 1 0 44.606387-3.647666l-4.207124-51.418988m178.169798 569.106278H159.758834a16.003696 16.003696 0 0 1-15.978122-15.460223l3.861859-64.868359h734.568387l3.861859 64.868359a16.006893 16.006893 0 0 1-15.978121 15.460223z"
fill="#009FE8" p-id="6660"></path>
<path
d="M424.801274 646.41059l-12.806794 80.814511a22.384715 22.384715 0 0 0 22.103388 25.882126 22.346352 22.346352 0 0 0 10.661671-2.70458l71.930318-38.989429 72.902176 37.15121c3.232069 1.643208 6.691118 2.308164 10.230089 2.439237a22.378321 22.378321 0 0 0 22.371928-22.378321c0-1.994867-0.258949-3.928994-0.748076-5.773607l-14.542712-78.752508 57.863945-57.851157a22.371927 22.371927 0 1 0-12.886716-38.00798l-81.111823-10.7352-37.138422-72.905373c-3.865056-7.589448-11.627136-12.276108-20.223609-12.218563a22.378321 22.378321 0 0 0-19.907115 12.726871l-35.277824 73.826081-80.811314 12.790809a22.378321 22.378321 0 0 0-11.918055 38.324473l59.308945 56.3614z m52.03599-65.108127a22.375124 22.375124 0 0 0 16.694227-12.455134l20.799051-43.529031 21.898786 42.988755a22.384715 22.384715 0 0 0 17.004327 12.026749l47.822472 6.326671-34.117349 34.110955a22.378321 22.378321 0 0 0-6.186007 19.89113l8.759514 47.438844-42.982361-21.908376a22.400699 22.400699 0 0 0-20.827823 0.265342l-42.410115 22.98893 7.551085-47.649839a22.36873 22.36873 0 0 0-6.687921-19.724892l-34.967725-33.231806 47.649839-7.538298z"
fill="#009FE8" p-id="6661"></path>
</svg>
</span><span>购物</span></div>
<div><span>
<svg t="1696698682384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="8025" width="32" height="32">
<path
d="M943.64 5.631c-5.887-3.788-27.131-14.333-52.317 9.368l-9.368 8.856C816.278 86.308 772.92 127.516 531.862 46.43a544.618 544.618 0 0 0-195.907-28.923c-52.214 2.048-103.917 12.081-153.777 29.69-85.181 29.999-135.604 71.975-137.703 73.715a29.793 29.793 0 0 0-4.863 5.222 29.588 29.588 0 0 0-11.364 37.113l373.078 842.958a29.588 29.588 0 1 0 54.108-23.958L282.564 591.51l2.866-5.529c39.263-74.943 83.697-159.869 312.16-139.597a243.002 243.002 0 0 0 128.387-23.65c35.22-16.842 68.75-42.284 99.668-75.711 48.427-52.215 91.12-125.571 117.074-201.18 9.93-28.82 16.483-55.49 19.043-77.144 2.354-20.476 3.071-49.348-18.122-63.016z m-63.118 138.113c-22.114 57.743-54.006 112.26-89.789 153.572-57.026 65.78-120.247 96.136-187.92 90.095-116.92-10.34-204.354 4.556-267.37 45.56-40.082 26.107-64.705 59.023-83.133 90.25L91.366 159.612a450.12 450.12 0 0 1 112.773-57.436c100.539-34.861 204.456-34.759 308.885 0.358 123.574 41.618 211.161 55.44 275.56 43.614 48.119-8.804 80.625-31.123 109.036-56.053a452.526 452.526 0 0 1-17.098 53.648z"
p-id="8026" fill="#1296db"></path>
</svg>
</span><span>当地向导</span></div>
<div><span>
<svg t="1696698710471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="9361" width="32" height="32">
<path
d="M373.333333 320c-17.066667 0-32 14.933333-32 32v362.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-362.666667c0-17.066667-14.933333-32-32-32zM672 320c-17.066667 0-32 14.933333-32 32v362.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-362.666667c0-17.066667-14.933333-32-32-32z"
fill="#5B97FA" p-id="9362"></path>
<path
d="M789.333333 106.666667h-106.666666V64c0-36.266667-27.733333-64-64-64H405.333333c-36.266667 0-64 27.733333-64 64v42.666667h-106.666666c-70.4 0-128 57.6-128 128v597.333333c0 70.4 57.6 128 128 128h106.666666v32c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V960h234.666667v32c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V960h85.333333c70.4 0 128-57.6 128-128V234.666667c0-70.4-57.6-128-128-128zM405.333333 64h213.333334v42.666667H405.333333V64z m448 768c0 36.266667-27.733333 64-64 64H234.666667c-36.266667 0-64-27.733333-64-64V234.666667c0-36.266667 27.733333-64 64-64h554.666666c36.266667 0 64 27.733333 64 64v597.333333z"
fill="#5B97FA" p-id="9363"></path>
</svg>
</span><span>自由行</span></div>
<div><span>
<svg t="1696698768768" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="11432" width="32" height="32">
<path
d="M512 967.111111C260.636444 967.111111 56.888889 763.363556 56.888889 512S260.636444 56.888889 512 56.888889s455.111111 203.747556 455.111111 455.111111-203.747556 455.111111-455.111111 455.111111z"
fill="#5097D2" p-id="11433"></path>
<path
d="M680.448 315.392l62.264889-27.591111-37.233778-48.810667-53.930667 45.795556 0.711112 24.462222 28.16 6.144z m0 0"
fill="#FFFFFF" p-id="11434"></path>
<path
d="M629.162667 326.456889V233.415111c0-74.837333-89.457778-75.235556-123.392-75.235555-33.905778 0-123.363556 0.398222-123.363556 75.235555v93.013333c-52.337778 5.176889-112.64 22.983111-112.64 108.999112v280.746666c0 72.248889 62.008889 97.564444 114.403556 102.229334 0.995556 16.014222 8.817778 34.275556 31.943111 34.275555 23.950222 0 30.663111-23.694222 31.914666-35.584h119.523556c1.251556 11.889778 7.509333 35.555556 31.431111 35.555556 23.153778 0 29.411556-18.773333 30.435556-34.787556 52.366222-4.664889 112.412444-29.411556 112.412444-101.688889v-280.746666c0-86.016-59.505778-103.822222-112.668444-108.970667z m-122.083556-119.125333h1.422222c58.311111 0 66.048 25.998222 66.048 32.512l-0.227555 78.506666-66.56-0.085333-66.503111 0.113778-0.227556-78.506667c0-6.542222 7.68-32.540444 66.048-32.540444z m120.462222 314.396444l-60.728889 42.808889s-4.494222 74.154667-9.016888 97.649778c-5.12 26.624-16.327111-2.901333-16.327112-2.901334l-20.48-66.673777-94.862222 58.026666s-12.145778 8.931556-24.860444-6.769778c-12.771556-15.701333-30.72-47.872-30.72-47.872s-11.377778-23.324444 21.219555-5.404444c18.062222 9.898667 20.337778 12.174222 32.056889 9.472 8.760889-2.019556 70.940444-54.670222 70.940445-54.670222l-48.156445-52.110222s-16.668444-20.195556 8.903111-15.075556c15.843556 3.128889 83.740444 36.750222 83.740445 36.750222s49.208889-33.052444 63.715555-41.614222c18.289778-10.837333 47.416889-9.500444 55.552 4.721778 7.025778 12.288-5.916444 28.074667-31.004444 43.662222z m0 0"
fill="#FFFFFF" p-id="11435"></path>
</svg>
</span><span>境外玩乐</span></div>
<div><span>
<svg t="1696698808157" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="12624" width="32" height="32">
<path
d="M859.2896 149.76H187.4432a140.288 140.288 0 0 0-140.0832 140.16v458.24a140.2368 140.2368 0 0 0 140.0832 140.0576h671.8464a140.2112 140.2112 0 0 0 140.0832-140.0832V289.92a140.288 140.288 0 0 0-140.0832-140.16zM187.4432 195.84h671.8464a94.208 94.208 0 0 1 94.0032 94.08v458.24a94.1312 94.1312 0 0 1-94.0032 93.9776H187.4432a94.1568 94.1568 0 0 1-94.0032-94.0032V289.92A94.208 94.208 0 0 1 187.4432 195.84z"
fill="#666666" p-id="12625"></path>
<path d="M433.9712 172.8v692.3776h-46.08V172.8z" fill="#666666" p-id="12626"></path>
<path
d="M164.9152 387.2256a117.7088 117.7088 0 0 1 157.9776-52.48c53.888 27.0336 101.8112 101.4784 93.184 156.544l-3.1488 17.5104-0.4352 2.176c-2.5088 11.6992-5.9904 24.2944-10.7008 37.7344a351.0272 351.0272 0 0 1-63.5136 110.5152 375.168 375.168 0 0 1-49.6128 48.6912 23.04 23.04 0 0 1-29.1328-35.712 329.1136 329.1136 0 0 0 43.52-42.7008 308.4288 308.4288 0 0 0 44.3648-69.2736l0.9728-2.176-0.9984 0.3072c-38.912 10.4448-87.1936 6.2976-124.4928-10.5728l-5.504-2.6112a117.6832 117.6832 0 0 1-52.48-157.952z m137.344-11.264a71.6288 71.6288 0 1 0-64.2304 128c40.2176 20.1728 104.6528 17.8688 125.3632-4.6848l2.2016-2.688a23.2704 23.2704 0 0 1 1.8176-2.2528l1.6384-1.5616 1.1264-6.5792c7.3216-32.256-29.6704-91.0592-67.9168-110.2336z"
fill="#FF6D00" p-id="12627"></path>
<path
d="M481.1008 335.616a117.7088 117.7088 0 0 1 105.4976 210.432c-37.9648 19.0464-89.1392 24.1408-130.048 13.1584l-0.9472-0.2816 0.9472 2.176c9.6256 20.736 22.016 41.216 37.504 60.8768l6.8352 8.3712c12.8 15.1552 27.264 29.44 43.52 42.752a23.04 23.04 0 0 1-29.1072 35.6864 375.0656 375.0656 0 0 1-49.6384-48.7168 351.0784 351.0784 0 0 1-63.488-110.5152 308.3008 308.3008 0 0 1-10.6752-37.7344l-2.304-12.2368a36.3264 36.3264 0 0 1-0.4096-2.56c-12.5184-55.2448 36.736-133.5296 92.3136-161.3824z m116.7616 73.1392A71.6032 71.6032 0 0 0 501.76 376.832c-36.8896 18.5088-72.6016 73.8304-68.5568 106.6496l1.7152 10.1376 1.664 1.5872 1.8432 2.2528c17.8944 25.0112 85.8112 28.3392 127.5392 7.3984a71.6032 71.6032 0 0 0 31.9232-96.1024z"
fill="#FF6D00" p-id="12628"></path>
</svg>
</span><span>礼品卡</span></div>
<div><span>
<svg t="1696698839730" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="13850" width="32" height="32">
<path
d="M829.44 179.8656H194.56c-62.208 0-112.64 50.432-112.64 112.64V401.408h860.16V292.5056c0-62.208-50.432-112.64-112.64-112.64z"
fill="#FACC31" p-id="13851"></path>
<path
d="M829.44 154.2656H194.56c-76.2368 0-138.24 62.0032-138.24 138.24v433.5104c0 76.2368 62.0032 138.24 138.24 138.24h634.88c76.2368 0 138.24-62.0032 138.24-138.24V292.5056c0-76.2368-62.0032-138.24-138.24-138.24z m-721.92 138.24c0-47.9744 39.0656-87.04 87.04-87.04h634.88c47.9744 0 87.04 39.0656 87.04 87.04V375.808H107.52V292.5056z m721.92 520.6016H194.56c-47.9744 0-87.04-39.0656-87.04-87.04V427.008h808.96v299.008c0 48.0256-39.0656 87.0912-87.04 87.0912z"
fill="#191919" p-id="13852"></path>
<path
d="M355.4816 498.3808H220.16c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h135.3216c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6z"
fill="#191919" p-id="13853"></path>
</svg>
</span><span>信用卡</span></div>
<div><span>
<svg t="1696698862871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="14944" width="32" height="32">
<path
d="M390.700241 16.710183h-267.362925A102.266319 102.266319 0 0 0 23.744627 120.981723V401.044386a102.266319 102.266319 0 0 0 100.261097 101.597912h267.362924A102.266319 102.266319 0 0 0 491.629745 401.044386V120.981723A102.266319 102.266319 0 0 0 390.700241 16.710183zM424.789013 401.044386a34.088773 34.088773 0 0 1-33.420365 34.757181h-267.362924A34.088773 34.088773 0 0 1 90.585358 401.044386V120.981723a34.088773 34.088773 0 0 1 33.420366-34.75718h267.362924a34.088773 34.088773 0 0 1 33.420365 34.75718zM686.136272 472.563969a97.587467 97.587467 0 0 0 141.70235 0l141.70235-147.049609a107.613577 107.613577 0 0 0 0-147.049608L825.8334 30.746736a97.587467 97.587467 0 0 0-141.70235 0L545.102329 177.796345a107.613577 107.613577 0 0 0 0 147.049608zM591.890841 226.590078l141.70235-147.049608a32.751958 32.751958 0 0 1 47.456919 0l141.70235 147.049608a36.093995 36.093995 0 0 1 0 48.793734l-141.70235 147.049608a32.751958 32.751958 0 0 1-47.456919 0L591.890841 276.052219a36.093995 36.093995 0 0 1 0-49.462141zM390.700241 534.725849h-267.362925A102.266319 102.266319 0 0 0 23.744627 641.671018v278.057442a102.266319 102.266319 0 0 0 100.261097 104.27154h267.362924A102.266319 102.266319 0 0 0 491.629745 919.72846V641.671018A102.266319 102.266319 0 0 0 390.700241 534.725849zM424.789013 919.72846a34.088773 34.088773 0 0 1-33.420365 34.75718h-267.362924a34.088773 34.088773 0 0 1-33.420366-34.75718V641.671018a34.088773 34.088773 0 0 1 33.420366-34.75718h267.362924a34.088773 34.088773 0 0 1 33.420365 34.75718zM898.689797 534.725849h-267.362925A102.266319 102.266319 0 0 0 531.734183 641.671018v278.057442a102.266319 102.266319 0 0 0 100.261097 104.27154h267.362924a102.266319 102.266319 0 0 0 100.261097-104.27154V641.671018A102.266319 102.266319 0 0 0 898.689797 534.725849z m33.420365 381.660574a34.088773 34.088773 0 0 1-33.420365 34.75718h-267.362925a34.088773 34.088773 0 0 1-33.420365-34.75718V641.671018a34.088773 34.088773 0 0 1 33.420365-34.75718h267.362925a34.088773 34.088773 0 0 1 33.420365 34.75718z"
p-id="14945"></path>
</svg>
</span><span>更多</span></div>
</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.container {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
color: #000;
background-color: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
/* border: 1px solid red; */
.search-index {
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: pink;
display: flex;
.search {
flex: 1;
border: 1px solid #ccc;
height: 26px;
margin: 6px 10px;
border-radius: 10px;
background-color: #f2f2f2;
display: flex;
align-items: center;
padding-left: 10px;
color: #666;
svg {
line-height: 26px;
padding-right: 5px;
opacity: 0.8;
}
}
.user {
width: 44px;
height: 44px;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
align-items: center;
}
}
.focus {
img {
width: 100%;
}
}
.trip-nav {
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
li {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
svg {
border-radius: 50%;
background-color: #f2f2f2;
margin-bottom: 2px;
}
}
/* 鼠标移动到上面时放大动作 */
li:hover {
transition: all 0.3s ease;
transform: scale(1.1);
}
}
.hpt {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
/*将圆角下面的溢出部分隐藏*/
margin: 0 4px 3px;
div:nth-child(n+2) {
border-top: 1px solid #fff;
}
div {
height: 86px;
/* background-color: pink; */
display: flex;
justify-content: space-around;
div {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #fff;
span {
flex: 1;
text-align: center;
line-height: 44px;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
}
}
/*渐变色*/
.hotel {
background: -webkit-linear-gradient(left, rgb(248, 93, 46), rgb(5, 181, 5));
}
.plane-ticket {
background: -webkit-linear-gradient(left, rgb(79, 79, 255), rgb(155, 155, 255));
}
.travel {
background: -webkit-linear-gradient(left, rgb(248, 93, 46), rgb(5, 181, 5));
}
}
.other {
/* height: 400px; */
display: flex;
flex-wrap: wrap;
margin: 5px 5px;
align-content:space-between;
div {
display: flex;
flex-direction: column;
/* align-content:flex-start; */
height: 60px;
width: 60px;
/* margin:5px 5px; */
padding: 10px 5px;
span{
text-align: center;
}
}
}
}
</style>
最终效果图：
