refactor: adjust .c-footer

src/components/external/DevicePlayer/index.vue

@@ -36,7 +36,7 @@
       <div class="l-flex__fill c-sibling-item u-ellipsis">{{ device.name }}</div>
       <template v-if="online">
         <div
-          class="l-flex__none c-sibling-item o-quality-menu"
+          class="l-flex__none c-sibling-item o-quality-menu has-active u-pointer"
           @click.stop="toggleQualityMenu"
         >
           <div
@@ -62,12 +62,10 @@
               原画
             </div>
           </div>
-          <div class="has-active u-pointer">
-            {{ qualityValue }}
-          </div>
+          {{ qualityValue }}
         </div>
         <i
-          class="el-icon-full-screen has-active u-pointer"
+          class="c-sibling-item el-icon-full-screen has-active u-pointer"
           @click="onFullScreen"
         />
       </template>
@@ -210,6 +208,7 @@ export default {
 
   &__item {
     padding: 4px 0;
+    color: #fff;
 
     &:hover {
       color: $primary;

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

@@ -31,13 +31,13 @@
     />
     <div
       v-if="controls"
-      class="c-footer l-flex--row"
+      class="l-flex--row c-footer"
     >
       <div class="l-flex__auto c-sibling-item u-ellipsis">{{ camera.name }}</div>
       <slot />
       <i
         v-if="online"
-        class="el-icon-full-screen has-active u-pointer"
+        class="c-sibling-item el-icon-full-screen has-active u-pointer"
         @click="onFullScreen"
       />
     </div>

src/scss/bem/_component.scss

@@ -527,16 +527,13 @@
 
 .c-footer {
   position: absolute;
-  width: 100%;
+  left: 0;
   bottom: 0;
-  padding: 24px 16px 16px;
+  width: 100%;
+  padding: 24px $spacing $spacing;
   color: #fff;
+  line-height: 1;
   background-image: linear-gradient(to bottom,
       rgba(#000, 0) 0%,
       rgba(#000, 0.6) 100%);
-
-  .has-active {
-    margin-left: $spacing;
-    font-size: 18px;
-  }
 }

src/views/device/detail/components/external/Camera/index.vue

@@ -56,7 +56,7 @@
         >
           <template v-if="editable">
             <i
-              class="el-icon-delete has-active u-pointer"
+              class="c-sibling-item el-icon-delete has-active u-pointer"
               @click.stop="onDel(item)"
             />
           </template>

src/views/external/camera/index.vue

@@ -50,11 +50,11 @@
           @fullscreen="onFullScreen(item)"
         >
           <i
-            class="el-icon-edit has-active u-pointer"
+            class="c-sibling-item el-icon-edit has-active u-pointer"
             @click.stop="onEdit(item)"
           />
           <i
-            class="el-icon-delete has-active u-pointer"
+            class="c-sibling-item el-icon-delete has-active u-pointer"
             @click.stop="onDel(item)"
           />
         </camera-player>