存储空间

src/saas/AppCountryAlbum/components/Home.vue

@@ -17,6 +17,15 @@
         <i>{{ countPhotoNo || 0 }}</i>
       </div>
     </div>
+    <div class="space">
+      <div class="space-top">
+        <h2>相册空间({{ user.editionName }})</h2>
+        <span>{{ user.usedStorageSpace || 0 }} / {{ user.storageSpaceStr }}</span>
+      </div>
+      <div class="rate">
+        <span :style="{width: rate + '%'}"></span>
+      </div>
+    </div>
     <div class="album-operate">
       <div class="left">
         <div class="left-item" @click="addPhoto">
@@ -90,10 +99,20 @@
         countPhotoNo: '',
         countPhotographer: '',
         list: [],
-        msgInfo: {},
+        msgInfo: {}
+      }
+    },
+    computed: {
+      ...mapState(['user']),
+
+      rate () {
+        if (!this.user.usedStorageSpace) {
+          return 0
+        }
+
+        return ((this.user.usedStorageSpace || 0) / storageSpace * 100)
       }
     },
-    computed: { ...mapState(['user']) },
 
     mounted () {
       console.log(this.user.adminAuthType)
@@ -207,6 +226,53 @@
       box-sizing: border-box;
     }
 
+    .space {
+      margin-top: 32px;
+      padding: 24px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
+      border-radius: 16px;
+
+      .rate {
+        display: flex;
+        position: relative;
+        align-items: center;
+        width: 100%;
+        height: 8px;
+        background: #EEEEEE;
+        border-radius: 4px;
+        overflow: hidden;
+
+        span {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          border-radius: 4px;
+          background: #2BB1FF;
+        }
+      }
+
+      .space-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32px;
+
+        h2 {
+          font-size: 32px;
+          font-weight: 600;
+          color: #333;
+        }
+
+        span {
+          font-size: 36px;
+          font-weight: 600;
+          color: #3B424A;
+        }
+      }
+    }
+
     .album-list {
       & > h2 {
         height: 96px;