/* ! 改样式表为项目的公共样式表 这个样式表写整个项目中需要公共使用的样式
   !该样式表在工作中 除了项目组组长 其他人不允许修改 或者组员申请修改经过同意后
   !可以修改

 1可以在main引入 import './style/common.css'
 2也可以在app.vue用css import url('./xx.css')
*/

/*
 使用怪异盒模型，可以让浏览器认为我们的元素是盒子，而不是矩形内容宽高。
 例子使用场景：你修改一个input它的高是42px，它有上下1px边框，如果是标准盒模型，你设置高为42px，则盒子大小为44px,因为标准盒模型设置的宽高是内容高不包括内边距、边框
            怪异盒模型设置的宽高是内容高包括内边距、边框，你可以直接设置高为42px，盒子高包含了内容、内边距、边框，
*/
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* ~ %相对于父级所以body html也要设置，尽量不混用 % vh vw ，容易产生未知错误 */
html,
body,
#app {
  width: 100%;
  height: 100%; 
  background-image: linear-gradient(to top, #FFE6FA 65%, #2580B3 100%);
  background-attachment: fixed;
  /* background-color: #54befc; */
  font-size: 13px;
  /* font-family: '思源黑体 Normal', 'Microsoft YaHei', '黑体';  */
  /* font-family: "LXGW WenKai Mono Light"; */
  font-family: "LXGW WenKai";
  font-weight: normal; 

}

/* 版心*/
.w {
  width: 1214px;
  margin: 0 auto;
} 


a {
  cursor: pointer;
}


/* //阿里巴巴图标库必需的css */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


:root {
  /* 蓝色边框颜色 */
  --border-line: #54befc;
  /* 蓝色的盒子阴影的颜色 */
  --box-shadow: rgb(54, 162, 250);
  /* 导航栏底色 */
  --nav-background-color: rgb(68, 68, 68);
  /* 特殊蓝色字体蓝色 */
  --special-font-color: rgb(91, 180, 253);
  /* 泛用纯白背景颜色 */
  --white-background-color: #ffffff;
  /* 深色背景 */
  --black-background-color: rgb(44, 44, 44);
  /* 黑色字体 */
  --black-font-color: #000;
  /* 白色字体 */
  --white-font-color: #fff;
  /* 浅灰色字体 */
  --font-gray-color: rgb(173, 173, 173);
  /* 深灰色字体 */
  --font-gray-color-dark: rgb(87, 87, 87);
  /* 灰色的阴影 */
  --gray-sahdow: rgb(78, 78, 78);
  /* 浅灰色阴影 */
  --gray-light-sahdow: rgb(182, 182, 182);
  /* 半透明背景 */
  --backgeound-color: rgba(172, 172, 172, 0.2);
  /* 非常浅色的边框 */
  --gray-light-border: rgb(224, 224, 224);
  /* 浅灰蓝色背景(主页标签，留言背景使用中) */
  --light-gray-blue: #dfe9f3;
  /* 标题分离框渐变色组合 */
  --gradient-start-one: #EF33B1;
  --gradient-end-one: #F6E6BC;
  /* 聊天室用浅灰色底色 */
  --chat-gray-back: #505050;
}