feat: 个人资料页面和控制台页面

This commit is contained in:
ray
2024-10-16 08:30:06 +08:00
parent c21b15d793
commit 0de42316df
9 changed files with 88 additions and 11 deletions

View File

@@ -1,5 +1,47 @@
<template>
<view class="flex-center flex-col">
<text class="text-cyan font-bold text-lg">工作台</text>
<view class="work">
<!-- 父容器用于包裹自闭合标签 -->
<view class="title-with-bar-container">
<view class="font-bold text-lg">工作</view>
<!-- 自闭合标签 -->
<view class="title-with-bar" />
</view>
<wd-grid border :column="4">
<wd-grid-item v-for="index in 8" :key="index" use-text-slot icon="picture">
<template #text>
<view class="text">自定义文字插槽</view>
</template>
</wd-grid-item>
</wd-grid>
</view>
</template>
<script lang="ts" setup>
const defaultAvatar = "/static/images/default-avatar.png";
</script>
<style lang="scss" scoped>
/* stylelint-disable selector-type-no-unknown */
page {
background: #f8f8f8;
}
/* stylelint-enable selector-type-no-unknown */
.img {
width: 100%;
height: 90rpx;
}
.title-with-bar-container {
position: relative;
padding-left: 20px; // 留出竖杠的空间
}
.title-with-bar-container::before {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
content: "";
background-color: blue;
border-radius: 10px; // 圆角
}
</style>

View File

@@ -0,0 +1,14 @@
<template>
<view class="user">
<text class="text-cyan font-bold text-lg">用户</text>
</view>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
/* stylelint-disable selector-type-no-unknown */
page {
background: #f8f8f8;
}
/* stylelint-enable selector-type-no-unknown */
</style>