[update] 移动端首页、管理样式调整

src/assets/less/common.less

@@ -302,48 +302,46 @@ button.ant-btn {
       border: 1px solid #8FC7FF;
     }
   }
+  // 禁用
+  &.ant-btn-primary-disabled,
+  &.ant-btn-primary.disabled,
+  &.ant-btn-primary[disabled],
+  &.ant-btn-primary-disabled:hover,
+  &.ant-btn-primary.disabled:hover,
+  &.ant-btn-primary[disabled]:hover,
+  &.ant-btn-primary-disabled:focus,
+  &.ant-btn-primary.disabled:focus,
+  &.ant-btn-primary[disabled]:focus,
+  &.ant-btn-primary-disabled:active,
+  &.ant-btn-primary.disabled:active,
+  &.ant-btn-primary[disabled]:active,
+  &.ant-btn-primary-disabled.active,
+  &.ant-btn-primary.disabled.active,
+  &.ant-btn-primary[disabled].active {
+    color: @text-color-secondary;
+    background-color: @background-color-base;
+  }
 }
 // 移动端rem
 .mobile-html {
   button.ant-btn {
-    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
+    font-size: 0.14rem;
-    font-size: 14px;
+    line-height: 0.2rem;
-    line-height: 20px;
+    border-radius: 0.02rem;
-    border-radius: 2px;
+    height: 0.36rem;
 
     .btn-icon {
-      margin-right: 4px;
+      margin-right: 0.04rem;
-      margin-bottom: 2px;
+      margin-bottom: 0.02rem;
-      width: 14px;
+      width: 0.14rem;
-      height: 14px;
+      height: 0.14rem;
     }
     &.ant-btn-primary {
-      background: #8FC7FF;
-      color: @text-black;
-
-      // 透明状态（ghost）
       &.ant-btn-background-ghost {
-        color: @primary-color;
+        border-width: 0.01rem;
-        background: transparent;
-        border: 1px solid #8FC7FF;
       }
     }
   }
-  .custom-btns-box {
-    button.ant-btn {
-      .btn-icon {
-        margin-right: 0.04rem;
-        margin-bottom: 0.02rem;
-        width: 0.14rem;
-        height: 0.14rem;
-      }
-    }
-    button.ant-btn.ant-btn-primary {
-      border-radius: 0.02rem;
-      font-size: 0.14rem;
-      line-height: 0.2rem;
-    }
-  }
 }
 /* 部分组件end */
 
@@ -483,8 +481,7 @@ button.ant-btn {
   font-size: 24px;
   line-height: 32px;
   margin-right: 8px;
-  background: linear-gradient(90deg, #FFFFFF 0%, #96D0F9 100%);
+  color: @primary-color;
-  -webkit-background-clip: text;
 }
 .mobile-html .big-number {
   font-size: 0.22rem;
@@ -526,15 +523,14 @@ button.ant-btn {
     line-height: 0.16rem;
 
     &::before {
-      top: 0.04rem;
+      top: 0.06rem;
+      left: 0;
+      width: calc(100% + 4px);
       height: 0.15rem;
-      width: calc(100% + 0.08rem);
-      background: linear-gradient( 90deg, rgba(0,116,202,0.1) 0%, #0074CA 50%, rgba(0,116,202,0) 100%);
     }
 
     .title-background-text {
-      margin-left: 0.04rem;
+      padding-left: 0.04rem;
-      position: relative;
       height: 0.21rem;
     }
   }
@@ -549,7 +545,7 @@ button.ant-btn {
 .operation-btns {
   .primary,
   .primary:hover {
-    color: @custom-cyan;
+    color: @primary-color;
   }
   .danger,
   .danger:hover {

src/assets/less/modifyLessVars.less

@@ -1,7 +1,7 @@
 @primary-color: #8FC7FF;
 /* 背景色 */
-@component-background: #001B36;
+@component-background: #001125;
-@background-color-base: #001B36AA;
+@background-color-base: #001125AA;
 @background-color-light: rgba(143,199,255,0.1);
 
 /* 边框色 */

src/components/CommonCard.vue

@@ -56,6 +56,7 @@ export default {
     line-height: 36px;
   }
   /deep/ .ant-card-head-title::before {
+    vertical-align: middle;
     content: '';
     display: inline-block;
     width: 12px;
@@ -97,28 +98,13 @@ export default {
 // 如果是移动端设置为rem单位
 .mobile-html {
   .common-card {
-    border: .01rem solid rgba(0,148,255,0.24);
+    border-width: 0.01rem;
-    border-bottom: .01rem @primary-color solid;
-
-    // 左下右下高亮边框
-    &::before, &::after {
-      min-width: 0.16rem;
-      height: 0.01rem;
-      bottom: -0.01rem;
-    }
-    &::before {
-      left: 0;
-    }
-    &::after {
-      right: 0;
-    }
 
     /deep/ .ant-card-head {
-      background-size: 0.01rem 100%, calc(100% - 0.02rem) 100%, 0.01rem 100%;
+      min-height: 0.36rem;
-      border: none;
+      height: 0.36rem;
-      min-height: 0.42rem;
-      height: 0.42rem;
       padding: 0 0.16rem;
+      border-bottom-width: 0.01rem;
     }
     /deep/ .ant-card-head-title {
       font-size: 0.14rem;
@@ -129,9 +115,13 @@ export default {
       height: 0.12rem;
     }
     /deep/ .ant-card-body {
-      padding: 0.08rem 0.12rem 0.12rem !important;
+      padding: 0.12rem !important;
-      height: calc(100% - 0.42rem);
+      height: calc(100% - 0.36rem);
-      min-height: 1.6rem;
+    }
+    &.empty-card {
+      /deep/ .ant-card-body {
+        min-height: 1.6rem;
+      }
     }
   }
   .card-title {

src/components/lazy_vant.js

@@ -8,9 +8,7 @@ import {
   Popup,
   Dialog
 } from 'vant'
-import 'vant/lib/picker/index.less'
+import 'vant/lib/index.less'
-import 'vant/lib/popup/index.less'
-import 'vant/lib/dialog/index.less'
 Vue.use(Picker)
 Vue.use(Popup)
 Vue.prototype.$vantDialog = Dialog

src/components/menu/MobileMenu.vue

@@ -115,6 +115,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@assets/less/modifyLessVars.less';
 .mobile-menu {
   background-color: #001125;
   width: 100%;
@@ -134,13 +135,14 @@ export default {
       text-align: center;
 
       .menu-item {
+        overflow: hidden;
         position: relative;
         background-image: url("~@/assets/images/menu/top-menu.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         background-position: center center;
-        width: 0.4rem;
+        width: 0.28rem;
-        height: 0.4rem;
+        height: 0.28rem;
         font-size: 0;
 
         img {
@@ -156,7 +158,6 @@ export default {
       .menu-item-title {
         font-weight: bold;
         font-size: 0.1rem;
-        color: #FFC97A;
         line-height: 0.12rem;
         word-break: break-all;
         overflow: hidden;
@@ -165,8 +166,6 @@ export default {
         text-align: center;
         font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
         color: rgba(255,255,255,0.96);
-        text-shadow: 0 4px 4px rgba(0,0,0,0.25);
-        transform: translateY(-0.05rem);
       }
 
       // 选中的样式
@@ -174,12 +173,19 @@ export default {
 
         .menu-item {
           background-image: url("~@/assets/images/menu/top-menu-act.png");
+
+          // 将图片移到父元素外侧，溢出隐藏，然后用阴影偏移回来显示激活的图片颜色
+          img {
+            @offset: 100px;
+            transform: translate(-50%, calc(-50% + @offset));
+            filter: drop-shadow(0 -@offset 0 @primary-color);
+          }
         }
         .menu-item-title {
           font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
           font-weight: bold;
           font-size: 0.1rem;
-          color: #FFC97A;
+          color: @primary-color;
           line-height: 0.12rem;
         }
       }

src/components/page/GlobalHeader.vue

@@ -19,7 +19,7 @@
     <div v-else-if="device === 'mobile'" class="mobile-header" :class="theme">
       <div class="mobile-header-left">
       </div>
-      <div class="mobile-header-center">{{ headerTitle || $route.meta.title }}</div>
+      <div class="mobile-header-center">{{ headerTitle }}</div>
       <div class="mobile-header-right">
         <a-dropdown>
           <a class="ant-dropdown-link">
@@ -118,7 +118,7 @@ export default {
         '/mobile/mine'
       ]
       const path = this.$route.path
-      return hideSystemTitlePathList.includes(path) || '昆鸿设备管理系统'
+      return hideSystemTitlePathList.includes(path) ? this.$route.meta.title : '昆鸿设备管理系统'
     }
   },
   created () {

src/components/vant/SelectPicker.vue

@@ -6,6 +6,7 @@
               :open="false"
               :value="value"
               @click.capture.native="onOpen">
+      <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
       <a-select-option v-for="item in options" :key="item[valueKey]" :value="item[valueKey]">{{item[labelKey]}}</a-select-option>
     </a-select>
     <!-- 移动端下拉框 -->

src/views/mobile/home/Home.vue

@@ -17,8 +17,8 @@
             </a-form-item>
           </a-col>
           <a-col flex="0.88rem">
-            <span class="search-operate-btns custom-btns-box">
+            <span class="search-operate-btns">
-              <a-button class="btn-blue" type="primary" @click="searchQuery">
+              <a-button style="width: 0.88rem;" type="primary" @click="searchQuery">
                 <span class="btn-text">检索设备</span>
               </a-button>
             </span>
@@ -47,11 +47,22 @@
           </common-card>
         </div>
         <!-- 实时示功图 -->
-        <div class="mb-12">
+        <div class="mb-12 indicator-diagram">
           <common-card title="实时示功图">
             <div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
               <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
             </div>
+            <div class="indicator-diagram-info">
+              <span class="info-row info-row-inline">
+                <span class="info-label">冲程</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
+              </span>
+              <div class="divider-vertical"></div>
+              <span class="info-row info-row-inline">
+                <span class="info-label">冲次</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
+              </span>
+            </div>
             <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="2.03rem"/>
           </common-card>
         </div>
@@ -79,15 +90,15 @@
                 </a-form-item>
               </a-col>
               <a-col flex="0.8rem">
-                <span class="search-operate-btns custom-btns-box">
+                <span class="search-operate-btns">
-                  <a-button class="btn-blue bottom-search-btn mb-8" type="primary">
+                  <a-button class="bottom-search-btn mb-8" style="width: 0.8rem;" type="primary">
                     <span class="btn-text">查询</span>
                   </a-button>
                   <div class="flex-between">
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" style="margin-right: 0.08rem;" ghost type="primary">
                       <span class="btn-text"><a-icon type="left" /></span>
                     </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" ghost type="primary">
                       <span class="btn-text"><a-icon type="right" /></span>
                     </a-button>
                   </div>
@@ -146,15 +157,15 @@
                 </a-form-item>
               </a-col>
               <a-col flex="0.8rem">
-                <span class="search-operate-btns custom-btns-box">
+                <span class="search-operate-btns">
                   <a-button class="btn-blue bottom-search-btn mb-8" type="primary">
                     <span class="btn-text">查询</span>
                   </a-button>
                   <div class="flex-between">
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" style="margin-right: 0.08rem;" type="primary">
                       <span class="btn-text"><a-icon type="left" /></span>
                     </a-button>
-                    <a-button class="btn-blue btn-blue-small" type="primary">
+                    <a-button class="icon-btn" type="primary">
                       <span class="btn-text"><a-icon type="right" /></span>
                     </a-button>
                   </div>
@@ -180,7 +191,6 @@ import ResponsiveChart from '@comp/ResponsiveChart'
 import CommonEmpty from '@comp/CommonEmpty'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { generateBaseOption } from '@/utils/charts'
-import * as echarts from 'echarts'
 import { deviceType, wellheadType } from '@/enums/commonEnums'
 import DictPicker from '@comp/vant/DictPicker'
 import SelectPicker from '@comp/vant/SelectPicker'
@@ -344,7 +354,6 @@ export default {
           clearInterval(this.timer)
           this.timer = null
           this.hasData = false
-          return
       }
     },
     // 加载实时数据(实时示功图)(每10s请求一次)
@@ -391,12 +400,6 @@ export default {
           color: '#FF5353',
           symbol: 'none',
           smooth: true,
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(255,83,83,0.2)' },
-              { offset: 1, color: 'rgba(255,83,83,0)' }
-            ])
-          },
           data: data['上冲程']
         },
         {
@@ -406,17 +409,10 @@ export default {
           color: '#8FC7FF',
           symbol: 'none',
           smooth: true,
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(0,148,255,0.2)' },
-              { offset: 1, color: 'rgba(0,148,255,0)' }
-            ])
-          },
           data: data['下冲程']
         }
       ]
       // 设置数据
-      JSON.stringify(option).replaceAll('px', 'rem')
       this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
     },
     // 油井下拉
@@ -525,8 +521,12 @@ export default {
 }
 
 // 实时示功图头部
-.indicator-diagram-extra {
+.indicator-diagram-info {
-
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 0.08rem;
+}
+.indicator-diagram {
   .info-row .info-label,
   .info-row .info-value,
   .time {
@@ -538,7 +538,7 @@ export default {
   }
 
   .info-row .info-value {
-    color: #2EE4FD;
+    color: @primary-color;
   }
   .divider-vertical {
     width: 0.01rem;
@@ -548,4 +548,9 @@ export default {
     display: inline-block;
   }
 }
+// 只有icon的按钮，不用内边距
+.icon-btn {
+  padding: 0;
+  width: 0.36rem;
+}
 </style>

src/views/mobile/manage/Manage.vue

@@ -53,25 +53,25 @@
                 <p>{{ item.wellheadId_dictText }}</p>
               </div>
               <div class="device-list-item-main-btns">
-                <a-button type="primary" class="mr-6"
+                <a-button type="primary bold" class="mr-6"
                           @click="handleChangeStatus(item, index)"
                 >{{ item.changeDeviceStatus_dictText }}</a-button>
-                <a-button type="danger"
+                <a-button type="primary" ghost
                           @click="handleDelete(item, index)"
                 >删除</a-button>
               </div>
             </div>
           </div>
           <!-- 数据大于5条显示折叠 -->
-          <div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList">
+          <div v-if="deviceData.dataSource.length > 5" class="list-toggle" @click="toggleDeviceList(!deviceData.showAll)">
-            {{deviceData.showAll ? '收起' : '展开'}}<div class="list-toggle-arrow" :class="`list-toggle-arrow-${deviceData.showAll ? 'up' : 'down'}`"></div>
+            {{deviceData.showAll ? '收起' : '展开'}}<a-icon class="list-toggle-arrow" :type="`caret-${deviceData.showAll ? 'up' : 'down'}`" />
           </div>
         </div>
       </common-card>
     </div>
     <div class="mb-12">
       <common-card title="添加设备">
-        <a-form :form="deviceForm" class="custom-vertical-form">
+        <a-form :form="deviceForm" class="custom-vertical-form manage-page-form">
           <div class="mb-12">
             <a-form-item label="设备名称">
               <a-input placeholder="请输入设备名称" :max-length="50"
@@ -83,11 +83,6 @@
                            dictCode="device_type"
                            v-decorator="['deviceType', validatorRules.deviceType]"
                            placeholder="请选择设备类型"/>
-<!--              <j-dict-select-tag :triggerChange="true"-->
-<!--                                 dictCode="device_type"-->
-<!--                                 v-decorator="['deviceType', validatorRules.deviceType]"-->
-<!--                                 placeholder="请选择设备类型">-->
-<!--              </j-dict-select-tag>-->
             </a-form-item>
             <a-form-item label="所属井口">
               <select-picker v-decorator="['wellheadId', validatorRules.wellheadId]"
@@ -95,10 +90,6 @@
                              label-key="wellheadName"
                              :list="wellheadList"
                              placeholder="请选择所属井口"/>
-<!--              <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear-->
-<!--                        placeholder="请选择所属井口">-->
-<!--                <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>-->
-<!--              </a-select>-->
             </a-form-item>
             <a-form-item label="设备描述">
               <a-textarea
@@ -109,12 +100,12 @@
                 v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
             </a-form-item>
           </div>
-          <div class="flex-center custom-btns-box">
+          <div class="flex-center">
-            <a-button class="btn-blue btn-blue-155" @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;">
+            <a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 0.16rem;flex: 1;">
               <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
               <span class="btn-text">重置</span>
             </a-button>
-            <a-button class="btn-cyan btn-cyan-155" @click="handleAddDevice">
+            <a-button type="primary" @click="handleAddDevice" style="flex: 1;">
               <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
               <span class="btn-text">添加</span>
             </a-button>
@@ -124,7 +115,7 @@
     </div>
     <div class="mb-12">
       <common-card title="添加井口">
-        <a-form :form="wellheadForm" class="custom-vertical-form">
+        <a-form :form="wellheadForm" class="custom-vertical-form manage-page-form">
           <div class="mb-12">
             <a-form-item label="所属作业区">
               <a-input placeholder="请输入所属作业区" :max-length="50"
@@ -159,8 +150,8 @@
                        v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
             </a-form-item>
           </div>
-          <div class="flex-center custom-btns-box">
+          <div class="flex-center">
-            <a-button class="btn-cyan btn-cyan-327" @click="handleAddWellhead">
+            <a-button type="primary" style="flex: 1;" @click="handleAddWellhead">
               <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
               <span class="btn-text">添加</span>
             </a-button>
@@ -366,14 +357,16 @@ export default {
       }).catch(() => {})
     },
     // 切换展开折叠列表
-    toggleDeviceList () {
+    toggleDeviceList (isOpen) {
       // 保留当前滚动高度
-      const scrollTop = document.documentElement.scrollTop
       this.deviceData.showAll = !this.deviceData.showAll
-      // 数据更新后保持原来滚动高度
+      // 展开的时候，保持原来滚动高度（展开会直接滚动到表格底部）
-      this.$nextTick(() => {
+      if (isOpen) {
-        document.documentElement.scrollTop = scrollTop
+        const scrollTop = document.documentElement.scrollTop
-      })
+        this.$nextTick(() => {
+          document.documentElement.scrollTop = scrollTop
+        })
+      }
     },
     // 添加设备
     handleAddDevice () {
@@ -527,27 +520,23 @@ export default {
       // 按钮
       &-btns {
         width: 1.46rem;
+        display: flex;
         position: absolute;
         right: 0;
         bottom: 0;
         font-family: PingFang SC, PingFang SC, sans-serif;
-        font-weight: 500;
-        font-size: 0.14rem;
-        color: #FFFFFF;
-        line-height: 0.16rem;
 
         /deep/.ant-btn {
+          flex: 1;
+          font-size: 0.14rem;
+          line-height: 0.16rem;
           width: 0.7rem;
           height: 0.32rem;
-          border: none;
+          font-weight: 500;
-        }
+
-        /deep/.ant-btn-primary {
+          &.bold {
-          background: url("~@assets/images/componentImg/btn-blue-70.png");
+            font-weight: 600;
-          background-size: 100% 100%;
+          }
-        }
-        /deep/.ant-btn-danger {
-          background: url("~@assets/images/componentImg/btn-red-70.png");
-          background-size: 100% 100%;
         }
       }
     }
@@ -559,38 +548,23 @@ export default {
   margin: 0.12rem auto 0;
   font-family: Rubik, Rubik, sans-serif;
   font-size: 0.12rem;
-  color: #EFEFEF;
+  color: @border-color-base;
   line-height: 0.14rem;
 
   .list-toggle-arrow {
+    color: @primary-color;
     display: inline-block;
-    width: 0.18rem;
+    font-size: 0.14rem;
-    height: 0.07rem;
-    background: url("~@assets/images/icon/list-arrow.png");
-    background-size: 100% 100%;
     margin-left: 0.06rem;
-
-    &-up {
-      transform: rotate(180deg);
-    }
-    &-down {
-      transform: rotate(0deg);
-    }
   }
 }
-.custom-btns-box {
+
-  /deep/.ant-btn {
+// 表单边框
-    &.btn-blue.btn-blue-155 {
+.manage-page-form {
-      width: 1.55rem;
+  /deep/.ant-form-item-control:not(.has-error) {
-      background-image: url("~@assets/images/componentImg/btn-blue-155.png");
+    .ant-input,
-    }
+    .ant-select-selection {
-    &.btn-cyan.btn-cyan-155 {
+      border-color: @primary-color;
-      width: 1.55rem;
-      background-image: url("~@assets/images/componentImg/btn-cyan-155.png");
-    }
-    &.btn-cyan.btn-cyan-327 {
-      width: 3.27rem;
-      background-image: url("~@assets/images/componentImg/btn-cyan-327.png");
     }
   }
 }

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -120,7 +120,7 @@
                       v-decorator="['deviceDesc', validatorRules.deviceDesc]" />
                   </a-form-item>
                 </div>
-                <div class="flex-center custom-btns-box">
+                <div class="flex-center">
                   <a-button type="primary" ghost @click="handleResetForm(deviceForm)" style="margin-right: 16px;">
                     <img :src="require('@assets/images/icon/refresh.png')" alt="重置" class="btn-icon">
                     <span class="btn-text">重置</span>
@@ -162,7 +162,7 @@
                              v-decorator.trim="['wellheadName', validatorRules.wellheadName]"/>
                   </a-form-item>
                 </div>
-                <div class="flex-center custom-btns-box">
+                <div class="flex-center">
                   <a-button type="primary" @click="handleAddWellhead">
                     <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                     <span class="btn-text">添加</span>

src/views/systemOverview/systemSettings/SystemSettings.vue

@@ -30,7 +30,7 @@
                 </j-dict-select-tag>
               </a-form-item>
             </div>
-            <div class="flex-center custom-btns-box">
+            <div class="flex-center">
               <a-button type="primary" ghost @click="handleResetSysSettingForm" style="margin-right: 16px;">
                 <img :src="require('@assets/images/icon/refresh.png')" alt="恢复默认设置" class="btn-icon">
                 <span class="btn-text">恢复默认设置</span>
@@ -127,7 +127,7 @@
 
               </a-col>
             </a-row>
-            <div class="flex-center custom-btns-box">
+            <div class="flex-center">
               <a-button type="primary" @click="handleAddUser">
                 <img :src="require('@assets/images/icon/add.png')" alt="添加" class="btn-icon">
                 <span class="btn-text">添加</span>

src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue

@@ -16,7 +16,7 @@
                 <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
                 <a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
               </a-select>
-              <span class="search-operate-btns custom-btns-box">
+              <span class="search-operate-btns">
                 <a-button style="width: 88px;" type="primary" @click="searchQuery">
                   <img :src="require('@assets/images/icon/search.png')" alt="查询" class="btn-icon">
                   <span class="btn-text">查询</span>
@@ -93,7 +93,7 @@
               <div class="working-status-img">
                 <img :src="workingStatus" alt="油井工作状态">
               </div>
-              <div class="working-status-btns custom-btns-box">
+              <div class="working-status-btns">
                 <a-button @click="handleChangeWorkingCondition(true)" type="primary">远程启井</a-button>
                 <a-button @click="handleChangeWorkingCondition(false)" ghost type="primary">远程停井</a-button>
                 <a-button @click="handleChangeWorkingCondition(true)" ghost type="primary">频率控制</a-button>
@@ -109,14 +109,14 @@
               <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
               <div class="divider-vertical"></div>
               <span class="info-row info-row-inline">
-              <span class="info-label">冲程</span>
+                <span class="info-label">冲程</span>
-              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
-            </span>
+              </span>
               <div class="divider-vertical"></div>
               <span class="info-row info-row-inline">
-              <span class="info-label">冲次</span>
+                <span class="info-label">冲次</span>
-              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
+                <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
-            </span>
+              </span>
             </div>
             <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
           </common-card>
@@ -692,7 +692,7 @@ export default {
       const legendData = ['产油量(t/d)', '产液量(m³/d)']
       const option = generateBaseOption()
       option.legend.data = legendData
-      option.xAxis[0].data = data['X轴']
+      option.xAxis[0].data = data.xAxis
       option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
       option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
       option.series = [

src/views/user/Login.vue

@@ -118,7 +118,7 @@
 </template>
 <script>
 import { mapActions } from 'vuex'
-import { timeFix } from '@/utils/util'
+// import { timeFix } from '@/utils/util'
 import Vue from 'vue'
 import { ACCESS_TOKEN/* , ENCRYPTED_STRING, USER_INFO */ } from '@/store/mutation-types'
 import { postAction, getAction } from '@/api/manage'
@@ -142,8 +142,8 @@ export default {
         smsSendBtn: false
       },
       validatorRules: {
-        username: { rules: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }] },
+        username: { rules: [{ required: true, message: '请输入用户名' }, { validator: this.handleUsernameOrEmail }] },
-        password: { rules: [{ required: true, message: '请输入密码!', validator: 'click' }] },
+        password: { rules: [{ required: true, message: '请输入密码', validator: 'click' }] },
         mobile: { rules: [{ validator: this.validateMobile }] },
         captcha: { rule: [{ required: true, message: '请输入验证码!' }] },
         inputCode: { rules: [{ required: true, message: '请输入验证码!' }] }
@@ -371,8 +371,8 @@ function isMobile () {
   }
   // pc端背景
   .main:not(.main-mobile) {
-    background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
+    background: #001125 url("~@/assets/login-bg.png") no-repeat;
-    background-position: left top;
+    background-position: 8vw 8vh;
   }
   .main{
     height: 100%;
@@ -524,9 +524,8 @@ function isMobile () {
         display: block;
         width: 100%;
         height: 2.4rem;
-        background: url("~@/assets/mobile-login-bg.png") no-repeat;
+        background: url("~@/assets/login-bg.png") no-repeat;
-        background-position-y: -0.44rem;
+        background-size: 3.75rem;
-        background-size: cover;
       }
 
       .system-title {