首页 > 其他分享 >vue3 elementplus样式

vue3 elementplus样式

时间:2024-05-16 11:18:58浏览次数:19  
标签:el elementplus 274954 样式 border screen color vue3 data

科技感日期选择器样式

.data_screen .el-picker-panel__footer{
color: #87CEEB;
background: #00122a;
border-top: 1px solid #274954;
}
.data_screen .el-picker-panel{
color: #87CEEB;
background: #00122a;
border: 1px solid #274954;
}
.data_screen .el-picker-panel, .el-picker-panel__sidebar{
color: #87CEEB;
border-right: 1px solid #274954;
background-color: #00122a;
}
.data_screen .el-picker-panel__shortcut{
color: #87CEEB;
}
.data_screen .el-date-table td.in-range .el-date-table-cell {
background-color: #1d3457eb;
}
.data_screen .el-input__wrapper {
box-shadow: 0 0 0 1px #3dfbea80 inset;
background-color: rgba(109, 103, 103, 0) !important;

}
.data_screen .el-date-range-picker__content.is-left {
border-right-color: #274954;

}
.data_screen .el-input__inner {
color: #87CEEB;
}
.data_screen .el-date-table th {
border-bottom-color: #274954;
}
.data_screen .el-date-range-picker__time-header {
border-bottom-color: #274954;
}
.data_screen {
background: #ffffff00 !important;
border: 1px solid #274954 !important;
}
.data_screen .el-button {
background: #ffffff00 !important;
border: 1px solid #274954 !important;
color: #87CEEB;
}

标签:el,elementplus,274954,样式,border,screen,color,vue3,data
From: https://www.cnblogs.com/dy1997/p/18195611

相关文章

  • vue3 pinia
    pinia状态管理器,统一状态管理,组件间通信state、getter和action,我们可以假设这些概念相当于组件中的data、computed和methods1安装npminstallpinia2在store/xx.js,写入代码,可以定义多个import{defineStore}from"pinia";exportconstuseCountStore=defineS......
  • vue3的入门--setup
    代码量:200行以上博客量:1时间:2h vue2中的data和methods可以与setup并列写,但是:data和methods可以利用this调用setup中的数据而,setup中,不能调用data和methods中的数据<!--Person.vue--><template><divclass="person"><h2>姓名:{{name}}</h2>&......
  • Vue3 vue-grid-layout布局添加右键事件
    示例code<template><divclass="dashboard-container"><ulclass='contextmenu'v-show="menuConfig.visible":style="{left:menuConfig.left+'px',top:menuConfig.top+'px'}">......
  • vue3 前端大屏项目适配方法
    1scale()方法//屏幕内的内容//样式部分.contain{width:100vw;height:200vh;background:url(.pic);backgrouns-size:cover}.screen{display:inline-block;width:1920px;//设计稿的宽度height:1080px;//设计稿的高度transform-origin:l......
  • 【vue3入门】-【22】 动态组件&组件保持存活&异步组件
    动态组件有些场景下会需要在两个组件之间来回切换,比如tab页面App.vue<template><!--组件标签--><component:is="tabComponent"></component><button@click="changeHandle">切换组件</button></template><script>importC......
  • Vue3 列表渲染以及key值的状态管理 的学习
    列表渲染使用v-for指令来进行一个数组的渲染,基于iteminitems其中item是迭代名,items是源数据的数组且迭代名称也可以自由定义,只需要与后面插值表达式的一致即可v-for也可以支持第二个参数进行位置的索引(item,index)initems还有一个小的注意点in也可以换成of一样的用......
  • CSS cursor(鼠标样式)
    属性值示意图描述auto 默认值,由浏览器根据当前上下文确定要显示的光标样式default默认光标,不考虑上下文,通常是一个箭头none 不显示光标initial 将此属性设置为其默认值inherit 从父元素基础cursor属性的值context-menu表示上下文菜单可用......
  • vue3 多服务器域名跨域代理和请求配置
    多服务器域名的跨域配置:同样是在vue.config.js文件中对devServer.proxy进行配置,如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭eslint检查,devServer:{......
  • vue3+ts+elementPlus项目搭建
    1.cmd+R  查看是否安装node环境和vue,node-v  出现版本号如果没有,去下载安装,地址: Node.js—DownloadNode.js®(nodejs.org)vue-V   出现版本号如果没有, 输入命令行,全局安装或升级脚手架npminstall-g@vue/cli2.创建vue项目  (项目名......
  • VUE3.0 中如何使用SVG图标
    1.文件下新建SvgIcon文件夹以及子文件index.js,index.vue,svg文件夹(用于存放svg图片) 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template><......