style: 头像改用性别图片
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.7
parent
0bf50f7ff4
commit
f8047c3eef
@@ -138,6 +138,11 @@
|
|||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* 男:蓝色 */
|
/* 男:蓝色 */
|
||||||
&--male {
|
&--male {
|
||||||
background-color: #C6E6FF;
|
background-color: #C6E6FF;
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
<image class="member-avatar {{ item.selected ? 'member-avatar--selected' : '' }}" src="{{ item.avatar }}" mode="aspectFill"></image>
|
<image class="member-avatar {{ item.selected ? 'member-avatar--selected' : '' }}" src="{{ item.avatar }}" mode="aspectFill"></image>
|
||||||
</block>
|
</block>
|
||||||
<block wx:else>
|
<block wx:else>
|
||||||
<view class="member-avatar-placeholder {{ item.gender === '女' ? 'member-avatar-placeholder--female' : 'member-avatar-placeholder--male' }} {{ item.selected && item.gender === '男' ? 'member-avatar-placeholder--selected-male' : '' }} {{ item.selected && item.gender === '女' ? 'member-avatar-placeholder--selected-female' : '' }}"></view>
|
<view class="member-avatar-placeholder {{ item.gender === '女' ? 'member-avatar-placeholder--female' : 'member-avatar-placeholder--male' }} {{ item.selected && item.gender === '男' ? 'member-avatar-placeholder--selected-male' : '' }} {{ item.selected && item.gender === '女' ? 'member-avatar-placeholder--selected-female' : '' }}"><image src="{{ item.gender === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" /></view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<!-- 姓名 + 性别·年龄 -->
|
<!-- 姓名 + 性别·年龄 -->
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -40,13 +40,6 @@
|
|||||||
width: 90rpx;
|
width: 90rpx;
|
||||||
height: 90rpx;
|
height: 90rpx;
|
||||||
margin-right: 24rpx;
|
margin-right: 24rpx;
|
||||||
border-radius: 18rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 90rpx;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #1385FA;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 姓名 + meta */
|
/* 姓名 + meta */
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
<view class="data-card">
|
<view class="data-card">
|
||||||
<!-- 用户信息 -->
|
<!-- 用户信息 -->
|
||||||
<view class="userInfo" wx:if="{{ userInfo }}">
|
<view class="userInfo" wx:if="{{ userInfo }}">
|
||||||
<view class="avatar">{{ userInfo.realname[0] }}</view>
|
<view class="avatar">
|
||||||
|
<image src="{{ userInfo.sex_dictText === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
<view class="info">
|
<view class="info">
|
||||||
<view class="info-name-row">
|
<view class="info-name-row">
|
||||||
<view class="info-name">{{ userInfo.realname }}</view>
|
<view class="info-name">{{ userInfo.realname }}</view>
|
||||||
|
|||||||
@@ -56,16 +56,7 @@
|
|||||||
.userAvatar {
|
.userAvatar {
|
||||||
width: 88rpx;
|
width: 88rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
margin-right: 15rpx;
|
margin-right: 15rpx;
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 88rpx;
|
|
||||||
text-align: center;
|
|
||||||
border: 5rpx solid #ffffff;
|
|
||||||
background-color: #1385FA;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.userInfo {
|
.userInfo {
|
||||||
|
|||||||
@@ -10,7 +10,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="user" wx:if="{{ userInfo }}">
|
<view class="user" wx:if="{{ userInfo }}">
|
||||||
<view class="userAvatar">{{ userInfo.realname[0] }}</view>
|
<view class="userAvatar">
|
||||||
|
<image src="{{ userInfo.sex_dictText === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
<view class="userInfo">
|
<view class="userInfo">
|
||||||
<view class="userName">{{ userInfo.realname }}</view>
|
<view class="userName">{{ userInfo.realname }}</view>
|
||||||
<view class="userSex">{{ userInfo.sex_dictText }}·{{ userInfo.age }}岁<text>丨</text>{{ userInfo.height }}cm</view>
|
<view class="userSex">{{ userInfo.sex_dictText }}·{{ userInfo.age }}岁<text>丨</text>{{ userInfo.height }}cm</view>
|
||||||
|
|||||||
@@ -25,15 +25,6 @@
|
|||||||
width: 120rpx;
|
width: 120rpx;
|
||||||
height: 120rpx;
|
height: 120rpx;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
border-radius: 24rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 48rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 110rpx;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 5rpx solid #ffffff;
|
|
||||||
background-color: #1385FA;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.userInfo {
|
.userInfo {
|
||||||
|
|||||||
@@ -7,7 +7,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="user" wx:if="{{ userInfo }}">
|
<view class="user" wx:if="{{ userInfo }}">
|
||||||
<view class="userAvatar">{{ userInfo.realname[0] }}</view>
|
<view class="userAvatar">
|
||||||
|
<image src="{{ userInfo.sex_dictText === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
<view class="userInfo">
|
<view class="userInfo">
|
||||||
<view class="userName">{{ userInfo.realname }}</view>
|
<view class="userName">{{ userInfo.realname }}</view>
|
||||||
<view class="userSex">
|
<view class="userSex">
|
||||||
|
|||||||
@@ -51,23 +51,6 @@
|
|||||||
.avatar {
|
.avatar {
|
||||||
width: 88rpx;
|
width: 88rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
border-radius: 16rpx;
|
|
||||||
background-color: #1385FA;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 40rpx;
|
|
||||||
line-height: 88rpx;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
width: 20rpx;
|
|
||||||
height: 18rpx;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
right: 4rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
<view class="row row-avatar">
|
<view class="row row-avatar">
|
||||||
<view class="label">头像</view>
|
<view class="label">头像</view>
|
||||||
<view class="value">
|
<view class="value">
|
||||||
<view class="avatar">{{ userInfo.avatar }}</view>
|
<view class="avatar">
|
||||||
|
<image src="{{ userInfo.gender === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|||||||
@@ -194,22 +194,7 @@
|
|||||||
.member-avatar {
|
.member-avatar {
|
||||||
width: 88rpx;
|
width: 88rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
margin-right: 24rpx;
|
margin-right: 24rpx;
|
||||||
color: #252535;
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 88rpx;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&.member-avatar--male {
|
|
||||||
background-color: #C6E6FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.member-avatar--female {
|
|
||||||
background-color: #FFD5E3;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.member-info {
|
.member-info {
|
||||||
|
|||||||
@@ -38,7 +38,9 @@
|
|||||||
<!-- 本人 -->
|
<!-- 本人 -->
|
||||||
<view class="member-card" wx:if="{{ self }}">
|
<view class="member-card" wx:if="{{ self }}">
|
||||||
<view class="member-top">
|
<view class="member-top">
|
||||||
<view class="member-avatar {{ self.gender === '女' ? 'member-avatar--female' : 'member-avatar--male' }}">{{ self.name[0] }}</view>
|
<view class="member-avatar">
|
||||||
|
<image src="{{ self.gender === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
<view class="member-info">
|
<view class="member-info">
|
||||||
<view class="member-name-row">
|
<view class="member-name-row">
|
||||||
<view class="member-name">{{ self.name }}</view>
|
<view class="member-name">{{ self.name }}</view>
|
||||||
@@ -63,7 +65,7 @@
|
|||||||
<block wx:for="{{ group.members }}" wx:key="id" wx:for-item="member">
|
<block wx:for="{{ group.members }}" wx:key="id" wx:for-item="member">
|
||||||
<view class="member-card">
|
<view class="member-card">
|
||||||
<view class="member-top">
|
<view class="member-top">
|
||||||
<view class="member-avatar {{ member.gender === '女' ? 'member-avatar--female' : 'member-avatar--male' }}">{{ member.name[0] }}</view>
|
<view class="member-avatar {{ member.gender === '女' ? 'member-avatar--female' : 'member-avatar--male' }}"><image src="{{ member.gender === '女' ? '/images/woman.png' : '/images/man.png' }}" mode="aspectFit" /></view>
|
||||||
<view class="member-info">
|
<view class="member-info">
|
||||||
<view class="member-name-row">
|
<view class="member-name-row">
|
||||||
<view class="member-name">{{ member.name }} <text>(他人添加)</text></view>
|
<view class="member-name">{{ member.name }} <text>(他人添加)</text></view>
|
||||||
|
|||||||
Reference in New Issue
Block a user