Parcourir la source

兼容分辨率

wy il y a 1 an
Parent
commit
1c152e0b1a
3 fichiers modifiés avec 184 ajouts et 134 suppressions
  1. 0 3
      src/styles/element-ui.scss
  2. 183 130
      src/views/manage-log/log.scss
  3. 1 1
      src/views/manage-log/robot.vue

+ 0 - 3
src/styles/element-ui.scss

@@ -744,7 +744,4 @@
       margin: 0 auto;
     }
   }
-}
-.el-button{
-  padding: 0px;
 }

+ 183 - 130
src/views/manage-log/log.scss

@@ -1,151 +1,204 @@
 .charge-box {
-    display: flex;
-    padding: 0 20px;
-    flex-direction: column;
-    margin-top: 15px;
-    .charge-tools {
-        height: 88px;
-        background-color: #111827;
-        border: #192337 solid 1px;
-        padding: 25px;
-        width: 100%;
+  display: flex;
+  padding: 0 20px;
+  flex-direction: column;
+  margin-top: 15px;
+  .charge-tools {
+    height: 88px;
+    background-color: #111827;
+    border: #192337 solid 1px;
+    padding: 25px;
+    width: 100%;
 
-        .serch {
-            background-color: #111827;
-            width: 70px;
-            height: 40px;
-            border: #263042 solid 1px;
-            margin-left: 8px;
-            font-size: 16px;
-        }
-        .serch:hover{
-            color: #69b889;
-            background-color: #181e2e;
-            border-color: #69b889;
-        }
-        .actve {
-            background-color: #91fdb9;
-            color: #111827;
-            border: none;
-        }
-        .actve:hover{
-            background-color: #69b889;
-            border-color: #69b889;
-            color: white;
-        }
+    .serch {
+      background-color: #111827;
+      width: 70px;
+      height: 40px;
+      border: #263042 solid 1px;
+      margin-left: 8px;
+      font-size: 16px;
+    }
+    .serch:hover {
+      color: #69b889;
+      background-color: #181e2e;
+      border-color: #69b889;
+    }
+    .actve {
+      background-color: #91fdb9;
+      color: #111827;
+      border: none;
+    }
+    .actve:hover {
+      background-color: #69b889;
+      border-color: #69b889;
+      color: white;
+    }
 
-        .days {
-            background-color: #111827;
-            height: 40px;
-            border: #263042 solid 1px;
-            width: 92px;
-            margin-right: 18px;
-            font-size: 16px;
-        }
+    .days {
+      background-color: #111827;
+      height: 40px;
+      border: #263042 solid 1px;
+      width: 92px;
+      margin-right: 18px;
+      font-size: 16px;
+    }
 
-        .times {
-            background-color: #111827;
-            height: 40px;
-            border: #263042 solid 1px;
-        }
+    .times {
+      background-color: #111827;
+      height: 40px;
+      border: #263042 solid 1px;
     }
+  }
 
-    .charge-table {
-        padding: 15px 25px;
-        background-color: #111827;
-        border: #192337 solid 1px;
-        width: 100%;
-        min-height: 68vh;
-        margin-top: 15px;
-        display: flex;
-        flex-direction: column;
+  .charge-table {
+    padding: 15px 25px;
+    background-color: #111827;
+    border: #192337 solid 1px;
+    width: 100%;
+    min-height: 68vh;
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
 
-        .charge-table-top {
-            height: 50px;
-            width: 100%;
-            text-align: right;
-            margin-bottom: 10px;
+    .charge-table-top {
+      height: 50px;
+      width: 100%;
+      text-align: right;
+      margin-bottom: 10px;
 
-            .daochu {
-                background-color: #111827;
-                width: 100px;
-                border: #91fdb9 solid 1px;
-                color: #91fdb9;
-                height: 40px;
-                font-size: 14px;
-                font-weight: 600;
-            }
-        }
+      .daochu {
+        background-color: #111827;
+        width: 100px;
+        border: #91fdb9 solid 1px;
+        color: #91fdb9;
+        height: 40px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+    }
 
-        .charge-table-bottom {
-            width: 100%;
-            min-height: 100%;
-            background-color: #111827;
-            .el-progress-bar{
-                width: 50%;
-                .el-progress-bar__inner{
-                    background-color:#91fdb9
-                }
-            }
-            .el-progress__text{
-                color: white;
-            }
+    .charge-table-bottom {
+      width: 100%;
+      min-height: 100%;
+      background-color: #111827;
+      .el-progress-bar {
+        width: 50%;
+        .el-progress-bar__inner {
+          background-color: #91fdb9;
         }
+      }
+      .el-progress__text {
+        color: white;
+      }
+    }
 
-        .pageblock {
-            text-align: right;
-            padding: 15px 0px;
-        }
+    .pageblock {
+      text-align: right;
+      padding: 15px 0px;
     }
+  }
 }
 
-.checkFirst{
-    height: 40px;
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-    color: #fff;
-    font-size: 15px;
-    font-weight: 600;
-    margin: 0 auto;
-    justify-content: center;
+.checkFirst {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 auto;
+  justify-content: center;
 }
 .setExport {
-    margin: 35px auto;
+  margin: 35px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 45px;
+  flex-direction: column;
+  span {
+    color: #fff;
+    font-size: 15px;
+    text-align: right;
+  }
+
+  .el-input {
+    width: 240px;
+    margin-right: 15px;
+  }
+  .el-form {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-bottom: 45px;
-    flex-direction: column;
+    .el-button {
+      background-color: #91fdb9;
+      border-color: #91fdb9;
+      font-weight: 600;
+      letter-spacing: 1px;
+      span {
+        color: #0b111d;
+      }
+    }
+    .el-form-item {
+      display: flex;
+      margin-left: 0;
+    }
+  }
+  .descript {
+    color: #d9001b;
+    text-indent: 1em;
+    font-weight: normal;
+  }
+}
+@media screen and (max-width: 1440px) {
+  .charge-box .charge-table .charge-table-top .daochu span {
+    position: relative;
+    left: -3px;
+    top: -2px;
+  }
+  .charge-box .charge-tools .serch span {
+    position: relative;
+    left: -3px;
+    top: -2px;
+  }
+}
+@media screen and (max-width: 1278px) {
+  .charge-box .charge-table .charge-table-top .daochu {
+    width: 130px;
+    height: 48px;
     span {
-      color: #fff;
-      font-size: 15px;
-      text-align: right;
+      position: relative;
+      left: -3px;
+      top: -2px;
     }
-  
-    .el-input {
-      width: 240px;
-      margin-right: 15px;
-    }
-    .el-form{
-        display: flex;
-        .el-button{
-            background-color: #91fdb9;
-            border-color: #91fdb9;
-            font-weight: 600;
-            letter-spacing: 1px;
-            span{
-                color: #0b111d;
-            }
-        }
-        .el-form-item{
-            display: flex;
-            margin-left:0;
-        }
+  }
+  .charge-box .charge-tools .serch {
+    width: 80px;
+    height: 46px;
+    span {
+      position: relative;
+      left: -3px;
+      top: -2px;
+    }
+  }
+  .charge-box .charge-tools .actve {
+    position: relative;
+    top: -1px;
+  }
+  .el-form--inline .el-form-item__content {
+    .el-select {
+      height: 46px;
+    }
+    .charge-box .charge-tools .times {
+      height: 46px;
     }
-    .descript{
-        color: #D9001B;
-        text-indent: 1em;
-        font-weight: normal;
+  }
+  .charge-box .charge-tools {
+    .el-form-item {
+      margin-left: 35px !important;
+      margin-right: 0px !important;
     }
-}
+    .el-form-item:last-child {
+      margin-left: 10px !important;
+    }
+  }
+}

+ 1 - 1
src/views/manage-log/robot.vue

@@ -120,7 +120,7 @@
               ></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="AddExport">生成</el-button>
+              <el-button type="primary"  @click="AddExport">生成</el-button>
             </el-form-item>
           </el-form>
           <div class="descript">