1.css文件夹下新建global.css文件并粘贴复制:

=======================
:root{
    --bgColor : #d3252a;
    --pinkColor : #ff4e81;
    --textColor : #d3252a;
    --selectdBg:#823d3e;
    --textHuge : 38%;
    --textSuitb: 33%;
    --textMin: 27%;
    --text12: 12px;
    --headerHeight : 1.2rem;
    --icon : 26px;
    --iconFoot : 32%;
    --lineSuperPure:#d9d9d9;
    --linePure:#e9e9e9;
}
/* 93%居中 */
.widMargin{
    width: 100%;
}
.marginAuto{
    margin: 0 auto;
}
.marg93{
    width: 93%;
    margin: 0 auto;
}
/* 透明度 */
.opacinone{
    opacity: 0;
}
.disNone{
   display:none!important
}
/* 弹性盒 */
.flex-around{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-left{
    display: flex;
    justify-content: left;
    align-items: center;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-between-top{
    display: flex;
    justify-content: space-between;
    align-items: top;
}
/* inputNone */
.inputNone{
    background: none;
    border: 0;
    outline: 0;
    color: #696969;
    font-size: 15px;
    text-indent: 10px;
    display: block;
    height: 38px;
}
.inputNone:focus{
    color: black;
}
/* 取消默认样式 */
img, span{
    display: block;
}
.borderNone{
    border: 0!important;
}
/* header+footer+body自适应 */
.AllPage{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}
.ScrollContent{
    width: 100%;
    overflow:scroll;
    flex:1;
}
/* button默认 */
button{
    border: 0;
    display: block;
    padding: 0;
}
/* 弹性盒,怪异盒模型盒阴影 */
.boxTurnStr{
    box-sizing: border-box;
}
.boxShado{
    box-shadow:#e8e0e0 0px 11px 6px -10px
}
/* 万恶的定位 */
.posiRelat{
    position: relative;
}
.posiAbsol{
    position: absolute;
}
.posiFixed{
    position: fixed;
}
================================

注意:root的使用:

p{
   color:(--bgColor )
}

vue-单独引入css文件,设置公共的css样式或者修改默认的vant,mint样式的更多相关文章

  1. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  2. 如何在vue中全局引入stylus文件的公共变量

    新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract t ...

  3. 比较好的前端方法库及一些vue如何引入静态文件

    https://select2.github.io/examples.html   select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...

  4. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  5. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

  6. vue全局引入scss文件(推荐)

    <template> <div id="app"> <router-view/> </div> </template> ...

  7. Vue系列---【.npmrc文件设置私服地址】

    一..npmrc 配置文件的优先级 电脑中有多个 .npmrc 文件,在我们安装包的时候,npm按照如下顺序读取这些配置文件 项目配置文件: /project/.npmrc 用户配置文件:~/.npm ...

  8. require.js添加css文件实现代码:css.min.js

    define( function () { if (typeof window == "undefined")return { load: function (n, r, load ...

  9. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  10. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

随机推荐

  1. 李沐动手学深度学习pytorch实践笔记

    1.pytorch中的矩阵乘法: 2.标量对向量求导: 3.pytorch的backward函数: 4.如何直观理解梯度下降: 梯度,是个向量,有方向和长度就是向量,向量里的各个元素是偏导.是标量对向 ...

  2. KingbaseES 数据库使用Limit子句查询结果返回顺序不一致

    一.KingbaseES数据库limit查询子句: 在KingbaseES数据库使用LIMIT子句限制查询结果的行数,从而实现分段显示数据的功能. 使用LIMIT子句在KingbaseES数据库中进行 ...

  3. spark和hadoop的区别

    hadoopHadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Hadoop实现了一个分 ...

  4. OpenHarmony创新赛 | 您有一份创新激励奖待领取 请查收!

      2023开源和信息消费大赛 开放原子开源大赛OpenHarmony创新赛 (以下简称"OpenHarmony创新赛") 正如火如荼的进行当中 赛程也即将进入到提交作品的关键阶段 ...

  5. std::format 如何实现编译期格式检查

    C++ 20 的 std::format 是一个很神奇.很实用的工具,最神奇的地方在于它能在编译期检查字符串的格式是否正确,而且不需要什么特殊的使用方法,只需要像使用普通函数那样传参即可. #incl ...

  6. Java 继承与多态:代码重用与灵活性的巧妙结合

    Java 继承(子类和超类) 在 Java 中,可以从一个类继承属性和方法到另一个类.我们将"继承概念"分为两类: 子类(child): 从另一个类继承的类 超类(parent): ...

  7. Windows wsl2安装Docker

    wsl2的Ubuntu安装好后,就可以安装Docker了. 由于众所周知的原因,国内访问国外的某些网站会访问不了或者访问极慢,Docker的安装网站就在其中. 所以推荐使用阿里的镜像进行安装. 1.使 ...

  8. HarmonyOS如何使用异步并发能力进行开发

      一.并发概述 并发是指在同一时间段内,能够处理多个任务的能力.为了提升应用的响应速度与帧率,以及防止耗时任务对主线程的干扰,HarmonyOS系统提供了异步并发和多线程并发两种处理策略. ● 异步 ...

  9. HarmonyOS 3百机升级计划,来了!

    HarmonyOS 3规模升级来了! 为大家奉上百余款机型升级计划! 你的手机什么时候可以升级? 赶快下滑查看!

  10. mongodb基础整理篇————副本原理篇[外篇]

    前言 简单介绍一下副本集的原理篇. 正文 下面是几个基本的原理: 副本之间是如何复制的? mongodb 实现此功能的方式是保存操作日志,其中包含了主节点执行的每一次操作,这和mysql比较像. op ...