feat: adjust some styles

src/components/dialog/MultiAssetTransferDialog/index.vue

@@ -89,13 +89,11 @@
             <i class="el-icon-arrow-right" />
           </el-button>
         </div>
-        <div class="l-flex__fill l-flex--col u-overflow-x--auto">
-          <el-empty
-            v-if="!assets.length"
-            class="l-flex__auto l-flex--row center"
-            description="请添加资源"
-          />
-          <template v-else>
+        <div class="l-flex__fill l-flex--col">
+          <template v-if="assets.length">
+            <div class="l-flex__none l-flex--row right c-sibling-item--v u-font-size--sm u-color-black u-bold">
+              {{ statistics }}
+            </div>
             <div
               v-if="options.durationEditable"
               class="l-flex__none l-flex--row right c-sibling-item--v"
@@ -127,12 +125,16 @@
                 v-for="(asset, index) in assets"
                 :key="asset.key"
                 :item="asset"
-                :hide-duration="hideDuration"
                 @view="onViewAsset"
                 @del="onDelAsset(index)"
               />
             </draggable>
           </template>
+          <el-empty
+            v-else
+            class="l-flex__auto l-flex--row center"
+            description="请添加资源"
+          />
         </div>
       </div>
     </template>
@@ -168,10 +170,6 @@ export default {
     choosen: {
       type: Function,
       default: null
-    },
-    ignoreDuration: {
-      type: [Boolean, String],
-      default: false
     }
   },
   data () {
@@ -232,8 +230,9 @@ export default {
         ? this.fileDir.files.some(({ selected }) => selected)
         : this.tableAssets.some(({ selected }) => selected)
     },
-    hideDuration () {
-      return this.ignoreDuration && this.assets.length === 1
+    statistics () {
+      const length = this.assets.length
+      return `共${length}条，总时长${this.assets.reduce((total, { duration }) => total + duration, 0)}秒`
     }
   },
   methods: {

src/components/dialog/MultiDeviceDialog/index.vue

@@ -228,19 +228,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.o-draggable-item {
-  border: 1px solid $gray;
-  border-radius: $radius--sm;
-
-  &.sortable-chosen {
-    border-color: #c6e2ff;
-    background-color: $blue--light;
-  }
-
-  &__mover {
-    cursor: move;
-  }
-}
-</style>

src/components/dialog/TableDialog/index.vue

@@ -4,6 +4,7 @@
     :size="sizeClassName"
     v-bind="$attrs"
   >
+    <slot name="tip" />
     <schema-table
       ref="table"
       :schema="schema"

src/components/service/DraggableItem/index.vue

@@ -8,26 +8,24 @@
         @click.native="onView"
       />
     </div>
-    <template v-if="!hideDuration">
-      <div
-        v-if="item.disabled"
-        class="l-flex__none c-sibling-item u-color--info u-font-size--xs"
-      >
-        {{ duration }}
-      </div>
-      <el-input-number
-        v-else
-        v-model="item.duration"
-        class="l-flex__none c-sibling-item near o-draggable-item__seconds"
-        size="small"
-        title="上播时长(s)"
-        :disabled="item.disabled"
-        controls-position="right"
-        :min="1"
-        :max="86400"
-        step-strictly
-      />
-    </template>
+    <div
+      v-if="item.disabled"
+      class="l-flex__none c-sibling-item u-color--info u-font-size--xs"
+    >
+      {{ duration }}
+    </div>
+    <el-input-number
+      v-else
+      v-model="item.duration"
+      class="l-flex__none c-sibling-item near o-draggable-item__seconds"
+      size="small"
+      title="上播时长(s)"
+      :disabled="item.disabled"
+      controls-position="right"
+      :min="1"
+      :max="86400"
+      step-strictly
+    />
     <i
       class="l-flex__none el-icon-delete has-padding--h u-color--info u-font-size--md has-active"
       @click="onDel"
@@ -44,10 +42,6 @@ export default {
     item: {
       type: Object,
       required: true
-    },
-    hideDuration: {
-      type: [Boolean, String],
-      default: false
     }
   },
   computed: {
@@ -56,9 +50,7 @@ export default {
       return info ? `${info} ${name}` : name
     },
     duration () {
-      return this.hideDuration
-        ? ''
-        : parseDuration(this.item.duration)
+      return parseDuration(this.item.duration)
     }
   },
   methods: {
@@ -75,17 +67,6 @@ export default {
 <style lang="scss" scoped>
 .o-draggable-item {
   min-width: $width--lg;
-  border: 1px solid $gray;
-  border-radius: $radius--sm;
-
-  &.sortable-chosen {
-    border-color: #c6e2ff;
-    background-color: $blue--light;
-  }
-
-  &__mover {
-    cursor: move;
-  }
 
   &__seconds {
     width: 92px;

src/components/service/EventTargetPicker/index.vue

@@ -18,7 +18,7 @@
       >
         <el-select
           v-model="currentTarget.type"
-          class="c-sibling-item"
+          class="l-flex__none c-sibling-item"
           @change="onChangeTargetType"
         >
           <el-option
@@ -28,38 +28,47 @@
             :value="option.value"
           />
         </el-select>
+        <template v-if="isAssets">
+          <div
+            class="l-flex__none c-sibling-item o-button"
+            @click="onImportDataset"
+          >
+            导入
+          </div>
+          <div class="l-flex__fill l-flex--row right c-sibling-item u-font-size--sm u-color-black u-bold">
+            {{ statistics }}
+          </div>
+        </template>
         <div
-          v-if="isAssets"
-          class="c-sibling-item o-button"
-          @click="onImportDataset"
+          v-else
+          class="l-flex__auto l-flex--row c-sibling-item far"
         >
-          导入
-        </div>
-        <div
-          class="l-flex--row c-sibling-item far has-active u-ellipsis"
-          @click="onViewCurrentTarget"
-        >
-          {{ targetInfo }}
+          <div
+            class="has-active u-ellipsis"
+            @click="onViewCurrentTarget"
+          >
+            {{ targetInfo }}
+          </div>
         </div>
       </div>
     </div>
     <template v-if="isAssets">
-      <draggable
-        v-if="currentTarget.assets.length"
-        v-model="currentTarget.assets"
-        class="l-flex__fill c-sibling-item--v u-overflow-y--auto"
-        handle=".mover"
-        animation="300"
-      >
-        <draggable-item
-          v-for="(asset, index) in currentTarget.assets"
-          :key="asset.key"
-          :item="asset"
-          :hide-duration="hideDuration"
-          @view="onViewAsset"
-          @del="onDelAsset(index)"
-        />
-      </draggable>
+      <template v-if="currentTarget.assets.length">
+        <draggable
+          v-model="currentTarget.assets"
+          class="l-flex__fill c-sibling-item--v u-overflow-y--auto"
+          handle=".mover"
+          animation="300"
+        >
+          <draggable-item
+            v-for="(asset, index) in currentTarget.assets"
+            :key="asset.key"
+            :item="asset"
+            @view="onViewAsset"
+            @del="onDelAsset(index)"
+          />
+        </draggable>
+      </template>
       <el-empty
         v-else
         class="l-flex__fill l-flex--row center"
@@ -180,8 +189,13 @@ export default {
     isAssets () {
       return this.currentTarget?.type === EventTarget.ASSETS
     },
-    hideDuration () {
-      return this.isAssets && this.currentTarget.assets.length <= 1
+    statistics () {
+      if (this.isAssets) {
+        const assets = this.currentTarget.assets
+        const length = assets.length
+        return `共${length}条，总时长${assets.reduce((total, { duration }) => total + duration, 0)}秒`
+      }
+      return ''
     },
     selectedId () {
       return this.currentTarget?.detail?.id

src/components/service/Schedule/ScheduleSwiper/index.vue

@@ -30,7 +30,6 @@
             v-for="(program, index) in events"
             :key="program.key"
             :item="program"
-            :hide-duration="events.length === 1"
             @view="onView"
             @del="onDel(index)"
           />

src/components/service/external/DevicePlayer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="o-video"
+    class="o-video is-ratio--16_9"
     :class="{ offline: !online, mask: !isPlaying, controls, floating, fullscreen: isFullscreen }"
     @mousemove="onMouseMove"
     @click.stop="onClick"

src/components/service/external/camera/CameraPlayer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="o-video"
+    class="o-video is-ratio--16_9"
     :class="{ offline: !online, mask: !isPlaying, controls, floating, fullscreen: isFullscreen }"
     @mousemove="onMouseMove"
     @click.stop="onClick"

src/scss/bem/_ishas.scss

@@ -95,8 +95,19 @@
   background-color: #ffecec;
 }
 
-.is-ratio--16_9 {
-  padding-top: $padding--16_9;
+@supports (aspect-ratio: 16 / 9) {
+  .is-ratio--16_9 {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+@supports not (aspect-ratio: 16 / 9) {
+  .is-ratio--16_9::after {
+    content: '';
+    display: inline-block;
+    padding-top: $padding--16_9;
+    vertical-align: top;
+  }
 }
 
 .has-info {

src/scss/bem/_object.scss

@@ -243,17 +243,12 @@
   }
 }
 
-.o-simple-video {
-  object-fit: contain;
-
-  &::-webkit-media-controls-enclosure {
-    display: none;
-  }
+.o-simple-video::-webkit-media-controls-enclosure {
+  display: none;
 }
 
 .o-video {
   position: relative;
-  padding-top: $padding--16_9;
   border-radius: $radius--sm;
   background-color: #000;
   overflow: hidden;
@@ -284,6 +279,7 @@
     left: 0;
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
 
   &__mask {
@@ -327,3 +323,17 @@
   height: 24px;
   vertical-align: middle;
 }
+
+.o-draggable-item {
+  border: 1px solid $gray;
+  border-radius: $radius--sm;
+
+  &.sortable-chosen {
+    border-color: #c6e2ff;
+    background-color: $blue--light;
+  }
+
+  &__mover {
+    cursor: move;
+  }
+}

src/views/ad/automation/contract/index.vue

@@ -125,12 +125,14 @@
           </div>
         </div>
         <div class="l-flex__fill l-flex--col c-step__column">
-          <div
-            class="l-flex--row inline c-contract-dialog__header u-align-self--start u-color--black u-font-size--sm u-bold has-bottom-border has-active"
-            @click="onEditAssets"
-          >
-            <span class="c-sibling-item u-bold">上播内容</span>
-            <i class="c-sibling-item near el-icon-edit" />
+          <div class="l-flex--row c-contract-dialog__header has-bottom-border">
+            <div
+              class="l-flex--row inline u-color--black u-font-size--sm u-bold has-active"
+              @click="onEditAssets"
+            >
+              <span class="c-sibling-item u-bold">上播内容</span>
+              <i class="c-sibling-item near el-icon-edit" />
+            </div>
           </div>
           <schema-table
             ref="assetContentTable"
@@ -145,7 +147,6 @@
       ref="transferDialog"
       title="上播内容"
       :choosen="onSaveAssets"
-      ignore-duration
       @view="onViewAsset"
     />
     <preview-dialog ref="previewDialog" />
@@ -203,10 +204,10 @@ export default {
             },
             on: { edit: val => this.onEditName(data, val) }
           }), 'class-name': 'c-edit-column', 'min-width': 160 },
-          { prop: 'dateRange', label: '上刊日期', 'width': 240 },
-          { prop: 'timeRange', label: '上播时间', 'min-width': 100 },
-          { prop: 'count', label: '上播次数', 'min-width': 100 },
-          { prop: 'durationInfo', label: '上播时长', 'min-width': 100 },
+          { prop: 'dateRange', label: '上刊日期', 'width': 240, align: 'center' },
+          { prop: 'timeRange', label: '上播时间', 'min-width': 100, align: 'right' },
+          { prop: 'count', label: '上播次数', 'min-width': 100, align: 'right' },
+          { prop: 'durationInfo', label: '上播时长', 'min-width': 100, align: 'right' },
           { type: 'invoke', render: [
             { label: '详情', on: this.onEdit },
             { label: '删除', on: this.onDel }

src/views/dashboard/components/Device.vue

@@ -41,7 +41,7 @@
       />
     </div>
     <div
-      class="l-flex__none c-sibling-item--v o-device__preview u-size--contain u-relative"
+      class="l-flex__none c-sibling-item--v o-device__preview is-ratio--16_9 u-size--contain u-relative"
       :class="{ offline: isRealOffline, empty: !shot || !hasPowerRealStatus }"
       :style="styles"
     >
@@ -524,7 +524,6 @@ export default {
   }
 
   &__preview {
-    padding-top: $padding--16_9;
     border-radius: $radius--sm;
 
     &.empty {

src/views/dashboard/v1/TransferCameraDialog.vue

@@ -141,18 +141,4 @@ export default {
   border-left: 1px solid $border;
   border-right: 1px solid $border;
 }
-
-.o-draggable-item {
-  border: 1px solid $gray;
-  border-radius: $radius--sm;
-
-  &.sortable-chosen {
-    border-color: #c6e2ff;
-    background-color: $blue--light;
-  }
-
-  &__mover {
-    cursor: move;
-  }
-}
 </style>

src/views/device/detail/components/DeviceExternal/components/Record/components/PlayAxisDialog/components/PlayAxis.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div
-      class="o-video o-time-axis"
+      class="o-video o-time-axis is-ratio--16_9"
       :class="{ offline: !online, mask: !isPlaying, controls }"
     >
       <template v-if="online">
         <video
           ref="video"
-          class="o-video__player o-simple-video u-relative"
+          class="o-video__player o-simple-video"
           :poster="poster"
           autoplay
           muted
@@ -279,7 +279,6 @@ export default {
 <style lang="scss" scoped>
 .o-video {
   overflow: unset;
-  padding-top: 0;
   background-color: transparent;
 }
 

src/views/device/detail/components/DeviceExternal/components/Record/components/RecordPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="o-video controls">
+  <div class="o-video mask is-ratio--16_9">
     <video
       ref="video"
       class="o-video__player"
@@ -11,7 +11,7 @@
     <template v-if="record.status !== 1">
       <div class="o-video__mask">
         <div
-          class="l-flex--row center o-video__btn u-pointer"
+          class="l-flex--row center o-video__btn u-font-size--3xl u-pointer"
           @click.stop="onPlayOrPause"
         >
           <i :class="statusIconClass" />
@@ -113,24 +113,14 @@ export default {
 <style lang="scss" scoped>
 .c-top {
   position: absolute;
-  width: 100%;
   left: 0;
   top: 0;
-  padding: 16px 16px 16px;
+  width: 100%;
+  padding: 16px;
   color: #fff;
 }
 
-.o-video__mask {
-  display: inline-block;
-}
-
-.o-video__btn {
-  font-size: 30px;
-}
-
 .o-video__player {
-  object-fit: contain;
-
   &::-webkit-media-controls-volume-control-container {
     display: none !important;
   }

src/views/device/detail/components/DeviceTakeOver/components/AssetCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="o-preload-asset">
     <div
-      class="o-preload-asset__img"
+      class="o-preload-asset__img is-ratio--16_9"
       :class="{ 'u-pointer': status === 2 }"
       @click="onClick"
     >
@@ -113,7 +113,6 @@ export default {
 
   &__img {
     position: relative;
-    padding-top: $padding--16_9;
     color: $info;
     border-radius: $radius;
     background-color: rgba(#000, 0.8);

src/views/device/detail/dashboard/Timeline.vue

@@ -75,7 +75,7 @@
                     :style="program.style"
                   >
                     <i
-                      class="l-flex__none c-event-program__img o-program"
+                      class="l-flex__none c-event-program__img o-program is-ratio--16_9"
                       :style="program.event.style"
                     />
                     <div class="l-flex__auto">
@@ -503,11 +503,5 @@ export default {
   border-radius: $radius--sm;
   background: rgba(#000, 0.8) url("~@/assets/program_bg.png") center center /
     100% 100% no-repeat;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    padding-top: $padding--16_9;
-  }
 }
 </style>

src/views/device/power/index.vue

@@ -78,7 +78,11 @@
       ref="syncTaskDialog"
       title="定时任务同步"
       :schema="asyncSchema"
-    />
+    >
+      <template #tip>
+        <div class="has-bottom-padding--sm u-color--error darrk u-font-size--sm">同步中请勿关闭弹窗，否则将停止同步</div>
+      </template>
+    </table-dialog>
   </wrapper>
 </template>
 

src/views/device/timeline/bak.vue

@@ -128,7 +128,7 @@
                     @click.stop="chooseProgramProxy(item, program)"
                   >
                     <i
-                      class="l-flex__none c-event-program__img o-program"
+                      class="l-flex__none c-event-program__img o-program is-ratio--16_9"
                       :style="program.event.style"
                     />
                     <div class="l-flex__auto">
@@ -673,11 +673,5 @@ export default {
   border-radius: $radius--sm;
   background: rgba(#000, 0.8) url("~@/assets/program_bg.png") center center /
     100% 100% no-repeat;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    padding-top: $padding--16_9;
-  }
 }
 </style>

src/views/device/timeline/index.vue

@@ -107,7 +107,7 @@
                   >
                     <div class="c-event-program__item l-flex--row">
                       <i
-                        class="l-flex__none c-event-program__img o-program"
+                        class="l-flex__none c-event-program__img o-program is-ratio--16_9"
                         :style="item.event.style"
                       />
                       <div class="l-flex__auto">
@@ -543,12 +543,6 @@ export default {
   border-radius: $radius--sm;
   background: rgba(#000, 0.8) url("~@/assets/program_bg.png") center center /
     100% 100% no-repeat;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    padding-top: $padding--16_9;
-  }
 }
 
 .c-interval {

src/views/external/box/settings/components/DeviceConfig/components/AttributeConfigDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <confirm-dialog
     ref="configDialog"
-    title="属性配置"
+    title="下发属性配置"
     @confirm="onSave"
   >
     <div class="c-grid-form sm u-align-self--center">

src/views/external/box/settings/components/DeviceConfig/components/ContentProtectionConfigDialog.vue

@@ -117,7 +117,7 @@
               <i class="o-button__icon el-icon-circle-plus-outline" />
               新增检测点
             </button>
-            <span class="c-sibling-item u-color--info">连续的支持6个，离散的3个</span>
+            <span class="c-sibling-item u-color--info">支持最多6个点，异步盒的离散点仅可支持3个</span>
           </div>
           <div
             v-for="(item, index) in points"

src/views/external/box/settings/components/DeviceConfig/index.vue

@@ -1,46 +1,58 @@
 <template>
-  <div class="l-grid--info mini">
+  <div class="">
     <template v-if="isSuperAdmin">
+      <div class="c-sibling-item--v u-font-size--sm u-bold">安全配置</div>
+      <div class="c-sibling-item--v near l-grid--info mini">
+        <button
+          class="o-button"
+          @click="onContentProtectionConfig"
+        >
+          内容保护
+        </button>
+      </div>
+      <div class="c-sibling-item--v u-font-size--sm u-bold">属性配置</div>
+      <div class="c-sibling-item--v near l-grid--info mini">
+        <button
+          class="o-button"
+          @click="onAttributeConfig"
+        >
+          下发属性
+        </button>
+        <button
+          class="o-button"
+          @click="onAdConfig"
+        >
+          广告属性
+        </button>
+      </div>
+    </template>
+    <div class="c-sibling-item--v u-font-size--sm u-bold">播控器配置</div>
+    <div class="c-sibling-item--v near l-grid--info mini">
       <button
         class="o-button"
-        @click="onContentProtectionConfig"
+        @click="onRecordConfig"
       >
-        内容保护
+        视频回采清晰度
       </button>
       <button
         class="o-button"
-        @click="onAttributeConfig"
+        @click="onSpacerConfig"
       >
-        下发属性
+        视频缓存垫片
       </button>
+    </div>
+    <div class="c-sibling-item--v u-font-size--sm u-bold">自动编排配置</div>
+    <div class="c-sibling-item--v near l-grid--info mini">
       <button
         class="o-button"
-        @click="onAdConfig"
+        @click="onDatasetConfig"
       >
-        广告属性
+        填充素材包
       </button>
-      <attribute-config-dialog ref="attributeConfigDialog" />
-      <content-protection-config-dialog ref="contentProtectionConfigDialog" />
-      <ad-config-dialog ref="adConfigDialog" />
-    </template>
-    <button
-      class="o-button"
-      @click="onRecordConfig"
-    >
-      视频回采清晰度
-    </button>
-    <button
-      class="o-button"
-      @click="onSpacerConfig"
-    >
-      视频缓存垫片
-    </button>
-    <button
-      class="o-button"
-      @click="onDatasetConfig"
-    >
-      填充素材包
-    </button>
+    </div>
+    <attribute-config-dialog ref="attributeConfigDialog" />
+    <content-protection-config-dialog ref="contentProtectionConfigDialog" />
+    <ad-config-dialog ref="adConfigDialog" />
     <record-config-dialog ref="recordConfigDialog" />
     <spacer-config-dialog ref="spacerConfigDialog" />
     <dataset-config-dialog ref="datasetConfigDialog" />

src/views/realm/report/index.vue

@@ -6,8 +6,8 @@
     background
   >
     <template v-if="isTopGroupAdmin">
-      <span class="c-sibling-item--v u-font-size--sm u-bold">平台数据</span>
-      <div class="c-sibling-item--v l-grid--info mini">
+      <div class="c-sibling-item--v u-font-size--sm u-bold">平台数据</div>
+      <div class="c-sibling-item--v near l-grid--info mini">
         <button
           class="o-button"
           @click="getDeviceExcel"
@@ -29,8 +29,8 @@
       </div>
     </template>
     <template v-if="isGroupAdmin">
-      <span class="c-sibling-item--v u-font-size--sm u-bold">部门数据</span>
-      <div class="c-sibling-item--v l-grid--info mini">
+      <div class="c-sibling-item--v u-font-size--sm u-bold">部门数据</div>
+      <div class="c-sibling-item--v near l-grid--info mini">
         <button
           class="o-button"
           @click="getMaterialExcel"
@@ -51,8 +51,8 @@
         </button>
       </div>
     </template>
-    <span class="c-sibling-item--v u-font-size--sm u-bold">设备数据</span>
-    <div class="c-sibling-item--v l-grid--info mini">
+    <div class="c-sibling-item--v u-font-size--sm u-bold">设备数据</div>
+    <div class="c-sibling-item--v near l-grid--info mini">
       <button
         class="o-button"
         @click="getProgramGuideExcel"

src/views/screen/material/program/Program.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l-flex--col c-program">
     <div
-      class="c-program__body u-pointer"
+      class="c-program__body is-ratio--16_9 u-pointer"
       :style="style"
       @click="onClick"
     >
@@ -135,7 +135,6 @@ export default {
 
   &__body {
     position: relative;
-    padding-top: $padding--16_9;
     color: #fff;
     font-size: 16px;
     border-radius: $radius $radius 0 0;