vue3+element plus组件库中el-carousel组件走马灯特效,当图片变动时下面数字也随着图片动态变化

1.效果图

2.html

<section style="height:30%"><div class="left-img1-title"><img src="../assets/img/title.png"alt=""srcset=""><div class="text">回收垃圾数量</div></div><div style=""><el-carousel :interval="4000"indicator-position="none"type="card"height="100px"@change="swch"><el-carousel-item v-for="item in carouselImg":key="item"><h3 text="2xl"justify="center"><img :src="item.img"alt=""srcset=""class="carousel-image"style="height: 100px;"justify="center"></h3></el-carousel-item></el-carousel></div><div class="carousel-text"><div v-for="(item,index) in count":key="index"><div>{{item.name}}</div><div class="text">{{item.data}}kg</div></div></div></section>

3.js 

 // 准备数据 
// 1.vue3采用import的方式引入图片,不然会报错,引入方法之一import bl from '@/assets/img/bl.png'import js from '@/assets/img/js.png'import sl from '@/assets/img/sl.png'import zl from '@/assets/img/zl.png'import zw from '@/assets/img/zw.png'import pie from '@/components/pie.vue' //2.本页面采用第二种方式,结合html代码// 引入本地图片let carouselImg = reactive([{img: bl},{img: js},{img: sl},{img: zl},{img: zw},])//回收列表let countList = reactive([])//回收垃圾数量let count = reactive([{ name: '今日回收数量', data: 0 },{ name: '累计回收总数', data: 0 },{ name: '户均回收量'  , data: 0 }])
// 填充回收量const getNum = (data) => {let list = [1,2,3,4,5]let allCount = 0let allDay = 0data.map(item=> {allCount += (item.weight*100)allDay += (item.weightDay*100)item.typeId=="1026"?list[0]=item:''item.typeId=="4"?list[1]=item:''item.typeId=="2"?list[2]=item:''item.typeId=="1017"?list[3]=item:''item.typeId=="1121"?list[4]=item:''})allCount = (allCount/100).toFixed(2)allDay = (allDay/100).toFixed(2)countList = list// 回收量初始化count[0].data = list[0].weightDaycount[1].data = list[0].weightcount[2].data = list[0].households}// 幻灯片切换(回收量切换)const  swch = (index) => {let list = countListcount[0].data = list[index].weightDaycount[1].data = list[index].weightcount[2].data = list[index].households}

4.css

.left-img1-title-two {width: 27vw;margin: 0 1.875rem;.content {display: flex;justify-content: space-around;margin-bottom: 1.25rem;.bg1 {width: 14.375rem;height: 6.25rem;background: url('../assets/img/1.png') no-repeat;background-size: 14.375rem 6.25rem;display: flex;justify-content: space-around;align-items: center;text-align: center;img {width: 3.125rem;height: 3.125rem;}.shou {color: white;}.text {color: aqua;}}.bg2 {width: 14.375rem;height: 6.25rem;background: url('../assets/img/2.png') no-repeat;background-size: 14.375rem 6.25rem;display: flex;justify-content: space-around;align-items: center;text-align: center;img {width: 3.125rem;height: 3.125rem;}.shou {color: white;}.text {color: aqua;}}}.content1 {display: flex;justify-content: space-around;margin-bottom: 1.875rem;.bg1 {width: 14.375rem;height: 6.25rem;background: url('../assets/img/3.png') no-repeat;background-size: 14.375rem 6.25rem;display: flex;justify-content: space-around;align-items: center;text-align: center;img {width: 3.125rem;height: 3.125rem;}.shou {color: white;}.text {color: aqua;}}.bg2 {width: 14.375rem;height: 6.25rem;background: url('../assets/img/4.png') no-repeat;background-size: 14.375rem 6.25rem;display: flex;justify-content: space-around;align-items: center;text-align: center;img {width: 3.125rem;height: 3.125rem;}.shou {color: white;}.text {color: aqua;}}}}

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

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

相关文章

数据库MySQL/mariadb知识点——数据类型

数据类型 所谓的列类型&#xff0c;其实就是指数据类型&#xff0c;即对数据进行统一的分类&#xff0c;从系统的角度出发是为了能够使用统一的方式进行管理&#xff0c;更好的利用有限的空间。 在 SQL 中&#xff0c;将数据类型分成了三大类&#xff0c;分别为&#xff1a;数值…

期货大赛项目|九,fileinput插件的应用

引入JS和CSS bundles.Add(new ScriptBundle("~/bundles/fileinputJs").Include( "~/Content/vendors/bootstrap-fileinput-master/js/fileinput.min.js", "~/Content/vendors/bootstrap-fileinput-master/js/locales/zh.js", "~/Scripts/fi…

PLSQL中文显示乱码(问号)

1、输入 select * from V$NLS_PARAMETERS 查看第一行value值是否为简体中文 simplified chinese 实际显示为&#xff1a;AMERICAN 2、设置本地环境变量 &#xff1a;NLS_LANG NLS_LANGAMERICAN_AMERICA.ZHS16GBK NLS_LANG的值为三个划线值拼接而成。 3、重新打开PLSQL…

Mybatis下collections使用pageHelper进行分页

pageHelper在对mybatis一对多分页时造成查询总页数结果不对的情况。 可以做出如下修改&#xff1a; service层&#xff1a; public CommonResult worksList(String userId, int page, int pageSize) throws Exception { PageHelper.startPage(page, pageSize); List<…

解决ubuntu系统root用户下Chrome无法启动问题

说明&#xff1a;本文转载自-https://www.cnblogs.com/hbsygfz/p/8409517.html 由于ubuntu16.04系统自带的是Firefox浏览器&#xff0c;需要安装Chrome浏览器&#xff0c;但是在root用户下安装后发现&#xff0c;Chrome无法正常启动。安装及问题解决具体如下&#xff1a; 1. …

mysql ERROR 1045 和2058时(28000): 错误解决办法

mysql ERROR 1045 (28000): 错误解决办法 听语音|浏览&#xff1a;54286|更新&#xff1a;2018-02-23 14:34|标签&#xff1a;mysql 1234567分步阅读ERROR 1045 (28000): Access denied for user ODBClocalhost (using password: NO) ERROR 1045 (28000): Access denied for us…

maven POM总结

可继承的字段 version property 其他占坑&#xff1a; parent import scope Dependency_Management中的scope是可以被继承的&#xff0c;http://maven.apache.org/pom.html#Dependency_Management name 不可继承 artifactId 不可继承 &#xff0c; 确定打包的最终名称。 这个…

JVM从入门到放弃——JVM内存模型

前言 Java和C或者是C相比较而言&#xff0c;最大的区别是C系列的程序员在编写代码的时候&#xff0c;总是要对程序中的变量进行释放内存的操作&#xff0c;所以在编写C或者是C的程序员需要格外的谨慎&#xff0c;因为他们对程序的内存有着很高的权限&#xff0c;这样虽然是特点…

485. Max Consecutive Ones - LeetCode

Question 485. Max Consecutive Ones Solution 题目大意:给一个数组,取连续1的最大长度 思路:遍历数组,连续1就加1,取最大 Java实现: public int findMaxConsecutiveOnes(int[] nums) {if (nums null) return 0;int result 0;int tmp 0;for (int i : nums) {if (i 1) {tmp;…

MacBook创建docker私有仓库docker server gave HTTP response to HTTPS client 问题处理办法

在 mac上搭建一个私有仓库&#xff0c;在向仓库push镜像时&#xff0c;会报如下错误&#xff1a; #docker push 192.168.163.131:5000/test Get https://192.168.163.131:5000/v1/_ping: http: server gave HTTP response to HTTPS client 百度了下答案发现都不试用mac版本的d…

Redis基础1(定义及基础)

Redis 定义&#xff1a;Redis是一个软件&#xff0c;帮助开发者对一台机器的内存进行操作 安装redis软件方法&#xff1a; 超链接地址&#xff1a;https://www.cnblogs.com/L5251/articles/9146881.html Python中下载依赖包 pip3 install redis 测试Redis是否安装成功 # 1、引入…

vue-cli安装

、安装vue-cli 命令&#xff1a;npm install vue-cli -g -g表示全局安装 2、初始化项目 命令&#xff1a;vue init webpack my-project 使用vue命令初始化项目&#xff0c;并使用webpack打包 此时会跳出一系列问题&#xff0c;除了eslint那一项&#xff0c;其余的均可回答yes&a…

修复病毒破坏的文件关联并恢复程序图标

1.破坏文件关联的两种方式&#xff1a; &#xff08;1&#xff09;修改特定扩展名文件的对应名称。以.exe文件为例&#xff1a; 正常注册表中&#xff0c;.exe文件对应名称为&#xff1a; HKEY_CLASSES_ROOT\.exe &#xff08;默认&#xff09; exefile 病毒为…

双击程序后系统弹框“您无权访问此程序”的解决办法

xp下&#xff1a;我的电脑>工具>文件夹选项>查看&#xff0c;勾掉使用简单文件共享选项。如下图&#xff1a; 此时&#xff0c;在右键点击程序图标时&#xff0c;选项卡中会出现“安全”选项卡。如下图&#xff1a; 修改everyone为Administrator...并设置完全控制权限…

adb常用操作命令

1、adb devices 查看当前链接设备&#xff0c;列出连接到计算机的Android设备或者模拟器 2、adb install <apk文件路径> 安装软件 3、adb uninstall <软件名> 卸载apk之前要先查看报名&#xff1a; 知晓包名之后&#xff0c;就可以运用命令卸载该APK 4、adb shell …

轻量级ORM框架 【Dapper】 的使用

ORM是什么&#xff1f; 从字面理解&#xff0c;O是Object&#xff0c;对象&#xff1b;R是Relation&#xff0c;关系&#xff1b;M是Mapping&#xff0c;映射。所以&#xff0c;用一句话概括就是&#xff1a;ORM是一种对象关系映射的技术。 Dapper 是.NET下的一种ORM框架。 Dap…

系统提示一个程序正在被另一个程序调用,如何知道是被哪个程序调用

今天在处理一个病毒时&#xff0c;发现病毒文件无法复制。于是利用processxp找到了病毒文件是被哪个文件调用&#xff0c;然后用md关闭了调用句柄后成功复制文件。具体情况如下&#xff1a; 为了找到是哪个程序调用了befsvc.exe&#xff0c;打开processexplorer.exe&#xff0c…

通过修改explorer.exe内存隐藏文件及注册表项

记录今天分析的一个隐藏自身及注册表项的病毒。 1.概述&#xff1a; &#xff08;1&#xff09;此病毒文件为路径为&#xff1a;C:\Windows7\4D525EC1C14.exe&#xff0c;且注册了自启动项&#xff1a; HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run […

WPF xaml中列表依赖属性的定义

WPF xaml中列表依赖属性的定义 原文:WPF xaml中列表依赖属性的定义列表内容属性 如上图&#xff0c;是一个列表标题排序控件&#xff0c;我们需要定义一个标题列表&#xff0c;从而让调用方可以自由的设置标题信息。 在自定义控件时&#xff0c;会遇到列表依赖属性&#xff0c;…

由于权限问题无法删除注册表键值的解决方法

在中了某个病毒之后手动删除病毒自启动项失败&#xff0c;如下图&#xff1a; 查看run项的权限&#xff0c;发现用户被修改成了Everyone&#xff0c;并且没有任何权限&#xff0c;如下图&#xff1a; 手动赋予Everyone用户完全控制权限后删除注册表项成功&#xff0c;如下图&am…