index.scss 23 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538
  1. @import './element-ui.scss';
  2. body {
  3. -moz-osx-font-smoothing: grayscale;
  4. -webkit-font-smoothing: antialiased;
  5. text-rendering: optimizeLegibility;
  6. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  7. font-size: 14px;
  8. }
  9. button, input, optgroup, select, textarea {
  10. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; /* 1 */
  11. }
  12. html, body {
  13. margin: 0;
  14. padding: 0;
  15. height: 100%;
  16. }
  17. b,
  18. strong {
  19. font-weight: bold;
  20. }
  21. //common css
  22. .mt-10 {
  23. margin-top: 10px
  24. }
  25. .mr-10 {
  26. margin-right: 10px
  27. }
  28. .h100 {
  29. height: 100%
  30. }
  31. .hide {
  32. display: none;
  33. }
  34. .fr {
  35. float: right;
  36. }
  37. .fl {
  38. float: left;
  39. }
  40. .pt {
  41. position: relative;
  42. }
  43. .pr-5 {
  44. padding-right: 5px;
  45. }
  46. .pl-5 {
  47. padding-left: 5px;
  48. }
  49. .block {
  50. display: block;
  51. }
  52. .pointer {
  53. cursor: pointer;
  54. }
  55. .inlineBlock {
  56. display: block;
  57. }
  58. textarea {
  59. resize: none;
  60. }
  61. //.l-block {
  62. // display: inline-block
  63. //}
  64. label {
  65. font-weight: normal;
  66. }
  67. html {
  68. box-sizing: border-box;
  69. }
  70. li {
  71. list-style: none;
  72. }
  73. *,
  74. *:before,
  75. *:after {
  76. box-sizing: inherit;
  77. }
  78. .no-padding {
  79. padding: 0px !important;
  80. }
  81. .padding-content {
  82. padding: 4px 0;
  83. }
  84. a:focus,
  85. a:active {
  86. outline: none;
  87. }
  88. a,
  89. a:focus,
  90. a:hover {
  91. cursor: pointer;
  92. color: inherit;
  93. text-decoration: none;
  94. }
  95. //去除chrome input上下箭头
  96. input::-webkit-outer-spin-button,
  97. input::-webkit-inner-spin-button {
  98. -webkit-appearance: none !important;
  99. margin: 0;
  100. }
  101. code {
  102. background: #eef1f6;
  103. padding: 15px 10px;
  104. margin-bottom: 20px;
  105. display: block;
  106. line-height: 36px;
  107. a {
  108. color: #337ab7;
  109. cursor: pointer;
  110. &:hover {
  111. color: rgb(32, 160, 255);
  112. }
  113. }
  114. }
  115. .fade-enter-active,
  116. .fade-leave-active {
  117. transition: all .2s ease
  118. }
  119. .fade-enter,
  120. .fade-leave-active {
  121. opacity: 0;
  122. }
  123. //main-container全局样式
  124. .app-container {
  125. padding: 20px;
  126. }
  127. .components-container {
  128. margin: 30px 50px;
  129. position: relative;
  130. }
  131. .pagination-container {
  132. margin-top: 20px;
  133. text-align: center;
  134. }
  135. .editor-container .CodeMirror {
  136. height: 100% !important;
  137. }
  138. .wscn-icon {
  139. }
  140. .sub-navbar {
  141. height: 50px;
  142. line-height: 50px;
  143. position: relative;
  144. width: 100%;
  145. text-align: right;
  146. padding-right: 20px;
  147. transition: 600ms ease position;
  148. background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  149. .subtitle {
  150. font-size: 20px;
  151. color: #fff;
  152. }
  153. &.draft {
  154. background: #d0d0d0;
  155. }
  156. &.deleted {
  157. background: #d0d0d0;
  158. }
  159. }
  160. .link-type,
  161. .link-type:focus {
  162. color: #337ab7;
  163. cursor: pointer;
  164. &:hover {
  165. color: rgb(32, 160, 255);
  166. }
  167. }
  168. .publishedTag,
  169. .draftTag,
  170. .deletedTag {
  171. color: #fff;
  172. background-color: $panGreen;
  173. line-height: 1;
  174. text-align: center;
  175. margin: 0;
  176. padding: 8px 12px;
  177. font-size: 14px;
  178. border-radius: 4px;
  179. position: absolute;
  180. left: 20px;
  181. top: 10px;
  182. }
  183. .draftTag {
  184. background-color: $yellow;
  185. }
  186. .deletedTag {
  187. background-color: $red;
  188. }
  189. .input-label {
  190. font-size: 14px;
  191. color: #48576a;
  192. line-height: 1;
  193. padding: 11px 5px 11px 0;
  194. }
  195. .clearfix {
  196. &:after {
  197. visibility: hidden;
  198. display: block;
  199. font-size: 0;
  200. content: " ";
  201. clear: both;
  202. height: 0;
  203. }
  204. }
  205. .no-marginLeft {
  206. .el-checkbox {
  207. margin: 0 20px 15px 0;
  208. }
  209. .el-checkbox + .el-checkbox {
  210. margin-left: 0px;
  211. }
  212. }
  213. .filter-container {
  214. padding-bottom: 10px;
  215. .filter-item {
  216. display: inline-block;
  217. vertical-align: middle;
  218. margin-bottom: 10px;
  219. }
  220. }
  221. .filter-container {
  222. margin: 15px 0 10px;
  223. padding-bottom: 0;
  224. float: right;
  225. }
  226. //refine vue-multiselect plugin
  227. .multiselect {
  228. line-height: 16px;
  229. }
  230. .multiselect--active {
  231. z-index: 1000 !important;
  232. }
  233. //refine simplemde
  234. .simplemde-container {
  235. .editor-toolbar.fullscreen, .CodeMirror-fullscreen {
  236. z-index: 1003;
  237. }
  238. }
  239. @keyframes octocat-wave {
  240. 0%,
  241. 100% {
  242. transform: rotate(0)
  243. }
  244. 20%,
  245. 60% {
  246. transform: rotate(-25deg)
  247. }
  248. 40%,
  249. 80% {
  250. transform: rotate(10deg)
  251. }
  252. }
  253. //table 部分
  254. .blue-table {
  255. thead {
  256. th {
  257. // height:40px;
  258. // line-height:40px;
  259. // border: none;
  260. background-color: #f3f3f3;
  261. }
  262. td {
  263. border-color: #FFF;
  264. }
  265. }
  266. tbody {
  267. .cell {
  268. border: none;
  269. text-align: center;
  270. height: 44px;
  271. line-height: 44px;
  272. }
  273. tr {
  274. // height: 40px;
  275. // line-height: 40px;
  276. }
  277. td {
  278. border-bottom: none;
  279. // padding:5px 0;
  280. }
  281. }
  282. }
  283. .el-table {
  284. .cell {
  285. height: 44px;
  286. line-height: 44px;
  287. overflow: hidden;
  288. white-space: nowrap;
  289. text-overflow: ellipsis;
  290. }
  291. th {
  292. background-color: #eef1f6;
  293. text-align: center;
  294. .cell {
  295. height: 40px;
  296. line-height: 40px;
  297. color: #000;
  298. }
  299. }
  300. td {
  301. border-bottom: none;
  302. text-align: center;
  303. }
  304. }
  305. .cell {
  306. height: 40px;
  307. line-height: 40px;
  308. border: none;
  309. }
  310. .cell {
  311. height: 40px;
  312. line-height: 40px;
  313. border: none;
  314. overflow: hidden;
  315. white-space: nowrap;
  316. text-overflow: ellipsis;
  317. }
  318. //button
  319. //big button in table head
  320. .btn {
  321. width: 82px;
  322. height: 28px;
  323. line-height: 28px;
  324. border: none;
  325. font-size: 12px;
  326. border-radius: 4px;
  327. padding: 0 14px;
  328. letter-spacing: 1px;
  329. }
  330. .btn-add, .el-button--primary.btn-add:hover {
  331. background: #4d84ba
  332. }
  333. .btn-edit, .el-button--primary.btn-edit:hover {
  334. background: #46be94
  335. }
  336. .btn-delete, .el-button--danger.btn-delete:hover {
  337. background: #de5237;
  338. }
  339. .btn-reset {
  340. background-color: #ddd;
  341. }
  342. .btn-add, .el-button--primary.btn-add:hover {
  343. background: #4d84ba;
  344. color: #FFF;
  345. }
  346. .btn-edit, .el-button--primary.btn-edit:hover {
  347. background: #46be94;
  348. color: #FFF;
  349. }
  350. .btn-delete, .el-button--danger.btn-delete:hover {
  351. background: #de5237;
  352. color: #FFF;
  353. }
  354. .icon-add1, .icon-delete1, .icon-edit1, .icon-tag, .icon-cancel, .icon-sucai {
  355. overflow: hidden;
  356. width: 13px;
  357. height: 13px;
  358. fill: #ffffff;
  359. vertical-align: middle;
  360. position: relative;
  361. right: 0;
  362. bottom: 1px;
  363. }
  364. .icon-sucai {
  365. width: 16px;
  366. height: 16px;
  367. fill: #444;
  368. }
  369. .btn-tags .el-button {
  370. padding: 4px;
  371. border: none;
  372. background: none;
  373. }
  374. .btn-tags .el-button:hover .icon-tag {
  375. fill: #000;
  376. }
  377. .icon-tag {
  378. fill: #666;
  379. width: 20px;
  380. height: 20px;
  381. }
  382. .icon-cancel {
  383. fill: #666
  384. }
  385. .icon-btn, .data-table {
  386. .icon {
  387. width: 16px;
  388. height: 16px;
  389. fill: #8ab4da;
  390. border: none;
  391. }
  392. .icon:hover {
  393. fill: #5c8cb4;
  394. }
  395. }
  396. .cell .el-button--small {
  397. padding: 4px 5px;
  398. border: none;
  399. background: none;
  400. }
  401. // big save button container
  402. .button-container {
  403. margin-top: 40px;
  404. button {
  405. width: 120px;
  406. border: 1px solid #5584ff;
  407. border-radius: 30px;
  408. background-color: #fff;
  409. color: #5584ff;
  410. font-size: 14px;
  411. }
  412. .save {
  413. background-color: #5584ff;
  414. color: #fff;
  415. }
  416. .icon {
  417. width: 14px;
  418. height: 14px;
  419. padding-top: 2px;
  420. margin-right: 5px;
  421. }
  422. .icon-save {
  423. fill: #fff;
  424. }
  425. }
  426. .search-dialog .el-button {
  427. // border: 1px solid #c4c4c4;
  428. width: 48%;
  429. }
  430. .search-dialog{
  431. overflow-x: hidden;
  432. }
  433. .el-table__row .el-button + .el-button {
  434. margin-left: 0px;
  435. }
  436. .account-filter-container {
  437. float: right;
  438. margin: 15px 0 10px;
  439. padding-bottom: 0;
  440. }
  441. .el-table th {
  442. font-weight: normal;
  443. }
  444. .v-content {
  445. clear: both;
  446. background-color: #fff;
  447. padding: 10px 20px 20px;
  448. // border:solid 1px #c6cad6;
  449. }
  450. .cell img {
  451. height: 36px;
  452. width: 36px;
  453. vertical-align: middle;
  454. border-radius: 50%;
  455. }
  456. .dialogForm .el-dialog {
  457. width: 800px;
  458. margin-bottom: 0;
  459. top: 50% !important;
  460. left: 50% !important;
  461. margin-top: -290px;
  462. margin-left: -300px;
  463. transform: translateX(0);
  464. // height: 550px;
  465. }
  466. .dialogShowFansForm .el-dialog {
  467. width: 1200px;
  468. margin-bottom: 0;
  469. top: 50% !important;
  470. left: 50% !important;
  471. margin-top: -295px;
  472. margin-left: -600px;
  473. transform: translateX(0);
  474. }
  475. .dialogFans360Form .el-dialog {
  476. width: 1200px;
  477. margin-bottom: 0;
  478. top: 50% !important;
  479. left: 50% !important;
  480. margin-top: -295px;
  481. margin-left: -600px;
  482. transform: translateX(0);
  483. height: 630px;
  484. }
  485. .dialogFormBox {
  486. overflow: auto;
  487. max-height: 420px;
  488. }
  489. .el-form-item {
  490. margin-bottom: 20px;
  491. }
  492. ::-webkit-scrollbar {
  493. width: 8px;
  494. height: 8px;
  495. background-color: #F5F5F5;
  496. }
  497. /*定义滚动条轨道 内阴影+圆角*/
  498. ::-webkit-scrollbar-track {
  499. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  500. border-radius: 3px;
  501. background-color: #eee;
  502. }
  503. /*定义滑块 内阴影+圆角*/
  504. ::-webkit-scrollbar-thumb {
  505. border-radius: 3px;
  506. -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .2);
  507. background-color: #ccc;
  508. }
  509. .radioLabel {
  510. width: 90%;
  511. overflow: hidden;
  512. text-overflow: ellipsis;
  513. }
  514. //sharing-material
  515. //组织机构组件横向滚动条
  516. .sharing-material {
  517. .item {
  518. position: relative;
  519. margin-top: 15px;
  520. .icon-container {
  521. padding-left: 10px;
  522. padding-right: 10px;
  523. margin-top: 5px;
  524. }
  525. .icon-container:after {
  526. content: "\0020";
  527. display: block;
  528. height: 0;
  529. clear: both;
  530. }
  531. .item-wrapper {
  532. box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px 6px 0px;
  533. padding-bottom: 10px;
  534. border: solid 1px #c8cbd0;
  535. overflow: hidden;
  536. .icon-wrapper {
  537. margin-left: 5px;
  538. }
  539. .icon-wrapper:first-child {
  540. margin-left: 0;
  541. }
  542. .icon-wrapper:last-child {
  543. float: right;
  544. }
  545. .image-cover {
  546. position: absolute;
  547. top: 0;
  548. width: 100%;
  549. height: 192px;
  550. }
  551. .image-cover-black {
  552. background-color: rgba(0, 0, 0, 0.6);
  553. }
  554. .image-cover-white {
  555. background-color: rgba(255, 255, 255, 0.6);
  556. }
  557. }
  558. }
  559. .material-content .account-filter-container {
  560. margin: 0;
  561. }
  562. //account 实例下拉框
  563. .control-bar {
  564. color: #999;
  565. .select-all-wrapper {
  566. position: relative;
  567. }
  568. .select-all {
  569. vertical-align: middle;
  570. margin-left: 25px;
  571. font-size: 14px;
  572. line-height: 14px;
  573. color: #999;
  574. }
  575. .float-right{
  576. float: right;
  577. }
  578. a {
  579. //float: right;
  580. font-size: 14px;
  581. line-height: 14px;
  582. vertical-align: middle;
  583. margin-top: 2px;
  584. color: #999;
  585. // text-decoration: underline;
  586. }
  587. a:hover {
  588. color: #4d84ba;
  589. }
  590. }
  591. .el-scrollbar__view {
  592. max-width: 300px;
  593. }
  594. .material-content {
  595. display: inline-block;
  596. }
  597. .icon-edit1 {
  598. fill: #61c2c4;
  599. width: 14px;
  600. height: 14px;
  601. }
  602. .icon-wrapper {
  603. display: inline-block;
  604. width: 28px;
  605. height: 28px;
  606. border-radius: 100%;
  607. border: 1px solid #61c2c4;
  608. text-align: center;
  609. line-height: 28px;
  610. }
  611. .delete {
  612. border: 1px solid #e46456;
  613. }
  614. .delete .icon-edit1 {
  615. fill: #e46456;
  616. }
  617. //material
  618. .material-wrapper {
  619. border: 1px solid #c8cbd0;
  620. padding-top: 20px;
  621. padding-bottom: 30px;
  622. margin-top: 38px;
  623. background: #fff;
  624. }
  625. .material-title {
  626. text-align: center;
  627. height: 40px;
  628. line-height: 40px;
  629. margin: 0;
  630. padding: 0 10px;
  631. overflow: hidden;
  632. text-overflow: ellipsis;
  633. white-space: nowrap;
  634. }
  635. .checkbox {
  636. width: 16px;
  637. height: 16px;
  638. position: absolute;
  639. top: 1px;
  640. left: 0;
  641. }
  642. .item-checkbox {
  643. right: 20px;
  644. left: auto;
  645. top: 10px;
  646. z-index: 999;
  647. }
  648. .material-content {
  649. width: 100%;
  650. overflow: auto;
  651. .delete:hover {
  652. background: #e46456
  653. }
  654. }
  655. }
  656. //upload-img-container
  657. .avatar-uploader .el-upload {
  658. border: 1px dashed #d9d9d9;
  659. border-radius: 6px;
  660. cursor: pointer;
  661. position: relative;
  662. overflow: hidden;
  663. }
  664. .avatar-uploader .el-upload:hover {
  665. border-color: #20a0ff;
  666. }
  667. .avatar-uploader-icon {
  668. font-size: 28px;
  669. color: #8c939d;
  670. width: 50px;
  671. height: 50px;
  672. line-height: 50px;
  673. text-align: center;
  674. border: 1px solid #ccc;
  675. }
  676. .avatar {
  677. width: 84px;
  678. height: 84px;
  679. display: block;
  680. }
  681. //push-message
  682. .exhibition .el-tabs__nav-wrap {
  683. padding-left: 155px;
  684. .el-tabs__nav-next, .el-tabs__nav-prev {
  685. display: none;
  686. }
  687. }
  688. .select-radio .el-radio__label {
  689. display: none;
  690. }
  691. .message-country label {
  692. text-indent: 14px;
  693. }
  694. .message-city label {
  695. text-indent: 14px;
  696. }
  697. .message-province label {
  698. text-indent: 28px;
  699. }
  700. .material-icon {
  701. width: 100px;
  702. height: 100px;
  703. line-height: 100px;
  704. }
  705. .dataRport {
  706. text-align: right;
  707. }
  708. .fans-filter-container {
  709. float: right;
  710. margin: 15px 0 10px;
  711. padding-bottom: 0;
  712. }
  713. .message-container {
  714. width: 100%;
  715. .message {
  716. height: 350px;
  717. padding: 10px 15px;
  718. overflow: auto;
  719. background-color: #F5F5F5;
  720. border-bottom: 1px solid #ccc;
  721. }
  722. .message-wrapper {
  723. border-right: solid 1px #d5d5d5;
  724. }
  725. .el-icon-close:before {
  726. content: "\E60C";
  727. color: #999;
  728. font-size: 14px;
  729. display: inline-block;
  730. margin: 10px 15px 0 0;
  731. }
  732. .message li {
  733. margin-bottom: 15px;
  734. left: 0;
  735. position: relative;
  736. display: block;
  737. }
  738. .message .time {
  739. margin: 10px 0;
  740. text-align: center;
  741. }
  742. .message .text {
  743. display: inline-block;
  744. position: relative;
  745. max-width: calc(100% - 75px);
  746. min-height: 35px;
  747. line-height: 2.1;
  748. font-size: 14px;
  749. padding: 3px 10px;
  750. text-align: left;
  751. word-break: break-all;
  752. background-color: #fff;
  753. color: #000;
  754. border-radius: 4px;
  755. // box-shadow: 0px 1px 7px -5px #000;
  756. }
  757. .message .avatar {
  758. float: left;
  759. margin: 0 10px 0 0;
  760. border-radius: 3px;
  761. background: #fff;
  762. }
  763. .message .time > span {
  764. display: inline-block;
  765. padding: 5px 5px;
  766. font-size: 12px;
  767. color: #999;
  768. }
  769. .message .system > span {
  770. padding: 4px 9px;
  771. text-align: left;
  772. }
  773. .message .text:before {
  774. content: " ";
  775. position: absolute;
  776. top: 12px;
  777. right: 100%;
  778. border: 5px solid transparent;
  779. border-right-color: #fff;
  780. }
  781. .message .self {
  782. text-align: right;
  783. }
  784. .message .self .avatar {
  785. float: right;
  786. margin: 0 0 0 10px;
  787. width: 35px;
  788. height: 35px;
  789. }
  790. .message .self .text {
  791. background-color: rgb(158, 234, 106);
  792. // border:none;
  793. }
  794. .message .self .text:before {
  795. right: inherit;
  796. left: 100%;
  797. border-right-color: transparent;
  798. border-left-color: rgb(158, 234, 106);
  799. }
  800. .message .image {
  801. max-width: 200px;
  802. }
  803. img.static-emotion-gif, img.static-emotion {
  804. vertical-align: middle !important;
  805. }
  806. .an-move-left {
  807. left: 0;
  808. animation: moveLeft .7s ease;
  809. -webkit-animation: moveLeft .7s ease;
  810. }
  811. .an-move-right {
  812. left: 0;
  813. animation: moveRight .7s ease;
  814. -webkit-animation: moveRight .7s ease;
  815. }
  816. @keyframes moveRight {
  817. 0% {
  818. left: -20px;
  819. opacity: 0
  820. }
  821. 100% {
  822. left: 0;
  823. opacity: 1
  824. }
  825. }
  826. @-webkit-keyframes moveRight {
  827. 0% {
  828. left: -20px;
  829. opacity: 0
  830. }
  831. 100% {
  832. left: 0;
  833. opacity: 1
  834. }
  835. }
  836. @keyframes moveLeft {
  837. 0% {
  838. left: 20px;
  839. opacity: 0
  840. }
  841. 100% {
  842. left: 0;
  843. opacity: 1
  844. }
  845. }
  846. @-webkit-keyframes moveLeft {
  847. 0% {
  848. left: 20px;
  849. opacity: 0;
  850. }
  851. 100% {
  852. left: 0;
  853. opacity: 1
  854. }
  855. }
  856. .el-dialog__body {
  857. padding: 0;
  858. }
  859. .history-message {
  860. position: absolute;
  861. top: 0;
  862. left: 100%;
  863. width: 50%;
  864. background-color: #fff;
  865. .el-dialog__header {
  866. height: 47px;
  867. }
  868. }
  869. .el-dialog__header {
  870. padding: 0px;
  871. }
  872. .el-dialog--small {
  873. width: 40%;
  874. top: 50% !important;
  875. margin-top: -275px;
  876. }
  877. .el-dialog {
  878. border-radius: 0;
  879. }
  880. .material-btn {
  881. border: 0;
  882. }
  883. .history-message-btn {
  884. float: right;
  885. border: 0;
  886. border-radius: 0;
  887. }
  888. .message_send textarea {
  889. border: 0;
  890. resize: none;
  891. padding-left: 10px;
  892. }
  893. .el-dialog__body {
  894. .el-dialog__header {
  895. padding-left: 15px;
  896. background-color: #f3efeb;
  897. height: 47px;
  898. line-height: 47px;
  899. border-bottom: solid 1px #d5d5d5;
  900. }
  901. .el-dialog__title {
  902. color: #333;
  903. font-size: 16px;
  904. font-weight: 700;
  905. font-family: "微软雅黑"
  906. }
  907. .el-dialog__close {
  908. color: #de5237;
  909. }
  910. }
  911. .message_send textarea {
  912. height: 63px;
  913. }
  914. }
  915. .user-info-dialog {
  916. .el-dialog {
  917. top: 50%;
  918. left: 39%;
  919. width: 16%;
  920. }
  921. .el-dialog:before {
  922. content: " ";
  923. position: absolute;
  924. bottom: 100%;
  925. left: 20px;
  926. border: 6px solid transparent;
  927. border-bottom-color: #fff;
  928. }
  929. }
  930. //qr-code
  931. .add-code {
  932. .el-menu--horizontal .el-menu-item {
  933. height: 50px;
  934. line-height: 50px;
  935. }
  936. .el-menu-item.is-active {
  937. border-bottom: none;
  938. color: #48576a;
  939. }
  940. .el-menu--horizontal .el-menu-item {
  941. float: left;
  942. }
  943. .code-main {
  944. padding-top: 53px;
  945. }
  946. .navbar-container {
  947. .router-link-active .el-menu-item {
  948. border-bottom: 5px solid #4d84ba;
  949. color: #4d84ba;
  950. }
  951. }
  952. .child-code {
  953. padding: 20px;
  954. background: #fff;
  955. min-height: 450px;
  956. }
  957. .show-all-btn {
  958. float: right;
  959. height: 100%;
  960. padding: 0;
  961. padding-right: 5px;
  962. border: none;
  963. background-color: inherit;
  964. }
  965. tbody {
  966. .cell {
  967. border-bottom: 1px solid #ccc;
  968. }
  969. }
  970. .el-input.is-disabled {
  971. .el-input__inner {
  972. background-color: #fff;
  973. color: #000;
  974. }
  975. }
  976. .el-textarea.is-disabled {
  977. .el-textarea__inner {
  978. background-color: #fff;
  979. color: #000;
  980. }
  981. }
  982. .code-list {
  983. .el-table {
  984. height: 400px;
  985. overflow-y: auto;
  986. }
  987. }
  988. .el-select {
  989. width: 100%;
  990. }
  991. .connected-car {
  992. .el-select {
  993. width: auto;
  994. }
  995. }
  996. .code-edit-bar {
  997. position: absolute;
  998. left: 250px;
  999. top: 200px;
  1000. ul {
  1001. padding: 0;
  1002. margin-left: 10px;
  1003. li {
  1004. margin-top: 10px;
  1005. .el-button--small {
  1006. padding: 4px 5px;
  1007. }
  1008. }
  1009. }
  1010. }
  1011. .el-date-editor--date {
  1012. width: 100%;
  1013. }
  1014. .qr-code-container {
  1015. margin-left: 50px;
  1016. text-align: center;
  1017. img {
  1018. width: 100px;
  1019. }
  1020. }
  1021. }
  1022. .code-part {
  1023. .el-date-editor.el-input {
  1024. width: 100%;
  1025. }
  1026. }
  1027. .item-wrapper-img {
  1028. height: 175px;
  1029. overflow: hidden;
  1030. display: table-cell;
  1031. display: block\0;
  1032. vertical-align: middle;
  1033. border-bottom: solid 1px #dedede;
  1034. padding: 4px;
  1035. line-height: 0;
  1036. width: 1000px;
  1037. width: 100%\0;
  1038. text-align: center;
  1039. }
  1040. .item-wrapper-img img {
  1041. max-height: 100%;
  1042. max-width: 100%;
  1043. position: relative;
  1044. top:50%;
  1045. transform: translateY(-50%);
  1046. -webkit-transform: translateY(-50%);
  1047. }
  1048. // 标签管理
  1049. .container {
  1050. position: absolute;
  1051. top: 111px;
  1052. background: #fff;
  1053. border: solid 1px #c6cad6;
  1054. bottom: 20px;
  1055. right: 20px;
  1056. left: 20px;
  1057. padding: 20px;
  1058. }
  1059. .userlabel-content {
  1060. height: 100%;
  1061. }
  1062. .userlabel-tree {
  1063. overflow: auto;
  1064. position: absolute;
  1065. left: 0;
  1066. right: 0;
  1067. bottom: 0;
  1068. top: 45px;
  1069. border-radius: 5px;
  1070. }
  1071. .icon-wrapper:hover {
  1072. background: #61c2c4
  1073. }
  1074. .icon-wrapper:hover svg, .delete:hover .icon-edit1 {
  1075. fill: #fff;
  1076. }
  1077. .dashboard-container {
  1078. clear: both;
  1079. }
  1080. //disabled
  1081. .is-disabled {
  1082. svg {
  1083. fill: #bfcbd9;
  1084. }
  1085. }
  1086. .triangle-topright {
  1087. position: absolute;
  1088. right: 15px;
  1089. top: 0;
  1090. width: 0;
  1091. height: 0;
  1092. border-top: 60px solid rgba(0, 0, 0, 0.4);
  1093. border-left: 60px solid transparent;
  1094. z-index: 999;
  1095. }
  1096. .checkbox-normal {
  1097. width: 22px;
  1098. height: 22px;
  1099. position: absolute;
  1100. }
  1101. .item-checkbox-topleft {
  1102. left: 20px;
  1103. top: 5px;
  1104. z-index: 999;
  1105. //top: 1px;
  1106. //left: 0;
  1107. }
  1108. .triangle-topleft {
  1109. position: absolute;
  1110. left: 15px;
  1111. top: 0;
  1112. width: 0;
  1113. height: 0;
  1114. border-top: 60px solid rgba(108,226,108, 0.4);
  1115. border-right: 60px solid transparent;
  1116. z-index: 999;
  1117. }
  1118. .count-contaner {
  1119. .el-form-item__content {
  1120. margin-left: 0 !important;
  1121. }
  1122. }
  1123. .material-select-btn {
  1124. display: inline-block;
  1125. button {
  1126. border: 0;
  1127. }
  1128. }
  1129. //小分页
  1130. .small-page {
  1131. margin-top: 4px;
  1132. position: relative;
  1133. height: 33px;
  1134. .el-pager li.active + li {
  1135. border-left: 0;
  1136. }
  1137. .el-pagination .btn-next, .el-pagination .btn-prev {
  1138. border: 0;
  1139. padding-top: 5px;
  1140. }
  1141. .el-pagination {
  1142. position: absolute;
  1143. right: 0;
  1144. }
  1145. .message-filter-icon {
  1146. position: absolute;
  1147. left: 5px;
  1148. padding: 0;
  1149. border: 0;
  1150. top: 10px;
  1151. display: inline-block;
  1152. }
  1153. .el-input {
  1154. width: 80px;
  1155. }
  1156. .el-input__inner {
  1157. height: 28px;
  1158. }
  1159. .el-autocomplete {
  1160. width: 100%;
  1161. }
  1162. .search-bar-btn {
  1163. position: absolute;
  1164. top: 5px;
  1165. right: 10px;
  1166. height: 28px;
  1167. padding: 4px 15px;
  1168. }
  1169. .search-bar {
  1170. height: 37px;
  1171. width: 100%;
  1172. position: absolute;
  1173. bottom: 33px;
  1174. background: #fff;
  1175. left: 0;
  1176. border-bottom: 1px solid #ccc;
  1177. }
  1178. }
  1179. .card-container {
  1180. .card-wrapper {
  1181. max-width: 100%;
  1182. width: 150px;
  1183. height: 78px;
  1184. background-color: white;
  1185. border-radius: 5px;
  1186. }
  1187. .card-body {
  1188. border-bottom: dashed 1px gray;
  1189. height: 50px;
  1190. }
  1191. .card-img-container {
  1192. float: left;
  1193. margin: 10px;
  1194. height: 30px;
  1195. width: 20%;
  1196. img {
  1197. width: 30px;
  1198. height: 30px;
  1199. border-radius: 50%;
  1200. }
  1201. }
  1202. .card-title {
  1203. margin-top: 15px;
  1204. float: left;
  1205. width: 50%;
  1206. overflow: hidden;
  1207. text-overflow: ellipsis;
  1208. white-space: nowrap;
  1209. }
  1210. .card-foot {
  1211. font-size: 12px;
  1212. color: gray;
  1213. text-align: center;
  1214. }
  1215. .push-msg-card-foot{
  1216. padding: 10px;
  1217. }
  1218. }
  1219. // 消息提示
  1220. .msg-error{
  1221. background-color: #e44c3c;
  1222. // border:solid 1px #fedddd;
  1223. }
  1224. .msg-error .errorCode{
  1225. font-size:12px;color:#f99;
  1226. }
  1227. .msg-error:before{
  1228. content: "\D7";background-color: #ac382c;
  1229. }
  1230. .msg-success:before{
  1231. content: "\2714";background-color:#1c8048;
  1232. }
  1233. .msg-error:before,.msg-success:before{
  1234. width: 62px;
  1235. height: 52px;
  1236. display: block;
  1237. float: left;
  1238. font-size: 28px;
  1239. font-weight: 700;
  1240. text-align: center;
  1241. line-height: 52px;
  1242. color: #fff;
  1243. }
  1244. .msg-success{
  1245. background-color: #24ac60;
  1246. // border:solid 1px #fedddd;
  1247. }
  1248. .reply-message-container{
  1249. overflow: hidden;
  1250. }
  1251. //行内多行表格
  1252. .filter-table .el-table__row .cell{
  1253. height: auto;
  1254. padding: 0;
  1255. }
  1256. .inner-table {
  1257. border: 0;
  1258. .el-table__header {
  1259. display: none;
  1260. }
  1261. .el-table__row td:last-child{
  1262. border: 0;
  1263. }
  1264. .el-table__row>td:last-child{
  1265. border: 0;
  1266. }
  1267. }
  1268. //问卷
  1269. .question-item{
  1270. .option-item{
  1271. margin-bottom: 20px;
  1272. .el-form-item__label{
  1273. width: 40px!important;
  1274. }
  1275. .el-form-item__content{
  1276. margin-left: 40px!important;
  1277. }
  1278. }
  1279. .title{
  1280. margin-left: 10px;
  1281. }
  1282. }
  1283. .report-btn{
  1284. width: 82px;
  1285. height: 28px;
  1286. line-height: 28px;
  1287. font-size: 12px;
  1288. border-radius: 4px;
  1289. padding: 0 14px;
  1290. letter-spacing: 1px;
  1291. }
  1292. .underline{
  1293. color: #0000cc;
  1294. text-decoration:underline;
  1295. }
  1296. .box-show{
  1297. .corner{
  1298. display:none;
  1299. }
  1300. }
  1301. .box-show:hover{
  1302. .corner{
  1303. display:block;
  1304. }
  1305. }
  1306. .box-show .corner-show{
  1307. display:block !important;
  1308. }
  1309. .material-tag-topright {
  1310. position: absolute;
  1311. right: 0;
  1312. top: 5px;
  1313. width: 0;
  1314. height: 0;
  1315. margin-right: 50px;
  1316. z-index: 999;
  1317. }
  1318. .material-tag-item {
  1319. margin-top: 5px;
  1320. margin-left: 5px;
  1321. line-height: 30px;
  1322. color: #409EFF;
  1323. }
  1324. .bookmark-box {
  1325. width: 50px;
  1326. height: 33px;
  1327. background: url("../bookmarks.png") no-repeat;
  1328. background-size:cover;
  1329. opacity:0.85;
  1330. filter:Alpha(opacity=85); /* IE8 以及更早的浏览器 */
  1331. transform: rotate(-15deg);
  1332. -ms-transform: rotate(-15deg);
  1333. /* IE 9 */
  1334. -webkit-transform: rotate(-15deg);
  1335. /* Safari and Chrome */
  1336. -o-transform: rotate(-15deg);
  1337. /* Opera */
  1338. -moz-transform: rotate(-15deg);
  1339. /* Firefox */
  1340. }
  1341. .icon-info{
  1342. width: 26px;
  1343. height: 26px;
  1344. //fill: #4d84b;
  1345. }
  1346. .icon-enable1,.icon-disable1{
  1347. width: 26px;
  1348. height: 26px;
  1349. }
  1350. .icon-enable {
  1351. overflow: hidden;
  1352. width: 13px;
  1353. height: 13px;
  1354. fill: #ffffff;
  1355. vertical-align: middle;
  1356. position: relative;
  1357. right: 0;
  1358. bottom: 1px;
  1359. }
  1360. .icon-disable{
  1361. overflow: hidden;
  1362. width: 13px;
  1363. height: 13px;
  1364. fill: #ffffff;
  1365. vertical-align: middle;
  1366. position: relative;
  1367. right: 0;
  1368. bottom: 1px;
  1369. }