refactor: adjust some styles

src/components/layout/PlatformPage/index.vue

@@ -8,20 +8,21 @@
   >
     <template v-if="groups">
       <div
-        class="c-tree-sidebar u-overflow-y--auto"
+        class="c-sibling-item c-sidebar u-overflow-y--auto"
         :class="size"
       >
         <el-tree
           ref="groupTree"
           :data="groups"
-          class="c-tree-sidebar__main"
           node-key="path"
           :current-node-key="group.path"
           highlight-current
           @node-click="setGroup"
         />
       </div>
-      <slot :group="group" />
+      <div class="l-flex__fill c-sibling-item far">
+        <slot :group="group" />
+      </div>
     </template>
     <template v-else>
       <div

src/components/layout/TenantPage/index.vue

@@ -9,13 +9,12 @@
     <template v-if="groups">
       <div
         v-if="subNode"
-        class="c-tree-sidebar u-overflow-y--auto"
+        class="c-sibling-item c-sidebar u-overflow-y--auto"
         :class="size"
       >
         <el-tree
           ref="groupTree"
           :data="groups"
-          class="c-tree-sidebar__main"
           node-key="path"
           :current-node-key="group.path"
           :props="treeProps"
@@ -25,7 +24,9 @@
           @node-click="setGroup"
         />
       </div>
-      <slot :group="group" />
+      <div class="l-flex__fill c-sibling-item far">
+        <slot :group="group" />
+      </div>
     </template>
     <template v-else>
       <div

src/components/service/FullLink/index.vue

@@ -469,7 +469,7 @@ export default {
 
 .o-line {
   position: absolute;
-  background-color: $border;
+  background-color: $gray--light;
 
   &.linked {
     background-size: 3em 1em;

src/components/tree/DeviceTreeSingle/index.vue

@@ -2,7 +2,6 @@
   <div
     v-loading="loading"
     class="l-flex--col c-tree"
-    :class="size"
   >
     <warning
       v-if="error"
@@ -78,12 +77,6 @@ import { getDeviceTree } from '@/api/device'
 
 export default {
   name: 'DeviceTreeSingle',
-  props: {
-    size: {
-      type: String,
-      default: ''
-    }
-  },
   data () {
     return {
       loading: false,
@@ -177,24 +170,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.c-tree {
-  flex: 1 1 0;
-  min-width: 200px;
-  padding-right: $spacing;
-  border-right: 1px solid $gray--light;
-}
-
-@media screen and (min-width: 1600px) {
-  .c-tree {
-    min-width: 280px;
-  }
-}
-
-@media screen and (min-width: 1920px) {
-  .c-tree {
-    min-width: 400px;
-  }
-}
-</style>

src/components/tree/RatioTreeSingle/index.vue

@@ -2,7 +2,6 @@
   <div
     v-loading="loading"
     class="l-flex__none l-flex--col c-tree"
-    :class="size"
   >
     <div class="l-flex__none c-sibling-item--v u-bold">宽高比</div>
     <warning
@@ -39,12 +38,6 @@ import { getProductTypes } from '@/api/device'
 
 export default {
   name: 'RatioTreeSingle',
-  props: {
-    size: {
-      type: String,
-      default: ''
-    }
-  },
   data () {
     return {
       loading: false,
@@ -117,11 +110,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.c-tree {
-  width: 200px;
-  padding-right: $spacing;
-  border-right: 1px solid $gray--light;
-}
-</style>

src/layout/components/Navbar/UploadDashboard/FileProgress.vue

@@ -99,10 +99,10 @@ export default {
   &__item {
     padding: 6px 0;
     color: $gray;
-    border-bottom: 1px solid $gray--light;
+    border-bottom: 1px solid $border;
 
     &:first-child {
-      border-top: 1px solid $gray--light;
+      border-top: 1px solid $border;
     }
   }
 

src/layout/components/Sidebar/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="c-sidebar">
-    <div class="c-sidebar__header">
+  <div class="c-page-sidebar">
+    <div class="c-page-sidebar__header">
       <router-link
         tag="img"
-        class="c-sidebar__logo u-pointer"
+        class="c-page-sidebar__logo u-pointer"
         src="/logo.png"
         to="/"
       />
     </div>
     <el-scrollbar
-      class="c-sidebar__menu"
-      wrap-class="c-sidebar__wrapper"
+      class="c-page-sidebar__menu"
+      wrap-class="c-page-sidebar__wrapper"
     >
       <el-menu
         mode="vertical"
@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-sidebar {
+.c-page-sidebar {
   display: inline-flex;
   flex-direction: column;
   width: 240px;
@@ -112,7 +112,7 @@ export default {
     min-height: 0.5;
 
     ::v-deep {
-      .c-sidebar__wrapper {
+      .c-page-sidebar__wrapper {
         margin-right: -7px !important;
         overflow-x: hidden;
       }
@@ -168,7 +168,7 @@ export default {
 }
 
 @media screen and (max-width: 1920px) {
-  .c-sidebar {
+  .c-page-sidebar {
     width: 200px;
 
     &__header {

src/scss/bem/_component.scss

@@ -35,7 +35,7 @@
   }
 
   .el-dialog__header {
-    border-bottom: 1px solid $gray--light;
+    border-bottom: 1px solid $border;
   }
 
   .el-dialog__title {
@@ -54,7 +54,7 @@
   }
 
   .el-dialog__footer {
-    border-top: 1px solid $gray--light;
+    border-top: 1px solid $border;
 
     .o-button + .o-button {
       margin-left: $spacing;
@@ -523,34 +523,37 @@
   grid-column-gap: 10px;
 }
 
-.c-tree-sidebar {
+.c-sidebar {
   flex: none;
   width: 200px;
   padding-right: $spacing;
-  margin-right: $spacing;
-  border-right: 1px solid $gray--light;
+  border-right: 1px solid $border;
 
   &.large {
     width: 240px;
   }
 
-  &__main {
-    min-height: 100%;
-    overflow-x: auto;
+  &.auto-width {
+    flex: 1 1 0;
+    min-width: 200px;
   }
 }
 
-.c-tree {
-  color: $black;
-  font-size: 16px;
-
-  &.small {
-    font-size: 14px;
+@media screen and (min-width: 1600px) {
+  .c-sidebar.auto-width {
+    min-width: 280px;
   }
+}
 
-  &.mini {
-    font-size: 12px;
+@media screen and (min-width: 1920px) {
+  .c-sidebar.auto-width {
+    min-width: 400px;
   }
+}
+
+.c-tree {
+  color: $black;
+  font-size: $font-size;
 
   &__title {
     margin: 0 0 12px;
@@ -627,3 +630,35 @@
       rgba(#000, 0) 0%,
       rgba(#000, 0.6) 100%);
 }
+
+.c-step {
+  &__header {
+    padding-bottom: $spacing;
+    margin-bottom: $spacing;
+    border-bottom: 1px solid $border;
+
+    .hidden {
+      visibility: hidden;
+    }
+  }
+
+  &__column {
+    flex: 0 0 auto;
+    min-width: 200px;
+    color: $black;
+
+    & + & {
+      padding-left: $spacing;
+      border-left: 1px solid $border;
+    }
+
+    &.fill {
+      flex: 1 0 auto;
+    }
+
+    &.large {
+      min-width: 336px;
+      max-width: 336px;
+    }
+  }
+}

src/views/ad/scheduling/index.vue

@@ -7,8 +7,7 @@
     background
   >
     <device-tree-single
-      class="c-sibling-item"
-      size="mini"
+      class="c-sibling-item c-sidebar auto-width u-font-size--sm"
       @change="onChange"
     />
     <schema-table
@@ -164,6 +163,9 @@ export default {
     }
   },
   methods: {
+    onChange ({ id }) {
+      this.deviceId = id
+    },
     getDeviceSchedulings (params) {
       return getDeviceSchedulings({
         deviceId: this.deviceId,
@@ -173,9 +175,6 @@ export default {
     isDisableDate (date) {
       return date < this.minDate
     },
-    onChange ({ id }) {
-      this.deviceId = id
-    },
     onScheduling () {
       const date = parseTime(new Date(), '{y}-{m}-{d}')
       this.minDate = new Date(`${date} 00:00:00`)

src/views/ad/task/index.vue

@@ -7,12 +7,11 @@
     background
   >
     <device-tree-single
-      class="c-sibling-item"
-      size="mini"
+      class="c-sibling-item c-sidebar auto-width u-font-size--sm"
       @change="onChange"
     />
     <schema-table
-      v-if="device"
+      v-if="deviceId"
       ref="table"
       class="c-sibling-item far"
       row-key="id"
@@ -170,49 +169,19 @@ import {
 export default {
   name: 'AdOrderTask',
   data () {
-    return {
-      contentSchema: {
-        list: this.getContentAssets,
-        cols: [
-          { prop: 'tagType', label: '文件', width: 100, align: 'center' },
-          { prop: 'fileType', label: '', width: 80 },
-          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
-          { prop: 'adDuration', label: '上播时长', align: 'center' },
-          { type: 'invoke', render: [
-            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
-          ] }
-        ]
-      },
-      taskTimeTypeSelectSchema: {
-        options: [
-          { value: TimeType.SCREEN, label: '开机期间' },
-          { value: TimeType.RANGE, label: '时段' },
-          { value: TimeType.POINT, label: '时间点' }
-        ]
-      },
-      device: null,
-      taskDataFrom: TaskFromType.ASSET,
-      taskData: null,
-      taskDate: '',
-      taskTime: {},
-      taskCount: 100,
-      taskDuration: 5
-    }
-  },
-  computed: {
-    schema () {
-      const canEdit = this.$store.getters.isOperator
-      const canAudit = this.$store.getters.isGroupAdmin
+    const canEdit = this.$store.getters.isOperator
+    const canAudit = this.$store.getters.isGroupAdmin
 
-      return {
+    return {
+      deviceId: '',
+      schema: {
         buttons: canEdit
           ? [
             { type: 'add', label: '素材任务', on: this.onAddAssetTask },
             { type: 'add', label: '合同任务', on: this.onAddContractTask }
           ]
           : null,
-        condition: { deviceId: this.device.id },
-        list: getTasks,
+        list: this.getTasks,
         transform: this.transform,
         cols: [
           { prop: 'type', type: 'refresh', width: 80 },
@@ -283,8 +252,35 @@ export default {
             { label: '删除', allow: ({ from }) => from !== TaskFromType.ORDER, on: this.onDel }
           ], width: 92 }
         ]
-      }
-    },
+      },
+      contentSchema: {
+        list: this.getContentAssets,
+        cols: [
+          { prop: 'tagType', label: '文件', width: 100, align: 'center' },
+          { prop: 'fileType', label: '', width: 80 },
+          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
+          { prop: 'adDuration', label: '上播时长', align: 'center' },
+          { type: 'invoke', render: [
+            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
+          ] }
+        ]
+      },
+      taskTimeTypeSelectSchema: {
+        options: [
+          { value: TimeType.SCREEN, label: '开机期间' },
+          { value: TimeType.RANGE, label: '时段' },
+          { value: TimeType.POINT, label: '时间点' }
+        ]
+      },
+      taskDataFrom: TaskFromType.ASSET,
+      taskData: null,
+      taskDate: '',
+      taskTime: {},
+      taskCount: 100,
+      taskDuration: 5
+    }
+  },
+  computed: {
     taskDataInfo () {
       if (this.taskData) {
         switch (this.taskData.from) {
@@ -306,13 +302,24 @@ export default {
       return !this.disableTask && this.taskData ? this.taskData.info.type === AssetType.VIDEO : this.disableTask
     }
   },
+  watch: {
+    deviceId () {
+      this.$refs.table?.pageTo(1)
+    }
+  },
   methods: {
+    onChange ({ id }) {
+      this.deviceId = id
+    },
+    getTasks (params) {
+      return getTasks({
+        deviceId: this.deviceId,
+        ...params
+      })
+    },
     canEditDuration ({ allowed, from, fromInfo }) {
       return allowed && from === TaskFromType.ASSET && fromInfo?.type === AssetType.IMAGE
     },
-    onChange (device) {
-      this.device = device
-    },
     transform (task) {
       const { id, from, fromId, fromInfo, startDate, startTime, endTime, day, duration, count, auditCount, enable } = task
       const allowed = this.isValidTask(from, fromInfo)
@@ -514,7 +521,7 @@ export default {
       return addTask({
         ...task,
         auditCount: task.count,
-        deviceIdList: [this.device.id],
+        deviceIdList: [this.deviceId],
         enable: false
       }).then(() => {
         this.$refs.table.pageTo(1)

src/views/broadcast/deploy/index.vue

@@ -1,11 +1,12 @@
 <template>
   <wrapper
+    class="c-step"
     fill
     margin
     padding
     background
   >
-    <div class="l-flex__none l-flex--row c-step has-padding">
+    <div class="l-flex__none l-flex--row c-step__header">
       <button
         class="l-flex__none c-sibling-item o-button"
         :class="{ hidden: active === 0 }"
@@ -31,7 +32,7 @@
         {{ btnMsg }}
       </button>
     </div>
-    <div class="l-flex__auto l-flex--col has-padding">
+    <div class="l-flex__auto l-flex--col">
       <div
         v-show="active === 0"
         class="c-grid-form u-align-self--center"
@@ -86,7 +87,7 @@
       <device-group-tree
         v-show="active === 1"
         ref="tree"
-        class="l-flex__fill has-padding"
+        class="l-flex__fill"
         @change="onChange"
       />
       <div
@@ -270,13 +271,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.c-step {
-  border-bottom: 1px solid $gray--light;
-
-  .hidden {
-    visibility: hidden;
-  }
-}
-</style>

src/views/device/detail/components/DeviceRuntime/DownloadProgress.vue

@@ -70,10 +70,10 @@ export default {
   &__item {
     padding: 6px 16px 6px 0;
     color: $gray--dark;
-    border-bottom: 1px solid $gray--light;
+    border-bottom: 1px solid $border;
 
     &:first-child {
-      border-top: 1px solid $gray--light;
+      border-top: 1px solid $border;
     }
   }
 

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

@@ -394,7 +394,7 @@ export default {
   font-size: 14px;
   line-height: 24px;
   word-break: break-word;
-  border-right: 1px solid $gray--light;
+  border-right: 1px solid $border;
 }
 
 .o-card {

src/views/platform/ai-stock/Assign.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="l-flex">
     <template v-if="groups">
-      <div class="c-tree-sidebar u-overflow-y--auto">
+      <div class="c-sibling-item c-sidebar u-overflow-y--auto">
         <el-tree
           ref="groupTree"
           :data="groups"
-          class="c-tree-sidebar__main"
           node-key="path"
           highlight-current
           @node-click="onGroupTreeClick"
@@ -13,51 +12,51 @@
       </div>
       <schema-table
         ref="table"
+        class="c-sibling-item far"
         :schema="schema"
+      />
+      <table-dialog
+        ref="stockDialog"
+        title="总库存"
+        :schema="stockSchema"
+        @choosen="onChoosen"
+      />
+      <confirm-dialog
+        ref="addDialog"
+        title="分配"
+        @confirm="onSave"
       >
-        <table-dialog
-          ref="stockDialog"
-          title="总库存"
-          :schema="stockSchema"
-          @choosen="onChoosen"
-        />
-        <confirm-dialog
-          ref="addDialog"
-          title="分配"
-          @confirm="onSave"
-        >
-          <div class="c-grid-form u-align-self--center">
-            <span class="c-grid-form__label">类型</span>
-            <schema-select
-              v-model="credit.auditType"
-              :schema="auditTypeSchema"
-              disabled
-            />
-            <span class="c-grid-form__label">次数</span>
-            <div class="l-flex--row">
-              <el-input-number
-                v-model="credit.initialAmount"
-                class="c-sibling-item"
-                :min="1"
-                :max="remaining"
-                step-strictly
-              />
-              <span class="c-sibling-item u-color--info light">1 ~ {{ remaining }}</span>
-            </div>
-            <span class="c-grid-form__label required">有效期</span>
-            <el-date-picker
-              v-model="credit.date"
-              class="u-width--auto"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="yyyy-MM-dd"
-              :picker-options="pickerOptions"
+        <div class="c-grid-form u-align-self--center">
+          <span class="c-grid-form__label">类型</span>
+          <schema-select
+            v-model="credit.auditType"
+            :schema="auditTypeSchema"
+            disabled
+          />
+          <span class="c-grid-form__label">次数</span>
+          <div class="l-flex--row">
+            <el-input-number
+              v-model="credit.initialAmount"
+              class="c-sibling-item"
+              :min="1"
+              :max="remaining"
+              step-strictly
             />
+            <span class="c-sibling-item u-color--info light">1 ~ {{ remaining }}</span>
           </div>
-        </confirm-dialog>
-      </schema-table>
+          <span class="c-grid-form__label required">有效期</span>
+          <el-date-picker
+            v-model="credit.date"
+            class="u-width--auto"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+          />
+        </div>
+      </confirm-dialog>
     </template>
     <template v-else>
       <div

src/views/platform/upgrade/deploy/index.vue

@@ -69,11 +69,10 @@
         v-if="choosingDevice"
         class="l-flex__auto l-flex"
       >
-        <div class="c-tree-sidebar u-overflow-y--auto">
+        <div class="c-sibling-item c-sidebar u-overflow-y--auto">
           <el-tree
             ref="tree"
             :data="groups"
-            class="c-tree-sidebar__main"
             node-key="path"
             highlight-current
             @node-click="onGroupTreeClick"
@@ -81,7 +80,7 @@
         </div>
         <device-tree
           v-if="group"
-          class="l-flex__fill u-overflow-y--auto"
+          class="l-flex__fill c-sibling-item far u-overflow-y--auto"
           :invoke="getDevices"
           @change="onChooseDevices"
         />

src/views/screen/deploy/device/index.vue

@@ -1,10 +1,12 @@
 <template>
   <wrapper
+    class="c-step"
     fill
     margin
+    padding
     background
   >
-    <div class="l-flex__none l-flex--row c-step">
+    <div class="l-flex__none l-flex--row c-step__header">
       <button
         class="l-flex__none c-sibling-item o-button"
         :class="{ hidden: active === 0 }"
@@ -29,7 +31,7 @@
         {{ btnMsg }}
       </button>
     </div>
-    <div class="l-flex__fill l-flex has-padding">
+    <div class="l-flex__fill l-flex">
       <device-group-tree
         v-show="active === 0"
         ref="tree"
@@ -37,7 +39,7 @@
         @change="onChange"
       />
       <template v-if="active > 0">
-        <div class="l-flex--col c-sibling-item far c-list">
+        <div class="l-flex--col c-sibling-item far c-step__column">
           <div class="l-flex__none c-sibling-item--v u-bold">{{ resolutionRatio }}</div>
           <div class="l-flex__fill c-sibling-item--v near u-overflow-y--auto">
             <div
@@ -49,7 +51,7 @@
             </div>
           </div>
         </div>
-        <div class="c-list large u-overflow-y--auto">
+        <div class="c-step__column large u-overflow-y--auto">
           <div class="c-sibling-item--v">
             <div class="c-sibling-item--v u-bold">上播类型</div>
             <el-select
@@ -113,7 +115,7 @@
         </div>
         <div
           v-if="eventTarget"
-          class="c-list fill u-overflow-y--auto"
+          class="c-step__column fill u-overflow-y--auto"
         >
           <schedule
             v-if="scheduleId"
@@ -340,36 +342,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-step {
-  padding: $spacing 0;
-  margin: 0 $spacing;
-  border-bottom: 1px solid $gray--light;
-
-  .hidden {
-    visibility: hidden;
-  }
-}
-
-.c-list {
-  flex: 0 0 200px;
-  min-width: 200px;
-  color: $black;
-
-  & + & {
-    padding-left: $spacing;
-    border-left: 1px solid $gray--light;
-  }
-
-  &.large {
-    min-width: 336px;
-    max-width: 336px;
-  }
-
-  &.fill {
-    flex: 1 0 auto;
-  }
-}
-
 .o-schedule-button {
   position: relative;
   width: 217px;

src/views/screen/deploy/ratio/index.vue

@@ -1,10 +1,12 @@
 <template>
   <wrapper
+    class="c-step"
     fill
     margin
+    padding
     background
   >
-    <div class="l-flex__none l-flex--row c-step">
+    <div class="l-flex__none l-flex--row c-step__header">
       <div class="l-flex__none c-sibling-item o-button hidden" />
       <div class="l-flex__fill u-text-center">
         请选择需要上播的设备对应的宽高比并配置相关上播内容
@@ -17,13 +19,13 @@
         发布
       </button>
     </div>
-    <div class="l-flex__fill l-flex has-padding">
+    <div class="l-flex__fill l-flex">
       <ratio-tree-single
         ref="tree"
-        class="c-sibling-item"
+        class="c-sibling-item c-step__column"
         @change="onChange"
       />
-      <div class="c-sibling-item far c-list u-overflow-y--auto">
+      <div class="c-sibling-item far c-step__column u-overflow-y--auto">
         <div class="l-flex--row c-sibling-item--v u-bold">上播时间</div>
         <div class="c-sibling-item--v far u-font-size--sm">优先级</div>
         <el-select
@@ -61,7 +63,7 @@
           @change="onDateTimeChange('endDate')"
         />
       </div>
-      <div class="l-flex--col c-sibling-item far c-list fill">
+      <div class="l-flex--col c-sibling-item far c-step__column fill">
         <div class="l-flex--row c-sibling-item--v u-bold">
           <span class="c-sibling-item u-bold">上播内容</span>
           <i
@@ -301,31 +303,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-step {
-  padding: $spacing 0;
-  margin: 0 $spacing;
-  border-bottom: 1px solid $gray--light;
-
-  .hidden {
-    visibility: hidden;
-  }
-}
-
-.c-list {
-  flex: 0 0 auto;
-  min-width: 200px;
-  color: $black;
-
-  & + & {
-    padding-left: $spacing;
-    border-left: 1px solid $gray--light;
-  }
-
-  &.fill {
-    flex: 1 0 auto;
-  }
-}
-
 .o-publish-asset {
   padding: 4px 0;
   border: 1px solid $gray;