card组件

assets/css/base.less

@@ -226,7 +226,9 @@ div::-webkit-scrollbar-corner {
 .mt50 {
   margin-top: 50px;
 }
-
+.mt60 {
+  margin-top: 60px;
+}
 .mb0 {
   margin-bottom: 0px;
 }

components/page/filed.vue

 <template>
   <Col :span="span" class="filed-col">
-    <div class="label">
+    <div class="label"  v-if="name">
       <label v-text="name"></label>
     </div>
-    <div class="value">
+    <div class="value" >
       <slot></slot>
     </div>
   </Col>

pages/cardList/index.vue

+<template>
+  <div class="cardPage">
+    <div class="cardBox" :class="{ borderCss: isCard }" @click="clickCard">
+      <p class="topCard lh40 flex pr">
+        <span class="checkSingle"
+          ><Checkbox v-model="single" @on-change="singleChange"></Checkbox
+        ></span>
+        <span class="titleName f14 fwBold">文档标题标题</span>
+        <span class="f14 fwBold">DDBH_20200519_1</span>
+        <span class="triangle pa"></span>
+        <span class="triangleName pa f12 fwBold">暂停中</span>
+      </p>
+      <div class="countCard">
+        <div class="mainCount flex">
+          <div class="imgBox">
+            <img src="../../assets/images/logo.png" alt="图片" />
+          </div>
+          <div class="rightCount mr20 mt20">
+            <Filed :span="24" name="创建人：">张三</Filed>
+            <Filed :span="24" name="创建时间："> 今天 </Filed>
+            <Filed :span="24" name=" 计划时间：">aaaaa</Filed>
+            <Filed :span="24" name="ssss:">aaaaa</Filed>
+            <Filed :span="24" name=""
+              >文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。</Filed
+            >
+            <Filed :span="24" name="成员:">aaaaa</Filed>
+            <Filed :span="24" name="工时:">aaaaa</Filed>
+          </div>
+        </div>
+        <div class="bottomCard flex">
+          <span class="earlyWarn f14 fwBold mr20"
+            ><Icon
+              type="ios-information-circle-outline"
+              class="iconStyle"
+            />预警</span
+          >
+          <span class="overdue f14 fwBold mr20"
+            ><Icon type="ios-alarm-outline " class="iconStyle" />超期</span
+          >
+          <span class="rightMore">
+            <span class="mr20" @click="lookBtn"
+              ><a
+                ><Icon type="ios-search-outline" class="iconStyle" />详情</a
+              ></span
+            >
+            <span class="mr20 elliPsis fwBold">
+              <span class="elliPsisSpan">•••</span>
+              <span class="showMore hide">
+                <a
+                  ><span class="mr20" @click="editBtn"
+                    ><Icon
+                      type="ios-paper-outline"
+                      class="iconStyle"
+                    />编辑</span
+                  ></a
+                >
+                <a
+                  ><span class="mr20" @click="delBtn"
+                    ><Icon
+                      type="ios-trash-outline"
+                      class="iconStyle"
+                    />删除</span
+                  ></a
+                >
+              </span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "cardPage",
+  data() {
+    return {
+      isCard: false,
+      single: false,
+      isShow: false,
+    };
+  },
+  methods: {
+    lookBtn() {
+      alert("详情");
+    },
+    editBtn() {
+      alert("编辑");
+    },
+    delBtn() {
+      alert("删除");
+    },
+    clickCard() {
+      this.isCard = !this.isCard;
+      this.single = !this.single;
+    },
+    singleChange(v) {
+      console.log(v);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cardBox {
+  box-sizing: border-box;
+  width: 498px;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  .topCard {
+    height: 40px;
+    background: rgba(38, 128, 235, 0.2);
+    border-radius: 8px 8px 0px 0px;
+    border-bottom: 1px dashed #2680eb;
+    .checkSingle {
+      margin-left: 16px;
+      margin-right: 24px;
+    }
+    .titleName {
+      margin-right: 104px;
+    }
+    /* css3绘制三角形 */
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border-width: 20px;
+      border-style: solid; /*定义的是实现边框*/
+      border-color: transparent #2680eb #2680eb transparent;
+      border-radius: 4px;
+      transform: rotate(-90deg);
+      right: 0;
+      top: 0;
+    }
+    .triangleName {
+      right: -5px;
+      top: -1px;
+      transform: rotate(45deg);
+      color: #ffffff;
+    }
+  }
+  
+  .countCard {
+    height: auto;
+    .imgBox {
+      height: 178px;
+      width: 178px;
+      margin: 20px 20px 23px 14px;
+      border: 1px dashed #232323;
+    }
+    .rightCount {
+      width: calc(100% - 192px);
+      .filed-col {
+        display: inline-flex;
+        margin-bottom: 6px;
+      }
+      .filed-col > .value {
+        text-indent: 2em !important;
+      }
+    }
+    .bottomCard {
+      padding-bottom: 20px;
+      padding-left: 14px;
+      .earlyWarn {
+        color: #ffa000;
+      }
+      .overdue {
+        color: #fe7777;
+      }
+      .rightMore {
+        margin-left: auto;
+        .elliPsis {
+          color: #2680eb;
+        }
+        .elliPsis:hover {
+          .showMore {
+            display: inline-block;
+          }
+          .elliPsisSpan {
+            display: none;
+          }
+        }
+      }
+      .iconStyle {
+        margin-right: 4px;
+      }
+    }
+  }
+  img {
+    height: 100%;
+    width: 100%;
+  }
+}
+.cardBox:hover {
+  box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
+  .topCard{
+       background:rgba(38, 128, 235, 0.4);
+   }
+}
+.borderCss {
+  border: 2px solid #2680eb;
+}
+</style>
\ No newline at end of file