<template> <view class="box"> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">男生</view> </view> <view class="mid"> <view class="flex" style="justify-content: space-between;"> <view class="males">{{ malePercent }}%</view> <view class="females">{{ femalePercent }}%</view> </view> <view class="progress-bar"> <view class="male" :style="{ width: malePercent + '%' }"></view> <view class="progress"> <view class="progress-bar-inner" :style="{ width: percent + '%' }"></view> </view> <view class="female" :style="{ width: femalePercent + '%' }"></view> </view> </view> <view style="text-align: center;padding: 10rpx;"> <image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" /> <view style="font-size: 24rpx;color: #a6a8ac;">女生</view> </view> </view> </template> <script setup> import { computed } from 'vue' const props = defineProps({ male: { type: Number, requirde: true }, female: { type: Number, requirde: true }, }) // 总比例 const percent = computed(() => { return props.male / (props.male + props.female) * 100 }) // 男生比例 const malePercent = computed(() => { return Math.round(props.male / (props.male + props.female) * 100) }) // 女生比例 const femalePercent = computed(() => { return Math.round(props.female / (props.male + props.female) * 100) }) </script> <style lang="scss" scoped> .progress-bar { display: flex; align-items: center; height: 30rpx; width: 100%; border: 1px solid #ccc; border-radius: 30rpx; overflow: hidden; } .progress-bar .male, .progress-bar .female { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; font-size: 14px; font-weight: bold; } .progress-bar .male { flex: 0 0 auto; background-color: #007bff; } .progress-bar .progress { flex: 1 1 auto; height: 100%; position: relative; } .progress-bar .progress .progress-bar-inner { height: 100%; background-color: #28a745; position: absolute; top: 0; left: 0; } .progress-bar .female { flex: 0 0 auto; background-color: #dc3545; } .content { justify-content: space-between; } .males { color: #007bff; font-size: 24rpx; } .females { color: #dc3545; font-size: 24rpx; } .box { display: flex; justify-content: space-around; align-items: center; margin-top: 50rpx; margin-bottom: 50rpx; .mid { width: 70%; } } .image { height: 60rpx; width: 60rpx; } </style> 帮我把上述代码改成只传male一个值就可以显示出male和female两个的比例出来
时间: 2024-04-28 12:20:36 浏览: 145
好的，可以这样修改代码：
<template>
<view class="box">
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/male.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">男生</view>
</view>
<view class="mid">
<view class="flex" style="justify-content: space-between;">
<view class="males">{{ malePercent }}%</view>
<view class="females">{{ femalePercent }}%</view>
</view>
<view class="progress-bar">
<view class="male" :style="{ width: malePercent + '%' }"></view>
<view class="progress">
<view class="progress-bar-inner" :style="{ width: percent + '%' }"></view>
</view>
<view class="female" :style="{ width: femalePercent + '%' }"></view>
</view>
</view>
<view style="text-align: center;padding: 10rpx;">
<image class="image" src="../../static/images/icons/female.png" mode="scaleToFill" />
<view style="font-size: 24rpx;color: #a6a8ac;">女生</view>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
male: { type: Number, requirde: true },
})
// 总人数
const total = computed(() => {
return props.male * 2
})
// 总比例
const percent = computed(() => {
return props.male / total.value * 100
})
// 男生比例
const malePercent = computed(() => {
return Math.round(props.male / total.value * 100)
})
// 女生比例
const femalePercent = computed(() => {
return Math.round((total.value - props.male) / total.value * 100)
})
</script>
<style lang="scss" scoped>
.progress-bar {
display: flex;
align-items: center;
height: 30rpx;
width: 100%;
border: 1px solid #ccc;
border-radius: 30rpx;
overflow: hidden;
.male,
.female {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.male {
flex: 0 0 auto;
background-color: #007bff;
}
.progress {
flex: 1 1 auto;
height: 100%;
position: relative;
}
.progress .progress-bar-inner {
height: 100%;
background-color: #28a745;
position: absolute;
top: 0;
left: 0;
}
.female {
flex: 0 0 auto;
background-color: #dc3545;
}
}
.content {
justify-content: space-between;
}
.males {
color: #007bff;
font-size: 24rpx;
}
.females {
color: #dc3545;
font-size: 24rpx;
}
.box {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50rpx;
margin-bottom: 50rpx;
.mid {
width: 70%;
}
}
.image {
height: 60rpx;
width: 60rpx;
}
</style>
这样在调用组件的时候，只需要传入一个male的值即可，组件会自动计算出总人数和男女比例。
阅读全文
相关推荐
大家在看
silvaco中文学习资料
silvaco中文资料。
希望对大家有帮助。。。。。。
AES128（CBC或者ECB）源码
AES128（CBC或者ECB）源码，在C语言环境下运行。
EMC VNX 5300使用安装
目录
1.通过IE登录储存 3
2.VNX5300管理界面 3
3.创建Raid Group 4
4.Raid Group 中储存LUN 7
5.注册服务器 9
6.创建 Storge Group 11
华为MA5671光猫使用 华为MA5671补全shell 101版本可以补全shell，安装后自动补全，亲测好用，需要的可以下载
华为MA5671光猫使用 华为MA5671补全shell 101版本可以补全shell，安装后自动补全，亲测好用，需要的可以下载，企业光猫稳定性还是可以
视频转换芯片 TP9950 iic 驱动代码
TP9950 芯片是一款功能丰富的视频解码芯片，具有以下特点和功能：
高清视频解码：支持多种高清模拟视频格式解码，如支持高清传输视频接口（HD-TVI）视频，还能兼容 CVI、AHD、TVI 和 CVBS 等格式，最高支持 1 路 1080p@30fps 的视频输入 。
多通道输入与输出：
支持 4 路视频接入，并可通过一路输出。
可以通过 CSI 接口输出，也可以通过并行的 BT656 接口输出。
图像信号处理：对一致性和性能进行了大量的数字信号处理，所有控制回路均可编程，以实现最大的灵活性。所有像素数据均根据 SMPTE-296M 和 SMPTE-274M 标准进行线锁定采样，并且具有可编程的图像控制功能，以达到最佳的视频质量 。
双向数据通信：与兼容的编码器或集成的 ISP 与 HD-TVI 编码器和主机控制器一起工作时，支持在同一电缆上进行双向数据通信 。
集成 MIPI CSI-2 发射机：符合 MIPI 的视频数据传输标准，可方便地与其他符合 MIPI 标准的设备进行连接和通信 。
TP9950 芯片主要应用于需要进行高清视频传输和处理的领域，例如汽车电子（如车载监控、行车
最新推荐
智慧园区3D可视化解决方案PPT(24页).pptx
在智慧园区建设的浪潮中，一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点，通过信息化平台与智能硬件的深度融合，为园区带来前所未有的变革。
首先，智慧园区综合解决方案以提升园区整体智能化水平为核心，打破了信息孤岛现象。通过构建统一的智能运营中心（IOC），采用1+N模式，即一个智能运营中心集成多个应用系统，实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”，利用大数据可视化技术，将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上，管理者可直观掌握园区运行状态，实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒，还大幅提升了管理效率，让园区管理更加精细化、智能化。
更令人兴奋的是，该方案融入了诸多前沿科技，让智慧园区充满了未来感。例如，利用AI视频分析技术，智慧园区实现了对人脸、车辆、行为的智能识别与追踪，不仅极大提升了安防水平，还能为园区提供精准的人流分析、车辆管理等增值服务。同时，无人机巡查、巡逻机器人等智能设备的加入，让园区安全无死角，管理更轻松。特别是巡逻机器人，不仅能进行360度地面全天候巡检，还能自主绕障、充电，甚至具备火灾预警、空气质量检测等环境感知能力，成为了园区管理的得力助手。此外，通过构建高精度数字孪生系统，将园区现实场景与数字世界完美融合，管理者可借助VR/AR技术进行远程巡检、设备维护等操作，仿佛置身于一个虚拟与现实交织的智慧世界。
最值得关注的是，智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程，实现降本增效。例如，智能库存管理、及时响应采购需求等举措，大幅减少了库存积压与浪费；而设备自动化与远程监控则降低了维修与人力成本。同时，借助大数据分析技术，园区可精准把握产业趋势，优化招商策略，提高入驻企业满意度与营收水平。此外，智慧园区的低碳节能设计，通过能源分析与精细化管理，实现了能耗的显著降低，为园区可持续发展奠定了坚实基础。总之，这一综合解决方案不仅让园区管理变得更加智慧、高效，更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境，是未来园区建设的必然趋势。
掌握Android RecyclerView拖拽与滑动删除功能
知识点:
1. Android RecyclerView使用说明:
RecyclerView是Android开发中经常使用到的一个视图组件，其主要作用是高效地展示大量数据，具有高度的灵活性和可配置性。与早期的ListView相比，RecyclerView支持更加复杂的界面布局，并且能够优化内存消耗和滚动性能。开发者可以对RecyclerView进行自定义配置，如添加头部和尾部视图，设置网格布局等。
2. RecyclerView的拖拽功能实现:
RecyclerView通过集成ItemTouchHelper类来实现拖拽功能。ItemTouchHelper类是RecyclerView的辅助类，用于给RecyclerView添加拖拽和滑动交互的功能。开发者需要创建一个ItemTouchHelper的实例，并传入一个实现了ItemTouchHelper.Callback接口的类。在这个回调类中，可以定义拖拽滑动的方向、触发的时机、动作的动画以及事件的处理逻辑。
3. 编辑模式的设置:
编辑模式（也称为拖拽模式）的设置通常用于允许用户通过拖拽来重新排序列表中的项目。在RecyclerView中，可以通过设置Adapter的isItemViewSwipeEnabled和isLongPressDragEnabled方法来分别启用滑动和拖拽功能。在编辑模式下，用户可以长按或触摸列表项来实现拖拽，从而对列表进行重新排序。
4. 左右滑动删除的实现:
RecyclerView的左右滑动删除功能同样利用ItemTouchHelper类来实现。通过定义Callback中的getMovementFlags方法，可以设置滑动方向，例如，设置左滑或右滑来触发删除操作。在onSwiped方法中编写处理删除的逻辑，比如从数据源中移除相应数据，并通知Adapter更新界面。
5. 移动动画的实现:
在拖拽或滑动操作完成后，往往需要为项目移动提供动画效果，以增强用户体验。在RecyclerView中，可以通过Adapter在数据变更前后调用notifyItemMoved方法来完成位置交换的动画。同样地，添加或删除数据项时，可以调用notifyItemInserted或notifyItemRemoved等方法，并通过自定义动画资源文件来实现丰富的动画效果。
6. 使用ItemTouchHelperDemo-master项目学习:
ItemTouchHelperDemo-master是一个实践项目，用来演示如何实现RecyclerView的拖拽和滑动功能。开发者可以通过这个项目源代码来了解和学习如何在实际项目中应用上述知识点，掌握拖拽排序、滑动删除和动画效果的实现。通过观察项目文件和理解代码逻辑，可以更深刻地领会RecyclerView及其辅助类ItemTouchHelper的使用技巧。
【IBM HttpServer入门全攻略】：一步到位的安装与基础配置教程
# 摘要
本文详细介绍了IBM HttpServer的全面部署与管理过程，从系统需求分析和安装步骤开始，到基础配置与性能优化，再到安全策略与故障诊断，最后通过案例分析展示高级应用。文章旨在为系统管理员提供一套系统化的指南，以便快速掌握IBM HttpServer的安装、配置及维护技术。通过本文的学习，读者能有效地创建和管理站点，确保
[root@localhost~]#mount-tcifs-0username=administrator,password=hrb.123456//192.168.100.1/ygptData/home/win mount：/home/win：挂载点不存在
### CIFS挂载时提示挂载点不存在的解决方案
当尝试通过 `mount` 命令挂载CIFS共享目录时，如果遇到错误提示“挂载点不存在”，通常是因为目标路径尚未创建或者权限不足。以下是针对该问题的具体分析和解决方法：
#### 创建挂载点
在执行挂载操作之前，需确认挂载的目标路径已经存在并具有适当的权限。可以使用以下命令来创建挂载点：
```bash
mkdir -p /mnt/win_share
```
上述命令会递归地创建 `/mnt/win_share` 路径[^1]。
#### 配置用户名和密码参数
为了成功连接到远程Windows共享资源，在 `-o` 参数中指定 `user
惠普8594E与IT8500系列电子负载使用教程
在详细解释给定文件中所涉及的知识点之前，需要先明确文档的主题内容。文档标题中提到了两个主要的仪器：惠普8594E频谱分析仪和IT8500系列电子负载。首先，我们将分别介绍这两个设备以及它们的主要用途和操作方式。
惠普8594E频谱分析仪是一款专业级的电子测试设备，通常被用于无线通信、射频工程和微波工程等领域。频谱分析仪能够对信号的频率和振幅进行精确的测量，使得工程师能够观察、分析和测量复杂信号的频谱内容。
频谱分析仪的功能主要包括：
1. 测量信号的频率特性，包括中心频率、带宽和频率稳定度。
2. 分析信号的谐波、杂散、调制特性和噪声特性。
3. 提供信号的时间域和频率域的转换分析。
4. 频率计数器功能，用于精确测量信号频率。
5. 进行邻信道功率比(ACPR)和发射功率的测量。
6. 提供多种输入和输出端口，以适应不同的测试需求。
频谱分析仪的操作通常需要用户具备一定的电子工程知识，对信号的基本概念和频谱分析的技术要求有所了解。
接下来是可编程电子负载，以IT8500系列为例。电子负载是用于测试和评估电源性能的设备，它模拟实际负载的电气特性来测试电源输出的电压和电流。电子负载可以设置为恒流、恒压、恒阻或恒功率工作模式，以测试不同条件下的电源表现。
电子负载的主要功能包括：
1. 模拟各种类型的负载，如电阻性、电感性及电容性负载。
2. 实现负载的动态变化，模拟电流的变化情况。
3. 进行短路测试，检查电源设备在过载条件下的保护功能。
4. 通过控制软件进行远程控制和自动测试。
5. 提供精确的电流和电压测量功能。
6. 通过GPIB、USB或LAN等接口与其他设备进行通信和数据交换。
使用电子负载时，工程师需要了解其操作程序、设置和编程方法，以及如何根据测试目的配置负载参数。
文档的描述部分提到了这些资料的专业性和下载人群的稀少。这可能暗示了这些设备的目标用户是具备一定专业知识的工程师和技术人员，因此文档内容将涵盖较为复杂的操作指南和技术细节。
标签中提到了“中文说明书”，表明这些文件是为中文用户提供方便而制作的，这对于不熟悉英语的技术人员来说是非常重要的。这有助于减少语言障碍，使得中文使用者能够更容易掌握这些专业的测试设备使用方法。
综上所述，惠普8594E频谱分析仪和IT8500系列电子负载都是测试设备领域中不可或缺的工具。掌握它们的使用方法和功能对于电子工程师来说是必需的。这些设备在维护和开发电子系统、电源设备以及无线通信设备中起着至关重要的作用。这份文档对于涉及相关领域的工作技术人员，特别是在中国环境下，提供了非常实用和必需的专业知识。
MATLAB与Python在SAR点目标仿真中的对决：哪种工具更胜一筹？
# 摘要
本文系统地探讨了SAR点目标仿真技术，重点分析了MATLAB和Python在这一领域的应用及其潜在价值。首先概述了SAR仿真概念和需求，然后详细介绍了MATLAB在SAR仿真中的功能、信号处理应用以及仿真实例。接着，文章转向Python，分析了其语言特点、生态系统
前端代理配置config.js配置proxyTable多个代理不生效
<think>好的，我现在需要解决前端项目中config.js文件里的proxyTable配置多个代理不生效的问题。用户已经尝试过添加多个代理，但有时候会出现404错误，或者部分代理不生效的情况。我需要先了解proxyTable的基本配置方法，然后分析可能的问题原因，再给出解决方案。
首先，根据用户提供的引用资料，比如引用[4]中的示例，正确的代理配置应该是在vue.config.js中的devServer.proxy对象里定义多个键，每个键对应不同的路径。例如，为不同的API路径设置不同的target。比如：
module.exports = {
devServer: {
p
最小二乘法程序深入解析与应用案例
最小二乘法是一种数学优化技术，它通过最小化误差的平方和寻找数据的最佳函数匹配。在统计学、数据分析、信号处理和科学计算等领域中都有广泛的应用。最小二乘法的目标是找到一个数学模型，使得模型预测值与实际观测值之间的差异最小。
### 标题知识点：
1. **最小二乘法的定义**：
最小二乘法是一种通过最小化误差的平方和来寻找模型参数的方法。通常情况下，我们希望找到参数的估计值，使得模型预测值与实际观测值的残差（即差值）的平方和达到最小。
2. **最小二乘法的历史**：
最小二乘法由数学家卡尔·弗里德里希·高斯于19世纪提出，之后成为实验数据处理的基石。
3. **最小二乘法在不同领域中的应用**：
- **统计学**：用于建立回归模型，预测和控制。
- **信号处理**：例如在数字信号处理中，用于滤波和信号估计。
- **数据分析**：在机器学习和数据挖掘中广泛用于预测模型的建立。
- **科学计算**：在物理、工程学等领域用于曲线拟合和模型建立。
### 描述知识点：
1. **最小二乘法的重复提及**：
描述中的重复强调“最小二乘法程序”，可能是为了强调程序的重要性和重复性。这种重复性可能意味着最小二乘法在多个程序和应用中都有其不可替代的位置。
2. **最小二乘法的实际应用**：
描述中虽然没有给出具体的应用案例，但强调了其程序的重复性，可以推测最小二乘法被广泛用于需要对数据进行分析、预测、建模的场景。
### 标签知识点：
1. **最小二乘法在标签中的应用**：
标签“最小二乘法程序”表明了文档或文件与最小二乘法相关的程序设计或数据处理有关。这可能是某种软件工具、算法实现或教学资料。
### 压缩包子文件名列表知识点：
1. **www.pudn.com.txt**：
这个文件名暗示了文件可能来自一个在线的源代码库，其中“pudn”可能是一个缩写或者品牌名，而“.txt”表明这是一个文本文件，可能是关于最小二乘法的文档、说明或注释。
2. **最小二乘法程序**：
这个文件名直接表明了文件内容包含或关联到最小二乘法的程序代码。它可能包含了具体的算法实现、应用案例、或者是供学习使用的教学材料。
### 知识点总结：
最小二乘法是一种基于数学原理的计算技术，它在许多科学和工程领域中应用广泛。其核心思想是通过最小化误差的平方和来拟合数据，从而找到一个最佳的数学模型来描述这些数据。最小二乘法的方法被应用在了从基础科学研究到工程技术的诸多方面，是现代数据分析不可或缺的工具之一。在IT行业中，最小二乘法通常被用于数据建模和分析，如预测模型、算法开发、机器学习等领域。提供的文件标题、描述、标签和文件名列表都指向了最小二乘法程序及其相关内容，表明这些文件可能涉及最小二乘法的具体实现方法、应用案例或者是教学材料，对那些希望深入理解和应用这一方法的专业人士或学生来说，这些资源都是极具价值的。
SAR点目标仿真应用指南：案例研究与系统设计实战
# 摘要
合成孔径雷达（SAR）点目标仿真是雷达信号处理和遥感技术领域中的一个重要课题。本文首先介绍了SAR点目标仿真的基础理论，包括SAR系统的工作原理、仿真环境的建立和点目标模型的构建。随后，文章深入探讨了SAR点目标仿真实践应用中的数据采集与预处理、仿真
eclipse为项目配置jdk
### 如何在 Eclipse 中为项目配置 JDK 版本
为了确保项目的正常编译和运行，在 Eclipse 中为项目指定或配置合适的 JDK 是非常重要的。以下是关于如何完成这一操作的具体说明。
#### 配置全局 JDK 设置
如果希望整个 Eclipse 使用特定版本的 JDK，可以通过修改 `eclipse.ini` 文件来实现。具体方法如下：
- 打开 `eclipse.ini` 文件。
- 添加 `-vm` 参数并指向目标 JDK 的 `javaw.exe` 路径。例如：
```plaintext
-vm
C:/Program Files/Java/jdk1.8.0_291/b