基于vue的可视化大屏

 

 要提前准备一个xinyang.json文件

可以在这个网站下载

DataV.GeoAtlas地理小工具系列 (aliyun.com)

 代码结构

总框架代码:

<template><div><div class="center"><center-left /><center-map /><center-right /></div><div class="bottom"></div></div>
</template><script>
import centerLeft from "./components/centerLeft.vue";
import centerRight from "./components/centerRight.vue";
import centerMap from "./components/centerMap.vue";
export default {components: { centerMap, centerLeft, centerRight },
};
</script><style lang="scss" scoped>
.center {display: flex;justify-content: space-between;
}
.bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 30px;
}
</style>

中心map,2D地图

模板部分(<template>

  • 整体布局使用了一个 div 元素 class="content" 作为容器。
  • 容器内包含一个 heat-map-echarts 组件,设置了高度为 580px,宽度为 680px
  • 接着是一个包含子元素的 div ,其中有一个自定义的 dv-border-box-7 组件,内部包含一个标题 h2 和一个 Echart 组件。

脚本部分(<script>

  • 导入了两个组件:Echart 和 heatMapEcharts
  • data 函数中定义了一个名为 options1 的对象,用于配置 Echart 组件的选项。
    • xAxis 配置了轴的类型和最大值。
    • yAxis 配置了轴的类型、数据、反转、动画时长和显示的最大条数。
    • series 配置了图表的类型为柱状图,数据、实时排序、标签等相关属性。
    • 还配置了图例、动画时长、缓动效果等。
  • 在 components 中注册了导入的两个组件。

样式部分(<style scoped>

  • 为 .content 类设置了 Flex 布局,使其内容在垂直和水平方向上居中。
  • 为 .title 类设置了上下边距。

总体来说,这段代码是一个 Vue 组件的模板、脚本和样式的组合,主要用于展示一个热图组件和一个柱状图组件,并对其进行了相应的配置和布局设置。

中心map

<template><div class="content">  <!-- 定义一个名为 content 的 div 容器 --><heat-map-echarts height="580px" width="680px" />  <!-- 引入 heat-map-echarts 组件,并设置高度和宽度 --><div>  <!-- 内部的另一个 div --><dv-border-box-7>  <!-- 引入自定义的 dv-border-box-7 组件 --><h2 class="title">人口排名前五的地区</h2>  <!-- 标题元素,显示文本 --><Echart :options="options1" height="350px" width="680px" />  <!-- 引入 Echart 组件,并传递 options1 配置,设置高度和宽度 --></dv-border-box-7></div></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件
import heatMapEcharts from "./echarts/heatMapEcharts.vue";  // 导入 heatMapEcharts 组件export default {data() {  // 定义组件的数据return {options1: {  // 定义 Echart 的配置选项对象 options1xAxis: {  // x 轴的配置type: "value",  // x 轴类型为数值型max: "dataMax",  // x 轴的最大值设置为 "dataMax"},yAxis: {  // y 轴的配置type: "category",  // y 轴类型为分类data: ["平桥区", "浉河区区", "光山县", "罗山县", "新县", "固始县"],  // y 轴的数据inverse: true,  // 是否反转animationDuration: 300,  // 动画持续时间animationDurationUpdate: 300,  // 更新动画的持续时间max: 4,  // 只显示最大的 4 个条},series: [  // 系列配置{realtimeSort: true,  // 实时排序// name: '人口数',  // 注释掉的系列名称type: "bar",  // 图表类型为柱状图// data: [156, 48, 111, 58, 92, 219],  // 注释掉的数据data: ["156", "48", "111", "58", "92", "219"],  // 系列的数据label: {  // 标签配置show: true,  // 显示标签position: "right",  // 标签位置在右侧valueAnimation: true,  // 标签值的动画效果},},],legend: {  // 图例配置show: true,  // 显示图例},animationDuration: 1000,  // 动画持续时间animationDurationUpdate: 1000,  // 更新动画的持续时间animationEasing: "linear",  // 动画缓动效果为线性animationEasingUpdate: "linear",  // 更新动画的缓动效果为线性},};},components: {  // 注册组件Echart,  // 注册 Echart 组件heatMapEcharts,  // 注册 heatMapEcharts 组件},
};
</script><style scoped>
.content {  // 为 content 类设置样式display: flex;  // 启用 Flex 布局flex-direction: column;  // 主轴方向为列align-items: center;  // 水平居中justify-content: center;  // 垂直居中
}
.title {  // 为 title 类设置样式margin-top: 20px;  // 顶部外边距 20 像素margin-bottom: -30px;  // 底部外边距 -30 像素
}
</style>

 引入代码heatMapEcharts.vue

<template><div :id="id" :class="className" :style="{ height: height, width: width }" />
</template><script>
import geoJson from "@/common/map/xinyang.json";
import tdTheme from "@/common/echart/theme.json"; // 引入默认主题
export default {name: "echart",props: {className: {type: String,default: "chart",},id: {type: String,default: "chart",},width: {type: String,default: "100%",},height: {type: String,default: "2.5rem",},},data() {return {chart: null,options: {title: {text: "信阳市人口密度图 (2024)",},tooltip: {trigger: "item",formatter: "{b}<br/>{c} (p / km2)",},toolbox: {show: true,orient: "vertical",left: "right",top: "center",feature: {dataView: { readOnly: false },restore: {},saveAsImage: {},},},visualMap: {min: 800,max: 50000,text: ["High", "Low"],realtime: false,calculable: true,inRange: {color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "信阳市人口密度",type: "map",map: "CQ",label: {show: true,},data: [{ name: "平桥区", value: 20057.34 },{ name: "浉河区", value: 15477.48 },{ name: "罗山县", value: 31686.1 },{ name: "息县", value: 6992.6 },{ name: "光山县", value: 44045.49 },{ name: "新县", value: 40689.64 },{ name: "潢川县", value: 37659.78 },{ name: "淮滨县", value: 45180.97 },{ name: "商城县", value: 55204.26 },{ name: "固始县", value: 21900.9 }],// 自定义名称映射nameMap: {},},],},};},watch: {options: {handler(options) {// 设置true清空echart缓存this.chart.setOption(options, true);},deep: true,},},mounted() {this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题this.initChart();},beforeDestroy() {this.chart.dispose();this.chart = null;},methods: {initChart() {// 初始化echartthis.chart = this.$echarts.init(this.$el, "tdTheme");this.$echarts.registerMap("CQ", geoJson);this.chart.setOption(this.options, true);},},
};
</script><style></style>

 左边left

<template><div>  <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px">  <!-- 自定义的 dv-border-box-6 组件,并设置顶部内边距为 20 像素 --><h2 class="title">2010-2024 年信阳市常住人口及增量</h2>  <!-- 标题 1 --><Echart :options="options1" height="500px" width="600px" />  <!-- 引入 Echart 组件 1,并传递 options1 配置,设置高度和宽度 --><h2 class="title">2015-2024 年信阳市人口出生率、死亡率和自然增长率</h2>  <!-- 标题 2 --><Echart :options="options2" height="350px" width="600px" />  <!-- 引入 Echart 组件 2,并传递 options2 配置,设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件export default {data() {  // 定义组件的数据return {options1: {  // 第一个 Echart 的配置选项对象 options1tooltip: {  // 提示框配置trigger: "axis",  // 触发类型为坐标轴axisPointer: {  // 坐标轴指示器配置type: "cross",  // 类型为十字准线crossStyle: {  // 十字准线样式color: "#999",  // 颜色为 #999},},},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置dataView: { show: true, readOnly: false },  // 数据视图,可显示和编辑magicType: { show: true, type: ["line", "bar"] },  // 图表类型切换restore: { show: true },  // 还原配置saveAsImage: { show: true },  // 保存为图片},},legend: {  // 图例配置data: ["人口", "人口增长率"],  // 图例数据},xAxis: [  // x 轴配置{type: "category",  // 类型为分类data: [  // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: {  // 坐标轴指示器配置type: "shadow",  // 类型为阴影},},],yAxis: [  // y 轴配置{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 2700,  // 最小值max: 3300,  // 最大值interval: 100,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 0,  // 最小值max: 70,  // 最大值interval: 10,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},],series: [  // 系列配置{name: "人口",  // 系列名称type: "bar",  // 图表类型为柱状图tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万";  // 返回值加上单位 "万"},},data: [  // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率",  // 系列名称type: "line",  // 图表类型为折线图yAxisIndex: 1,  // 使用第二个 y 轴tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万人";  // 返回值加上单位 "万人"},},data: [  // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: {  // 第二个 Echart 的配置选项对象 options2tooltip: {  // 提示框配置trigger: "axis",  // 触发类型为坐标轴},legend: {  // 图例配置data: ["出生率", "死亡率", "自然增长率"],  // 图例数据},grid: {  // 网格配置left: "3%",  // 左边距right: "4%",  // 右边距bottom: "3%",  // 下边距containLabel: true,  // 包含标签},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置saveAsImage: {},  // 保存为图片},},xAxis: {  // x 轴配置type: "category",  // 类型为分类boundaryGap: false,  // 两端不留空白data: [  // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: {  // y 轴配置type: "value",  // 数值类型min: -4,  // 最小值max: 14,  // 最大值interval: 2,  // 间隔},series: [  // 系列配置{name: "出生率",  // 系列名称type: "line",  // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0],  // 数据},{name: "死亡率",  // 系列名称type: "line",  // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2],  // 数据},{name: "自然增长率",  // 系列名称type: "line",  // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2],  // 数据},],},};},components: {  // 注册组件Echart,  // 注册 Echart 组件},
};
</script><style>
.title {  // 标题的样式display: flex;  // 启用 Flex 布局justify-content: center;  // 水平居中margin-bottom: 10px;  // 底部外边距 10 像素
}
</style>

 

 右边right

<template><div>  <!-- 最外层的 div 容器 --><dv-border-box-6 style="padding-top: 20px">  <!-- 自定义组件 dv-border-box-6,并设置顶部内边距为 20 像素 --><h2 class="title">2010 - 2024 年信阳市常住人口及增量</h2>  <!-- 第一个标题 --><Echart :options="options1" height="500px" width="600px" />  <!-- 引入 Echart 组件 1,并绑定 options1 配置,设置高度和宽度 --><h2 class="title">2015 - 2024 年信阳市人口出生率、死亡率和自然增长率</h2>  <!-- 第二个标题 --><Echart :options="options2" height="350px" width="600px" />  <!-- 引入 Echart 组件 2,并绑定 options2 配置,设置高度和宽度 --></dv-border-box-6></div>
</template><script>
import Echart from "@/common/echart/index.vue";  // 导入 Echart 组件export default {data() {  // 定义组件的数据return {options1: {  // 第一个 Echart 的配置对象tooltip: {  // 提示框配置trigger: "axis",  // 触发方式为坐标轴axisPointer: {  // 坐标轴指针配置type: "cross",  // 指针类型为十字线crossStyle: {  // 十字线样式color: "#999",  // 颜色为 #999},},},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置dataView: { show: true, readOnly: false },  // 数据视图功能,可显示且可编辑magicType: { show: true, type: ["line", "bar"] },  // 图表类型切换功能,可切换为折线图和柱状图restore: { show: true },  // 恢复功能saveAsImage: { show: true },  // 保存为图片功能},},legend: {  // 图例配置data: ["人口", "人口增长率"],  // 图例数据},xAxis: [  // x 轴配置{type: "category",  // 类型为分类data: [  // x 轴数据"2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024",],axisPointer: {  // 坐标轴指针配置type: "shadow",  // 类型为阴影},},],yAxis: [  // y 轴配置{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 2700,  // 最小值max: 3300,  // 最大值interval: 100,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},{type: "value",  // 数值类型name: "万人",  // y 轴名称min: 0,  // 最小值max: 70,  // 最大值interval: 10,  // 间隔axisLabel: {  // y 轴标签配置formatter: "{value}",  // 格式化函数},},],series: [  // 系列配置{name: "人口",  // 系列名称type: "bar",  // 图表类型为柱状图tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万";  // 返回值加上 " 万" 单位},},data: [  // 数据2920, 2950, 2970, 3010, 3040, 3070, 3110, 3150, 3160, 3190, 3210,3220, 3250,],},{name: "人口增长率",  // 系列名称type: "line",  // 图表类型为折线图yAxisIndex: 1,  // 使用第二个 y 轴tooltip: {  // 提示框配置valueFormatter: function (value) {  // 值格式化函数return value + " 万人";  // 返回值加上 " 万人" 单位},},data: [  // 数据40.21, 59.81, 30.45, 36.15, 32.45, 26.54, 39.94, 33.55, 19.63,24.7, 21.09, 3.5, 4.21,],},],},options2: {  // 第二个 Echart 的配置对象tooltip: {  // 提示框配置trigger: "axis",  // 触发方式为坐标轴},legend: {  // 图例配置data: ["出生率", "死亡率", "自然增长率"],  // 图例数据},grid: {  // 网格配置left: "3%",  // 左边距为 3%right: "4%",  // 右边距为 4%bottom: "3%",  // 下边距为 3%containLabel: true,  // 包含标签},toolbox: {  // 工具栏配置feature: {  // 工具栏功能配置saveAsImage: {},  // 保存为图片功能},},xAxis: {  // x 轴配置type: "category",  // 类型为分类boundaryGap: false,  // 两端不留空白data: [  // x 轴数据"2017","2018","2019","2020","2021","2022","2023","2024",],},yAxis: {  // y 轴配置type: "value",  // 数值类型min: -4,  // 最小值max: 14,  // 最大值interval: 2,  // 间隔},series: [  // 系列配置{name: "出生率",  // 系列名称type: "line",  // 图表类型为折线图data: [10.8, 11.9, 11.6, 11.5, 10.5, 7.8, 6.5, 6.0],  // 数据},{name: "死亡率",  // 系列名称type: "line",  // 图表类型为折线图data: [7.3, 7.3, 7.4, 7.8, 7.9, 7.9, 8.1, 8.2],  // 数据},{name: "自然增长率",  // 系列名称type: "line",  // 图表类型为折线图data: [4, 4.4, 4, 3.8, 3.1, -1, -1.6, -2],  // 数据},],},};},components: {  // 注册组件Echart,  // 注册 Echart 组件},
};
</script><style>
.title {  // 标题的样式display: flex;  // 使用 Flex 布局justify-content: center;  // 水平居中margin-bottom: 10px;  // 底部外边距 10 像素
}
</style>

 最后运行主代码就可以了:

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

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

相关文章

Xterminal工具的安装与使用体验

Xterminal工具的安装与使用体验 一、Xterminal简介二、Xterminal核心特性三、Xterminal使用场景四、Xterminal下载地址五、Xterminal的基本使用5.1 设置仓库密码5.2 SSH连接5.3 Windows远程桌面5.4 笔记功能5.5 AI工具 六、总结 一、Xterminal简介 Xterminal是一款专为开发者设…

FastReport 指定sql 和修改 数据库连接地址的 工具类 :FastReportHelper

FastReport 指定sql 和修改 数据库连接地址的 工具类 &#xff1a;FastReportHelper 介绍核心代码&#xff1a;完整代码&#xff1a; 介绍 在FastReport中&#xff0c;经常会遇到需要给 sql 加条件的情况&#xff0c;或者给数据库地址做更换。 &#xff08;废话不多说&#x…

达梦数据库的系统视图v$auditrecords

达梦数据库的系统视图v$auditrecords 在达梦数据库&#xff08;DM Database&#xff09;中&#xff0c;V$AUDITRECORDS 是专门用来存储和查询数据库审计记录的重要系统视图。这个视图提供了对所有审计事件的访问权限&#xff0c;包括操作类型、操作用户、时间戳、目标对象等信…

1.DDR3 SO-DIMM 内存条硬件总结

最近在使用fpga读写DDR3&#xff0c;板子上的DDR3有两种形式与fpga相连&#xff0c;一种是直接用ddr3内存颗粒&#xff0c;另一种是通过内存条的形式与fpga相连。这里我们正好记录下和ddr3相关的知识&#xff0c;先从DDR3 SO-DIMM 内存条开始。 1.先看内存条的版本 从JEDEC下载…

如果你想手写Linux系统

哈喽&#xff0c;我是子牙老师。今天咱们聊聊这个话题吧&#xff0c;Linux作为当今科技世界的地基&#xff0c;我们越来越接近真理了&#xff0c;有木有&#xff1f; 这个文章的角度&#xff0c;你可能全网都很难找到第二篇如此系统讲透这个问题的文章 你可能想问&#xff1a…

强化学习编程实战-2马尔可夫决策过程

2.1 从多臂赌博机到马尔可夫决策过程 如图2-1&#xff0c;图中A为多臂赌博机&#xff0c;B为一堆鸳鸯&#xff0c;其中左上角为雄性鸳鸯&#xff0c;右上角为雌性鸳鸯&#xff0c;B展示的任务是雄性鸳鸯绕过障碍物找到词性鸳鸯。跟多臂赌博机不同的是&#xff0c;雄性鸳鸯经过一…

【SpringCloud应用框架】Nacos集群配置

第八章 Spring Cloud Alibaba Nacos之集群配置 文章目录 一、Linux版NacosMySql生产环境配置具体配置&#xff1a; 二、Nacos集群配置更改Nacos启动命令配置原理具体配置测试启动总结 一、Linux版NacosMySql生产环境配置 上一篇博客中已经了解了Nacos生产环境下需要搭建集群配…

angular 请求响应拦截

在module中provide 对请求做一些操作 对响应做一些操作 import { Injectable } from angular/core; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from angular/common/http; import { Observable, throwError } from rxjs; import { catc…

[ControlNet] Adding Conditional Control to Text-to-Image Diffusion Models

1、目的 让预训练好的大型DDPM模型支持额外的输入条件&#xff08;如Canny edges、Hough lines、user scribbles、segmentation maps、human key points、shape normals、depths等&#xff09; 不同于image-to-image translation致力于学习不同domain之间的映射&#xff0c;Con…

【Mac】Folder Icons for mac(文件夹个性化图标修改软件)软件介绍

软件介绍 Folder Icons for Mac 是一款专为 macOS 设计的应用程序&#xff0c;主要用于个性化和定制你的文件夹图标。以下是它的主要特点和使用方法&#xff1a; 主要特点&#xff1a; 个性化文件夹图标 Folder Icons for Mac 允许用户为 macOS 上的任何文件夹定制图标。你…

C嘎嘎:类和对象(一)

目录 面向过程和面向对象的初步认识 类的引入 类的定义 类的访问限定符及封装 访问限定符 封装 类的作用域 类的实例化 类对象模型 如何计算类对象大小 结构体内存对齐规则 this指针 this指针的引出 this指针的特性 类的6个默认成员函数 构造函数 概念 特性 …

前端vue打印后端对象为[object,object]

今天给自己项目进行编写前端页面时&#xff0c;惊讶的发现&#xff0c;自己进行打印后端传递的对象&#xff0c;一直显示未[object,object]&#xff0c;如下图所示&#xff1a; 感觉很奇怪&#xff0c;于是我猜测是不是自己获取的返回数据的问题&#xff0c;在进行添加了datat…

关于Linux的操作作业!24道题

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

Sleuth--链路追踪

1 链路追踪介绍 在大型系统的微服务化构建中&#xff0c;一个系统被拆分成了许多模块。这些模块负责不同的功能&#xff0c;组合成 系统&#xff0c;最终可以提供丰富的功能。在这种架构中&#xff0c;一次请求往往需要涉及到多个服务。互联网应用构建 在不同的软件模块集上&am…

鸿蒙‘ohpm‘ 不是内部或外部命令,也不是可运行的程序-解决方案

&#x1f525; 博客主页&#xff1a; 小韩本韩&#xff01; ❤️ 感谢大家点赞&#x1f44d;收藏⭐评论✍️ 在鸿蒙的DevEco Studio的终端下输入 ohpm -v 或者 你需要下载第三方ohpm包的时候提示‘ohpm‘ 不是内部或外部命令&#xff0c;也不是可运行的程序- 主要是因为我们…

Redies基础篇(一)

Redis 是一个高性能的key-value数据库。Redies支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作&#xff0c;而且这些操作都是原子性的&#xff…

idea2024破解安装教程

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 目录 &#x1f324;️下载安装 &a…

基于Java Web的考编论坛网站的设计与实现+lw+源码+讲解+调试+视频演示

第3章 系统分析 用户的需求以及与本系统相似的在市场上存在的其它系统可以作为系统分析中参考的资料&#xff0c;分析人员可以根据这些信息确定出本系统具备的功能&#xff0c;分析出本系统具备的性能等内容。 3.1可行性分析 尽管系统是根据用户的要求进行制作&#xff0c;但…

ElasticSearch学习篇14_《检索技术核心20讲》进阶篇之大倒排索引

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 内容 主要是海量数据的大倒排索引的一些原理设计思想&#xff0c;ES底层就是基于这些设计思想以及原理&#xff0c;主要涉及读写分离、索引分层等…

CSS上下悬浮特效

要实现一个上下悬浮的特效&#xff0c;可以使用CSS的keyframes规则和动画属性。以下是一个简单的示例&#xff1a; 代码示例 /* 定义一个名为floating的动画 */ keyframes floating {0% {transform: translateY(0); /* 初始位置 */}50% {transform: translateY(-4px); /* 向上…