Home Explore Help
Sign In
xieshengjie
/
hb_sis_zhfx
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: a4f64f46e4
Branches Tags
hb_sis_zhfx
/
src
/
App.vue

App.vue 17 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 
  1. <template>
    2. 

  2.   <div v-if="isLogined" class="main">
    3. 

  3.     <div class="header-body">
    4. 

  4.       <div class="header-title">
    5. 

  5.         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.667vh" height="3.704vh" viewBox="0 0 377.437 91.615" enable-background="new 0 0 377.437 91.615" xml:space="preserve">
    6. 

  6.           <g id="图层_1">
    7. 

  7.             <g>
    8. 

  8.               <path
    9. 

  9.                 id="XMLID_489_"
    10. 

  10.                 fill="#FFF"
    11. 

  11.                 d="M148.946,81.252c-6.114,0-10.656-4.561-10.656-10.33v-0.061c0-5.708,4.448-10.389,10.833-10.389c3.919,0,6.269,1.265,8.197,3.103l-2.912,3.241c-1.602-1.407-3.233-2.266-5.315-2.266c-3.503,0-6.025,2.811-6.025,6.256v0.055c0,3.444,2.463,6.313,6.025,6.313c2.378,0,3.833-0.915,5.468-2.35l2.909,2.84C155.329,79.877,152.955,81.252,148.946,81.252z"
    12. 

  12.               />
    13. 

  13.               <polygon id="XMLID_488_" fill="#FFF" points="173.271,60.817 173.271,68.472 164.839,68.472 164.839,60.817 160.263,60.817 160.263,80.907 164.839,80.907 164.839,72.547 173.271,72.547 173.271,80.907 177.843,80.907 177.843,60.817" />
    14. 

  14.               <path id="XMLID_486_" fill="#FFF" d="M195.929,80.907l-10.063-12.77v12.77h-4.516v-20.09h4.214l9.743,12.373V60.817h4.514v20.09H195.929z" />
    15. 

  15.               <path
    16. 

  16.                 id="XMLID_484_"
    17. 

  17.                 fill="#FFF"
    18. 

  18.                 d="M304.535,81.252c-6.47,0-10.928-4.39-10.928-10.33v-0.061c0-5.708,4.606-10.389,10.901-10.389c3.741,0,5.992,0.845,8.429,2.482l-2.564,3.243c-1.789-1.208-3.028-1.694-6.012-1.646c-3.325,0.055-5.967,2.839-5.967,6.256v0.055c0,3.676,2.607,6.374,6.291,6.374c1.664,0,3.146-0.401,4.307-1.206v-2.871h-2.908v-3.817h7.332v8.725C311.277,79.817,308.336,81.252,304.535,81.252z"
    19. 

  19.               />
    20. 

  20.               <path id="XMLID_482_" fill="#FFF" d="M245.533,80.907l-10.063-12.77v12.77h-4.515v-20.09h4.213l9.744,12.373V60.817h4.513v20.09H245.533z" />
    21. 

  21.               <path id="XMLID_480_" fill="#FFF" d="M321.476,80.907v-8.793l-6.949-11.297h5.346l4.361,7.936l4.397-7.936h5.196l-6.951,11.238v8.853H321.476z" />
    22. 

  22.               <polygon fill="#FFF" points="228.012,64.895 228.012,60.817 211.357,60.817 211.357,80.907 228.012,80.907 228.012,76.83 215.967,76.83 215.967,72.831 226.732,72.831 226.732,68.753 215.967,68.753 215.967,64.895 " />
    23. 

  23.               <polygon fill="#FFF" points="269.557,64.895 269.557,60.817 252.902,60.817 252.902,80.907 269.557,80.907 269.557,76.83 257.511,76.83 257.511,72.831 268.277,72.831 268.277,68.753 257.511,68.753 257.511,64.895 " />
    24. 

  24.               <path
    25. 

  25.                 fill="#FFF"
    26. 

  26.                 d="M291.333,80.907l-3.983-7.74c2.177-1.005,3.696-3.265,3.696-5.896v0c0-3.564-2.784-6.454-6.22-6.454H272.98v20.09h4.57v-7.182h5.515l3.695,7.182H291.333z M277.55,64.895h6.774c1.265,0,2.29,1.064,2.29,2.376v0c0,1.312-1.025,2.376-2.29,2.376h-6.774V64.895z"
    27. 

  27.               />
    28. 

  28.             </g>
    29. 

  29.             <g>
    30. 

  30.               <g>
    31. 

  31.                 <path
    32. 

  32.                   id="XMLID_479_"
    33. 

  33.                   fill="#FFF"
    34. 

  34.                   d="M167.55,39.067h-1.561c-0.546-2.03-1.035-3.547-1.82-5.373l-4.36-0.004
    35. 

  35. c0.771,2.025,1.339,3.833,1.692,5.377h-3.128v-6.282h8.215v-3.861h-8.215v-4.49h8.393v-3.899h-21.599v3.899h8.101v4.49h-7.686
    36. 

  36. v3.861h7.686v6.282h-8.758v3.976h23.04V39.067z"
    37. 

  37.                 />
    38. 

  38.                 <path
    39. 

  39.                   id="XMLID_476_"
    40. 

  40.                   fill="#FFF"
    41. 

  41.                   d="M170.113,14.394l-28.202,0.001c-2.03,0-3.621,1.457-3.621,3.316l0.002,28.005c0.001,2.115,1.9,3.424,3.66,3.424h28.409c0.824,0,1.732-0.351,2.432-0.939c0.807-0.679,1.251-1.602,1.251-2.596l-0.001-27.778C174.042,15.742,172.5,14.394,170.113,14.394z M168.858,18.367v26.724l-25.463,0V18.369L168.858,18.367z"
    42. 

  42.                 />
    43. 

  43.               </g>
    44. 

  44.               <g>
    45. 

  45.                 <path
    46. 

  46.                   id="XMLID_475_"
    47. 

  47.                   fill="#FFF"
    48. 

  48.                   d="M234.621,16.644h-4.845l2.238,5.092h-6.883l4.632-7.075h-5.637l-4.689,7.134c-0.575,0.918-0.678,1.757-0.296,2.503c0.463,0.803,1.204,1.227,2.21,1.26l14.021-0.001c0.056-0.004,1.374-0.119,1.961-1.121c0.408-0.696,0.352-1.623-0.169-2.754C236.499,20.237,234.621,16.644,234.621,16.644z"
    49. 

  49.                 />
    50. 

  50.                 <path
    51. 

  51.                   id="XMLID_471_"
    52. 

  52.                   fill="#FFF"
    53. 

  53.                   d="M236.358,27.874c-0.485-0.513-1.212-0.773-2.16-0.773h-11.46c-2.727,0-2.758,2.355-2.758,2.379v19.587h4.861v-6.638h7.269v2.625h-4.913v3.937l6.701-0.002c2.039,0,3.072-0.957,3.072-2.843l-0.001-16.651C236.971,29.456,237.012,28.565,236.358,27.874z M232.11,30.884v2.218h-7.269v-2.218H232.11z M232.11,36.658v2.215h-7.269v-2.215
    54. 

  54. H232.11z"
    55. 

  55.                 />
    56. 

  56.                 <path id="XMLID_470_" fill="#FFF" d="M242.25,30.455l13.047,0.002v-4.014h-10.943V25.07c7.277-2.622,11.396-9.303,11.396-9.303h-5.433c0,0-2.434,3.517-5.964,4.758v-5.864h-5.064l0.002,13.225C239.291,29.519,240.369,30.455,242.25,30.455z" />
    57. 

  57.                 <path
    58. 

  58.                   id="XMLID_469_"
    59. 

  59.                   fill="#FFF"
    60. 

  60.                   d="M244.353,37.835v-6.236h-5.023l0.002,14.284c0,2.032,1.009,3.106,2.918,3.106l13.047,0v-4.051h-10.943v-2.266c6.72-2.542,11.458-10.166,11.458-10.166h-5.463C250.348,32.507,248.039,36.192,244.353,37.835z"
    61. 

  61.                 />
    62. 

  62.               </g>
    63. 

  63.               <path
    64. 

  64.                 fill="#FFF"
    65. 

  65.                 d="M183.913,20.6h25.993v5.788h4.901l-0.001-6.153c0-2.054-1.338-3.382-3.409-3.382h-11.566v-2.773h-5.542v2.773h-11.27c-2.447,0-3.967,1.296-3.967,3.382v6.153h4.861L183.913,20.6z M206.875,37.054h2.163l4.669-9.237H208.6l-3.441,6.245c-0.656-1.251-1.267-2.746-1.791-4.375h-2.899c-0.464-0.776-1.154-1.718-1.886-2.574c0.149-0.216,0.356-0.573,0.622-1.043l0.016-0.028h9.064v-3.709h-22.71v3.709h7.542c-3.771,2.954-11.774,4.27-13.435,4.518v4.199c1.49-0.195,9.366-1.363,15.546-4.938c0.19,0.258,0.519,0.775,0.69,1.048c-4.112,4.071-14.113,5.95-16.236,6.312v4.247c1.536-0.243,10.602-1.82,17.617-6.536c0.08,0.459,0.094,0.901,0.158,1.861c-4.899,3.313-9.952,5.405-17.775,7.207v4.28c1.733-0.309,11.518-2.4,17.775-6.687v2.684c0,0.691-0.642,1.331-1.338,1.321h-5.732v3.891h7.327c2.973,0,4.516-1.455,4.516-4.354v-7.226c2.196,3.848,6.276,8.845,13.004,10.846v-4.457C213.257,43.436,208.773,40.441,206.875,37.054z"
    66. 

  66.               />
    67. 

  67.               <g>
    68. 

  68.                 <polygon id="XMLID_468_" fill="#FFF" points="268.998,32.332 264.811,23.662 259.317,23.662 263.189,32.332" />
    69. 

  69.                 <polygon id="XMLID_467_" fill="#FFF" points="268.756,22.309 264.964,14.394 259.558,14.394 263.006,22.309 " />
    70. 

  70.                 <path
    71. 

  71.                   fill="#FFF"
    72. 

  72.                   d="M268.529,34.2h-5.266l-0.025,0.219c-0.008,0.072-1.178,6.718-4.536,14.771h5.556c3.063-6.815,4.233-14.631,4.242-14.717
    73. 

  73. L268.529,34.2z"
    74. 

  74.                 />
    75. 

  75.                 <path
    76. 

  76.                   id="XMLID_463_"
    77. 

  77.                   fill="#FFF"
    78. 

  78.                   d="M295.075,32.643l-0.001-9.424c0-1.685-1.122-2.613-3.159-2.613h-4.069v-1.97h8.552v-3.861l-23.179,0
    79. 

  79. c-2.138,0-3.314,1.033-3.314,2.907v15.127c0.094,4.181-0.5,10.588-2.858,16.035l-0.149,0.346h5.222l0.062-0.157
    80. 

  80. c1.788-4.525,2.667-10.194,2.667-15.55V18.636h8.272v1.97l-3.532,0c-1.978,0-3.045,1.346-3.045,2.613v9.389
    81. 

  81. c0,2.487,1.452,2.83,3.021,2.83h3.995v9.957h-2.495v3.861l4.273,0c1.978,0,3.205-1.082,3.205-2.822V35.439h3.268
    82. 

  82. C293.461,35.439,295.075,35.223,295.075,32.643z M290.214,24.198v2.064h-8.812l-0.001-2.064H290.214z M290.214,29.819v2.064
    83. 

  83. h-8.811v-2.064H290.214z"
    84. 

  84.                 />
    85. 

  85.                 <path
    86. 

  86.                   id="XMLID_462_"
    87. 

  87.                   fill="#FFF"
    88. 

  88.                   d="M281.646,37.1c-1.886,0-3.186,0-4.351,0c-0.627,5.028-3.023,11.032-3.023,11.032h4.543
    89. 

  89. C278.815,48.132,281.02,43.161,281.646,37.1z"
    90. 

  90.                 />
    91. 

  91.                 <path fill="#FFF" d="M294.034,37.1h-4.363c0.198,1.057,1.316,6.682,3.187,11.032h4.584C295.631,43.114,294.361,38.359,294.034,37.1z" />
    92. 

  92.               </g>
    93. 

  93.               <path
    94. 

  94.                 fill="#FFF"
    95. 

  95.                 d="M337.303,37.937h-15.507v-1.854h13.598v-3.657h-12.877v-1.711h11.708V27.22h-11.708v-1.464h11.83v-3.575h-11.83v-1.527
    96. 

  96. h12.887v-3.737h-12.847c-0.535-2.42-0.683-2.698-0.683-2.698h-5.107c0.16,0.604,0.42,1.602,0.686,2.698h-7
    97. 

  97. c0.766-1.27,0.968-2.103,1.056-2.698l-4.921,0c-0.208,0.749-1.412,4.409-5.522,6.996v4.682c1.223-0.327,1.979-0.9,2.491-1.249
    98. 

  98. v8.921c0,0.873,0.251,1.537,0.746,1.975c0.768,0.681,1.833,0.543,1.844,0.539h10.504v1.854h-15.305v3.938h5.432
    99. 

  99. c-0.691,1.998-3.551,6.909-3.551,6.909h5.647c0,0,2.693-4.816,3.358-6.909h4.418v7.381h5.146v-7.381h4.416
    100. 

  100. c0.857,2.406,3.469,6.909,3.469,6.909h5.637c0,0-2.983-5.131-3.66-6.909h5.646V37.937z M317.453,32.427H308.5v-1.711h8.953V32.427
    101. 

  101. z M317.453,27.22H308.5v-1.464h8.953V27.22z M317.453,22.181H308.5v-1.527h8.953V22.181z"
    102. 

  102.               />
    103. 

  103.               <g>
    104. 

  104.                 <path
    105. 

  105.                   fill="#FFF"
    106. 

  106.                   id="XMLID_459_"
    107. 

  107.                   d="M377.435,18.514c0-2.424-1.459-3.814-4.004-3.814l-27.645,0.001c-2.516,0-3.901,1.322-3.901,3.723
    108. 

  108. l0.005,27.152c0,2.556,1.81,3.449,4.039,3.449l0.046,0.003l27.269-0.003c2.292,0,4.193-0.972,4.193-3.449L377.435,18.514z
    109. 

  109.  M372.292,44.977h-25.341V18.675l25.34-0.003L372.292,44.977z"
    110. 

  110.                 />
    111. 

  111.                 <path
    112. 

  112.                   fill="#FFF"
    113. 

  113.                   d="M366.732,23.889v-4.182h-5.146v4.182h-12.902v4.052h8.563c-1.48,3.031-5.104,7.505-8.642,9.59v4.647
    114. 

  114. c6.305-2.621,10.252-7.973,12.981-12.76v10.448h-6.755v4.014h7.576c2.708,0,4.325-1.467,4.325-3.923V27.941h4.158v-4.052H366.732
    115. 

  115. z"
    116. 

  116.                 />
    117. 

  117.               </g>
    118. 

  118.             </g>
    119. 

  119.             <g>
    120. 

  120.               <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="61.5049" y1="30.1548" x2="61.5049" y2="66.792">
    121. 

  121.                 <stop offset="0" style="stop-color:#F6AB00" />
    122. 

  122.                 <stop offset="0.5" style="stop-color:#D84C14" />
    123. 

  123.                 <stop offset="0.75" style="stop-color:#CC2A1C" />
    124. 

  124.                 <stop offset="1" style="stop-color:#C11920" />
    125. 

  125.               </linearGradient>
    126. 

  126.               <path
    127. 

  127.                 fill="url(#SVGID_1_)"
    128. 

  128.                 d="M102.96,39.692L77.737,64.915l-2.879-2.878l23.934-23.932c-6.846-2.449-14.003-4.243-21.396-5.306
    129. 

  129. 			L61.508,48.687l-2.879-2.879l13.626-13.625c-3.539-0.341-7.127-0.518-10.756-0.518c-5.668,0-11.237,0.427-16.676,1.249
    130. 

  130. 			L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l11.593-11.593C25.018,37,13.093,41.981,2.406,48.742l42.873,42.874
    131. 

  131. 			l16.229-16.229l16.229,16.229l42.867-42.867C115.039,45.228,109.138,42.189,102.96,39.692z"
    132. 

  132.               />
    133. 

  133.               <path
    134. 

  134.                 id="XMLID_457_"
    135. 

  135.                 fill="none"
    136. 

  136.                 d="M122.614,44.877l-12.419-12.419L77.737,64.915l-2.879-2.878l31.538-31.538
    137. 

  137. 			c0.509-0.508,0.509-1.332,0-1.84l-12.43-12.431L61.508,48.687l-2.879-2.879L90.26,14.176c0.456-0.456,0.456-1.196,0-1.652
    138. 

  138. 			L77.737,0L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l31.467-31.466c0.547-0.547,0.547-1.435,0-1.982L45.279,0
    139. 

  139. 			L0.374,44.906c-0.498,0.498-0.498,1.306,0,1.804l44.905,44.905l16.229-16.229l16.229,16.229l44.877-44.876
    140. 

  140. 			C123.128,46.225,123.128,45.391,122.614,44.877z"
    141. 

  141.               />
    142. 

  142.             </g>
    143. 

  143.           </g>
    144. 

  144.           <g id="图层_3">
    145. 

  145.             <path
    146. 

  146.               id="XMLID_458_"
    147. 

  147.               fill="#C11920"
    148. 

  148.               d="M122.614,44.877l-12.419-12.419L77.737,64.915l-2.879-2.878l31.538-31.538
    149. 

  149. c0.509-0.508,0.509-1.332,0-1.84l-12.43-12.431L61.508,48.687l-2.879-2.879L90.26,14.176c0.456-0.456,0.456-1.196,0-1.652L77.737,0
    150. 

  150. L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l31.467-31.466c0.547-0.547,0.547-1.435,0-1.982L45.279,0L0.374,44.906
    151. 

  151. c-0.498,0.498-0.498,1.306,0,1.804l44.905,44.905l16.229-16.229l16.229,16.229l44.877-44.876
    152. 

  152. C123.128,46.225,123.128,45.391,122.614,44.877z"
    153. 

  153.             />
    154. 

  154.           </g>
    155. 

  155.           <g id="图层_2">
    156. 

  156.             <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="61.5" y1="30.1548" x2="61.5" y2="66.792">
    157. 

  157.               <stop offset="0" style="stop-color:#F6AB00" />
    158. 

  158.               <stop offset="0.5" style="stop-color:#D84C14" />
    159. 

  159.               <stop offset="0.75" style="stop-color:#CC2A1C" />
    160. 

  160.               <stop offset="1" style="stop-color:#C11920" />
    161. 

  161.             </linearGradient>
    162. 

  162.             <path
    163. 

  163.               fill="url(#SVGID_2_)"
    164. 

  164.               d="M102.956,39.692L77.732,64.915l-2.879-2.878l23.934-23.932c-6.846-2.449-14.003-4.243-21.396-5.306
    165. 

  165. L61.503,48.687l-2.879-2.879L72.25,32.182c-3.539-0.341-7.127-0.518-10.756-0.518c-5.668,0-11.237,0.427-16.676,1.249
    166. 

  166. L31.923,45.808l16.229,16.229l-2.879,2.878L26.167,45.808l11.593-11.593C25.013,37,13.088,41.981,2.401,48.742l42.873,42.874
    167. 

  167. l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956,39.692z"
    168. 

  168.             />
    169. 

  169.           </g>
    170. 

  170.           <g id="图层_4"></g>
    171. 

  171.         </svg>
    172. 

  172.       </div>
    173. 

  173.       <div class="header-menu-body"><Header @onMenuClick="HeaderMenuClick" /></div>
    174. 

  174.     </div>
    175. 

  175.     <div class="menu-body" :class="{ hover: isShowMenu }" @mouseenter="showMenu" @mouseleave="hideMenu"><Menu :root="root" /></div>
    176. 

  176.     <div class="main-body">
    177. 

  177.       <router-view />
    178. 

  178.     </div>
    179. 

  179.   </div>
    180. 

  180.   <login-page v-if="!isLogined" @onLogin="login" />
    181. 

  181. </template>
    182. 

  182. 

  183. <script>
    184. 

  184. // 导入header.vue文件
    185. 

  185. import Menu from "@/views/layout/Menu.vue";
    186. 

  186. import Header from "@/views/layout/Header.vue";
    187. 

  187. 

  188. import { mapMutations } from "vuex";
    189. 

  189. 

  190. import LoginPage from "./views/layout/login-page.vue";
    191. 

  191. export default {
    192. 

  192.   components: {
    193. 

  193.     Menu,
    194. 

  194.     Header,
    195. 

  195.     LoginPage,
    196. 

  196.   },
    197. 

  197. 

  198.   data() {
    199. 

  199.     return {
    200. 

  200.       isShowMenu: false,
    201. 

  201.       // 当前子系统
    202. 

  202.       root: "",
    203. 

  203.       isLogined: true,
    204. 

  204.       memuCloseTimeout: null,
    205. 

  205.     };
    206. 

  206.   },
    207. 

  207. 

  208.   created() {
    209. 

  209.     let that = this;
    210. 

  210.     that.$nextTick(() => {
    211. 

  211.       that.API.requestData({
    212. 

  212.         isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
    213. 

  213.         method: "POST", // 请求方式，默认为 GET ，可缺省
    214. 

  214.         subUrl: "admin/loginvue", // 请求接口地址，必传项
    215. 

  215.         data: {
    216. 

  216.           username: "admin",
    217. 

  217.           password: "admin",
    218. 

  218.         },
    219. 

  219.         success(res) {
    220. 

  220.           localStorage.setItem("authToken", res.data.authToken);
    221. 

  221.           localStorage.setItem("username", res.data.user.laborName);
    222. 

  222. 

  223.           that.API.requestData({
    224. 

  224.             method: "POST", // 请求方式，默认为 GET ，可缺省
    225. 

  225.             subUrl: "admin/usermenu", // 请求接口地址，必传项
    226. 

  226.             success() {
    227. 

  227.               // that.BASE.showMsg({
    228. 

  228.               //   msg: "登陆成功",
    229. 

  229.               //   type: "success",
    230. 

  230.               // });
    231. 

  231.               // that.$router.push('/'); // 跳转到首页
    232. 

  232.             },
    233. 

  233.           });
    234. 

  234.         },
    235. 

  235.       });
    236. 

  236.     });
    237. 

  237.   },
    238. 

  238.   
    239. 

  239.   methods: {
    240. 

  240.     // 切换子系统事件
    241. 

  241.     HeaderMenuClick(data) {
    242. 

  242.       this.root = data.id;
    243. 

  243.     },
    244. 

  244.     showMenu() {
    245. 

  245.       this.isShowMenu = true;
    246. 

  246.       this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
    247. 

  247.     },
    248. 

  248.     hideMenu() {
    249. 

  249.       const that = this;
    250. 

  250.       this.memuCloseTimeout = setTimeout(function(){
    251. 

  251.         that.isShowMenu = false;
    252. 

  252.       }, 500 )
    253. 

  253.       
    254. 

  254.     },
    255. 

  255.     login(params) {
    256. 

  256.       if (params.username && params.password) this.isLogined = true;
    257. 

  257.     },
    258. 

  258.   },
    259. 

  259. };
    260. 

  260. </script>
    261. 

  261. 

  262. <style lang="less">
    263. 

  263. @import "./assets/styles/main.less";
    264. 

  264. 

  265. * {
    266. 

  266.   box-sizing: border-box;
    267. 

  267. 

  268.   &::-webkit-scrollbar {
    269. 

  269.     width: 6px;
    270. 

  270.     height: 6px;
    271. 

  271.   }
    272. 

  272. 

  273.   &::-webkit-scrollbar-track-piece {
    274. 

  274.     background-color: rgba(255, 255, 255, 0.05);
    275. 

  275.     -webkit-border-radius: 4px;
    276. 

  276.   }
    277. 

  277. 

  278.   &::-webkit-scrollbar-thumb {
    279. 

  279.     background-color: fade(@gray, 75);
    280. 

  280.     -webkit-border-radius: 4px;
    281. 

  281.     outline: none;
    282. 

  282.     outline-offset: 0px;
    283. 

  283.     border: none;
    284. 

  284.   }
    285. 

  285. }
    286. 

  286. 

  287. body {
    288. 

  288.   margin: 0;
    289. 

  289.   background: #fff;
    290. 

  290.   color: #fff;
    291. 

  291.   background-image: url("./assets/background.png");
    292. 

  292.   background-size: cover;
    293. 

  293.   font-size: @fontsize;
    294. 

  294.   font-family: @defalut-font-family;
    295. 

  295. }
    296. 

  296. @menuWidth: 5.37vh;
    297. 

  297. @headerHeight: 4.63vh;
    298. 

  298. .main {
    299. 

  299.   width: 100vw;
    300. 

  300.   height: 100%;
    301. 

  301.   display: flex;
    302. 

  302.   flex-wrap: wrap;
    303. 

  303.   overflow: hidden;
    304. 

  304.   .header-body {
    305. 

  305.     // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
    306. 

  306.     flex: 0 0 100%;
    307. 

  307.     width: 100%;
    308. 

  308.     display: flex;
    309. 

  309.     flex-direction: row;
    310. 

  310.     height: @headerHeight;
    311. 

  311.     border-bottom: 1px solid #142b29;
    312. 

  312.     .header-title {
    313. 

  313.       margin: auto;
    314. 

  314.       color: #fff;
    315. 

  315.     }
    316. 

  316.     .header-menu-body {
    317. 

  317.       flex-grow: 1;
    318. 

  318.     }
    319. 

  319.   }
    320. 

  320.   .menu-body {
    321. 

  321.     position: absolute;
    322. 

  322.     flex: 0 0 @menuWidth;
    323. 

  323.     width: @menuWidth;
    324. 

  324.     height: calc(100vh - @headerHeight);
    325. 

  325.     top: @headerHeight;
    326. 

  326.     background-color: fade(#192a26, 75%);
    327. 

  327.     z-index: 99;
    328. 

  328.     opacity: 0;
    329. 

  329.     transition: opacity 0.2s;
    330. 

  330.     transition-timing-function: ease-in;
    331. 

  331.     transform: translate(-@menuWidth);
    332. 

  332. 

  333.     &:hover,
    334. 

  334.     &.hover {
    335. 

  335.       opacity: 1;
    336. 

  336.       transition: opacity 0.2s;
    337. 

  337.       transition-timing-function: ease-out;
    338. 

  338.       transform: translate(0);
    339. 

  339.     }
    340. 

  340.   }
    341. 

  341.   .main-body {
    342. 

  342.     flex: 0 0 calc(100vw);
    343. 

  343.     max-width: calc(100vw);
    344. 

  344.     height: calc(100vh - @headerHeight);
    345. 

  345.     padding: 1.481vh;
    346. 

  346.     // transition: flex 0.1s, margin-left 0.1s;
    347. 

  347.     // transition-timing-function: ease-in-out;
    348. 

  348.     // &.show-menu {
    349. 

  349.     //   flex: 0 0 calc(100vw - @menuWidth);
    350. 

  350.     //   margin-left: @menuWidth;
    351. 

  351.     //   transition: flex 0.1s, margin-left 0.1s;
    352. 

  352.     //   transition-timing-function: ease-in-out;
    353. 

  353.     // }
    354. 

  354.   }
    355. 

  355. }
    356. 

  356. </style>
    357.