|
@@ -5,13 +5,11 @@
|
|
|
<el-avatar :size="64" :src="user ? user.avatarUrl : ''" class="m-avatar" />
|
|
<el-avatar :size="64" :src="user ? user.avatarUrl : ''" class="m-avatar" />
|
|
|
<div class="m-user-meta">
|
|
<div class="m-user-meta">
|
|
|
<div class="m-username-row">
|
|
<div class="m-username-row">
|
|
|
- <span class="m-name">{{ user ? user.name : '未登录用户' }}</span>
|
|
|
|
|
- <span class="m-vip-badge">黄金VIP</span>
|
|
|
|
|
|
|
+ <span class="m-name">{{ user ? user.screenName : '未登录用户' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<span class="m-uid">ID: {{ user ? user.userId : '-' }}</span>
|
|
<span class="m-uid">ID: {{ user ? user.userId : '-' }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <el-button type="text" size="mini" class="m-edit-profile-btn" icon="el-icon-edit">修改资料</el-button>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mobile-storage-card">
|
|
<div class="mobile-storage-card">
|
|
@@ -20,24 +18,25 @@
|
|
|
<i class="el-icon-cloudy" />
|
|
<i class="el-icon-cloudy" />
|
|
|
<span class="s-title">云存储空间</span>
|
|
<span class="s-title">云存储空间</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <span class="s-action" @click="$message.info('前往扩容')">扩容套餐</span>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="s-usage-display">
|
|
<div class="s-usage-display">
|
|
|
- <span class="num-used">{{ usedSpaceGB }} GB</span>
|
|
|
|
|
- <span class="num-total">/ {{ totalSpaceGB }} GB</span>
|
|
|
|
|
|
|
+ <span class="num-used">{{ diskSpace.used }} GB</span>
|
|
|
|
|
+ <span class="num-total">/ {{ diskSpace.total }} GB</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="m-multi-progress">
|
|
<div class="m-multi-progress">
|
|
|
- <div class="m-seg video" :style="{ width: videoPercent + '%' }" />
|
|
|
|
|
- <div class="m-seg photo" :style="{ width: photoPercent + '%' }" />
|
|
|
|
|
- <div class="m-seg other" :style="{ width: otherPercent + '%' }" />
|
|
|
|
|
|
|
+ <div class="m-seg video" :style="{ width: diskSpace.videoPercent + '%' }" />
|
|
|
|
|
+ <div class="m-seg photo" :style="{ width: diskSpace.photoPercent + '%' }" />
|
|
|
|
|
+ <div class="m-seg audio" :style="{ width: diskSpace.audioPercent + '%' }" />
|
|
|
|
|
+ <div class="m-seg other" :style="{ width: diskSpace.otherPercent + '%' }" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="m-legend-grid">
|
|
<div class="m-legend-grid">
|
|
|
- <div class="l-item"><i class="dot-indicator is-video" />视频 ({{ videoPercent }}%)</div>
|
|
|
|
|
- <div class="l-item"><i class="dot-indicator is-photo" />照片 ({{ photoPercent }}%)</div>
|
|
|
|
|
- <div class="l-item"><i class="dot-indicator is-other" />其他 ({{ otherPercent }}%)</div>
|
|
|
|
|
|
|
+ <div class="l-item"><i class="dot-indicator is-video" />视频 ({{ diskSpace.videoPercent }}%)</div>
|
|
|
|
|
+ <div class="l-item"><i class="dot-indicator is-photo" />照片 ({{ diskSpace.photoPercent }}%)</div>
|
|
|
|
|
+ <div class="l-item"><i class="dot-indicator is-photo" />音频 ({{ diskSpace.audioPercent }}%)</div>
|
|
|
|
|
+ <div class="l-item"><i class="dot-indicator is-other" />其他 ({{ diskSpace.otherPercent }}%)</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -60,34 +59,6 @@
|
|
|
<i class="el-icon-arrow-right item-right-arrow" />
|
|
<i class="el-icon-arrow-right item-right-arrow" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <el-dialog
|
|
|
|
|
- title="账号设置"
|
|
|
|
|
- :visible.sync="showSettings"
|
|
|
|
|
- width="90%"
|
|
|
|
|
- custom-class="mobile-popup-settings"
|
|
|
|
|
- append-to-body
|
|
|
|
|
- >
|
|
|
|
|
- <div class="mobile-form-list">
|
|
|
|
|
- <div class="form-row">
|
|
|
|
|
- <span class="f-label">离线下载通知</span>
|
|
|
|
|
- <el-switch v-model="switchEnabled" @change="onSwitchChange" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-divider class="m-divider" />
|
|
|
|
|
- <div class="form-row">
|
|
|
|
|
- <span class="f-label">隐私保护模式</span>
|
|
|
|
|
- <el-switch v-model="privacyEnabled" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <el-divider class="m-divider" />
|
|
|
|
|
- <div class="form-row">
|
|
|
|
|
- <span class="f-label">客户端版本</span>
|
|
|
|
|
- <span class="v-tag">v1.2.0 (Stable)</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div slot="footer" class="dialog-footer-full">
|
|
|
|
|
- <el-button type="primary" round style="width: 100%" @click="showSettings = false">关闭窗口</el-button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-dialog>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -99,20 +70,17 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
user: null,
|
|
user: null,
|
|
|
- usedSpaceGB: 120,
|
|
|
|
|
- totalSpaceGB: 6144,
|
|
|
|
|
- videoPercent: 45,
|
|
|
|
|
- photoPercent: 15,
|
|
|
|
|
- otherPercent: 10,
|
|
|
|
|
- showSettings: false,
|
|
|
|
|
- switchEnabled: false,
|
|
|
|
|
- privacyEnabled: true,
|
|
|
|
|
|
|
+ diskSpace: {
|
|
|
|
|
+ total: 6144,
|
|
|
|
|
+ used: 120,
|
|
|
|
|
+ videoPercent: 35,
|
|
|
|
|
+ photoPercent: 25,
|
|
|
|
|
+ audioPercent: 30,
|
|
|
|
|
+ otherPercent: 10
|
|
|
|
|
+ },
|
|
|
actionList: [
|
|
actionList: [
|
|
|
- { title: '离线下载', desc: '支持磁力链接与 BT 种子', icon: 'el-icon-link', color: '#1989fa' },
|
|
|
|
|
{ title: '回收站', desc: '已删除文件保留 30 天', icon: 'el-icon-delete', color: '#f56c6c' },
|
|
{ title: '回收站', desc: '已删除文件保留 30 天', icon: 'el-icon-delete', color: '#f56c6c' },
|
|
|
- { title: '传输中心', desc: '查看当前上传与下载任务', icon: 'el-icon-sort', color: '#67c23a' },
|
|
|
|
|
- { title: '个人设置', desc: '修改头像、密码与偏好', icon: 'el-icon-setting', color: '#64748b', action: 'settings' },
|
|
|
|
|
- { title: '帮助反馈', desc: '遇到问题?联系客服', icon: 'el-icon-chat-dot-round', color: '#e6a23c' }
|
|
|
|
|
|
|
+ { title: '个人设置', desc: '修改头像、密码与偏好', icon: 'el-icon-setting', color: '#64748b', action: 'settings' }
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -121,13 +89,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
handleAction(item) {
|
|
handleAction(item) {
|
|
|
- if (item.action === 'settings') {
|
|
|
|
|
- this.showSettings = true
|
|
|
|
|
- } else {
|
|
|
|
|
- this.$message.info(`导航至: ${item.title}`)
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- onSwitchChange(val) {
|
|
|
|
|
|
|
+ this.$message.info(`导航至: ${item.title}`)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -199,6 +161,7 @@ export default {
|
|
|
.m-seg { height: 100%; }
|
|
.m-seg { height: 100%; }
|
|
|
.m-seg.video { background: #1989fa; }
|
|
.m-seg.video { background: #1989fa; }
|
|
|
.m-seg.photo { background: #67c23a; }
|
|
.m-seg.photo { background: #67c23a; }
|
|
|
|
|
+.m-seg.audio { background: #3ac2a7; }
|
|
|
.m-seg.other { background: #ff976a; }
|
|
.m-seg.other { background: #ff976a; }
|
|
|
|
|
|
|
|
.m-legend-grid {
|
|
.m-legend-grid {
|