feat: API接口服务落地页内容替换调整

src/web/staticres/frontRouter/pc/dataInterface/css/index-interface.css

@@ -164,6 +164,9 @@
   text-align: left;
   cursor: pointer;
 }
+.list-hover-list .list-hover-item:not(:last-of-type) {
+  border-bottom: 1px solid #F2F2F4;
+}
 .list-hover-title {
   font-size: 16px;
   line-height: 32px;
@@ -286,10 +289,63 @@
   background-image: url(/frontRouter/pc/dataInterface/images/interface1/use-where-title@2x.png);
 }
 .use-where .use-where-card-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 500px;
   height: 120px;
+  background-color: #fff;
+}
+.use-where .use-where-card-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100%;
+  flex-shrink: 0;
+  border-top-right-radius: 16px;
+  box-shadow: 4px 0px 4px 0px #00000014;
+}
+.use-where .use-where-card-left img {
+  display: block;
+  width: 48px;
+  height: 48px;
+}
+.blue-bg {
+  background-color: #2A80F0;
+}
+.deepblue-bg {
+  background-color: #1A14C0;
+}
+.lightblue-bg {
+  background-color: #00D0FF;
+}
+.green-bg {
+  background-color: #0BBE65;
+}
+.use-where .use-where-card-right {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 20px;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+}
+.u-card-title {
+  font-size: 16px;
+  line-height: 32px;
+  color: #1d1d1d;
 }
+.u-card-content {
+  font-size: 14px;
+  line-height: 22px;
+  color: #999;
+}
+
+.api-service .api-content-module-card-line,
+.core-feature .api-content-module-card-line,
 .use-where .api-content-module-card-line {
   display: flex;
   align-items: center;
@@ -303,9 +359,35 @@
 }
 
 
+.api-service .api-content-module-card-line,
+.core-feature .api-content-module-card-line {
+  padding: 0 24px;
+}
 .core-feature .api-content-module-title {
   background-image: url(/frontRouter/pc/dataInterface/images/interface1/core-feature-title-text@2x.png);
 }
+.api-content-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px 0;
+  flex: 1;
+}
+.api-content-item:first-of-type {
+  margin-right: 138px;
+}
+.api-content-item-left {
+  margin-right: 34px;
+}
+.api-content-item-left img {
+  display: block;
+  width: 36px;
+  height: 36px;
+}
+.api-content-item-right {
+  text-align: left;
+  flex: 1;
+}
 
 .banner-bottom-data-text .data_text {
   display: flex;

src/web/templates/dataMarket/dataInterface/index.html

@@ -128,19 +128,43 @@
       <div class="api-content-module-main">
         <div class="api-content-module-card-list">
           <div class="api-content-module-card-line">
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/use-where-card-1@2x.png" alt="">
+            <div class="use-where-card-item">
+              <div class="use-where-card-left blue-bg">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/use-where-icon-1@2x.png" alt="">
+              </div>
+              <div class="use-where-card-right">
+                <div class="user-where-card-right-title u-card-title">销售线索获取</div>
+                <div class="user-where-card-right-content u-card-content">剑鱼 API 接口提供海量招投标信息，可转化为精准销售线索并导入 CRM。助力企业挖掘潜在客户，提升销售业绩，无论是大企扩张还是小企突破，都能找到业务增长机会。</div>
+              </div>
             </div>
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/use-where-card-2@2x.png" alt="">
+            <div class="use-where-card-item">
+              <div class="use-where-card-left lightblue-bg">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/use-where-icon-2@2x.png" alt="">
+              </div>
+              <div class="use-where-card-right">
+                <div class="user-where-card-right-title u-card-title">把握市场方向</div>
+                <div class="user-where-card-right-content u-card-content">通过接口，企业可从多维度剖析市场，了解区域、行业动态及趋势。有助于制定精准策略，抢占市场先机，避免决策失误。</div>
+              </div>
             </div>
           </div>
           <div class="api-content-module-card-line">
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/use-where-card-3@2x.png" alt="">
+            <div class="use-where-card-item">
+              <div class="use-where-card-left deepblue-bg">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/use-where-icon-3@2x.png" alt="">
+              </div>
+              <div class="use-where-card-right">
+                <div class="user-where-card-right-title u-card-title">竞争合作双驱</div>
+                <div class="user-where-card-right-content u-card-content">接口的企业画像让企业了解竞争对手和合作伙伴的关键信息，包括中标动态、主要客户、市场分布等。</div>
+              </div>
             </div>
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/use-where-card-4@2x.png" alt="">
+            <div class="use-where-card-item">
+              <div class="use-where-card-left green-bg">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/use-where-icon-4@2x.png" alt="">
+              </div>
+              <div class="use-where-card-right">
+                <div class="user-where-card-right-title u-card-title">标讯数据接入</div>
+                <div class="user-where-card-right-content u-card-content">对于软件企业，接口是提升竞争力的利器。接入标讯数据可提升产品价值，为客户提供销售线索，提高竞争力。</div>
+              </div>
             </div>
           </div>
         </div>
@@ -154,13 +178,43 @@
       <div class="api-content-module-main">
         <div class="api-content-module-card-list">
           <div class="api-content-module-card-line">
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/core-feature-card-1@2x.png" alt="">
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon3.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">数据全景覆盖</div>
+                <div class="api-content-item-right-content u-card-content">接口涵盖全国、全行业、全类型的招投标信息，热门行业数据量大且更新及时。</div>
+              </div>
+            </div>
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon4.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">多维度条件匹配</div>
+                <div class="api-content-item-right-content u-card-content">数据接口具备强大的多维度筛选优势，可灵活设置条件，精准获取所需数据。</div>
+              </div>
             </div>
           </div>
           <div class="api-content-module-card-line">
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/core-feature-card-2@2x.png" alt="">
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon7.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">快速响应</div>
+                <div class="api-content-item-right-content u-card-content">采用高性能架构，高并发量下快速准确响应。</div>
+              </div>
+            </div>
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon9.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">安全可靠</div>
+                <div class="api-content-item-right-content u-card-content">全方位保障，保证接口运行的稳定性和安全性。</div>
+              </div>
             </div>
           </div>
         </div>
@@ -173,8 +227,23 @@
       <div class="api-content-module-main">
         <div class="api-content-module-card-list">
           <div class="api-content-module-card-line">
-            <div class="use-where-card-item img-container">
-              <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/interface1/api-service-card@2x.png" alt="">
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon8.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">接入轻松无忧</div>
+                <div class="api-content-item-right-content u-card-content">接口接入流程简单。企业只需留下公司信息，经审核后按文档操作，普通技术人员即可完成，快速获取数据资源。</div>
+              </div>
+            </div>
+            <div class="api-content-item">
+              <div class="api-content-item-left">
+                <img src="{{Msg "seo" "cdn"}}/frontRouter/pc/dataInterface/images/icon6.png" alt="">
+              </div>
+              <div class="api-content-item-right">
+                <div class="api-content-item-right-title u-card-title">使用随心所欲</div>
+                <div class="api-content-item-right-content u-card-content">无论是按行业、地域、规模、时间等，都能精准设置匹配条件。用户可根据自身需求，灵活组合这些维度，快速获取符合特定要求的招投标信息、企业数据等。</div>
+              </div>
             </div>
           </div>
         </div>