feat: 首页地区导航

src/web/staticres/js/index/index_2023.12.js

@@ -5,12 +5,22 @@ var _page = {
   },
   initEvents: function () {
     this.initSearchEvents()
+    this.initBiddingDescTab()
   },
   initSearchEvents: function () {
     $('.search-type-list').on('click', '.search-type-item', function (e) {
       $(this).addClass('active').siblings().removeClass('active')
     })
   },
+  initBiddingDescTab: function () {
+    var tabWrapper = $('.bidding-desc-module')
+    tabWrapper.find('.bidding-desc-item').on('click', function () {
+      var key = $(this).attr('data-name')
+      $(this).addClass('active').siblings().removeClass('active')
+      tabWrapper.find('.bidding-desc-content-card-list[data-value='+ key +']').show().siblings().hide()
+    })
+    tabWrapper.find('.bidding-desc-item:eq(0)').trigger('click')
+  },
   initHotBuyerShortName: function () {
     $('.hot-buyer-list .list-info-item-head').each(function() {
       var head_text = $(this).text()

src/web/staticres/pccss/index_pc.css

@@ -108,10 +108,9 @@
     align-items: center;
     justify-content: space-between;
     line-height: 22px;
+    width: 100%;
 }
-.cms-card-list-item:not(:last-of-type) {
-    margin-bottom: 10px;
-}
+
 .cms-card-list-item-left {
     display: block;
     margin-right: 10px;
@@ -123,6 +122,13 @@
     font-size: 12px;
     color: #999;
 }
+
+/* ------card-list-item */
+
+.cms-card .cms-card-list-item:not(:last-of-type) {
+    margin-bottom: 10px;
+}
+
 .cms-card-header-right {
     font-size: 12px;
     line-height: 18px;
@@ -387,23 +393,26 @@
 }
 
 /* message-module */
-.index-message-list-container .list-msg .el-carousel__container{
-    height:24px !important;
+.index-message-list-container .list-msg .el-carousel__container {
+    height: 24px !important;
 }
-.index-message-list-container .list-msg .el-carousel, .index-message-list-container .list-msg .el-carousel .el-carousel__item{
-    width:100%;
+
+.index-message-list-container .list-msg .el-carousel,
+.index-message-list-container .list-msg .el-carousel .el-carousel__item {
+    width: 100%;
 }
+
 .index-message-list-container .list-msg {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 1200px;
-  height: 24px;
-  margin: 0px auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 1200px;
+    height: 24px;
+    margin: 0px auto;
 }
 
 .index-message-list-container .noActive {
-  margin-top: 56px;
+    margin-top: 56px;
 }
 .index-message-list-container .list-msg .l-msg{
     display: flex;
@@ -412,79 +421,79 @@
     align-items: center;
 }
 .index-message-list-container .list-msg .l-msg .words {
-  width:calc(50% - 16px);
-  display: flex;
-  flex-direction: initial;
-  align-items: center;
+    width: calc(50% - 16px);
+    display: flex;
+    flex-direction: initial;
+    align-items: center;
 }
 .index-message-list-container .list-msg .l-msg .words:nth-of-type(1){
     margin-right:32px;
 }
 
 .index-message-list-container .list-msg .l-msg .words .icon_voice {
-  margin-right: 4px;
-  width: 24px;
-  height: 24px;
+    margin-right: 4px;
+    width: 24px;
+    height: 24px;
 }
 
 .index-message-list-container .list-msg .r-msg {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
 }
 .index-message-list-container .list-msg .l-msg .words i {
-  width: 6px;
-  height: 6px;
-  background: #FF3A20;
-  border-radius: 50%;
-  margin-right: 9px;
+    width: 6px;
+    height: 6px;
+    background: #FF3A20;
+    border-radius: 50%;
+    margin-right: 9px;
 }
 
 .index-message-list-container .list-msg .l-msg .words h3 {
-  font-size: 16px;
-  font-weight: 400;
-  color: #1D1D1D;
-  line-height: 24px;
-  white-space: nowrap;
+    font-size: 16px;
+    font-weight: 400;
+    color: #1D1D1D;
+    line-height: 24px;
+    white-space: nowrap;
 }
 
 .index-message-list-container .list-msg .l-msg .words .title {
     /*display: inline-block;*/
     /*max-width:390px;*/
-  font-size: 14px;
-  color: #1D1D1D;
-  line-height: 24px;
-  margin: 0 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: 14px;
+    color: #1D1D1D;
+    line-height: 24px;
+    margin: 0 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .index-message-list-container .list-msg .l-msg .words span:hover {
-  color: #2CB7CA;
-  cursor: pointer;
+    color: #2CB7CA;
+    cursor: pointer;
 }
 
 .index-message-list-container .list-msg .l-msg .words p {
-  font-size: 12px;
-  color: #999999;
-  line-height: 24px;
-  white-space: nowrap;
+    font-size: 12px;
+    color: #999999;
+    line-height: 24px;
+    white-space: nowrap;
 }
 
 .index-message-list-container .list-msg .l-msg .words .isActive {
-  margin-left: 15px;
+    margin-left: 15px;
 }
 .index-message-list-container .list-msg  .no-read-count{
     background: linear-gradient(0deg, #FB483D, #FB483D);
-    color:#FFF;
+    color: #FFF;
     text-align: center;
     font-size: 12px;
     line-height: 18px;
     padding: 2px 8px;
     border-radius: 10px 10px 0 10px;
-    min-width:75px;
-    margin-right:12px;
+    min-width: 75px;
+    margin-right: 12px;
 }
 
 /* zb-aside-card */
@@ -817,7 +826,7 @@
     margin-bottom: 16px;
 }
 /* hot-chart */
-.data-service-module  .hot-industry-year-chart {
+.data-service-module .hot-industry-year-chart {
     padding: 20px;
     min-height: 382px;
     border-radius: 8px;
@@ -833,6 +842,109 @@
 }
 
 /* bidding-desc-module */
-.bidding-desc-module {
-    
+.bidding-desc-module {}
+
+.bidding-desc-module .service-module-content-bd {
+    margin-top: 20px;
+    padding: 10px 0 16px;
+    width: 100%;
+}
+
+.bidding-desc-module .bidding-desc-content-card-list {
+    width: 100%;
+}
+
+.bidding-desc-module .bidding-desc-content-card-list .cms-card-list-item {
+    margin-right: 40px;
+    width: 30%;
+}
+
+.bidding-desc-module .bidding-desc-content-card-list .cms-card-list-item:nth-of-type(3n) {
+    margin-right: 0;
+}
+
+.bidding-desc-module .bidding-desc-module-content .bidding-desc-item:not(:last-of-type) {
+    margin-right: 20px;
+}
+
+/* partners-project-container */
+.partners-project-list {
+    display: flex;
+    align-items: center;
+}
+
+.partners-project-item {
+    width: 184px;
+    height: 60px;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid red;
+}
+
+.partners-project-item:not(:last-of-type) {
+    margin-right: 19px;
+}
+
+.partners-project-item a,
+.partners-project-item img {
+    display: block;
+    width: 100%;
+}
+
+/* area-nav 底部区域导航 */
+.area-navigation-card {
+    padding: 30px 20px;
+}
+.area-aside-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    line-height: 28px;
+}
+.area-aside-item {
+    margin-bottom: 20px;
+    margin-right: 36px;
+}
+
+.area-aside-item .area-aside-item-name {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 12px;
+    border-radius: 8px;
+    background: linear-gradient(180deg, rgba(42, 190, 209, 0.1) 0%, rgba(42, 190, 209, 0) 100%);
+}
+.area-aside-item-name a {
+    color: #2ABED1;
+    font-size: inherit;
+}
+.area-aside-item .area-aside-item-children {
+    padding-left: 58px;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    flex-wrap: wrap;
+}
+.area-aside-item .area-aside-item-child {
+    margin: 0 6px;
+}
+.area-group--bottom {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 22px;
+}
+.area-item--bottom .area-aside-item .area-aside-item-name {
+    max-height: 28px;
+}
+.area-item--bottom {
+    width: 25%;
+    align-self: flex-start;
 }
+/* 底部地区导航 end */

src/web/staticres/public-pc/css/header-nav-mini.css

@@ -91,9 +91,15 @@ a {
     border-color: #2ABED1;
 }
 
-.j-s-button.plain.active {
+.j-s-button.plain.bg {
     background-color: rgba(42, 190, 209, 0.08);
 }
+.j-s-button.plain.bg.active {
+    color: #fff;
+    border-color: #2ABED1;
+    background-color: #2ABED1;
+}
+
 
 /* empty */
 .image > img {

src/web/templates/pc/newIndex.html

@@ -142,6 +142,14 @@
             {{include "/pc/template/index/cms-card-deep.html"}}
           </aside>
         </section>
+        <!-- 客户合作案例 -->
+        <section class="main-module swiper-module-30">
+          {{include "/pc/template/index/partners-project-list.html"}}
+        </section>
+        <!-- 地区导航 -->
+        <section class="main-module">
+          {{include "/pc/template/index/area-nav-module.html"}}
+        </section>
       </section>
     </main>
     <div class="body-footer">

src/web/templates/pc/template/index/area-nav-module.html

@@ -0,0 +1,174 @@
+<!-- 区域导航 -->
+<section class="module-card-container area-navigation-module">
+  <header class="module-card-header">
+    <h3 class="module-card-title">地区导航</h3>
+  </header>
+  <main class="module-card-content area-navigation-card">
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">华北</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_bj.html" target="_blank">北京</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_tj.html" target="_blank">天津</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_heb.html" target="_blank">河北</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_sx.html" target="_blank">山西</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_nmg.html" target="_blank">内蒙古</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">华中</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_ha.html" target="_blank">河南</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_hb.html" target="_blank">湖北</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_hn.html" target="_blank">湖南</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">华东</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_sh.html" target="_blank">上海</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_js.html" target="_blank">江苏</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_zj.html" target="_blank">浙江</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_ah.html" target="_blank">安徽</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_fj.html" target="_blank">福建</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_jx.html" target="_blank">江西</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_sd.html" target="_blank">山东</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">西南</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_cq.html" target="_blank">重庆</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_sc.html" target="_blank">四川</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_gz.html" target="_blank">贵州</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_yn.html" target="_blank">云南</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_xz.html" target="_blank">西藏</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">西北</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_sn.html" target="_blank">陕西</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_gs.html" target="_blank">甘肃</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_qh.html" target="_blank">青海</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_nx.html" target="_blank">宁夏</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_xj.html" target="_blank">新疆</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">东北</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_ln.html" target="_blank">辽宁</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_jl.html" target="_blank">吉林</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_hlj.html" target="_blank">黑龙江</a>
+        </div>
+      </div>
+    </div>
+    <div class="area-aside-item">
+      <div class="area-aside-item-name">
+        <p class="highlight-text">华南</p>
+      </div>
+      <div class="area-aside-item-children">
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_gd.html" target="_blank">广东</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_gx.html" target="_blank">广西</a>
+        </div>
+
+        <div class="area-aside-item-child">
+          <a class="cms-link" href="/a_hi.html" target="_blank">海南</a>
+        </div>
+      </div>
+    </div>
+  </main>
+</section>

src/web/templates/pc/template/index/bidding-desc-module.html

@@ -4,17 +4,64 @@
     <h3 class="module-card-title">招投标攻略</h3>
   </header>
   <main class="module-card-content bidding-desc-module-content">
-    <ul class="service-module-content-hd bidding-desc-list">
-      <li class="bidding-desc-item" data-name="招标采购">招标采购</li>
-      <li class="bidding-desc-item" data-name="投标指南">投标指南</li>
-      <li class="bidding-desc-item" data-name="中标技巧">中标技巧</li>
-      <li class="bidding-desc-item" data-name="回答百科">回答百科</li>
+    <ul class="service-module-content-hd bidding-desc-list clearfix">
+      <li class="bidding-desc-item j-s-button plain bg" data-name="招标采购">招标采购</li>
+      <li class="bidding-desc-item j-s-button plain bg" data-name="投标指南">投标指南</li>
+      <li class="bidding-desc-item j-s-button plain bg" data-name="中标技巧">中标技巧</li>
     </ul>
-    <ul class="service-module-content-bd">
-      <li class="bidding-desc-content-card-list" data-name="招标采购"></li>
-      <li class="bidding-desc-content-card-list" data-name="投标指南"></li>
-      <li class="bidding-desc-content-card-list" data-name="中标技巧"></li>
-      <li class="bidding-desc-content-card-list" data-name="回答百科"></li>
+    <ul class="service-module-content-bd clearfix">
+      <li class="bidding-desc-content-card-list" data-value="招标采购" style="display: none;">
+        <ul class="bidding-desc-card-column clearfix">
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+        </ul>
+      </li>
+      <li class="bidding-desc-content-card-list" data-value="投标指南" style="display: none;">
+        <ul class="bidding-desc-card-column clearfix">
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+        </ul>
+      </li>
+      <li class="bidding-desc-content-card-list" data-value="中标技巧" style="display: none;">
+        <ul class="bidding-desc-card-column clearfix">
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+          <li class="cms-card-list-item">
+            <a class="cms-card-list-item-left cms-link ellipsis" target="_blank" title="" href="" target="_blank">fasfasdfasdfsadfasf</a>
+            <span class="cms-card-list-item-right">asdfsafsdafsadf</span>
+          </li>
+        </ul>
+      </li>
     </ul>
-  </main> 
+  </main>
 </section>

src/web/templates/pc/template/index/partners-project-list.html

@@ -0,0 +1,15 @@
+<!-- 客户合作案例 -->
+<section class="partners-project-container">
+  <ul class="partners-project-list">
+    <li class="partners-project-item">
+      <a href="">
+        <img src="" alt="">
+      </a>
+    </li>
+    <li class="partners-project-item">
+      <a href="">
+        <img src="" alt="">
+      </a>
+    </li>
+  </ul>
+</section>