manager.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. .photo:hover .mask {
  2. display: block;
  3. }
  4. .photo .mask {
  5. display: none;
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. bottom: 0;
  10. right: 0;
  11. background-color: rgba(0, 0, 0, 0.3);
  12. }
  13. .photo .mask .opts {
  14. width: 100%;
  15. height: 2rem;
  16. line-height: 1rem;
  17. position: absolute;
  18. top: 50%;
  19. margin-top: -0.5rem;
  20. text-align: center;
  21. }
  22. .photo .mask .opts .opt-item {
  23. color: #2196F3;
  24. display: inline-block;
  25. padding: 0 0.3rem;
  26. margin: 0.4rem 0;
  27. cursor: pointer;
  28. font-size: 1.4rem;
  29. }
  30. .photo .mask .opts .opt-item:not(:first-child) {
  31. border-left: 1px solid #2196F3;
  32. }
  33. .photo .mask .opts .opt-item:hover {
  34. color: #fff;
  35. }
  36. .config-card {
  37. height: 17rem;
  38. position: relative;
  39. border: 1px solid #7eb1b9;
  40. box-sizing: border-box;
  41. border-radius: 0.4rem;
  42. overflow: hidden;
  43. margin-bottom: 10px;
  44. }
  45. .config-card .head {
  46. line-height: 4rem;
  47. border-bottom: 1px solid #7eb1b9;
  48. border-radius: 0.4rem;
  49. font-size: 1.6rem;
  50. position: relative;
  51. }
  52. .config-card .head .title {
  53. border-left: 0.4rem solid #2196f3;
  54. padding-left: 0.6rem;
  55. }
  56. .config-card .head .circle {
  57. position: absolute;
  58. width: 4rem;
  59. height: 4rem;
  60. bottom: -2rem;
  61. left: 50%;
  62. margin-left: -2rem;
  63. line-height: 4rem;
  64. text-align: center;
  65. border: 1px solid #7eb1b9;
  66. border-radius: 2rem;
  67. z-index: -1;
  68. }
  69. .config-card .head .line {
  70. position: absolute;
  71. width: 3.8rem;
  72. height: 1rem;
  73. left: 50%;
  74. margin-left: -1.9rem;
  75. bottom: -1px;
  76. }
  77. .config-card .head .priority {
  78. position: absolute;
  79. width: 3rem;
  80. height: 3rem;
  81. bottom: -1.5rem;
  82. left: 50%;
  83. margin-left: -1.5rem;
  84. line-height: 3rem;
  85. text-align: center;
  86. font-size: 1.8rem;
  87. border-radius: 2rem;
  88. }
  89. .config-card .head .priority.high {
  90. color: #E24034;
  91. }
  92. .config-card .head .priority.mid {
  93. color: #EB7D75;
  94. }
  95. .config-card .head .priority.low {
  96. color: #EF971C;
  97. }
  98. .config-card.add {
  99. color: #56abe4;
  100. font-size: 10rem;
  101. text-align: center;
  102. line-height: 14rem;
  103. }
  104. .config-card.add:hover span {
  105. color: #2196f3;
  106. }
  107. .config-card:hover .mask {
  108. display: block;
  109. }
  110. .config-card .mask {
  111. display: none;
  112. position: absolute;
  113. top: 0;
  114. left: 0;
  115. bottom: 0;
  116. right: 0;
  117. background-color: rgba(0, 0, 0, 0.3);
  118. }
  119. .config-card .mask .opts {
  120. width: 100%;
  121. height: 2rem;
  122. line-height: 1rem;
  123. position: absolute;
  124. top: 50%;
  125. margin-top: -0.5rem;
  126. text-align: center;
  127. }
  128. .config-card .mask .opts .opt-btn {
  129. cursor: pointer;
  130. font-size: 1.4rem;
  131. margin: 0.2rem 0.4rem;
  132. }
  133. .config-card .mask .opts.three .opt-btn {
  134. margin: 0.2rem 0;
  135. }