Accueil Explorer Aide
S'inscrire Connexion
chengziding
/
web
Suivre 1
Voter 0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

提交

Fly il y a 3 semaines
Parent
cb60ffd913
commit
b23df98e11
15 fichiers modifiés avec 802 ajouts et 349 suppressions
Vue séparée Afficher les stats Diff
  1. 167 138
      assets/css/root.scss
  2. BIN
      assets/images/about/img_02.png
  3. BIN
      assets/images/about/img_03.png
  4. BIN
      assets/images/about/level_00.png
  5. BIN
      assets/images/about/level_01.png
  6. BIN
      assets/images/about/level_02.png
  7. BIN
      assets/images/about/level_03.png
  8. BIN
      assets/images/about/level_04.png
  9. BIN
      assets/images/about/level_11.png
  10. BIN
      assets/images/about/level_22.png
  11. BIN
      assets/images/about/level_33.png
  12. BIN
      assets/images/about/level_44.png
  13. 0 9
      components.d.ts
  14. 282 0
      pages/about/link copy.vue
  15. 353 202
      pages/about/link.vue

+ 167 - 138
assets/css/root.scss
Voir le fichier 

@@ -31,52 +31,53 @@
 
     --weight-800: 800;
 
     --weight-900: 400;
 
 
+    // 200 / 750 * value
 
     @include responseTo("phone") {
 
         --size--133: -35.4667vw;
 
         --size--100: -26.6667vw;
 
         --size--75: -19.9999vw;
 
         --size--50: -13.3333vw;
 
-        --size--48: -12.8000vw;
 
-        --size--36: -9.6000vw;
 
+        --size--48: -12.8vw;
 
+        --size--36: -9.6vw;
 
         --size--32: -8.5333vw;
 
         --size--25: -6.6667vw;
 
         --size--17: -4.5333vw;
 
         --size--10: -2.6667vw;
 
         --size--7: -1.8667vw;
 
-        --size--6: -1.6000vw;
 
+        --size--6: -1.6vw;
 
         --size--5: -1.3333vw;
 
         --size--4: -1.0667vw;
 
         --size--2: -0.5333vw;
 
         --size-1: 0.2667vw;
 
         --size-2: 0.5333vw;
 
-        --size-3: 0.8000vw;
 
+        --size-3: 0.8vw;
 
         --size-4: 1.0667vw;
 
         --size-5: 1.3333vw;
 
-        --size-6: 1.6000vw;
 
+        --size-6: 1.6vw;
 
         --size-7: 1.8667vw;
 
         --size-8: 2.1333vw;
 
-        --size-9: 2.4000vw;
 
+        --size-9: 2.4vw;
 
         --size-10: 2.6667vw;
 
         --size-11: 2.9333vw;
 
-        --size-12: 3.2000vw;
 
+        --size-12: 3.2vw;
 
         --size-13: 3.4667vw;
 
         --size-14: 3.7333vw;
 
-        --size-15: 4.0000vw;
 
+        --size-15: 4vw;
 
         --size-16: 4.2667vw;
 
         --size-17: 4.5333vw;
 
-        --size-18: 4.8000vw;
 
+        --size-18: 4.8vw;
 
         --size-19: 5.0667vw;
 
         --size-20: 5.3333vw;
 
-        --size-21: 5.6000vw;
 
+        --size-21: 5.6vw;
 
         --size-22: 5.8667vw;
 
         --size-23: 6.1333vw;
 
-        --size-24: 6.4000vw;
 
+        --size-24: 6.4vw;
 
         --size-25: 6.6667vw;
 
         --size-26: 6.9333vw;
 
-        --size-27: 7.2000vw;
 
+        --size-27: 7.2vw;
 
         --size-28: 7.4667vw;
 
         --size-29: 7.7333vw;
 
-        --size-30: 8.0000vw;
 
+        --size-30: 8vw;
 
         --size-31: 8.2667vw;
 
         --size-32: 8.5333vw;
 
         --size-33: 8.7999vw;
 
@@ -91,72 +92,72 @@
 
         --size-42: 11.1999vw;
 
         --size-43: 11.4667vw;
 
         --size-44: 11.7333vw;
 
-        --size-45: 12.0000vw;
 
+        --size-45: 12vw;
 
         --size-46: 12.2667vw;
 
         --size-47: 12.5333vw;
 
-        --size-48: 12.8000vw;
 
+        --size-48: 12.8vw;
 
         --size-49: 13.0667vw;
 
         --size-50: 13.3333vw;
 
         --size-51: 13.5999vw;
 
         --size-52: 13.8667vw;
 
         --size-53: 14.1333vw;
 
-        --size-54: 14.4000vw;
 
+        --size-54: 14.4vw;
 
         --size-55: 14.6667vw;
 
         --size-56: 14.9333vw;
 
-        --size-57: 15.2000vw;
 
+        --size-57: 15.2vw;
 
         --size-58: 15.4667vw;
 
         --size-59: 15.7333vw;
 
-        --size-60: 16.0000vw;
 
+        --size-60: 16vw;
 
         --size-61: 16.2667vw;
 
         --size-62: 16.5333vw;
 
-        --size-63: 16.8000vw;
 
+        --size-63: 16.8vw;
 
         --size-64: 17.0667vw;
 
         --size-65: 17.3333vw;
 
         --size-66: 17.5999vw;
 
         --size-67: 17.8667vw;
 
         --size-68: 18.1333vw;
 
-        --size-69: 18.4000vw;
 
+        --size-69: 18.4vw;
 
         --size-70: 18.6667vw;
 
         --size-71: 18.9333vw;
 
-        --size-72: 19.2000vw;
 
+        --size-72: 19.2vw;
 
         --size-73: 19.4667vw;
 
         --size-74: 19.7333vw;
 
-        --size-75: 20.0000vw;
 
+        --size-75: 20vw;
 
         --size-76: 20.2667vw;
 
         --size-77: 20.5333vw;
 
-        --size-78: 20.8000vw;
 
+        --size-78: 20.8vw;
 
         --size-79: 21.0667vw;
 
         --size-80: 21.3333vw;
 
         --size-81: 21.5999vw;
 
         --size-82: 21.8667vw;
 
         --size-83: 22.1333vw;
 
-        --size-84: 22.4000vw;
 
+        --size-84: 22.4vw;
 
         --size-85: 22.6667vw;
 
         --size-86: 22.9333vw;
 
         --size-87: 23.1999vw;
 
         --size-88: 23.4667vw;
 
         --size-89: 23.7333vw;
 
-        --size-90: 24.0000vw;
 
+        --size-90: 24vw;
 
         --size-91: 24.2667vw;
 
         --size-92: 24.5333vw;
 
-        --size-93: 24.8000vw;
 
+        --size-93: 24.8vw;
 
         --size-94: 25.0667vw;
 
         --size-95: 25.3333vw;
 
-        --size-96: 25.6000vw;
 
+        --size-96: 25.6vw;
 
         --size-97: 25.8667vw;
 
         --size-98: 26.1333vw;
 
-        --size-99: 26.4000vw;
 
+        --size-99: 26.4vw;
 
         --size-100: 26.6667vw;
 
         --size-104: 27.7333vw;
 
-        --size-105: 28.0000vw;
 
+        --size-105: 28vw;
 
         --size-106: 28.2667vw;
 
         --size-107: 28.5333vw;
 
-        --size-108: 28.8000vw;
 
+        --size-108: 28.8vw;
 
         --size-112: 29.8667vw;
 
         --size-115: 30.6667vw;
 
-        --size-117: 31.2000vw;
 
+        --size-117: 31.2vw;
 
         --size-119: 31.7333vw;
 
-        --size-120: 32.0000vw;
 
+        --size-120: 32vw;
 
         --size-122: 32.5333vw;
 
         --size-124: 33.0667vw;
 
         --size-128: 34.1333vw;
 
@@ -164,130 +165,132 @@
 
         --size-132: 35.1999vw;
 
         --size-133: 35.4667vw;
 
         --size-134: 35.7333vw;
 
-        --size-135: 36.0000vw;
 
+        --size-135: 36vw;
 
         --size-140: 37.3333vw;
 
-        --size-141: 37.6000vw;
 
+        --size-141: 37.6vw;
 
         --size-142: 37.8667vw;
 
         --size-145: 38.6667vw;
 
         --size-148: 39.4667vw;
 
-        --size-150: 40.0000vw;
 
-        --size-153: 40.8000vw;
 
+        --size-150: 40vw;
 
+        --size-153: 40.8vw;
 
         --size-154: 41.0667vw;
 
         --size-155: 41.3333vw;
 
         --size-160: 42.6667vw;
 
         --size-161: 42.9333vw;
 
-        --size-165: 44.0000vw;
 
+        --size-165: 44vw;
 
         --size-166: 44.2667vw;
 
         --size-170: 45.3333vw;
 
         --size-172: 45.8667vw;
 
         --size-173: 46.1333vw;
 
-        --size-174: 46.4000vw;
 
-        --size-176: 47.0000vw;
 
+        --size-174: 46.4vw;
 
+        --size-176: 47vw;
 
         --size-178: 47.4667vw;
 
         --size-179: 47.7333vw;
 
-        --size-180: 48.0000vw;
 
+        --size-180: 48vw;
 
         --size-181: 48.2667vw;
 
-        --size-186: 49.6000vw;
 
+        --size-186: 49.6vw;
 
         --size-187: 49.8667vw;
 
         --size-188: 50.1333vw;
 
         --size-190: 50.6667vw;
 
-        --size-192: 51.2000vw;
 
+        --size-192: 51.2vw;
 
         --size-194: 51.7333vw;
 
         --size-199: 53.0667vw;
 
         --size-200: 53.3333vw;
 
-        --size-204: 54.4000vw;
 
+        --size-204: 54.4vw;
 
         --size-205: 54.6667vw;
 
         --size-208: 55.4667vw;
 
         --size-210: 55.7333vw;
 
         --size-216: 57.7333vw;
 
-        --size-217: 58.0000vw;
 
+        --size-217: 58vw;
 
         --size-218: 58.2667vw;
 
         --size-220: 58.6667vw;
 
         --size-221: 58.9333vw;
 
         --size-226: 60.2667vw;
 
         --size-227: 60.5333vw;
 
-        --size-228: 60.8000vw;
 
+        --size-228: 60.8vw;
 
         --size-230: 61.3333vw;
 
-        --size-232: 62.0000vw;
 
-        --size-234: 62.4000vw;
 
+        --size-232: 62vw;
 
+        --size-234: 62.4vw;
 
         --size-238: 63.4667vw;
 
-        --size-240: 64.0000vw;
 
+        --size-240: 64vw;
 
         --size-245: 65.3333vw;
 
         --size-248: 66.1333vw;
 
         --size-253: 67.4667vw;
 
-        --size-255: 68.0000vw;
 
+        --size-255: 68vw;
 
         --size-256: 68.2667vw;
 
         --size-257: 68.5333vw;
 
-        --size-259: 68.8000vw;
 
+        --size-259: 68.8vw;
 
         --size-260: 69.0667vw;
 
-        --size-262: 69.6000vw;
 
+        --size-262: 69.6vw;
 
         --size-264: 70.3999vw;
 
         --size-265: 70.6667vw;
 
         --size-266: 70.9333vw;
 
         --size-277: 73.8667vw;
 
         --size-278: 74.1333vw;
 
-        --size-279: 74.4000vw;
 
+        --size-279: 74.4vw;
 
         --size-280: 74.6667vw;
 
         --size-283: 75.4667vw;
 
         --size-287: 76.5333vw;
 
-        --size-288: 76.8000vw;
 
+        --size-288: 76.8vw;
 
+        --size-290: 77.3333vw;
 
+        --size-291: 77.6vw;
 
         --size-293: 78.1333vw;
 
-        --size-294: 78.4000vw;
 
-        --size-297: 79.2000vw;
 
-        --size-300: 80.0000vw;
 
+        --size-294: 78.4vw;
 
+        --size-297: 79.2vw;
 
+        --size-300: 80vw;
 
         --size-304: 81.0667vw;
 
         --size-313: 83.4667vw;
 
-        --size-315: 84.0000vw;
 
+        --size-315: 84vw;
 
         --size-317: 84.5333vw;
 
         --size-322: 85.8667vw;
 
         --size-323: 86.1333vw;
 
-        --size-327: 87.2000vw;
 
+        --size-327: 87.2vw;
 
         --size-329: 87.7333vw;
 
-        --size-330: 88.0000vw;
 
-        --size-336: 89.6000vw;
 
+        --size-330: 88vw;
 
+        --size-336: 89.6vw;
 
         --size-337: 89.8667vw;
 
         --size-340: 90.6667vw;
 
-        --size-342: 91.2000vw;
 
+        --size-342: 91.2vw;
 
         --size-343: 91.4667vw;
 
         --size-352: 94.1333vw;
 
-        --size-354: 94.4000vw;
 
+        --size-354: 94.4vw;
 
         --size-356: 95.1999vw;
 
         --size-357: 95.4667vw;
 
-        --size-360: 96.0000vw;
 
+        --size-360: 96vw;
 
         --size-362: 96.5333vw;
 
         --size-367: 97.8667vw;
 
         --size-372: 99.4667vw;
 
         --size-373: 99.7333vw;
 
-        --size-378: 100.8000vw;
 
+        --size-378: 100.8vw;
 
         --size-388: 103.4667vw;
 
         --size-390: 103.9999vw;
 
         --size-396: 105.5999vw;
 
-        --size-402: 107.2000vw;
 
+        --size-402: 107.2vw;
 
         --size-404: 107.7333vw;
 
         --size-406: 108.2667vw;
 
         --size-416: 111.0667vw;
 
-        --size-429: 114.4000vw;
 
+        --size-429: 114.4vw;
 
         --size-430: 114.6667vw;
 
-        --size-432: 115.2000vw;
 
+        --size-432: 115.2vw;
 
         --size-442: 117.8667vw;
 
-        --size-450: 120.0000vw;
 
-        --size-453: 120.8000vw;
 
+        --size-450: 120vw;
 
+        --size-453: 120.8vw;
 
         --size-460: 122.6667vw;
 
         --size-462: 123.1999vw;
 
         --size-466: 124.2667vw;
 
-        --size-468: 125.0000vw;
 
+        --size-468: 125vw;
 
         --size-471: 125.5999vw;
 
-        --size-474: 126.4000vw;
 
-        --size-479: 127.6800vw;
 
+        --size-474: 126.4vw;
 
+        --size-479: 127.68vw;
 
         --size-485: 129.3333vw;
 
         --size-487: 129.8667vw;
 
         --size-494: 131.7333vw;
 
         --size-497: 132.5333vw;
 
         --size-500: 133.3333vw;
 
-        --size-513: 136.8000vw;
 
+        --size-513: 136.8vw;
 
         --size-514: 137.0667vw;
 
         --size-526: 140.2667vw;
 
-        --size-531: 141.6000vw;
 
+        --size-531: 141.6vw;
 
         --size-539: 143.7333vw;
 
         --size-542: 144.5333vw;
 
         --size-544: 145.0667vw;
 
@@ -295,71 +298,71 @@
 
         --size-553: 147.4667vw;
 
         --size-560: 149.3333vw;
 
         --size-565: 150.6667vw;
 
-        --size-579: 154.4000vw;
 
+        --size-579: 154.4vw;
 
         --size-583: 155.4667vw;
 
         --size-590: 157.3333vw;
 
         --size-591: 157.5999vw;
 
         --size-605: 161.3333vw;
 
-        --size-627: 167.2000vw;
 
-        --size-630: 168.0000vw;
 
+        --size-627: 167.2vw;
 
+        --size-630: 168vw;
 
         --size-634: 169.0667vw;
 
-        --size-636: 169.6000vw;
 
+        --size-636: 169.6vw;
 
         --size-640: 170.6667vw;
 
         --size-647: 172.5333vw;
 
-        --size-648: 172.8000vw;
 
+        --size-648: 172.8vw;
 
         --size-650: 173.3333vw;
 
         --size-670: 178.6667vw;
 
         --size-673: 179.1999vw;
 
         --size-688: 183.4667vw;
 
         --size-690: 183.9999vw;
 
         --size-692: 184.5333vw;
 
-        --size-693: 184.8000vw;
 
+        --size-693: 184.8vw;
 
         --size-695: 185.3333vw;
 
         --size-700: 186.6667vw;
 
         --size-710: 189.3333vw;
 
         --size-715: 190.6667vw;
 
-        --size-718: 191.2000vw;
 
-        --size-720: 192.0000vw;
 
+        --size-718: 191.2vw;
 
+        --size-720: 192vw;
 
         --size-721: 192.2667vw;
 
-        --size-726: 193.6000vw;
 
-        --size-735: 196.0000vw;
 
+        --size-726: 193.6vw;
 
+        --size-735: 196vw;
 
         --size-740: 197.3333vw;
 
         --size-750: 199.9999vw;
 
         --size-757: 201.8667vw;
 
         --size-770: 205.3333vw;
 
-        --size-774: 206.4000vw;
 
+        --size-774: 206.4vw;
 
         --size-775: 206.6667vw;
 
-        --size-780: 208.0000vw;
 
+        --size-780: 208vw;
 
         --size-788: 210.1333vw;
 
-        --size-791: 210.8000vw;
 
+        --size-791: 210.8vw;
 
         --size-795: 211.9999vw;
 
         --size-800: 213.3333vw;
 
         --size-810: 215.3333vw;
 
         --size-822: 219.0667vw;
 
         --size-836: 222.3999vw;
 
         --size-845: 225.3333vw;
 
-        --size-900: 240.0000vw;
 
+        --size-900: 240vw;
 
         --size-972: 258.9333vw;
 
         --size-973: 259.1999vw;
 
         --size-992: 264.5333vw;
 
         --size-1000: 266.6667vw;
 
         --size-1022: 272.5333vw;
 
-        --size-1044: 278.4000vw;
 
+        --size-1044: 278.4vw;
 
         --size-1065: 283.9999vw;
 
         --size-1116: 297.0667vw;
 
         --size-1158: 308.2667vw;
 
         --size-1189: 317.0667vw;
 
         --size-1330: 354.6667vw;
 
-        --size-1366: 364.0000vw;
 
+        --size-1366: 364vw;
 
         --size-1400: 373.3333vw;
 
-        --size-1440: 384.0000vw;
 
+        --size-1440: 384vw;
 
         --size-1438: 383.4667vw;
 
-        --size-1494: 400.0000vw;
 
+        --size-1494: 400vw;
 
         --size-1540: 411.1111vw;
 
         --size-1552: 414.1333vw;
 
         --size-1596: 425.5556vw;
 
-        --size-1620: 432.0000vw;
 
-        --size-1860: 496.0000vw;
 
+        --size-1620: 432vw;
 
+        --size-1860: 496vw;
 
     }
 
 
     @include responseTo("pc") {
 
@@ -478,11 +481,13 @@
 
         --size-98: 98px;
 
         --size-99: 99px;
 
         --size-100: 100px;
 
+        --size-102: 102px;
 
         --size-104: 104px;
 
         --size-105: 105px;
 
         --size-106: 106px;
 
         --size-107: 107px;
 
         --size-108: 108px;
 
+        --size-110: 110px;
 
         --size-112: 112px;
 
         --size-115: 115px;
 
         --size-117: 117px;
 
@@ -500,6 +505,7 @@
 
         --size-141: 141px;
 
         --size-142: 142px;
 
         --size-145: 145px;
 
+        --size-146: 146px;
 
         --size-147: 147px;
 
         --size-148: 148px;
 
         --size-150: 150px;
 
@@ -567,6 +573,7 @@
 
         --size-287: 287px;
 
         --size-288: 288px;
 
         --size-290: 290px;
 
+        --size-291: 291px;
 
         --size-293: 293px;
 
         --size-294: 294px;
 
         --size-297: 297px;
 
@@ -609,12 +616,14 @@
 
         --size-430: 430px;
 
         --size-432: 432px;
 
         --size-442: 442px;
 
+        --size-443: 443px;
 
         --size-450: 450px;
 
         --size-453: 453px;
 
         --size-460: 460px;
 
         --size-462: 462px;
 
         --size-466: 466px;
 
         --size-468: 468px;
 
+        --size-469: 469px;
 
         --size-471: 471px;
 
         --size-474: 474px;
 
         --size-479: 479px;
 
@@ -628,6 +637,7 @@
 
         --size-513: 513px;
 
         --size-514: 514px;
 
         --size-520: 520px;
 
+        --size-524: 524px;
 
         --size-526: 526px;
 
         --size-531: 531px;
 
         --size-539: 539px;
 
@@ -653,11 +663,14 @@
 
         --size-650: 650px;
 
         --size-670: 670px;
 
         --size-673: 673px;
 
+        --size-675: 675px;
 
+        --size-686: 686px;
 
         --size-688: 688px;
 
         --size-690: 690px;
 
         --size-692: 692px;
 
         --size-693: 693px;
 
         --size-695: 695px;
 
+        --size-697: 697px;
 
         --size-700: 700px;
 
         --size-710: 710px;
 
         --size-715: 715px;
 
@@ -682,6 +695,9 @@
 
         --size-836: 836px;
 
         --size-845: 845px;
 
         --size-900: 900px;
 
+        --size-949: 949px;
 
+        --size-960: 960px;
 
+        --size-971: 971px;
 
         --size-972: 972px;
 
         --size-973: 973px;
 
         --size-992: 992px;
 
@@ -708,14 +724,14 @@
 
         --size-1620: 1620px;
 
         --size-1860: 1860px;
 
     }
 
-
 
+    // 100 / 1920 * value
 
     @include responseTo("pc1") {
 
         --size--133: -6.9375vw;
 
         --size--100: -5.2083vw;
 
         --size--75: -3.9063vw;
 
         --size--50: -2.6042vw;
 
-        --size--48: -2.5000vw;
 
-        --size--36: -1.8750vw;
 
+        --size--48: -2.5vw;
 
+        --size--36: -1.875vw;
 
         --size--32: -1.6667vw;
 
         --size--25: -1.3021vw;
 
         --size--17: -0.8854vw;
 
@@ -736,7 +752,7 @@
 
         --size-9: 0.4688vw;
 
         --size-10: 0.5208vw;
 
         --size-11: 0.5729vw;
 
-        --size-12: 0.6250vw;
 
+        --size-12: 0.625vw;
 
         --size-13: 0.6771vw;
 
         --size-14: 0.7292vw;
 
         --size-15: 0.7813vw;
 
@@ -748,7 +764,7 @@
 
         --size-21: 1.0938vw;
 
         --size-22: 1.1458vw;
 
         --size-23: 1.1979vw;
 
-        --size-24: 1.2500vw;
 
+        --size-24: 1.25vw;
 
         --size-25: 1.3021vw;
 
         --size-26: 1.3542vw;
 
         --size-27: 1.4063vw;
 
@@ -760,7 +776,7 @@
 
         --size-33: 1.7188vw;
 
         --size-34: 1.7708vw;
 
         --size-35: 1.8229vw;
 
-        --size-36: 1.8750vw;
 
+        --size-36: 1.875vw;
 
         --size-37: 1.9271vw;
 
         --size-38: 1.9792vw;
 
         --size-39: 2.0313vw;
 
@@ -772,7 +788,7 @@
 
         --size-45: 2.3438vw;
 
         --size-46: 2.3958vw;
 
         --size-47: 2.4479vw;
 
-        --size-48: 2.5000vw;
 
+        --size-48: 2.5vw;
 
         --size-49: 2.5521vw;
 
         --size-50: 2.6041vw;
 
         --size-51: 2.6563vw;
 
@@ -784,7 +800,7 @@
 
         --size-57: 2.9688vw;
 
         --size-58: 3.0208vw;
 
         --size-59: 3.0729vw;
 
-        --size-60: 3.1250vw;
 
+        --size-60: 3.125vw;
 
         --size-61: 3.1771vw;
 
         --size-62: 3.2292vw;
 
         --size-63: 3.2813vw;
 
@@ -796,7 +812,7 @@
 
         --size-69: 3.5938vw;
 
         --size-70: 3.6458vw;
 
         --size-71: 3.6979vw;
 
-        --size-72: 3.7500vw;
 
+        --size-72: 3.75vw;
 
         --size-73: 3.8021vw;
 
         --size-74: 3.8542vw;
 
         --size-75: 3.9063vw;
 
@@ -808,7 +824,7 @@
 
         --size-81: 4.2188vw;
 
         --size-82: 4.2708vw;
 
         --size-83: 4.3229vw;
 
-        --size-84: 4.3750vw;
 
+        --size-84: 4.375vw;
 
         --size-85: 4.4271vw;
 
         --size-86: 4.4792vw;
 
         --size-87: 4.5313vw;
 
@@ -820,26 +836,28 @@
 
         --size-93: 4.8438vw;
 
         --size-94: 4.8958vw;
 
         --size-95: 4.9479vw;
 
-        --size-96: 5.0000vw;
 
+        --size-96: 5vw;
 
         --size-97: 5.0521vw;
 
         --size-98: 5.1042vw;
 
         --size-99: 5.1563vw;
 
         --size-100: 5.2083vw;
 
+        --size-102: 5.3125vw;
 
         --size-104: 5.4167vw;
 
         --size-105: 5.4688vw;
 
         --size-106: 5.5208vw;
 
         --size-107: 5.5729vw;
 
         --size-108: 5.625vw;
 
+        --size-110: 5.7291vw;
 
         --size-112: 5.8333vw;
 
-        --size-115: 6.0000vw;
 
+        --size-115: 6vw;
 
         --size-117: 6.0938vw;
 
         --size-119: 6.2083vw;
 
-        --size-120: 6.2500vw;
 
+        --size-120: 6.25vw;
 
         --size-122: 6.3542vw;
 
         --size-124: 6.4583vw;
 
         --size-128: 6.6667vw;
 
         --size-130: 6.7708vw;
 
-        --size-132: 6.8750vw;
 
+        --size-132: 6.875vw;
 
         --size-133: 6.9375vw;
 
         --size-134: 6.9896vw;
 
         --size-135: 7.0417vw;
 
@@ -847,6 +865,7 @@
 
         --size-141: 7.3438vw;
 
         --size-142: 7.3958vw;
 
         --size-145: 7.5521vw;
 
+        --size-146: 7.6041vw;
 
         --size-147: 7.6562vw;
 
         --size-148: 7.7083vw;
 
         --size-150: 7.8125vw;
 
@@ -865,44 +884,44 @@
 
         --size-176: 9.1667vw;
 
         --size-178: 9.2708vw;
 
         --size-179: 9.3229vw;
 
-        --size-180: 9.3750vw;
 
+        --size-180: 9.375vw;
 
         --size-181: 9.4271vw;
 
         --size-186: 9.6875vw;
 
         --size-187: 9.7396vw;
 
         --size-188: 9.7917vw;
 
         --size-190: 9.9063vw;
 
-        --size-192: 10.0000vw;
 
+        --size-192: 10vw;
 
         --size-194: 10.1042vw;
 
         --size-195: 10.1562vw;
 
         --size-199: 10.3646vw;
 
         --size-200: 10.4167vw;
 
-        --size-204: 10.6250vw;
 
+        --size-204: 10.625vw;
 
         --size-205: 10.6875vw;
 
         --size-208: 10.8333vw;
 
         --size-210: 10.9375vw;
 
-        --size-216: 11.2500vw;
 
+        --size-216: 11.25vw;
 
         --size-217: 11.2969vw;
 
         --size-218: 11.3542vw;
 
         --size-220: 11.4583vw;
 
         --size-221: 11.5104vw;
 
         --size-226: 11.7708vw;
 
         --size-227: 11.8229vw;
 
-        --size-228: 11.8750vw;
 
+        --size-228: 11.875vw;
 
         --size-230: 11.9792vw;
 
         --size-232: 12.0833vw;
 
         --size-234: 12.1875vw;
 
         --size-238: 12.4063vw;
 
-        --size-240: 12.5000vw;
 
+        --size-240: 12.5vw;
 
         --size-245: 12.7604vw;
 
         --size-248: 12.9167vw;
 
         --size-253: 13.177vw;
 
         --size-255: 13.2813vw;
 
         --size-256: 13.3333vw;
 
         --size-257: 13.3854vw;
 
-        --size-259: 13.5000vw;
 
+        --size-259: 13.5vw;
 
         --size-260: 13.5417vw;
 
         --size-262: 13.6458vw;
 
-        --size-264: 13.7500vw;
 
+        --size-264: 13.75vw;
 
         --size-265: 13.8021vw;
 
         --size-266: 13.8542vw;
 
         --size-274: 14.2708vw;
 
@@ -914,10 +933,11 @@
 
         --size-287: 14.9479vw;
 
         --size-288: 14.9792vw;
 
         --size-290: 15.1041vw;
 
+        --size-291: 15.1563vw;
 
         --size-293: 15.2604vw;
 
         --size-294: 15.3125vw;
 
         --size-297: 15.4792vw;
 
-        --size-300: 15.6250vw;
 
+        --size-300: 15.625vw;
 
         --size-304: 15.8333vw;
 
         --size-313: 16.3021vw;
 
         --size-315: 16.4063vw;
 
@@ -925,10 +945,10 @@
 
         --size-322: 16.7917vw;
 
         --size-323: 16.8229vw;
 
         --size-327: 17.0313vw;
 
-        --size-329: 17.1250vw;
 
+        --size-329: 17.125vw;
 
         --size-330: 17.1875vw;
 
         --size-334: 17.3958vw;
 
-        --size-336: 17.5000vw;
 
+        --size-336: 17.5vw;
 
         --size-337: 17.5417vw;
 
         --size-338: 17.6041vw;
 
         --size-340: 17.6563vw;
 
@@ -938,9 +958,9 @@
 
         --size-354: 18.4375vw;
 
         --size-356: 18.5417vw;
 
         --size-357: 18.5938vw;
 
-        --size-360: 18.7500vw;
 
+        --size-360: 18.75vw;
 
         --size-362: 18.8542vw;
 
-        --size-367: 19.1250vw;
 
+        --size-367: 19.125vw;
 
         --size-372: 19.375vw;
 
         --size-373: 19.4375vw;
 
         --size-378: 19.6875vw;
 
@@ -956,13 +976,15 @@
 
         --size-430: 22.3958vw;
 
         --size-432: 22.4583vw;
 
         --size-442: 23.0208vw;
 
+        --size-443: 23.0729vw;
 
         --size-450: 23.4375vw;
 
         --size-453: 23.5938vw;
 
         --size-460: 23.9583vw;
 
         --size-462: 24.0625vw;
 
         --size-466: 24.2188vw;
 
-        --size-468: 24.3750vw;
 
-        --size-471: 24.5000vw;
 
+        --size-468: 24.375vw;
 
+        --size-469: 24.427vw;
 
+        --size-471: 24.5vw;
 
         --size-474: 24.6875vw;
 
         --size-479: 24.9063vw;
 
         --size-485: 25.2604vw;
 
@@ -975,15 +997,16 @@
 
         --size-513: 26.6667vw;
 
         --size-514: 26.7188vw;
 
         --size-520: 27.0833vw;
 
+        --size-524: 27.2917vw;
 
         --size-526: 27.3438vw;
 
         --size-531: 27.6042vw;
 
         --size-539: 27.9688vw;
 
-        --size-542: 28.1250vw;
 
+        --size-542: 28.125vw;
 
         --size-544: 28.2292vw;
 
         --size-547: 28.4375vw;
 
-        --size-553: 28.7500vw;
 
+        --size-553: 28.75vw;
 
         --size-560: 29.1667vw;
 
-        --size-565: 29.3750vw;
 
+        --size-565: 29.375vw;
 
         --size-573: 29.8437vw;
 
         --size-579: 30.1563vw;
 
         --size-583: 30.3646vw;
 
@@ -1000,26 +1023,29 @@
 
         --size-650: 33.8542vw;
 
         --size-670: 34.8958vw;
 
         --size-673: 34.9903vw;
 
+        --size-675: 35.15625vw;
 
         --size-688: 35.8333vw;
 
+        --size-686: 35.7291vw;
 
         --size-690: 35.9375vw;
 
-        --size-692: 36.0000vw;
 
+        --size-692: 36vw;
 
         --size-693: 36.0625vw;
 
         --size-695: 36.1458vw;
 
+        --size-697: 36.302vw;
 
         --size-700: 36.4583vw;
 
         --size-710: 36.9792vw;
 
         --size-715: 37.2917vw;
 
         --size-718: 37.3958vw;
 
-        --size-720: 37.5000vw;
 
+        --size-720: 37.5vw;
 
         --size-721: 37.5521vw;
 
         --size-726: 37.7813vw;
 
         --size-735: 38.2813vw;
 
         --size-740: 38.5417vw;
 
         --size-750: 39.0625vw;
 
         --size-757: 39.3854vw;
 
-        --size-770: 40.0000vw;
 
+        --size-770: 40vw;
 
         --size-774: 40.2604vw;
 
         --size-775: 40.3125vw;
 
-        --size-780: 40.6250vw;
 
+        --size-780: 40.625vw;
 
         --size-788: 40.9903vw;
 
         --size-791: 41.1563vw;
 
         --size-795: 41.3542vw;
 
@@ -1028,13 +1054,16 @@
 
         --size-822: 42.8125vw;
 
         --size-836: 43.5417vw;
 
         --size-845: 43.9896vw;
 
-        --size-900: 46.8750vw;
 
-        --size-972: 50.6250vw;
 
+        --size-900: 46.875vw;
 
+        --size-949: 49.4271vw;
 
+        --size-960: 50vw;
 
+        --size-971: 50.5729vw;
 
+        --size-972: 50.625vw;
 
         --size-973: 50.6875vw;
 
         --size-992: 51.6667vw;
 
         --size-1000: 52.0833vw;
 
         --size-1022: 53.2292vw;
 
-        --size-1044: 54.3750vw;
 
+        --size-1044: 54.375vw;
 
         --size-1055: 54.9479vw;
 
         --size-1065: 55.4688vw;
 
         --size-1079: 56.1979vw;
 
@@ -1043,14 +1072,14 @@
 
         --size-1158: 60.3125vw;
 
         --size-1189: 61.9896vw;
 
         --size-1330: 69.2708vw;
 
-        --size-1366: 71.2500vw;
 
+        --size-1366: 71.25vw;
 
         --size-1400: 72.9167vw;
 
         --size-1440: 74.1667vw;
 
         --size-1494: 77.7083vw;
 
         --size-1540: 80.2083vw;
 
         --size-1552: 80.8333vw;
 
-        --size-1596: 83.1250vw;
 
-        --size-1620: 84.3750vw;
 
-        --size-1860: 96.8750vw;
 
+        --size-1596: 83.125vw;
 
+        --size-1620: 84.375vw;
 
+        --size-1860: 96.875vw;
 
     }
 
-}
 
+}

BIN
assets/images/about/img_02.png
Voir le fichier


BIN
assets/images/about/img_03.png
Voir le fichier


BIN
assets/images/about/level_00.png
Voir le fichier


BIN
assets/images/about/level_01.png
Voir le fichier


BIN
assets/images/about/level_02.png
Voir le fichier


BIN
assets/images/about/level_03.png
Voir le fichier


BIN
assets/images/about/level_04.png
Voir le fichier


BIN
assets/images/about/level_11.png
Voir le fichier


BIN
assets/images/about/level_22.png
Voir le fichier


BIN
assets/images/about/level_33.png
Voir le fichier


BIN
assets/images/about/level_44.png
Voir le fichier


+ 0 - 9
components.d.ts
Voir le fichier 

@@ -11,10 +11,8 @@ declare module 'vue' {
 
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
 
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
 
     NButton: typeof import('naive-ui')['NButton']
 
-    NCard: typeof import('naive-ui')['NCard']
 
     NCarousel: typeof import('naive-ui')['NCarousel']
 
     NCarouselItem: typeof import('naive-ui')['NCarouselItem']
 
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
 
     NDatePicker: typeof import('naive-ui')['NDatePicker']
 
     NDropdown: typeof import('naive-ui')['NDropdown']
 
     NEmpty: typeof import('naive-ui')['NEmpty']
 
@@ -22,21 +20,14 @@ declare module 'vue' {
 
     NFormItem: typeof import('naive-ui')['NFormItem']
 
     NIcon: typeof import('naive-ui')['NIcon']
 
     NInput: typeof import('naive-ui')['NInput']
 
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
 
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
 
     NModal: typeof import('naive-ui')['NModal']
 
     NNumberAnimation: typeof import('naive-ui')['NNumberAnimation']
 
     NPagination: typeof import('naive-ui')['NPagination']
 
-    NPopover: typeof import('naive-ui')['NPopover']
 
     NRadio: typeof import('naive-ui')['NRadio']
 
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
 
-    NSelect: typeof import('naive-ui')['NSelect']
 
-    NSpace: typeof import('naive-ui')['NSpace']
 
     NSpin: typeof import('naive-ui')['NSpin']
 
-    NTable: typeof import('naive-ui')['NTable']
 
     NTabPane: typeof import('naive-ui')['NTabPane']
 
     NTabs: typeof import('naive-ui')['NTabs']
 
-    NTag: typeof import('naive-ui')['NTag']
 
     RouterLink: typeof import('vue-router')['RouterLink']
 
     RouterView: typeof import('vue-router')['RouterView']
 
   }

+ 282 - 0
pages/about/link copy.vue
Voir le fichier 

@@ -0,0 +1,282 @@
 
+<template>
 
+  <div class="page" id="page">
 
+    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+      <div class="top-container">
 
+        <n-icon :component="MdToday" size="40" style="vertical-align: middle;" />
 
+        <span>{{ t('common.navAboutUs.method') }}</span>
 
+      </div>
 
+    </div>
 
+  1 sdfgsdfgsdfgsdfgsdfg
 
+
 
+    <!-- <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+      <div class="nav-txt">
 
+        <n-breadcrumb separator=">">
 
+          <n-breadcrumb-item>
 
+            <n-icon :component="MdHome" /><router-link to="/home">{{ t('common.navigate.home') }}</router-link>
 
+          </n-breadcrumb-item>
 
+          <n-breadcrumb-item>
 
+            <n-icon :component="MdToday" />{{ t('common.navAboutUs.method') }}
 
+          </n-breadcrumb-item>
 
+        </n-breadcrumb>
 
+      </div>
 
+    </div> -->
 
+
 
+    <!--研究方法-->
 
+    <div class="research-show">
 
+      <div class="container research-content">
 
+        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <h2>{{ t('common.navAboutUs.method') }}</h2>
 
+        </div>
 
+        <div class="show-box">
 
+          <div class="show-img box-img01 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <!-- <img src="@/assets/images/research-01.jpg"> -->
 
+          </div>
 
+          <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <p>{{ t('aboutUs.method.desc01') }}</p>
 
+          </div>
 
+        </div>
 
+        <div class="show-box">
 
+          <div class="show-desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <p>{{ t('aboutUs.method.desc02') }}</p>
 
+          </div>
 
+          <div class="show-img box-img02 wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <!-- <img class="img-02" src="@/assets/images/research-02.jpg"> -->
 
+          </div>
 
+        </div>
 
+        <div class="show-box">
 
+          <div class="show-img box-img03 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <!-- <img src="@/assets/images/research-03.jpg"> -->
 
+          </div>
 
+          <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <p>{{ t('aboutUs.method.desc03') }}</p>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="report-img">
 
+          <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+            <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/report-method.png" />
 
+            <img v-else src="@/assets/images/report-method-en.png" /> -->
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!--研究细节-->
 
+    <!-- <div class="research-detail">
 
+            <div class="container">
 
+                <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+                    <h2>研究细节</h2>
 
+                </div>
 
+                <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+                    <img src="@/assets/images/report-method.png"/>
 
+                </div>
 
+            </div>
 
+        </div> -->
 
+
 
+    <!--数据验证-->
 
+    <div class="report-data">
 
+      <div class="container">
 
+        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <h2>{{ t('aboutUs.data.title') }}</h2>
 
+        </div>
 
+        <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/data-valid.png" />
 
+          <img v-else src="@/assets/images/data-valid-en.png" /> -->
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!--数据来源-->
 
+    <div class="report-source">
 
+      <div class="container">
 
+        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <h2>{{ t('aboutUs.source.title') }}</h2>
 
+        </div>
 
+        <div class="desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <p>{{ t('aboutUs.source.desc') }}</p>
 
+        </div>
 
+        <div class="img wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <!-- <img v-if="lang == 'zh-CN'" src="@/assets/images/report-source.png" />
 
+          <img v-else src="@/assets/images/report-source-en.png" /> -->
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!--部分数据库展示-->
 
+    <div class="partial-database">
 
+      <div class="container">
 
+        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <h2>{{ t('aboutUs.database.title') }}</h2>
 
+        </div>
 
+        <div class="db-box wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
+          <!-- <div class="img"><img src="@/assets/images/d01.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d02.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d03.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d04.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d05.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d06.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d07.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d08.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d09.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d10.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d11.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d12.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d13.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d14.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d15.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d16.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d17.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d18.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d19.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d20.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d21.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d22.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d23.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d24.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d25.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d26.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d27.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d28.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d29.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d30.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d31.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d32.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d33.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d34.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d35.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d36.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d37.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d38.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d39.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d40.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d41.png" /></div>
 
+          <div class="img"><img src="@/assets/images/d42.png" /></div> -->
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" setup>
 
+import { useI18n } from "#imports";
 
+import { NIcon, NBreadcrumb, NBreadcrumbItem } from "naive-ui";
 
+import { MdHome, MdToday } from "@vicons/ionicons4";
 
+import { onMounted, ref } from "vue";
 
+import { useUserStore } from "@/store/user";
 
+
 
+const { t } = useI18n();
 
+const img01 = ref<string>(),
 
+  img02 = ref<string>(),
 
+  img03 = ref<string>();
 
+const userStore = useUserStore();
 
+const lang = userStore.getLang;
 
+
 
+onMounted(async () => {
 
+  img01.value = lang == "zh-CN" ? "200px" : "290px";
 
+  img02.value = lang == "zh-CN" ? "380px" : "520px";
 
+  img03.value = lang == "zh-CN" ? "170px" : "230px";
 
+});
 
+useHead({
 
+  title: t("common.navAboutUs.method") + "-" + t("defaultSettings.title"),
 
+  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
 
+  charset: "utf-8",
 
+  meta: [
 
+    {
 
+      hid: "keywords",
 
+      name: "keywords",
 
+      content: t("defaultSettings.keyword"),
 
+    },
 
+    {
 
+      hid: "description",
 
+      name: "description",
 
+      content: t("defaultSettings.desc"),
 
+    },
 
+  ],
 
+});
 
+</script>
 
+<style lang="scss" scoped>
 
+.research-show {
 
+  background-color: #fff;
 
+  margin-top: 10px;
 
+  .show-box {
 
+    display: flex;
 
+    .show-img {
 
+      width: 50%;
 
+      overflow: hidden;
 
+      img {
 
+        width: 100%;
 
+        object-fit: cover;
 
+      }
 
+    }
 
+    .box-img01 {
 
+      max-height: v-bind("img01");
 
+    }
 
+    .box-img02 {
 
+      max-height: v-bind("img02");
 
+      > img {
 
+        height: v-bind("img02");
 
+      }
 
+    }
 
+    .box-img03 {
 
+      max-height: v-bind("img03");
 
+    }
 
+    .show-desc {
 
+      width: 50%;
 
+      padding: 10px;
 
+      > p {
 
+        font-size: 16px;
 
+        line-height: 30px;
 
+        margin: 0;
 
+      }
 
+    }
 
+  }
 
+  .report-img {
 
+    width: 100%;
 
+    padding-top: 80px;
 
+    img {
 
+      width: 100%;
 
+    }
 
+  }
 
+}
 
+.report-data,
 
+.research-detail,
 
+.report-source {
 
+  background-color: #fff;
 
+  .img {
 
+    > img {
 
+      width: 100%;
 
+    }
 
+  }
 
+}
 
+.report-source {
 
+  .desc {
 
+    > p {
 
+      font-size: 16px;
 
+      color: #000;
 
+    }
 
+  }
 
+}
 
+.partial-database {
 
+  background-color: #fff;
 
+  border-bottom: 1px solid #dedede;
 
+  padding-bottom: 20px;
 
+  .db-box {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    border-bottom: 1px solid #dedede;
 
+    border-left: 1px solid #dedede;
 
+    .img {
 
+      width: 16.6666%;
 
+      border-top: 1px solid #dedede;
 
+      border-right: 1px solid #dedede;
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+      padding: 0.2rem 0;
 
+      > img {
 
+        width: 100%;
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 353 - 202
pages/about/link.vue
Voir le fichier 

@@ -1,156 +1,98 @@
 
 <template>
 
   <div class="page" id="page">
 
-    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-      <div class="top-container">
 
-        <n-icon :component="MdToday" size="40" style="vertical-align: middle;" />
 
-        <span>{{ t('common.navAboutUs.method') }}</span>
 
+    <div class="top">
 
+      <img src="@/assets/images/about/img1.png" alt="" />
 
+      <div>
 
+        <div class="top_title">About Us</div>
 
+        <div class="top_location">
 
+          <span class="iconfont icon-weizhi"></span>
 
+          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span>
 
+          <span>Research Method</span>
 
+        </div>
 
       </div>
 
     </div>
 
 
-    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-      <div class="nav-txt">
 
-        <n-breadcrumb separator=">">
 
-          <n-breadcrumb-item>
 
-            <n-icon :component="MdHome" /><router-link to="/home">{{ t('common.navigate.home') }}</router-link>
 
-          </n-breadcrumb-item>
 
-          <n-breadcrumb-item>
 
-            <n-icon :component="MdToday" />{{ t('common.navAboutUs.method') }}
 
-          </n-breadcrumb-item>
 
-        </n-breadcrumb>
 
+    <div class="research-content">
 
+      <div class="content-item-01">
 
+        WENKH, with its rigorous research methods and extensive industry experience, is
 
+        dedicated to providing high-quality industry research reports for clients. Our
 
+        research system covers both primary and secondary research,gathering comprehensive
 
+        and accurate data from multiple dimensions. Primary research involves in-depth
 
+        discussions with key participants in the industry value chain, collecting market
 
+        dynamics, trend forecasts, and critical data toensure the authority and
 
+        forward-looking nature of the reports. Secondary research integrates data from
 
+        public and professional sources such as government agencies, industry
 
+        associations, company reports, and independentresearch organizations, combined
 
+        with WENKH's proprietary database for in-depth analysis. Throughout the research
 
+        process, we consider core factors such as government policies, market environment,
 
+        competitive landscape,industry technological innovation, market risks, and
 
+        opportunities, ensuring the comprehensiveness and reliability of our research
 
+        results.
 
+      </div>
 
+      <div class="content-item-02">
 
+        In the field of industry research, WENKH has developed a mature research
 
+        methodology and industry evaluation system, utilizing scientific analysis tools
 
+        such as the industry lifecycle theory, PEST analysis, Porter's Five Forces model,
 
+        SWOT analysis, Boston Matrix, and Porter's Diamond theory to conduct in-depth
 
+        analysis of key dimensions such as market supply and demand, competitive
 
+        landscape, profit models, and industrial chain development. Based on long-term
 
+        industrytracking and data accumulation, we can accurately forecastfuture industry
 
+        trends and provide clients with comprehensive market insights. Our research
 
+        reportsnot only cover the overall industry market capacity, segmentation data,
 
+        import-expor situation, and market demand characteristics but also conduct
 
+        in-depthresearch on the operational conditions of key enterprises, helping clients
 
+        formulate scientifically soundstrategic decisions and seize opportunities in a
 
+        complexand dynamic market environment.
 
       </div>
 
     </div>
 
 
-    <!--研究方法-->
 
-    <div class="research-show">
 
-      <div class="container research-content">
 
-        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <h2>{{ t('common.navAboutUs.method') }}</h2>
 
+    <div class="method-box">
 
+      <div class="method-item">
 
+        <div class="method-left method-lr">
 
+          <p class="title">Bottom Up Research Method</p>
 
         </div>
 
-        <div class="show-box">
 
-          <div class="show-img box-img01 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <img src="@/assets/images/research-01.jpg">
 
-          </div>
 
-          <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <p>{{ t('aboutUs.method.desc01') }}</p>
 
-          </div>
 
+        <div class="method-right method-lr">
 
+          <p class="title">Top Down Research Methodology</p>
 
         </div>
 
-        <div class="show-box">
 
-          <div class="show-desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <p>{{ t('aboutUs.method.desc02') }}</p>
 
+      </div>
 
+      <div class="level_top">
 
+        <img src="@/assets/images/about/level_00.png" alt="" />
 
+      </div>
 
+      <div
 
+        :class="['method-item ', `method-level_${index}`]"
 
+        v-for="(item, index) in methodLevel"
 
+        :key="index"
 
+      >
 
+        <div class="method-left method-lr">
 
+          <div class="level_item">
 
+            <p class="level-title">{{ item.left.title }}</p>
 
+            <p class="level-text">{{ item.left.text }}</p>
 
           </div>
 
-          <div class="show-img box-img02 wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <img class="img-02" src="@/assets/images/research-02.jpg">
 
+          <div class="level-img">
 
+            <img :src="item.left.img" alt="" />
 
+            <div class="level-white" />
 
           </div>
 
         </div>
 
-        <div class="show-box">
 
-          <div class="show-img box-img03 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <img src="@/assets/images/research-03.jpg">
 
-          </div>
 
-          <div class="show-desc wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <p>{{ t('aboutUs.method.desc03') }}</p>
 
+        <div class="method-right method-lr">
 
+          <div class="level-img">
 
+            <img :src="item.right.img" alt="" />
 
+            <div class="level-white" />
 
           </div>
 
-        </div>
 
-
 
-        <div class="report-img">
 
-          <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-            <img v-if="lang == 'zh-CN'" src="@/assets/images/report-method.png" />
 
-            <img v-else src="@/assets/images/report-method-en.png" />
 
+          <div class="level_item">
 
+            <p class="level-title">{{ item.right.title }}</p>
 
+            <p class="level-text">{{ item.right.text }}</p>
 
           </div>
 
         </div>
 
       </div>
 
     </div>
 
 
-    <!--研究细节-->
 
-    <!-- <div class="research-detail">
 
-            <div class="container">
 
-                <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-                    <h2>研究细节</h2>
 
-                </div>
 
-                <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-                    <img src="@/assets/images/report-method.png"/>
 
-                </div>
 
-            </div>
 
-        </div> -->
 
-
 
-    <!--数据验证-->
 
-    <div class="report-data">
 
-      <div class="container">
 
-        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <h2>{{ t('aboutUs.data.title') }}</h2>
 
-        </div>
 
-        <div class="img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <img v-if="lang == 'zh-CN'" src="@/assets/images/data-valid.png" />
 
-          <img v-else src="@/assets/images/data-valid-en.png" />
 
-        </div>
 
-      </div>
 
-    </div>
 
-
 
-    <!--数据来源-->
 
-    <div class="report-source">
 
-      <div class="container">
 
-        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <h2>{{ t('aboutUs.source.title') }}</h2>
 
-        </div>
 
-        <div class="desc wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <p>{{ t('aboutUs.source.desc') }}</p>
 
-        </div>
 
-        <div class="img wow fadeInRight" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <img v-if="lang == 'zh-CN'" src="@/assets/images/report-source.png" />
 
-          <img v-else src="@/assets/images/report-source-en.png" />
 
-        </div>
 
-      </div>
 
-    </div>
 
-
 
-    <!--部分数据库展示-->
 
-    <div class="partial-database">
 
-      <div class="container">
 
-        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <h2>{{ t('aboutUs.database.title') }}</h2>
 
-        </div>
 
-        <div class="db-box wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
 
-          <div class="img"><img src="@/assets/images/d01.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d02.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d03.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d04.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d05.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d06.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d07.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d08.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d09.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d10.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d11.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d12.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d13.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d14.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d15.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d16.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d17.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d18.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d19.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d20.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d21.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d22.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d23.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d24.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d25.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d26.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d27.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d28.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d29.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d30.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d31.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d32.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d33.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d34.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d35.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d36.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d37.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d38.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d39.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d40.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d41.png" /></div>
 
-          <div class="img"><img src="@/assets/images/d42.png" /></div>
 
-        </div>
 
+    <div class="method-content">
 
+      <div class="title">Multidimensional Data Cross Validation Method</div>
 
+      <div class="content-box">
 
+        <div class="content-item"></div>
 
+        <div class="content-item"></div>
 
+        <div class="content-item"></div>
 
+        <div class="content-item"></div>
 
       </div>
 
     </div>
 
   </div>
 
@@ -192,90 +134,299 @@ useHead({
 
     },
 
   ],
 
 });
 
+import level01 from "@/assets/images/about/level_01.png";
 
+import level02 from "@/assets/images/about/level_02.png";
 
+import level03 from "@/assets/images/about/level_03.png";
 
+import level04 from "@/assets/images/about/level_04.png";
 
+import level11 from "@/assets/images/about/level_11.png";
 
+import level22 from "@/assets/images/about/level_22.png";
 
+import level33 from "@/assets/images/about/level_33.png";
 
+import level44 from "@/assets/images/about/level_44.png";
 
+const methodLevel = [
 
+  {
 
+    left: {
 
+      title: "Industry Overview",
 
+      text:
 
+        "Macro analysis of the entire industry, including research on market size, growth trends, competitivelandscape,industry policies, etc.",
 
+      img: level01,
 
+    },
 
+    right: {
 
+      title: "Company Research",
 
+      text:
 
+        "Select some representative companies for in-depth research, including analysis of the company's businessmodel, market position, financial status, etc.",
 
+      img: level44,
 
+    },
 
+  },
 
+  {
 
+    left: {
 
+      title: "Segmentation Analysis",
 
+      text:
 
+        "Select Some more segments within the industry and analyze them in detail, including marketcharacteristics, major players, development trends, etc.",
 
+      img: level02,
 
+    },
 
+    right: {
 
+      title: "Industry Overview",
 
+      text:
 
+        "After conducting research on subdivided fields, the cases of individual companies are integrated toconduct a macro analysis of the entire industry.",
 
+      img: level33,
 
+    },
 
+  },
 
+  {
 
+    left: {
 
+      title: "Company Research",
 
+      text:
 
+        "Select representative companies according to subdivided fields for in-depthresearch,including analysis of company background, competitiveadvantages, financial status, strategicplanning, etc.",
 
+      img: level03,
 
+    },
 
+    right: {
 
+      title: "Segmentation Analysis",
 
+      text:
 
+        "Through the research of different companies, find out their common segments or keybusinesses, and conduct a detailed analysis of the field.",
 
+      img: level22,
 
+    },
 
+  },
 
+  {
 
+    left: {
 
+      title: "Comprehensive Evaluation",
 
+      text:
 
+        "After conducting research on the entire industry, subdivisions and companies,conduct comprehensive assessment of the researchresults to form a view on thefuture trends andpotential opportunities of the industry.",
 
+      img: level04,
 
+    },
 
+    right: {
 
+      title: "Company Research",
 
+      text:
 
+        "Select some representative companies for in-depth research, including analysis of thecompany's business model, market position, financial status, etc.",
 
+      img: level11,
 
+    },
 
+  },
 
+];
 
 </script>
 
 <style lang="scss" scoped>
 
-.research-show {
 
-  background-color: #fff;
 
-  margin-top: 10px;
 
-  .show-box {
 
-    display: flex;
 
-    .show-img {
 
-      width: 50%;
 
-      overflow: hidden;
 
-      img {
 
-        width: 100%;
 
-        object-fit: cover;
 
-      }
 
-    }
 
-    .box-img01 {
 
-      max-height: v-bind("img01");
 
+.page {
 
+  .top {
 
+    width: 100%;
 
+    position: relative;
 
+    margin-top: var(--size-130);
 
+    img {
 
+      width: 100%;
 
     }
 
-    .box-img02 {
 
-      max-height: v-bind("img02");
 
-      > img {
 
-        height: v-bind("img02");
 
+    > div {
 
+      width: 100%;
 
+      padding: var(--size-60) var(--size-176) 0;
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      .top_title {
 
+        font-size: var(--size-48);
 
+        font-family: Arial, Arial-Bold;
 
+        font-weight: 700;
 
+        text-align: left;
 
+        color: #ffffff;
 
+      }
 
+      .top_location {
 
+        font-size: var(--size-14);
 
+        font-family: Arial, Arial-Regular;
 
+        font-weight: 400;
 
+        color: #ffffff;
 
+        .icon-dkw_guanbi- {
 
+          color: #ffffff;
 
+          font-size: var(--size-12);
 
+        }
 
+        span {
 
+          color: #72ff56;
 
+        }
 
       }
 
     }
 
-    .box-img03 {
 
-      max-height: v-bind("img03");
 
+  }
 
+
 
+  .research-content {
 
+    padding: var(--size-40) var(--size-146) var(--size-70);
 
+    .content-item-01 {
 
+      padding-bottom: var(--size-40);
 
+      font-size: var(--size-16);
 
+      font-family: Arial, Arial-Regular;
 
+      font-weight: 400;
 
+      text-align: left;
 
+      color: #1a1a1a;
 
+      line-height: var(--size-24);
 
     }
 
-    .show-desc {
 
-      width: 50%;
 
-      padding: 10px;
 
-      > p {
 
-        font-size: 16px;
 
-        line-height: 30px;
 
-        margin: 0;
 
-      }
 
+    .content-item-02 {
 
+      padding: var(--size-46) var(--size-291) var(--size-46) var(--size-30);
 
+      font-size: var(--size-16);
 
+      font-family: Arial, Arial-Regular;
 
+      font-weight: 400;
 
+      text-align: left;
 
+      color: #1a1a1a;
 
+      line-height: var(--size-24);
 
+      background: url("@/assets/images/about/img_02.png") no-repeat center center;
 
+      background-size: 100% 100%;
 
     }
 
   }
 
-  .report-img {
 
-    width: 100%;
 
-    padding-top: 80px;
 
-    img {
 
+
 
+  .method-box {
 
+    padding: var(--size-76) var(--size-146);
 
+    // background: url("@/assets/images/about/img_03.png") no-repeat center center;
 
+    // background-size: var(--size-524) var(--size-443);
 
+    min-height: var(--size-670);
 
+    background: linear-gradient(159deg, #499f81 3%, #749c56 91%, #749c56 97%);
 
+
 
+    p {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    .level_top {
 
       width: 100%;
 
+      height: var(--size-58);
 
+      text-align: center;
 
+      img {
 
+        width: var(--size-71);
 
+        height: var(--size-66);
 
+      }
 
     }
 
-  }
 
-}
 
-.report-data,
 
-.research-detail,
 
-.report-source {
 
-  background-color: #fff;
 
-  .img {
 
-    > img {
 
+    .method-item {
 
       width: 100%;
 
+      display: flex;
 
+      justify-content: space-between;
 
+      align-items: stretch;
 
+      .title {
 
+        font-size: var(--size-48);
 
+        font-family: Arial, Arial-Bold;
 
+        font-weight: 700;
 
+        text-align: left;
 
+        color: #ffffff;
 
+      }
 
+      .method-left {
 
+        p {
 
+          text-align: right;
 
+        }
 
+        .title {
 
+          padding-right: var(--size-47);
 
+        }
 
+        .level_item {
 
+          padding-right: var(--size-20);
 
+        }
 
+      }
 
+      .method-right {
 
+        .title {
 
+          padding-left: var(--size-47);
 
+        }
 
+        .level_item {
 
+          padding-left: var(--size-20);
 
+        }
 
+        .level-img {
 
+          align-items: flex-end;
 
+        }
 
+      }
 
+      .method-lr {
 
+        width: 50%;
 
+        flex-shrink: 0;
 
+        display: flex;
 
+        align-items: stretch;
 
+        .level_item {
 
+          .level-title {
 
+            font-size: var(--size-22);
 
+            font-family: Arial, Arial-Bold;
 
+            font-weight: 700;
 
+            color: #ffffff;
 
+          }
 
+          .level-text {
 
+            font-size: var(--size-14);
 
+            font-family: Arial, Arial-Regular;
 
+            font-weight: 400;
 
+            color: #ffffff;
 
+            line-height: var(--size-20);
 
+          }
 
+        }
 
+        .level-img {
 
+          width: var(--size-110);
 
+          display: flex;
 
+          flex-direction: column;
 
+          img {
 
+            width: var(--size-110);
 
+            height: var(--size-82);
 
+            display: inline-block;
 
+          }
 
+          .level-white {
 
+            flex: 1;
 
+            width: var(--size-59);
 
+            min-height: var(--size-24);
 
+            background-color: #fff;
 
+          }
 
+        }
 
+      }
 
     }
 
-  }
 
-}
 
-.report-source {
 
-  .desc {
 
-    > p {
 
-      font-size: 16px;
 
-      color: #000;
 
+    .method-level_1 {
 
+      .method-left {
 
+        padding-right: var(--size-51);
 
+      }
 
+      .method-right {
 
+        padding-left: var(--size-51);
 
+      }
 
+    }
 
+    .method-level_2 {
 
+      .method-left {
 
+        padding-right: var(--size-102);
 
+      }
 
+      .method-right {
 
+        padding-left: var(--size-102);
 
+      }
 
+    }
 
+    .method-level_3 {
 
+      .method-left {
 
+        padding-right: var(--size-153);
 
+      }
 
+      .method-right {
 
+        padding-left: var(--size-153);
 
+      }
 
+      .level-white {
 
+        display: none !important;
 
+      }
 
     }
 
   }
 
-}
 
-.partial-database {
 
-  background-color: #fff;
 
-  border-bottom: 1px solid #dedede;
 
-  padding-bottom: 20px;
 
-  .db-box {
 
-    display: flex;
 
-    flex-wrap: wrap;
 
-    border-bottom: 1px solid #dedede;
 
-    border-left: 1px solid #dedede;
 
-    .img {
 
-      width: 16.6666%;
 
-      border-top: 1px solid #dedede;
 
-      border-right: 1px solid #dedede;
 
+
 
+  .method-content {
 
+    padding: var(--size-80) 0;
 
+    .title {
 
+      font-size: var(--size-48);
 
+      font-family: Arial, Arial-Bold;
 
+      font-weight: 700;
 
+      text-align: center;
 
+      color: #1a1a1a;
 
+      height: var(--size-100);
 
+    }
 
+    .content-box {
 
+      margin: 0 auto;
 
+      // width: var(--size-971);
 
+      // height: var(--size-697);
 
+
 
+      width: var(--size-949);
 
+      height: var(--size-675);
 
+      background: #e2e2e2;
 
+      border-radius: var(--size-354);
 
+      // padding: var(--size-11);
 
       display: flex;
 
-      align-items: center;
 
-      justify-content: center;
 
-      padding: 0.2rem 0;
 
-      > img {
 
-        width: 100%;
 
+      flex-wrap: wrap;
 
+      justify-content: space-between;
 
+      box-shadow: 0 0 50px #e2e2e2;
 
+      .content-item {
 
+        width: var(--size-469);
 
+        height: var(--size-332);
 
+        background-color: #fff;
 
+        border-radius: var(--size-354) 0 0 0;
 
+        // filter:
 
+        &:nth-child(2) {
 
+          border-radius: 0 var(--size-354) 0 0;
 
+        }
 
+        &:nth-child(4) {
 
+          border-radius: 0 0 var(--size-354) 0;
 
+          margin-top: var(--size-11);
 
+        }
 
+        &:nth-child(3) {
 
+          border-radius: 0 0 0 var(--size-354);
 
+          margin-top: var(--size-11);
 
+        }
 
       }
 
     }
 
   }
 
 }
 
-</style>
 
+</style>