VUE实现刻度尺进度条

一、如下图所示效果:

运行后入下图所示效果:

实现原理是用div画图并动态改变进度,

二、div源码

<div style="width: 100%;"><div class="sdg_title" style="height: 35px;"><!--对话组[{{ dialogGroup.index }}]编辑--><div class="sdg_title_btns"><a-button size="mini" @click="deleteCurrentBlock">删除</a-button><div class="sdg_split"></div><a-button size="mini" @click="play" v-if="isPlay != '播放中'">运行</a-button><a-button size="mini" @click="pause" v-if="isPlay == '播放中'">暂停</a-button><a-button size="mini" @click="stop" v-if="isPlay != '未播放'">停止</a-button><div class="sdg_split"></div><div style="box-sizing: border-box; display: flex; justify-content: center; align-items: center;"><span>最小刻度单位:</span><a-radio-group v-model:value="scaleUnit" @change="init"><a-radio-button value="秒">1秒</a-radio-button><a-radio-button value="5秒">5秒</a-radio-button><a-radio-button value="10秒">10秒</a-radio-button></a-radio-group></div><div style="padding-left: 10px;"><span>刻度总时长:</span><a-input-number v-model:value="initData.period" placeholder="请输入任务想定名称"style="width: 80px" @change="maxPeriodChange"></a-input-number></div></div></div><div style="position: relative; width: 100%; display: flex; flex-direction: row;"><!--title--><div style="width: 150px; height: 250px;" class="scroll"><div class="blockTitle">刻度(总时长)</div><div class="blockTitle2">A项</div><div class="blockTitle2">B项</div></div><div style="width: calc(100% - 150px); height: 250px;" class="scroll"><!--刻度表--><div class="timeScaleBlock" :style="{ width: maxWidth + 'px' }"><div v-for="val in maxWidth / 100" :key="val" class="oneScaleUnit"><!--刻度主线--><div class="mainLine"></div><!--长刻度线--><div class="longLine" style="left: -1px"></div><div class="longLine" style="left: 48px"><div class="middleScaleValue" v-if="scaleUnit == '5秒'">{{ formatSecond((val * 10 - 5) * 5) }}</div><div class="middleScaleValue" v-else-if="scaleUnit == '10秒'">{{ formatSecond((val * 10 - 5) * 10) }}</div><div class="middleScaleValue" v-else>{{ formatSecond((val * 10 - 5)) }}</div></div><!--短刻度线--><div class="shortLine" style="left: 9px"></div><div class="shortLine" style="left: 19px"></div><div class="shortLine" style="left: 28px"></div><div class="shortLine" style="left: 38px"></div><div class="shortLine" style="left: 58px"></div><div class="shortLine" style="left: 68px"></div><div class="shortLine" style="left: 78px"></div><div class="shortLine" style="left: 88px"></div></div><div class="leftBorder" v-if="clickBlock" :style="{ left: leftBorderValue }">↑<div class="borderValue">{{ formatSecond(clickBlock.startTime) }}</div></div><div class="leftBorder" v-if="clickBlock" :style="{ left: rightBorderVaule }">↑<div class="borderValue">{{ formatSecond(clickBlock.endTime) }}</div></div><!--播放进度三尖角--><div class="triangleDiv" :style="{ left: triangleDivLeft + 'px' }"><span class="second">{{ formatSecond(startTime) }}</span></div></div><!--背景信号--><div class="stationBlock" id="backgroundTimeLineDiv" v-if="initData" :style="{ width: maxBlockWidth + 'px' }" @mousemove="bgMousemove" @mouseup="bgMouseup" @mouseleave="bgMouseleave"><div :id="item.id"class="tae_base_block1"v-for="(item, index) in initData.backgroundTimeLine" :key="index"@mousedown="dialogueBlockClick(item)":class="{ block_selected1: clickBlock && clickBlock.id == item.id }":style="{ width: item.widthPx, left: item.leftPx }"><div class="blockItem">{{ item.name }}</div><div class="blockItem">{{ item.period }}秒</div></div><!-- 拖拽进入的临时模块 --><div v-if="tempBlockData && tempBlockData.blockType == 'signal'" class="tae_base_block1_temp" :style="{ width: tempBlockData.widthPx, left: tempBlockData.leftPx }"><div class="blockItem">{{ tempBlockData.name }}</div><div class="blockItem">{{ tempBlockData.period }}秒</div></div></div><!--设备部署--><div class="stationBlock" v-if="initData" :style="{ width: maxBlockWidth + 'px' }" @mousemove="bgMousemove" @mouseup="bgMouseup" @mouseleave="bgMouseleave"><div :id="item.id"class="tae_base_block2"v-for="(item, index) in initData.equipmentTimeLine" :key="index"@mousedown="dialogueBlockClick(item)":class="{ block_selected2: clickBlock && clickBlock.id == item.id }":style="{ width: item.widthPx, left: item.leftPx }"><div class="blockItem">{{ item.name }}</div><div class="blockItem">{{ item.period }}秒</div></div><!-- 拖拽进入的临时模块 --><div v-if="tempBlockData && tempBlockData.blockType == 'place'" class="tae_base_block2_temp" :style="{ width: tempBlockData.widthPx, left: tempBlockData.leftPx }"><div class="blockItem">{{ tempBlockData.name }}</div><div class="blockItem">{{ tempBlockData.period }}秒</div></div></div><!--播放背景布--><div v-if="startTime > 0" class="stationPlayBlock" :style="{ width: triangleDivLeft + 6 + 'px'}"></div></div></div></div>

script源码如下

<script>
import { mapState, mapActions } from 'vuex'
import { message } from 'ant-design-vue'
export default {name: 'DialogBlockEditor',components: {},props: {initDefaultData: {type: Object,default: () => {return null}},dialogGroup: {type: Object,default: () => {return null}},},computed: {...mapState(['runningScenario']),leftBorderValue() {let unit = 1if (this.scaleUnit == '5秒') {unit = 5} else if (this.scaleUnit == '10秒') {unit = 10}return (10 * this.clickBlock.startTime) / unit - 7 + 'px'},rightBorderVaule() {let unit = 1if (this.scaleUnit == '5秒') {unit = 5} else if (this.scaleUnit == '10秒') {unit = 10}return (10 * this.clickBlock.endTime) / unit - 7 + 'px'},isPlay() {if (this.startTime == 0 && this.timer == null) {return '未播放'} else if (this.startTime > 0 && this.timer == null) {return '暂停中'} else {return '播放中'}}},data() {return {initData: {startTime: 0,period: 60, // 任务总时长backgroundTimeLine: [{name: '素材1',type: 'signal',period: 10,startTime: 10,},], // 时间线equipmentTimeLine: [{name: '素材1',type: 'place',period: 10,startTime: 10,},], // 时间线},loading: false,maxWidth: 2000,maxBlockWidth: 1000,scaleUnit: '秒',dialogueBlock: null,clickBlock: null,dataList: [],audioSrc: '',triangleDivLeft: -6,timer: null,startTime: 0,tempData: null,tempBlockData: null,clientLeft: 0,}},mounted() {if(this.initDefaultData==null){this.initDefaultData=this.initData}else{this.initData=this.initDefaultData}this.init()setTimeout(() => {let backgroundTimeLineDiv = document.getElementById('backgroundTimeLineDiv')this.clientLeft = backgroundTimeLineDiv.getBoundingClientRect().left}, 2000)},beforeDestroy() {this.stop()},methods: {...mapActions(['runScenario', 'stopScenario']),async init() {if (this.scaleUnit == '5秒') {this.maxWidth = Math.ceil(this.initData.period / 50) * 100this.maxBlockWidth = this.initData.period * 2} else if (this.scaleUnit == '10秒') {this.maxWidth = Math.ceil(this.initData.period / 100) * 100this.maxBlockWidth = this.initData.period} else {this.maxWidth = Math.ceil(this.initData.period / 10) * 100this.maxBlockWidth = this.initData.period * 10}let sortNumber = 0for (let backgroundData of this.initData.backgroundTimeLine) {backgroundData.id = Tool.uuid(8, 32)backgroundData.leftPx = this.timeToPx(backgroundData.startTime - this.initData.startTime)backgroundData.widthPx = this.timeToPx(backgroundData.period)backgroundData.endTime = backgroundData.startTime + backgroundData.periodbackgroundData.blockType = backgroundData.typebackgroundData.sortNumber = sortNumber++// rightPx: this.timeToPx(dialogueDetail[0] - this.initData.startTime + dialogue.period)}sortNumber = 0for (let equipmentData of this.initData.equipmentTimeLine) {equipmentData.id = Tool.uuid(8, 32)equipmentData.leftPx = this.timeToPx(equipmentData.startTime - this.initData.startTime)equipmentData.widthPx = this.timeToPx(equipmentData.period)equipmentData.endTime = equipmentData.startTime + equipmentData.periodequipmentData.blockType = equipmentData.typeequipmentData.sortNumber = sortNumber++// rightPx: this.timeToPx(dialogueDetail[0] - this.initData.startTime + dialogue.period)}this.$nextTick(() => {this.initBlockClickEvent()})},/*** 增加素材到刻度尺* @param data 素材数据* @param type */addBlock(data, type) {if (type == 'signal') {this.initData.backgroundTimeLine.push(data)} else if (type == 'place') {this.initData.equipmentTimeLine.push(data)}this.init()},timeToPx(time) {switch (this.scaleUnit) {case '秒':return time * 10 + 'px'case '5秒':return time * 2 + 'px'case '10秒':return time + 'px'}},pxToTime(px) {switch (this.scaleUnit) {case '秒':return Math.round(px / 10) + this.initData.startTimecase '5秒':return Math.round(px / 2) + this.initData.startTimecase '10秒':return px + this.initData.startTime}},async dataConfirm() {this.$emit('save-scheme-dialog', this.initData)},dialogueBlockClick(block) {this.clickBlock = block},deleteCurrentBlock() {if (this.clickBlock) {if (this.clickBlock.blockType == 'signal') { // 删除的for (let index in this.initData.backgroundTimeLine) {if (this.initData.backgroundTimeLine[index].id == this.clickBlock.id) {this.initData.backgroundTimeLine.splice(index, 1)break}}} else {for (let index in this.initData.equipmentTimeLine) { // 删除的是if (this.initData.equipmentTimeLine[index].id == this.clickBlock.id) {this.initData.equipmentTimeLine.splice(index, 1)break}}}this.clickBlock = nullmessage.success('删除成功')this.init()} else {message.error('未选择台词块!')}},initBlockClickEvent() {for (let dialogueWrapper of this.initData.backgroundTimeLine) {let dom = document.getElementById(dialogueWrapper.id)dom.onmousedown = (e) => {this.onmousedownEvent(e, dialogueWrapper)}}for (let dialogueWrapper of this.initData.equipmentTimeLine) {let dom = document.getElementById(dialogueWrapper.id)dom.onmousedown = (e) => {this.onmousedownEvent(e, dialogueWrapper)}}},maxPeriodChange(){this.init()},onmousedownEvent(event, clickBlock) {let disX = event.clientXlet oldLeftPx = Number.parseFloat(clickBlock.leftPx)document.onmousemove = (me) => {let offsetPx = me.clientX - disXswitch (this.scaleUnit) {case '秒':offsetPx = Math.round(offsetPx / 10) * 10breakcase '5秒':offsetPx = Math.round(offsetPx / 2) * 2breakcase '10秒':break}offsetPx += oldLeftPx// 边界处理let preBlock = null, nextBlock = nullif (clickBlock.blockType == 'signal') { //if (clickBlock.sortNumber > 0) {preBlock = this.initData.backgroundTimeLine[clickBlock.sortNumber - 1]}if (this.initData.backgroundTimeLine[clickBlock.sortNumber + 1]) {nextBlock = this.initData.backgroundTimeLine[clickBlock.sortNumber + 1]}} else { // if (clickBlock.sortNumber > 0) {preBlock = this.initData.equipmentTimeLine[clickBlock.sortNumber - 1]}if (this.initData.equipmentTimeLine[clickBlock.sortNumber + 1]) {nextBlock = this.initData.equipmentTimeLine[clickBlock.sortNumber + 1]}}// 左边重合if (preBlock) {if (offsetPx < Number.parseInt(preBlock.leftPx) + Number.parseInt(preBlock.widthPx)) { // 重合了offsetPx = Number.parseInt(preBlock.leftPx) + Number.parseInt(preBlock.widthPx)}} else {if (offsetPx < 0) {offsetPx = 0}}// 判断右边重合if (nextBlock) {if (offsetPx + Number.parseInt(clickBlock.widthPx) > Number.parseInt(nextBlock.leftPx)) {offsetPx = Number.parseInt(nextBlock.leftPx) - Number.parseInt(clickBlock.widthPx)}}clickBlock.leftPx = offsetPx + 'px'clickBlock.startTime = this.pxToTime(offsetPx)clickBlock.endTime = clickBlock.startTime + clickBlock.period}document.onmouseup = () => {document.onmousemove = nulldocument.onmouseup = null}},closeDialog() {this.$emit('close-dialog')return false},play() {this.timer = setInterval(() => {this.startTime++this.calcTriangleDivLeft()for (let block of this.initData.backgroundTimeLine) {if (!block.status) { // 还未运行if (this.startTime >= block.startTime && this.startTime <= block.endTime) {block.status = 'running'this.runScenario({_this: this,scenario: this.initData,callback: () => {}})break}} else if (block.status == 'running') { // 正在运行if (this.startTime > block.endTime) {block.status = 'ended'break}}}for (let block of this.initData.equipmentTimeLine) {if (!block.status) { // 还未运行if (this.startTime >= block.startTime && this.startTime <= block.endTime) {block.status = 'running'break}} else if (block.status == 'running') { // 正在运行if (this.startTime > block.endTime) {block.status = 'ended'break}}}if (this.startTime >= this.initData.period) { // 播放完成了this.stop()}}, 1000)message.success('开始播放')},pause() {if (this.timer) {try {clearInterval(this.timer)} catch (e) {}}this.timer = nullmessage.success('暂停')},stop() {if (this.timer) {try {clearInterval(this.timer)} catch (e) {}}this.timer = nullthis.startTime = 0this.triangleDivLeft = -6for (let block of this.initData.backgroundTimeLine) {block.status = null}for (let block of this.initData.equipmentTimeLine) {block.status = null}message.success('停止')},calcTriangleDivLeft() {switch (this.scaleUnit) {case '秒':this.triangleDivLeft = this.startTime * 10 - 6breakcase '5秒':this.triangleDivLeft = this.startTime * 2 - 6breakcase '10秒':this.triangleDivLeft = this.startTime - 6breakcase '分':this.triangleDivLeft = this.startTime * 10 / 60 - 6breakcase '5分':this.triangleDivLeft = this.startTime * 10 / 300 - 6breakcase '10分':this.triangleDivLeft = this.startTime * 10 / 600 - 6break}},formatSecond(value) {value = value || 0;let second = parseInt(value, 10); // 秒let minute = 0; // 分let hour = 0; // 小时if (second > 60) {// 当大于60秒时,才需要做转换minute = Math.floor(second / 60);second = Math.floor(second % 60);if (minute > 60) {hour = Math.floor(minute / 60);minute = Math.floor(minute % 60);}} else {// 小于60秒时,直接显示,不需要处理}let result = "" + Tool.PrefixInteger(second, 2) + "";// 拼上分钟result = "" + Tool.PrefixInteger(minute, 2) + ":" + result;// 拼上小时result = "" + Tool.PrefixInteger(hour, 2) + ":" + result;return result},bgMousemove(e) {if (this.tempData) {document.body.style.cursor = 'move'let offsetPx = e.clientX - this.clientLeftswitch (this.scaleUnit) {case '秒':offsetPx = Math.round(offsetPx / 10) * 10breakcase '5秒':offsetPx = Math.round(offsetPx / 2) * 2breakcase '10秒':break}let startTime = this.pxToTime(offsetPx)this.tempBlockData = {id: Tool.uuid(8, 32),name: this.tempData.name,period: this.tempData.period,leftPx: offsetPx + 'px',widthPx: this.timeToPx(this.tempData.period),startTime: startTime,endTime: startTime + this.tempData.period,blockType: this.tempData.type,}// 判断是否重合if (this.judgeBlockCoincidence(this.tempBlockData)) { // 重合了document.body.style.cursor = 'not-allowed'this.tempBlockData.success = false}else { // 没有重合document.body.style.cursor = 'move'this.tempBlockData.success = true}}},bgMouseup(e) {document.body.style.cursor = 'auto'if (this.tempBlockData && this.tempBlockData.success) {let tempData = Tool.deepCopy(this.tempData)tempData.startTime = this.tempBlockData.startTimethis.initData.period+=this.tempBlockData.periodif (this.tempBlockData.blockType == 'signal') {this.initData.backgroundTimeLine.push(tempData)this.initData.backgroundTimeLine.sort((a, b) => a.startTime > b.startTime ? 1 : -1)}else {this.initData.equipmentTimeLine.push(tempData)this.initData.equipmentTimeLine.sort((a, b) => a.startTime > b.startTime ? 1 : -1)}//console.log('规划-鼠标松开1',this.tempData.period)this.init()//console.log('规划-鼠标松开2',this.tempData.period)}this.tempBlockData = nullthis.tempData = null},bgMouseleave(e) {this.tempBlockData = nulldocument.body.style.cursor = 'auto'},// 判断是否有重合judgeBlockCoincidence(blockData) {let list = nullif (blockData.blockType == 'signal') {list = this.initData.backgroundTimeLine} else {list = this.initData.equipmentTimeLine}for (let block of list) {if (blockData.startTime > block.startTime && blockData.startTime < block.endTime) {return true}if (blockData.endTime > block.startTime && blockData.endTime < block.endTime) {return true}}return false},setTempData(tempData) {this.tempData = tempData},updata(tempData){this.initData=tempDatathis.init()}}
}
</script>

运行时如有问题,欢迎讨论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/54229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Python画一个五星红旗

#codingutf-8 import turtle import mathdef draw_polygon(aTurtle, size50, n3): 绘制正多边形args:aTurtle: turtle对象实例size: int类型&#xff0c;正多边形的边长n: int类型&#xff0c;是几边形 for i in range(n):aTurtle.forward(size)aTurtle.left(360.0/n)de…

Linux--守护进程与会话

进程组 概念 进程组就是一个或多个进程的集合。 一个进程组可以包含多个进程。 下面我们通过一句简单的命令行来展示&#xff1a; 为什么会有进程组&#xff1f; 批量操作&#xff1a;进程组允许将多个进程组织在一起&#xff0c;形成一个逻辑上的整体。当需要对多个进程…

下载Kafka 3.0.0教程

1、Kafka 3.0.0下载地址 Apache Kafka 2、往下拉&#xff0c;查找3.0.0版本点击下载

【C++前后缀分解 降维】2906. 构造乘积矩阵|2074

前后缀分解 C前后缀分解 LeetCode2906. 构造乘积矩阵 给你一个下标从 0 开始、大小为 n * m 的二维整数矩阵 grid &#xff0c;定义一个下标从 0 开始、大小为 n * m 的的二维矩阵 p。如果满足以下条件&#xff0c;则称 p 为 grid 的 乘积矩阵 &#xff1a; 对于每个元素 p[…

数据结构之‘栈’

文章目录 1.简介2. 栈的初始化和销毁3. 进栈和出栈3.1 进栈3.2 出栈3.3 栈的打印 1.简介 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行&#xff08;数据插入和删除操作&#xff09;的一端称为栈顶&#xff0c;另一端称为栈底。压栈&#xf…

C语言之预处理详解(完结撒花)

目录 前言 一、预定义符号 二、#define 定义常量 三、#define定义宏 四、宏与函数的对比 五、#和## 运算符 六、命名约定 七、#undef 八、条件编译 九、头文件的包含 总结 前言 本文为我的C语言系列的最后一篇文章&#xff0c;主要讲述了#define定义和宏、#和##运算符、各种条件…

W25QXX系列Flash存储器模块驱动代码

目录 W25QXX简介 硬件电路 W25Q128框图 Flash操作注意事项 驱动代码 W25QXX.h W25QXX.c W25QXX简介 W25Qxx系列是一种低成本、小型化、使用简单的非易失性存储器&#xff0c;常应用于数据存储、字库存储、固件程序存储等场景 存储介质&#xff1a;Nor Flash&#xff0…

算法入门-贪心1

第八部分&#xff1a;贪心 409.最长回文串&#xff08;简单&#xff09; 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回通过这些字母构造成的最长的回文串 的长度。 在构造过程中&#xff0c;请注意 区分大小写 。比如 "Aa" 不能当做一个回文字符串…

如何通过 PhantomJS 模拟用户行为抓取动态网页内容

引言 随着网页技术的不断进步&#xff0c;JavaScript 动态加载内容已成为网站设计的新常态&#xff0c;这对传统的静态网页抓取方法提出了挑战。为了应对这一挑战&#xff0c;PhantomJS 作为一个无头浏览器&#xff0c;能够模拟用户行为并执行 JavaScript&#xff0c;成为了获…

Android RecycleView 深度解析与面试题梳理

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 引言 在 Android 开发中&#xff0c;列表和网格布局是非常常见的界面元素&#xff0c;它们用于展示大量数据集合。RecyclerView 是 Android 提…

小众语言ruby在苹果中的初步应用

前言 感觉Ruby在苹果系统中充当一种脚本语言来使用。 1、直接输入ruby没有反应 2、可显示结果的命令 ruby -e "puts Goodbye, cruel world!" 效果如下图&#xff1a; 说明苹果系统中ruby已经安装完毕&#xff0c;或者就是自带的。 3、编辑运行第一个ruby程序 输入…

nodejs+express+vue教辅课程辅助教学系统 43x2u前后端分离项目

目录 技术栈具体实现截图系统设计思路技术可行性nodejs类核心代码部分展示可行性论证研究方法解决的思路Express框架介绍源码获取/联系我 技术栈 该系统将采用B/S结构模式&#xff0c;开发软件有很多种可以用&#xff0c;本次开发用到的软件是vscode&#xff0c;用到的数据库是…

Linux常见查看文件命令

目录 一、cat 1.1. 查看文件内容 1.2. 创建文件 1.3. 追加内容到文件 1.4. 连接文件 1.5. 显示多个文件的内容 1.6. 使用管道 1.7. 查看文件的最后几行 1.8. 使用 -n 选项显示行号 1.9. 使用 -b 选项仅显示非空行的行号 二、tac 三、less 四、more 五、head 六、…

解决Gson将长数字( json字符串)转换为科学记数法格式

Gson&#xff08;又称Google Gson&#xff09;是Google公司发布的一个开放源代码的Java库&#xff0c;主要用途为序列化Java对象为JSON字符串&#xff0c;或反序列化JSON字符串成Java对象。 依赖 Gradle: dependencies {implementation com.google.code.gson:gson:2.11.0 }…

nginx基础篇(一)

文章目录 学习链接概图一、Nginx简介1.1 背景介绍名词解释 1.2 常见服务器对比IISTomcatApacheLighttpd其他的服务器 1.3 Nginx的优点(1)速度更快、并发更高(2)配置简单&#xff0c;扩展性强(3)高可靠性(4)热部署(5)成本低、BSD许可证 1.4 Nginx的功能特性及常用功能基本HTTP服…

内存压力测试工具的开发与实现

内存压力测试工具的开发与实现 一、工具设计概述二、工具实现1. 伪代码设计2. C代码实现三、工具使用与扩展四、结论在软件开发过程中,内存稳定性与可靠性是确保系统长期稳定运行的关键因素。为了验证系统在高负载下的内存表现,内存压力测试工具显得尤为重要。本文将基于C语言…

上市公司-客户ESG数据集(dta+xlsx+参考文献)(2009-2023年)

参考《经济问题》中李普玲&#xff08;2024&#xff09;的做法&#xff0c;将供应商与主要客户数据对应起来&#xff0c;并对上市公司及关联上市公司的ESG数据进行匹配&#xff0c;形成“供应商——客户ESG”的数据集&#xff0c;保留客户的销售占比 一、数据介绍 数据名称&am…

pdf文件怎么转换成ppt?介绍几种pdf转ppt的方法

pdf文件怎么转换成ppt&#xff1f;将pdf文件转换成ppt格式是一种常见且实用的需求&#xff0c;特别是在制作演示文稿和准备报告时。pdf格式因其文件内容的固定排版和高兼容性而广泛应用于文档的保存和分享。然而&#xff0c;在某些情况下&#xff0c;将pdf文件转换为ppt格式可以…

开源 AI 智能名片 S2B2C 商城小程序中的全渠道供应策略

摘要&#xff1a;本文深入探讨在开源 AI 智能名片 S2B2C 商城小程序的情境下&#xff0c;全渠道供应的运行机制。阐述各环节企业相互配合的重要性&#xff0c;重点分析零售企业在其中的关键作用&#xff0c;包括协调工作、信息传递、需求把握等方面&#xff0c;旨在实现高效的全…

鸿蒙开发之ArkUI 界面篇 十二 背景属性

backgroundColor背景色(纯颜色&#xff0c;没法实现立体感之类高级效果)、 backgroundImage背景图(一般是设计师设计好的图)、 backgroundImageSize背景图尺寸(用于调整背景图的尺寸)、 backgroundImagePosition背景图位置(用于调整背景图的位置)。 背景图的添加是属性backgrou…