refactor(program): program card style

src/views/bigscreen/index.vue

@@ -23,50 +23,40 @@
               v-if="item.status === 2"
               class="c-program__status el-icon-circle-check u-color--success"
             />
-            <span class="c-program__rate">
-              {{ item.resolutionRatio }}
-            </span>
-            <div class="c-program__footer">
-              <span class="c-program__time u-ellipsis">{{ item.createTime }}</span>
-              <el-tooltip
+            <span class="c-program__ratio">{{ item.resolutionRatio }}</span>
+            <div class="c-program__time u-ellipsis">{{ item.createTime }}</div>
+          </div>
+          <div class="l-flex--col c-program__footer">
+            <edit-input
+              v-model.trim="item.name"
+              class="c-program__name"
+              :disabled="item.status !== 0"
+              align="left"
+              @edit="onEdit(item)"
+            />
+            <div class="c-program__buttons l-flex--row">
+              <div
                 v-if="item.status === 0"
-                content="提交"
-                :hide-after="2000"
+                class="l-flex__fill c-program__button"
+                @click="onSubmit(item)"
               >
-                <i
-                  class="o-icon--active el-icon-upload2 u-pointer"
-                  @click.stop="onSubmit(item)"
-                />
-              </el-tooltip>
-              <el-tooltip
-                v-if="item.status === 2"
-                content="复制"
-                :hide-after="2000"
+                提交
+              </div>
+              <div
+                v-else
+                class="l-flex__fill c-program__button"
+                @click="onCopy(item)"
               >
-                <svg-icon
-                  class="o-icon--active u-pointer"
-                  icon-class="copy"
-                  @click.stop="onCopy(item)"
-                />
-              </el-tooltip>
-              <el-tooltip
-                content="删除"
-                :hide-after="2000"
+                复制
+              </div>
+              <div
+                class="l-flex__fill c-program__button"
+                @click="onDel(item)"
               >
-                <i
-                  class="o-icon--active el-icon-delete u-pointer"
-                  @click.stop="onDel(item)"
-                />
-              </el-tooltip>
+                删除
+              </div>
             </div>
           </div>
-          <edit-input
-            v-model.trim="item.name"
-            class="c-program__name"
-            :disabled="item.status !== 0"
-            align="left"
-            @edit="onEdit(item)"
-          />
         </div>
       </grid-table-item>
     </grid-table>
@@ -245,7 +235,9 @@ export default {
       addProgram(this.program).then(({ data: id }) => {
         done()
         this.$refs.table.resetCondition({ status: State.READY, name: this.program.name })
-        this.onDesign(id)
+        this.$nextTick(() => {
+          this.onDesign(id)
+        })
       })
     },
     onDesign (id) {
@@ -324,12 +316,15 @@ export default {
 
 <style lang="scss" scoped>
 .c-program {
+  margin: 0 2px 8px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
+
   &__body {
     position: relative;
     padding-top: 60%;
     color: #fff;
     font-size: 16px;
-    border-radius: $radius;
+    border-radius: $radius $radius 0 0;
     background: rgba(0, 0, 0, 0.8) url("~@/assets/program_bg.png") center center /
       100% 100% no-repeat;
     overflow: hidden;
@@ -337,49 +332,60 @@ export default {
 
   &__status {
     position: absolute;
-    top: 6px;
+    top: 4px;
     left: 6px;
     font-size: 24px;
   }
 
-  &__rate {
+  &__ratio {
     position: absolute;
     top: 0;
     right: 0;
-    padding: 2px 4px;
+    padding: 4px 6px;
     font-size: 12px;
     background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 0 0 0 4px;
+    border-radius: 0 $radius 0 $radius;
   }
 
-  &__name {
-    color: $black;
-    font-weight: bold;
-  }
-
-  &__footer {
-    display: inline-flex;
-    align-items: center;
+  &__time {
     position: absolute;
-    width: 100%;
+    left: 0;
     bottom: 0;
-    padding: 24px 16px 16px;
+    width: 100%;
+    font-size: 14px;
+    padding: 10px 6px 4px;
     background-image: linear-gradient(
       to bottom,
       rgba(#000, 0) 0%,
       rgba(#000, 0.6) 100%
     );
+  }
 
-    .o-icon--active {
-      margin-left: $spacing;
-      font-size: 18px;
-    }
+  &__footer {
+    border-radius: 0 0 $radius $radius;
   }
 
-  &__time {
-    flex: 1 1 auto;
-    min-width: 0;
+  &__name {
+    color: $black;
+    font-weight: bold;
+  }
+
+  &__buttons {
+    border-top: 1px solid $border;
+  }
+
+  &__button {
+    padding: 12px 10px;
+    color: $blue;
     font-size: 14px;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $blue--light;
+    }
   }
 }
 </style>