/**
 * 文件功能：fh公司前端基本样式类库
 * 程序作者：whb
 * 时间版本：V2024.10.25
 * 依赖项: 无
 * 注意事项：
     1.文本：大小推荐用 h1 风格控制（字间距： letter-spacing: 0.1rem;  行间距： lineheight2）
     2.图片：推荐用盒子尺寸+图片自适应方式布局（而不是直接定义图片尺寸）
     3.响应式：
        1) class="hidden-xs-only" （手机端隐藏，需要element支持）
        2) <el-card class="box-media">
     4.激活： :class="['text-xs mt-sm',(activeIndex==index)?'active':'']"
     5.置顶： class="fixed"
     6.垂直对齐： class="flex-center-vertical"
     7.模拟竖的分隔线： <div style="border-left:2px solid #fff; height: 40px;margin-left: 20px"></div>

# 关于尺寸设计的规范说明
    16:9比例：是全尺寸设计图的规范（建议：1920×1080像素）
        1）全尺寸符合人体工程学研究，与人的视野范围相符，适用于电视、显示器以及宽屏电视和横向图片，演示文稿和网站主页图片
        2）尺寸宽度: 墨刀： 1920*1680  swiper: 1920*500  谷歌浏览器模拟iPhone： 375 * 667  墨刀手机： 393*852 手机适配弹窗宽度：370px  company: 480*270
    4：3比例：是手机拍照的默认尺寸，并建议作为网站各模块的封面图片或缩略图片尺寸（从而提升工作效率）

编码规范：
    1）一般按从小到大顺序提供 xs,sm,md,lg 四种规格
    2）一般对于要求固定尺寸的元素使用px，比如1px线，4px的圆角边框， 而在字号、间距上使用rem）

# bootstrap-5种感情颜色备忘
    .muted：提示，使用浅灰色（#999）
    .primary：主要，使用蓝色（#337ab7）
    .success：成功，使用浅绿色(#5cb85c)
    .info：通知信息，使用浅蓝色（#5bc0de）
    .warning：警告，使用黄色（#f0ad4e）
    .danger：危险，使用褐色（#d9534f）

# box盒子布局知识：
    块级元素： display:block，会自动换行，会自动撑开父容器
        举例： DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL
            float：不再撑开父容器，而是上浮一层，然后可指定居左还是居右对齐。
            clear:both  清除2侧的浮动
            参考： http://www.divcss5.com/rumen/r424.shtml

    行内元素： display:inline（也叫内联元素，必须定义在当前元素上）设置width,height属性无效，margin和padding属性仅水平方向有效，垂直方向也无效。
        常见举例： SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR
    注：inline-block： 会将元素本身作为内联对象，而元素的内容作为块对象（宽高生效）

# 布局知识，
    static：    默认定位，没有太多实际意义，类似于relative（默认值）
    relative： 	相对定位，当父级想让子级根据自己的位置定位时使用，(如果相对于父级元素定位，使用top或left，如果相对于兄弟元素定位，用margin)
    absolute：  绝对定位，当子级想按父级定位时使用，若父级没定义position继续向上找，直到找到非static的position定义为止(absolute或relative均算)
    fixed：     原点定位，浏览器左上角为（0，0）原点，设置了top和left之后，即便是浏览器滚动条滚动，fixed也会固定不滚动

# 标签类基本知识
    标签的全局属性（:号） 比如：:hover{color:red}，所谓全局，是指使用的时候不用写class="hover"也会生效，是实现鼠标悬停效果切换的核心实现（也叫伪类）
    标签的普通属性（.号） 比如：.active{color:red}，需要在div标签里显式书写class="active", 否则不生效（实现激活/未激活效果切换的核心实现）
    标签的继承（空格）：  比如：div .hover{color:red}，必须在div的下级标签才生效, div自身设置class="hover"并不生效（div .hover .abc 则是3重继承）
    标签的并列(,号)：    比如：div,.hover{color:red} 等价于定义了2个标签
    标签子选择器（>号）： 比如：div>p，实现选取父元素是div的每个p元素

# 文本知识：
    自动截断： class="text-nowrap"

# 图片知识：
    fh规范美化： class="border-solid box-shadow"
    图片处理：
        fhlib: logo_img_url: require("@/assets/logo/logo.png"), //二维码图片内嵌logo
        默认1： <img :src="fhutil.getImgSrc(item.cover_img_url)" class="card-img">
        默认2： <image-preview :src="item.filekey" :width="smCalCols*40" :height="smCalCols*30"/>
    图片纯白： filter:brightness(100);
    图片反色： filter: invert(100%);
    图片黑白： filter: grayscale(60%);

    悬浮效果： .fh-xx:hover{}

    等比缩放： transform: scale(0.8);
    层半透明： background-color: rgba(0, 0, 0, 0.5);
    垂直分隔： <div style="height: 150px;border-right: 1px solid #ccc;margin-right: 50px"></div>

# 背景效果
    背景渐变： background:linear-gradient(180deg, #ac292a, #dc0000)"
    背景图片：
        background-image:url('../../../assets/images/bg_1.jpg'),url(bg_2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        注： cover/contain 是铺满效果 也可以直接定义图片尺寸： background-size: 120px 35px;


# 固定3列 + 动态行数 + 顶部对齐：
 <el-card class="box-card inline" style="width: 30%;margin-left: 3%;margin-bottom: 20px; vertical-align:top" v-for="type in typeRows">

# 经典横向表单布局
<el-form  :inline="true">
    <el-form-item label="频率）">
        <el-input v-model="cronSeconds"  type="number" oninput="if(value.length>11)value=value.slice(0,11)"></el-input>
    </el-form-item>
    <el-button  @click="resetCronTask" type="primary">确认设置</el-button>
</el-form>

# 经典三列布局（弹簧列）：
<div class="flex">
    <div>左对齐文字</div>
    <i class="spring"></i>
    <div>右对齐文字</div>
</div>
技巧：确保溢出不换行： class="text-nowrap" style="min-width: 120px"

# 经典三列布局（适合响应式）
<el-row>
    <el-col :sm="3">
        左
    </el-col>
    <el-col :sm="18" class="align-center">
        中
    </el-col>
    <el-col :sm="3" class="align-right">
        右
    </el-col>
</el-row>


# 经典三列布局（等宽）（grid网格）(节点少性能高)：
<div class="box-three-cols">
    <div>左</div>
    <div>中</div>
    <div>右</div>
</div>


# 经典”左侧图标+右侧标题描述”布局
<div class="flex ml-xs">
    <img :src="user.avatar" class="img-sm img-radis"/>
    <div class="box-left ml-xs">
        <div class="">username-xxx</div>
        <div class="text-xs text-gray">有效期-xxx</div>
    </div>
</div>

# 经典父子二级分类分组
    <div  style="display:inline-block; width:25%;padding:20px;vertical-align:top"  v-for="item in tagGroupArr">
        <div class="card-title"><i class="el-icon-s-data"/> {{item.dict_name}}</div>
        <div class="mt-xs">
            <div class="inline hand pd-xs" v-for="tag in item.items">
                <el-tag type="info" @click="goPage('search',{'search_type':'tzlk','keywords':tag},'_blank')">{{tag}}</el-tag>
            </div>
        </div>
    </div>


# 阴影卡片：
<el-card class="">
    <div slot="header" class="card-title">
        交易体系
    </div>
    <div class="pd-sm">
        <li class="pd-xs" v-for="item in 4">
            {{'列表内容 ' + item }}
        </li>
    </div>
</el-card>

# 图文卡片
<el-card class="center">
        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="card-img">
        <div class="pd-sm">
            <div class="card-title text-maxline2">
                培训服务培训服务培训服务培训服务培训服务培训服务培训服务培训服务培训服务培训服务
            </div>
            <el-button type="info" class="card-btn">立即学习</el-button>
        </div>
</el-card>

# 层叠加（z-index=1表示是上层）（例如：搜索表单input+btn）：
<div style="position:relative;height: 160px">
  <div style="position:absolute;left:0;top:0"></div>
  <div style="position:absolute;left:0;top:0;z-index:1"></div>
</div>
    附录： 左侧角标的实现
        <el-badge :value="item.hysj_type" style="left: -110px; margin-bottom: -10px">
        </el-badge>
        <img :src="fhutil.getImgSrc(item.cover_img_url)" class="card-img mt-sm-minus">


# 水平宽度溢出 + 左右箭头滚动
代码：
    <div class="flex-center mt-sm">
        <el-button class="scroll-btn el-icon-caret-left" @click="scrollLeft" />

        <!-- 滚动区域 -->
        <el-scrollbar ref="scrollbar">
            <!--whb: 此处宽度是控制内容是否多行显示的关键（只有足够大才能确保一行-->
            <div style="width: 1800px;">
                <ProCardTscCom :item=item v-for="item in bigRows" class="box-inline  mg-sm-lr"/>
            </div>
        </el-scrollbar>

        <el-button class="scroll-btn el-icon-caret-right" @click="scrollRight" />
    </div>

脚本：
    scrollLeft() {
        this.$refs.scrollbar.wrap.scrollLeft -= 100; // 每次滚动100px
    },
    scrollRight() {
        this.$refs.scrollbar.wrap.scrollLeft += 100; // 每次滚动100px
    },
 **/
/****************************** whb: 定义网站不同主题色 *****************************/

/*whbtheme: theme-xxx 是实现pc前端手动切换主题的关键 （theme-xxx值  在App.vue 的app.class中指定， --theme-color 值本身也可在 fhpc-project.scss 覆写*/
/* 政府深蓝色: #195482; bootstrap: #337ab7 elment: #409eff;  */
/*:root {
    --tip-color: #ee801a;
}*/
/*whb:表单必填项样式*/
/*.required:before {
    content: '* ';
    color: black;
    margin-left: -5px;
}*/
/*whb: 定义表单组件提示文本：用法举例： <span class="tip">xx</p> (1：必须紧跟input定义 2： p才支持上下间距) 0.875=16px 0.75=12px(适配element)*/
.tip {
    /*
    margin-left: 1rem;
    margin-bottom: 0.2rem;
     margin-top: 0.1rem;
    */
    color: #ee801a;
    font-size: 0.75rem;
}

.box-debug {
    background-color: #28af94;
    /*width: 1200px;
    height: 100px;*/
}

/*whb: 强制添加前缀，很多动态变量场景体验较差，故不再推荐*/
/*.tip:before {
    content: "提示： "
}*/
/****************************** whb: 定义网站不同主题色 *****************************/
/*whb: 对于简单网站可直接修改 fh-project.scss中的 theme-primary 中的 --theme-color*/
/*如果想让前台用户自己换肤： document.documentElement.style.setProperty('--theme-color','#337ab7')*/
.theme-blue {
    --theme-color: #337ab7; /*天空蓝*/
}

.theme-blue-dark {
    --theme-color: #335588; /*政深蓝*/
}

.theme-red {
    /*--theme-color: #bd1b1c;*/
    --theme-color: #D70F0A; /*中国红*/
}

.theme-green {
    --theme-color: #00A096; /*国网绿*/
}

.theme-orange {
    --theme-color: #ee801a; /*果粒橙*/
}

.theme-brown {
    --theme-color: #aa091e; /*富贵棕*/
}

.theme-grey {
    --theme-color: #666666; /*悲痛灰*/
}

/*whb:主题换肤的关键实现*/
.theme-grey div {
    filter: grayscale(60%);
    -webkit-filter: grayscale(60%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.text-primary {
    color: var(--theme-color);
}

/*whb: 定义一个超级连接样式 （<a class='link-type' />）*/
.link-type, .link-type:focus {
    color: var(--theme-color);
    cursor: pointer;
}

.bg-white {
    background-color: #fff;
}

.bg-black {
    background-color: #000;
}

.bg-dark {
    background-color: #ccc;
}

/*whb:此处使用element组件默认gray背景*/
.bg-gray {
    background-color: #f5f5f5;
}

.bg-primary {
    background-color: var(--theme-color);
}

.bg-success, .bg-green {
    background-color: #28af94;
}

.bg-danger, .bg-red {
    background-color: #bd1b1c;
}

.bg-transparent {
    background-color: transparent;
}

.bg-primary-transparent {
    background-color: var(--theme-color);
    opacity: 0.5;
}

.opacity-50 {
    background-color: rgba(255, 0, 0, 0.1);
}

.transparent {
    background: transparent;
}

/****************************** whb: 定义 半透明遮罩样式 *****************************/
/*用法示例：
<div  :class="isOvering?'box-mask':''">
    <img :src="item.cover_img_url" class="card-img">
</div>*/
.box-mask {
    position: relative;
    display: inline-block; /* 或其他适合的布局方式 */
}

.box-mask::after {
    content: ''; /*确保它占据元素的空间*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩层 */
    opacity: 0.6; /* 可以调整透明度 */
}

.box-mask img {
    display: block; /* 防止图片下方出现空隙，不可或缺 */
}

/****************************** whb: 定义 fhbasic.reset *****************************/
/*whb:确保宽高计算包含边框，否则 padding 会出问题*/
* {
    box-sizing: border-box;
}

/*whbdebug：定义cssdebug调试模式（让所有层显示一个绿色边框）（建议在fh-project.css中控制显隐）*/
/*div{outline: 1px solid #4cae4c;}*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /*html,body必须同时设置height:100%，才能确保内部div的height:100%能够生效; */
    font-size: 16px; /*18px对2rem缩进支持最好，现代浏览器的默认字体高都是16px，1em=16px那么12px=0.75em*/
    font-family: "微软雅黑";
    color: #303133;
    /*whb:contain模式不变形且能显示完整，但不铺满，改为内部控制*/
    /* background-size: contain;*/
    /*whb:100%模式会通过拉伸变形铺满，适用一般场景(fit:fill，cover都会有因变形而显示不全的问题，故不推荐)*/
    background-size: 100% 100%;
    background-position: center center;
    background-attachment: fixed; /*whb:确保背景图片不滚动*/
    background-repeat: no-repeat; /*whb:确保背景图片不重复显示*/

    scroll-behavior: smooth; /* whb:平滑滚动*/
}

/* whb: 背景样式需要应用在 body 上，不能应用在全部 html元素上*/
body {
    background-color: #fff;
    /*whb:所有页面只需要垂直滚动*/
    overflow-x: hidden;
    overflow-y: auto; /* hidden: 固定隐藏 scroll： 固定显示; auto:按需显示*/
    /* whb: 推荐此用法,bg_2.jpg会处于下层）*/
    /*background-image:url(bg_1.jpg),url(bg_2.jpg);*/
    /*background-repeat: no-repeat;*/
}

/*whb:确保元素在手机分辨率也不越界（比如tinymce插入）*/
img, video, audio {
    max-width: 100%;
}

/*whb: 定义超链样式*/
a {
    color: #303133;
}

a:hover {
    color: var(--theme-color);
}

/*whb: 定义一个默认的蓝色超链样式*/
.default a {
    color: #337ab7;
}

.default a:hover {
    color: #337ab7;
}

/* 定义链接和按钮的标准样式（手型+下划线） */
a, button {
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 去除连接下划线 */
:active, :focus, :link, :visited, :hover {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* 去除列表默认的前缀默认编号样式 */
/*ul, li {
    list-style: none;
}*/
/*whb:解决textarea 空格+换行不能正常显示的问题 和 pre超长不自动换行显示的问题*/
pre {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* whb: 去除默认边框*/
/*
<iframe :src="fileArr[0].filekey" width="100%" height="600" scrolling="no" frameborder="0" />
*/
iframe {
    border: 0;
}

/* whb: 清除两侧的浮动*/
.clear {
    clear: both;
}

/****************************** whb: img,video 等多媒体适配样式 *****************************/
/*whb:定义图片（多媒体）宽度不越界，高度自适应【不推荐，改用object-fit方案控制】 */
/*
max-width: 表示宽度由外层容器自己决定，而内部img不会越界，不可或缺，否则高德地图无法兼容
auto：     1)如果外部容器没有指定高度，那么高度由img自己决定（即完全显示，所以会自动撑开外部容器） 2）如果外部容器指定了高度，则超高会自动截除
*/
/*img, embed, object, audio, video {
    max-width: 100%;
    height: auto;
}
*/
/* object-fit参考教程：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
/*
fill	默认值，通过拉伸填满 （推荐1：能够容忍变形填满）（原始大图会变小，原始小图会变大）
cover	保持比例填满但会裁切      （推荐2：能够容忍边缘部分被裁切）
contain	确保显示完整（不保证填满，故不推荐）
none	保留原有元素内容，也不会缩放，只能显示部分，故不推荐
scale-down	保持原有尺寸比例（无法保证填满，故不推荐）
注： max-height: 100%; 不可或缺，否则当为div设置高度时也会溢出
*/
.fit-fill {
    object-fit: fill;
    width: 100%;
    /*max-height: 100%;*/
    height: 100%;
}

.fit-full {
    width: 100%;
    height: 100%;
}

.fit-cover {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.fit-contain {
    object-fit: contain;
    width: 100%;
    max-height: 100%;
}

/****************************** whb: 定义常用样式 *****************************/
/*whb:手型*/
.hand, .pointer {
    cursor: pointer;
}

.scroll-x {
    overflow-x: auto;
}

.scroll-y {
    overflow-y: auto;
}

/*whb:定义左右溢出时的滚动控制按钮样式（百度关键字： elementui 左右箭头滚动）*/
.scroll-btn {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 0px !important;
}

.hidden-x {
    overflow-x: hidden;
}

.hidden-y {
    overflow-y: hidden;
}

/*whb: 定义一个鼠标悬浮时显式一个层的特效（比js脚本的mouseover+mouseleave体验更好）*/
/*whb：特别注意：此处不要直接定义hide（跟ry图片上传组件样式冲突，故废弃）*/
.box-hide {
    display: none;
}

.box-mouseover:hover .box-hide {
    display: block;
}

/*whb:实线边框（更加美观）*/
.border-solid, .box-border {
    /* cursor: pointer;*/
    /*border-radius: 5px;*/
    /*padding: 6px;*/
    border: 1px solid #ddd;
}

/*whb:圆角矩形*/
.box-round, .border-round, .round {
    border-radius: 1rem;
}

/*whb:绝对定位（不随滚动条滚动）（el-col内部元素同样适用）*/
.box-fixed, .fixed {
    position: fixed;
    z-index: 999 !important;
}

/*whb:fh规范：z999表示最顶层*/
/*此句不可或缺，否则通过z-index实现遮挡效果可能会失效*/
.box-z999 {
    z-index: 999 !important;
    /*position: absolute;*/
}

/*whb:定义1个专用于模拟垂直分割线的盒子样式*/
.box-border-split {
    height: 100%;
    border-left: 1px solid #ccc;
}

/*whb:定义2个专用于按钮旁边的边框特效（注意是div而不是input）（比如：系统公告）*/
.box-border-right {
    padding: 8.5px; /*8.5px正好适配按钮高度*/
    border: 1px solid #ddd;
    margin-left: -2px;
}

/*whb:底部虚线边框（更加美观）*/
.border-dashed {
    border-bottom: 1px dashed #ddd;
}

/* whb: 利用 relative + absolute 实现一个父子图层叠加效果 */
.box-cover {
    position: relative;
}

.box-cover .cover-title {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 991;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
}

/****************************** whb:定义文本样式 *****************************/
/*whb: 超长不换行，自动截断并显示...3个点字符(3句缺一不可)(如果不生效则需要定制化追加scss样式： width: calc(#{$fixed-width}/6)*/
/*whb:  -webkit-line-clamp 有兼容性问题，会被 postCSS插件去除，通过 autoprefixer 规避 */
.text-maxline1, .text-nowrap, .text-overhidden {
    overflow: hidden; /* 隐藏溢出容器的文本 */
    white-space: nowrap; /* 文本不会换行，直到遇到 <br> 标签为止 */
    text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
}

/*文本最多显示2行（必须独立定义，不能跟其他class共同使用，否则可能不生效）*/
.text-maxline2 {
    display: -webkit-box;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/*文本最多显示2行*/
.text-maxline3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.text-maxline5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/*文本中间划线（比如原价）*/
.text-through {
    text-decoration: line-through;
}

.text-shadow {
    text-shadow: 5px 5px 5px #333;
    /*text-shadow:  5px 5px 5px #000;*/
}

.text-title {
    font-size: 1rem;
    font-weight: bold;
}

/*whb:追加几个文本样式*/
.text-strong, .text-bold, .strong, .bold {
    font-weight: bold; /*bolad 等价于700*/
}

.text-gray, .text-grey {
    color: #999;
}

.text-dark {
    color: #666;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}

.text-green, .text-success {
    color: #4cae4c;
}

.text-blue {
    /*color:#3179cb;*/
    color: #428bca;
}

.text-red, .text-danger {
    color: #bd1b1c;
}

.text-yellow, .text-warning {
    color: #dcd63c;
}

/*whb:单独定义一个适配 echart 组件的标题*/
.title-echart {
    /*color: inherit;*/
    /* color: var(--theme-color);*/
    color: #0F91D0;
    font-size: 1.045rem;
    /*    font-weight: 549;*/
    margin-bottom: 1rem;
}

/*whb: 定义一个特殊的金钱样式*/
.text-money {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ef8008;
}

.text-money:before {
    content: '￥';
    font-size: 0.875rem;
}

/*whb:定义一个“更多”样式*/
.text-more {
    color: var(--theme-color);
    font-size: 0.875rem;
    font-weight: normal;
    cursor: pointer;
}

/*whb: 很多时候利用 h 标签并不好用，所以此处也定义4个常用文本大小样式*/
.text-xs {
    font-size: 0.875rem;
    /*font-size: 0.75rem;*/
}

.text-sm {
    font-size: 1rem;
}

.text-md {
    font-size: 1.25rem;
}

.text-lg {
    font-size: 3rem;
}

/****************************** whb: 常用层样式 *****************************/
/*whb:定义全局头、身、脚结构*/
/*whb: header头固定了高度5rem，内部div必须用高100%，从而完成正常排版*/
.box-header {
    display: flex; /*不可或缺，否则内部元素会自动换行*/
    position: fixed; /*whb: 注意fixed是固定x,y，所以可能会遮挡紧跟的，没有便宜量的body元素*/
    z-index: 990;
    top: 0px;
    width: 100%;
}

.box-body {
    width: 100%;
    height: 100%; /* whb:必须设定，否则会影响flex.box-center 绝对居中效果*/
    /*min-height: 55rem;*/ /*whb:防止body内容太少时footer太靠上*/
    overflow-x: hidden;
    overflow-y: hidden;

    padding-top: 3.7rem; /* whb:空出顶部已经fixed的box-header，否则会被遮挡(margin-top会出滚动条，故弃用)*/

    padding-left: 0rem;
    padding-right: 0rem;
    /* padding-bottom: 1rem;*/ /*whb：底部暂时不留边*/

    /*margin-top: 3rem;*/
    /* margin-top: 1.2rem;*/
    /*padding: 4rem 4rem;*/ /* whb:空出上下的header和footer ，一般在 App.vue 或 rfproduct.css里重写*/
}

/*whb:定义底部版权（需要同步滚动，所以不再使用fixed）*/
.box-footer {
    /*    position: fixed;*/
    /*border: 1px solid #ccc;*/
    background-color: #f5f5f5;
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding: 0.75rem;
    font-size: 12px;
}

/*whb:定义底部版权（固定位置）*/
.box-footer-fixed {
    position: fixed;
    bottom: 0px;
    z-index: 990;
}

/*whb:定义主标题样式（为了更广泛的通用性，此处不要固定flex排版）*/
.box-title {
    /*display: flex;*/
    height: 3rem;
    line-height: 3rem;
    padding: 0 0.5rem;
    border: 1px solid #ccc;
    color: var(--theme-color);
    font-weight: bold;
    background-color: #f5f5f5;
}

.box-title-reverse {
    /* display: flex;*/
    height: 3rem;
    line-height: 3rem;
    padding: 0 0.5rem;
    border: 1px solid #ccc;
    color: #fff;
    background-color: var(--theme-color);
}

/*
box-title 的一个例子：
 <div class="box-title">
            <div>
              <span class="bold"><i class="el-icon-office-building"></i>  公司简介</span>
            </div>
            <i class="spring"/>
            <div>
              <el-button class="pd-xs" type="primary" @click="rfui.goPage('company_detail')"> 更多 <i class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </div>
*/

/****************************** whb: 定义图片样式 *****************************/
.img-xs {
    width: 1rem;
    height: 1rem;
    object-fit: cover;
}

.img-sm {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}

.img-md {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
}

.img-lg {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
}

.img-card {
    width: 100%;
    height: 160px;
    object-fit: cover; /* 保持原有尺寸比例缩放并填满，多余的内容会进行裁切（推荐）（原始大图会变小，体验还好，原始小图会变大，从而裁切后可能不全）*/
}

/*whb:定义圆形*/
.img-radis, .border-radius, .box-radius {
    border-radius: 50%;
}

/*whb:定义一个正方形实块*/
.box-square {
    height: 1rem;
    width: 1rem;
    line-height: 3rem;
    background-color: var(--theme-color);
    margin-top: 1rem;
    margin-right: 1rem;
}

/*whb: 定义验证码图片样式*/
.box-imgcode > img {
    height: 38px;
    cursor: pointer;

}

/*whb:定义图标后紧跟文本且能够垂直居中的样式
举例：
<div class="box-icon"> <img src="xx.png" /><span class="pd-xs-lr"> 新浪微博 </span></div>
*/
.box-icon {
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
    padding: 0.5rem;
}

.box-icon > img {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: fill; /*保持比例缩放后再填满 （推荐2：能够容忍边缘部分被裁切）*/
}

/*定义一个头像样式（需要直接用在img标签上）*/
.box-avatar, .img-avatar, .avatar {
    width: 100px;
    height: 100px;
    object-fit: cover; /*保持比例缩放后再填满 （推荐2：能够容忍边缘部分被裁切）*/
}

/*whb:css3图片特效*****************************************************/
/** 图片经过放大特效(使用时要定义在img上一层div) **/
.box-scale img {
    cursor: pointer;
    transition: all 200ms;
}

.box-scale img:hover {
    transform: scale(1.02);
}

/** 图片经过阴影特效(使用时要定义在img上一层div) **/
.box-shadow {
    transition: all 200ms ease-out;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
}

.box-shadow:hover {
    transform: translate(-1px);
    box-shadow: 10px 15px 15px rgba(0, 0, 0, 0.5) !important;
}

/** 图片经过闪光特效(使用时要定义在img上一层div)（因为尺寸越界，所以会有一些特效副作用） **/
.box-flash:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg, transparent 30%, transparent, rgba(255, 255, 255, 0.5), transparent 50%) no-repeat;
    background-size: 150% 180%;
    background-position: 150% 180%;
}

.box-flash:hover:before {
    cursor: pointer;
    transition: background-position 1s;
    background-position: -100% -100%;
}

/*whb: 定义”等宽“的N列显示（网格布局最容易）*/
.box-two-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(2, 1fr);
}

.box-three-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(3, 1fr);
}

.box-four-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(4, 1fr);
}

.box-five-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(5, 1fr);
}

.box-six-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(6, 1fr);
}

.box-eight-cols {
    display: grid; /* 设置容器为网格布局 */
    grid-template-columns: repeat(8, 1fr);
}

/****************************** whb: flex弹簧布局（非栅格化） *****************************/
/*.box-body {
    width: 100%;
    height: 100%; !* whb:必须设定，否则会影响flex.box-center 绝对居中效果*!
    overflow-x: hidden;
    !* whb:此处空出顶部导航菜单高度*!
    padding-top: 3rem;
    !* whb:平滑滚动*!
    scroll-behavior: smooth;
    !* margin-top: 1.2rem;*!
    !*padding: 4rem 4rem;*! !* whb:空出上下的header和footer ，一般在 App.vue 或 rfproduct.css里重写*!
}*/
/* whb: flex 布局技巧（非栅格化）
居中对齐： <div class="flex-center">content</div>
左对齐：   <div>content</div>
右对齐：   <i class="spring"/><div>content</div>
两端对齐： <div>left</div><i class="spring"/><div>right</div>
*/

.flex {
    display: flex;
    display: -webkit-flex;
    height: 100%;
}

/* 1）确保在宽度溢出时仍能自动换行（注意不要直接定义在上面的flex里面） 2）对于默认width=100%(比如el-input)，则会直接造成换行*/
.flex-wrap {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

/*弹簧撑开(.s 是为了精简代码量，可以理解成语法糖)*/
.s, .spring, .flex-spring {
    display: flex;
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

/*whb:定义块样式（盒子模型），跟flex相对应*/
.box-block > div, .block > div {
    display: block;
}

/*whb:定义行内样式（应用该样式的层内元素全部水平排列）*/
/*注：如果想让层自身水平排列，那么统一在层自身上使用： style="display: inline-block" */
.box-inline > div, .inline > div {
    display: inline-block;
}

/****************************** whb: 定义对齐方式(flex和box两种模型分开定义) *****************************/

/*whb:定义绝对居中容器（水平+居中）*/
/*特别注意：如果有父层，那么必须设定父层的 h-p100，否则仍然只能水平居中 */
.flex-center {
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
    height: 100%; /*不可或缺，否则只能水平居中*/
}

/*垂直居中*/
.flex-center-vertical {
    display: flex;
    align-items: center;
}

/*水平居中*/
.flex-center-horizon {
    display: flex;
    justify-content: center;
}

/*顶部对齐*/
.flex-top {
    display: flex;
    align-items: baseline;
}

/*底部对齐*/
.flex-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*左对齐*/
.flex-left {
    display: flex;
    justify-content: flex-start;
}

/*右对齐*/
.flex-right {
    display: flex;
    justify-content: flex-end;
}

/*两端对齐*/
.flex-between {
    display: flex;
    justify-content: space-between;
}

/****************************** whb: 定义对齐方式(box布局方式) *****************************/
/*
1) text-align 只适用于block块级元素，并不支持flex和inline，有兼容性问题
2) .box-center 可能会误中关键字
*/
/*whb:水平+垂直绝对居中(一般用于dialog或notice效果)*/
.box-center-abs {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

/*whb:  层自身或块级元素水平居中用 margin: 0 auto; 层内元素或内联元素水平居中用 text-align */
/*特别注意： <center>标签因为兼容性不够已经被H5规范废弃，故不要再用*/
.block-center {
    margin: 0 auto;
}
.box-center, .align-center, .center {
    text-align: center;
}
/*whb:注意此处不要用 inline-block,否则可能会导致文本水平溢出问题*/
.box-left, .align-left, .left {
    display: block;
    text-align: left;
}

.box-right, .align-right, .right {
    display: block;
    text-align: right;
}

.align-top {
    vertical-align: top;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}

/****************************** whb: 常用布局控制 *****************************/
/*whb:定义全尺寸容器*/
/*.fh-fullsize, .fh-container, .wh-p100, .hw-p100 {*/
.hw-p100, .wh-p100 {
    height: 100%;
    width: 100%;
}

.h-sm {
    height: 2rem;
}

.h-md {
    height: 5rem;
}

.h-lg {
    height: 10rem;
}

.h-p20 {
    height: 20%;
}

.h-p25 {
    height: 25%;
}

.h-p33 {
    height: 33%;
}

.h-p80 {
    height: 80%;
}

.h-p90 {
    height: 90%;
}

.h-p100 {
    height: 90%;
}

/*whb:每行显示6个*/
.w-p16 {
    width: 16.66%;
}

/*whb:每行显示5个*/
.w-p20 {
    width: 20%;
}

/*whb:每行显示4个*/
.w-p25 {
    width: 25%;
}

/*whb:每行显示3个*/
.w-p33 {
    width: 33.33%;
}

/*whb:每行显示2个*/
.w-p50 {
    width: 50%;
}

.w-p66 {
    width: 66.66%;
}

.w-p85 {
    width: 85%;
}

.w-p90 {
    width: 90%;
}

.w-p98 {
    width: 98%;
}

.w-p100 {
    width: 100%;
}

/****************************** whb: 常用间距控制 *****************************/
/* whb: 统一设置字符间距（默认间距字太紧凑）(可在fh-project中覆写)*/
a, p, pre, div, li {
    letter-spacing: 0.05rem;
}

/*whb:字间距控制*/
.space-sm {
    letter-spacing: 0.1rem;
}

/*whb:行高控制（行间距）*/
.lineheight2 {
    line-height: 2rem;
}

/*whb: 段落首行缩进*/
.indent {
    text-indent: 2rem;
    line-height: 2rem;
}

.mg-xs {
    margin: 0.5rem;
}

.mg-sm {
    margin: 1rem;
}

.mg-md {
    margin: 5rem;
}

.mt-xs-minus {
    margin-top: -0.5rem;
}

.mt-sm-minus {
    margin-top: -1rem;
}

.mt-md-minus {
    margin-top: -5rem;
}

.mb-sm-minus {
    margin-bottom: -1rem;
}

.mb-md-minus {
    margin-bottom: -2rem;
}

.ml-sm-minus {
    margin-left: -1rem;
}

.ml-md-minus {
    margin-left: -5rem;
}

.ml-lg-minus {
    margin-left: -10rem;
}

.mt-xs {
    margin-top: 0.5rem;
}

.mr-xs {
    margin-right: 0.5rem;
}

.mr-sm {
    margin-right: 1rem;
}

.mt-sm {
    margin-top: 1rem;
}

.mt-md {
    margin-top: 3rem;
}

.mt-lg {
    margin-top: 6rem;
}

.mb-xs {
    margin-bottom: 0.5rem;
}

/*whb:此处故意设计车给你1.5rem，方便表单的rule正常显示*/
.mb-sm {
    margin-bottom: 1.5rem;
}

.mb-md {
    margin-bottom: 3rem;
}

.mg-xs-lr {
    margin: 0 0.5rem;
}

.mg-sm-lr {
    margin: 0 1rem;
}

.ml-xs {
    margin-left: 0.5rem;
}
.ml-sm {
    margin-left: 1rem;
}

.ml-md {
    margin-left: 2rem;
}

.pd-0 {
    padding: 0rem;
}

.pd-xs {
    padding: 0.5rem;
}

.pd-sm {
    /*padding: 0.8rem;*/
    padding: 20px; /*跟el-card-header等同左右边距*/
}

.pd-xs-lr {
    padding: 0 0.5rem;
}

.pd-sm-lr {
    /* padding: 0 1rem;*/
    padding: 0px 20px; /*跟el-card-header等同左右边距*/
}

.pd-md-lr {
    padding: 0 3rem;
}

.pd-md {
    padding: 3rem;
}

.pd-lg {
    padding: 6rem;
}

/*whb:跟mt-sm比：不影响背景颜色的效果*/
.pt-sm {
    padding-top: 1rem;
}

.pb-sm {
    padding-bottom: 1rem;
}

/****************************** whb: 定义2个常用的ul列表样式 *****************************/
.fh-active {
    color: #fff;
    background-color: var(--theme-color);
}

/*whb: "水平排列 + hover + active"按钮效果的ul样式*/
.ul-btn {
    display: flex;
}

.ul-btn li {
    cursor: pointer;
    padding: 0.6rem 1rem;
    margin-right: 1rem;
    border-radius: 5rem;
    border: 0px solid #f0f0f0;
    background-color: #f0f0f0;
}

.ul-btn li:hover {
    color: var(--theme-color);
}

.ul-btn li.active {
    color: #fff;
    background-color: var(--theme-color);
}

/*whb: "垂直排列"下拉框效果的ul样式 (跟element下拉框样式风格保持一致)*/
.ul-sel {
    padding: 0px 0px;
}

.ul-sel li {
    font-size: 14px;
    padding: 0 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.ul-sel li:hover {
    background-color: #F6F7FB;
}

/* whb: vue 激活代码备忘（activeIndex 是 data页面变量）
<li @click="onChangeType(1)" :class="tsc_type==1?'active':''">
<li @click="onChangeTscType(2)" :class="tsc_type==2?'active':''">
或：
<div :class="['c1 hand',(activeIndex==index)?'active':'']"  @click="onChangeType(item,index)"  v-for="(item,index) in xxArr" >
*/

.ul-sel li.active {
    background-color: #F6F7FB;
}

/****************************** whb: media媒体查询(完成 pc/mobile 适配) *****************************/
/* pc电脑版适配 */
@media (min-width: 768px) {
    .box-media {
        width: 50%;

        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
    }

    .pd-md-media {
        padding: 1rem 2rem 2rem 2rem;
    }

}

/* mobile手机版适配 */
@media (max-width: 768px) {
    .box-media {
        width: 90%;

        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
    }

    .pd-md-media {
        padding: 0.5rem 1rem 1rem 1rem;
    }
}