Home Explore Help
Register Sign In
front
/
AIPlatform
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

自定义样式修改

zhangxc 5 years ago
parent
fc776ac375
commit
02bf56f70f
5 changed files with 58 additions and 45 deletions
Split View Show Diff Stats
  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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
 
 };