albumEdit.css 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  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. display: flex;
  50. align-items: flex-end;
  51. margin-left: 10px;
  52. }
  53. .rightlist-head-con {
  54. padding-right: 20px;
  55. font-size: 16px;
  56. color: #888;
  57. }
  58. .el-tag {
  59. /* font-weight: 700;
  60. font-size: 15px;
  61. margin-bottom: 30px; */
  62. }
  63. /* 单选框边框颜色 */
  64. .el-radio__inner {
  65. border: 1px solid #c8cede;
  66. }
  67. /* 多选框边框颜色 */
  68. .el-checkbox__inner {
  69. border: 1px solid #c8cede;
  70. }
  71. .el-icon-edit {
  72. font-size: 16px;
  73. padding: 0 15px;
  74. color: #409eff;
  75. cursor: pointer;
  76. }
  77. /* 滑块选择小白点 */
  78. .el-switch.is-checked .el-switch__core::after {
  79. left: 100%;
  80. margin-left: -17px;
  81. }
  82. .el-switch__core::after {
  83. content: "";
  84. position: absolute;
  85. top: 1px;
  86. left: 1px;
  87. border-radius: 100%;
  88. transition: all 0.3s;
  89. width: 16px;
  90. height: 16px;
  91. background-color: #fff;
  92. }
  93. .el-checkbox__label {
  94. display: inline-block;
  95. padding-left: 3px;
  96. }
  97. .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  98. margin-left: 0px;
  99. }
  100. .vue-page {
  101. border-radius: 5px;
  102. width: calc(100% - 266px);
  103. float: right;
  104. margin-right: 10px;
  105. position: fixed;
  106. bottom: 0;
  107. right: 0;
  108. padding: 15px 5% 15px 0;
  109. background: #fff;
  110. height: 60px;
  111. z-index: 999;
  112. margin-top: 0;
  113. box-shadow: 0 2px 9px rgba(51, 51, 51, 0.1);
  114. }
  115. .vue-center {
  116. text-align: center;
  117. }
  118. .loading-height {
  119. height: 500px;
  120. }
  121. .el-checkbox.is-bordered.el-checkbox--mini {
  122. margin: 0 0;
  123. }
  124. [v-cloak] {
  125. display: none;
  126. }
  127. .all {
  128. background: #eff3f6;
  129. min-height: 100vh;
  130. padding-top: 20px;
  131. }
  132. .vue-main {
  133. background: #fff;
  134. border-radius: 5px;
  135. margin: 0 10px;
  136. padding: 10px;
  137. min-height: calc(100vh - 90px);
  138. }
  139. .vue-nav {
  140. background: #fff;
  141. border-radius: 5px;
  142. margin: 0 10px;
  143. padding: 10px;
  144. }
  145. .vue-head {
  146. background: #fff;
  147. border-radius: 5px;
  148. margin: 0 10px;
  149. padding: 10px;
  150. margin-bottom: 15px;
  151. }
  152. .vue-crumbs {
  153. margin: 0 20px;
  154. font-size: 14px;
  155. color: #333;
  156. font-weight: 400;
  157. padding-bottom: 10px;
  158. line-height: 32px;
  159. }
  160. .vue-crumbs a {
  161. color: #333;
  162. }
  163. .vue-crumbs a:hover {
  164. color: #29ba9c;
  165. }
  166. .vue-main-title {
  167. display: flex;
  168. margin: 5px 0;
  169. line-height: 28px;
  170. font-size: 14px;
  171. color: #333;
  172. font-weight: 700;
  173. }
  174. .vue-main-title-left {
  175. width: 4px;
  176. height: 14px;
  177. margin-top: 6px;
  178. background: #29ba9c;
  179. display: inline-block;
  180. margin-right: 10px;
  181. }
  182. .vue-main-title-content {
  183. font-size: 14px;
  184. flex: 1;
  185. }
  186. .vue-main-title-button {
  187. text-align: right;
  188. flex: 1;
  189. }
  190. .vue-main-form {
  191. margin-top: 20px;
  192. }
  193. .vue-category-title {
  194. padding: 15px;
  195. border-bottom: 1px solid #ccc;
  196. margin-bottom: 15px;
  197. font-weight: 600;
  198. font-size: 15px;
  199. }
  200. .el-link-edit {
  201. border-right: 1px solid;
  202. line-height: 16px;
  203. }
  204. .el-link-edit-start {
  205. border-right: 1px solid;
  206. padding-right: 20px;
  207. line-height: 16px;
  208. }
  209. .el-link-edit-middle {
  210. border-right: 1px solid;
  211. padding: 0 20px;
  212. line-height: 16px;
  213. }
  214. .el-link-edit-end {
  215. border-right: 0px;
  216. padding-left: 20px;
  217. line-height: 16px;
  218. }
  219. /* 上传图片 */
  220. .avatar-uploader .el-upload {
  221. margin-top: 15px;
  222. border: 1px dashed #d9d9d9;
  223. border-radius: 6px;
  224. cursor: pointer;
  225. position: relative;
  226. overflow: hidden;
  227. }
  228. .avatar-uploader .el-upload:hover {
  229. border-color: #29ba9c;
  230. }
  231. .avatar-uploader-icon {
  232. font-size: 28px;
  233. color: #8c939d;
  234. width: 178px;
  235. height: 178px;
  236. line-height: 178px;
  237. text-align: center;
  238. }
  239. .avatar_box {
  240. width: 80%;
  241. height: 80%;
  242. margin: 0 auto;
  243. }
  244. .avatar {
  245. width: 50%;
  246. height: 50%;
  247. object-fit: cover;
  248. }
  249. .el-upload-tip {
  250. width: 178px;
  251. margin: 0;
  252. padding: 0;
  253. color: #999;
  254. text-align: center;
  255. }
  256. input[type="file"] {
  257. display: none;
  258. }
  259. .avatar-uploader-box {
  260. position: relative;
  261. margin-top: 20px;
  262. width: 200px;
  263. }
  264. .el-icon-circle-close1 {
  265. position: absolute;
  266. top: -3px;
  267. right: -3px;
  268. color: #fff;
  269. background-color: #000;
  270. border-radius: 50%;
  271. }
  272. .vue-two {
  273. text-overflow: -o-ellipsis-lastline;
  274. overflow: hidden;
  275. text-overflow: ellipsis;
  276. display: -webkit-box;
  277. -webkit-line-clamp: 2;
  278. line-clamp: 2;
  279. -webkit-box-orient: vertical;
  280. }
  281. /*弹窗上传图片*/
  282. #upload-img {
  283. }
  284. #upload-img .avatar {
  285. width: 100px;
  286. height: 100px;
  287. display: block;
  288. }
  289. #upload-img .avatar-uploader-box {
  290. position: relative;
  291. margin: 20px 0 0 10px;
  292. width: 110px;
  293. }
  294. #upload-img .el-icon-circle-close {
  295. position: absolute;
  296. top: -7px;
  297. right: 1px;
  298. color: #999;
  299. }
  300. .imgList {
  301. display: flex;
  302. flex-wrap: wrap;
  303. margin: 10px auto;
  304. }
  305. /* 辅助色 */
  306. .vue-assist-color,
  307. .el-link-assist,
  308. .el-link:hover {
  309. color: #ff9b19 !important;
  310. }
  311. /* 选中及未选图片样式 */
  312. .upload-box:hover {
  313. border-color: #29ba9c;
  314. color: #29ba9c;
  315. }
  316. .upload-box {
  317. width: 150px;
  318. height: 150px;
  319. display: flex;
  320. flex-direction: column;
  321. cursor: pointer;
  322. border: 1px dashed #dde2ee;
  323. justify-content: center;
  324. align-items: center;
  325. border-radius: 5px;
  326. }
  327. .upload-boxed {
  328. width: 150px;
  329. height: 150px;
  330. position: relative;
  331. border-radius: 5px;
  332. display: inline-block;
  333. }
  334. .upload-boxed-text {
  335. position: absolute;
  336. bottom: 0;
  337. line-height: 32px;
  338. color: #fff;
  339. text-align: center;
  340. width: 100%;
  341. background: #000;
  342. opacity: 0.7;
  343. border-radius: 0px 0px 5px 5px;
  344. }
  345. .upload-boxed-text-clear {
  346. position: absolute;
  347. bottom: 0;
  348. right: -70px;
  349. cursor: pointer;
  350. line-height: 32px;
  351. color: #ee3939;
  352. }
  353. .upload-boxed-list {
  354. display: flex;
  355. position: relative;
  356. border-radius: 5px;
  357. flex-wrap: wrap;
  358. }
  359. .upload-boxed-list-a {
  360. width: 150px;
  361. height: 170px;
  362. margin: 0 10px 5px 0;
  363. position: relative;
  364. }
  365. .upload-boxed-list-a .el-icon-close {
  366. position: absolute;
  367. top: -5px;
  368. right: -5px;
  369. color: #fff;
  370. background: #333;
  371. border-radius: 50%;
  372. cursor: pointer;
  373. }
  374. .vue-main-title-content a {
  375. color: #333;
  376. }
  377. .vue-main-title-content a:hover {
  378. color: #29ba9c;
  379. }
  380. .vue-ellipsis {
  381. overflow: hidden;
  382. text-overflow: ellipsis;
  383. white-space: nowrap;
  384. }
  385. .black {
  386. color: #333;
  387. }
  388. .upload-box-member {
  389. text-align: center;
  390. font-weight: 600;
  391. font-size: 16px;
  392. }
  393. .el-form-item__label {
  394. margin-right: 30px;
  395. }
  396. .el-form-item__error {
  397. margin-left: 30px;
  398. }
  399. .member-info {
  400. display: flex;
  401. align-items: center;
  402. }
  403. .member-info .member-avatar {
  404. flex-shrink: 0;
  405. margin: 0 5px;
  406. width: 40px;
  407. height: 40px;
  408. border-radius: 50%;
  409. }
  410. .base_set {
  411. background: #fff;
  412. margin: 10px 10px 0 10px;
  413. padding: 10px 0;
  414. }
  415. .vue-main-title {
  416. margin: 0 20px;
  417. }
  418. .vue-main-form {
  419. display: flex;
  420. flex-wrap: wrap;
  421. margin: 20px;
  422. padding-bottom: 20px;
  423. }
  424. .vue-main-form .el-input {
  425. width: 180px;
  426. margin-right: 10px;
  427. margin-bottom: 10px;
  428. }
  429. .vue-main-form .el-button {
  430. height: 40px;
  431. margin-left: 10px;
  432. }
  433. .el-range-editor.el-input__inner {
  434. margin-right: 10px;
  435. }
  436. .audit {
  437. color: #d2b199;
  438. font-weight: bold;
  439. }
  440. .approved {
  441. color: #93cdba;
  442. font-weight: bold;
  443. }
  444. .el-icon-view, .el-icon-folder-checked, .el-icon-s-release {
  445. color: #666;
  446. font-size: 16px;
  447. }
  448. .item {
  449. margin-right: 20px;
  450. }
  451. .el-popover {
  452. display: none;
  453. }
  454. .el-table .el-table__row {
  455. height: 88px !important;
  456. }
  457. .left-style {
  458. padding-left: 30px;
  459. }
  460. .icon-size {
  461. font-size: 12px;
  462. }
  463. .avatar-bg {
  464. height: 50px;
  465. width: 50px;
  466. border-radius: 50%;
  467. }
  468. .active-color {
  469. color: rgb(153, 153, 153);
  470. font-size: 12px;
  471. line-height: 1;
  472. }
  473. .el-date-editor .el-range-separator {
  474. width: auto;
  475. }
  476. .level-el-icon-delete-solid {
  477. margin-left: 10px;
  478. }
  479. .cover-pane {
  480. display: flex;
  481. flex-wrap: wrap;
  482. }
  483. .upload-boxed {
  484. position: relative;
  485. margin: 0 10px 10px 0;
  486. }
  487. img {
  488. width: 150px;
  489. height: 150px;
  490. border-radius: 5px;
  491. cursor: pointer;
  492. object-fit: contain;
  493. }
  494. .el-textarea {
  495. height: 200px;
  496. width: 60%;
  497. }
  498. .el-textarea__inner {
  499. height: 200px;
  500. }