140 lines
3.4 KiB
QML
140 lines
3.4 KiB
QML
// UserInfoCard.qml
|
|
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtGraphicalEffects 1.15
|
|
import DelegateUI 1.0
|
|
|
|
Rectangle {
|
|
id: card
|
|
width: 300
|
|
height: 120
|
|
radius: 8
|
|
color: "#ffffff"
|
|
border.color: "#e0e0e0"
|
|
border.width: 1
|
|
|
|
// 暴露可修改属性
|
|
property alias avatarSource: avatarImg.iconSource
|
|
property alias userName: nameText.text
|
|
property alias userPosition: positionText.text
|
|
property alias userEmail: emailText.text
|
|
property alias userPhone: phoneText.text
|
|
|
|
// 鼠标悬停效果
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
card.color = "#f5f5f5"
|
|
shadow.radius = 12
|
|
}
|
|
onExited: {
|
|
card.color = "#ffffff"
|
|
shadow.radius = 8
|
|
}
|
|
}
|
|
|
|
// 阴影效果
|
|
layer.enabled: true
|
|
layer.effect: DropShadow {
|
|
id: shadow
|
|
color: "#20000000"
|
|
radius: 8
|
|
samples: 16
|
|
verticalOffset: 2
|
|
}
|
|
|
|
// 内容布局
|
|
Row {
|
|
anchors.fill: parent
|
|
anchors.margins: 16
|
|
spacing: 16
|
|
|
|
// 头像部分
|
|
Rectangle {
|
|
width: 80
|
|
height: 80
|
|
radius: width / 2
|
|
clip: true
|
|
|
|
|
|
DelAvatar {
|
|
id: avatarImg
|
|
anchors.fill: parent
|
|
iconSource: DelIcon.UserOutlined
|
|
}
|
|
}
|
|
|
|
// 文字信息部分
|
|
Column {
|
|
width: parent.width - 80 - 16
|
|
spacing: 6
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
// 姓名
|
|
Text {
|
|
id: nameText
|
|
text: "张三"
|
|
font.bold: true
|
|
font.pixelSize: 18
|
|
color: "#333333"
|
|
}
|
|
|
|
// 职位
|
|
Text {
|
|
id: positionText
|
|
text: "高级软件工程师"
|
|
font.pixelSize: 12
|
|
color: "#666666"
|
|
topPadding: 2
|
|
}
|
|
|
|
// 分隔线
|
|
Rectangle {
|
|
width: parent.width
|
|
height: 1
|
|
color: "#eeeeee"
|
|
anchors.margins: 4
|
|
}
|
|
|
|
// 联系方式
|
|
Column {
|
|
spacing: 4
|
|
topPadding: 8
|
|
|
|
Row {
|
|
spacing: 6
|
|
Image {
|
|
source: "mail.svg"
|
|
width: 12
|
|
height: 12
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
Text {
|
|
id: emailText
|
|
text: "zhangsan@example.com"
|
|
font.pixelSize: 12
|
|
color: "#666666"
|
|
}
|
|
}
|
|
|
|
Row {
|
|
spacing: 6
|
|
Image {
|
|
source: "phone.svg"
|
|
width: 12
|
|
height: 12
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
Text {
|
|
id: phoneText
|
|
text: "+86 138-1234-5678"
|
|
font.pixelSize: 12
|
|
color: "#666666"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|