diff --git a/src/saas/AppCountryAlbum/components/Home.vue b/src/saas/AppCountryAlbum/components/Home.vue index d0a9a4fa..13962b2d 100644 --- a/src/saas/AppCountryAlbum/components/Home.vue +++ b/src/saas/AppCountryAlbum/components/Home.vue @@ -17,6 +17,15 @@ {{ countPhotoNo || 0 }} +
+
+

相册空间({{ user.editionName }})

+ {{ user.usedStorageSpace || 0 }} / {{ user.storageSpaceStr }} +
+
+ +
+
@@ -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;