fix: /account/center/project style

FeiQinZDF · Apr 19, 2019 · c5de135 · c5de135
1 parent 684a19b
commit c5de135
Showing 1 changed file with 57 additions and 25 deletions.
diff --git a/src/views/account/center/page/Project.vue b/src/views/account/center/page/Project.vue
@@ -1,29 +1,31 @@
 <template>
-  <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
-    <a-list-item slot="renderItem" slot-scope="item">
-      <a-card class="ant-pro-pages-list-projects-card" hoverable>
-        <img slot="cover" :src="item.cover" :alt="item.title" />
-        <a-card-meta :title="item.title">
-          <template slot="description">
-            <ellipsis :length="50">{{ item.description }}</ellipsis>
-          </template>
-        </a-card-meta>
-        <div class="cardItemContent">
-          <span>{{ item.updatedAt | fromNow }}</span>
-          <div class="avatarList">
-            <avatar-list size="mini">
-              <avatar-list-item
-                v-for="(member, i) in item.members"
-                :key="`${item.id}-avatar-${i}`"
-                :src="member.avatar"
-                :tips="member.name"
-              />
-            </avatar-list>
+  <div class="ant-pro-pages-account-projects-cardList">
+    <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <a-card class="ant-pro-pages-account-projects-card" hoverable>
+          <img slot="cover" :src="item.cover" :alt="item.title" />
+          <a-card-meta :title="item.title">
+            <template slot="description">
+              <ellipsis :length="50">{{ item.description }}</ellipsis>
+            </template>
+          </a-card-meta>
+          <div class="cardItemContent">
+            <span>{{ item.updatedAt | fromNow }}</span>
+            <div class="avatarList">
+              <avatar-list size="mini">
+                <avatar-list-item
+                  v-for="(member, i) in item.members"
+                  :key="`${item.id}-avatar-${i}`"
+                  :src="member.avatar"
+                  :tips="member.name"
+                />
+              </avatar-list>
+            </div>
           </div>
-        </div>
-      </a-card>
-    </a-list-item>
-  </a-list>
+        </a-card>
+      </a-list-item>
+    </a-list>
+  </div>
 </template>
 
 <script>
@@ -72,6 +74,36 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  .ant-pro-pages-account-projects-cardList {
+    margin-top: 24px;
 
+    /deep/ .ant-card-meta-title {
+      margin-bottom: 4px;
+    }
+
+    /deep/ .ant-card-meta-description {
+      height: 44px;
+      overflow: hidden;
+      line-height: 22px;
+    }
+
+    .cardItemContent {
+      display: flex;
+      height: 20px;
+      margin-top: 16px;
+      margin-bottom: -4px;
+      line-height: 20px;
+
+      > span {
+        flex: 1 1;
+        color: rgba(0,0,0,.45);
+        font-size: 12px;
+      }
+
+      /deep/ .ant-pro-avatar-list {
+        flex: 0 1 auto;
+      }
+    }
+  }
 </style>