自定义的全局公共样式

/* by zuoluo 2021-08-06 ========================================================================== */

/* 全局padding、border、margin、font设置 */

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
address,
em,
img,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
i,
b,
s {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: Helvetica, Arial;
    word-break: break-all;
}


body {
    word-wrap: break-word;
    font-size: 14px;
    color: #000;
    line-height: 1.5;
    font-family: Helvetica
}

html, body, #app {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.font-yahei {
    font-family: "微软雅黑";
}

/* 输入框 */

textarea,
input {
    background: none;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* 无外框 */
textarea:focus,
input:focus,
button:focus {
    outline: none
}

/* 清除ie浏览器input自带的icon */
::-ms-clear,::-ms-reveal{
  display: none;
}

/* input标签聚焦不出现默认边框: */
input{
  border: none;
  appearance:none;
  -moz-appearance:none;
  outline:none;
  -webkit-appearance: none;
}

/* 共用样式 */
/* 行或块状元素 */

.inline{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.block {
    display: block;
}

/* 背景图全部填充 */
/* 结合背景图一起使用 background: url("~@/assets/images/globalMonitor/sideItem-devide-bg.png") no-repeat center; */
.bg-size-fill {
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}

/* 鼠标hover指针变化 */
.point-hover {
    cursor: pointer;
}

/* 基础字体 */
.basic-txt {
    font-size: 16px;
    color: #ccf2ff;
}

/* 基础字体-亮色 */
.basic-txt-light {
    color: #00eaff;
    font-size: 16px;
}

/* 左右侧浮动*/
.fl{
    float: left;
}
.fr {
    float: right;
}

/* 文本水平居中*/
.tl {
  text-align: left;
}
.tc {
  text-align: center
}
.tr {
  text-align: right;
}

/* 基础字体-小 ，可设置小于12px*/
small {
    font-size: 80%;
}

/* 基础字体-上下标 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}

/*去掉列表前面的小点*/
ul,
ol,
li {
    list-style: none
}

/*图片没有边框 去掉图片底侧的空白缝隙*/

img {
    border: 0;/*ie6*/
    vertical-align: middle;
}

/*让button 按钮 变成小手*/

button {
    cursor: pointer;
}

/*链接的下划线*/

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #00ffff;
    cursor: pointer;
}

/* 使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写 */
a:hover, a:visited, a:link, a:active {

}

/*隐藏*/

.hide,
.none {
    display: none;
}

/*使用after伪元素清除浮动*/

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: " ";
    height: 0;
}

.clearfix {
    *zoom: 1;
}

/*IE6,7*/

/*使用双伪元素清楚浮动*/

.clearfix:bofore,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* 文字超出范围使用省略号 */

.txt-overflow-llipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-word;
}

/*多行溢出(超出省略)*/

.text-two-dot {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/*渐变色背景*/
.gradient-bg-toright {
  background-image: linear-gradient(to right, rgba(0,234,255,.3) , #00eaff);
}


/*常用flex布局*/
.flex_dom {
    display: flex !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
}
.flex_column{flex-direction: column;-webkit-flex-direction: column;}
.flex_item_between{justify-content: space-between;-webkit-justify-content: space-between;}
.flex_item_center{ justify-content:center;-webkit-justify-content:center;}
.flex_item_around{justify-content: space-around;-webkit-justify-content: space-around;}
.flex_item_mid{align-items:center;-webkit-align-items: center;}
.flex_item_stretch{align-items: stretch;-webkit-align-items: stretch;}
.flex_wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;}

/* 图片图标反转 */
.transformX{
  -moz-transform:scaleX(-1);
  -webkit-transform:scaleX(-1);
  -o-transform:scaleX(-1);
  transform:scaleX(-1);
}

/*字体和背景颜色库*/

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

.bg-f1 {
    background-color: #f1f1f1;
}

.bg-f7 {
    background-color: #F7F7F7;
}

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

.bg-333 {
    background-color: #333333;
}

.bg-ddd {
    background-color: #DDDDDD;
}

.bg-666 {
    background-color: #666666;
}

.bg-999 {
    background-color: #999999;
}

.bg-eee {
    background-color: #EEEEEE;
}

.bg-f5 {
    background-color: #f5f5f5;
}

.bg-red {
    background-color: #FF0000;
}

.bg-orange {
    background-color: #ffa127;
}

.bg-yellow {
    background-color: #f5bc24;
}

.bg-green {
    background-color: #008000;
}

.bg-lightgreen {
    background-color: #90EE90;
}

.bg-blue {
    background-color: #0a669b;
}

.bg-purple {
    background-color: #800080;
}

.bg-mengban {
    background-color: rgba(68, 68, 68, 0.6);
}

/**********阴影色***********/

.shadow_fff {
    box-shadow: 0px 2px 3px #fff;
}

.shadow_f1 {
    box-shadow: 0px 2px 3px #f1f1f1;
}

.shadow_f7 {
    box-shadow: 0px 2px 3px #f7f7f7;
}

.shadow_000 {
    box-shadow: 0px 2px 3px #000;
}

.shadow_333 {
    box-shadow: 0px 2px 3px #333;
}

.shadow_ddd {
    box-shadow: 0px 2px 3px #ddd;
}

.shadow_666 {
    box-shadow: 0px 2px 3px #666;
}

.shadow_999 {
    box-shadow: 0px 2px 3px #999;
}

.shadow_red {
    box-shadow: 0px 2px 3px #FF0000;
}

.shadow_orange {
    box-shadow: 0px 2px 3px #f8b03f;
}

.shadow_yellow {
    box-shadow: 0px 2px 3px #f5bc24;
}

.shadow_green {
    box-shadow: 0px 2px 3px #008000;
}

.shadow_lightgreen {
    box-shadow: 0px 2px 3px #90EE90;
}

.shadow_purple {
    box-shadow: 0px 2px 3px #800080;
}

.shadow_orange {
    box-shadow: 0px 2px 3px #f8b03f;
}