<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="Avatar头像">
<!-- 1. 基础尺寸 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础尺寸" />
<view class="demo-row">
<zk-avatar size="small" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar size="default" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar size="large" border border-color="#fff"
src="https://www.zenkuai.com/attachment/demo/4.jpg" />
<zk-avatar :size="120" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
</view>
</zk-theme>
<!-- 2. 头像形状 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="头像形状" />
<view class="demo-row">
<zk-avatar shape="circle" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar shape="square" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
</view>
</zk-theme>
<!-- 3. 文字头像 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字头像" />
<view class="demo-row">
<zk-avatar text="张" />
<zk-avatar text="李" bg-color="#2979ff" />
<zk-avatar text="王三" bg-color="#67c23a" />
<zk-avatar text="Hello" bg-color="#e6a23c" shape="square" />
</view>
</zk-theme>
<!-- 4. 图标头像 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="图标头像" />
<view class="demo-row">
<zk-avatar icon="user-line" />
<zk-avatar icon="settings-4-line" bg-color="#2979ff" />
<zk-avatar icon="lock-line" bg-color="#f56c6c" />
<zk-avatar icon="chat-private-line" bg-color="#67c23a" shape="square" />
</view>
</zk-theme>
<!-- 5. 带边框 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="带边框" />
<view class="demo-row">
<zk-avatar border />
<zk-avatar border border-color="#fff" bg-color="#2979ff" />
<zk-avatar border border-color="#fff" text="边" bg-color="#67c23a" />
<zk-avatar border border-color="#fff" shape="square" icon="chat-private-line" bg-color="#f56c6c" />
</view>
</zk-theme>
<!-- 6. 徽标展示 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="徽标展示" />
<view class="demo-row">
<zk-avatar badge="1" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar badge="99+" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar badge="new" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
<zk-avatar badge-is-dot src="https://www.zenkuai.com/attachment/demo/3.jpg" />
</view>
</zk-theme>
<!-- 7. 基础头像堆叠 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="访问记录" />
<view class="avatar-stack">
<view v-for="(item, index) in avatars" :key="index" class="avatar-stack__item">
<zk-avatar :src="item.src" :text="item.text" size="small" border />
</view>
<view class="avatar-stack__more" v-if="avatars.length > maxShow">
<zk-text class="avatar-stack__more-text" :text="`+${avatars.length - maxShow}`" :size="24" />
</view>
</view>
</zk-theme>
<!-- 8. 不同尺寸 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="大尺寸" />
<view class="avatar-stack avatar-stack--large">
<view v-for="(item, index) in avatars.slice(0, 5)" :key="index" class="avatar-stack__item">
<zk-avatar :src="item.src" :text="item.text" size="default" border />
</view>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
// script 部分保持不变
export default {
data() {
return {
maxShow: 6,
avatars: [{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '张'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '李'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '王'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '赵'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '孙'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '周'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '吴'
},
{
src: 'https://www.zenkuai.com/attachment/demo/3.jpg',
text: '郑'
},
]
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
.demo-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 20rpx;
}
.avatar-stack {
display: inline-flex;
flex-direction: row;
padding-left: 10rpx;
align-items: center;
&__item {
margin-left: -20rpx;
position: relative;
}
&__more {
margin-left: -20rpx;
background-color: #f2f2f2;
border: 2rpx solid #ffffff;
border-radius: 50%;
display: flex;
width: 64rpx;
height: 64rpx;
align-items: center;
justify-content: center;
}
&--large {
.avatar-stack__item {
margin-left: -24rpx;
}
.avatar-stack__more {
margin-left: -24rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
}
}
/* #endif */
/* #ifdef APP-NVUE */
.demo-row {
flex-direction: row;
align-items: center;
.zk-avatar {
margin-right: 20rpx;
}
}
.avatar-stack {
flex-direction: row;
padding-left: 10rpx;
align-items: center;
&__item {
margin-left: -20rpx;
position: relative;
.zk-avatar {
border-radius: 1000rpx;
}
}
&__more {
margin-left: -20rpx;
background-color: #f2f2f2;
border-width: 2rpx;
border-style: solid;
border-color: #ffffff;
border-radius: 1000rpx;
width: 64rpx;
height: 64rpx;
align-items: center;
justify-content: center;
}
&--large {
.avatar-stack__item {
margin-left: -24rpx;
}
.avatar-stack__more {
margin-left: -24rpx;
width: 80rpx;
height: 80rpx;
border-radius: 1000rpx;
}
}
}
/* #endif */
</style>