提交

assets/css/root.scss

@@ -32,315 +32,334 @@
     --weight-900: 400;
 
     @include responseTo("phone") {
-        --size--133: -17.7333vw;
-        --size--100: -13.3333vw;
-        --size--75: -10vw;
-        --size--50: -6.6667vw;
-        --size--48: -6.4vw;
-        --size--32: -4.2667vw;
-        --size--25: -3.3333vw;
-        --size--17: -2.2667vw;
-        --size--10: -1.3333vw;
-        --size--7: -0.6667vw;
-        --size--6: -0.8vw;
-        --size--5: -0.6667vw;
-        --size--4: -0.5333vw;
-        --size--2: -0.2667vw;
-        --size-1: 0.1333vw;
-        --size-2: 0.2667vw;
-        --size-3: 0.4vw;
-        --size-4: 0.5333vw;
-        --size-5: 0.6667vw;
-        --size-6: 0.8vw;
-        --size-7: 0.9333vw;
-        --size-8: 1.0667vw;
-        --size-9: 1.2vw;
-        --size-10: 1.3333vw;
-        --size-11: 1.4667vw;
-        --size-12: 1.6vw;
-        --size-13: 1.7333vw;
-        --size-14: 1.8667vw;
-        --size-15: 2vw;
-        --size-16: 2.1333vw;
-        --size-17: 2.2667vw;
-        --size-18: 2.4vw;
-        --size-19: 2.5333vw;
-        --size-20: 2.6667vw;
-        --size-21: 2.8vw;
-        --size-22: 2.9333vw;
-        --size-23: 3.0667vw;
-        --size-24: 3.2vw;
-        --size-25: 3.3333vw;
-        --size-26: 3.4667vw;
-        --size-27: 3.6vw;
-        --size-28: 3.7333vw;
-        --size-29: 3.8667vw;
-        --size-30: 4vw;
-        --size-31: 4.1333vw;
-        --size-32: 4.2667vw;
-        --size-33: 4.4vw;
-        --size-34: 4.533vw;
-        --size-35: 4.6667vw;
-        --size-36: 4.8vw;
-        --size-37: 4.9333vw;
-        --size-38: 5.0667vw;
-        --size-39: 5.2vw;
-        --size-40: 5.3333vw;
-        --size-41: 5.46vw;
-        --size-42: 5.6vw;
-        --size-43: 5.7333vw;
-        --size-44: 5.8667vw;
-        --size-45: 6vw;
-        --size-46: 6.1333vw;
-        --size-47: 6.2667;
-        --size-48: 6.4vw;
-        --size-49: 6.5333vw;
-        --size-50: 6.6667vw;
-        --size-51: 6.8vw;
-        --size-52: 6.93vw;
-        --size-53: 7.0667vw;
-        --size-54: 7.6vw;
-        --size-55: 7.33vw;
-        --size-56: 7.4667vw;
-        --size-57: 7.6vw;
-        --size-58: 7.7333vw;
-        --size-59: 7, 8667vw;
-        --size-60: 8vw;
-        --size-61: 8.1333vw;
-        --size-62: 8.2667vw;
-        --size-63: 8.4vw;
-        --size-64: 8.5333vw;
-        --size-65: 8.6667vw;
-        --size-66: 8.8vw;
-        --size-67: 8.9333vw;
-        --size-68: 9.0667vw;
-        --size-69: 9.2vw;
-        --size-70: 9.3333vw;
-        --size-73: 9.733vw;
-        --size-74: 9.867vw;
-        --size-75: 10vw;
-        --size-76: 10.13vw;
-        --size-80: 10.6667vw;
-        --size-81: 10.8vw;
-        --size-82: 10.9333vw;
-        --size-83: 11.0667vw;
-        --size-84: 11.2vw;
-        --size-85: 11.3333vw;
-        --size-86: 11.4667vw;
-        --size-87: 11.6vw;
-        --size-88: 11.7333vw;
-        --size-89: 11.8667vw;
-        --size-90: 13vw;
-        --size-91: 12.1333vw;
-        --size-92: 12.2667vw;
-        --size-93: 12.4vw;
-        --size-94: 13.5333vw;
-        --size-95: 12.6667vw;
-        --size-96: 12.8vw;
-        --size-97: 12.9333vw;
-        --size-98: 13.0667vw;
-        --size-99: 13.2vw;
-        --size-100: 13.3333vw;
-        --size-104: 13.8667vw;
-        --size-105: 14vw;
-        --size-106: 14.1333vw;
-        --size-107: 14.267vw;
-        --size-112: 14.9333vw;
-        --size-115: 15.333vw;
-        --size-116: 15.4667vw;
-        --size-117: 15.6vw;
-        --size-119: 15.867vw;
-        --size-120: 16vw;
-        --size-122: 16.2667vw;
-        --size-124: 16.533vw;
-        --size-128: 17.0667vw;
-        --size-130: 17.33vw;
-        --size-132: 17.6vw;
-        --size-133: 17.7333vw;
-        --size-134: 17.8667vw;
-        --size-135: 18vw;
-        --size-141: 18.8vw;
-        --size-142: 18.933vw;
-        --size-148: 19.7333vw;
-        --size-150: 20vw;
-        --size-153: 20.4vw;
-        --size-154: 20.533vw;
-        --size-155: 20.6667vw;
-        --size-160: 21.333vw;
-        --size-161: 21.467vw;
-        --size-165: 22vw;
-        --size-166: 22.133vw;
-        --size-170: 22.667vw;
-        --size-172: 22.933vw;
-        --size-173: 23.067vw;
-        --size-174: 23.2vw;
-        --size-176: 23.47vw;
-        --size-178: 23.733vw;
-        --size-179: 23.866vw;
-        --size-180: 24vw;
-        --size-181: 24.133vw;
-        --size-185: 24.6667vw;
-        --size-186: 24.8vw;
-        --size-187: 24.933vw;
-        --size-188: 25.067vw;
-        --size-190: 25.33vw;
-        --size-192: 25.6vw;
-        --size-194: 25.867vw;
-        --size-199: 26.533vw;
-        --size-200: 26.666vw;
-        --size-204: 27.2vw;
-        --size-205: 27.33vw;
-        --size-208: 26.6667vw;
-        --size-208: 27.733vw;
-        --size-210: 28vw;
-        --size-216: 28.8vw;
-        --size-218: 29.067vw;
-        --size-220: 29.333vw;
-        --size-221: 29.4667vw;
-        --size-225: 30vw;
-        --size-226: 30.133vw;
-        --size-227: 30.267vw;
-        --size-228: 30.4vw;
-        --size-230: 30.667vw;
-        --size-232: 30.933vw;
-        --size-234: 31.2vw;
-        --size-238: 31.733vw;
-        --size-240: 32vw;
-        --size-245: 32.667vw;
-        --size-248: 33.067vw;
-        --size-255: 34vw;
-        --size-256: 34.133vw;
-        --size-257: 34.267vw;
-        --size-259: 34.533vw;
-        --size-260: 34.667vw;
-        --size-262: 34.933vw;
-        --size-264: 35.2vw;
-        --size-265: 35.33vw;
-        --size-266: 35.466vw;
-        --size-277: 36.933vw;
-        --size-278: 37.0667vw;
-        --size-279: 37.2vw;
-        --size-280: 37.333vw;
-        --size-283: 37.73vw;
-        --size-287: 38.266vw;
-        --size-288: 38.4vw;
-        --size-293: 39.0667vw;
-        --size-294: 39.2vw;
-        --size-297: 39.6vw;
-        --size-300: 40vw;
-        --size-304: 40.53vw;
-        --size-313: 41.733vw;
-        --size-315: 42vw;
-        --size-317: 42.2667vw;
-        --size-327: 43.6vw;
-        --size-329: 43.867vw;
-        --size-330: 44vw;
-        --size-336: 44.8vw;
-        --size-337: 44.933vw;
-        --size-340: 45.333vw;
-        --size-352: 46.933vw;
-        --size-356: 47.4667vw;
-        --size-360: 48vw;
-        --size-367: 48.93vw;
-        --size-373: 49.73vw;
-        --size-378: 50.4vw;
-        --size-388: 51.733vw;
-        --size-390: 52vw;
-        --size-396: 52.8vw;
-        --size-402: 53.6vw;
-        --size-406: 54.133vw;
-        --size-416: 55.466vw;
-        --size-322: 42.93vw;
-        --size-429: 57.2vw;
-        --size-430: 57.33vw;
-        --size-432: 57.6vw;
-        --size-442: 58.933vw;
-        --size-450: 60vw;
-        --size-453: 60.4vw;
-        --size-460: 61.33vw;
-        --size-462: 61.6vw;
-        --size-466: 62.133vw;
-        --size-468: 62.4vw;
-        --size-471: 62.8vw;
-        --size-479: 63.867vw;
-        --size-485: 64.667vw;
-        --size-487: 64.933vw;
-        --size-490: 65.33vw;
-        --size-494: 65.867vw;
-        --size-497: 66.267vw;
-        --size-500: 66.6667vw;
-        --size-513: 68.4vw;
-        --size-526: 70.133vw;
-        --size-531: 70.8vw;
-        --size-539: 71.867vw;
-        --size-542: 72.267vw;
-        --size-544: 72.53px;
-        --size-547: 72.933vw;
-        --size-560: 74.667vw;
-        --size-565: 75.333vw;
-        --size-568: 75.7333vw;
-        --size-579: 77.2vw;
-        --size-590: 78.667vw;
-        --size-591: 78.8vw;
-        --size-600: 80vw;
-        --size-605: 80.667vw;
-        --size-627: 83.6vw;
-        --size-630: 84vw;
-        --size-634: 84.533vw;
-        --size-636: 84.8vw;
-        --size-640: 85.333vw;
-        --size-647: 86.267vw;
-        --size-648: 86.4vw;
-        --size-650: 86.667vw;
-        --size-670: 89.33vw;
-        --size-688: 91.733vw;
-        --size-690: 92vw;
-        --size-692: 92.266vw;
-        --size-693: 92.4vw;
-        --size-710: 94.667vw;
-        --size-715: 95.33vw;
-        --size-718: 95.733vw;
-        --size-720: 96vw;
-        --size-721: 85.33vw;
-        --size-726: 96.8vw;
-        --size-735: 98vw;
-        --size-740: 98.667vw;
-        --size-750: 100vw;
-        --size-757: 100.933vw;
-        --size-770: 102.66vw;
-        --size-774: 103.2vw;
-        --size-775: 103.33vw;
-        --size-780: 104vw;
-        --size-788: 105.067vw;
-        --size-791: 105.466vw;
-        --size-795: 106vw;
-        --size-800: 106.67vw;
-        --size-810: 108vw;
-        --size-822: 109.6vw;
-        --size-836: 111.467vw;
-        --size-845: 112.667vw;
-        --size-900: 120vw;
-        --size-972: 129.6vw;
-        --size-973: 129.733vw;
-        --size-992: 132.266vw;
-        --size-1000: 133.33vw;
-        --size-1022: 136.267vw;
-        --size-1044: 141.08vw;
-        --size-1065: 142vw;
-        --size-1116: 148.8vw;
-        --size-1158: 154.4vw;
-        --size-1189: 158.53vw;
-        --size-1330: 177.333vw;
-        --size-1366: 182.133vw;
-        --size-1400: 186.667vw;
-        --size-1438: 191.73vw;
-        --size-1440: 192vw;
-        --size-1494: 199.2vw;
-        --size-1540: 212.8vw;
-        --size-1552: 206.933vw;
-        --size-1596: 212.8vw;
-        --size-1620: 216vw;
-        --size-1860: 248vw;
+        --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--32: -8.5333vw;
+        --size--25: -6.6667vw;
+        --size--17: -4.5333vw;
+        --size--10: -2.6667vw;
+        --size--7: -1.8667vw;
+        --size--6: -1.6000vw;
+        --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-4: 1.0667vw;
+        --size-5: 1.3333vw;
+        --size-6: 1.6000vw;
+        --size-7: 1.8667vw;
+        --size-8: 2.1333vw;
+        --size-9: 2.4000vw;
+        --size-10: 2.6667vw;
+        --size-11: 2.9333vw;
+        --size-12: 3.2000vw;
+        --size-13: 3.4667vw;
+        --size-14: 3.7333vw;
+        --size-15: 4.0000vw;
+        --size-16: 4.2667vw;
+        --size-17: 4.5333vw;
+        --size-18: 4.8000vw;
+        --size-19: 5.0667vw;
+        --size-20: 5.3333vw;
+        --size-21: 5.6000vw;
+        --size-22: 5.8667vw;
+        --size-23: 6.1333vw;
+        --size-24: 6.4000vw;
+        --size-25: 6.6667vw;
+        --size-26: 6.9333vw;
+        --size-27: 7.2000vw;
+        --size-28: 7.4667vw;
+        --size-29: 7.7333vw;
+        --size-30: 8.0000vw;
+        --size-31: 8.2667vw;
+        --size-32: 8.5333vw;
+        --size-33: 8.7999vw;
+        --size-34: 9.0667vw;
+        --size-35: 9.3333vw;
+        --size-36: 9.5999vw;
+        --size-37: 9.8667vw;
+        --size-38: 10.1333vw;
+        --size-39: 10.3999vw;
+        --size-40: 10.6667vw;
+        --size-41: 10.9333vw;
+        --size-42: 11.1999vw;
+        --size-43: 11.4667vw;
+        --size-44: 11.7333vw;
+        --size-45: 12.0000vw;
+        --size-46: 12.2667vw;
+        --size-47: 12.5333vw;
+        --size-48: 12.8000vw;
+        --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-55: 14.6667vw;
+        --size-56: 14.9333vw;
+        --size-57: 15.2000vw;
+        --size-58: 15.4667vw;
+        --size-59: 15.7333vw;
+        --size-60: 16.0000vw;
+        --size-61: 16.2667vw;
+        --size-62: 16.5333vw;
+        --size-63: 16.8000vw;
+        --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-70: 18.6667vw;
+        --size-71: 18.9333vw;
+        --size-72: 19.2000vw;
+        --size-73: 19.4667vw;
+        --size-74: 19.7333vw;
+        --size-75: 20.0000vw;
+        --size-76: 20.2667vw;
+        --size-77: 20.5333vw;
+        --size-78: 20.8000vw;
+        --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-85: 22.6667vw;
+        --size-86: 22.9333vw;
+        --size-87: 23.1999vw;
+        --size-88: 23.4667vw;
+        --size-89: 23.7333vw;
+        --size-90: 24.0000vw;
+        --size-91: 24.2667vw;
+        --size-92: 24.5333vw;
+        --size-93: 24.8000vw;
+        --size-94: 25.0667vw;
+        --size-95: 25.3333vw;
+        --size-96: 25.6000vw;
+        --size-97: 25.8667vw;
+        --size-98: 26.1333vw;
+        --size-99: 26.4000vw;
+        --size-100: 26.6667vw;
+        --size-104: 27.7333vw;
+        --size-105: 28.0000vw;
+        --size-106: 28.2667vw;
+        --size-107: 28.5333vw;
+        --size-108: 28.8000vw;
+        --size-112: 29.8667vw;
+        --size-115: 30.6667vw;
+        --size-117: 31.2000vw;
+        --size-119: 31.7333vw;
+        --size-120: 32.0000vw;
+        --size-122: 32.5333vw;
+        --size-124: 33.0667vw;
+        --size-128: 34.1333vw;
+        --size-130: 34.6667vw;
+        --size-132: 35.1999vw;
+        --size-133: 35.4667vw;
+        --size-134: 35.7333vw;
+        --size-135: 36.0000vw;
+        --size-140: 37.3333vw;
+        --size-141: 37.6000vw;
+        --size-142: 37.8667vw;
+        --size-145: 38.6667vw;
+        --size-148: 39.4667vw;
+        --size-150: 40.0000vw;
+        --size-153: 40.8000vw;
+        --size-154: 41.0667vw;
+        --size-155: 41.3333vw;
+        --size-160: 42.6667vw;
+        --size-161: 42.9333vw;
+        --size-165: 44.0000vw;
+        --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-178: 47.4667vw;
+        --size-179: 47.7333vw;
+        --size-180: 48.0000vw;
+        --size-181: 48.2667vw;
+        --size-186: 49.6000vw;
+        --size-187: 49.8667vw;
+        --size-188: 50.1333vw;
+        --size-190: 50.6667vw;
+        --size-192: 51.2000vw;
+        --size-194: 51.7333vw;
+        --size-199: 53.0667vw;
+        --size-200: 53.3333vw;
+        --size-204: 54.4000vw;
+        --size-205: 54.6667vw;
+        --size-208: 55.4667vw;
+        --size-210: 55.7333vw;
+        --size-216: 57.7333vw;
+        --size-217: 58.0000vw;
+        --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-230: 61.3333vw;
+        --size-232: 62.0000vw;
+        --size-234: 62.4000vw;
+        --size-238: 63.4667vw;
+        --size-240: 64.0000vw;
+        --size-245: 65.3333vw;
+        --size-248: 66.1333vw;
+        --size-253: 67.4667vw;
+        --size-255: 68.0000vw;
+        --size-256: 68.2667vw;
+        --size-257: 68.5333vw;
+        --size-259: 68.8000vw;
+        --size-260: 69.0667vw;
+        --size-262: 69.6000vw;
+        --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-280: 74.6667vw;
+        --size-283: 75.4667vw;
+        --size-287: 76.5333vw;
+        --size-288: 76.8000vw;
+        --size-293: 78.1333vw;
+        --size-294: 78.4000vw;
+        --size-297: 79.2000vw;
+        --size-300: 80.0000vw;
+        --size-304: 81.0667vw;
+        --size-313: 83.4667vw;
+        --size-315: 84.0000vw;
+        --size-317: 84.5333vw;
+        --size-322: 85.8667vw;
+        --size-323: 86.1333vw;
+        --size-327: 87.2000vw;
+        --size-329: 87.7333vw;
+        --size-330: 88.0000vw;
+        --size-336: 89.6000vw;
+        --size-337: 89.8667vw;
+        --size-340: 90.6667vw;
+        --size-342: 91.2000vw;
+        --size-343: 91.4667vw;
+        --size-352: 94.1333vw;
+        --size-354: 94.4000vw;
+        --size-356: 95.1999vw;
+        --size-357: 95.4667vw;
+        --size-360: 96.0000vw;
+        --size-362: 96.5333vw;
+        --size-367: 97.8667vw;
+        --size-372: 99.4667vw;
+        --size-373: 99.7333vw;
+        --size-378: 100.8000vw;
+        --size-388: 103.4667vw;
+        --size-390: 103.9999vw;
+        --size-396: 105.5999vw;
+        --size-402: 107.2000vw;
+        --size-404: 107.7333vw;
+        --size-406: 108.2667vw;
+        --size-416: 111.0667vw;
+        --size-429: 114.4000vw;
+        --size-430: 114.6667vw;
+        --size-432: 115.2000vw;
+        --size-442: 117.8667vw;
+        --size-450: 120.0000vw;
+        --size-453: 120.8000vw;
+        --size-460: 122.6667vw;
+        --size-462: 123.1999vw;
+        --size-466: 124.2667vw;
+        --size-468: 125.0000vw;
+        --size-471: 125.5999vw;
+        --size-474: 126.4000vw;
+        --size-479: 127.6800vw;
+        --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-514: 137.0667vw;
+        --size-526: 140.2667vw;
+        --size-531: 141.6000vw;
+        --size-539: 143.7333vw;
+        --size-542: 144.5333vw;
+        --size-544: 145.0667vw;
+        --size-547: 146.1333vw;
+        --size-553: 147.4667vw;
+        --size-560: 149.3333vw;
+        --size-565: 150.6667vw;
+        --size-579: 154.4000vw;
+        --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-634: 169.0667vw;
+        --size-636: 169.6000vw;
+        --size-640: 170.6667vw;
+        --size-647: 172.5333vw;
+        --size-648: 172.8000vw;
+        --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-695: 185.3333vw;
+        --size-700: 186.6667vw;
+        --size-710: 189.3333vw;
+        --size-715: 190.6667vw;
+        --size-718: 191.2000vw;
+        --size-720: 192.0000vw;
+        --size-721: 192.2667vw;
+        --size-726: 193.6000vw;
+        --size-735: 196.0000vw;
+        --size-740: 197.3333vw;
+        --size-750: 199.9999vw;
+        --size-757: 201.8667vw;
+        --size-770: 205.3333vw;
+        --size-774: 206.4000vw;
+        --size-775: 206.6667vw;
+        --size-780: 208.0000vw;
+        --size-788: 210.1333vw;
+        --size-791: 210.8000vw;
+        --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-972: 258.9333vw;
+        --size-973: 259.1999vw;
+        --size-992: 264.5333vw;
+        --size-1000: 266.6667vw;
+        --size-1022: 272.5333vw;
+        --size-1044: 278.4000vw;
+        --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-1400: 373.3333vw;
+        --size-1440: 384.0000vw;
+        --size-1438: 383.4667vw;
+        --size-1494: 400.0000vw;
+        --size-1540: 411.1111vw;
+        --size-1552: 414.1333vw;
+        --size-1596: 425.5556vw;
+        --size-1620: 432.0000vw;
+        --size-1860: 496.0000vw;
     }
 
     @include responseTo("pc") {
@@ -481,6 +500,7 @@
         --size-141: 141px;
         --size-142: 142px;
         --size-145: 145px;
+        --size-147: 147px;
         --size-148: 148px;
         --size-150: 150px;
         --size-153: 153px;
@@ -556,8 +576,10 @@
         --size-327: 327px;
         --size-329: 329px;
         --size-330: 330px;
+        --size-334: 334px;
         --size-336: 336px;
         --size-337: 337px;
+        --size-338: 338px;
         --size-340: 340px;
         --size-342: 342px;
         --size-343: 343px;
@@ -573,6 +595,7 @@
         --size-378: 378px;
         --size-388: 388px;
         --size-390: 390px;
+        --size-394: 394px;
         --size-396: 396px;
         --size-402: 402px;
         --size-404: 404px;
@@ -593,11 +616,13 @@
         --size-479: 479px;
         --size-485: 485px;
         --size-487: 487px;
+        --size-493: 493px;
         --size-494: 494px;
         --size-497: 497px;
         --size-500: 500px;
         --size-513: 513px;
         --size-514: 514px;
+        --size-520: 520px;
         --size-526: 526px;
         --size-531: 531px;
         --size-539: 539px;
@@ -658,7 +683,9 @@
         --size-1022: 1022px;
         --size-1044: 1044px;
         --size-1065: 1065px;
+        --size-1079: 1079px;
         --size-1116: 1116px;
+        --size-1128: 1128px;
         --size-1158: 1158px;
         --size-1189: 1189px;
         --size-1330: 1330px;
@@ -813,6 +840,7 @@
         --size-141: 7.3438vw;
         --size-142: 7.3958vw;
         --size-145: 7.5521vw;
+        --size-147: 7.6562vw;
         --size-148: 7.7083vw;
         --size-150: 7.8125vw;
         --size-153: 7.9792vw;
@@ -888,8 +916,10 @@
         --size-327: 17.0313vw;
         --size-329: 17.1250vw;
         --size-330: 17.1875vw;
+        --size-334: 17.3958vw;
         --size-336: 17.5000vw;
         --size-337: 17.5417vw;
+        --size-338: 17.6041vw;
         --size-340: 17.6563vw;
         --size-342: 17.7604vw;
         --size-343: 17.8125vw;
@@ -905,6 +935,7 @@
         --size-378: 19.6875vw;
         --size-388: 20.1875vw;
         --size-390: 20.2604vw;
+        --size-394: 20.5208vw;
         --size-396: 20.5625vw;
         --size-402: 20.9375vw;
         --size-404: 20.9903vw;
@@ -925,11 +956,13 @@
         --size-479: 24.9063vw;
         --size-485: 25.2604vw;
         --size-487: 25.3646vw;
+        --size-493: 25.677vw;
         --size-494: 25.7292vw;
         --size-497: 25.8333vw;
         --size-500: 25.9375vw;
         --size-513: 26.6667vw;
         --size-514: 26.7188vw;
+        --size-520: 27.0833vw;
         --size-526: 27.3438vw;
         --size-531: 27.6042vw;
         --size-539: 27.9688vw;
@@ -990,7 +1023,9 @@
         --size-1022: 53.2292vw;
         --size-1044: 54.3750vw;
         --size-1065: 55.4688vw;
+        --size-1079: 56.1979vw;
         --size-1116: 58.0625vw;
+        --size-1128: 58.75vw;
         --size-1158: 60.3125vw;
         --size-1189: 61.9896vw;
         --size-1330: 69.2708vw;

assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4953057 */
-  src: url('iconfont.woff2?t=1750406138425') format('woff2'),
-       url('iconfont.woff?t=1750406138425') format('woff'),
-       url('iconfont.ttf?t=1750406138425') format('truetype');
+  src: url('iconfont.woff2?t=1750756422610') format('woff2'),
+       url('iconfont.woff?t=1750756422610') format('woff'),
+       url('iconfont.ttf?t=1750756422610') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-top_:before {
+  content: "\e615";
+}
+
+.icon-normal:before {
+  content: "\e7e3";
+}
+
+.icon-suoshuhangye-01:before {
+  content: "\e699";
+}
+
+.icon-weizhi:before {
+  content: "\e7e6";
+}
+
+.icon-sousuo:before {
+  content: "\e6d4";
+}
+
 .icon-24gf-phoneLoudspeaker:before {
   content: "\e969";
 }

assets/font/iconfont.json

@@ -5,6 +5,41 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "11211977",
+      "name": "top_01",
+      "font_class": "top_",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "24304764",
+      "name": "选择日期",
+      "font_class": "normal",
+      "unicode": "e7e3",
+      "unicode_decimal": 59363
+    },
+    {
+      "icon_id": "40345828",
+      "name": "所属行业",
+      "font_class": "suoshuhangye-01",
+      "unicode": "e699",
+      "unicode_decimal": 59033
+    },
+    {
+      "icon_id": "435979",
+      "name": "位置",
+      "font_class": "weizhi",
+      "unicode": "e7e6",
+      "unicode_decimal": 59366
+    },
+    {
+      "icon_id": "16392826",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e6d4",
+      "unicode_decimal": 59092
+    },
     {
       "icon_id": "7568878",
       "name": "24gf-phoneLoudspeaker",

components/Footer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-footer">
+  <div class="app-footer ">
     <div class="footer_l">
       <div class="footer_l_img">
         <img src="/assets/images/img3.png" alt="">
@@ -16,12 +16,12 @@
     <div class="footer_nav">
       <div class="footer_nav_title">Quick Links</div>
       <div class="footer_nav_list">
-        <a href="">Home</a>
-        <a href="">Reports Custom</a>
-        <a href="">Research Industry</a>
-        <a href="">News</a>
-        <a href="">About Us</a>
-        <a href="">Contact</a>
+        <a href="/">Home</a>
+        <a href="/report-industries">Reports Custom</a>
+        <a href="/bulletin/bulletin-think-tank">Research Industry</a>
+        <a href="/news-categories">News</a>
+        <a href="/aboutUs">About Us</a>
+        <a href="/contactUs">Contact</a>
       </div>
       <div class="footer_nav_contactUs">
         <div></div>
@@ -61,6 +61,7 @@
       </div>
     </div>
   </div>
+  <div class="app-footer_copyright">Copyright © WENKH.com All rights reserved.</div>
 </template>
 
 <script lang="ts" setup>
@@ -78,6 +79,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import "~/assets/css/tool.scss";
 .app-footer {
   padding: 0 var(--size-145);
   background: #ffffff;
@@ -181,4 +183,65 @@ onMounted(() => {
     }
   }
 }
+.app-footer_copyright {
+  width: 100%;
+  background: linear-gradient(90deg, #fc8dc3 0%, #749c56 0%, #42a088 100%);
+  font-size: 14px;
+  font-family: ArialMT;
+  text-align: center;
+  color: #ffffff;
+  line-height: 30px;
+  padding: 15px;
+}
+@include responseTo("phone") {
+  .app-footer {
+    display: block;
+    padding: var(--size-20);
+    .footer_l {
+      width: 100%;
+      padding-bottom: 0;
+      .footer_l_img {
+        img {
+          width: 100%;
+        }
+      }
+      .footer_l_list {
+        text-align: center;
+        img {
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+    .footer_nav {
+      text-align: center;
+      padding-top: var(--size-10);
+      .footer_nav_list a {
+        text-align: center;
+        margin-top: var(--size-5);
+      }
+    }
+    .footer_contactUs {
+      padding-top: var(--size-10);
+      .footer_contactUs_title {
+        text-align: center;
+        margin-bottom: var(--size-10);
+      }
+      .footer_contactUs_item {
+        margin-left: var(--size-30);
+      }
+    }
+    .footer_r_list {
+      display: flex;
+      justify-content: space-between;
+      img {
+        margin-right: 0 !important;
+      }
+    }
+    .footer_r {
+      padding-top: var(--size-20);
+    }
+  }
+}
 </style>

components/Header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-header">
+  <div class="app-header pc" :class="{bg1:route.path!='/'}">
     <div class="top">
       <a> <span class="iconfont icon-youxiang"></span> market@aporesearch.com</a>
       <a><span class="iconfont icon-lianxidianhua"></span> 1-332-251-9412</a>
@@ -35,13 +35,13 @@
           <div class="search_l">
             <n-dropdown trigger="hover" :keyboard="false" :options="selectTypeList">
               <div class="search_l_type">
-                Industry News
+                {{ selectTypeLabel }}
                 <span class="iconfont icon-dkw_guanbi-"></span>
               </div>
             </n-dropdown>
           </div>
           <div class="search_c">
-            <n-input v-model:value="searchVal" @keydown.enter="handleSearch()" type="text" clearable placeholder="Please Enter Keywords" />
+            <n-input v-model:value="keyword" @keydown.enter="handleSearch()" type="text" clearable placeholder="Please Enter Keywords" />
           </div>
           <div class="search_r" @click="handleSearch()">
             Search
@@ -49,13 +49,64 @@
         </div>
       </div>
     </div>
-    <n-modal :show="signInVisible" preset="dialog" :title="signInTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="signInVisible = false" :class="{ 'login-dialog': !pcShow }">
-      <SignInLogin @closeSginDialog="closeSginDialog" v-if="sginType == 'login'"></SignInLogin>
-      <SignInRegister @closeSginDialog="closeSginDialog" v-if="sginType == 'register'"></SignInRegister>
-      <SignInForgot @closeSginDialog="closeSginDialog" v-if="sginType == 'forgot'"></SignInForgot>
-    </n-modal>
-    <n-modal v-model:show="logoutVisible" preset="dialog" title="提示" :showIcon="false" content="确认退出登录吗?" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
   </div>
+  <div class="headPhone">
+    <div class="head_t">
+      <div class="head_t_l">
+        <a href="/">
+          <img src="/assets/images/img2.png" alt="" />
+        </a>
+      </div>
+      <div class="head_t_r">
+        <n-dropdown placement="bottom-start" class="en" trigger="click" size="small" :options="mobileMenu" @select="chooseMenu">
+          <img src="/assets/images/menu.png" alt="" />
+        </n-dropdown>
+      </div>
+    </div>
+    <div class="head_c_box">
+      <div class="head_c">
+        <div class="head_c_l">
+          <n-dropdown trigger="click" :options="selectTypeList" @select="selectValueFun" placement="bottom-start" :class="language">
+            <div style="color: #000">
+              {{ selectTypeLabel }} <span class="iconfont icon-dkw_guanbi-"></span>
+            </div>
+          </n-dropdown>
+        </div>
+        <div class="head_c_c">
+          <n-input v-model:value="keyword" type="text" clearable :placeholder="$t('report.content.keyword')" />
+        </div>
+        <div class="head_c_r" @click="handleSearch()">
+          Search
+        </div>
+      </div>
+    </div>
+    <div class="head_b">
+      <div>
+        <div class="userInfo" v-if="userStore.getToken">
+          <span class="username">
+            <a href="/personalCenter/myInfo">
+              {{ userStore.getUserInfo?.name }}
+            </a>
+          </span>
+          <span>|</span>
+          <span class="logout" @click="handleLogout">{{
+            $t("common.login.logout")
+          }}</span>
+        </div>
+        <div v-else class="head_t_r_login">
+          <span @click="openModel(3)">
+            Login</span>/
+          <span @click="openModel(2)">Register</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-modal :show="signInVisible" preset="dialog" :title="signInTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="signInVisible = false" :class="{ 'login-dialog': !pcShow }">
+    <SignInLogin @closeSginDialog="closeSginDialog" v-if="sginType == 'login'"></SignInLogin>
+    <SignInRegister @closeSginDialog="closeSginDialog" v-if="sginType == 'register'"></SignInRegister>
+    <SignInForgot @closeSginDialog="closeSginDialog" v-if="sginType == 'forgot'"></SignInForgot>
+  </n-modal>
+  <n-modal v-model:show="logoutVisible" preset="dialog" title="提示" :showIcon="false" content="确认退出登录吗?" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
 </template>
 
 <script lang="ts" setup>
@@ -116,7 +167,10 @@ const renderIconC4 = (icon: Component) => {
     });
   };
 };
-
+const selectValueFun = (value: any) => {
+  selectTypeValue.value = selectTypeList.value[value].value;
+  selectTypeLabel.value = selectTypeList.value[value].label;
+};
 // const renderIconLabel = (option: DropdownOption) => {
 //   return h('a',{ onclick: () => chooseMenu, target: '_blank' },{ default: () => option.label});
 // }
@@ -126,7 +180,7 @@ const aboutOptions = [] as any; //关于我们
 const bulletinOptions = [] as any; // 简报智库
 
 const mobileMenu = [
-  { label: t("common.navigate.home"), key: "home", name: "home" },
+  { label: t("common.navigate.home"), key: "home", name: "index" },
   {
     label: t("common.navigate.report"),
     key: "reports",
@@ -158,20 +212,23 @@ const mobileMenu = [
   //   name: "bulletin",
   // },
 ];
-const selectTypeValue = ref();
+const selectTypeValue = ref("reports");
+const selectTypeLabel = ref(t("common.navigate.report"));
 const selectTypeList = ref([
   {
     label: t("common.navigate.report"),
     value: "reports",
+    key: 0,
   },
   {
     label: t("common.navigate.news"),
     value: "newsCategories",
+    key: 1,
   },
-  {
-    label: t("common.navigate.bulletin"),
-    value: "bulletinThinkTank",
-  },
+  //{
+  // label: t("common.navigate.bulletin"),
+  // value: "bulletinThinkTank",
+  //},
 ]);
 const signInVisible = ref<boolean>(false);
 const signInTitle = ref<string>("");
@@ -184,7 +241,7 @@ const isLogin = computed(() =>
 );
 
 const jumpLink = (url: string) => {
-  return (language.value == "en" ? "/en" : "") + url;
+  return url;
 };
 watch(
   () => userStore.getSearchType,
@@ -281,12 +338,11 @@ function chooseMenu(key: string | number, option: DropdownOption) {
       name: option.name,
       params: { marketType: key, lang: language.value },
     });
-  } else if ("home" === option.name) {
-    // router.push({
-    //   name: language.value === "" ? "home" : "homeEn",
-    //   params: { marketType: key, lang: language.value },
-    // });
-    jumpLink("/");
+  } else if ("index" === option.name) {
+    router.push({
+      name: "index___en",
+      params: { marketType: key, lang: language.value },
+    });
   } else {
     router.push({ name: option.name, params: { lang: language.value } });
   }
@@ -453,17 +509,24 @@ getDictListData();
 </script>
 
 <style lang='scss' >
+@import "~/assets/css/tool.scss";
+.headPhone {
+  display: none;
+}
+.bg1 {
+  background: #37404a !important;
+}
 .app-header {
   z-index: 9;
   width: 100%;
   position: fixed;
+  background: rgba(6, 17, 29, 0.5);
   left: 0;
   top: 0;
   .top {
     display: flex;
     align-items: center;
     justify-content: end;
-    background: rgba(6, 17, 29, 0.5);
     padding: 0 var(--size-60);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     > a,
@@ -492,7 +555,6 @@ getDictListData();
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: rgba(6, 17, 29, 0.5);
     padding: 0 var(--size-60);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     height: var(--size-85);
@@ -567,4 +629,151 @@ getDictListData();
   font-size: var(--size-16) !important;
   --n-text-color-hover: none !important;
 }
+@include responseTo("phone") {
+  .pc {
+    display: none;
+  }
+  .headPhone {
+    background: rgba(6, 17, 29, 0.5);
+    z-index: 9;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-size: cover;
+    padding: var(--size-10) var(--size-20);
+    display: block;
+    .head_t {
+      display: flex;
+      justify-content: space-between;
+      .head_t_l {
+        font-size: 0;
+        img {
+          height: var(--size-36);
+        }
+      }
+      .head_t_r {
+        img {
+          width: var(--size-36);
+          height: var(--size-36);
+        }
+      }
+    }
+    .head_c {
+      height: var(--size-30);
+      margin: var(--size-10) auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #ffffff;
+      border: 1px solid none;
+      overflow: hidden;
+      border-radius: var(--size-4);
+      .head_c_l {
+        font-size: var(--size-12);
+        color: #808080;
+        padding-left: var(--size-7);
+        position: relative;
+        padding-right: var(--size-6);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        .icon-dkw_guanbi- {
+          transform: rotateZ(90deg);
+          display: inline-block;
+        }
+        &::after {
+          content: "";
+          display: block;
+          width: 1px;
+          height: var(--size-16);
+          background: #cccccc;
+          position: absolute;
+          right: 0;
+        }
+        .icon-jiantou {
+          display: inline-block;
+          transform: rotateZ(-90deg);
+          font-size: var(--size-10);
+          color: #000000;
+          vertical-align: text-bottom;
+        }
+      }
+      .head_c_c {
+        flex: 1;
+        padding: 0 var(--size-9);
+        .n-input {
+          --n-border: none !important;
+        }
+      }
+      .head_c_r {
+        width: var(--size-53);
+        height: var(--size-30);
+        font-size: var(--size-12);
+        background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        .icon-sousuo {
+          font-size: var(--size-12);
+          margin-right: var(--size-3);
+        }
+      }
+      .n-input {
+        font-size: var(--size-12) !important;
+        ::v-deep .n-input-wrapper {
+          padding: 0 !important;
+        }
+      }
+    }
+
+    .head_b {
+      display: flex;
+      justify-content: flex-end;
+      .head_b_lang {
+        font-size: var(--size-12);
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        margin-right: var(--size-30);
+        cursor: pointer;
+        .head_b_lang_l {
+          width: var(--size-13);
+          height: var(--size-13);
+          margin-right: var(--size-4);
+        }
+        .head_b_lang_r {
+          width: var(--size-9);
+          height: var(--size-5);
+          margin-left: var(--size-5);
+          margin-right: var(--size-10);
+        }
+      }
+      .userInfo {
+        display: flex;
+        align-items: center;
+        .username {
+          font-size: var(--size-14);
+          color: #fff;
+        }
+        span {
+          margin-right: var(--size-5);
+          cursor: pointer;
+          color: #fff;
+          font-size: var(--size-14);
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+      .head_t_r_login {
+        font-size: var(--size-12);
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+}
 </style>

components/connectUs/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="customBox">
+    <div class="customBox_title">No Relevant Report Found? Please Contact Us</div>
+    <div class="customBox_content">Need more information? Our team is ready to assist.Reach out today for expert support tailored to your needs.</div>
+    <a class="customBox_btn">Custom Reports</a>
+    <img class="customBox_img" src="/assets/images/img1.png" alt="">
+  </div>
+  <!-- <reportPop :showModal="showModal" :modalType="modalType" :type="submitType" @close="showModal=false" /> -->
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+const showModal = ref(false);
+const modalType = ref(1);
+const submitType = ref();
+const openModel = (index, type) => {
+  submitType.value = type;
+  modalType.value = index;
+  showModal.value = true;
+}
+</script>
+
+<style lang='scss' scoped>
+@import "~/assets/css/tool.scss";
+.customBox {
+  background: url("@/assets/images/bg1.png");
+  padding: var(--size-105) var(--size-145) var(--size-120);
+  position: relative;
+  .customBox_title {
+    font-size: var(--size-48);
+    font-family: Impact, Impact-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #1a1a1a;
+  }
+  .customBox_content {
+    font-size: var(--size-18);
+    font-family: Arial, Arial-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #1a1a1a;
+  }
+  .customBox_btn {
+    display: block;
+    width: var(--size-227);
+    height: var(--size-60);
+    background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
+    border-radius: var(--size-8);
+    text-align: center;
+    line-height: var(--size-60);
+    font-size: var(--size-18);
+    color: #ffffff;
+    margin: var(--size-40) 0 0;
+    cursor: pointer;
+  }
+  .customBox_img {
+    width: var(--size-362);
+    height: var(--size-553);
+    position: absolute;
+    bottom: 0;
+    right: var(--size-145);
+  }
+}
+@include responseTo("phone") {
+  .customBox {
+    padding: var(--size-30);
+    .customBox_title {
+      font-size: var(--size-24);
+      font-weight: 700;
+    }
+    .customBox_content {
+      font-size: var(--size-14);
+    }
+    .customBox_btn {
+      width: var(--size-150);
+      height: var(--size-40);
+      line-height: var(--size-40);
+      font-size: var(--size-14);
+    }
+    .customBox_img {
+      width: var(--size-181);
+      height: var(--size-276);
+      right: 0;
+      display: none;
+    }
+  }
+}
+</style>

pages/index.vue

@@ -114,7 +114,7 @@
       <div class="hotBox_title">Hot News</div>
       <div class="hotBox_list">
         <template v-for="(v,i) in markets" :key="i">
-          <a class="hotBox_list_item" :class="{active:i===0}" v-if="i<3">
+          <a class="hotBox_list_item" v-if="i<3">
             <img :src="BaseUrl + '/fileupload/' + v.filePath + v.fileName" alt="">
             <div class="hotBox_list_item_box">
               <div class="hotBox_list_item_box_date">{{formatDateEn(v.publishDate)}}</div>
@@ -123,7 +123,7 @@
           </a>
         </template>
       </div>
-      <div class="hotBox_btn">Know More</div>
+      <a class="hotBox_btn" href="/news-categories">Know More</a>
     </div>
     <div class="researchBox">
       <div class="researchBox_title">Research Advantages</div>
@@ -149,12 +149,7 @@
         </n-carousel>
       </div>
     </div>
-    <div class="customBox">
-      <div class="customBox_title">No Relevant Report Found? Please Contact Us</div>
-      <div class="customBox_content">Need more information? Our team is ready to assist.Reach out today for expert support tailored to your needs.</div>
-      <div class="customBox_btn">Custom Reports</div>
-      <img class="customBox_img" src="/assets/images/img1.png" alt="">
-    </div>
+    <ConnectUs />
   </div>
 </template>
 
@@ -342,6 +337,7 @@ useHead({
 
 
 <style scoped lang="scss">
+@import "~/assets/css/tool.scss";
 .home {
   .home_t {
     height: calc(100vh - var(--size-265));
@@ -709,22 +705,23 @@ useHead({
             -webkit-box-orient: vertical;
           }
         }
-      }
-      .active {
-        .hotBox_list_item_box {
-          border-bottom: var(--size-7) solid #509f7a;
-          .hotBox_list_item_box_date {
-            color: #509f7a;
-            border-left: 1px solid #509f7a;
-            border-right: 1px solid #509f7a;
-          }
-          .hotBox_list_item_box_text {
-            color: #509f7a;
+        &:hover {
+          .hotBox_list_item_box {
+            border-bottom: var(--size-7) solid #509f7a;
+            .hotBox_list_item_box_date {
+              color: #509f7a;
+              border-left: 1px solid #509f7a;
+              border-right: 1px solid #509f7a;
+            }
+            .hotBox_list_item_box_text {
+              color: #509f7a;
+            }
           }
         }
       }
     }
     .hotBox_btn {
+      display: block;
       width: var(--size-217);
       height: var(--size-60);
       background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
@@ -761,7 +758,7 @@ useHead({
           height: var(--size-70);
           margin: auto;
         }
-        .img {
+        .imga {
           display: none;
         }
         div {
@@ -819,42 +816,221 @@ useHead({
       }
     }
   }
-  .customBox {
-    background: url("@/assets/images/bg1.png");
-    padding: var(--size-105) var(--size-145) var(--size-120);
-    position: relative;
-    .customBox_title {
-      font-size: var(--size-48);
-      font-family: Impact, Impact-Regular;
-      font-weight: 400;
-      text-align: left;
-      color: #1a1a1a;
+}
+@include responseTo("phone") {
+  .home {
+    .home_t {
+      height: 100vh;
+      .desc {
+        padding: 30px;
+        .desc_title {
+          font-size: 24px;
+        }
+        .desc_tig {
+          font-size: 12px;
+        }
+      }
     }
-    .customBox_content {
-      font-size: var(--size-18);
-      font-family: Arial, Arial-Regular;
-      font-weight: 400;
-      text-align: left;
-      color: #1a1a1a;
+    .numList {
+      padding: 0 30px;
+      display: block;
+      .item {
+        width: 100% !important;
+        height: auto;
+        padding: 20px 0;
+        text-align: center;
+        img {
+          margin: auto;
+        }
+        &::after {
+          display: none;
+        }
+      }
     }
-    .customBox_btn {
-      width: var(--size-227);
-      height: var(--size-60);
-      background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
-      border-radius: var(--size-8);
-      text-align: center;
-      line-height: var(--size-60);
-      font-size: var(--size-18);
-      color: #ffffff;
-      margin: var(--size-40) 0 0;
-      cursor: pointer;
+    .marketBox {
+      padding: var(--size-30) var(--size-30) var(--size-50);
+      .marketBox_title {
+        font-size: var(--size-24);
+        font-weight: 700;
+      }
+      .img {
+        .carousel-img {
+          height: auto;
+        }
+        .desc {
+          left: 20px;
+          .desc_title {
+            width: 100%;
+            font-size: var(--size-16);
+            line-height: var(--size-18);
+          }
+          .desc_btn {
+            width: var(--size-130);
+            height: var(--size-45);
+            border-radius: var(--size-4);
+            text-align: center;
+            line-height: var(--size-45);
+            font-size: var(--size-14);
+            color: #ffffff;
+            margin: var(--size-15) auto;
+          }
+        }
+
+        .direction {
+          width: var(--size-36);
+          height: var(--size-36);
+          span {
+            font-size: 21px;
+          }
+        }
+        .carousel_l {
+          left: -18px;
+        }
+        .carousel_r {
+          right: -18px;
+        }
+      }
     }
-    .customBox_img {
-      width: var(--size-362);
-      height: var(--size-553);
-      position: absolute;
-      bottom: 0;
-      right: var(--size-145);
+    .popularBox {
+      display: block;
+      padding: 30px;
+      .popularBox_l {
+        margin-right: 0;
+        .popularBox_l_title {
+          display: block;
+          .popularBox_l_title_l {
+            font-size: 24px;
+            line-height: 29px;
+            margin-right: 0;
+            font-weight: 700;
+          }
+          .popularBox_l_title_r {
+            display: inline-block;
+            font-size: var(--size-14);
+          }
+        }
+        .popularBox_l_list {
+          justify-content: space-between;
+          .popularBox_l_list_item {
+            width: 48%;
+            margin: 0 !important;
+            > img {
+              width: 100%;
+              height: auto;
+            }
+            .popularBox_l_list_item_box {
+              padding: var(--size-10) var(--size-10) var(--size-18);
+              .popularBox_l_list_item_box_title {
+                font-size: var(--size-14);
+                line-height: var(--size-14);
+                margin-bottom: var(--size-17);
+              }
+              .popularBox_l_list_item_box_btn {
+                display: block;
+                width: var(--size-80);
+                height: var(--size-24);
+                border-radius: var(--size-4);
+                font-size: var(--size-12);
+                line-height: var(--size-24);
+              }
+            }
+          }
+        }
+      }
+      .popularBox_r {
+        .popularBox_r_title {
+          font-size: var(--size-24);
+          line-height: var(--size-30);
+          font-weight: 700;
+          text-align: left;
+          margin-top: var(--size-20);
+        }
+        .popularBox_r_list {
+          margin-top: var(--size-22);
+        }
+        .popularBox_r_list {
+          display: flex;
+          > div {
+            width: 50%;
+            img {
+              width: 100%;
+              height: var(--size-105);
+              display: block;
+            }
+            div {
+              width: 100%;
+              font-size: var(--size-12);
+              padding: 0 0 var(--size-6);
+            }
+          }
+        }
+      }
+    }
+    .hotBox {
+      padding: 30px;
+      .hotBox_title {
+        font-size: var(--size-24);
+      }
+      .hotBox_list {
+        display: block;
+        .hotBox_list_item {
+          width: var(--size-257);
+          margin: auto !important;
+          margin-bottom: var(--size-20) !important;
+          img {
+            width: var(--size-257);
+            height: var(--size-186);
+          }
+          .hotBox_list_item_box {
+            padding: var(--size-15) var(--size-9) var(--size-20);
+            .hotBox_list_item_box_date {
+              font-size: var(--size-12);
+              line-height: var(--size-16);
+            }
+            .hotBox_list_item_box_text {
+              font-size: var(--size-14);
+            }
+          }
+        }
+      }
+    }
+    .researchBox {
+      padding: var(--size-30);
+      .researchBox_title {
+        font-size: var(--size-24);
+      }
+      .researchBox_list {
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .researchBox_list_item {
+          width: 48%;
+          height: var(--size-166);
+          background: #fafafa;
+          border-radius: var(--size-8);
+          padding-top: var(--size-28);
+          margin-bottom: var(--size-20);
+        }
+      }
+    }
+    .customersBox {
+      padding: var(--size-30) var(--size-10) !important;
+      .customersBox_title {
+        font-size: var(--size-24);
+      }
+      .customersBox_subTitle {
+        font-size: var(--size-14);
+      }
+      .customersBox_carousel {
+        .customersBox_carousel_item {
+          flex-wrap: wrap;
+          align-items: center;
+          img {
+            width: var(--size-105);
+            height: auto;
+            margin-bottom: var(--size-20);
+          }
+        }
+      }
     }
   }
 }

pages/report-industries/index.vue

@@ -1,275 +1,131 @@
 <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="report-nav-container top-container">
-        <n-icon :component="IosFiling" size="40" style="vertical-align: middle" />
-        <span>{{ t("common.navigate.report") }}</span>
+  <div class="page">
+    <div class="top">
+      <img src="@/assets/images/report/img1.png" alt="">
+      <div>
+        <div class="top_title">Reports</div>
+        <div class="top_location">
+          <span class="iconfont icon-weizhi"></span>
+          Current Location ： Home <span class="iconfont icon-dkw_guanbi-"></span> <span>Reports</span>
+        </div>
       </div>
     </div>
-    <div class="page-nav">
-      <div class="report-page-nav page-nav-container">
-        <div class="nav-txt wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-          <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="IosFiling" />{{ t("common.navigate.report") }}
-            </n-breadcrumb-item>
-          </n-breadcrumb>
+    <div class="box">
+      <div class="box_l">
+        <div class="box_l_title">
+          <div>Industry Segment</div>
+          <div>
+            <span class="iconfont icon-shouqi1"></span>
+          </div>
         </div>
-        <div class="content">
-          <div class="content-search">
-            <div class="report-category wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
-              <div class="report-category-title">
-                {{ t("report.category.fsttitle") }}
-              </div>
-              <ul>
-                <template v-for="item in categories" :key="item">
-                  <li>
-                    <a>
-                      <span class="category-name">{{ item.marketTypeName }}({{ item.marketCount }})</span>
-                      <span class="category-check">
-                        <n-checkbox size="large" :checked="item.marketType === record.marketType" @update:checked="
-                            handleCategory(
-                              $event,
+        <div class="box_l_list">
+          <template v-for="item in categories" :key="item">
+            <div class="box_l_list_item" :class="{active:item.marketType === record.marketType}" @click=" handleCategory(
+                              item,
                               item.marketType,
                               item.marketTypeName
-                            )
-                          " />
-                      </span>
-                    </a>
-                  </li>
-                </template>
-              </ul>
-            </div>
-
-            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
-              <div class="report-search-name">
-                {{ t("report.category.sndtitle") }}
-              </div>
-              <div class="report-search-content">
-                <n-input-number :show-button="false" clearable v-model:value="record.priceStr" :min="0" />
-                <span class="report-search-line">-</span>
-                <n-input-number :show-button="false" clearable v-model:value="record.priceEnd" :min="0" />
-                <n-button type="primary" @click="queryPrice">{{
-                  t("report.category.ok")
-                }}</n-button>
-              </div>
-              <div class="report-search-range">
-                <!--<template v-for="item in prices" :key="item">-->
-                <div class="price-range range">
-                  <!--({{ item.marketCount }})-->
-                  <span>{{ t("report.price.eight") }}</span>
-                  <n-checkbox size="large" :checked="8000 === record.queryPrice" @update:checked="handlePrice($event, 8000)" />
-                </div>
-                <div class="price-range range">
-                  <!--({{ item.marketCount }})-->
-                  <span>{{ t("report.price.twelve") }}</span>
-                  <n-checkbox size="large" :checked="12000 === record.queryPrice" @update:checked="handlePrice($event, 12000)" />
-                </div>
-                <div class="price-range range">
-                  <!--({{ item.marketCount }})-->
-                  <span>{{ t("report.price.fifteen") }}</span>
-                  <n-checkbox size="large" :checked="15000 === record.queryPrice" @update:checked="handlePrice($event, 15000)" />
-                </div>
-                <div class="price-range range">
-                  <!--({{ item.marketCount }})-->
-                  <span>{{ t("report.price.fifteens") }}</span>
-                  <n-checkbox size="large" :checked="15001 === record.queryPrice" @update:checked="handlePrice($event, 15001)" />
-                </div>
-                <!--</template>-->
-                <!-- <div class="price-range range">
-                                  <span>&lt;￥3000(1000)</span>
-                                  <n-checkbox size="large"
-                                      :checked="3000 === record.queryPrice"
-                                      @update:checked="handlePrice($event,3000)"/>
-                              </div>-->
+                            )">
+              <div class="box_l_list_item_l">{{ item.marketTypeName }}</div>
+              <div class="box_l_list_item_r ">
+                <div></div>
+                <span class="iconfont icon-duigou"></span>
               </div>
             </div>
-
-            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
-              <div class="report-search-name">
-                {{ t("report.category.trdtitle") }}
-              </div>
-              <div class="report-search-content">
-                <n-date-picker type="date" clearable v-model:value="publishDateStr" />
-                <span class="report-search-line">-</span>
-                <n-date-picker type="date" clearable v-model:value="publishDateEnd" />
-                <n-button type="primary" @click="queryPublishDate">{{
-                  t("report.category.ok")
-                }}</n-button>
-              </div>
-              <div class="report-search-range">
-                <template v-for="item in publishDates" :key="item">
-                  <div class="date-range range">
-                    <span>{{ item.marketTypeName }}({{ item.marketCount }})</span>
-                    <n-checkbox size="large" :checked="
-                        item.publishDateValue === record.queryPublishDate
-                      " @update:checked="
-                        handlePublishDate(
-                          $event,
+          </template>
+        </div>
+        <div class="box_l_title">
+          <div>Published</div>
+          <div>
+            <span class="iconfont icon-shouqi1"></span>
+          </div>
+        </div>
+        <div class="box_l_list">
+          <template v-for="item in publishDates" :key="item">
+            <div class="box_l_list_item" :class="{active:item.publishDateValue === record.queryPublishDate}" @click=" handlePublishDate(
+                          item,
                           item.publishDateValue,
                           item.marketTypeName
-                        )
-                      " />
-                  </div>
-                </template>
+                        )">
+              <div class="box_l_list_item_l">{{ item.marketTypeName }}</div>
+              <div class="box_l_list_item_r ">
+                <div></div>
+                <span class="iconfont icon-duigou"></span>
               </div>
             </div>
-
-            <div class="report-search wow fadeInLeft" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
-              <div class="report-search-name">
-                {{ t("report.content.area") }}
-              </div>
-              <div class="report-search-range">
-                <div class="range">
-                  <span>{{ t("report.content.global") }}</span>
-                  <n-checkbox size="large" :checked="record.reportRegion === '1'" @update:checked="handleRegion($event, '1')" />
+          </template>
+          <div class="selBox">
+            <n-date-picker v-model:value="publishDateStr" clearable placeholder="Select Date" type="date" />
+            <span> - </span>
+            <n-date-picker v-model:value="publishDateEnd" clearable placeholder="Select Date" type="date" />
+            <div class="selBox_btn" @click="queryPublishDate">OK</div>
+          </div>
+        </div>
+      </div>
+      <div class="box_r">
+        <view class="box_r_list">
+          <template v-for="(item,i) in pageList?.list" :key="i">
+            <a class="box_r_list_item " :href="'/reports/' +item.webTitle +'-' +item.id">
+              <img :src="BaseUrl + '/report/' + item.fileName" alt="">
+              <div class="box_r_list_item_content">
+                <h2 class="box_r_list_title">{{ item.title }}</h2>
+                <div class="box_r_list_time">
+                  <span class="iconfont  icon-suoshuhangye-01"></span>
+                  Industry：{{dealTypeShow(item.marketType)}}{{item.marketType}}
                 </div>
-              </div>
-              <div class="report-search-range">
-                <div class="range">
-                  <span>{{ t("report.content.china") }}</span>
-                  <n-checkbox size="large" :checked="record.reportRegion === '0'" @update:checked="handleRegion($event, '0')" />
+                <div class="box_r_list_time">
+                  <span class="iconfont  icon-top_"></span>
+                  Report Format：
+                  <span class="desc-icon">
+                    <img src="@/assets/images/doc.png" />
+                    <img src="@/assets/images/pdf.png" />
+                    <img src="@/assets/images/xlsx.png" />
+                  </span>
                 </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="report-content wow fadeInRight" data-wow-duration="3s" data-wow-delay="0s" data-wow-offset="0">
-            <div class="search">
-              <div class="search-text">
-                <n-tag v-if="categoryTag" type="success" closable @close="handleCloseTag($event, 'marketType')">{{ categoryTag }}</n-tag>
-                <n-tag v-if="priceTag" type="success" closable @close="handleCloseTag($event, 'price')">{{ priceTag }}</n-tag>
-                <n-tag v-if="publishDateTag" type="success" closable @close="handleCloseTag($event, 'publishDate')">{{ publishDateTag }}</n-tag>
-                <n-tag v-if="regionTag" type="success" closable @close="handleCloseTag($event, 'region')">{{ regionTag }}</n-tag>
-              </div>
-              <div class="search-keyword">
-                <!-- <n-input type="text" size="large" round :placeholder="t('report.content.keyword')" v-model:value="record.queryKeyword" clearable>
-                                  <template #suffix>
-                                      <a class="search-btn" @click="handleSearch"><n-icon :component="MdSearch" size="30" color="#0e7a0d"/></a>
-                                  </template>
-                              </n-input> -->
-
-                <!-- <n-input-group>
-                                  <n-button size="large" type="primary" @click="handleSearch" style="padding: 0 10px;"><n-icon :component="MdSearch" size="30" color="#fff"/></n-button>
-                                  <n-input type="text" size="large" :placeholder="t('report.content.keyword')" v-model:value="record.queryKeyword" clearable/>
-                              </n-input-group> -->
-              </div>
-            </div>
-            <div class="box">
-              <ul v-if="pageList?.count > 0">
-                <template v-for="item in pageList?.list" :key="item">
-                  <li>
-                    <div class="img">
-                      <img :src="BaseUrl + '/report/' + item.fileName" />
-                    </div>
-                    <div class="text">
-                      <!-- <a @click="viewDetail(item)"><h3>{{ item.title }}</h3></a> -->
-                      <a :href="
-                          (lang === 'zh-CN' ? '' : '/en') +
-                          '/reports/' +
-                          item.webTitle +
-                          '-' +
-                          item.id
-                        ">
-                        <h2>{{ item.title }}</h2>
-                      </a>
-                      <p>{{ item.outline }}</p>
-                      <div v-if="pcShow" class="time pc-time">
-                        <n-icon :component="MdTime" color="#0e7a0d" depth="1" size="18" />
-                        <span>{{ item.publishDate }}</span>
-                        <span class="text-type">
-                          {{ t("report.detail.formTitle") }}
-                          <span class="desc-icon">
-                            <img src="@/assets/images/doc.png" />
-                            <img src="@/assets/images/pdf.png" />
-                            <img src="@/assets/images/xlsx.png" />
-                          </span>
-                        </span>
-                        <span class="text-price">
-                          {{ t("report.content.version") }}：<b>{{
-                            (item.lang == "zh-CN" ? "￥ " : "") +
-                            item.price?.toFixed(2) +
-                            (item.lang == "en-US" ? " USD" : "")
-                          }}</b>
-                        </span>
-                      </div>
-
-                      <div v-if="pcShow" class="operate">
-                        <n-button class="btn" @click="handleDemand(item, '1')" type="warning">{{ t("report.content.sample") }}</n-button>
-                        <n-button class="btn" v-if="lang === 'zh-CN'" type="info" @click="handleDemand(item, '2')">{{ t("report.content.buy") }}</n-button>
-                        <n-button class="btn" v-else type="info" @click="tocontentBuy(item)">{{ t("report.content.buy") }}</n-button>
-                      </div>
-                    </div>
-
-                    <div v-if="!pcShow" class="time mobile-time">
-                      <n-icon :component="MdTime" color="#0e7a0d" depth="1" size="18" />
-                      <span>{{ item.publishDate }}</span>
-                      <span class="text-price">
-                        {{ t("report.content.version") }}：<b>{{
-                          (item.lang == "zh-CN" ? "￥ " : "") +
-                          item.price?.toFixed(2) +
-                          (item.lang == "en-US" ? " USD" : "")
-                        }}</b>
-                      </span>
-                    </div>
-                  </li>
-                </template>
-
-                <div class="pagination">
-                  <n-pagination :page="pageList?.pageNo" :page-count="pageList?.count" :page-size="pageList?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
+                <div class="box_r_list_time">
+                  <span class="iconfont  icon-normal"></span>
+                  {{ item.publishDate }}
                 </div>
-              </ul>
-
-              <div class="box-empty" v-if="pageList?.count === 0">
-                <n-empty :description="t('report.detail.empty')">
-                  <template #extra>
-                    <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button>
-                  </template>
-                </n-empty>
               </div>
-            </div>
-          </div>
+              <div class="box_r_list_item_btn">
+                <div class="box_r_list_item_btn_l">Request</div>
+                <div class="box_r_list_item_btn_r">Buy Now</div>
+              </div>
+            </a>
+          </template>
+        </view>
+        <div class="pageBox" v-if="pageList?.list.length>0">
+          <n-pagination show-quick-jumper :page-count="pageList?.count" :on-update:page="changePage" :page-slot="6">
+            <template #prev>
+              <div class="pageBox_btn">Previous</div>
+            </template>
+            <template #next>
+              <div class="pageBox_btn">Next</div>
+            </template>
+            <template #goto>
+              <div class="pageBox_inp">Go To</div>
+            </template>
+          </n-pagination>
+        </div>
+        <div class="box-empty" v-if="pageList?.count === 0">
+          <n-empty description="未找到指定的报告">
+            <template #extra>
+              <!-- <n-button @click="handleDemand({ id: '', price: 0 }, '0')" round type="primary">{{ t("report.detail.custom") }}</n-button> -->
+            </template>
+          </n-empty>
+        </div>
+        <div class="load">
+          <n-spin size="large">
+            <template #description>Loading...</template>
+          </n-spin>
         </div>
       </div>
     </div>
-
-    <div class="load">
-      <n-spin size="large">
-        <template #description>{{ t("report.content.loading") }}</template>
-      </n-spin>
-    </div>
-
-    <n-modal :show="demandShow" preset="dialog" :title="t('report.detail.subscribe')" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'min-width: 40%'">
-      <Demand :rowId="rowId" :rowPrice="rowPrice" :rowType="rowType" :rowRegion="rowRegion" @closeDialog="handleCloseDiag" />
-    </n-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, watch, onServerPrefetch, nextTick } from "vue";
 import { MdSearch, MdHome, IosFiling, MdTime } from "@vicons/ionicons4";
-// import {
-//   NBreadcrumb,
-//   NBreadcrumbItem,
-//   NInput,
-//   NPagination,
-//   NIcon,
-//   NModal,
-//   NCheckbox,
-//   NTag,
-//   NInputNumber,
-//   NButton,
-//   NDatePicker,
-//   NSpin,
-//   PaginationInfo,
-//   NInputGroup,
-//   NEmpty,
-// } from "naive-ui";
 import {
   useRouter,
   useRoute,
@@ -299,7 +155,7 @@ const userStore = useUserStore();
 const lang = userStore.getLang;
 const config = useRuntimeConfig();
 const BaseUrl = ref(config.public.baseUrl);
-const pageSize = 10;
+const pageSize = 9;
 const websiteToken = computed(() => userStore.getToken);
 const userInfo = computed(() => userStore.getUserInfo);
 function viewDetail(item: any) {
@@ -328,6 +184,14 @@ const publishDates = ref();
 //         }, 1000);
 //     }
 // })
+const dealTypeShow = (type) => {
+  let arr = categories.value;
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].marketType == type) {
+      return arr[i].marketTypeName;
+    }
+  }
+};
 onMounted(async () => {
   if (typeof window !== "undefined") {
     window.scrollTo(0, 1);
@@ -379,22 +243,21 @@ async function getData() {
 
 // 选择/取消类别
 function handleCategory(
-  checked: boolean,
+  item: boolean,
   value: string | undefined,
   label: string | undefined
 ) {
   //const lang = useLocaleStore().getLocale;
   const language = lang === "zh-CN" ? "" : "en";
-  if (checked) {
-    record.value.marketType = value;
-    // categoryTag.value = label;
+  // item.checked = !Boolean(item.checked);
+  record.value.marketType =
+    record.value.marketType != item.marketType ? item.marketType : "";
+  if (record.value.marketType) {
     router.push({
       name: "reports",
       params: { category: value, lang: language },
     });
   } else {
-    record.value.marketType = "";
-    // categoryTag.value = "";
     router.push({ name: "reports", params: { lang: language } });
   }
 }
@@ -446,11 +309,11 @@ function handlePrice(checked: boolean, price: number | undefined) {
 
 // 发布日期
 function handlePublishDate(
-  checked: boolean,
+  item: boolean,
   day: number | undefined,
   dayStr: string | undefined
 ) {
-  if (checked) {
+  if (record.value.queryPublishDate != day) {
     record.value.queryPublishDate = day;
     publishDateTag.value = dayStr;
   } else {
@@ -635,205 +498,388 @@ useHead({
 </script>
 
 <style lang="scss" scoped>
-.content {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 0 30px;
-  flex-wrap: wrap;
-  .content-search {
-    width: 22%;
-    .report-category {
-      background-color: #fff;
-      padding: 20px;
-      .report-category-title {
-        font-size: 18px;
-        font-weight: 600;
-        padding: 10px 0;
+@import "~/assets/css/tool.scss";
+.page {
+  .top {
+    width: 100%;
+    position: relative;
+    margin-top: var(--size-130);
+    img {
+      width: 100%;
+    }
+    > 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 {
+    background: #f6f7fa;
+    padding: var(--size-30) var(--size-147) var(--size-70);
+    display: flex;
+    .box_l {
+      background: #ffffff;
+      width: var(--size-493);
+      flex-shrink: 0;
+      .box_l_title {
+        width: 100%;
+        padding: var(--size-20) var(--size-30);
+        background: #6aaa87;
+        font-size: var(--size-22);
+        font-family: Arial, Arial-Bold;
+        font-weight: 700;
+        text-align: left;
+        color: #ffffff;
+        line-height: var(--size-22);
+        display: flex;
+        justify-content: space-between;
+        span {
+          font-size: var(--size-13);
+        }
       }
-      ul {
-        padding: 0;
-        li {
-          height: 50px;
-          line-height: 50px;
-          margin: 0;
-          list-style: none;
-          padding: 0;
-          > a {
+      .box_l_list {
+        padding: var(--size-12) 0;
+        border: 1px solid #ffffff;
+        border-bottom: var(--size-20) solid #ffffff;
+        background: #f4f7f9;
+        min-height: var(--size-282);
+        .box_l_list_item {
+          padding: var(--size-6) var(--size-30);
+          display: flex;
+          justify-content: space-between;
+          background: #f4f7f9;
+          cursor: pointer;
+          .box_l_list_item_l {
+            font-size: var(--size-18);
+            font-family: Arial, Arial-Regular;
+            color: #639e57;
+            line-height: var(--size-22);
+          }
+          .box_l_list_item_r {
+            width: var(--size-27);
+            height: var(--size-27);
+            border: 1px solid #639e57;
+            border-radius: 50%;
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            > .category-name {
-              font-size: 16px;
-              margin: 0;
-              line-height: 20px;
+            justify-content: center;
+            > div {
+              width: var(--size-17);
+              height: var(--size-17);
+              background: #639e57;
+              border-radius: 50%;
+              display: block;
+            }
+            span {
+              display: none;
+            }
+          }
+        }
+        .active {
+          .box_l_list_item_l {
+            font-weight: 700;
+          }
+          .box_l_list_item_r {
+            background: #639e57;
+            span {
+              color: #ffffff;
+              font-size: var(--size-25);
+            }
+            > div {
+              display: none;
+            }
+            span {
+              display: block;
+            }
+          }
+        }
+        .selBox {
+          display: flex;
+          align-items: center;
+          padding: var(--size-8) var(--size-30);
+          > span {
+            display: inline-block;
+          }
+          .selBox_btn {
+            width: var(--size-68);
+            height: var(--size-44);
+            background: linear-gradient(90deg, #719d58 4%, #43a086 99%);
+            border-radius: var(--size-4);
+            font-size: var(--size-16);
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            color: #ffffff;
+            cursor: pointer;
+            text-align: center;
+            line-height: var(--size-44);
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+    .box_r {
+      margin-left: var(--size-46);
+      flex-grow: 1;
+      .box_r_list {
+        display: flex;
+        flex-wrap: wrap;
+        // justify-content: space-between;
+        .box_r_list_item {
+          background: #ffffff;
+          width: var(--size-338);
+          border-radius: var(--size-10);
+          margin-right: var(--size-26);
+          margin-bottom: var(--size-27);
+          overflow: hidden;
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+          > img {
+            width: var(--size-338);
+            height: var(--size-394);
+            display: block;
+          }
+          .box_r_list_item_content {
+            padding: var(--size-15) var(--size-18);
+            .box_r_list_title {
+              font-size: var(--size-18);
+              font-family: Arial, Arial-Regular;
+              color: #1a1a1a;
+              line-height: var(--size-28);
               overflow: hidden;
               text-overflow: ellipsis;
-              width: 80%;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
             }
-            > .category-check {
-              font-size: 16px;
+            .box_r_list_time {
+              font-size: var(--size-14);
+              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
               color: #999999;
+              line-height: var(--size-26);
+              display: flex;
+              align-items: center;
+              .desc-icon {
+                display: flex !important;
+                align-items: center;
+                img {
+                  width: var(--size-18);
+                  height: var(--size-18);
+                  margin-left: var(--size-4);
+                }
+              }
+              &:nth-child(2) {
+                span {
+                  font-size: var(--size-22);
+                  position: relative;
+                  left: var(--size--2);
+                }
+              }
+              &:nth-child(3),
+              &:nth-child(4) {
+                span {
+                  font-size: var(--size-18);
+                  display: inline-block;
+                  margin-right: var(--size-3);
+                }
+              }
+            }
+          }
+          .box_r_list_item_btn {
+            display: flex;
+            justify-content: space-between;
+            padding: var(--size-20) var(--size-18);
+            border-top: 1px solid rgba(230, 230, 230, 0.5);
+            > div {
+              width: var(--size-145);
+              height: var(--size-48);
+              border-radius: var(--size-8);
+              font-size: var(--size-14);
+              font-family: Arial, Arial-Regular;
               text-align: center;
-              vertical-align: middle;
+              color: #ffffff;
+              line-height: var(--size-48);
+              cursor: pointer;
+            }
+            .box_r_list_item_btn_l {
+              background: #60ac92;
+            }
+            .box_r_list_item_btn_r {
+              background: #84a86c;
             }
           }
         }
+        .box_r_list_item:hover {
+          box-shadow: 0px var(--size-9) var(--size-16) 0px #d1d1d1;
+        }
       }
-    }
-    .report-search {
-      padding: 20px;
-      background-color: #fff;
-      margin-top: 20px;
-      .report-search-name {
-        font-size: 18px;
-        font-weight: 600;
-        padding: 10px 0;
-      }
-      .report-search-content {
+      .pageBox {
         display: flex;
-        justify-content: space-around;
-        padding-bottom: 20px;
-        .n-input-number {
-          width: 35%;
+        justify-content: center;
+        ::v-deep .n-pagination-item {
+          min-width: var(--size-42);
+          height: var(--size-42);
+          background: #f2f2f2;
+          border: 1px solid #cccccc;
+          border-radius: var(--size-4);
+          font-size: var(--size-14);
+          color: #808080;
+          text-align: center;
+          line-height: var(--size-40);
         }
-        .n-date-pick {
-          width: 35%;
-          .n-input .n-input-wrapper {
-            .n-input__suffix {
-              display: none !important;
-            }
+        ::v-deep .n-pagination-item--active {
+          background: rgba(57, 154, 192, 1);
+          color: #ffffff;
+          &:hover {
+            background: rgba(57, 154, 192, 1);
+            color: #ffffff;
           }
         }
-
-        .report-search-line {
-          line-height: 30px;
+        .pageBox_btn {
+          width: var(--size-70);
+          color: #333333;
         }
-      }
-      .report-search-range {
-        .range {
-          display: flex;
-          justify-content: space-between;
-          padding-bottom: 15px;
+        ::v-deep(.n-input__input) {
+          height: var(--size-40);
+          line-height: var(--size-40);
+        }
+        ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
+          border: 1px solid #cccccc;
+        }
+        .pageBox_inp {
+          font-size: var(--size-16);
         }
       }
     }
   }
-  .report-content {
-    width: 77%;
-    background-color: #fff;
-    padding: 30px 50px;
-    .search {
-      display: flex;
-      justify-content: space-between;
-      padding-bottom: 20px;
-      border-bottom: 1px solid #d1d1d1;
-      align-items: center;
-      .search-text {
-        padding-top: 10px;
-        font-size: 16px;
-        font-weight: 700;
-        width: 30%;
-        .n-tag {
-          margin: 0 5px 5px 0;
-        }
-      }
-      .search-keyword {
-        width: 60%;
+}
+::v-deep .n-date-picker > div {
+  --n-height: var(--size-45) !important;
+  margin-top: var(--size-1);
+}
+.load {
+  display: v-bind("spinShow");
+}
+@include responseTo("phone") {
+  .page {
+    .top {
+      img {
+        height: 100px;
+        object-fit: cover;
       }
-    }
-    .box > ul > li {
-      padding: 0.3rem 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid #d1d1d1;
-      flex-wrap: wrap;
-      > .img {
-        max-width: 11em;
-        max-height: 14em;
-        overflow: hidden;
-        box-shadow: 7px 0px 15px rgb(0 87 149 / 33%);
-        > img {
-          width: 100%;
-          transition: all 0.4s ease;
-          border: none;
-          vertical-align: middle;
+      > div {
+        padding: 15px;
+        .top_title {
+          font-size: 28px;
         }
-        // >img:hover{
-        //     transform: scale(1.1);
-        // }
       }
-      .text {
-        width: calc(100% - 13em);
-        > a {
-          > h3 {
-            //word-break: break-all;
-          }
-        }
-        > .time {
-          vertical-align: sub;
-          padding: 10px 0;
-          > span {
-            padding: 0px 20px 0 2px;
-            vertical-align: text-bottom;
-            > b {
-              color: #f00;
+    }
+    .box {
+      padding: 15px;
+      width: 100%;
+      display: block;
+      .box_l {
+        width: 100%;
+        .box_l_list {
+          .box_l_list_item {
+            padding: var(--size-6) var(--size-20);
+            .box_l_list_item_l {
+              font-size: 16px;
+            }
+            .box_l_list_item_r {
+              width: var(--size-20);
+              height: var(--size-20);
+              > div {
+                width: var(--size-12);
+                height: var(--size-12);
+              }
             }
           }
-          .desc-icon {
-            img {
-              width: 1.7em;
-              height: 1.7em;
-              vertical-align: bottom;
-              margin-right: 0.6em;
+          .active .box_l_list_item_r span {
+            font-size: var(--size-18);
+          }
+          .selBox {
+            padding: var(--size-6) var(--size-20);
+            .selBox_btn {
+              width: var(--size-52);
+              height: var(--size-34);
+              border-radius: var(--size-4);
+              font-size: var(--size-16);
+              line-height: var(--size-34);
             }
           }
         }
-        > p {
-          font-size: 14px;
-          color: #999999;
-          line-height: 26px;
-          margin: 0.15rem 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-          //word-break: break-all;
-        }
-      }
-    }
-    .box {
-      .box-empty {
-        padding: 50px 0;
-        border-bottom: 1px solid #d1d1d1;
       }
-      .operate {
-        width: 100%;
-        text-align: right;
-        .btn {
-          margin: 5px;
+      .box_r {
+        margin: 0;
+        .box_r_list {
+          .box_r_list_item {
+            width: 100%;
+            margin-right: 0;
+            > img {
+              width: 100%;
+            }
+          }
+        }
+        .pageBox {
+          ::v-deep .n-pagination-item {
+            min-width: var(--size-21);
+            height: var(--size-21);
+            border-radius: var(--size-2);
+            font-size: var(--size-8);
+            line-height: var(--size-20);
+          }
+          .pageBox_btn {
+            width: var(--size-35);
+          }
+          ::v-deep(.n-input__input) {
+            height: var(--size-20);
+            line-height: var(--size-20);
+            font-size: var(--size-9);
+          }
+          .pageBox_inp {
+            font-size: var(--size-8);
+          }
+
+          ::v-deep(.n-pagination .n-pagination-quick-jumper .n-input) {
+            width: var(--size-35);
+          }
+          ::v-deep(.n-input .n-input__input-el) {
+            height: var(--size-20);
+            line-height: var(--size-20);
+          }
         }
       }
     }
   }
+  ::v-deep(.n-input__input) {
+    height: var(--size-34);
+    line-height: var(--size-34);
+    font-size: 14px;
+  }
 }
-.search-btn > .n-icon {
-  vertical-align: middle;
-}
-.pagination {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-}
-.n-input .n-input__suffix {
-  display: none !important;
-}
-.n-input .n-input-wrapper {
-  padding: 0 1px;
-}
-.load {
-  display: v-bind("spinShow");
+h2 {
+  margin: 0;
 }
 </style>