index.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. .main-panel > .content {
  2. padding: 0;
  3. }
  4. .main-panel {
  5. margin-top: 42px;
  6. }
  7. #app {
  8. padding-bottom: 40px;
  9. }
  10. .rightlist #app .rightlist-head {
  11. line-height: 50px;
  12. padding: 0 0 15px 0;
  13. }
  14. .rightlist {
  15. background: #eff3f6;
  16. margin-top: 10px;
  17. margin-bottom: 20px;
  18. padding-bottom: 20px;
  19. }
  20. .form-list {
  21. padding-top: 30px;
  22. background: #fff;
  23. border-radius: 10px;
  24. position: relative;
  25. top: 10px;
  26. margin-left: 10px;
  27. width: calc(100% - 20px);
  28. }
  29. .table-list {
  30. padding-top: 30px;
  31. background: #fff;
  32. border-radius: 10px;
  33. margin-top: 20px;
  34. margin-left: 10px;
  35. width: calc(100% - 20px);
  36. }
  37. .table-option a {
  38. font-size: 12px;
  39. font-weight: 600;
  40. color: #29ba9c;
  41. padding: 10px 0;
  42. }
  43. /* .el-form-item__label{padding-right:30px;} */
  44. .tip {
  45. font-size: 12px;
  46. color: #999;
  47. font-weight: 500;
  48. line-height: 24px;
  49. }
  50. .rightlist-head-con {
  51. padding-right: 20px;
  52. font-size: 16px;
  53. color: #888;
  54. }
  55. .el-tag {
  56. /* font-weight: 700;
  57. font-size: 15px;
  58. margin-bottom: 30px; */
  59. }
  60. /* 单选框边框颜色 */
  61. .el-radio__inner {
  62. border: 1px solid #c8cede;
  63. }
  64. /* 多选框边框颜色 */
  65. .el-checkbox__inner{
  66. border: 1px solid #c8cede;
  67. }
  68. .el-icon-edit {
  69. font-size: 16px;
  70. padding: 0 15px;
  71. color: #409eff;
  72. cursor: pointer;
  73. }
  74. /* 滑块选择小白点 */
  75. .el-switch.is-checked .el-switch__core::after {
  76. left: 100%;
  77. margin-left: -17px;
  78. }
  79. .el-switch__core::after {
  80. content: "";
  81. position: absolute;
  82. top: 1px;
  83. left: 1px;
  84. border-radius: 100%;
  85. transition: all 0.3s;
  86. width: 16px;
  87. height: 16px;
  88. background-color: #fff;
  89. }
  90. .el-checkbox__label {
  91. display: inline-block;
  92. padding-left: 3px;
  93. }
  94. .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  95. margin-left: 0px;
  96. }
  97. .vue-page {
  98. border-radius: 5px;
  99. width: calc(100% - 266px);
  100. float: right;
  101. margin-right: 10px;
  102. position: fixed;
  103. bottom: 0;
  104. right: 0;
  105. padding: 15px 5% 15px 0;
  106. background: #fff;
  107. height: 60px;
  108. z-index: 999;
  109. margin-top: 0;
  110. box-shadow: 0 2px 9px rgba(51, 51, 51, 0.1);
  111. }
  112. .vue-center {
  113. text-align: center;
  114. }
  115. .loading-height {
  116. height: 500px;
  117. }
  118. .el-checkbox.is-bordered.el-checkbox--mini {
  119. margin: 0 0;
  120. }
  121. [v-cloak] {
  122. display: none;
  123. }
  124. .all {
  125. background: #eff3f6;
  126. min-height: 100vh;
  127. padding-top: 20px;
  128. }
  129. .vue-main {
  130. background: #fff;
  131. border-radius: 5px;
  132. margin: 0 10px;
  133. padding: 10px;
  134. min-height: calc(100vh - 90px);
  135. }
  136. .vue-nav {
  137. background: #fff;
  138. border-radius: 5px;
  139. margin: 0 10px;
  140. padding: 10px;
  141. }
  142. .vue-head {
  143. background: #fff;
  144. border-radius: 5px;
  145. margin: 0 10px;
  146. padding: 10px;
  147. margin-bottom: 15px;
  148. }
  149. .vue-crumbs {
  150. margin: 0 20px;
  151. font-size: 14px;
  152. color: #333;
  153. font-weight: 400;
  154. padding-bottom: 10px;
  155. line-height: 32px;
  156. }
  157. .vue-crumbs a {
  158. color: #333;
  159. }
  160. .vue-crumbs a:hover {
  161. color: #29ba9c;
  162. }
  163. .vue-main-title {
  164. display: flex;
  165. margin: 5px 0;
  166. line-height: 28px;
  167. font-size: 14px;
  168. color: #333;
  169. font-weight: 700;
  170. }
  171. .vue-main-title-left {
  172. width: 4px;
  173. height: 14px;
  174. margin-top: 6px;
  175. background: #29ba9c;
  176. display: inline-block;
  177. margin-right: 10px;
  178. }
  179. .vue-main-title-content {
  180. font-size: 14px;
  181. flex: 1;
  182. }
  183. .vue-main-title-button {
  184. text-align: right;
  185. flex:1;
  186. }
  187. .vue-main-form {
  188. margin-top: 20px;
  189. }
  190. .vue-category-title {
  191. padding: 15px;
  192. border-bottom: 1px solid #ccc;
  193. margin-bottom: 15px;
  194. font-weight: 600;
  195. font-size: 15px;
  196. }
  197. .el-link-edit {
  198. border-right: 1px solid;
  199. line-height: 16px;
  200. }
  201. .el-link-edit-start {
  202. border-right: 1px solid;
  203. padding-right: 20px;
  204. line-height: 16px;
  205. }
  206. .el-link-edit-middle {
  207. border-right: 1px solid;
  208. padding: 0 20px;
  209. line-height: 16px;
  210. }
  211. .el-link-edit-end {
  212. border-right: 0px;
  213. padding-left: 20px;
  214. line-height: 16px;
  215. }
  216. /* 上传图片 */
  217. .avatar-uploader .el-upload {
  218. margin-top: 15px;
  219. border: 1px dashed #d9d9d9;
  220. border-radius: 6px;
  221. cursor: pointer;
  222. position: relative;
  223. overflow: hidden;
  224. }
  225. .avatar-uploader .el-upload:hover {
  226. border-color: #29ba9c;
  227. }
  228. .avatar-uploader-icon {
  229. font-size: 28px;
  230. color: #8c939d;
  231. width: 178px;
  232. height: 178px;
  233. line-height: 178px;
  234. text-align: center;
  235. }
  236. .avatar_box {
  237. width: 80%;
  238. height: 80%;
  239. margin: 0 auto;
  240. }
  241. .avatar {
  242. width: 50%;
  243. height: 50%;
  244. object-fit: cover;
  245. }
  246. .el-upload-tip {
  247. width: 178px;
  248. margin: 0;
  249. padding: 0;
  250. color: #999;
  251. text-align: center;
  252. }
  253. input[type="file"] {
  254. display: none;
  255. }
  256. .avatar-uploader-box {
  257. position: relative;
  258. margin-top: 20px;
  259. width: 200px;
  260. }
  261. .el-icon-circle-close1 {
  262. position: absolute;
  263. top: -3px;
  264. right: -3px;
  265. color: #fff;
  266. background-color: #000;
  267. border-radius: 50%;
  268. }
  269. .vue-two{
  270. text-overflow: -o-ellipsis-lastline;
  271. overflow: hidden;
  272. text-overflow: ellipsis;
  273. display: -webkit-box;
  274. -webkit-line-clamp: 2;
  275. line-clamp: 2;
  276. -webkit-box-orient: vertical;
  277. }
  278. /*弹窗上传图片*/
  279. #upload-img {
  280. }
  281. #upload-img .avatar {
  282. width: 100px;
  283. height: 100px;
  284. display: block;
  285. }
  286. #upload-img .avatar-uploader-box {
  287. position: relative;
  288. margin: 20px 0 0 10px;
  289. width: 110px;
  290. }
  291. #upload-img .el-icon-circle-close {
  292. position: absolute;
  293. top: -7px;
  294. right: 1px;
  295. color: #999;
  296. }
  297. .imgList {
  298. display: flex;
  299. flex-wrap: wrap;
  300. margin: 10px auto;
  301. }
  302. /* 辅助色 */
  303. .vue-assist-color,
  304. .el-link-assist,
  305. .el-link:hover {
  306. color: #ff9b19 !important;
  307. }
  308. /* 选中及未选图片样式 */
  309. .upload-box:hover {
  310. border-color: #29ba9c;
  311. color: #29ba9c;
  312. }
  313. .upload-box {
  314. width: 150px;
  315. height: 150px;
  316. display: flex;
  317. cursor: pointer;
  318. border: 1px dashed #dde2ee;
  319. justify-content: center;
  320. align-items: center;
  321. border-radius: 5px;
  322. }
  323. .upload-boxed {
  324. width: 150px;
  325. height: 150px;
  326. position: relative;
  327. border-radius: 5px;
  328. display: inline-block;
  329. }
  330. .upload-boxed-text {
  331. position: absolute;
  332. bottom: 0;
  333. line-height: 32px;
  334. color: #fff;
  335. text-align: center;
  336. width: 100%;
  337. background: #000;
  338. opacity: 0.7;
  339. border-radius: 0px 0px 5px 5px;
  340. }
  341. .upload-boxed-text-clear {
  342. position: absolute;
  343. bottom: 0;
  344. right:-70px;
  345. cursor: pointer;
  346. line-height: 32px;
  347. color: #ee3939;
  348. }
  349. .upload-boxed-list {
  350. display: flex;
  351. position: relative;
  352. border-radius: 5px;
  353. flex-wrap: wrap;
  354. }
  355. .upload-boxed-list-a {
  356. width: 150px;
  357. height: 170px;
  358. margin: 0 10px 5px 0;
  359. position: relative;
  360. }
  361. .upload-boxed-list-a .el-icon-close {
  362. position: absolute;
  363. top: -5px;
  364. right: -5px;
  365. color: #fff;
  366. background: #333;
  367. border-radius: 50%;
  368. cursor: pointer;
  369. }
  370. .vue-main-title-content a {
  371. color: #333;
  372. }
  373. .vue-main-title-content a:hover {
  374. color: #29ba9c;
  375. }
  376. .vue-ellipsis {
  377. overflow: hidden;
  378. text-overflow: ellipsis;
  379. white-space: nowrap;
  380. }
  381. .black {
  382. color: #333;
  383. }
  384. .upload-box-member {
  385. text-align: center;
  386. font-weight: 600;
  387. font-size: 16px;
  388. }
  389. .el-form-item__label{
  390. margin-right: 30px;
  391. }
  392. .el-form-item__error{
  393. margin-left: 30px;
  394. }