Browse Source

feat:右侧栏展示样式修改

zhangsiya 1 year ago
parent
commit
4097e20de6

+ 2 - 6
src/web/staticres/js/login.js

@@ -176,9 +176,7 @@ function toggleLoginDom (type) {
     $('#go-customer-4').show()
     // 客服企微展示
     $('#customer-wework').show()
-    // 登录后客服间隔(样式)
-    $('#login-custom-gap').show()
-    $('#right-side-swhz').addClass('b-radius-left-top')
+    $('#right-side-kfrx').removeClass('b-bottom-left-r')
   } else {
     $("#public-nav .nav-avatar").hide()
     $("#public-nav .work-link").hide()
@@ -188,9 +186,7 @@ function toggleLoginDom (type) {
     $('#go-customer-4').hide()
     // 客服企微隐藏
     $('#customer-wework').hide()
-    // 登录后客服间隔(样式)隐藏
-    $('#login-custom-gap').hide()
-    $('#right-side-swhz').removeClass('b-radius-left-top')
+    $('#right-side-kfrx').addClass('b-bottom-left-r')
   }
 }
 //

+ 59 - 95
src/web/staticres/public-pc/css/pc-bottom.css

@@ -115,19 +115,11 @@
 
 .j-bottom .icon-arrow--up,
 .right-side-box .icon-arrow--up {
-  margin-top: 11px;
+  margin-top: 10px;
 }
 
 /* 上箭头 */
 .icon-arrow--up {
-  /* width: 56px;
-  height: 56px;
-  margin: 0 auto;
-  background-size: 56px;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-image: url(/images/pc/slide_arrow_grey.png); */
-  /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEnSURBVHgB7ZbNrYJAFEaH9zYuLQb6sAN1ydIOtAN3sFP7YaEdaAdWAF4TvsQQZgTmXnXxnYSQYfg5BzIJzhFCCCGEEPItEmdEnufLuq73SZLcZdsWRXFyBvw7A57yTdMcRXwmw7lsiyzLrlVVXZwy6gGQ75kyiVANCMgD9Qi1gAHyQDVCZREH5Nft/tCdkPWx0ljY0V8gJF+W5VHe9DlN05uMF515lS8RFfBOHgPLiMkBQ+WBVcSkgLHywCJidMBUeaAdMSogVh5oRgwO0JIHWhGDArTlgUbE2wAreRAbEQywlgcxEd6AT8mDqRF/vhuK/LbnsIk8aO+97pna+64JBcw7h0zlQV+EuNx953sD5G9xI7tre/FH5MFLBJ6/c4QQQgghhPwcD62mJ887e9SSAAAAAElFTkSuQmCC); */
   width: 24px;
   height: 24px;
   margin: 0 auto;
@@ -139,7 +131,6 @@
 
 .icon-arrow--up.white {
   background-image: url(/images/index/new/up1.png);
-  /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC5SURBVHgB7ZdRDoMgEAX3pvXmHMEjUBv5eDGtSgvL0swkJH7I7swnZgAAAAAAf0fO+bGddTvp9W0zUeSPzBHxQX6OiAv52BE35WNGnMgv5cSNOJOXf2JG3JGXf2NF1MjLnRgR38jL3bERv8jLjDERLeRllm9ES3mZ6RPRQ15m943oKS87+kR4yMuuthGe8rKzXUTeHyJu8rL3XcRqteT9NeUqL7uPEclqKUNSCVnMmdH7AQAAAACueQIAR4pmNbCOwAAAAABJRU5ErkJggg==); */
 }
 
 .right-side-box {
@@ -156,7 +147,7 @@
   position: fixed;
   z-index: 2002;
   /* min-width: 56px; */
-  width: 80px;
+  width: 68px;
   bottom: 108px;
   left: initial;
   right: 1px;
@@ -210,126 +201,105 @@
   /* height: 80px; */
   text-align: center;
   color: #1D1D1D;
-  margin-left: 0;
 }
 
 .right-side-box .desc_text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 20px;
   /* identical to box height, or 157% */
   text-align: center;
   /* white/100% */
   color: #FFFFFF;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .right-side-box .desc_text_b {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 20px;
   /* identical to box height, or 157% */
   text-align: center;
   /* Font/#1d1d1d */
   color: #1D1D1D;
-  margin-top: 4px;
+  margin-top: 2px;
 }
-
-/* .right-side-box .right-side-phone {
-  height: 56px;
-  margin: 6px 0;
-  position: relative;
-} */
 .right-side-box .right-side-phone {
   position: relative;
-  border-radius: 10px 0 0 0;
   width: 100%;
-  height: 80px;
-  background: linear-gradient(180deg, #1699F9 0%, #19C6DC 100%);
-  border-top: 2px solid #FFF;
-  border-left: 2px solid #FFF;
-  box-sizing: border-box;
+  height: 68px;
+  padding-top:10px;
   cursor: pointer;
 }
 
 .right-side-box .right-side-wx {
   position: relative;
   width: 100%;
-  height: 80px;
-  background: linear-gradient(180deg, #F1F4F9 0%, #FFFFFF 100%);
-  border-radius: 0;
-  border-left: 2px solid #FFF;
-  box-sizing: border-box;
+  height: 68px;
   cursor: pointer;
 }
 
 .right-side-box .right-side-app {
   position: relative;
-  border-radius: 0 0 0 10px;
   width: 100%;
-  height: 80px;
-  background: linear-gradient(180deg, #F1F4F9 0%, #FFFFFF 100%);
-  border-bottom: 2px solid #FFF;
-  border-left: 2px solid #FFF;
+  height: 68px;
   box-sizing: border-box;
   cursor: pointer;
 }
+.right-side-box .right-side-one,.right-side-box .right-side-two {
+    box-sizing: border-box;
+    background: #fff;
+    border-left: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    border-top: 2px solid #fff;
+    border-radius: 12px 0 0 12px;
+    background: linear-gradient(180deg, #F1F4F9 0%, #FFFFFF 100%);
+    box-shadow: 0 0 16px rgba(8, 31, 38, 0.14);
+
+}
+.right-side-box .right-side-two {
+    margin-top:16px;
+}
 
 .right-side-box .right-side-kf {
   position: relative;
-  border-radius: 0 !important;
-  width: 100% !important;
-  height: 80px !important;
+  width: 68px;
+  height: 68px;
   background: linear-gradient(180deg, #F56500 0%, #F79E51 100%) !important;
-  border-left: 2px solid #FFF;
   box-sizing: border-box;
   cursor: pointer;
 }
+.right-side-box .right-side-kf .hover-open-box{
+    text-align:center;
+    top:10px;
+    left:0;
+}
+.right-side-box .right-side-kf img {
+  width:28px;
+  height:28px;
 
-
-/* .right-side-box .right-side-pop::before {
-  content: "客服热线:400-108-6670   服务时间:工作日 9:00-17:40";
-  position: absolute;
-  left: -210px;
-  top: 4px;
-  display: none;
-  width: 198px;
-  background: #2cb7ca;
-  border-radius: 8px;
-  color: #fff;
-  line-height: 2.3;
-  font-size: 14px;
-  white-space: break-spaces;
-  padding: 3px 5px;
-} */
-
-/* .right-side-box .right-side-pop::after {
-  content: '';
-  position: absolute;
-  left: -12px;
-  top: 22px;
-  display: none;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-left: 8px solid #2cb7ca;
-  border-bottom: 6px solid transparent;
-} */
+}
 
 .right-side-box>.right-side-item .text-customer img,
 .right-side-box .right-side-phone .text-customer img {
-  width: 32px;
-  width: 32px;
+  width: 28px;
+  height: 28px;
   display: block;
   margin: auto !important;
-  margin-top: 12px !important;
+  /*margin-top: 10px !important;*/
 }
 
 .right-side-box .right-side-phone .text-customer-hover {
   display: none;
 }
-
+.right-side-box .right-side-pop {
+  background: linear-gradient(180deg, #1699F9 0%, #19C6DC 100%);
+  border-top-left-radius: 10px
+}
 .right-side-box .right-side-pop:hover .text-customer {
   display: none;
 }
+.right-side-box .b-bottom-left-r {
+    border-bottom-left-radius: 10px
+}
 
 .right-side-box .right-side-pop:hover::after,
 .right-side-box .right-side-pop:hover::before {
@@ -518,7 +488,7 @@
     flex-direction: column;
     position: relative;
     width: 100%;
-    height: 80px;
+    height: 68px;
     background: #fff;
     box-sizing: border-box;
     cursor: pointer;
@@ -583,7 +553,7 @@
     border-radius: 0 0 0 10px;
     position: relative;
     width: 100%;
-    height: 80px;
+    height: 68px;
     background: linear-gradient(180deg, #F1F4F9 0%, #fff 100%);
     border-top: 2px solid #FFF;
     border-left: 2px solid #FFF;
@@ -633,13 +603,13 @@
     margin-top:4px;
 }
 
-#login-custom-gap{
-    height:16px;
-    background: transparent
-}
-.right-side-box .b-radius-left-top {
-   border-top-left-radius: 10px !important;
-}
+/*.right-side-box .b-radius-left-top {*/
+/*   border-top-left-radius: 10px !important;*/
+/*}*/
+/*.right-side-box .b-radius-left-bottom {*/
+/*    border-bottom-left-radius: 10px !important;*/
+/*    border-bottom: 2px solid #fff;*/
+/*}*/
 
 @media all and (-ms-high-contrast: none),
 (-ms-high-contrast: active) {
@@ -694,25 +664,19 @@
   box-sizing: border-box;
 }
 
-/* .right-side-box .back-to-up {
-  background-color: #b5b6ba;
-  border-radius: 50%;
-  width: 56px;
-  display: none;
-} */
 
 .right-side-box .back-to-up:hover {
   /* background: #2cb7ca; */
 }
 
 .right-side-box .back-to-up {
-  width: 80px;
-  height: 72px;
+  width: 68px;
+  height: 64px;
   background: linear-gradient(180deg, #F1F4F8 0%, #FEFEFF 100%);
   border-width: 2px 0px 2px 2px;
   border-style: solid;
   border-color: #FFFFFF;
-  box-shadow: 0px 0px 20px rgba(8, 31, 38, 0.12);
+  box-shadow: 0px 0px 16px rgba(8, 31, 38, 0.14);
   border-radius: 12px 0px 0px 12px;
   display: none;
   box-sizing: border-box;

+ 48 - 54
src/web/templates/common/pcbottom.html

@@ -130,34 +130,27 @@
     <div id="sideIcon" class="common-right-side-item" style="right: 1px;width: 88px;height: 88px;display: none;">
 <!--        <a href="/swordfish/frontPage/share/sess/index"><img src="{{Msg "seo" "cdn"}}/share/img/active-icon.png"  alt="" style="width: 88px;"></a>-->
     </div>
-      <div class="right-side-phone right-side-pop common-right-side-item">
-        <span class=" text-customer">
-          <img src='{{Msg "seo" "cdn"}}/images/index/new/telphone.png?v={{Msg "seo" "version"}}' alt="">
-        </span>
-        <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/telphone.png?v={{Msg "seo" "version"}}' alt=""></span>
-        <p class="desc_text">客服热线</p>
-        <div class="silde-float kf-phone">客服热线:400-108-6670<br>服务时间:工作日 9:00-17:40</div>
-      </div>
-      <div class="right-side-item right-side-kf open-customer common-right-side-item" id="go-customer-4" style="display: block">
-          <div class="hover-open-box" style="padding: 0;">
-              <!-- <div class="icon-customer white icon-badge-number" data-badge-number=""></div> -->
-              <div class="icon-badge-number text-customer" data-badge-number="">
-                  <img src='{{Msg "seo" "cdn"}}/images/index/new/kf.png?v={{Msg "seo" "version"}}' alt="">
-              </div>
-              <p class="desc_text">在线客服</p>
-          </div>
-          <!-- <div class="silde-float help-slide">
-            <img class="help-close" src='{{Msg "seo" "cdn"}}/images/t-close.png?v={{Msg "seo" "version"}}' alt="">
-            <div class="help-slide-top">有什么可以帮助您吗?</div>
-            <div class="help-slide-bottom">
-              <div class="help-slide-kf">客服热线</div>
-              <div class="help-slide-zx open-customer">在线咨询</div>
+    <div class="right-side-one">
+        <div class="right-side-phone right-side-pop common-right-side-item" id="right-side-kfrx">
+            <span class=" text-customer">
+              <img src='{{Msg "seo" "cdn"}}/images/index/new/telphone.png?v={{Msg "seo" "version"}}' alt="">
+            </span>
+            <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/telphone.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <p class="desc_text">客服热线</p>
+            <div class="silde-float kf-phone">客服热线:400-108-6670<br>服务时间:工作日 9:00-17:40</div>
+        </div>
+        <div class="right-side-item right-side-kf open-customer common-right-side-item" id="go-customer-4" style="display: block">
+            <div class="hover-open-box" style="padding: 0;">
+                <!-- <div class="icon-customer white icon-badge-number" data-badge-number=""></div> -->
+                <div class="icon-badge-number text-customer" data-badge-number="">
+                    <img src='{{Msg "seo" "cdn"}}/images/index/new/kf.png?v={{Msg "seo" "version"}}' alt="">
+                </div>
+                <p class="desc_text">在线客服</p>
             </div>
-          </div> -->
-      </div>
-        <div class="right-side-wework  common-right-side-item" id="customer-wework" style="display:none;">
+        </div>
+        <div class="right-side-wework  common-right-side-item" id="customer-wework" >
             <p class="text-customer">
-              <img src='{{Msg "seo" "cdn"}}/images/index/new/wework.png?v={{Msg "seo" "version"}}' alt="">
+                <img src='{{Msg "seo" "cdn"}}/images/index/new/wework.png?v={{Msg "seo" "version"}}' alt="">
             </p>
             <p class="desc_text">客服企微</p>
             <div class="silde-float kf-wework">
@@ -165,38 +158,39 @@
                 <p>微信扫一扫</p>
             </div>
         </div>
-<!--        登录后的间隔-->
-       <div id="login-custom-gap"></div>
-      <div class="right-side-phone right-side-wx common-right-side-item" id="right-side-swhz">
-          <span class="text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/shangwuhezuo.png?v={{Msg "seo" "version"}}' alt=""></span>
-          <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/shangwuhezuo-blue.png?v={{Msg "seo" "version"}}' alt=""></span>
-          <p class="desc_text_b">商务合作</p>
-          <div class="slidePop">
-            <img src="{{Msg " seo" "cdn" }}/common-module/exhibition/img/qr-code-shichang.png?v={{Msg "seo" "version"}}" alt="">
-            <p>微信扫一扫<br>商务合作</p>
-          </div>
-      </div>
-      <div class="right-side-phone right-side-wx common-right-side-item">
-          <span class=" text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/wx.png?v={{Msg "seo" "version"}}' alt=""></span>
-          <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/wx1.png?v={{Msg "seo" "version"}}' alt=""></span>
-          <p class="desc_text_b">关注剑鱼</p>
-          <div class="slidePop">
-              <img data-share-img src="" alt="">
-              <p>关注剑鱼标讯<br>免费追踪全国商机</p>
-          </div>
-      </div>
-      <div class="right-side-phone right-side-wx right-side-app common-right-side-item">
-        <span class=" text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/weixin_miam_b.png?v={{Msg "seo" "version"}}' alt=""></span>
-        <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/weixin_miam.png?v={{Msg "seo" "version"}}' alt=""></span>
-        <p class="desc_text_b">下载App</p>
-        <div class="slidePop">
-            <img  src='/front/downloadJyApp/qr?page=pc_bottom&source=pc_scan' alt="">
-            <p>下载App<br>免费查看全国商机</p>
+    </div>
+    <div class="right-side-two">
+        <div class="right-side-phone right-side-wx common-right-side-item" id="right-side-swhz">
+            <span class="text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/shangwuhezuo.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/shangwuhezuo-blue.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <p class="desc_text_b">商务合作</p>
+            <div class="slidePop">
+                <img src="{{Msg " seo" "cdn" }}/common-module/exhibition/img/qr-code-shichang.png?v={{Msg "seo" "version"}}" alt="">
+                <p>微信扫一扫<br>商务合作</p>
+            </div>
+        </div>
+        <div class="right-side-phone right-side-wx common-right-side-item">
+            <span class=" text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/wx.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/wx1.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <p class="desc_text_b">关注剑鱼</p>
+            <div class="slidePop">
+                <img data-share-img src="" alt="">
+                <p>关注剑鱼标讯<br>免费追踪全国商机</p>
+            </div>
+        </div>
+        <div class="right-side-phone right-side-wx right-side-app common-right-side-item">
+            <span class=" text-customer"><img src='{{Msg "seo" "cdn"}}/images/index/new/weixin_miam_b.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <span class="text-customer text-customer-hover"><img src='{{Msg "seo" "cdn"}}/images/index/new/weixin_miam.png?v={{Msg "seo" "version"}}' alt=""></span>
+            <p class="desc_text_b">下载App</p>
+            <div class="slidePop">
+                <img  src='/front/downloadJyApp/qr?page=pc_bottom&source=pc_scan' alt="">
+                <p>下载App<br>免费查看全国商机</p>
+            </div>
         </div>
     </div>
     {{end}}
 <!--    可配置数据类config-right-side-item-->
-    <div class="right-side-item back-to-up" data-backtop>
+    <div class="right-side-item back-to-up item-height" data-backtop>
         <div class="hover-open-box">
             <div class="icon-arrow--up white"></div>
             <div class="icon-arrow--up"></div>

+ 3 - 0
src/web/templates/pc/classifylist.html

@@ -771,10 +771,13 @@ var res = {{.T.res}}
 var dataId = "";
 $(function(){
   if(!loginflag){//未登录隐藏
+    // 客服企微隐藏
+    $('#customer-wework').addClass('hide')
     $('#go-customer-4').addClass('hide')//客服隐藏
     $('.nologin-hide').addClass('hide')  //拟建隐藏
   }
   window.loginCallback = function () {//登录成功回调
+    $('#customer-wework').removeClass('hide')
     $('#go-customer-4').removeClass('hide')
     $('.nologin-hide').removeClass('hide')
   }