apps-detail.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. .app-details2 {
  2. background-color: unset;
  3. }
  4. .app-details2 .details-top,
  5. .app-details2 .app-information,
  6. .app-details2 .tabs {
  7. background-color: #ffffff;
  8. }
  9. .app-details .details-bottom table th .th-line {
  10. border-left: unset;
  11. height: 23px;
  12. display: inline-block;
  13. padding-left: unset;
  14. color: rgba(21, 21, 21, 1);
  15. font-family: Source Han Sans SC;
  16. font-weight: 500;
  17. font-size: 14px;
  18. line-height: 23px;
  19. vertical-align: middle;
  20. }
  21. .app-details2 .d-table-wrap table td {
  22. padding: 0;
  23. }
  24. .app-details2 .d-table-wrap table td>div,
  25. .app-details2 .d-table-wrap table td>span,
  26. .app-details2 .d-table-wrap table td .test-download {
  27. padding: 0;
  28. font-family: Source Han Sans SC;
  29. font-weight: 500;
  30. font-size: 14px;
  31. line-height: 23px;
  32. vertical-align: middle;
  33. color: rgba(143, 149, 159, 1);
  34. }
  35. .app-details2 .copy.top-5 {
  36. color: rgba(33, 104, 251, 1);
  37. font-family: Source Han Sans SC;
  38. font-weight: 500;
  39. font-size: 13px;
  40. line-height: 23px;
  41. top: 0px;
  42. }
  43. .app-details2 .app-information .more-wrap img {
  44. width: 50px;
  45. height: 50px;
  46. position: absolute;
  47. left: 90px;
  48. top: -30px;
  49. transition: all 500ms;
  50. background-color: #fff;
  51. }
  52. .app-details2 .app-information .more-wrap img {
  53. width: 50px;
  54. height: 50px;
  55. position: absolute;
  56. left: 82px;
  57. top: -22px;
  58. transition: all 500ms;
  59. background-color: #fff;
  60. }
  61. /* 标签页样式 */
  62. .tabs {
  63. margin: 12px 0;
  64. padding: 10px 30px;
  65. }
  66. .tabs .nav-tabs {
  67. border-bottom: 0 solid #e5e5e5;
  68. }
  69. .tabs .nav-tabs > li > a {
  70. border: none;
  71. padding: 12px 2px;
  72. margin-right: 24px;
  73. border-radius: 0;
  74. color: rgba(143, 149, 159, 1);
  75. font-family: Source Han Sans SC;
  76. font-weight: 500;
  77. font-size: 15px;
  78. line-height: 20px;
  79. }
  80. .tabs .nav-tabs > li > a:hover {
  81. border: none;
  82. background-color: #ffffff;
  83. color: rgba(75, 132, 255, 1);
  84. }
  85. .tabs .nav-tabs > li.active > a,
  86. .tabs .nav-tabs > li.active > a:hover,
  87. .tabs .nav-tabs > li.active > a:focus {
  88. border: none;
  89. border-bottom: 2px solid rgba(75, 132, 255, 1);
  90. color: rgba(75, 132, 255, 1);
  91. font-weight: 700;
  92. }
  93. .tabs .tab-content {
  94. padding: 24px 0 0 0;
  95. }
  96. .tabs .tab-pane {
  97. min-height: 200px;
  98. }
  99. .app-details2 .table-list {
  100. padding: 0;
  101. }
  102. /* 设置区域样式 */
  103. .settings-section {
  104. margin-bottom: 30px;
  105. padding: 20px;
  106. background: #fff;
  107. border: 1px solid #e5e5e5;
  108. border-radius: 5px;
  109. }
  110. .section-title {
  111. margin: 0 0 20px 0;
  112. padding-bottom: 10px;
  113. border-bottom: 1px solid #e5e5e5;
  114. color: #333;
  115. font-size: 16px;
  116. font-weight: 600;
  117. }
  118. .section-title .iconfont {
  119. margin-right: 8px;
  120. color: #007AFF;
  121. }
  122. .form-group {
  123. margin-bottom: 15px;
  124. }
  125. .form-group .control-label {
  126. font-weight: 500;
  127. color: #555;
  128. margin-bottom: 5px;
  129. }
  130. .form-control-static {
  131. color: #333;
  132. padding: 8px 0;
  133. }
  134. .help-block {
  135. margin-top: 5px;
  136. color: #999;
  137. font-size: 12px;
  138. }
  139. .text-muted {
  140. color: #999;
  141. text-align: center;
  142. padding: 40px 0;
  143. }
  144. /* 应用版本 */
  145. .version-history-table>tbody>tr>th {
  146. background: rgba(245, 246, 247, 1);
  147. height: 36px;
  148. color: rgba(143, 149, 159, 1);
  149. font-family: Source Han Sans SC;
  150. font-weight: 500;
  151. font-size: 14px;
  152. line-height: 18px;
  153. }
  154. .version-history-table>tbody>tr>td {
  155. font-family: Source Han Sans SC;
  156. font-weight: 400;
  157. font-size: 14px;
  158. line-height: 13px;
  159. color: rgba(0, 0, 0, 1);
  160. }
  161. .version-history-table>tbody>tr>td.angle-parent {
  162. color: rgba(75, 132, 255, 1);
  163. }
  164. .version-history-table>tbody>tr>td>a {
  165. color: rgba(33, 104, 251, 1);
  166. font-weight: 500;
  167. font-size: 14px;
  168. }
  169. .version-history-table>tbody>tr>td>a+a {
  170. margin-left: 14px;
  171. }
  172. /* 通用表单样式 */
  173. .form-group .control-label {
  174. padding: 0;
  175. margin-bottom: 0;
  176. text-align: right;
  177. color: rgba(0, 0, 0, 1);
  178. font-family: Source Han Sans SC;
  179. font-weight: 500;
  180. font-size: 14px;
  181. line-height: 30px;
  182. }
  183. .form-control {
  184. border: 1px solid rgba(232, 234, 236, 1);
  185. width: 512px;
  186. height: 34px;
  187. padding: 0 20px;
  188. font-family: Source Han Sans SC;
  189. font-weight: 400;
  190. font-size: 14px;
  191. vertical-align: middle;
  192. color: rgba(0, 0, 0, 1);
  193. }
  194. .form-control:focus {
  195. border-color: #157df1;
  196. outline: 0;
  197. box-shadow: 0 0 0 2px rgba(21, 125, 241, 0.2);
  198. }
  199. .btn-apps-save {
  200. background: rgba(33, 104, 251, 1);
  201. line-height: 34px;
  202. border-radius: 4px;
  203. padding: 0 20px;
  204. color: #ffffff;
  205. border: unset;
  206. }
  207. /* 基本设置 - 表单样式 */
  208. .basic {
  209. /* padding: 20px 0; */
  210. }
  211. .basic .form-group {
  212. margin-bottom: 20px;
  213. }
  214. .basic .form-group .control-label {
  215. width: 65px;
  216. }
  217. .basic .form-group .control-label span {
  218. color: #ff4222;
  219. margin-right: 2px;
  220. }
  221. .basic .short-link .link {
  222. background: rgba(246, 248, 250, 1);
  223. width: 278px;
  224. height: 34px;
  225. line-height: 34px;
  226. padding-left: 20px;
  227. color: rgba(0, 0, 0, 1);
  228. font-size: 14px;
  229. }
  230. .basic .short-link .link-wrap {
  231. display: flex;
  232. width: 640px;
  233. }
  234. #url {
  235. width: 234px;
  236. }
  237. .form-group ul li .icon.icon-radio {
  238. background: url('/static/index/image/my-app/icon-radio-off.svg') no-repeat center;
  239. background-size: 100% 100%;
  240. width: 20px;
  241. height: 20px;
  242. margin-right: 12px;
  243. top: 0;
  244. }
  245. .form-group ul li .icon.icon-radio-checked {
  246. background-image: url('/static/index/image/my-app/icon-radio-on.svg');
  247. }
  248. /* 模态框样式 */
  249. .ms-modal .modal-sm {
  250. width: 320px;
  251. }
  252. .ms-modal .modal-dialog {
  253. margin-top: 100px;
  254. }
  255. .ms-modal .modal-body {
  256. padding: 30px;
  257. }
  258. .ms-modal .modal-content {
  259. border-radius: 8px;
  260. border: none;
  261. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  262. }
  263. .auto-hide-modal .modal-content {
  264. background-color: transparent;
  265. box-shadow: none;
  266. border: none;
  267. }
  268. .auto-hide-modal .auto-hide {
  269. background-color: #666;
  270. padding: 20px 25px;
  271. border-radius: 5px;
  272. display: inline-block;
  273. color: #fff;
  274. text-align: center;
  275. }
  276. .auto-hide .mt5 {
  277. margin-top: 5px;
  278. font-size: 14px;
  279. }
  280. .icon-modal-success3 {
  281. display: inline-block;
  282. width: 40px;
  283. height: 40px;
  284. background: url('/static/index/image/success-icon.png') no-repeat center;
  285. background-size: contain;
  286. margin-bottom: 10px;
  287. }
  288. /* 响应式样式 */
  289. @media (max-width: 768px) {
  290. .basic .form-group .control-label {
  291. text-align: left;
  292. margin-bottom: 5px;
  293. }
  294. .basic .short-link .col-sm-6 {
  295. margin-bottom: 10px;
  296. }
  297. .ms-modal .modal-dialog {
  298. margin: 50px 15px 10px;
  299. }
  300. }
  301. /* 高级设置样式 */
  302. .senior {
  303. /* padding: 20px 0; */
  304. }
  305. .senior .form-group {
  306. margin-bottom: 30px;
  307. }
  308. /* 单选按钮样式 */
  309. .senior .trust {
  310. list-style: none;
  311. padding: 0;
  312. margin: 0;
  313. }
  314. .senior .trust li {
  315. float: left;
  316. margin-right: 56px;
  317. cursor: pointer;
  318. padding: 8px 0;
  319. transition: all 0.3s ease;
  320. }
  321. .senior .trust li:hover {
  322. color: #157df1;
  323. }
  324. .senior .trust li.active {
  325. color: #157df1;
  326. }
  327. .senior .form-group .control-label {
  328. width: 84px;
  329. }
  330. /* 下载方式样式 */
  331. .senior .download-way {
  332. list-style: none;
  333. padding: 0;
  334. margin: 0;
  335. }
  336. .senior .download-way li {
  337. float: left;
  338. margin-right: 30px;
  339. cursor: pointer;
  340. padding: 10px 0;
  341. transition: all 0.3s ease;
  342. }
  343. .senior .download-way li:hover {
  344. color: #157df1;
  345. }
  346. .senior .download-way li.active {
  347. color: #157df1;
  348. }
  349. /* 表单控件样式 */
  350. .senior textarea.form-control {
  351. height: auto;
  352. min-height: 120px;
  353. resize: vertical;
  354. padding: 12px 20px;
  355. line-height: 1.5;
  356. }
  357. /* 条件显示元素 */
  358. #apppwd, .auth_code_dispense_url {
  359. transition: all 0.3s ease;
  360. }
  361. /* 响应式高级设置 */
  362. @media (max-width: 768px) {
  363. .senior .form-group .control-label {
  364. text-align: left;
  365. margin-bottom: 5px;
  366. }
  367. .senior .trust li,
  368. .senior .download-way li {
  369. float: none;
  370. margin-right: 0;
  371. margin-bottom: 10px;
  372. }
  373. .senior .download-way {
  374. margin-bottom: 20px;
  375. }
  376. }
  377. /* 模板设置样式 */
  378. .download-template {
  379. /* padding: 20px 0; */
  380. }
  381. .download-template .form-group {
  382. margin-bottom: 30px;
  383. }
  384. .download-template .form-group .control-label {
  385. width: 56px;
  386. }
  387. /* 模板语言设置样式 */
  388. .download-template .template-language {
  389. list-style: none;
  390. /* padding: 0; */
  391. /* margin: 0; */
  392. /* justify-content: left; */
  393. }
  394. .download-template .template-language li {
  395. float: left;
  396. margin-right: 56px;
  397. cursor: pointer;
  398. padding: 8px 0;
  399. }
  400. .download-template .template-language li:hover {
  401. color: #157df1;
  402. }
  403. .download-template .template-language li.active {
  404. color: #157df1;
  405. }
  406. .download-template .template-language li .icon-radio {
  407. background: url('/static/index/image/my-app/icon-radio-off.svg') no-repeat center;
  408. background-size: 100% 100%;
  409. width: 20px;
  410. height: 20px;
  411. margin-right: 12px;
  412. top: 0;
  413. }
  414. .download-template .template-language li .icon-radio-checked {
  415. background-image: url('/static/index/image/my-app/icon-radio-on.svg');
  416. }
  417. /* 模板选择样式 */
  418. .download-template .template-list {
  419. list-style: none;
  420. padding: 0;
  421. margin: 0;
  422. display: flex;
  423. flex-wrap: wrap;
  424. /* gap: 20px; */
  425. }
  426. .download-template .template-list li {
  427. position: relative;
  428. text-align: center;
  429. cursor: pointer;
  430. margin: 0 20px 20px 0;
  431. width: 120px;
  432. height: 151px;
  433. }
  434. .download-template .template-list li .t-checked {
  435. border: 2px solid rgba(43, 194, 101, 1);
  436. }
  437. .download-template .template-list li:hover,
  438. .download-template .template-list li.active {
  439. }
  440. .download-template .template-list li .t-checked::after {
  441. content: '';
  442. position: absolute;
  443. right: 0;
  444. bottom: 0;
  445. background-image: url('/static/index/image/my-app/icon-review.svg');
  446. background-size: 100% 100%;
  447. width: 25px;
  448. height: 25px;
  449. }
  450. .download-template .t-checked-wrap {
  451. position: relative;
  452. overflow: hidden;
  453. height: 100%;
  454. width: 100%;
  455. }
  456. .download-template .t-checked-wrap img {
  457. width: 100%;
  458. height: 100%;
  459. object-fit: cover;
  460. display: block;
  461. }
  462. .download-template .t-checked {
  463. position: absolute;
  464. top: 0;
  465. left: 0;
  466. right: 0;
  467. bottom: 0;
  468. /* background-color: rgba(21, 125, 241, 0.8); */
  469. display: none;
  470. align-items: center;
  471. justify-content: center;
  472. color: #fff;
  473. }
  474. .download-template .t-checked .icon-xuanzhong1 {
  475. font-size: 24px;
  476. }
  477. .download-template ul li .text {
  478. display: block;
  479. margin-top: 8px;
  480. color: #157df1;
  481. text-decoration: none;
  482. font-size: 14px;
  483. font-weight: 500;
  484. }
  485. .download-template ul li .text:hover {
  486. text-decoration: underline;
  487. }
  488. .download-template input[type="radio"] {
  489. display: none;
  490. }
  491. /* 响应式模板设置 */
  492. @media (max-width: 768px) {
  493. .download-template .form-group .control-label {
  494. text-align: left;
  495. margin-bottom: 5px;
  496. }
  497. .download-template .template-language li {
  498. float: none;
  499. margin-right: 0;
  500. margin-bottom: 10px;
  501. }
  502. .download-template ul {
  503. justify-content: center;
  504. }
  505. .download-template .t-checked-wrap img {
  506. width: 150px;
  507. height: 90px;
  508. }
  509. }