浏览代码

自定义样式修改

zhangxc 5 年之前
父节点
当前提交
02bf56f70f
共有 5 个文件被更改,包括 58 次插入45 次删除
  1. 7 4
      src/css/roll.css
  2. 4 18
      src/html/console.html
  3. 23 21
      src/js/console.js
  4. 4 1
      src/js/scrollBar.js
  5. 20 1
      src/js/utils.js

+ 7 - 4
src/css/roll.css

@@ -50,12 +50,15 @@ div,p {margin: 0; padding: 0;}
 	opacity: 1
 }
 
-.console_scroll_wrap{
+.partWrap_scroll_wrap{
 	min-width: 1185px;
 }
-.explainPan_scroll_wrap{
+.explainPanB_scroll_wrap{
 	height: 180px;
 }
-.scroll_wrap .explainPan_scroll_bar{
+.scroll_wrap .partWrap_scroll_bar{
+	top: 0px;
+}
+.scroll_wrap .explainPanB_scroll_bar{
 	top: 20px;
-}
+}

+ 4 - 18
src/html/console.html

@@ -7,11 +7,7 @@
   <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 </head>
 <body >
-    <div class="scroll_wrap console_wrapper_scroll_wrap">
-        <div class="scroll_bar  console_wrapper_scroll_bar">
-          <div class="scroll_slider  console_wrapper_scroll_slider"></div>
-        </div>
-        <div class="console scroll_cont console_wrapper_scroll_cont">
+        <div class="console">
           <div class="partTitle">
             <p><span></span>质控科数据概览</p>
             <div class="monthYear clearfix">
@@ -31,11 +27,8 @@
           </div>
           <div class="partTitleT"></div>
           <!--<div class="grayLine"></div>-->
-            <div class="scroll_wrap console_scroll_wrap">
-              <div class="scroll_bar  console_scroll_bar">
-                <div class="scroll_slider console_scroll_slider"></div>
-              </div>
-              <div class="partWrap clearfix scroll_cont console_scroll_cont">
+              
+              <div class="partWrap clearfix ">
                 
                   <div class="part01 fl">
                     <p class="partTitlePub clearfix" style="cursor: default;">
@@ -176,16 +169,11 @@
                       <p class="title">条目缺陷占比 <img src="../images/details.png" alt=""></p>
                       <div class="emptyCircleBData">
                         <div id="emptyCircleB" class="emptyCircle"></div>
-                          <div class="scroll_wrap explainPan_scroll_wrap">
-                            <div class="scroll_bar explainPan_scroll_bar">
-                              <div class="scroll_slider explainPan_scroll_slider"></div>
-                            </div>
-                            <div class="explainPan explainPanB scroll_cont explainPan_scroll_cont">
+                            <div class="explainPan explainPanB">
                               <table>
                                 
                               </table>
                             </div>
-                          </div>
                        
                       </div>
                       <div class="emptyCircleBWrap">
@@ -207,12 +195,10 @@
                   </div>
                  
               </div>                      
-            </div>
 
 
 
         </div>
-    </div>
   
   
 </body>

+ 23 - 21
src/js/console.js

@@ -12,7 +12,7 @@ const {api} = require('./api.js')
 const echarts = require('echarts');
 require('./../resource/jquery-ui/jquery-ui.min.js');
 require('./../resource/jquery-ui/jquery-ui.min.css');
-const {post,setCookie,delCookie,getCookie,focusMenuItem,picEmptyData} = require('../js/utils.js');
+const {post,setCookie,delCookie,getCookie,focusMenuItem,picEmptyData, initScroll} = require('../js/utils.js');
 const { get } = require('jquery');
 let payMoney = [],behosDateStart="",ownSelectDate='',behosDateEnd="",dayLis = [],dateType = 2,slideType = 1,hospital=getCookie("hospital"),deptType="内科",deptId="",level="甲",lineType="合格率",lineType1=[],lineType2=[],lineType3=[],lineType4=[];
 
@@ -1688,12 +1688,13 @@ function panDetailB(data){
     $(".explainPan").css({
         marginTop:-($(".explainPan").height()/2-20)+'px'
     })
-    new CusScrollBar({
-        contentSelector: '.explainPan_scroll_cont' , //滚动内容区
-        barSelector: '.explainPan_scroll_bar', //滚动条
-        sliderSelector: '.explainPan_scroll_slider', //滚动滑块
-        sliderMode:2   
-    });
+    // new CusScrollBar({
+    //     contentSelector: '.explainPanB_scroll_cont' , //滚动内容区
+    //     barSelector: '.explainPanB_scroll_bar', //滚动条
+    //     sliderSelector: '.explainPanB_scroll_slider', //滚动滑块
+    //     sliderMode:2   
+    // });
+    initScroll("explainPanB","Y",2)
 }
 //时间获取
 function getTimeDetail(){
@@ -1845,18 +1846,19 @@ $(function() {
     $('.iconCalen').on("click", function(e){
         $(this).parent().find("input").focus()
     })
-    new CusScrollBar({
-        contentSelector: '.console_scroll_cont', //滚动内容区
-        barSelector: '.console_scroll_bar', //滚动条
-        sliderSelector: '.console_scroll_slider', //滚动滑块
-        sliderMode:2   
-    });
-    new CusScrollBar({
-        contentSelector: '.console_wrapper_scroll_cont', //滚动内容区
-        barSelector: '.console_wrapper_scroll_bar', //滚动条
-        sliderSelector: '.console_wrapper_scroll_slider', //滚动滑块
-        scrollDir:'X',
-        sliderMode:2    
-    });
-    
+    // new CusScrollBar({
+    //     contentSelector: '.console_scroll_cont', //滚动内容区
+    //     barSelector: '.console_scroll_bar', //滚动条
+    //     sliderSelector: '.console_scroll_slider', //滚动滑块
+    //     sliderMode:2   
+    // });
+    // new CusScrollBar({
+    //     contentSelector: '.console_wrapper_scroll_cont', //滚动内容区
+    //     barSelector: '.console_wrapper_scroll_bar', //滚动条
+    //     sliderSelector: '.console_wrapper_scroll_slider', //滚动滑块
+    //     scrollDir:'X',
+    //     sliderMode:2    
+    // });
+    initScroll("partWrap","Y",2)
+    initScroll("console","X",2)
 });

+ 4 - 1
src/js/scrollBar.js

@@ -1,4 +1,5 @@
-
+const jQuery = require("jquery")
+const $ = require("jquery");
 /*
 用途项目:自定义滚动条实现
 */
@@ -67,6 +68,7 @@
       var sliderHeight;
       if(this.$scrollDir == "Y"){
         rate = this.$cont.height() /this.$cont[0].scrollHeight;
+        console.log('top',this.$bar,this.$bar.css("top"))
         if(!this.$bar.css("top")){
           this.$bar.css({
             "top": "0px"
@@ -91,6 +93,7 @@
       }
       if(this.$sliderMode === 2){
         this.$slider.css({
+          // "background":"red",
           "background":"#131F3B"
         })
       }

+ 20 - 1
src/js/utils.js

@@ -2,6 +2,7 @@ const qs = require('qs');
 const $ = require("jquery");
 const axios = require("axios")
 var Utils = require('./rePromise');
+// require('./scrollBar.js');
 const baseUrl = "http://192.168.2.241:5858"
 //页面映射
 const pageMap={
@@ -387,6 +388,23 @@ function isMac(){
   var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
   return isMac
 }
+
+function initScroll(el,sliderDir,sliderMode){
+  $("."+el).addClass("scroll_cont")
+  $("."+el).addClass(el+"_scroll_cont")
+  $("."+el).wrap(`<div class="scroll_wrap ${el+'_scroll_wrap'}"></div>`)
+  $(`${'.'+el+'_scroll_wrap'}`).append(`<div class="scroll_bar  ${el+'_scroll_bar'}">
+      <div class="scroll_slider ${el+'_scroll_slider'}"></div>
+    </div>`)
+
+  new CusScrollBar({
+      contentSelector: `${'.'+el+'_scroll_cont'}`, //滚动内容区
+      barSelector: `${'.'+el+'_scroll_bar'}`, //滚动条
+      sliderSelector: `${'.'+el+'_scroll_slider'}`, //滚动滑块
+      scrollDir:sliderDir || 'Y',
+      sliderMode:sliderMode || 1    
+  });
+}
 module.exports = {
   pageMap,
   post,
@@ -406,5 +424,6 @@ module.exports = {
   expJson,
   setDatePicker,
   getPickerDate,
-  isMac
+  isMac,
+  initScroll
 };