소스 검색

refactor: adjust some styles

Casper Dai 3 년 전
부모
커밋
f225a118fa

+ 17 - 1
src/components/Schedule/components/ScheduleWrapper.vue

@@ -6,7 +6,7 @@
     <div class="l-flex__none l-flex--row c-schedule-wrapper__header has-bottom-padding">
       <i
         v-if="editable"
-        class="l-flex__none el-icon-arrow-left u-pointer"
+        class="l-flex__none c-schedule-wrapper__back el-icon-arrow-left u-bold u-pointer"
         @click="onBack"
       />
       <div class="l-flex__auto l-flex--row c-sibling-item u-bold u-ellipsis">
@@ -94,5 +94,21 @@ export default {
     line-height: 1;
     border-bottom: 1px solid $border;
   }
+
+  &__back {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    margin-right: 6px;
+    font-size: 18px;
+    border-radius: 50%;
+    transition: background-color 0.4s;
+
+    &:hover {
+      background-color: $gray--light;
+    }
+  }
 }
 </style>

+ 1 - 0
src/components/dialog/PreviewDialog/index.vue

@@ -2,6 +2,7 @@
   <el-dialog
     :visible.sync="showDetail"
     custom-class="c-preview"
+    v-bind="$attrs"
     @click.native="showDetail = false"
     v-on="$listeners"
   >

+ 2 - 2
src/components/dialog/ScheduleDialog/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     :visible.sync="isPreviewing"
-    custom-class="c-preview schedule"
+    custom-class="c-dialog--preview"
     :before-close="onCloseScheduleDialog"
     append-to-body
     v-on="$attrs"
@@ -12,7 +12,7 @@
       :schedule="scheduleId"
     />
     <i
-      class="l-flex__none c-preview__close el-icon-close u-bold u-pointer"
+      class="l-flex__none c-dialog--preview__close el-icon-close u-bold u-pointer"
       @click="onCloseScheduleDialog"
     />
   </el-dialog>

+ 48 - 4
src/scss/bem/_component.scss

@@ -2,14 +2,15 @@
   display: flex;
   flex-direction: column;
   width: 60%;
-  min-width: 600px;
-  min-height: 50%;
+  min-width: 640px;
+  min-height: 240px;
   max-height: 80%;
   margin-top: 10vh !important;
   border-radius: 16px;
 
   &.large {
     width: 80%;
+    min-width: 960px;
   }
 
   &.medium {
@@ -17,8 +18,7 @@
   }
 
   &.mini {
-    width: 600px;
-    min-height: 100px;
+    width: 640px;
   }
 
   .el-dialog__header,
@@ -66,6 +66,50 @@
   }
 }
 
+.c-dialog--preview {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 960px;
+  height: 100%;
+  min-height: 540px;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  box-shadow: none;
+  background-color: transparent;
+
+  &.large {
+    .el-dialog__body {
+      height: 84%;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 16px;
+    color: $black;
+    font-size: 24px;
+    z-index: 9;
+  }
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    flex: 0 1 auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-height: 540px;
+    max-height: 84%;
+    padding: 0;
+    background-color: #fff;
+  }
+}
+
 .c-lock {
   .el-loading-spinner > i {
     font-size: 48px;

+ 0 - 2
src/views/bigscreen/ast/index.vue

@@ -1,6 +1,4 @@
 <script>
-import '@/scss/iconfont/iconfont.css'
-
 import { mapGetters } from 'vuex'
 import { getProgram } from '@/api/program'
 import {

+ 2 - 0
src/views/bigscreen/ast/mixin.js

@@ -1,3 +1,5 @@
+import '@/scss/iconfont/iconfont.css'
+
 import {
   getAssetUrl,
   getThumbnailUrl

+ 0 - 0
src/views/dashboard/TenantDashboard/index.vue


+ 0 - 14
src/views/dashboard/index.vue

@@ -6,20 +6,6 @@
     <div class="l-flex--row c-dashboard__block c-count">
       <div class="l-flex__none l-flex--row">
         设备分类:
-        <!-- <el-select
-          v-model="product"
-          placeholder="请选择产品"
-          :loading="productOptions.fetching"
-          @visible-change="getProducts"
-          @change="onProductChange"
-        >
-          <el-option
-            v-for="item in productOptions.list"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select> -->
         <schema-select
           v-model="product"
           :schema="productSelectSchema"

+ 5 - 1
src/views/device/detail/components/DeviceMap.vue

@@ -1,6 +1,10 @@
 <template>
-  <div ref="map">
+  <div
+    ref="map"
+    class="u-relative"
+  >
     <i
+      v-if="center"
       class="o-icon--active el-icon-place u-pointer"
       @click="onPlace"
     />

+ 0 - 1
src/views/device/detail/components/LinkState.vue

@@ -228,7 +228,6 @@ export default {
   position: relative;
   min-width: 970px;
   min-height: 410px;
-  overflow-x: auto;
 }
 
 .o-line {

+ 6 - 16
src/views/device/detail/components/external/ReceivingCard/ReceivingCardInfo.vue

@@ -6,8 +6,8 @@
         <div class="l-flex__fill c-info__value">{{ manufacturer }}</div>
       </div>
       <div class="l-flex--row l-flex__fill c-info__item">
-        <div class="l-flex__none c-info__title">拓扑结构文件</div>
-        <div class="l-flex__fill c-info__value">{{ topology }}</div>
+        <div class="l-flex__none c-info__title">设备IP</div>
+        <div class="l-flex__fill c-info__value">{{ ip }}</div>
       </div>
     </div>
     <div class="l-flex--row c-info__block">
@@ -25,21 +25,14 @@
     </div>
     <div class="l-flex--row c-info__block">
       <div class="l-flex--row l-flex__fill c-info__item">
-        <div class="l-flex__none c-info__title">支持温度监测</div>
+        <div class="l-flex__none c-info__title">温度监测</div>
         <div class="l-flex__fill c-info__value">{{ temperature }}</div>
       </div>
       <div class="l-flex--row l-flex__fill c-info__item">
-        <div class="l-flex__none c-info__title">支持电压监测</div>
+        <div class="l-flex__none c-info__title">电压监测</div>
         <div class="l-flex__fill c-info__value">{{ voltage }}</div>
       </div>
     </div>
-    <div class="l-flex--row c-info__block">
-      <div class="l-flex--row l-flex__fill c-info__item">
-        <div class="l-flex__none c-info__title">设备IP</div>
-        <div class="l-flex__fill c-info__value">{{ ip }}</div>
-      </div>
-      <div class="l-flex__fill c-info__item" />
-    </div>
   </div>
 </template>
 
@@ -56,9 +49,6 @@ export default {
     manufacturer () {
       return this.info.manufacturerName
     },
-    topology () {
-      return this.info.topology ? '已上传' : '未上传'
-    },
     screen () {
       return this.info.screen
     },
@@ -66,10 +56,10 @@ export default {
       return this.info.async ? '异步盒' : '非异步盒'
     },
     temperature () {
-      return this.info.temperature ? '是' : '否'
+      return this.info.temperature ? '支持' : '不支持'
     },
     voltage () {
-      return this.info.voltage ? '是' : '否'
+      return this.info.voltage ? '支持' : '不支持'
     },
     ip () {
       return this.info.ip

+ 16 - 17
src/views/device/detail/components/external/ReceivingCard/ReceivingCardInfoEdit.vue

@@ -46,6 +46,16 @@
             @edit="onChangeProp('screen')"
           />
         </div>
+        <div class="l-flex--row l-flex__fill c-info__item">
+          <div class="l-flex__none c-info__title">设备IP</div>
+          <edit-input
+            v-model.trim="defaults.ip"
+            class="l-flex__fill c-info__value"
+            @edit="onChangeProp('ip')"
+          />
+        </div>
+      </div>
+      <div class="l-flex--row c-info__block">
         <div class="l-flex--row l-flex__fill c-info__item">
           <div class="l-flex__none c-info__title">异步盒</div>
           <div class="l-flex__fill">
@@ -57,10 +67,8 @@
             />
           </div>
         </div>
-      </div>
-      <div class="l-flex--row c-info__block">
         <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">支持温度监测</div>
+          <div class="l-flex__none c-info__title">温度监测</div>
           <div class="l-flex__fill">
             <el-switch
               v-model="defaults.temperature"
@@ -70,8 +78,10 @@
             />
           </div>
         </div>
+      </div>
+      <div class="l-flex--row c-info__block">
         <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">支持电压监测</div>
+          <div class="l-flex__none c-info__title">电压监测</div>
           <div class="l-flex__fill">
             <el-switch
               v-model="defaults.voltage"
@@ -82,17 +92,6 @@
           </div>
         </div>
       </div>
-      <div class="l-flex--row c-info__block">
-        <div class="l-flex--row l-flex__fill c-info__item">
-          <div class="l-flex__none c-info__title">设备IP</div>
-          <edit-input
-            v-model.trim="defaults.ip"
-            class="l-flex__fill c-info__value"
-            @edit="onChangeProp('ip')"
-          />
-        </div>
-        <div class="l-flex__fill c-info__item" />
-      </div>
     </template>
     <template v-else>
       <button
@@ -156,14 +155,14 @@
               active-color="#13ce66"
               inactive-color="#ff4949"
             />
-            <span class="c-sibling-item far">支持温度监测:</span>
+            <span class="c-sibling-item far">温度监测:</span>
             <el-switch
               v-model="receivingCard.temperature"
               class="c-sibling-item"
               active-color="#13ce66"
               inactive-color="#ff4949"
             />
-            <span class="c-sibling-item far">支持电压监测:</span>
+            <span class="c-sibling-item far">电压监测:</span>
             <el-switch
               v-model="receivingCard.voltage"
               class="c-sibling-item"