优化样式

assets/css/root.scss

@@ -514,6 +514,7 @@
         --size-153: 153px;
         --size-154: 154px;
         --size-155: 155px;
+        --size-158: 158px;
         --size-160: 160px;
         --size-161: 161px;
         --size-165: 165px;
@@ -528,6 +529,7 @@
         --size-179: 179px;
         --size-180: 180px;
         --size-181: 181px;
+        --size-184: 184px;
         --size-186: 186px;
         --size-187: 187px;
         --size-188: 188px;
@@ -554,6 +556,7 @@
         --size-234: 234px;
         --size-238: 238px;
         --size-240: 240px;
+        --size-243: 243px;
         --size-245: 245px;
         --size-248: 248px;
         --size-253: 253px;
@@ -582,6 +585,7 @@
         --size-300: 300px;
         --size-304: 304px;
         --size-313: 313px;
+        --size-314: 314px;
         --size-315: 315px;
         --size-317: 317px;
         --size-322: 322px;
@@ -602,6 +606,7 @@
         --size-355: 355px;
         --size-356: 356px;
         --size-357: 357px;
+        --size-359: 359px;
         --size-360: 360px;
         --size-362: 362px;
         --size-367: 367px;
@@ -641,6 +646,7 @@
         --size-500: 500px;
         --size-513: 513px;
         --size-514: 514px;
+        --size-518: 518px;
         --size-520: 520px;
         --size-524: 524px;
         --size-526: 526px;
@@ -695,6 +701,7 @@
         --size-780: 780px;
         --size-788: 788px;
         --size-791: 791px;
+        --size-793: 793px;
         --size-795: 795px;
         --size-800: 800px;
         --size-810: 810px;
@@ -717,6 +724,7 @@
         --size-1065: 1065px;
         --size-1079: 1079px;
         --size-1116: 1116px;
+        --size-1126: 1126px;
         --size-1128: 1128px;
         --size-1158: 1158px;
         --size-1189: 1189px;
@@ -884,6 +892,7 @@
         --size-153: 7.9792vw;
         --size-154: 8.0208vw;
         --size-155: 8.0729vw;
+        --size-158: 8.2291vw;
         --size-160: 8.3333vw;
         --size-161: 8.3854vw;
         --size-165: 8.6042vw;
@@ -898,6 +907,7 @@
         --size-179: 9.3229vw;
         --size-180: 9.375vw;
         --size-181: 9.4271vw;
+        --size-184: 9.5833vw;
         --size-186: 9.6875vw;
         --size-187: 9.7396vw;
         --size-188: 9.7917vw;
@@ -924,6 +934,7 @@
         --size-234: 12.1875vw;
         --size-238: 12.4063vw;
         --size-240: 12.5vw;
+        --size-243: 12.6562vw;
         --size-245: 12.7604vw;
         --size-248: 12.9167vw;
         --size-253: 13.177vw;
@@ -952,6 +963,7 @@
         --size-300: 15.625vw;
         --size-304: 15.8333vw;
         --size-313: 16.3021vw;
+        --size-314: 16.3541vw;
         --size-315: 16.4063vw;
         --size-317: 16.5104vw;
         --size-322: 16.7917vw;
@@ -972,6 +984,7 @@
         --size-355: 18.4895vw;
         --size-356: 18.5417vw;
         --size-357: 18.5938vw;
+        --size-359: 18.697vw;
         --size-360: 18.75vw;
         --size-362: 18.8542vw;
         --size-367: 19.125vw;
@@ -1011,6 +1024,7 @@
         --size-500: 25.9375vw;
         --size-513: 26.6667vw;
         --size-514: 26.7188vw;
+        --size-518: 26.9791vw;
         --size-520: 27.0833vw;
         --size-524: 27.2917vw;
         --size-526: 27.3438vw;
@@ -1065,6 +1079,7 @@
         --size-780: 40.625vw;
         --size-788: 40.9903vw;
         --size-791: 41.1563vw;
+        --size-793: 41.302vw;
         --size-795: 41.3542vw;
         --size-800: 41.6667vw;
         --size-810: 42.1875vw;
@@ -1087,6 +1102,7 @@
         --size-1065: 55.4688vw;
         --size-1079: 56.1979vw;
         --size-1116: 58.0625vw;
+        --size-1126: 58.6458vw;
         --size-1128: 58.75vw;
         --size-1158: 60.3125vw;
         --size-1189: 61.9896vw;

components/Header/index.vue

@@ -47,7 +47,7 @@
       <div class="navBox_r">
         <div class="search">
           <div class="search_l">
-            <n-dropdown trigger="hover" :keyboard="false" :options="selectTypeList">
+            <n-dropdown trigger="hover" :keyboard="false" :options="selectTypeList" @select="selectValueFun">
               <div class="search_l_type">
                 {{ selectTypeLabel }}
                 <span class="iconfont icon-dkw_guanbi-"></span>
@@ -83,7 +83,7 @@
         <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>
+              {{ selectTypeLabel }}<span class="iconfont icon-dkw_guanbi-"></span>
             </div>
           </n-dropdown>
         </div>
@@ -571,19 +571,19 @@ getDictListData();
       align-items: center;
 
       .avatar {
-        width: 30px;
-        height: 30px;
-        margin-right: 10px;
+        width: var(--size-30);
+        height: var(--size-30);
+        margin-right: var(--size-10);
         vertical-align: middle;
         border-radius: 50%;
       }
 
       .username {
-        font-size: 14px;
+        font-size: var(--size-14);
       }
 
       span {
-        margin-right: 10px;
+        margin-right: var(--size-10);
         cursor: pointer;
 
         &:last-child {
@@ -628,7 +628,7 @@ getDictListData();
         width: var(--size-450);
         height: var(--size-44);
         background: #ffffff;
-        border-radius: 8px;
+        border-radius: var(--size-8);
         overflow: hidden;
         .search_l {
           width: var(--size-148);
@@ -644,7 +644,7 @@ getDictListData();
           }
         }
         .search_c {
-          border-left: 1px solid #cccccc;
+          border-left: var(--size-1) solid #cccccc;
           .n-input {
             --n-height: var(--size-26) !important;
             line-height: var(--size-26) !important;
@@ -681,12 +681,17 @@ getDictListData();
 .modalCls {
   width: var(--size-720) !important;
 }
+.router-link-active {
+  font-weight: 700;
+  color: #6aaa87;
+}
 @include responseTo("phone") {
   .pc {
     display: none;
   }
   .headPhone {
-    background: rgba(6, 17, 29, 0.5);
+    // background: rgba(6, 17, 29, 0.5);
+    background: #37404a;
     z-index: 9;
     width: 100%;
     position: fixed;

pages/market/index.vue

@@ -475,7 +475,7 @@ useHead({
     }
   }
   .contactUs {
-    padding: 55px 145px;
+    padding: var(--size-55) var(--size-145);
     background: #f6f7fa;
     display: flex;
     justify-content: space-between;
@@ -484,111 +484,111 @@ useHead({
         display: flex;
         align-items: center;
         img {
-          width: 9px;
-          height: 84px;
+          width: var(--size-9);
+          height: var(--size-84);
         }
         > div {
-          width: 1037px;
-          font-size: 28px;
+          width: var(--size-1037);
+          font-size: var(--size-28);
           font-family: Arial, Arial-Bold;
           font-weight: 700;
           text-align: left;
           color: #0d3757;
-          line-height: 38px;
-          margin-left: 20px;
+          line-height: var(--size-38);
+          margin-left: var(--size-20);
         }
       }
       .contactUs_l_b {
-        width: 1126px;
-        font-size: 16px;
+        width: var(--size-1126);
+        font-size: var(--size-16);
         font-family: Arial, Arial-Regular;
         color: #1a1a1a;
-        line-height: 24px;
-        margin-top: 15px;
+        line-height: var(--size-24);
+        margin-top: var(--size-15);
       }
       .contactUs_l_btn {
-        width: 158px;
-        height: 50px;
+        width: var(--size-158);
+        height: var(--size-50);
         background: linear-gradient(90deg, #60ab91, #84a86c);
-        border-radius: 8px;
-        font-size: 16px;
+        border-radius: var(--size-8);
+        font-size: var(--size-16);
         font-family: Arial, Arial-Regular;
         text-align: center;
         color: #ffffff;
-        line-height: 50px;
-        margin-top: 24px;
+        line-height: var(--size-50);
+        margin-top: var(--size-24);
         cursor: pointer;
       }
     }
     .contactUs_r {
       img {
-        width: 415px;
+        width: var(--size-415);
       }
     }
   }
   .customization {
     background: #ffffff;
-    padding: 55px 145px 60px;
+    padding: var(--size-55) var(--size-145) var(--size-60);
     .customization_title {
-      font-size: 28px;
+      font-size: var(--size-28);
       font-family: Arial, Arial-Bold;
       font-weight: 700;
       color: #0d3757;
-      line-height: 38px;
+      line-height: var(--size-38);
     }
     .customization_text {
-      font-size: 16px;
+      font-size: var(--size-16);
       font-family: Arial, Arial-Regular;
       color: #1a1a1a;
-      line-height: 24px;
+      line-height: var(--size-24);
     }
     .customization_list {
       display: flex;
       justify-content: space-between;
-      margin-top: 30px;
+      margin-top: var(--size-30);
       .customization_item {
         display: flex;
         align-items: center;
         .customization_item_l {
-          width: 243px;
-          height: 184px;
+          width: var(--size-243);
+          height: var(--size-184);
           background: #ffffff;
-          border: 1px solid #e6e6e6;
+          border: var(--size-1) solid #e6e6e6;
           text-align: center;
-          padding: 30px 18px 0;
+          padding: var(--size-30) var(--size-18) 0;
           img {
-            width: 59px;
-            height: 63px;
+            width: var(--size-59);
+            height: var(--size-63);
           }
           div {
-            font-size: 16px;
+            font-size: var(--size-16);
             font-family: Arial, Arial-Bold;
             font-weight: 700;
             text-align: center;
             color: #1a1a1a;
-            line-height: 22px;
-            margin-top: 25px;
+            line-height: var(--size-22);
+            margin-top: var(--size-25);
           }
         }
         .customization_item_r {
           img {
-            width: 22px;
-            height: 52px;
+            width: var(--size-22);
+            height: var(--size-52);
           }
         }
       }
     }
   }
   .customizable {
-    padding: 70px 145px;
+    padding: var(--size-70) var(--size-145);
     background: #f5f5f5;
     .customizable_title {
-      font-size: 28px;
+      font-size: var(--size-28);
       font-family: Arial, Arial-Bold;
       font-weight: 700;
       text-align: center;
       color: #0d3757;
-      line-height: 38px;
+      line-height: var(--size-38);
     }
     .customizable_table {
       margin-top: 30px;
@@ -596,7 +596,7 @@ useHead({
         --n-border-color: #fff !important;
       }
       th {
-        font-size: 18px;
+        font-size: var(--size-18);
         background-color: #82a86d;
         color: #fff;
         text-align: center;
@@ -611,11 +611,11 @@ useHead({
       }
       tr {
         td {
-          padding: 10px;
+          padding: var(--size-10);
           background: none;
           text-align: center;
           background-color: #e2f1ee;
-          font-size: 16px;
+          font-size: var(--size-16);
         }
         &:nth-child(-n + 7) {
           background-color: #e2f1ee;
@@ -629,35 +629,35 @@ useHead({
         .lab {
           background-color: #61ab91;
           color: #fff;
-          font-size: 18px;
+          font-size: var(--size-18);
           font-weight: 600;
         }
       }
     }
   }
   .Research {
-    padding: 60px 145px 30px;
+    padding: var(--size-60) var(--size-145) var(--size-30);
     .Research_title {
       font-size: 28px;
       font-family: Arial, Arial-Bold;
       font-weight: 700;
       text-align: center;
       color: #0d3757;
-      line-height: 38px;
+      line-height: var(--size-38);
     }
     .Research_list {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      margin-top: 25px;
+      margin-top: var(--size-25);
       .Research_item {
         position: relative;
-        width: 793px;
-        margin-bottom: 30px;
+        width: var(--size-793);
+        margin-bottom: var(--size-30);
         cursor: pointer;
         img {
-          width: 793px;
-          height: 518px;
+          width: var(--size-793);
+          height: var(--size-518);
         }
         .Research_item_img1 {
           position: absolute;
@@ -669,13 +669,13 @@ useHead({
           bottom: 0;
           left: 0;
           z-index: 5;
-          font-size: 22px;
+          font-size: var(--size-22);
           width: 100%;
           font-family: Arial, Arial-Bold;
           font-weight: 700;
           color: #ffffff;
-          line-height: 38px;
-          padding: 20px 30px;
+          line-height: var(--size-38);
+          padding: var(--size-22) var(--size-30);
         }
         .Research_item_img2,
         .Research_item_box2 {
@@ -696,26 +696,26 @@ useHead({
             display: flex;
             flex-direction: column;
             justify-content: center;
-            padding: 0 30px;
+            padding: 0 var(--size-30);
             position: absolute;
             bottom: 0;
             left: 0;
             top: 0;
             right: 0;
             z-index: 7;
-            font-size: 14px;
+            font-size: var(--size-14);
             font-family: Arial, Arial-Regular;
             font-weight: 400;
             color: #ffffff;
-            line-height: 22px;
+            line-height: var(--size-22);
             .Research_item_box2_title {
-              font-size: 22px;
+              font-size: var(--size-22);
               font-family: Arial, Arial-Bold;
               font-weight: 700;
               text-align: left;
               color: #ffffff;
-              line-height: 38px;
-              margin-bottom: 5px;
+              line-height: var(--size-38);
+              margin-bottom: var(--size-5);
             }
           }
         }
@@ -724,35 +724,36 @@ useHead({
   }
   .industry {
     background: linear-gradient(159deg, #499f81 3%, #749c56 91%, #749c56 97%);
-    padding: 55px 145px 0;
+    padding: var(--size-55) 0 0;
     .industry_title {
-      font-size: 28px;
+      font-size: var(--size-28);
       font-family: Arial, Arial-Bold;
+      padding: 0 var(--size-145);
       font-weight: 700;
       text-align: center;
       color: #ffffff;
-      line-height: 24px;
-      margin-bottom: 25px;
+      line-height: var(--size-24);
+      margin-bottom: var(--size-25);
     }
     .industry_text {
-      font-size: 16px;
+      font-size: var(--size-16);
       font-family: Arial, Arial-Regular;
       text-align: center;
       color: #ffffff;
-      line-height: 24px;
+      line-height: var(--size-24);
     }
     .industry_list {
       width: 100%;
       display: flex;
       flex-wrap: wrap;
-      margin-top: 35px;
+      margin-top: var(--size-25);
       .industry_item {
         position: relative;
-        width: var(--size-256);
+        width: 16.666%;
         font-size: 0;
         img {
-          width: var(--size-256);
-          height: var(--size-172);
+          width: 100%;
+          height: var(--size-214);
         }
         > div {
           position: absolute;
@@ -768,42 +769,45 @@ useHead({
   }
   .latest {
     background: #f6f7fa;
-    padding: 60px 145px 40px;
+    padding: var(--size-60) var(--size-145) var(--size-40);
 
     .latest_title {
-      font-size: 28px;
+      font-size: var(--size-28);
       font-family: Arial, Arial-Bold;
       font-weight: 700;
       text-align: center;
       color: #0d3757;
-      line-height: 38px;
+      line-height: var(--size-38);
     }
     .latest_list {
       display: flex;
       flex-wrap: wrap;
-      margin-top: 25px;
+      margin-top: var(--size-25);
       .latest_item {
-        border-radius: 10px;
+        border-radius: var(--size-10);
         overflow: hidden;
-        width: 359px;
-        margin-right: 59px;
-        margin-bottom: 60px;
+        // width: var(--size-359);
+        width: 23%;
+        // margin-right: var(--size-59);
+        margin-right: 2.5%;
+        margin-bottom: var(--size-60);
         &:nth-child(4n) {
           margin-right: 0;
         }
         img {
-          width: 359px;
-          height: 404px;
+          // width: var(--size-359);
+          width: 100%;
+          height: var(--size-404);
           display: block;
         }
         .latest_item_content {
           background: #ffffff;
-          padding: 15px 15px 40px;
+          padding: var(--size-15) var(--size-15) var(--size-40);
           .latest_item_content_title {
-            font-size: 18px;
+            font-size: var(--size-18);
             font-family: MicrosoftYaHei;
             color: #1a1a1a;
-            line-height: 28px;
+            line-height: var(--size-28);
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -811,8 +815,8 @@ useHead({
             -webkit-box-orient: vertical;
           }
           .latest_item_content_btn {
-            width: 170px;
-            height: 48px;
+            width: var(--size-170);
+            height: var(--size-48);
             display: block;
             background: linear-gradient(
               90deg,
@@ -820,14 +824,14 @@ useHead({
               #549f76 70%,
               #2da19d 100%
             );
-            border-radius: 8px;
-            font-size: 18px;
+            border-radius: var(--size-8);
+            font-size: var(--size-18);
             font-family: MicrosoftYaHei;
             font-weight: normal;
             text-align: center;
             color: #ffffff;
-            line-height: 48px;
-            margin-top: 35px;
+            line-height: var(--size-48);
+            margin-top: var(--size-35);
           }
         }
       }
@@ -838,34 +842,34 @@ useHead({
   .market {
     .top {
       img {
-        height: 100px;
+        height: var(--size-100);
         object-fit: cover;
       }
       > div {
-        padding: 15px;
+        padding: var(--size-15);
         .top_title {
-          font-size: 28px;
+          font-size: var(--size-28);
         }
       }
     }
     .contactUs {
-      padding: 15px;
+      padding: var(--size-15);
       flex-direction: column-reverse;
       .contactUs_l {
         .contactUs_l_t {
           div {
             width: 100%;
-            font-size: 18px;
-            line-height: 22px;
+            font-size: var(--size-18);
+            line-height: var(--size-22);
           }
         }
         .contactUs_l_b {
           width: 100%;
-          font-size: 14px;
-          line-height: 20px;
+          font-size: var(--size-14);
+          line-height: var(--size-20);
         }
         .contactUs_l_btn {
-          margin-top: 15px;
+          margin-top: var(--size-15);
         }
       }
       .contactUs_r {
@@ -875,12 +879,12 @@ useHead({
       }
     }
     .customization {
-      padding: 15px;
+      padding: var(--size-15);
       .customization_title {
-        font-size: 18px;
+        font-size: var(--size-18);
       }
       .customization_text {
-        font-size: 14px;
+        font-size: var(--size-14);
       }
       .customization_list {
         flex-direction: column-reverse;
@@ -892,39 +896,39 @@ useHead({
             transform: rotateZ(90deg);
           }
           .customization_item_l {
-            padding: 30px 15px 0;
+            padding: var(--size-30) var(--size-15) 0;
             div {
-              margin-top: 15px;
+              margin-top: var(--size-15);
             }
           }
         }
       }
     }
     .customizable {
-      padding: 15px;
+      padding: var(--size-15);
       .customizable_title {
-        font-size: 18px;
+        font-size: var(--size-18);
       }
       .customizable_table {
-        margin-top: 30px;
+        margin-top: var(--size-30);
         th {
-          font-size: 16px;
+          font-size: var(--size-16);
         }
         tr {
           td {
-            padding: 5px;
-            font-size: 14px;
+            padding: var(--size-5);
+            font-size: var(--size-14);
           }
           .lab {
-            font-size: 16px;
+            font-size: var(--size-16);
           }
         }
       }
     }
     .Research {
-      padding: 15px;
+      padding: var(--size-15);
       .Research_title {
-        font-size: 18px;
+        font-size: var(--size-18);
       }
       .Research_list {
         .Research_item {
@@ -933,7 +937,7 @@ useHead({
             height: auto !important;
           }
           .Research_item_box1 {
-            font-size: 16px;
+            font-size: var(--size-16);
             text-align: center;
           }
           .Research_item_box2 {
@@ -953,7 +957,7 @@ useHead({
           .Research_item_box1,
           &:hover .Research_item_box1 {
             display: block;
-            top: 160px;
+            top: var(--size-160);
           }
           .Research_item_img2,
           &:hover .Research_item_img2 {
@@ -963,13 +967,13 @@ useHead({
       }
     }
     .industry {
-      padding: 15px;
+      padding: var(--size-15);
       .industry_title {
-        font-size: 18px;
-        margin-bottom: 10px;
+        font-size: var(--size-18);
+        margin-bottom: var(--size-10);
       }
       .industry_text {
-        font-size: 14px;
+        font-size: var(--size-14);
       }
       .industry_list {
         .industry_item {
@@ -979,21 +983,21 @@ useHead({
             height: auto;
           }
           div {
-            font-size: 14px;
-            bottom: 5px;
+            font-size: var(--size-14);
+            bottom: var(--size-5);
           }
         }
       }
     }
     .latest {
-      padding: 15px;
+      padding: var(--size-15);
       .latest_list {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         .latest_item {
           width: 48%;
-          margin-bottom: 10px;
+          margin-bottom: var(--size-10);
           margin-right: 0;
           img {
             width: 100%;
@@ -1003,10 +1007,10 @@ useHead({
             padding: 10px 10px 20px;
             .latest_item_content_btn {
               width: 100px;
-              height: 35px;
-              font-size: 14px;
-              line-height: 35px;
-              margin-top: 10px;
+              height: var(--size-35);
+              font-size: var(--size-14);
+              line-height: var(--size-35);
+              margin-top: var(--size-10);
             }
           }
         }

pages/report-industries/detail.vue

@@ -50,9 +50,9 @@
               </div>
             </div>
             <div class="content_t_r">
-              <div class="content_t_r_price">${{Number(price).toFixed(2)}}</div>
-              <div class="content_t_r_btn">Request Sample</div>
-              <div class="content_t_r_btn">Buy Now</div>
+              <div class="content_t_r_price">${{price?Number(price).toFixed(2):''}}</div>
+              <div class="content_t_r_btn" @click="handleDemand">Request Sample</div>
+              <div class="content_t_r_btn" @click="handleDemand">Buy Now</div>
               <div class="content_t_r_btn black">Download Sample</div>
             </div>
           </div>
@@ -128,6 +128,9 @@
       </div>
     </div>
     <ConnectUs />
+    <n-modal :show="demandShow" @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>
 
@@ -668,6 +671,7 @@ getData();
             text-align: center;
             line-height: var(--size-64);
             margin-top: var(--size-12);
+            cursor: pointer;
           }
           .black {
             background: #000000;

pages/report-industries/index.vue

@@ -20,7 +20,7 @@
         </div>
         <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(
+            <a class="box_l_list_item" :href="'/report-industries' +(item.marketType ? '/' + item.marketType: '')" :class="{active:item.marketType === record.marketType}" @click.prevent=" handleCategory(
                               item,
                               item.marketType,
                               item.marketTypeName
@@ -30,7 +30,7 @@
                 <div></div>
                 <span class="iconfont icon-duigou"></span>
               </div>
-            </div>
+            </a>
           </template>
         </div>
         <div class="box_l_title">
@@ -40,19 +40,21 @@
           </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(
+          <div>
+            <template v-for="(item,i) in publishDates" :key="'a'+i">
+              <div class="box_l_list_item" :class="{active:item.publishDateValue === record.queryPublishDate}" @click=" handlePublishDate(
                           item,
                           item.publishDateValue,
                           item.marketTypeName
                         )">
-              <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 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>
-          </template>
+            </template>
+          </div>
           <div class="selBox">
             <n-date-picker v-model:value="publishDateStr" clearable placeholder="Select Date" type="date" />
             <span> - </span>
@@ -87,8 +89,8 @@
                 </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 class="box_r_list_item_btn_l" @click.prevent="handleDemand(item, '1')">Request</div>
+                <div class="box_r_list_item_btn_r" @click.prevent="handleDemand(item, '2')">Buy Now</div>
               </div>
             </a>
           </template>
@@ -121,6 +123,9 @@
       </div>
     </div>
   </div>
+  <n-modal :show="demandShow" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'width: 720px'">
+    <demand :rowId="rowId" :rowPrice="rowPrice" :rowType="rowType" :rowRegion="rowRegion" @closeDialog="handleCloseDiag" />
+  </n-modal>
 </template>
 
 <script lang="ts" setup>
@@ -184,14 +189,20 @@ 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;
+const dealTypeShow = (type: string) => {
+  if (categories.value) {
+    let arr = categories.value;
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i].marketType == type) {
+        return arr[i].marketTypeName;
+      }
     }
   }
 };
+// 联系我们
+function handleContact() {
+  demandShow.value = true;
+}
 onMounted(async () => {
   if (typeof window !== "undefined") {
     window.scrollTo(0, 1);
@@ -395,6 +406,9 @@ function queryPublishDate() {
       const date02 = formatDate(dateEnd, "yyyy-MM-dd");
       publishDateTag.value = "<" + date02;
       record.value.publishDateEnd = date02;
+    } else {
+      record.value.publishDateStr = undefined;
+      record.value.publishDateEnd = undefined;
     }
   }
   record.value.queryPublishDate = "";