Forráskód Böngészése

refactor(css): adjust some styles

c-form -> c-grid-form
Casper Dai 3 éve
szülő
commit
346e28fb92

+ 4 - 4
src/components/EventPicker/index.vue

@@ -338,8 +338,8 @@ export default {
 
     .c-event__label {
       flex: none;
-      margin-right: 10px;
-      width: 100px;
+      margin: 0 10px 0 0;
+      width: 80px;
       text-align: right;
       &::after {
         content: ":";
@@ -348,11 +348,11 @@ export default {
 
     .c-event__option {
       flex: 1 1 auto;
-      min-width: 0;
+      min-width: 300px;
     }
 
     .c-event__tip {
-      padding-left: 110px;
+      padding-left: 90px;
     }
   }
 

+ 1 - 1
src/components/Schedule/ScheduleCalendar/ScheduleComplexEdit.vue → src/components/Schedule/ScheduleCalendar/EventEdit.vue

@@ -33,7 +33,7 @@ import EventPicker from '@/components/EventPicker'
 import EventTargetChoose from '@/components/EventTargetChoose'
 
 export default {
-  name: 'ScheduleComplexEdit',
+  name: 'EventEdit',
   components: {
     EventPicker,
     EventTargetChoose

+ 4 - 3
src/components/Schedule/ScheduleCalendar/index.vue

@@ -63,9 +63,10 @@
       title="事件设置"
       @confirm="onSaveEvent"
     >
-      <schedule-edit
+      <event-edit
         v-if="event"
         ref="editor"
+        class="u-align-self--center"
         :event="event"
         :ratio="ratio"
       />
@@ -110,7 +111,7 @@ import calendarMixin from '../mixins/calendar'
 import ScheduleWrapper from '../components/ScheduleWrapper'
 import ScheduleCalendarWeek from './ScheduleCalendarWeek'
 import ScheduleCalendarMonth from './ScheduleCalendarMonth'
-import ScheduleEdit from './ScheduleComplexEdit'
+import EventEdit from './EventEdit'
 
 export default {
   name: 'ScheduleComplex',
@@ -118,7 +119,7 @@ export default {
     ScheduleWrapper,
     ScheduleCalendarWeek,
     ScheduleCalendarMonth,
-    ScheduleEdit
+    EventEdit
   },
   mixins: [calendarMixin],
   methods: {

+ 58 - 62
src/views/basic/upgrade/index.vue

@@ -147,84 +147,80 @@
       title="新增升级文件"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <el-upload
-          ref="upload"
-          class="c-form__section fill o-upload"
-          action="none"
-          accept=".apk"
-          :auto-upload="false"
-          :show-file-list="false"
-          :on-change="onChange"
-          drag
-        >
-          <div class="l-flex--row">
-            <i class="o-upload__icon el-icon-upload" />
-            <template v-if="apk.file">
-              <div class="o-upload__file">{{ apk.file.name }}</div>
-            </template>
-            <template v-else>
-              拖拽文件到此或
-              <span class="o-upload__tip">点击选择文件</span>
-            </template>
-          </div>
-        </el-upload>
-        <div class="c-form__section">
-          <span class="c-form__label required">文件名:</span>
-          <el-input
-            v-model.trim="apk.name"
-            class="c-form__item"
-            maxlength="100"
-            show-word-limit
-          />
+      <el-upload
+        ref="upload"
+        class="o-upload has-bottom-padding"
+        action="none"
+        accept=".apk"
+        :auto-upload="false"
+        :show-file-list="false"
+        :on-change="onChange"
+        drag
+      >
+        <div class="l-flex--row">
+          <i class="o-upload__icon el-icon-upload" />
+          <template v-if="apk.file">
+            <div class="o-upload__file">{{ apk.file.name }}</div>
+          </template>
+          <template v-else>
+            拖拽文件到此或
+            <span class="o-upload__tip">点击选择文件</span>
+          </template>
         </div>
-        <div class="c-form__section extra o-version-name">
-          <span class="c-form__label required">版本名称:</span>
+      </el-upload>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">文件名:</span>
+        <el-input
+          v-model.trim="apk.name"
+          maxlength="100"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">版本名称:</span>
+        <div
+          class="c-grid-form__info"
+          data-info="例:1.0.0"
+        >
           <el-input
             v-model.trim="apk.versionName"
-            class="c-form__item"
             :disabled="!manual"
             maxlength="50"
             show-word-limit
           />
         </div>
-        <div class="c-form__section extra o-version-code">
-          <span class="c-form__label">版本号:</span>
+        <span class="c-grid-form__label">版本号:</span>
+        <div
+          class="c-grid-form__info"
+          data-info="只能由小往大升"
+        >
           <el-input-number
             v-model="apk.versionCode"
-            class="c-form__item"
             :disabled="!manual"
             :min="1"
             :max="99999999999999"
             step-strictly
           />
         </div>
-        <div class="c-form__section">
-          <span class="c-form__label">描述:</span>
-          <el-input
-            v-model="apk.remark"
-            class="c-form__item"
-            type="textarea"
-            maxlength="100"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">状态:</span>
-          <div class="c-form__item">
-            <el-radio
-              v-model="apk.status"
-              :label="1"
-            >
-              启用
-            </el-radio>
-            <el-radio
-              v-model="apk.status"
-              :label="0"
-            >
-              禁用
-            </el-radio>
-          </div>
+        <span class="c-grid-form__label">描述:</span>
+        <el-input
+          v-model="apk.remark"
+          type="textarea"
+          maxlength="100"
+          show-word-limit
+        />
+        <span class="c-grid-form__label">状态:</span>
+        <div class="l-flex--row">
+          <el-radio
+            v-model="apk.status"
+            :label="1"
+          >
+            启用
+          </el-radio>
+          <el-radio
+            v-model="apk.status"
+            :label="0"
+          >
+            禁用
+          </el-radio>
         </div>
       </div>
     </confirm-dialog>

+ 12 - 20
src/views/platform/debug/index.vue

@@ -58,29 +58,21 @@
     <el-dialog
       title="发送消息"
       :visible.sync="mqtt.show"
-      custom-class="c-dialog"
+      custom-class="c-dialog mini"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label required">topic:</span>
-          <el-input
-            v-model.trim="mqtt.topic"
-            class="c-form__item"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">message:</span>
-          <el-input
-            v-model.trim="mqtt.message"
-            class="c-form__item"
-            type="textarea"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">加密:</span>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">topic:</span>
+        <el-input v-model.trim="mqtt.topic" />
+        <span class="c-grid-form__label">message:</span>
+        <el-input
+          v-model.trim="mqtt.message"
+          type="textarea"
+          :rows="6"
+        />
+        <span class="c-grid-form__label">加密:</span>
+        <div class="l-flex--row">
           <el-switch
             v-model="mqtt.encode"
-            class="c-form__item"
             active-color="#13ce66"
             inactive-color="#ff4949"
           />