浏览代码

fix: 门户网站UI调整

周玉环 1 天之前
父节点
当前提交
aa9297635c

+ 37 - 17
xinkeaboard-web/assets/style/decorate.scss

@@ -956,7 +956,7 @@
 .adv_04_wrap .floor_title h2 {
 .adv_04_wrap .floor_title h2 {
   width: 100%;
   width: 100%;
   line-height: 35px;
   line-height: 35px;
-  text-align: center;
+  // text-align: center;
   margin: 0 auto;
   margin: 0 auto;
   font-size: 28px;
   font-size: 28px;
   color: #333;
   color: #333;
@@ -996,16 +996,21 @@
   float: left;
   float: left;
   width: 234px;
   width: 234px;
   // height: 287px;
   // height: 287px;
-  margin: 0 10px 10px 0;
+  // margin: 0 10px 10px 0;
   padding: 10px;
   padding: 10px;
   background-color: #fff;
   background-color: #fff;
   box-sizing: border-box;
   box-sizing: border-box;
 }
 }
 
 
-.adv_04_wrap .floor_goods .item:nth-child(5n + 5) {
-  margin-right: 0 !important;
+.adv_04_wrap .floor_goods .item:nth-child(n + 6) {
+  border-top: 1px solid #f2f2f2;
+}
+
+.adv_04_wrap .floor_goods .item {
+  border-right: 1px solid #f2f2f2;
 }
 }
 
 
+
 .adv_04_wrap .floor_goods .item .wrap {
 .adv_04_wrap .floor_goods .item .wrap {
   width: 172px;
   width: 172px;
   text-align: center;
   text-align: center;
@@ -1013,6 +1018,7 @@
   font-size: 14px;
   font-size: 14px;
   position: relative;
   position: relative;
 }
 }
+
 .adv_04_wrap .floor_goods .item .wrap:hover .title a{
 .adv_04_wrap .floor_goods .item .wrap:hover .title a{
   color: $colorMain;
   color: $colorMain;
 }
 }
@@ -1066,9 +1072,10 @@
 }
 }
 
 
 .adv_04_wrap .floor_goods .item .wrap .title a {
 .adv_04_wrap .floor_goods .item .wrap .title a {
-  color: #000;
+  font-weight: bold;
+  font-size: 16px;
+  color: #282E30;
   line-height: 19px !important;
   line-height: 19px !important;
-  font-size: 15px;
   overflow: hidden;
   overflow: hidden;
   text-overflow: ellipsis;
   text-overflow: ellipsis;
   display: -webkit-box;
   display: -webkit-box;
@@ -3834,10 +3841,11 @@ a {
 }
 }
 
 
 .adv_28_wrap .industry-booth .prod-txt {
 .adv_28_wrap .industry-booth .prod-txt {
-  font-size: 15px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #282E30;
   line-height: 24px;
   line-height: 24px;
   height: 48px;
   height: 48px;
-  color: #000;
   display: -webkit-box;
   display: -webkit-box;
   overflow: hidden;
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-line-clamp: 2;
@@ -3884,6 +3892,7 @@ a {
 
 
 
 
 .adv_28_wrap .industry-booth .industry-link {
 .adv_28_wrap .industry-booth .industry-link {
+  position: relative;
   display: block;
   display: block;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
@@ -3910,21 +3919,26 @@ a {
 }
 }
 
 
 .adv_28_wrap .industry-booth .industry-theme-info {
 .adv_28_wrap .industry-booth .industry-theme-info {
-  position: relative;
+  position: absolute;
+  bottom: 30px;
 }
 }
 
 
 .adv_28_wrap .industry-booth .industry-title {
 .adv_28_wrap .industry-booth .industry-title {
-  font-weight: 500;
-  margin-bottom: 20px;
-  font-size: 22px;
-  line-height: 30px;
-  color: #222;
+  margin-bottom: 40px;
+  font-weight: bold;
+  font-size: 38px;
+  color: #FFFFFF;
+  line-height: 44px;
 }
 }
 
 
 .adv_28_wrap .industry-booth .soure-now .btn {
 .adv_28_wrap .industry-booth .soure-now .btn {
-  height: 30px;
-  line-height: 28px;
+  line-height: 42px;
   padding: 0 10px;
   padding: 0 10px;
+  width: 157px;
+  height: 42px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #FFFFFF;
 }
 }
 
 
 
 
@@ -3961,7 +3975,7 @@ a {
   position: relative;
   position: relative;
   height: 520px;
   height: 520px;
   background: #fff;
   background: #fff;
-  //margin-bottom: 20px;
+  margin-bottom: 40px;
   box-shadow: -1px 5px 10px 0px #ddd;
   box-shadow: -1px 5px 10px 0px #ddd;
 }
 }
 .home-slider .s1 {
 .home-slider .s1 {
@@ -3975,6 +3989,12 @@ a {
   float: left;
   float: left;
 }
 }
 
 
+.home-slider-bottom {
+  width: 100%;
+  height: 12px;
+  background: linear-gradient( 90deg, #036EB8 0%, #4AA498 100%);
+}
+
 .home-slider .s3 {
 .home-slider .s3 {
   width: 250px;
   width: 250px;
   float: left;
   float: left;

+ 5 - 4
xinkeaboard-web/components/CategorySortTop.vue

@@ -45,7 +45,7 @@
       </li>
       </li>
       <!-- 一级分类 end-->
       <!-- 一级分类 end-->
     </ul>
     </ul>
-    <img v-show="showDown" src="/arrows_down_double-34.svg" class="img" />
+    <!-- <img v-show="showDown" src="/arrows_down_double-34.svg" class="img" /> -->
 
 
   </div>
   </div>
 </template>
 </template>
@@ -147,6 +147,7 @@ const toGoodsList = (item) => {
   z-index: 9;
   z-index: 9;
   -webkit-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   box-sizing: border-box;
+  background-color: #fff;
   .img{
   .img{
     width: 24px;
     width: 24px;
     position: absolute;
     position: absolute;
@@ -184,7 +185,7 @@ const toGoodsList = (item) => {
       /*滚动条里面小方块*/
       /*滚动条里面小方块*/
       border-radius: 10px;
       border-radius: 10px;
       box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
       box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-      background   : #00985e;
+      background   : $colorMain;
     }
     }
     &::-webkit-scrollbar-track {
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       /*滚动条里面轨道*/
@@ -221,8 +222,8 @@ const toGoodsList = (item) => {
       }
       }
 
 
       &:hover {
       &:hover {
-
-        border-left-color: #00985e;
+        background: #F6F8FA;
+        // border-left-color: $colorMain;
 
 
         .children {
         .children {
           display: inline-block;
           display: inline-block;

+ 15 - 6
xinkeaboard-web/components/NavCatHeader.vue

@@ -2,11 +2,13 @@
   <div class="nav_cat">
   <div class="nav_cat">
     <div class="header">
     <div class="header">
       <div class="product_sort" >
       <div class="product_sort" >
-        <img :src="sortUrl" alt />
+        <!-- <img :src="sortUrl" alt /> -->
         <nuxt-link to="/goods/Category" target="_blank" class="sort">
         <nuxt-link to="/goods/Category" target="_blank" class="sort">
           <span >{{L['产品分类']}}</span>
           <span >{{L['产品分类']}}</span>
         </nuxt-link>
         </nuxt-link>
-        <!-- <CategorySortTop /> -->
+        <div class="category_sort">
+          <CategorySortTop />
+        </div>
       </div>
       </div>
       <nav>
       <nav>
         <li v-if="showIndex">
         <li v-if="showIndex">
@@ -150,10 +152,11 @@ onMounted(() => {
 $colorMain: #e2231a !default; //主色、文字选中、搜索
 $colorMain: #e2231a !default; //主色、文字选中、搜索
 
 
 .header {
 .header {
-  width: 1210px;
+  width: 100%;
   height: 45px;
   height: 45px;
   margin: 0 auto;
   margin: 0 auto;
   display: flex;
   display: flex;
+  justify-content: center;
   overflow: visible;
   overflow: visible;
   position: relative;
   position: relative;
   .product_sort {
   .product_sort {
@@ -167,10 +170,9 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     flex-wrap: wrap;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
     cursor: pointer;
     cursor: pointer;
     box-sizing: border-box;
     box-sizing: border-box;
-    padding: 0 0px 0 26px;
     z-index:888;
     z-index:888;
     a{
     a{
       font-weight: bold;
       font-weight: bold;
@@ -178,8 +180,15 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
       color: #282E30;
       color: #282E30;
     }
     }
 
 
+    .category_sort {
+      position: absolute;
+      top: 40px;
+      display: none;
+    }
+
     &:hover {
     &:hover {
-      #category_sort {
+      background: #F6F8FA;
+      .category_sort {
         display: block;
         display: block;
       }
       }
     }
     }

+ 14 - 53
xinkeaboard-web/components/SldDiy.vue

@@ -16,9 +16,6 @@
         </el-carousel-item>
         </el-carousel-item>
       </el-carousel>
       </el-carousel>
       <div class="home-slider" v-if="item.json_data && item.json_data.type == 'main_banner_pc'">
       <div class="home-slider" v-if="item.json_data && item.json_data.type == 'main_banner_pc'">
-        <!-- <div class="s1">
-          <CategorySortTop/>
-        </div> -->
         <div class="s2">
         <div class="s2">
           <el-carousel
           <el-carousel
                   v-if="item.json_data && item.json_data.type == 'main_banner_pc'"
                   v-if="item.json_data && item.json_data.type == 'main_banner_pc'"
@@ -35,53 +32,9 @@
               </a>
               </a>
             </el-carousel-item>
             </el-carousel-item>
           </el-carousel>
           </el-carousel>
+          <div class="home-slider-bottom"></div>
         </div>
         </div>
-        <!-- <div class="s3">
-          <a href="javascript:void(0)" @click="diyNavTo(item.json_data.info.left)">
-            <p class="title" >
-              {{ item.json_data.info.left.title.initialValue }}
-            </p>
-          </a>
-
-          <p class="link" v-if="!filtersStore.getLoginFlag">
-            <nuxt-link to="/login">
-              <span>{{L['登录']}}</span>
-            </nuxt-link>
-          </p>
-
-          <p class="link" v-if="!filtersStore.getLoginFlag">
-            <nuxt-link to="/register">
-              <span>{{L['注册']}}</span>
-            </nuxt-link>
-          </p>
-
-          <p class="link" @click="loginOut" v-if="filtersStore.getLoginFlag">
-              <a >{{L['退出']}}</a>
-          </p> -->
-
-<!--          <p class="link">-->
-<!--            <nuxt-link to="/home/contact">-->
-<!--              <span>{{L['发布需求']}}</span>-->
-<!--            </nuxt-link>-->
-<!--          </p>-->
-
-          <!-- <p class="link" @click="goSupplierUrl"> -->
-<!--            <nuxt-link to="http://seller.b2b.test.advichcloud.com/user/login">-->
-              <!-- <a>{{L['供应商']}}</a> -->
-<!--            </nuxt-link>-->
-          <!-- </p> -->
-
-          <!-- <a href="javascript:void(0)" v-for="(val, key) in item.json_data.info.right"
-             :key="key"
-             @click="diyNavTo(val)">
-            <p class="desc">
-              {{ quillEscapeToHtml(val.title.initialValue) }}
-            </p>
-          </a>
-        </div> -->
       </div>
       </div>
-
-
       <!-- adv_01 start-->
       <!-- adv_01 start-->
       <div
       <div
         class="adv_01_wrap"
         class="adv_01_wrap"
@@ -180,17 +133,17 @@
       >
       >
         <div class="floor_title">
         <div class="floor_title">
           <h2>
           <h2>
-            <font
+            <!-- <font
               v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
               v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
               >&nbsp;</font
               >&nbsp;</font
-            >
-            <span v-bind:style="{ color: item.json_data.title_info.title_color }">{{
+            > -->
+            <span v-bind:style="{ color: item.json_data.title_info.title_color, fontWeight: 'bold' }">{{
               item.json_data.title_info.title_name
               item.json_data.title_info.title_name
             }}</span>
             }}</span>
-            <font
+            <!-- <font
               v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
               v-bind:style="{ backgroundColor: item.json_data.title_info.title_color }"
               >&nbsp;</font
               >&nbsp;</font
-            >
+            > -->
           </h2>
           </h2>
         </div>
         </div>
         <div class="floor_goods">
         <div class="floor_goods">
@@ -1390,6 +1343,14 @@ onMounted(() => {
 
 
   background: #f1f1f1;
   background: #f1f1f1;
 
 
+  :deep(.el-carousel__indicator) {
+    &.is-active {
+      .el-carousel__button {
+        background-color: $colorMain !important;
+      }
+    }
+  }
+
   .el-carousel__item {
   .el-carousel__item {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;

+ 26 - 17
xinkeaboard-web/components/SldHomeTopSearch.vue

@@ -23,7 +23,7 @@
           />
           />
           <input type="submit" :value="L['搜索']" class="button" @click="search" />
           <input type="submit" :value="L['搜索']" class="button" @click="search" />
         </div>
         </div>
-        <div class="hot_search_wrap">
+        <!-- <div class="hot_search_wrap">
           <div>
           <div>
             <template v-for="(item, index) in hotList.data" :key="index">
             <template v-for="(item, index) in hotList.data" :key="index">
               <a
               <a
@@ -34,7 +34,7 @@
               >
               >
             </template>
             </template>
           </div>
           </div>
-        </div>
+        </div> -->
       </div>
       </div>
       <div class="search_association" id="searchA" v-show="SAList.length && SAShow">
       <div class="search_association" id="searchA" v-show="SAList.length && SAShow">
         <div
         <div
@@ -233,14 +233,16 @@ a:visited {
   height: 80px;
   height: 80px;
     position: relative;
     position: relative;
     z-index: 12;
     z-index: 12;
-    width: 1210px;
+    width: 100%;
     margin: 0 auto 0px;
     margin: 0 auto 0px;
     padding-left: 0px;
     padding-left: 0px;
     padding-right: 0px;
     padding-right: 0px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
+    justify-content: space-around;
     border-bottom: 1px solid #dbdbdb;
     border-bottom: 1px solid #dbdbdb;
     margin-bottom: 10px;
     margin-bottom: 10px;
+    background: #F6F8FA;
   .container_header {
   .container_header {
     width: 100%;
     width: 100%;
     position: fixed;
     position: fixed;
@@ -314,20 +316,20 @@ a:visited {
   .sld_home_top_search_left {
   .sld_home_top_search_left {
     height: 100%;
     height: 100%;
     position: relative;
     position: relative;
-    flex:0 0 250px;
+    flex:0 0 200px;
 
 
     .sld_logo_wrap {
     .sld_logo_wrap {
       height: 100%;
       height: 100%;
 
 
       img {
       img {
-        max-width: 144px;
-        max-height: 100%;
+        width: 100%;
+        // height: 100%;
       }
       }
     }
     }
   }
   }
 
 
   .sld_seach_wrap {
   .sld_seach_wrap {
-    flex: auto;
+    width: 536px;
     padding-top: 4px;
     padding-top: 4px;
     position: relative;
     position: relative;
 
 
@@ -366,34 +368,34 @@ a:visited {
         }
         }
 
 
         input::placeholder {
         input::placeholder {
-          font-size: 12px;
+          font-size: 14px;
           /*font-family: Microsoft YaHei;*/
           /*font-family: Microsoft YaHei;*/
           font-weight: 400;
           font-weight: 400;
-          color: rgb(153, 153, 153);
+          color: rgba(40,46,48,0.6);
         }
         }
 
 
         ::-webkit-input-placeholder {
         ::-webkit-input-placeholder {
           margin-left: 20px;
           margin-left: 20px;
-          font-size: 12px;
+          font-size: 14px;
           /*font-family: Microsoft YaHei;*/
           /*font-family: Microsoft YaHei;*/
           font-weight: 400;
           font-weight: 400;
-          color: rgb(153, 153, 153);
+          color: rgba(40,46,48,0.6);
         }
         }
 
 
         /* 使用webkit内核的浏览器 */
         /* 使用webkit内核的浏览器 */
         :-moz-placeholder {
         :-moz-placeholder {
-          font-size: 12px;
+          font-size: 14px;
           /*font-family: Microsoft YaHei;*/
           /*font-family: Microsoft YaHei;*/
           font-weight: 400;
           font-weight: 400;
-          color: rgb(153, 153, 153);
+          color: rgba(40,46,48,0.6);
         }
         }
 
 
         /* Firefox版本19+ */
         /* Firefox版本19+ */
         :-ms-input-placeholder {
         :-ms-input-placeholder {
-          font-size: 12px;
+          font-size: 14px;
           /*font-family: Microsoft YaHei;*/
           /*font-family: Microsoft YaHei;*/
           font-weight: 400;
           font-weight: 400;
-          color: rgb(153, 153, 153);
+          color: rgba(40,46,48,0.6);
         }
         }
 
 
         /* IE浏览器 */
         /* IE浏览器 */
@@ -488,7 +490,7 @@ a:visited {
   position: relative;
   position: relative;
   z-index: 99;
   z-index: 99;
   height: 40px;
   height: 40px;
-  flex: 0 0 240px;
+  flex: 0 0 210px;
   text-align: center;
   text-align: center;
 
 
   dl {
   dl {
@@ -521,15 +523,22 @@ a:visited {
       img {
       img {
         margin: -2px 11px 0 0px;
         margin: -2px 11px 0 0px;
         vertical-align: middle;
         vertical-align: middle;
-        width: 16px;
+        width: 20px;
       }
       }
 
 
       &.cart_icon_text_wrap {
       &.cart_icon_text_wrap {
+        background-color: #fff;
         a {
         a {
           color: #666666;
           color: #666666;
           font-size: 15px;
           font-size: 15px;
           line-height: 36px;
           line-height: 36px;
         }
         }
+
+        span {
+          font-weight: bold;
+          font-size: 16px;
+          color: $colorMain;
+        }
       }
       }
     }
     }
 
 

+ 1 - 1
xinkeaboard-web/layouts/default.vue

@@ -7,8 +7,8 @@
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
-        <NavTopBar/>
         <slot/>
         <slot/>
+        <NavTopBar/>
         <FooterBottom/>
         <FooterBottom/>
     </div>
     </div>
 </template>
 </template>

+ 2 - 13
xinkeaboard-web/public/email.svg

@@ -1,14 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#00985E;}
-</style>
-<g>
-	<path class="st0" d="M26.7,2H3.3c0,0-0.1,0-0.1,0C1.5,2,0,3.5,0,5.3v19.3C0,26.5,1.5,28,3.3,28h13.1v-2.3H3.3c-0.6,0-1-0.5-1-1v-19
-		L14,16.3l1,1l0.7-0.7l0,0L27.7,5.7v10.6H30v-11C30,3.5,28.5,2,26.7,2z M25.7,4.3L15,14.1L4.3,4.3h0h0.3H25.7z"/>
-	<polygon class="st0" points="26.6,18.9 24.7,20.3 26.1,22 16.6,22 16.6,24.3 25.9,24.3 24.7,25.9 26.6,27.3 29.9,23.1 29.9,23.1 
-		29.9,23.1 	"/>
-</g>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6573 11.6357C15.9044 11.3948 16.3001 11.3998 16.5411 11.6467L18.5724 13.7305C18.8091 13.9732 18.8091 14.3605 18.5724 14.6033L16.5411 16.6864C16.3002 16.9334 15.9045 16.9383 15.6573 16.6974C15.4103 16.4564 15.4054 16.0607 15.6464 15.8136L16.6425 14.7919H12.4377C12.0926 14.7919 11.8129 14.512 11.8127 14.1669C11.8127 13.8217 12.0926 13.5419 12.4377 13.5419H16.6431L15.6464 12.5195L15.6042 12.4719C15.4069 12.2239 15.4255 11.8617 15.6573 11.6357ZM10 9.21143L16.2872 4.375H3.71277L10 9.21143ZM18.75 10C18.75 10.3452 18.4702 10.625 18.125 10.625C17.7798 10.625 17.5 10.3452 17.5 10V5.01892L10.3809 10.4956C10.1563 10.6682 9.8437 10.6682 9.61914 10.4956L2.5 5.01892V15.625H10C10.3452 15.625 10.625 15.9048 10.625 16.25C10.625 16.5952 10.3452 16.875 10 16.875H1.875C1.52982 16.875 1.25 16.5952 1.25 16.25V3.75C1.25 3.40482 1.52982 3.125 1.875 3.125H18.125C18.4702 3.125 18.75 3.40482 18.75 3.75V10Z" fill="#036EB8"/>
 </svg>
 </svg>