attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 用户信息

Browse Source
This commit is contained in:
wf 2024-06-19 18:26:36 +08:00
parent 24a5487058
commit 2aa66115df
1 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/personal-center/userinfo/userinfo.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div class="dc-page"> <div class="dc-page">
<div class="my_avatar"> <div class="my-avatar">
<a-avatar :size="100"> <a-avatar :size="100">
<img alt="avatar" :src="myImage" /> <img alt="avatar" :src="myImage" />
</a-avatar> </a-avatar>
<div class="my_name"> <div class="my-name">
<div class="my_title title_1">兔子先森</div> <div class="my-title title-1">兔子先森</div>
<div class="my_local"><icon-location />浙江杭州</div> <div class="my-local"><icon-location />浙江杭州</div>
</div> </div>
</div> </div>
<a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }" :col-gap="16" :row-gap="16"> <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }" :col-gap="16" :row-gap="16">
<a-grid-item> <a-grid-item>
<div class="title_1">👋关于我</div> <div class="title-1">👋关于我</div>
<div class="type_row" v-for="item in list.aboutMe" :key="item.label"> <div class="type-row" v-for="item in list.aboutMe" :key="item.label">
<div class="column_title">{{ item.label }}：</div> <div class="column-title">{{ item.label }}：</div>
<div v-for="(type, index) in item.value" :key="index"> <div v-for="(type, index) in item.value" :key="index">
<a-tag :color="item.theme"> <a-tag :color="item.theme">
{{ type }} {{ type }}
@ -22,16 +22,16 @@
</div> </div>
</a-grid-item> </a-grid-item>
<a-grid-item> <a-grid-item>
<div class="title_1">💬联系我</div> <div class="title-1">💬联系我</div>
<div class="type_row" v-for="item in list.callMe" :key="item.label"> <div class="type-row" v-for="item in list.callMe" :key="item.label">
<div class="column_title_2">{{ item.label }}：</div> <div class="column-title-2">{{ item.label }}：</div>
<div>{{ item.value }}</div> <div :class="item.link ? 'link-hover' : ''" @click="onLink(item)">{{ item.value }}</div>
</div> </div>
</a-grid-item> </a-grid-item>
<a-grid-item> <a-grid-item>
<div class="title_1">🐾其它</div> <div class="title-1">🐾其它</div>
<div class="type_row" v-for="item in list.other" :key="item.label"> <div class="type-row" v-for="item in list.other" :key="item.label">
<div class="column_title_2">{{ item.label }}：</div> <div class="column-title-2">{{ item.label }}：</div>
<div>{{ item.value }}</div> <div>{{ item.value }}</div>
</div> </div>
</a-grid-item> </a-grid-item>
@ -51,11 +51,11 @@ const list = reactive({
{ label: "💙兴趣爱好", value: ["读书", "音乐", "狗狗🐕"], theme: "purple" } { label: "💙兴趣爱好", value: ["读书", "音乐", "狗狗🐕"], theme: "purple" }
], ],
callMe: [ callMe: [
{ label: "📧邮箱", value: "2547096351@qq.com" }, { label: "📧邮箱", value: "2547096351@qq.com", link: false },
{ label: "📠微信", value: "fanction-w" }, { label: "📠微信", value: "fanction-w", link: false },
{ label: "📚思否", value: "兔子先森" }, { label: "📚思否", value: "兔子先森", link: true, url: "https://segmentfault.com/blog/dcodes" },
{ label: "🛰️博客", value: "兔子先森Ace" }, { label: "✒️掘金", value: "兔子先森Ace", link: true, url: "https://juejin.cn/user/1728883023940600/posts" },
{ label: "✒️掘金", value: "兔子先森Ace" } { label: "🛰️gitee", value: "兔子先森Ace", link: true, url: "https://gitee.com/wang_fan_w" }
], ],
other: [ other: [
{ label: "🧭公众号", value: "DCodes" }, { label: "🧭公众号", value: "DCodes" },
@ -63,20 +63,25 @@ const list = reactive({
] ]
}); });
console.log(list); console.log(list);
const onLink = (item: any) => {
if (!item.link) return;
window.open(item.url);
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.my_avatar { .my-avatar {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: calc($margin * 2); margin-bottom: calc($margin * 2);
.my_name { .my-name {
height: 60px; height: 60px;
margin-left: $margin; margin-left: $margin;
.my_title { .my-title {
height: 30px; height: 30px;
} }
.my_local { .my-local {
font-size: $font-size-body-3; font-size: $font-size-body-3;
height: 30px; height: 30px;
display: flex; display: flex;
@ -85,22 +90,27 @@ console.log(list);
} }
} }
.type_row { .type-row {
height: 25px; height: 25px;
margin-top: $margin; margin-top: $margin;
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: $margin; column-gap: $margin;
.column_title { .column-title {
min-width: 90px; min-width: 90px;
} }
.column_title_2 { .column-title-2 {
min-width: 62px; min-width: 68px;
} }
} }
.title_1 { .title-1 {
font-size: $font-size-title-1; font-size: $font-size-title-1;
font-weight: bold; font-weight: bold;
} }
.link-hover {
cursor: pointer;
color: $color-primary;
}
</style> </style>