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 13:02:07 +08:00
parent 8ccd0b1746
commit 24a5487058
1 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,15 +9,31 @@
<div class="my_local"><icon-location />浙江杭州</div>
</div>
</div>
<a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :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>
<div class="title_1">👋关于我</div>
<div class="type_row" v-for="item in list.aboutMe" :key="item.label">
<div class="column_title">{{ item.label }}：</div>
<div v-for="(type, index) in item.value" :key="index">
<a-tag :color="item.theme">
{{ type }}
</a-tag>
</div>
</div>
</a-grid-item>
<a-grid-item>
<div class="title_1">💬联系我</div>
<div class="type_row" v-for="item in list.callMe" :key="item.label">
<div class="column_title_2">{{ item.label }}：</div>
<div>{{ item.value }}</div>
</div>
</a-grid-item>
<a-grid-item>
<div class="title_1">🐾其它</div>
<div class="type_row" v-for="item in list.other" :key="item.label">
<div class="column_title_2">{{ item.label }}：</div>
<div>{{ item.value }}</div>
</div>
</a-grid-item>
</a-grid>
</div>
@ -25,6 +41,28 @@
<script setup lang="ts">
import myImage from "@/assets/img/my-image.jpg";
const list = reactive({
aboutMe: [
{ label: "🐦我用语雀", value: ["知识管理", "记录生活"], theme: "green" },
{ label: "💫个性性格", value: ["天秤座", "INFJ-T"], theme: "blue" },
{ label: "💼职业工作", value: ["互联网", "前端开发"], theme: "orangered" },
{ label: "🏠现居城市", value: ["杭州"], theme: "magenta" },
{ label: "💙兴趣爱好", value: ["读书", "音乐", "狗狗🐕"], theme: "purple" }
],
callMe: [
{ label: "📧邮箱", value: "2547096351@qq.com" },
{ label: "📠微信", value: "fanction-w" },
{ label: "📚思否", value: "兔子先森" },
{ label: "🛰️博客", value: "兔子先森Ace" },
{ label: "✒️掘金", value: "兔子先森Ace" }
],
other: [
{ label: "🧭公众号", value: "DCodes" },
{ label: "🌟公众号二维码", value: "xxx" }
]
});
console.log(list);
</script>
<style lang="scss" scoped>
@ -47,6 +85,20 @@ import myImage from "@/assets/img/my-image.jpg";
}
}
.type_row {
height: 25px;
margin-top: $margin;
display: flex;
align-items: center;
column-gap: $margin;
.column_title {
min-width: 90px;
}
.column_title_2 {
min-width: 62px;
}
}
.title_1 {
font-size: $font-size-title-1;
font-weight: bold;