index.css 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. /*
  2. *这里的值严格按照UI设计图标注值来进行设置
  3. */
  4. /*
  5. *颜色
  6. */
  7. /*
  8. *页面的边距
  9. */
  10. /*
  11. *字体
  12. */
  13. /*
  14. *头像
  15. */
  16. /*
  17. * 按钮
  18. */
  19. /*
  20. *对常见的多行样式进行了方法封装,方便调用,加快开发效率
  21. */
  22. html,
  23. body {
  24. min-height: 100vh;
  25. width: 100vw;
  26. background-color: #eee;
  27. margin: 0;
  28. display: flex;
  29. font-weight: initial !important;
  30. font-size: 14px !important;
  31. color: #333 !important;
  32. }
  33. html *,
  34. body * {
  35. text-decoration: none !important;
  36. font-family: Verdana, Arial, Helvetica, sans-serif;
  37. box-sizing: border-box;
  38. }
  39. .ms-ellipsis {
  40. overflow: hidden;
  41. text-overflow: ellipsis;
  42. white-space: nowrap;
  43. display: block;
  44. }
  45. .ms-align-center {
  46. display: flex;
  47. align-items: center;
  48. }
  49. input::-webkit-input-placeholder,
  50. textarea::-webkit-input-placeholder {
  51. font-weight: initial;
  52. font-size: 12px;
  53. color: #aaa;
  54. resize: none;
  55. }
  56. *::-webkit-scrollbar {
  57. width: 8px;
  58. height: 8px;
  59. }
  60. /*定义滚动条轨道 内阴影+圆角*/
  61. *::-webkit-scrollbar-track {
  62. border-radius: 10px;
  63. /*滚动条的背景区域的圆角*/
  64. background-color: #eee;
  65. /*滚动条的背景颜色*/
  66. }
  67. /*定义滑块 内阴影+圆角*/
  68. *::-webkit-scrollbar-thumb {
  69. border-radius: 10px;
  70. /*滚动条的圆角*/
  71. background-color: #ddd;
  72. /*滚动条的背景颜色*/
  73. }
  74. .ms-container {
  75. margin: 12px;
  76. height: calc(100% - 24px);
  77. padding: 14px 14px 0 14px;
  78. background: #fff;
  79. }
  80. .ms-header {
  81. padding: 10px;
  82. margin: 0;
  83. border-bottom: 1px solid #ddd;
  84. background: #fff;
  85. height: 50px;
  86. }
  87. .ms-pagination {
  88. padding: 20px 0;
  89. text-align: right;
  90. }
  91. .ms-fr {
  92. float: right;
  93. }
  94. .ms-tr {
  95. text-align: right;
  96. }
  97. .el-button + .el-button {
  98. margin-left: 0;
  99. }
  100. .ms-weixin-content {
  101. width: calc(100% - 140px);
  102. }
  103. .ms-weixin-dialog .el-dialog__header {
  104. height: 55px;
  105. box-sizing: border-box;
  106. padding: 10px 10px 25px 10px;
  107. border-bottom: 1px solid #ddd;
  108. }
  109. .ms-weixin-dialog .el-dialog__header .el-dialog__title {
  110. font-weight: bold;
  111. font-size: 14px;
  112. color: #333;
  113. }
  114. .ms-weixin-dialog .el-dialog__footer {
  115. border-top: 1px solid #ddd;
  116. padding: 15px !important;
  117. }
  118. .index {
  119. width: 100%;
  120. }
  121. .ms-admin-header {
  122. display: flex;
  123. padding: 0;
  124. background-color: #0099ff;
  125. height: 50px !important;
  126. }
  127. .ms-admin-header .ms-admin-header-menu {
  128. background-color: #0099ff;
  129. width: auto;
  130. border-bottom: none;
  131. position: relative;
  132. }
  133. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item > *,
  134. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item {
  135. height: 50px !important;
  136. line-height: 50px !important;
  137. background-color: #0099ff !important;
  138. color: rgba(255, 255, 255, 0.65) !important;
  139. border-bottom: none !important;
  140. font-size: 1em;
  141. }
  142. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item > *:hover,
  143. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item:hover {
  144. color: #fff !important;
  145. }
  146. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item > *.is-active,
  147. .ms-admin-header .ms-admin-header-menu > .ms-admin-menu-item.is-active {
  148. color: #fff !important;
  149. }
  150. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu {
  151. user-select: none;
  152. outline: none;
  153. padding-left: 20px;
  154. width: 100%;
  155. min-width: 500px;
  156. min-height: 200px;
  157. background-color: #fff !important;
  158. height: auto;
  159. flex-wrap: wrap;
  160. position: absolute;
  161. right: 0;
  162. top: 0;
  163. z-index: 9;
  164. background: #ffffff;
  165. border: 1px solid #ddd;
  166. box-shadow: 2px 3px 5px 0.1px rgba(0, 0, 0, 0.1);
  167. }
  168. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu > li {
  169. margin: 0;
  170. margin-right: 20px;
  171. text-align: left;
  172. display: -webkit-inline-box;
  173. display: inline-block;
  174. height: 50px;
  175. line-height: 50px;
  176. font-weight: normal;
  177. font-size: 14px;
  178. color: #333;
  179. }
  180. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu > li:hover {
  181. cursor: pointer;
  182. color: #0099ff;
  183. }
  184. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu i {
  185. position: absolute;
  186. top: 18px;
  187. right: 19px;
  188. font-weight: normal;
  189. font-size: 14px;
  190. color: #333;
  191. }
  192. .ms-admin-header .ms-admin-header-menu .ms-admin-shortcut-menu i:hover {
  193. cursor: pointer;
  194. }
  195. .ms-admin-logo {
  196. min-width: 200px;
  197. width: 200px;
  198. display: flex;
  199. align-items: center;
  200. }
  201. .ms-admin-logo > img {
  202. padding: 14px 0 14px 20px;
  203. width: 80px;
  204. height: 100%;
  205. }
  206. .ms-admin-logo > div {
  207. display: flex;
  208. align-items: center;
  209. }
  210. .ms-admin-logo > div img {
  211. margin-top: -10px;
  212. margin-left: 3px;
  213. }
  214. .ms-admin-logo > div span {
  215. margin-top: -7px;
  216. position: absolute;
  217. margin-left: 6px;
  218. font-size: 12px;
  219. }
  220. .ms-admin-logo .iconfont {
  221. color: #fff;
  222. margin-left: auto;
  223. margin-right: 14px;
  224. cursor: pointer;
  225. }
  226. .ms-admin-mstore {
  227. margin-left: auto;
  228. min-width: 200px;
  229. display: flex;
  230. align-items: center;
  231. justify-content: flex-end;
  232. padding: 0;
  233. }
  234. .ms-admin-mstore .ms-admin-mstore-icon {
  235. min-width: 50px;
  236. width: 50px;
  237. height: 50px;
  238. background-color: #0080FF;
  239. display: flex;
  240. justify-content: center;
  241. align-items: center;
  242. cursor: pointer;
  243. }
  244. .ms-admin-mstore .ms-admin-mstore-icon .iconfont {
  245. color: #fff;
  246. }
  247. .ms-admin-login {
  248. display: flex;
  249. align-items: center;
  250. }
  251. .ms-admin-login > span {
  252. width: 120px;
  253. padding: 0 20px;
  254. height: 50px;
  255. display: flex;
  256. align-items: center;
  257. cursor: pointer;
  258. outline: none;
  259. }
  260. .ms-admin-login > span img {
  261. border-radius: 50%;
  262. width: 20px;
  263. height: 20px;
  264. margin-right: 8px;
  265. }
  266. .ms-admin-login > span span {
  267. color: #fff;
  268. }
  269. .ms-admin-login .active {
  270. background: #fff;
  271. }
  272. .ms-admin-login .active span {
  273. color: #333;
  274. }
  275. .ms-admin-login-down {
  276. width: 120px;
  277. border: none;
  278. margin: 0 !important;
  279. padding: 0 !important;
  280. border-radius: 0;
  281. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  282. }
  283. .ms-admin-login-down > .popper__arrow {
  284. display: none;
  285. }
  286. .ms-admin-menu-aside {
  287. width: 200px !important;
  288. overflow: visible;
  289. }
  290. .ms-admin-menu-aside .ms-admin-menu {
  291. width: 200px;
  292. height: 100%;
  293. position: relative;
  294. }
  295. .ms-admin-menu-aside .ms-admin-menu .el-menu--inline .is-active {
  296. border-left: 2px solid #0099ff;
  297. }
  298. .ms-admin-menu-aside .ms-admin-menu .ms-menu-expand {
  299. transform: rotate(270deg);
  300. position: absolute;
  301. right: -34px;
  302. top: 50%;
  303. cursor: pointer;
  304. }
  305. .ms-admin-menu-aside .ms-admin-menu .ms-menu-expand i {
  306. font-weight: initial;
  307. font-size: 14px;
  308. color: #333;
  309. position: absolute;
  310. transform: rotate(90deg);
  311. top: 5px;
  312. right: 43%;
  313. }
  314. .ms-admin-menu-aside .ms-admin-menu .ms-menu-expand::before {
  315. border-color: transparent transparent #eee;
  316. border-style: none solid solid;
  317. border-width: 0 30px 22px;
  318. content: "";
  319. display: block;
  320. height: 0;
  321. left: -10px;
  322. width: 30px;
  323. }
  324. .ms-admin-menu-aside .ms-admin-menu .ms-menu-expand-active {
  325. transform: rotate(90deg);
  326. transition: all .3 ease;
  327. right: -56px;
  328. }
  329. .ms-admin-menu-aside .ms-admin-menu-active {
  330. width: 60px;
  331. height: 100%;
  332. }
  333. .ms-admin-menu-aside-active {
  334. width: 60px !important;
  335. }
  336. .ms-admin-container {
  337. height: calc(100vh - 60px);
  338. }
  339. .ms-admin-container > .ms-admin-main {
  340. padding: 0;
  341. background-color: #fff;
  342. }
  343. .ms-admin-container > .ms-admin-main .ms-admin-tabs {
  344. height: 100%;
  345. }
  346. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__content {
  347. height: 100%;
  348. }
  349. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__content .el-tab-pane {
  350. height: 100%;
  351. }
  352. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-scroll {
  353. background: #fafafa;
  354. }
  355. .ms-admin-container > .ms-admin-main .ms-admin-tabs .el-tabs__nav-scroll .el-tabs__nav {
  356. border-left: none;
  357. border-radius: 0;
  358. }
  359. .ms-admin-container > .ms-admin-main iframe {
  360. width: 100%;
  361. height: 100%;
  362. border: none !important;
  363. }