浏览代码

bug 修复

lilei 3 年之前
父节点
当前提交
b6e6105adc
共有 3 个文件被更改,包括 422 次插入240 次删除
  1. 45 234
      src/components/global.less
  2. 368 6
      src/components/index.less
  3. 9 0
      src/components/newThem.less

+ 45 - 234
src/components/global.less

@@ -108,8 +108,8 @@ body {
             margin:0 25px;
           }
           .ant-menu.ant-menu-horizontal{
-            max-width: calc(100vw - 190px - 238px - 25px);
-            flex: 1 1 calc(100vw - 190px - 238px - 25px);
+            max-width: calc(100vw - 160px - 238px - 25px);
+            flex: 1 1 calc(100vw - 160px - 238px - 25px);
           }
         }
         .header-index-right{
@@ -448,7 +448,7 @@ body {
   }
   &.ant-layout-sider-collapsed{
     .logo{
-      padding-left: 20px;
+      // padding-left: 20px;
     }
   }
   &.light {
@@ -492,6 +492,48 @@ body {
   }
 }
 
+/*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+.vidio_cont .ant-modal-body {
+	padding: 0;
+}
+.vidio_cont .ant-modal-close-x {
+	width: 36px;
+	height: 36px;
+	text-align: center;
+	line-height: 36px;
+	color: #fff;
+	background-color: rgba(0, 0, 0, 0.6);
+	border-radius: 50%;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+}
+.page-transition-enter {
+  opacity: 0;
+}
+
+.page-transition-leave-active {
+  opacity: 0;
+}
+
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+ .setting-drawer-content{
+    .ant-drawer-content{
+      overflow: visible
+    }
+  }
+
 // 数据列表 样式
 .table-alert {
   margin-bottom: 16px;
@@ -528,235 +570,4 @@ body {
     white-space: nowrap;
   }
 }
-
-.content {
-  .table-operator {
-    padding: 15px 0;
-    // border-top: 1px solid #eee;
-    button {
-      margin-right: 8px;
-    }
-  }
-  .table-operator-nobor{
-    padding: 0 0 15px 0;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
-
-/* 扩展ant design pro按钮组件颜色 */
-.ant-btn-primary.button-primary {
-  background-color: #39f;
-  border-color: #39f;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #52a6fb;
-    border-color: #52a6fb;
-  }
- 
-  &:active, &.active {
-    background-color: #3d80bf;
-    border-color: #3d80bf;
-  }
-}
- 
-.ant-btn-primary.button-info {
-  background-color: #2db7f5;
-  border-color: #2db7f5;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #32c8f5;
-    border-color: #32c8f5;
-  }
- 
-  &:active, &.active {
-    background-color: #27a3d8;
-    border-color: #27a3d8;
-  }
-}
- 
-.ant-btn-primary.button-success {
-  background-color: #0c6;
-  border-color: #0c6;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #01dc8c;
-    border-color: #01dc8c;
-  }
- 
-  &:active, &.active {
-    background-color: #00af57;
-    border-color: #00af57;
-  }
-}
- 
-.ant-btn-primary.button-warning {
-  background-color: #f90;
-  border-color: #f90;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #ffb60a;
-    border-color: #ffb60a;
-  }
- 
-  &:active, &.active {
-    background-color: #dd8500;
-    border-color: #dd8500;
-  }
-}
- 
-.ant-btn-primary.button-error {
-  background-color: #f30;
-  border-color: #f30;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #ff6666;
-    border-color: #ff6666;
-  }
- 
-  &:active, &.active {
-    background-color: #d62a00;
-    border-color: #d62a00;
-  }
-}
- 
-.ant-btn-primary.button-geekblue {
-  background-color: #2F54EB;
-  border-color: #2F54EB;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #1d39c4;
-    border-color: #1d39c4;
-  }
- 
-  &:active, &.active {
-    background-color: #597ef7;
-    border-color: #597ef7;
-  }
-}
  
-.ant-btn-primary.button-purple {
-  background-color: #722ED1;
-  border-color: #722ED1;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #9254de;
-    border-color: #9254de;
-  }
- 
-  &:active, &.active {
-    background-color: #531dab;
-    border-color: #531dab;
-  }
-}
-.ant-btn-primary.button-grey {
-  background-color: #82848a;
-  border-color: #82848a;
-  margin: 0 5px;
-  font-size: 12px;
-  &:hover, &:focus {
-    background-color: #909399;
-    border-color: #909399;
-  }
- 
-  &:active, &.active {
-    background-color: #c8c9cc;
-    border-color: #c8c9cc;
-  }
-}
-
-// btn-link
-.ant-btn-link.button-primary {
-  color: #39f;
-  &:hover, &:focus {
-    color: #52a6fb;
-  }
- 
-  &:active, &.active {
-    color: #3d80bf;
-  }
-}
- 
-.ant-btn-link.button-info {
-  color: #2db7f5;
-  &:hover, &:focus {
-    color: #32c8f5;
-  }
- 
-  &:active, &.active {
-    color: #27a3d8;
-  }
-}
- 
-.ant-btn-link.button-success {
-  color: #0c6;
-  &:hover, &:focus {
-    color: #01dc8c;
-  }
- 
-  &:active, &.active {
-    color: #00af57;
-  }
-}
- 
-.ant-btn-link.button-warning {
-  color: #e89105;
-  &:hover, &:focus {
-    color: #ffb60a;
-  }
- 
-  &:active, &.active {
-    color: #dd8500;
-  }
-}
- 
-.ant-btn-link.button-error {
-  color: #f30;
-  &:hover, &:focus {
-    color: #ff6666;
-  }
- 
-  &:active, &.active {
-    color: #d62a00;
-  }
-}
- 
-.ant-btn-link.button-geekblue {
-  color: #2F54EB;
-  &:hover, &:focus {
-    color: #1d39c4;
-  }
- 
-  &:active, &.active {
-    color: #597ef7;
-  }
-}
- 
-.ant-btn-link.button-purple {
-  color: #722ED1;
-  &:hover, &:focus {
-    color: #9254de;
-  }
- 
-  &:active, &.active {
-    color: #531dab;
-  }
-}
-.ant-btn-link.button-grey {
-  color: #82848a;
-  &:hover, &:focus {
-    color: #909399;
-  }
- 
-  &:active, &.active {
-    color: #c8c9cc;
-  }
-}

+ 368 - 6
src/components/index.less

@@ -1,13 +1,11 @@
-@import "~ant-design-vue/lib/style/index";
-
+@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
+// @import "~ant-design-vue/lib/style/index";
+@import './newThem.less'; // 用于覆盖上面定义的变量
 // The prefix to use on all css classes from ant-pro.
 @ant-pro-prefix             : ant-pro;
 @ant-global-sider-zindex    : 106;
 @ant-global-header-zindex   : 105;
-.ant-input-disabled{
-  color: #666;
-  background-color: #f8f8f8;
-}
+
 .text-overflow{
     overflow: hidden;    
     text-overflow:ellipsis;    
@@ -18,4 +16,368 @@
     -webkit-box-orient: vertical;    
     -webkit-line-clamp: 3;    
     overflow: hidden;
+}
+
+/* 扩展ant design pro按钮组件颜色 */
+.ant-btn-primary.button-primary {
+  background-color: #39f;
+  border-color: #39f;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #52a6fb;
+    border-color: #52a6fb;
+  }
+ 
+  &:active, &.active {
+    background-color: #3d80bf;
+    border-color: #3d80bf;
+  }
+}
+ 
+.ant-btn-primary.button-info {
+  background-color: #2db7f5;
+  border-color: #2db7f5;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #32c8f5;
+    border-color: #32c8f5;
+  }
+ 
+  &:active, &.active {
+    background-color: #27a3d8;
+    border-color: #27a3d8;
+  }
+}
+ 
+.ant-btn-primary.button-success {
+  background-color: #0c6;
+  border-color: #0c6;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #01dc8c;
+    border-color: #01dc8c;
+  }
+ 
+  &:active, &.active {
+    background-color: #00af57;
+    border-color: #00af57;
+  }
+}
+ 
+.ant-btn-primary.button-warning {
+  background-color: #f90;
+  border-color: #f90;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #ffb60a;
+    border-color: #ffb60a;
+  }
+ 
+  &:active, &.active {
+    background-color: #dd8500;
+    border-color: #dd8500;
+  }
+}
+ 
+.ant-btn-primary.button-error {
+  background-color: #f30;
+  border-color: #f30;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #ff6666;
+    border-color: #ff6666;
+  }
+ 
+  &:active, &.active {
+    background-color: #d62a00;
+    border-color: #d62a00;
+  }
+}
+ 
+.ant-btn-primary.button-geekblue {
+  background-color: #2F54EB;
+  border-color: #2F54EB;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #1d39c4;
+    border-color: #1d39c4;
+  }
+ 
+  &:active, &.active {
+    background-color: #597ef7;
+    border-color: #597ef7;
+  }
+}
+ 
+.ant-btn-primary.button-purple {
+  background-color: #722ED1;
+  border-color: #722ED1;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #9254de;
+    border-color: #9254de;
+  }
+ 
+  &:active, &.active {
+    background-color: #531dab;
+    border-color: #531dab;
+  }
+}
+.ant-btn-primary.button-grey {
+  background-color: #82848a;
+  border-color: #82848a;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #909399;
+    border-color: #909399;
+  }
+ 
+  &:active, &.active {
+    background-color: #c8c9cc;
+    border-color: #c8c9cc;
+  }
+}
+
+// btn-link
+.ant-btn-link.button-default {
+  color: #1b1b1b;
+  &:hover, &:focus {
+    color: #66696d;
+  }
+ 
+  &:active, &.active {
+    color: #8e8f91;
+  }
+}
+.ant-btn-link.button-primary {
+  color: #39f;
+  &:hover, &:focus {
+    color: #52a6fb;
+  }
+ 
+  &:active, &.active {
+    color: #3d80bf;
+  }
+}
+ 
+.ant-btn-link.button-info {
+  color: #2db7f5;
+  &:hover, &:focus {
+    color: #32c8f5;
+  }
+ 
+  &:active, &.active {
+    color: #27a3d8;
+  }
+}
+ 
+.ant-btn-link.button-success {
+  color: #0c6;
+  &:hover, &:focus {
+    color: #01dc8c;
+  }
+ 
+  &:active, &.active {
+    color: #00af57;
+  }
+}
+ 
+.ant-btn-link.button-warning {
+  color: #aa6a02;
+  &:hover, &:focus {
+    color: #c68d07;
+  }
+ 
+  &:active, &.active {
+    color: #dd8500;
+  }
+}
+ 
+.ant-btn-link.button-error {
+  color: #f30;
+  &:hover, &:focus {
+    color: #ff6666;
+  }
+ 
+  &:active, &.active {
+    color: #d62a00;
+  }
+}
+ 
+.ant-btn-link.button-geekblue {
+  color: #2F54EB;
+  &:hover, &:focus {
+    color: #1d39c4;
+  }
+ 
+  &:active, &.active {
+    color: #597ef7;
+  }
+}
+ 
+.ant-btn-link.button-purple {
+  color: #722ED1;
+  &:hover, &:focus {
+    color: #9254de;
+  }
+ 
+  &:active, &.active {
+    color: #531dab;
+  }
+}
+.ant-btn-link.button-grey {
+  color: #82848a;
+  &:hover, &:focus {
+    color: #909399;
+  }
+ 
+  &:active, &.active {
+    color: #c8c9cc;
+  }
+}
+// 查询条件样式
+.table-page-search-wrapper {
+  .ant-form.ant-form-inline{
+    .ant-form-item {
+      margin-bottom: 10px!important;
+      .ant-input,.ant-select-selection{
+        border-radius: 2px;
+        padding: 0px 11px;
+        font-size: 12px;
+      }
+      .ant-form-item-label{
+        line-height: 32px!important;
+        padding-right: 8px!important;
+      }
+      .ant-form-item-control{
+        line-height: 31px!important;
+      }
+      .ant-form-item-control-wrapper{
+        .ant-select-selection__rendered{
+          margin: 0!important;
+        }
+      }
+    }
+  }
+  .form-model-con.ant-form.ant-form-inline{  // a-form-model  有必选条件(因校验提示信息原因,因此边距需高于无必选条件边距)
+    .ant-form-item {
+      margin-bottom: 16px!important;
+      .ant-form-explain{
+        font-size: 12px;
+      }
+    }
+  }
+  .table-page-search-submitButtons {
+    margin-bottom: 9px;
+  }
+}
+// 菜单样式
+.sider {
+  .logo {
+    h1 {
+      font-size: 12px!important;
+    }
+  }
+  .ant-menu{
+    .ant-menu-submenu{
+      .ant-menu-item{  //  二级菜单左侧缩进
+        padding-left: 30px!important;
+      }
+    }
+  }
+}
+// 内容盒子样式
+.content {
+  .table-operator {
+    padding: 0 0 8px;
+    button {
+      margin-right: 8px;
+      margin-left: 0;
+    }
+  }
+  .table-operator-nobor{
+    padding: 0 0 10px 0;
+    button {
+      margin-right: 5px;
+    }
+  }
+  .affix-cont{
+    z-index: 99;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    background-color: #fff;
+    padding: 7px 0 4px;
+    box-shadow: 0 0 20px #dcdee2;
+  }
+}
+// 页签样式
+.multi-tab-con{
+  .ant-tabs-nav-container{
+    height: 31px!important;
+    .ant-tabs-tab{
+      padding: 0 8px!important;
+      height: 30px!important;
+      line-height: 30px!important;
+    }
+  }
+}
+// a-alert样式
+.ant-alert,.ant-alert-info{
+  .ant-alert-icon{
+    top: 6.5px!important;
+    left: 5px!important;
+  }
+  padding: 3px 10px!important;
+  border-radius: 2px!important;
+}
+.ant-page-header{
+  padding: 5px 10px!important;
+}
+
+// 表格 样式
+.sTable{
+  .ant-table{
+    .ant-table-content{
+      .ant-table-header tr th, .ant-table-thead tr th{
+        background: #fafafa!important;
+        font-weight: bold;
+        color: #000!important;
+        padding: 5px!important;
+      }
+    }
+  }
+  .ant-pagination.ant-table-pagination{
+    margin: 10px 0 0;
+  }
+  .ant-table-small > .ant-table-content .ant-table-body{
+    margin: 0;
+  }
+}
+.sTable.fixPagination{
+  >.ant-table-wrapper{
+    height: 100%;
+    >.ant-spin-nested-loading{
+      height: 100%;
+      >.ant-spin-container{
+        height: 100%;
+        position: relative;
+        .ant-pagination.ant-table-pagination{
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+  }
 }

+ 9 - 0
src/components/newThem.less

@@ -0,0 +1,9 @@
+@font-size-base: 12px;
+@table-row-hover-bg: color(~`colorPalette('@{warning-color}', 3) `);
+@text-color: fade(@black, 100%);
+@disabled-bg: #fafafa;
+@modal-body-padding: 15px;
+@menu-item-height: 30px;
+@collapse-header-padding: 6px 8px;
+@table-padding-vertical: 5px;
+@table-padding-horizontal: 5px;