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

header、菜单样式修改

zhouna 5 years ago
parent
7ce0fbdd8f
commit
4f99affc23
12 changed files with 109 additions and 28 deletions
Unified View Show Diff Stats
  1. 93 21
      src/css/index.less
  2. 3 1
      src/css/reset.less
  3. 1 1
      src/html/index.html
  4. 1 1
      src/html/qcScore.html
  5. BIN
      src/images/head.png
  6. BIN
      src/images/icon_bdown.png
  7. BIN
      src/images/icon_close_default.png
  8. BIN
      src/images/icon_close_select.png
  9. BIN
      src/images/icon_down.png
  10. BIN
      src/images/icon_wdown.png
  11. BIN
      src/images/logo.png
  12. 11 4
      src/js/index.js

+ 93 - 21
src/css/index.less
View File 

@@ -1,46 +1,127 @@
 
 @import './reset.less';
 
 @import './reset.less';
 
+
 
+@headerHt:50px;
 
+@menuLiHt:40px;
 
+@menuWt:300px;
 
+@activeColor:#5A8EEE;
 
+@activeBg:#EEF4FF;
 
+
 
 .container{
 
 .container{
 
   height: 100%;
 
   height: 100%;
 
 }
 
 }
 
 .header{
 
 .header{
 
   position: fixed;
 
   position: fixed;
 
   width: 100%;
 
   width: 100%;
 
-  height:40px;
 
+  height:@headerHt;
 
+  line-height: @headerHt;
 
   top:0;
 
   top:0;
 
-  background: #267FD7;
 
-  text-indent: 15px;
 
-  line-height: 40px;
 
+  background:linear-gradient(123deg,rgba(90,142,238,1) 0%,rgba(126,171,255,1) 100%);;
 
+  text-indent: 20px;
 
   color: #fff;
 
   color: #fff;
 
   font-size: 16px;
 
   font-size: 16px;
 
-  a{
 
+  .login{
 
+    margin-right: 20px;
 
+    height: @headerHt;
 
+    line-height: @headerHt;
 
+    position: relative;
 
+    &:after{
 
+      content: " ";
 
+      display: inline-block;
 
+      position: absolute;
 
+      right: 0;
 
+      top:22px;
 
+      width: 10px;
 
+      height: 6px;
 
+      background: url("../images/icon_wdown.png") no-repeat;
 
+    }
 
+    //设置
 
+    .userAction {
 
+      background-color: #fff;
 
+      border-radius: 2px;
 
+      display: none;
 
+      text-indent: 0;
 
+      width: 100px;
 
+      position: absolute;
 
+      right: 0;
 
+      top:42px;
 
+      box-shadow:0px 4px 20px -3px rgba(59,89,126,0.3);
 
+      li {
 
+        line-height: 36px;
 
+        text-align: center;
 
+        cursor: pointer;
 
+        color: #777777;
 
+        a{
 
+          color: #777777;
 
+        }
 
+        &:hover,a:hover{
 
+          color: @activeColor;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .setting{
 
+    display: inline-block;
 
+    height:26px;
 
+    line-height: 26px;
 
+    margin: 12px 0 0 0;
 
+    background: url("../images/head.png") no-repeat;
 
+    padding:0 22px 0 15px;
 
     color: #fff;
 
     color: #fff;
 
     text-decoration: none;
 
     text-decoration: none;
 
-    margin-right: 15px;
 
   }
 
   }
 
   img{
 
   img{
 
     vertical-align: middle;
 
     vertical-align: middle;
 
     margin-right: 10px;
 
     margin-right: 10px;
 
   }
 
   }
 
+  .title span{
 
+    display: inline-block;
 
+    border-left: 1px #fff solid;
 
+    height: 20px;
 
+    line-height: 20px;
 
+    color: #fff;
 
+  }
 
 }
 
 }
 
 .main-body{
 
 .main-body{
 
   height: 100%;
 
   height: 100%;
 
-  margin-top:40px;
 
+  margin-top:@headerHt+20px;
 
 }
 
 }
 
 .menu{
 
 .menu{
 
-  width: 200px;
 
+  width: @menuWt;
 
   height: 100%;
 
   height: 100%;
 
-  border-right:1px #267FD7 solid;
 
   .active{
 
   .active{
 
-    color: #267FD7;
 
+    color: @activeColor;
 
+    background: @activeBg;
 
+    border-right: 3px @activeColor solid;
 
+  }
 
+  .slide-up{
 
+    color: @activeColor;
 
   }
 
   }
 
   .list-1{
 
   .list-1{
 
+    position: relative;
 
+    &:after{
 
+      content: " ";
 
+      display: inline-block;
 
+      position: absolute;
 
+      left: 270px;
 
+      top:18px;
 
+      width: 10px;
 
+      height: 6px;
 
+      background: url("../images/icon_down.png") no-repeat;
 
+    }
 
+    &.slide-up:after{
 
+      transform: rotate(180deg);
 
+      -webkit-transform: rotate(180deg);
 
+    }
 
     ul{
 
     ul{
 
       display: none;
 
       display: none;
 
+      li.page{
 
+        text-indent: 30px;
 
+      }
 
     }
 
     }
 
   }
 
   }
 
   li{
 
   li{
 
-    line-height: 34px;
 
-    padding: 0 15px;
 
+    line-height: @menuLiHt;
 
+    text-indent: 15px;
 
     cursor: pointer;
 
     cursor: pointer;
 
   }
 
   }
 
 }
 
 }
 
@@ -52,15 +133,6 @@
 
     height: 100%;
 
     height: 100%;
 
   }
 
   }
 
 }
 
 }
 
-//设置
 
-.userAction {
 
-  background-color: #ccc;
 
-  display: none;
 
-  li {
 
-    text-align: center;
 
-    cursor: pointer;
 
-  }
 
-}
 
 //修改密码
 
 //修改密码
 
 .modalAction {
 
 .modalAction {
 
   position: fixed;
 
   position: fixed;

+ 3 - 1
src/css/reset.less
View File 

@@ -29,12 +29,14 @@ input {
 
   border: 0;
 
   border: 0;
 
   font-size: 14px;
 
   font-size: 14px;
 
   font-style: normal;
 
   font-style: normal;
 
+  color: #333333;
 
+  text-decoration: none;
 
 }
 
 }
 
 
 
 html,
 
 html,
 
 body {
 
 body {
 
   font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
 
   font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
 
-  color: #000;
 
+  color: #333333;
 
   height: 100%;
 
   height: 100%;
 
   overflow: hidden;
 
   overflow: hidden;
 
 }
 
 }

+ 1 - 1
src/html/index.html
View File 

@@ -29,7 +29,7 @@
 
               <span>AI病例质控平台</span>
 
               <span>AI病例质控平台</span>
 
           </div>
 
           </div>
 
           <div class="login fr">
 
           <div class="login fr">
 
-              <a class="setting" href="javascript:void(0);">设置</a>
 
+              <a class="setting" id="userName" href="javascript:void(0);">***</a>
 
               <ul class="userAction">
 
               <ul class="userAction">
 
                   <li id="changeWord">修改密码</li>
 
                   <li id="changeWord">修改密码</li>
 
                   <li><a class="login-out" href="./login.html">退出</a></li>
 
                   <li><a class="login-out" href="./login.html">退出</a></li>

+ 1 - 1
src/html/qcScore.html
View File 

@@ -18,7 +18,7 @@
 
 <body>
 
 <body>
 
     <div class="patient-info"></div>
 
     <div class="patient-info"></div>
 
     <div class="main-part">
 
     <div class="main-part">
 
-        评分详情主体
 
+
 
     </div>
 
     </div>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

BIN
src/images/head.png
View File


BIN
src/images/icon_bdown.png
View File


BIN
src/images/icon_close_default.png
View File


BIN
src/images/icon_close_select.png
View File


BIN
src/images/icon_down.png
View File


BIN
src/images/icon_wdown.png
View File


BIN
src/images/logo.png
View File


+ 11 - 4
src/js/index.js
View File 

@@ -10,11 +10,15 @@ $(function(){
 
   sureChangeWord()
 
   sureChangeWord()
 
 });
 
 });
 
 
 
-function initMenu(data){
 
+function initMenu(data,userInfo){
 
   //菜单数据填充
 
   //菜单数据填充
 
   $("#menuTmpl").tmpl(data).appendTo(".menu");
 
   $("#menuTmpl").tmpl(data).appendTo(".menu");
 
+  //用户数据填充
 
+  $("#userName").text(userInfo.linkman);
 
   //菜单收起展开
 
   //菜单收起展开
 
   $(".list-1").on("click",function(){
 
   $(".list-1").on("click",function(){
 
+    $(".list-1 .slide-up").removeClass('slide-up');
 
+    $(this).toggleClass('slide-up');
 
     $(this).find("ul").slideToggle();
 
     $(this).find("ul").slideToggle();
 
   });
 
   });
 
   $(".list-1 li").on("click",function(e){
 
   $(".list-1 li").on("click",function(e){
 
@@ -22,6 +26,8 @@ function initMenu(data){
 
   });
 
   });
 
   //右侧页面切换
 
   //右侧页面切换
 
   $(".page").on("click",function(){
 
   $(".page").on("click",function(){
 
+    $(".menu .active").removeClass('active');
 
+    $(this).addClass("active");
 
     const code = $(this).attr("code");
 
     const code = $(this).attr("code");
 
     const url = './'+pageMap[code];
 
     const url = './'+pageMap[code];
 
     $("#contentIframe").attr("src",url);
 
     $("#contentIframe").attr("src",url);
 
@@ -32,7 +38,7 @@ function getMenu(){
 
   post(api.getMenu).then(function(res){
 
   post(api.getMenu).then(function(res){
 
     if(res.data.code==='0'){
 
     if(res.data.code==='0'){
 
       const data = res.data.data;
 
       const data = res.data.data;
 
-      initMenu(data.menuWrappers);
 
+      initMenu(data.menuWrappers,data.userLoginDTO);
 
     }
 
     }
 
   });
 
   });
 
 };
 
 };
 
@@ -64,12 +70,13 @@ function changeWord(oldword,newword){
 
     }
 
     }
 
   });
 
   });
 
 }
 
 }
 
-//点击设置
 
+//用户信息下拉事件
 
 $(".setting").click(function(){
 
 $(".setting").click(function(){
 
-  $(".userAction").slideToggle()
 
+  $(".userAction").slideToggle();
 
 })
 
 })
 
 //点击修改密码
 
 //点击修改密码
 
 $(".container").on('click','#changeWord',function(){
 
 $(".container").on('click','#changeWord',function(){
 
   const status = $(".modalAction").css("display")
 
   const status = $(".modalAction").css("display")
 
+  $(".userAction").hide();
 
   $(".modalAction").css('display',status=='block'?'none':'block')
 
   $(".modalAction").css('display',status=='block'?'none':'block')
 
 })
 
 })