修改element-ui中el-calendar(日历)的样式

效果图如下:

在这里插入图片描述

<template>
  <div class="dashboard-container">
    <el-card style="width: 350px; height: auto; border-radius: 8px">
      <div class="custom-style">
        <p class="new-data">{{ newDate }}</p>
        <el-calendar ref="calendar" v-model="value" />
      </div>
    </el-card>
  </div>
</template>
<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      value: new Date()
    }
  },
  computed: {
    newDate() {
      return this.formatDate(this.value)
    }
  },
  methods: {
    formatDate(value) {
      const date = new Date(value)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}${month < 10 ? '0' + month : month}${
        day < 10 ? '0' + day : day
      }`
    }
  }
}
</script>

<style lang="scss">

// 自定义样式
.custom-style {
    .new-data {
        position: absolute;
        margin: 0;
        line-height: 26px;
    }

    .el-calendar__title {
        opacity: 0;
    }

    // 上个月、下个月按钮样式
    .el-button-group>.el-button:first-child:before {
        content: "";
        display: inline-block;
        width: 6px !important;
        height: 6px !important;
        border: transparent;
        border-top: 1px solid #6e6c6c;
        border-right: 1px solid #6e6c6c;
        transform: rotate(-135deg);
        /* 可根据需要调整间距 */
    }

    .el-button-group>.el-button:last-child:before {
        content: "";
        display: inline-block;
        width: 6px !important;
        height: 6px !important;
        border: transparent;
        border-top: 1px solid #6e6c6c;
        border-right: 1px solid #6e6c6c;
        transform: rotate(45deg);
    }

    .el-button-group>.el-button:not(:first-child):not(:last-child) {
        color: #444444;
    }

    .el-button-group>.el-button:first-child span,
    .el-button-group>.el-button:last-child span {
        display: none;
    }

    .el-button-group>.el-button:not(:last-child) {
        margin-right: -15px;
    }

    // 去除文字
    .el-button-group>.el-button:not(:first-child):not(:last-child) {
        span {
            display: none;
        }
    }

    .el-button-group>.el-button {
        border: 0;
        background: transparent;
    }

    .el-calendar-table__row td {
        // 去掉边框
        border: none !important;

        // 缩小高度
        .el-calendar-day {
            height: 32px;
            line-height: 18px;
            // 设置居中
            text-align: center;
        }
    }

    // 自定义选中、悬浮颜色
    .el-calendar-table .el-calendar-day:hover {
        color: #fff;
        background-color: #ff5e78 !important;
    }

    .el-calendar-table .is-today {
        color: #303133;
    }

    .el-backtop,
    .el-calendar-table td.is-today {
        color: #ff5e78;
    }

    .el-calendar-table .is-selected {
        color: #fff !important;
        background-color: #ff5e78 !important;
    }

    .el-calendar__header {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        border: none;
    }
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习(XgBoost)预测顶和底

之前的文章中&#xff0c;我们对中证1000指数进行了顶和底的标注。这一篇我们将利用这份标注数据&#xff0c;实现机器学习预测顶和底&#xff0c;并探讨一些机器学习的原理。 我们选取的特征非常简单–上影线和WR&#xff08;William’s R&#xff09;的一个变种。选取这两个…

关于c++中的操作符:new和delete

目录 1.什么是new和delete 2.new和delete的用法 2.1 new和delete普通用法 2.2 new和delete的升级用法 1.什么是new和delete C语言中有两个函数用于动态开辟、释放内存----malloc和freec中又引入了两个操作符----new和delete来用于开辟、释放内存 说到这应该对这两个操作符有…

通过“命令提示符(cmd)”注销后台帐号用户

通过“命令提示符&#xff08;cmd&#xff09;”注销后台帐号用户 1 2 3 4 分步阅读 电脑上面后台使用的用户较多&#xff08;包括远程连接&#xff09;&#xff0c;电脑的运行负荷将会增加&#xff0c;电脑响应缓慢&#xff0c;甚至会影响到正常的使用&#xff0c…

(四)Servlet教程——Maven的安装与配置

1.在C盘根目录下新建一个Java文件夹,该文件夹用来放置以下步骤下载的Maven&#xff1b; 2. 下载Maven的来源有清华大学开源软件镜像站和Apache Maven的官网&#xff0c;由于清华大学开源软件镜像站上只能下载3.8.8版本以上的Maven&#xff0c;我们选择在Apache Maven的官网上下…

js进行数据移除性能比较(splice,map)

当使用 splice() 方法处理大量数据时&#xff0c;确实会遇到性能问题&#xff0c;因为它涉及到移动数组中的元素&#xff0c;导致操作的时间复杂度为 O(n)。对于大量数据&#xff0c;频繁的插入和删除可能会导致性能下降。 1、设置数组数据为10000&#xff0c;使用splice移除数…

洗地机哪个牌子好?推荐这四款热销品牌

随着科技的不断发展&#xff0c;洗地机已经成为了家庭中不可或缺的智能家居设备。它们能够帮助我们轻松地完成地面清洁工作&#xff0c;节省时间和精力。但是&#xff0c;面对市场上琳琅满目的洗地机品牌&#xff0c;我们该如何选择呢&#xff1f;本文将为大家介绍四大口碑洗地…

spring一二三级缓存和@Lazy解决循环依赖流程

简单对象指的是 实例化后还没有属性注入的时候的早期bean lambda表达式用于判断a是否存在aop代理 假如a和b循环依赖&#xff0c;a实例化时&#xff0c; bean创建流程如下&#xff1a; 0&#xff0c;创建一个set记录当前正在实例化的bean&#xff0c; 1.实例化a的简单对象时…

研究发现:90%的Java服务容易第三方漏洞的影响

Datadog最新发布的“2024年DevSecOps状况”报告显示&#xff0c;Java服务在受Datadog最新发布的“2024年DevSecOps状况”报告显示&#xff0c;Java服务在受到第三方漏洞影响方面最为严重。 报告指出&#xff0c;90%的Java服务存在一个或多个严重或高危漏洞&#xff0c;这些漏…

Rust语言系统编程实战(小北学习笔记——请督促我持续更新)

前言 进入大学以来&#xff08;计算机应用技术——大数据方向&#xff09;&#xff0c;就像很多程序猿&#x1f412;一样&#xff0c;小北开始每学期学习一种新的编程语言。通过学习另一个编程语言&#xff0c;可以了解很多规范和规则&#xff0c;并得到了一些想法&#xff0c;…

茶饮门店本地生活抖音团购运营方案计划书

【干货资料持续更新&#xff0c;以防走丢】 茶饮门店本地生活抖音团购运营方案计划书 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑80页&#xff08;完整资料包含以下内容&#xff09; 目录 抖音本地生活运营方案 1. 账号基础搭建与优化 - 门店账号…

情感识别——情感计算的模型和数据集调查

概述 情感计算指的是识别人类情感、情绪和感觉的工作&#xff0c;已经成为语言学、社会学、心理学、计算机科学和生理学等领域大量研究的主题。 本文将概述情感计算的重要性&#xff0c;涵盖思想、概念和方法。 情感计算是皮卡德于 1997 年提出的一个想法&#xff0c;此后出…

一个 cuda shared library 的通用Makefile

0. 文件结构 device 模版函数放在 library/dev/include/*.cuh 模版的实例化和调用封装在 library/dev/*.cu 针对主机代码调用dev 函数而提供的头文件放在 library/dev/*.h, 也就是*.cu中主机函数的声明&#xff1b; 业务逻辑放置在 lib/src/*.cpp中&#xff0c;调用library/…

OpenWRT磁盘扩容(PVE虚拟机方案)

官方扩容指导文档 PVE给虚拟机磁盘扩容 给虚拟机磁盘扩容&#xff0c;选中OpenWRT的硬盘&#xff0c;随后选择调整大小 输入增量大小&#xff0c;即增加多少磁盘空间给硬盘。这里我选择增加4G 进入OpenWRT控制台界面安装一些linux常用查看磁盘的工具&#xff08;也可以通过网…

Tensorflow2.0笔记 - BatchNormalization

本笔记记录BN层相关的代码。关于BatchNormalization&#xff0c;可以自行百度&#xff0c;或参考这里&#xff1a; 一文读懂Batch Normalization - 知乎神经网络基础系列&#xff1a; 《深度学习中常见激活函数的原理和特点》《过拟合: dropout原理和在模型中的多种应用》深度…

Web前端 JavaScript笔记7

js的执行机制 js是单线程 同步&#xff1a;前面一个任务执行结束之后&#xff0c;执行后一个 异步&#xff1a;异步任务&#xff0c;引擎放在一边&#xff0c;不进入主线程&#xff0c;而进入任务队列的任务 js通过浏览器解析&#xff0c;浏览器靠引擎解析 回调函数同步任务执行…

17.Nacos与Eureka区别

Nacos会将服务的提供者分为临时实例和非临时实例。默认为临时实例。 临时实例跟eureka一样&#xff0c;会向注册中心报告心跳监测自己是否还活着。如果不正常了nacos会剔除临时实例。&#xff08;捡来的孩子&#xff09; 非临时实例&#xff0c;nacos会主动询问服务提供者是否…

【YOLOv8改进[注意力]】YOLOv8添加DAT(Vision Transformer with Deformable Attention)助力涨点

目录 一 DAT 二 YOLOv8添加DAT助力涨点 1 总体修改 2 配置文件 3 训练 其他 一 DAT 官方论文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2022/papers/Xia_Vision_Transformer_With_Deformable_Attention_CVPR_2022_paper.pdf Transformers最近在各种视…

BBS前后端混合项目--01

总路由 # urls.py """BBS1 URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.2/topics/http/urls/ Examples: Function views1. Add an import: from my_app import views2…

上网行为管理软件有哪些?三款常用上网行为管理软件评测

互联网的普及&#xff0c;企业和个人对于网络安全和信息保护的需求越来越高。为了确保网络环境的安全和稳定&#xff0c;上网行为管理软件应运而生。本文将对三款常用的上网行为管理软件进行评测&#xff0c;分别是域智盾、Splunk Enterprise Security和安企神。 1、域智盾 域…

什么是正向代理和反向代理

正向代理和反向代理是两种不同的代理服务器配置方式&#xff0c;它们在代理的方向和作用上有所不同。 一、正向代理&#xff08;Forward Proxy&#xff09; 代表客户端发送请求到其他服务器的代理服务器。客户端将请求发送给正向代理服务器&#xff0c;然后由正向代理服务器代…