refactor: some styles

src/components/Schedule/ScheduleCalendar/EventEdit.vue

@@ -87,7 +87,7 @@ export default {
   color: $blue;
   font-size: 16px;
   line-height: 1;
-  border-radius: 4px;
+  border-radius: $radius--mini;
   border: 1px solid $gray;
 
   &__name {

src/components/Schedule/ScheduleCalendar/EventItem.vue

@@ -98,7 +98,7 @@ export default {
   color: #fff;
   font-size: 14px;
   line-height: 1;
-  border-radius: 4px;
+  border-radius: $radius--mini;
   background-color: $blue;
 
   &.fill {

src/components/Schedule/ScheduleCalendar/ScheduleCalendarMonth.vue

@@ -172,7 +172,7 @@ export default {
     margin-top: 10px;
     color: #fff;
     font-weight: bold;
-    border-radius: 4px;
+    border-radius: $radius--mini;
     background-color: #fb8885;
   }
 }

src/components/Schedule/ScheduleCalendar/ScheduleCalendarWeek.vue

@@ -279,7 +279,7 @@ export default {
       margin: 0 6px;
       color: #fff;
       text-align: center;
-      border-radius: 4px;
+      border-radius: $radius--mini;
       background-color: $blue;
       transition: background-color 0.4s;
     }
@@ -291,7 +291,7 @@ export default {
 
     &.free:hover {
       margin: 0 6px;
-      border-radius: 4px;
+      border-radius: $radius--mini;
       background-color: rgba($blue, 0.5);
     }
   }

src/components/Schedule/ScheduleCalendar/index.vue

@@ -167,7 +167,7 @@ export default {
   }
 
   &__mode {
-    border-radius: 4px;
+    border-radius: $radius--mini;
     background-color: #f4f7f8;
     overflow: hidden;
   }

src/components/Schedule/ScheduleSwiper/index.vue

@@ -280,7 +280,7 @@ export default {
 
   &__item {
     border: 1px solid $gray;
-    border-radius: 6px;
+    border-radius: $radius--mini;
 
     &.sortable-chosen {
       border-color: #c6e2ff;

src/components/form/EditInput/index.vue

@@ -102,7 +102,7 @@ export default {
     line-height: 40px;
     outline: 0;
     -webkit-appearance: none;
-    border-radius: 4px;
+    border-radius: $radius--mini;
     background-color: transparent;
 
     &:hover {

src/scss/bem/_ishas.scss

@@ -1,9 +1,13 @@
 .has-padding {
   padding: $spacing;
-}
 
-.has-padding--h {
-  padding: 0 $spacing;
+  &--h {
+    padding: 0 $spacing;
+  }
+
+  &--v {
+    padding: $spacing 0;
+  }
 }
 
 .has-top-padding {

src/scss/bem/_object.scss

@@ -9,7 +9,7 @@
   font-size: 14px;
   line-height: 1;
   border: none;
-  border-radius: 4px;
+  border-radius: $radius--mini;
   background-color: $blue;
   transition: background-color .4s;
   user-select: none;

src/scss/bem/_utility.scss

@@ -64,6 +64,10 @@
 
 .u-color--info {
   color: $info--dark;
+
+  &.light {
+    color: $info;
+  }
 }
 
 .u-bold {

src/scss/helpers/_variables.scss

@@ -25,3 +25,4 @@ $border: #edf0f6;
 
 $spacing: 16px;
 $radius: 8px;
+$radius--mini: 4px;

src/views/dashboard/components/Device.vue

@@ -43,7 +43,7 @@
             class="l-flex__none o-device__current"
             :text="current.target.name"
           />
-          <div class="l-flex__none l-flex--row o-device__time">
+          <div class="l-flex__none l-flex--row has-top-padding">
             <span class="o-device__hms">
               {{ current.startTime }}
               <span class="o-device__ymd">{{ current.startDate }}</span>
@@ -59,13 +59,13 @@
         </template>
         <span
           v-else
-          class="l-flex__auto l-flex--row center o-device__current"
+          class="l-flex__auto l-flex--row u-bold"
         >
           当前暂无节目
         </span>
       </template>
       <template v-else>
-        <span class="l-flex__auto l-flex--row center o-device__current">
+        <span class="l-flex__auto l-flex--row u-bold">
           当前设备离线了
         </span>
       </template>
@@ -319,14 +319,14 @@ export default {
     margin-left: -4px;
     font-size: 12px;
     line-height: 1;
-    border-radius: 4px 0 0 4px;
+    border-radius: $radius--mini 0 0 $radius--mini;
     background-color: currentColor;
   }
 
   &__preview {
     margin-top: 12px;
     padding-top: 56.25%;
-    border-radius: 4px;
+    border-radius: $radius--mini;
 
     &.empty {
       background: url("~@/assets/image_no_program.svg") 0 0 / 100% 100%
@@ -341,20 +341,15 @@ export default {
   &__info {
     margin-top: 12px;
     height: 88px;
+    font-size: 20px;
   }
 
   &__current {
     align-self: stretch;
-    font-size: 20px;
     font-weight: bold;
     text-align: center;
   }
 
-  &__time {
-    margin: $spacing 0 32px;
-    font-size: 20px;
-  }
-
   &__line {
     display: inline-block;
     width: 20px;
@@ -378,7 +373,6 @@ export default {
   }
 
   &__next {
-    align-self: stretch;
     height: 16px;
     color: $info;
     font-size: 12px;

src/views/device/back/components/Video.vue

@@ -198,6 +198,7 @@ video::-webkit-media-controls-enclosure {
 .o-video {
   position: relative;
   padding-top: 56.25%;
+  border-radius: $radius--mini;
   overflow: hidden;
 
   &.offline {
@@ -231,7 +232,7 @@ video::-webkit-media-controls-enclosure {
     font-size: 14px;
     line-height: 24px;
     text-align: center;
-    border-radius: 0 0 0 4px;
+    border-radius: 0 0 0 $radius--mini;
     background-color: $error--dark;
     z-index: 9;
 

src/views/device/back/index.vue

@@ -153,8 +153,8 @@ export default {
 .c-back-grid {
   display: grid;
   grid-template-rows: max-content;
-  grid-row-gap: $spacing;
-  grid-column-gap: $spacing;
+  grid-row-gap: 4px;
+  grid-column-gap: 4px;
   min-height: 0;
   min-width: 0;
 

src/views/device/detail/components/DeviceInfo.vue

@@ -87,10 +87,9 @@
         <span class="c-grid-form__label required">地址：</span>
         <el-input
           v-model.trim="info.address"
-          type="textarea"
+          placeholder="最多100个字符"
           maxlength="100"
-          :rows="3"
-          show-word-limit
+          clearable
         />
       </div>
     </confirm-dialog>

src/views/device/detail/components/DeviceInvoke/mixins/TaskDialog.vue

@@ -124,7 +124,7 @@ export default {
   color: $blue;
   font-size: 16px;
   line-height: 1;
-  border-radius: 4px;
+  border-radius: $radius--mini;
   border: 1px solid $gray;
 
   &__name {

src/views/device/detail/index.vue

@@ -210,7 +210,7 @@ export default {
   color: #fff;
   font-size: 16px;
   line-height: 1;
-  border-radius: 4px;
+  border-radius: $radius--mini;
   background-color: $success--dark;
 
   &.primary {

src/views/device/timeline/index.vue

@@ -505,7 +505,7 @@ export default {
   &__screen {
     width: 354px;
     margin-right: 24px;
-    border-radius: 4px;
+    border-radius: $radius--mini;
   }
 
   &__name {
@@ -607,7 +607,7 @@ export default {
     padding: 6px;
     color: #fff;
     font-size: 12px;
-    border-radius: 4px;
+    border-radius: $radius--mini;
     background-color: $blue;
     transform: translateY(-50%);
 
@@ -684,7 +684,7 @@ export default {
     width: 84px;
     height: 48px;
     margin-right: 8px;
-    border-radius: 4px;
+    border-radius: $radius--mini;
   }
 
   &__name {
@@ -696,7 +696,7 @@ export default {
   display: inline-block;
   padding: 4px;
   font-size: 12px;
-  border-radius: 4px;
+  border-radius: $radius--mini;
 
   & + & {
     margin-left: 4px;

src/views/external/camera/components/CameraPlayer.vue

@@ -112,6 +112,7 @@ video::-webkit-media-controls-enclosure {
 .o-video {
   position: relative;
   padding-top: 56.25%;
+  border-radius: $radius--mini;
   overflow: hidden;
 
   &.offline {

src/views/external/camera/components/Detail.vue

@@ -524,12 +524,12 @@ export default {
       line-height: 36px;
       height: 238px;
       position: relative;
-      border-radius: 4px;
+      border-radius: $radius--mini;
 
       &_title {
         width: 72px;
         display: inline-block;
-        border-radius: 4px;
+        border-radius: $radius--mini;
       }
 
       .choosedate {
@@ -538,7 +538,7 @@ export default {
         top: 10px;
         .timeBtn {
           display: inline-block;
-          border-radius: 4px;
+          border-radius: $radius--mini;
           background: #4478bc;
           height: 24px;
           line-height: 24px;
@@ -547,7 +547,7 @@ export default {
           span {
             font-size: 14px;
             background: #4478bc;
-            border-radius: 4px;
+            border-radius: $radius--mini;
             padding: 0 7px;
             display: inline-block;
             cursor: pointer;
@@ -565,7 +565,7 @@ export default {
     .video-controls {
       background-color: rgba(0, 6, 13, 0.75);
       height: 48px;
-      border-radius: 4px;
+      border-radius: $radius--mini;
       margin-bottom: 16px;
       position: relative;
 

src/views/platform/media/index.vue

@@ -28,7 +28,7 @@ export default {
     font-size: 16px;
     line-height: 1;
     font-weight: bold;
-    border-radius: 4px;
+    border-radius: $radius--mini;
 
     & + & {
       margin-top: 20px;

src/views/platform/profile/index.vue

@@ -23,7 +23,11 @@
           @change="onUpload"
         >
       </div>
-      <div class="u-bold">{{ name }}</div>
+      <div class="c-profile__name has-top-padding">{{ name }}</div>
+      <div class="u-relative has-top-padding">
+        <i class="el-icon-user" />
+        {{ role }}
+      </div>
     </div>
     <div
       v-loading="loading"
@@ -35,46 +39,72 @@
       />
       <div
         v-else
-        class="c-grid-form mini has-padding"
+        class="has-padding"
       >
-        <span class="c-grid-form__label">手机：</span>
-        <div>
-          <el-input
-            v-model="phone"
-            maxlength="11"
-            @change="onPhoneChange"
-            @keydown.enter="$event.target.blur()"
-          />
-        </div>
-        <span class="c-grid-form__label">邮箱：</span>
-        <div>
-          <el-input
-            v-model="email"
-            maxlength="50"
-            @change="onEmailChange"
-            @keydown.enter="$event.target.blur()"
-          />
-        </div>
-        <div class="c-grid-form__label" />
         <div class="l-flex--row">
-          <i class="o-wechat" />
-          <div
-            class="has-padding u-pointer"
-            :class="color"
-            @click="onClickWechat"
-          >
-            {{ tip }}
+          <label class="c-grid-form__label">手机：</label>
+          <div>
+            <el-input
+              v-model="phone"
+              maxlength="11"
+              @change="onPhoneChange"
+              @keydown.enter="$event.target.blur()"
+            />
           </div>
         </div>
-        <div class="c-grid-form__label" />
-        <div class="l-flex--row">
-          <i class="o-wechat" />
-          <div
-            class="has-padding u-pointer"
-            :class="appletColor"
-            @click="onClickApplet"
-          >
-            {{ appletTip }}
+        <div class="l-flex--row has-padding--v">
+          <label class="c-grid-form__label">邮箱：</label>
+          <div>
+            <el-input
+              v-model="email"
+              maxlength="50"
+              @change="onEmailChange"
+              @keydown.enter="$event.target.blur()"
+            />
+          </div>
+        </div>
+        <div class="l-flex--row has-top-padding">
+          <div class="o-app">
+            <i class="o-icon wechat has-bg" />
+            <template v-if="wechat">
+              <div class="l-flex--row">
+                <div class="c-sibling-item u-color--info light">已绑定</div>
+                <div
+                  class="c-sibling-item u-pointer"
+                  @click="onClickWechat"
+                >
+                  解绑
+                </div>
+              </div>
+            </template>
+            <div
+              v-else
+              class="u-pointer"
+              @click="onClickWechat"
+            >
+              绑定微信
+            </div>
+          </div>
+          <div class="o-app">
+            <i class="o-icon applet has-bg" />
+            <template v-if="applet">
+              <div class="l-flex--row">
+                <div class="c-sibling-item u-color--info light">已绑定</div>
+                <div
+                  class="c-sibling-item u-pointer"
+                  @click="onClickApplet"
+                >
+                  解绑
+                </div>
+              </div>
+            </template>
+            <div
+              v-else
+              class="u-pointer"
+              @click="onClickApplet"
+            >
+              绑定小程序
+            </div>
           </div>
         </div>
       </div>
@@ -87,7 +117,7 @@
     >
       <div class="c-wechat has-padding">
         <div class="l-flex--row center has-bottom-padding">
-          <i class="c-sibling-item o-wechat" />
+          <i class="c-sibling-item o-icon medium wechat has-bg" />
           <span class="c-sibling-item u-color--black u-bold">请使用微信扫一扫</span>
         </div>
         <div
@@ -107,7 +137,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import {
   userinfo,
   updateUser,
@@ -146,25 +176,30 @@ export default {
     }
   },
   computed: {
-    ...mapState('user', ['name']),
+    ...mapGetters([
+      'name',
+      'isSuperAdmin',
+      'isTenantAdmin',
+      'isGroupAdmin'
+    ]),
     avatarStyle () {
       const avatar = this.avatar
       return avatar ? { backgroundImage: `url("${avatar}")` } : null
     },
-    tip () {
-      return this.wechat ? '解除公众号绑定' : '绑定公众号'
-    },
-    color () {
-      return this.wechat ? 'u-color--error' : 'u-color--primary'
-    },
-    appletTip () {
-      return this.applet ? '解除小程序绑定' : '绑定小程序'
-    },
-    appletColor () {
-      return this.applet ? 'u-color--error' : 'u-color--primary'
-    },
     qrOptions () {
       return this[this.qrType]
+    },
+    role () {
+      if (this.isSuperAdmin) {
+        return '超级管理员'
+      }
+      if (this.isTenantAdmin) {
+        return '管理员'
+      }
+      if (this.isGroupAdmin) {
+        return '主管'
+      }
+      return '员工'
     }
   },
   created () {
@@ -457,12 +492,14 @@ export default {
   overflow: hidden;
 
   &__header {
-    justify-content: space-between;
-    height: 140px;
     color: #fff;
     line-height: 1;
     background-color: $blue;
   }
+
+  &__name {
+    font-size: 20px;
+  }
 }
 
 .o-avatar {
@@ -497,11 +534,33 @@ export default {
   }
 }
 
-.o-wechat {
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  background: url("~@/assets/icon_wechat.png") 0 0 / 100% 100% no-repeat;
+.el-icon-user {
+  position: absolute;
+  left: -32px;
+}
+
+.o-app {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 128px;
+  color: $blue;
+  font-size: 16px;
+
+  .o-icon {
+    margin-bottom: $spacing;
+  }
+}
+
+.o-icon {
+  &.wechat {
+    background-image: url("~@/assets/icon_wechat.png");
+  }
+
+  &.applet {
+    background-image: url("~@/assets/icon_applet.png");
+  }
 }
 
 .c-wechat {

src/views/realm/device/Device.vue

@@ -58,10 +58,9 @@
         <span class="c-grid-form__label required">地址：</span>
         <el-input
           v-model.trim="currObj.address"
-          type="textarea"
+          placeholder="最多100个字符"
           maxlength="100"
-          :rows="3"
-          show-word-limit
+          clearable
         />
       </div>
     </confirm-dialog>