From 4b38ca97f87cfaeae07ad6a9a5d1278f4df8ddc5 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 08 Jan 2026 14:59:24 +0800
Subject: [PATCH] feat:demo
---
uniapps/work-app/src/pages/voiceCall/index.vue | 87 +++++++++++++++++++++++++++----------------
1 files changed, 55 insertions(+), 32 deletions(-)
diff --git a/uniapps/work-app/src/pages/voiceCall/index.vue b/uniapps/work-app/src/pages/voiceCall/index.vue
index e58618d..652af96 100644
--- a/uniapps/work-app/src/pages/voiceCall/index.vue
+++ b/uniapps/work-app/src/pages/voiceCall/index.vue
@@ -12,21 +12,24 @@
v-for="(contact, index) in filteredContacts"
:key="index"
>
- <!-- 头像 -->
- <div class="contactAvatar">
- <image :src="contact.avatar" mode="aspectFill" />
- </div>
+ <div class="itemBox">
+ <!-- 头像 -->
+ <div class="contactAvatar">
+ <image :src="contact.avatar" mode="aspectFill" />
+ </div>
- <!-- 联系人信息 -->
- <div class="contactInfo">
- <div class="contactName">{{ contact.name }}</div>
- <div class="contactDept">{{ contact.dept }}</div>
- </div>
+ <!-- 联系人信息 -->
+ <div class="contactInfo">
+ <div class="contactName">{{ contact.name }}</div>
+ <div class="contactDept">{{ contact.dept }}</div>
+ </div>
- <!-- 电话按钮 -->
- <div class="callButton" @click="makeCall(contact)">
- <image src="/static/images/tabbar/icon_order.svg" mode="aspectFit" />
- </div>
+ <!-- 电话按钮 -->
+ <div class="callButton" @click="makeCall(contact)">
+ <image src="@/static/images/voiceVal/phoneVal.svg" mode="aspectFit" />
+ </div>
+ </div>
+
</div>
</div>
</div>
@@ -40,6 +43,16 @@
// 联系人数据
const contacts = ref([
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
+ { name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
{ name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
{ name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
{ name: '张晓晓', dept: '吉州区应急部门', avatar: '/static/images/tabbar/icon_me.png' },
@@ -122,54 +135,64 @@
.contactItem {
display: flex;
align-items: center;
- padding: 20rpx;
+ padding:0 24rpx;
+
+}
+.itemBox {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width:100%;
+ height: 98rpx;
border-bottom: 1rpx solid #EBEBEB;
}
-
.contactAvatar {
- width: 100rpx;
- height: 100rpx;
- border-radius: 50%;
- overflow: hidden;
- margin-right: 30rpx;
+ width: 80rpx;
+ height: 80rpx;
+ margin-right: 26rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.contactAvatar image {
- width: 100%;
- height: 100%;
+ width: 60rpx;
+ height: 60rpx;
}
.contactInfo {
flex: 1;
display: flex;
- flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
}
.contactName {
- font-size: 32rpx;
+ font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
- color: #333;
+ font-size: 30rpx;
+ color: #222324;
margin-bottom: 8rpx;
}
.contactDept {
- font-size: 26rpx;
- color: #999;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 30rpx;
+ color: #222324;
}
.callButton {
width: 80rpx;
height: 80rpx;
- background-color: #4C85FF;
- border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.callButton image {
- width: 40rpx;
- height: 40rpx;
- filter: brightness(0) invert(1); /* 将图标转换为白色 */
+ width: 60rpx;
+ height: 60rpx;
+
}
</style>
--
Gitblit v1.9.3