侧边栏返回顶部

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/_layout.html

@@ -147,7 +147,25 @@
         </div>
     </div>
     <!--footer end-->
-
+    <!--sidebar begin-->
+    <div id="sidebar">
+        <ul class="sidebar-content">
+            <li>
+                <a href="http://www.usoftchina.com/ " target="_blank"><span class="img1"></span><br/>旧版B2B</a>
+            </li>
+            <li>
+                <a href="#"><span class="img2"></span><br/>联系电话</a>
+                <div class="sidebar-menu">
+                    <p style="margin-top: 7px;">咨询热线：0755-26994808</p>
+                    <p>售后热线：400-830-1818</p>
+                </div>
+            </li>
+            <li class="go-top">
+                <a href="#"><span class="img4"></span></a>
+            </li>
+        </ul>
+    </div>
+    <!--sidebar begin-->
     <div style="display: none;">
     ${OPTION('jpblog_statistical_code')!}
     </div>

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -206,6 +206,9 @@ body{
     font-size: 16px;
     color: #fff;
 }
+.adv .adv-list p.adv-list-over{
+    margin-bottom: 5px;
+}
 .adv .adv-list div{
     color: #afafaf;
     font-size: 14px;
@@ -1663,3 +1666,155 @@ li.active a {
     font-size: 14px;
     color: #8b8b8b;
 }
+/*sidebar*/
+#sidebar{
+    position: fixed;
+    z-index: 100;
+    right: 20px;
+    top: 0;
+    width: 68px;
+    height: 100%;
+}
+#sidebar .sidebar-content{
+    position: absolute;
+    right: 55px;
+    top: 50%;
+    transform: translateY(-50%);
+    list-style: none;
+    padding: 0;
+    width: 100%;
+}
+#sidebar .sidebar-content li{
+    position: relative;
+    width: 100%;
+    text-align: center;
+}
+.sidebar-content .img1{
+    display: inline-block;
+    margin-bottom: -7px;
+    width: 32px;
+    height: 32px;
+    background: url("../images/icon_1.png") no-repeat;
+}
+.sidebar-content a:hover .img1{
+    background: url("../images/icon_1_1.png") no-repeat;
+}
+.sidebar-content .img2{
+    display: inline-block;
+    margin-bottom: 2px;
+    width: 32px;
+    height: 32px;
+    background: url("../images/icon_2.png") no-repeat;
+}
+.sidebar-content a:hover .img2{
+    background: url("../images/icon_2_2.png") no-repeat;
+}
+.sidebar-content .img4{
+    display: inline-block;
+    width: 24px;
+    height: 12px;
+    background: url("../images/top.png") no-repeat;
+}
+.sidebar-content a:hover .img4{
+    background: url("../images/top2.png") no-repeat;
+}
+#sidebar .sidebar-content li a{
+    position: relative;
+    display: block;
+    padding: 5px 0;
+    line-height: 27px;
+    width: 100%;
+    height: 68px;
+    font-size: 12px;
+    color: #d2d2d2;
+    background: #323232;
+    text-decoration: none;
+    -webkit-transition: background-color ease .5s;
+    -moz-transition: background-color ease 0.5s;
+    -ms-transition: background-color ease 0.5s;
+    -o-transition: background-color ease 0.5s;
+    transition: background-color ease 0.5s;
+    z-index: 30;
+}
+#sidebar .sidebar-content li span{
+    margin-top: 4px;
+    margin-bottom: -10px;
+}
+#sidebar .sidebar-content li.go-top span{
+    padding-bottom: 18px;
+}
+#sidebar .sidebar-content li .sidebar-menu {
+    position: absolute;
+    display: none;
+    overflow: hidden;
+    bottom: 0;
+    right: 48px;
+    top: 0;
+    width: 68px;
+    height: 68px;
+    line-height: 50px;
+    background: #323232;
+    color: #fff;
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -o-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: transform .5s;
+    -moz-transition: transform .5s;
+    -ms-transition: transform .5s;
+    -o-transition: transform .5s;
+    transition: transform .5s;
+    z-index: 20;
+}
+#sidebar .sidebar-content li:hover .sidebar-menu {
+    display: block;
+    overflow: auto;
+    width: 220px;
+    height: 68px;
+    font-size: 14px;
+    color: #fff;
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+}
+#sidebar .sidebar-content li:hover a {
+    color: #fff;
+    background: #1e1e1e;
+}
+.sidebar-menu p {
+    line-height: 28px;
+    text-align: left;
+    padding-left: 18px;
+    margin-bottom: 0px;
+    font-size: 14px;
+    color: #fff;
+}
+/*sidebar*/
+/*返回顶部*/
+#sidebar .sidebar-content .go-top{
+    margin-top: 8px;
+}
+#sidebar .sidebar-content .go-top a {
+    position: relative;
+    display: block;
+    padding: 5px 0;
+    line-height: 27px;
+    width: 100%;
+    height: 40px;
+    font-size: 12px;
+    color: #d2d2d2;
+    background: #323232;
+    text-decoration: none;
+    -webkit-transition: background-color ease .5s;
+    -moz-transition: background-color ease 0.5s;
+    -ms-transition: background-color ease 0.5s;
+    -o-transition: background-color ease 0.5s;
+    transition: background-color ease 0.5s;
+    z-index: 30;
+}
+#sidebar .sidebar-content li.go-top span {
+    padding-bottom: 18px;
+}

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/js/index.js

@@ -6,25 +6,25 @@ $(function () {
 
     //    商城点击切换
     $('.section-bottom01>span.tab').on('click', function () {
-        let index = $(this).index();
+        var index = $(this).index();
         $(this).addClass('active').siblings().removeClass('active');
         $('.section-toggle01').eq(index).addClass('show').siblings().removeClass('show');
     })
     // u创
     $('.section-bottom02>span.tab').on('click', function () {
-        let index = $(this).index();
+        var index = $(this).index();
         $(this).addClass('active').siblings().removeClass('active');
         $('.section-process').eq(index).addClass('show').siblings().removeClass('show');
         $('.c_case').eq(index).addClass('show').siblings().removeClass('show');
     })
     $('.c_tab>span.c_toggle').on('click', function () {
-        let index = $(this).index();
+        var index = $(this).index();
         $(this).addClass('active').siblings().removeClass('active');
         $('.c_item_list').eq(index).addClass('show').siblings().removeClass('show');
     })
     // 成熟方案
     $('.case_indus_list').on('click', function () {
-        let index = $(this).index();
+        var index = $(this).index();
         $(this).addClass('active').siblings().removeClass('active');
         $('.c_case_content').eq(index).addClass('show').siblings().removeClass('show');
     })
@@ -33,14 +33,33 @@ $(function () {
         $(this).addClass('active').siblings().removeClass('active');
     })
     // 滚动效果
-    function AutoScroll(obj){
-        $(obj).find(".scroll:first").animate({
-            marginTop:"-74px"
-        },500,function(){
-            $(this).css({marginTop:"0px"}).find("div.scroll .item-list:first").appendTo(this);
-        });
-    }
-    $(document).ready(function(){
-        setInterval('AutoScroll(".dynamic-scroll")',3000);
-    });
+    // function AutoScroll(obj){
+    //     $(obj).find(".scroll:first").animate({
+    //         marginTop:"-74px"
+    //     },500,function(){
+    //         $(this).css({marginTop:"0px"}).find("div.scroll .item-list:first").appendTo(this);
+    //     });
+    // }
+    // $(document).ready(function(){
+    //     setInterval('AutoScroll(".dynamic-scroll")',3000);
+    // });
+    // 返回页面顶部
+    $(window).on('scroll',function(){
+        var $goTop=$('.go-top');
+        if($(this).scrollTop()>0){
+            $goTop.css("display","block");
+
+        }else{
+            $goTop.css("display","none");
+        }
+    })
+    $('.go-top').click(function(e){
+        e.preventDefault();
+        if ($('html').scrollTop()) {
+            $('html').animate({ scrollTop: 0 }, 1000);
+            return false;
+        }
+        $('body').animate({ scrollTop: 0 }, 1000);
+        return false;
+    })
 });

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -49,7 +49,7 @@
 			</div>
 			<div class="adv-list">
 				<a href="https://zb.uuzcc.com/">
-					<p>共享方案平台</p>
+					<p class="adv-list-over">共享方案平台</p>
 					<div>已发布需求638个</div>
 					<div>已上传方案100个</div>
 					<div>已注册用户数14468个</div>
@@ -606,7 +606,7 @@
 				<div class="c_publish">
 					<div>
 						<a href="https://zb.uuzcc.com/pubtask.html"> <img src="${CTPATH}/assets/images/c_05.png" alt=""> 发布求购</a>
-						<a href="https://zb.uuzcc.com/user-view-transaction-op-add.html"><img src="${CTPATH}/assets/images/c_05.png" alt=""> 上传方案</a>
+						<a href="https://zb.uuzcc.com/user-view-transaction-op-add.html"><img src="${CTPATH}/assets/images/c_07.png" alt=""> 上传方案</a>
 						<div class="c_publish_line"></div>
 					</div>
 				</div>