index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div id="app">
  3. <Header></Header>
  4. </div>
  5. </template>
  6. <script>
  7. import Header from '@/common/headers.vue'
  8. export default {
  9. components: {
  10. Header
  11. },
  12. data() {
  13. return {
  14. }
  15. },
  16. mounted() {
  17. }
  18. }
  19. </script>
  20. <style scoped>
  21. html, body, #app {
  22. height: 100% !important;
  23. /*-moz-user-select: none; /*火狐 firefox*/
  24. /*-webkit-user-select: none;/ /*webkit浏览器*/
  25. /*-ms-user-select: none;*/ /*IE10+*/
  26. /*user-select: none;*/
  27. }
  28. .main-content {
  29. position: relative;
  30. width: 100%;
  31. min-width: 1200px;
  32. min-height: 768px;
  33. background: url("http://chq.dygl.pujiaoyun.cn/static/img/banner.071530a.jpg") center 100% no-repeat;
  34. height: 100%;
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. padding-top: 50px;
  39. }
  40. .center {
  41. display: flex;
  42. flex-direction: row;
  43. justify-content: center;
  44. align-items: center;
  45. }
  46. .centerCol {
  47. display: flex;
  48. flex-direction: column;
  49. justify-content: center;
  50. align-items: center;
  51. }
  52. .overlay-wrap {
  53. padding: 20px 10px;
  54. background-color: rgba(218, 218, 218, 0.08);
  55. margin-top: 50px;
  56. }
  57. .logo {
  58. width: 200px;
  59. height: 200px;
  60. margin-bottom: 50px;
  61. }
  62. .btn-login {
  63. width: 150px;
  64. margin-top: 15px;
  65. background-color: rgba(204,204,204,.37) !important;
  66. border-color: #87888a !important;
  67. }
  68. .suc-text {
  69. color: #fff;
  70. font-size: 14px;
  71. font-weight: 200;
  72. }
  73. .user-wrap {
  74. position: absolute;
  75. right: 50px;
  76. top: 50px;
  77. color: white;
  78. font-size: 14px;
  79. font-weight: 200;
  80. }
  81. .ivu-avatar {
  82. background-color: #30a6e1 !important;
  83. margin-right: 10px;
  84. }
  85. .btn-exit {
  86. font-size: 12px;
  87. cursor: pointer;
  88. margin-left: 15px;
  89. }
  90. .select-role {
  91. margin-top: 15px;
  92. }
  93. .select-role /deep/ .ivu-select {
  94. color: #000 !important;
  95. width: 150px !important;
  96. }
  97. .select-role .ivu-select-selection {
  98. background-color: rgba(255,255,255,.18) !important;
  99. border-color: #373737 !important;
  100. }
  101. .select-role-wrap {
  102. background-color: rgba(218, 218, 218, 0.08);
  103. padding: 5px;
  104. justify-content: normal;
  105. flex-wrap: wrap;
  106. max-width: 930px;
  107. }
  108. .role-item {
  109. width: 210px;
  110. height: 210px;
  111. background-color: rgba(179,179,179,.15);
  112. margin: 10px;
  113. color: #c5c5c5;
  114. font-size: 14px;
  115. font-weight: 200;
  116. cursor: pointer;
  117. }
  118. .role-item:hover {
  119. background: rgba(179,179,179,.42);
  120. color: #fff;
  121. }
  122. .title {
  123. font-size: 26px;
  124. font-weight: 200;
  125. color: #fff;
  126. margin-bottom: 20px;
  127. }
  128. .role-name {
  129. margin-top: 10px;
  130. }
  131. </style>