【JavaScript + CSS】随机生成十六进制颜色

  1. 效果图
    在这里插入图片描述
  2. 实现
<template><div class="year_area"><div class="year_list"><el-row :span="24"><div :class="showAll"><el-col :span="5" v-for="(item, index) in defaulList" :key="index" class="year_list_content":style="{ borderLeft: item.color }"><div @click="handleClick(item)" class="year-model"><div class="year_text"><div class="year_text_font">{{ item.year }}</div></div></div></el-col><div class="search_fload" @click="handFload"><span class="fload_is_show"> {{ showAll ? "收起更多" : "展开更多" }} </span><i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></div></div></el-row></div></div>
</template>
<script>
import { getAllYear} from "@/api/year.js";export default{data(){return{showAll:false, // 展开或收起allList:[], // 所有项defaulList:[] // 默认展开项}},mounted(){this.fetchData()},methods:{/*** 初始化列表数据*/fetchData(){getAllYear().then((res) => {this.showAll = false;console.log(res.data,"aa");res.data.forEach((e) => {this.allList.push({year: e.split("-")[0],color: this.randomHexColor()})});if(!this.showAll){// 默认仅展示15条this.defaulList= this.allList.slice(0,15)}else{this.defaulList= this.allList}});},/*** 展开或合并*/handFload() {this.showAll = !this.showAll;if (this.showAll) {this.defaulList = this.allList;} else {this.defaulList = this.allList.slice(0, 15);}},/*** 随机生成十六进制颜色*/randomHexColor() {return ("8px solid #" +("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));},/*** 跳转到详情页*/handleClick(item) {this.$router.push({path: `/`,});},}
}
</script>
<style scoped lang="less">
.year_area {width: 1024px;margin: 0 auto;min-height: calc(70vh);.year_list {display: flex;width: 1024px;padding: 12px;flex-direction: column;// gap: 12px;border-radius: 5px;background: #fff;margin-top: 12px;.year_list_content {border-radius: 5px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;border-right: 1px solid #eee;background: #fff;margin: 10px 20px;height: 56px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);.year-model {width: 100%;height: 100%;display: flex;justify-content: center;.year_text {display: flex;justify-content: center;align-items: center;gap: 8px;align-self: stretch;cursor: pointer;.year_text_font {color: #333;font-family: "Source Han Sans CN";font-size: 18px;font-style: normal;font-weight: 500;line-height: 24px;}}}}.search_fload {text-align: center;line-height: 70px;cursor: pointer;}}
}
</style>
  1. 数据结构

@/api/year.js

["2021","2020","2019","2018","2017","2016","2015","2014","2013","2012","2011","2010","2009","2008","2007","2006","2005","2004","2003","2002","2001"
]
  1. border-left

复合属性,它用于设置 HTML 元素或 CSS 规则中左侧边框的宽度、样式以及颜色

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

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

相关文章

Office恢复旧UI|Office UI问题|Word UI|小喇叭找不到

Office恢复旧UI&#xff5c;Office UI问题&#xff5c;Word UI&#xff5c;小喇叭找不到 问题描述&#xff1a;Office新版本默认新UI&#xff0c;主界面没有小喇叭可以切换到旧UI. 解决方案&#xff1a; 以下述内容新建.txt&#xff0c;保存并改后缀为.reg&#xff0c;双击打开…

redis下载与安装教程(centos下)

文章目录 一&#xff0c;redis下载1.1上传到linux服务器上 二&#xff0c;redis安装2.1 安装依赖2.2 解压包2.3 编译并安装2.4 指定配置启动2.5 设置redis开机自启 一&#xff0c;redis下载 官网&#xff1a; https://redis.io1.1上传到linux服务器上 我用filezila上传到/us…

使用PHPStudy搭建本地web网站并实现任意浏览器公网访问

文章目录 [toc]使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2…

失物招领|基于Springboot的校园失物招领系统设计与实现(源码+数据库+文档)

校园失物招领系统目录 目录 基于Springboot的校园失物招领系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、 管理员功能实现 (1) 失物招领管理 (2) 寻物启事管理 (3) 公告管理 (4) 公告类型管理 2、用户功能实现 (1) 失物招领 (2) 寻物启事 (3) 公告 …

服务器性能监控管理方法及工具

服务器是组织数据中心的主干&#xff0c;无论是优化的用户体验&#xff0c;还是管理良好的资源&#xff0c;服务器都能为您完成所有工作&#xff0c;保持服务器随时可用和可访问对于面向业务的应用程序和服务以最佳水平运行至关重要。 理想的服务器性能需要主动监控物理和虚拟…

SpringMVC处理ajax请求之@ResponseBody注解,将后端数据响应到浏览器

上一篇文章讲到SpringMVC处理ajax请求用到的RequestBody注解SpringMVC处理ajax请求&#xff08;RequestBody注解&#xff09;&#xff0c;ajax向后端传递的数据格式详解-CSDN博客&#xff0c;这个注解帮我们解决了如何将客户端的数据通过json数据传递到服务器&#xff0c;简单说…

Mybatis Plus 插件失效问题记录

Mybatis Plus 插件失效问题记录 1. 问题发生场景2.问题发生原理与解决方法 1. 问题发生场景 在配置了Mybatis Plus分页查询后&#xff0c;自定义拦截器&#xff08;插件&#xff09;失效。 SpringBootApplication public class MybatisPlusDemoApplication {public static vo…

Python实现PDF到HTML的转换

PDF文件是共享和分发文档的常用选择&#xff0c;但提取和再利用PDF文件中的内容可能会非常麻烦。而利用Python将PDF文件转换为HTML是解决此问题的理想方案之一&#xff0c;这样做可以增强文档可访问性&#xff0c;使文档可搜索&#xff0c;同时增强文档在不同场景中的实用性。此…

MQ面试题整理(持续更新)

1. MQ的优缺点 优点&#xff1a;解耦&#xff0c;异步&#xff0c;削峰 缺点&#xff1a; 系统可用性降低 系统引入的外部依赖越多&#xff0c;越容易挂掉。万一 MQ 挂了&#xff0c;MQ 一挂&#xff0c;整套系统崩 溃&#xff0c;你不就完了&#xff1f;系统复杂度提高 硬生…

微服务入门篇:Nacos注册中心(Nacos安装,快速入门,多级存储,负载均衡,环境隔离,配置管理,热更新,集群搭建,nginx反向代理)

目录 1.Nacos安装1.官网下载2.解压到本地3.启动nacos 2.Nacos快速入门1.在父工程中导入nacos依赖2.给子项目添加客户端依赖3.修改对应服务的配置文件4.启动服务&#xff0c;查看nacos发现情况 3.Nacos服务多级存储模型4.NacosRule负载均衡5. 服务实例的权重设置6.环境隔离&…

Pytest 与allure测试报告集成

通过Feature, story, step 记录测试的功能&#xff0c;场景及测试步骤 # login.pylogin_func函数 传入参数是name 和 password 当输入的name和password与数据库db_data中数据一致时&#xff0c;返回“XXX成功登录系统&#xff01;” 当输入的name存在于数据库db_data但密码不正…

在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)

最近要批量解压归档文件和压缩包&#xff0c;所以就想能不能并行执行这些工作。因为tar自身不支持并行解压&#xff0c;但是像make却可以支持生成一些文件&#xff0c;所以我才有了这种想法。 方法有两种&#xff0c;第一种不用安装任何软件或工具&#xff0c;直接bash或其他 …

源码梳理(3)MybatisPlus启动流程

文章目录 1&#xff0c;MybatisPlus的使用示例2&#xff0c;BaseMapper方法的执行2,1 MybatisMapperProxy代理对象2.2 InvocationHandler接口&#xff08;JDK动态代理&#xff09;2.3 MapperMethodInvoker接口2.4 MybatisMapperMethod 3&#xff0c;SqlSession的执行流程3.1 Sq…

sqli-labs-master靶场训练笔记(21-38|精英级)

2024.1.30 level-21 (cookie 注入数据加密) 从页面上就可以看出这次的数据被 baes64 加密了 中国有句古话&#xff1a;师夷长技以制夷 &#xff0c;用base64加密后的数据即可爆出数据 加密前&#xff1a; admin and updatexml(1,concat(~,(select database()),~),1) and …

MFC结构体写入文件和读取

先定义一个结构体&#xff1b; struct myTxc { char c; CString name; int value; } txc; 读和写的菜单代码&#xff1b; void CjgtrwView::On32771() {// TODO: 在此添加命令处理程序代码CFile file(_T("test1.txt"), CFile::modeCreate | CFile::mod…

大卫·芬奇《消失的她》电影解读

《消失的爱人》&#xff08;Gone Girl&#xff09;是一部由大卫芬奇&#xff08;David Fincher&#xff09;执导的心理悬疑电影&#xff0c;改编自吉莉恩弗林&#xff08;Gillian Flynn&#xff09;的同名小说。这部影片于2014年上映&#xff0c;通过其精巧的剧本、紧张的氛围以…

在 iOS 上安装自定企业级应用

了解如何安装您的组织创建的自定应用并为其建立信任。 本文适用于学校、企业或其他组织的系统管理员。 您的组织可以使用 Apple Developer Enterprise Program 创建和分发企业专用的 iOS 应用&#xff0c;以供内部使用。您必须先针对这些应用建立信任后&#xff0c;才能将其打…

地理坐标系、空间坐标系、epsg查询网站

坐标系可用范围和详细信息的查询网站 简介 epsg.ruiduobao.com是一个可以查询gdal中所有坐标系信息的网站&#xff0c;可查询到坐标系的基准面、椭球体、中央子午线等相关信息&#xff0c;并对每个坐标系的可用范围在地图中进行了显示。详细信息可以看操作视频&#xff1a; e…

Postgresql体系结构

client连接PostgreSQL过程&#xff1a; 1、客户端发起请求 2、主服务postmaster进程负责服务器是否接受客户端的host通信认证&#xff0c;服务器对客户端进行身份鉴别 3、主服务进程为该客户端单独fork一个客户端工作进程postgres 4、客户端与postgres进程建立通信连接&#xf…

1-3 动手学深度学习v2-线性回归的从零开始实现-笔记

手动创建训练数据集 根据带有噪声的线性模型构造一个人造数据集。我们使用线性模型参数 w [ 2 , − 3.4 ] T \pmb{w} [2,-3.4]^{T} w[2,−3.4]T、 b 4.2 b 4.2 b4.2和噪声项 ϵ \epsilon ϵ生成数据集及其标签&#xff1a; y X w b ϵ \pmb{y} \pmb{Xw}b\epsilon yXw…