feat:demo

张含笑

2026-01-08 4b38ca97f87cfaeae07ad6a9a5d1278f4df8ddc5

feat:demo

 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>

 uniapps/work-app/src/static/images/voiceVal/phoneVal.svg

New file
@@ -0,0 +1,12 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321318721">
<g id="Group 1321318693">
<g id="Group 1321318692">
<circle id="Ellipse" cx="15" cy="15" r="15" fill="#1D6FE9"/>
</g>
</g>
<g id="Frame">
<path id="Vector" d="M20.0291 16.6168C18.9934 16.6168 18.1094 17.2659 17.7614 18.1794C17.7604 18.1789 17.7623 18.1798 17.7614 18.1794C17.758 18.1892 17.7523 18.198 17.7452 18.2065C17.7218 18.2344 17.6825 18.2444 17.6496 18.2343C17.6496 18.2346 17.6497 18.234 17.6496 18.2343C15.3886 17.4001 13.5955 15.6012 12.7693 13.3363C12.767 13.3285 12.7654 13.3205 12.7654 13.3121C12.7654 13.2756 12.7873 13.2439 12.819 13.2305C12.8189 13.2304 12.8191 13.2307 12.819 13.2305C13.7405 12.8866 14.3969 11.9987 14.3969 10.9572C14.3969 9.61739 13.3107 8.53125 11.9709 8.53125C10.6311 8.53125 9.54492 9.61739 9.54492 10.9572C9.54492 10.9657 9.54516 10.974 9.54523 10.9825C9.78252 16.6675 14.3462 21.2315 20.0312 21.4688C21.3701 21.4676 22.455 20.3819 22.455 19.0428C22.455 17.703 21.3689 16.6168 20.0291 16.6168Z" fill="white"/>
</g>
</g>
</svg>