reset.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  2. body, button, input, select, textarea {
  3. font-size:14px;
  4. color: #303133;
  5. font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  6. -webkit-font-smoothing: antialiased;
  7. -webkit-tap-highlight-color: transparent;
  8. }
  9. h1, h2, h3, h4, h5, h6{ font-size:100%; }
  10. address, cite, dfn, em, var { font-style:normal; }
  11. code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  12. small{ font-size:12px; }
  13. ul, ol { list-style:none; }
  14. a { text-decoration:none; }
  15. a:hover { text-decoration:underline; }
  16. sup { vertical-align:text-top; }
  17. sub{ vertical-align:text-bottom; }
  18. legend { color:#000; }
  19. fieldset, img { border:0; }
  20. button, input, select, textarea { font-size:100%; }
  21. table { border-collapse:collapse; border-spacing:0; }
  22. .icon {
  23. width: 1em;
  24. height: 1em;
  25. vertical-align: -0.15em;
  26. fill: currentColor;
  27. overflow: hidden;
  28. }
  29. .boxMinHeight{
  30. min-height: calc(100vh - 110px);
  31. }
  32. .el-form-item__content{
  33. line-height:36px !important;
  34. }
  35. /* 盒子模型 */
  36. .flex-box {
  37. display: -webkit-box;
  38. display: -moz-box;
  39. display: -ms-flexbox;
  40. display: -webkit-flex;
  41. display: flex;
  42. }
  43. /*盒子模型,竖向自适应,垂直排列 */
  44. .flex-box-v {
  45. display: -webkit-box;
  46. display: -webkit-flex;
  47. display: flex;
  48. -webkit-box-orient: vertical;
  49. -webkit-flex-flow: column;
  50. flex-flow: column !important;
  51. }
  52. /* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
  53. .flex-d-center {
  54. justify-content: space-between;
  55. -webkit-justify-content: space-between;
  56. }
  57. /* 水平等列排版(子元素两边有缝隙自己适应) */
  58. .flex-dv-center {
  59. justify-content: space-around;
  60. -webkit-justify-content: space-around;
  61. }
  62. /*通过一起使用 box-align 和 box-pack 属性,对 view 框的子元素进行居中,目前没有浏览器支持box-align 和 box-pack 属性,所以需要加上浏览器内核-webkit,-moz等的简写 */
  63. .flex-center-center {
  64. justify-content: center;
  65. -webkit-justify-content: center;
  66. -moz-justify-content: center;
  67. align-items: center;
  68. -webkit-align-items: center;
  69. -webkit-box-pack: center;
  70. -webkit-box-align: center;
  71. -moz-align-items: center;
  72. -moz-box-pack: center;
  73. -moz-box-align: center;
  74. }
  75. /*对view中的子元素进行居中,并且位于容器的中间位置 水平居中 */
  76. .flex-v-zhu,
  77. .flex-h-zhu {
  78. justify-content: center;
  79. -webkit-justify-content: center;
  80. -webkit-box-pack: center;
  81. }
  82. /*对view中的子元素进行居中,并且位于容器的中间位置 垂直居中 */
  83. .flex-v-ce,
  84. .flex-h-ce {
  85. align-items: center;
  86. -webkit-align-items: center;
  87. -webkit-box-align: center;
  88. }
  89. /*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
  90. .flex-1 {
  91. -webkit-box-flex: 1;
  92. -moz-box-flex: 1;
  93. -webkit-flex: 1;
  94. -ms-flex: 1;
  95. flex: 1;
  96. }
  97. /*flex-box与 flex-v-ce结合*/
  98. .flex-box-ce {
  99. display: -webkit-box;
  100. display: -moz-box;
  101. display: -ms-flexbox;
  102. display: -webkit-flex;
  103. display: flex;
  104. align-items: center;
  105. -webkit-align-items: center;
  106. -webkit-box-align: center;
  107. }
  108. .flex-2 {
  109. -webkit-box-flex: 2;
  110. box-flex: 2;
  111. -moz-box-flex: 2;
  112. -webkit-flex: 2;
  113. -ms-flex: 2;
  114. flex: 2;
  115. }
  116. .flex-3 {
  117. -webkit-box-flex: 3;
  118. box-flex: 3;
  119. -moz-box-flex: 3;
  120. -webkit-flex: 3;
  121. -ms-flex: 3;
  122. flex: 3;
  123. }
  124. .flex-4 {
  125. -webkit-box-flex: 4;
  126. box-flex: 4;
  127. -moz-box-flex: 4;
  128. -webkit-flex: 4;
  129. -ms-flex: 4;
  130. flex: 4;
  131. }
  132. .flex-5 {
  133. -webkit-box-flex: 5;
  134. box-flex: 5;
  135. -moz-box-flex: 5;
  136. -webkit-flex: 5;
  137. -ms-flex: 5;
  138. flex: 5;
  139. }
  140. .flex-direction-row-reverse {
  141. flex-direction: row-reverse;
  142. -webkit-flex-direction: row-reverse;
  143. }
  144. /*超出部分用....表示的公用样式 */
  145. .font-flex-word {
  146. overflow: hidden;
  147. text-overflow: ellipsis;
  148. white-space: nowrap;
  149. }
  150. /* 内容超出部分自动换行 */
  151. .flex-d-wrap {
  152. flex-wrap: wrap;
  153. }
  154. /* 内容超出部分不换行 */
  155. .flex-no-wrap {
  156. flex-wrap: nowrap;
  157. }
  158. /* 从右边开始排列 */
  159. .flex-box-end {
  160. display: -webkit-box;
  161. display: -moz-box;
  162. display: -ms-flexbox;
  163. display: -webkit-flex;
  164. display: flex;
  165. justify-content: flex-end;
  166. }
  167. /* 字体颜色 */
  168. .blue {
  169. color: #26A2FF!important;
  170. }
  171. .red {
  172. color: #F56C6C!important;
  173. }
  174. .yellow {
  175. color: #E6A23C!important;
  176. }
  177. .green {
  178. color: #67C23A!important;
  179. }
  180. .fontColorB {
  181. color: #777777 !important;
  182. }
  183. .fontColorZ {
  184. color: #303133!important;
  185. }
  186. .fontColorF {
  187. color: #606266 !important;
  188. }
  189. .fontColorT {
  190. color: #C0C4CC!important;
  191. }
  192. /* 整体布局样式 */
  193. .all{
  194. background-color: #fff;
  195. border-radius: 5px;
  196. min-height:calc(100vh - 184px);
  197. min-width: 800px;
  198. position: relative;
  199. }
  200. .terr-left {
  201. width: 200px;
  202. box-sizing: border-box;
  203. padding: 20px 10px;
  204. max-height: 700px;
  205. overflow: auto;
  206. }
  207. .terr-left::-webkit-scrollbar {
  208. width: 3px;
  209. height: 3px;
  210. background-color: #fff;
  211. }
  212. .terr-left::-webkit-scrollbar-thumb {
  213. background-color: #D9D9D9;
  214. }
  215. .terr-right{
  216. padding: 20px;
  217. min-width: 600px;
  218. box-sizing: border-box;
  219. }
  220. .border-right:after {
  221. content: ' ';
  222. position: absolute;
  223. top: 0;
  224. left: 200px;
  225. bottom: 0;
  226. width: 1px;
  227. background: #ebeef5;
  228. }
  229. .border-right {
  230. /* position: relative; */
  231. }
  232. .padding-20{
  233. padding: 20px;
  234. }
  235. .margin-bottom{
  236. margin-bottom: 20px;
  237. }
  238. .diy-tip {
  239. margin-bottom: 10px !important;
  240. background: #f0f9eb !important;
  241. color: #67c23a !important;
  242. border: 1px solid #67c23a !important;
  243. padding:16px !important;
  244. min-width: 800px;
  245. border-radius: 4px;
  246. }
  247. .diy-tip p{
  248. color: #67c23a !important;
  249. }
  250. /* 分页样式 */
  251. .pagination{
  252. padding: 20px 0;
  253. text-align: center;
  254. }
  255. /* EL UI 重置 */
  256. .notifyBox{
  257. width: auto !important;
  258. }
  259. /* 级联选择器长度限制样式 */
  260. .el-cascader-menu .el-cascader-menu__wrap .el-scrollbar__view li.el-cascader-node {
  261. height: auto;
  262. max-width: 500px;
  263. }
  264. .el-cascader-menu .el-cascader-menu__wrap .el-scrollbar__view li.el-cascader-node .el-cascader-node__label {
  265. white-space: initial;
  266. overflow: initial;
  267. text-overflow: initial;
  268. }
  269. /* // 滚动条样式 */
  270. .scroll-bar{
  271. scroll-behavior: smooth
  272. }
  273. .scroll-bar::-webkit-scrollbar {
  274. width: 6px;
  275. height: 6px;
  276. }
  277. /*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
  278. .scroll-bar::-webkit-scrollbar-track {
  279. width: 6px;
  280. background-color: #fff0;
  281. -webkit-border-radius: 2em;
  282. -moz-border-radius: 2em;
  283. border-radius: 2em;
  284. }
  285. /*滚动条的设置*/
  286. .scroll-bar::-webkit-scrollbar-thumb {
  287. background-color: #fff0;
  288. background-clip: padding-box;
  289. -webkit-border-radius: 2em;
  290. -moz-border-radius: 2em;
  291. border-radius: 2em;
  292. }
  293. /*滚动条移上去的背景*/
  294. .scroll-bar:hover::-webkit-scrollbar-thumb {
  295. background-color: rgba(144, 147, 153, 0.3);
  296. height: 20px;
  297. }