安卓嵌套的web页面
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

148 rindas
3.2 KiB

  1. <template>
  2. <div class="home" style="background-image: url('img/login_bg.jpg');">
  3. <div class="home-header">
  4. <div style="flex:1;text-align:left">
  5. 富茂智能云POS
  6. </div>
  7. <div style="flex:1;text-align:right;" class="logout" @click="logout">
  8. <i class="">-></i>
  9. 退出
  10. </div>
  11. </div>
  12. <div class="content-box">
  13. <div @click="$router.push('/cash_home')" class="box-item" >
  14. <label>收银</label>
  15. </div>
  16. <div class="box-item">
  17. <label>交易管理</label>
  18. </div>
  19. <div class="box-item">
  20. <label>会员</label>
  21. </div>
  22. <div class="box-item" @click="$router.push('/verification')">
  23. <label>核销管理</label>
  24. </div>
  25. <div class="box-item">
  26. <label>设置</label>
  27. </div>
  28. </div>
  29. <bottom ></bottom>
  30. </div>
  31. </template>
  32. <script>
  33. // @ is an alias to /src
  34. import bottom from '@/components/Bottom1'
  35. export default {
  36. name: 'home',
  37. components: {
  38. bottom,
  39. },
  40. created(){
  41. },
  42. methods:{
  43. logout:function(){
  44. localStorage.removeItem("userInfo")
  45. this.$router.replace('/login')
  46. }
  47. }
  48. }
  49. </script>
  50. <style scoped lang="less">
  51. .home{
  52. background: url('/img/login_bg.jpg');
  53. background-repeat: no-repeat;
  54. background-size: cover;
  55. background-position: top center;
  56. display: flex;
  57. flex-direction: column;
  58. }
  59. .home-header{
  60. display:flex;
  61. padding:1rem 1rem;
  62. color: #fefefe;
  63. }
  64. .logout{
  65. font-weight: bold;
  66. color: #ff5b5a;
  67. &:active{
  68. color:#ff8d0b
  69. }
  70. }
  71. .content-box{
  72. display: flex;
  73. flex-flow: wrap;
  74. flex-direction: column;
  75. width: 60%;
  76. height:50%;
  77. margin: auto;
  78. margin-top: 5%;
  79. .box-item{
  80. font-size: 1rem;
  81. margin: 5px;
  82. background-color: rgba(0,0,0,.5);
  83. height: calc(50% - 10px);
  84. display: flex;
  85. align-items: top;
  86. justify-content:left;
  87. position: relative;
  88. cursor: pointer;
  89. &:nth-child(1){
  90. flex:55%; background-color:#77bb58
  91. }
  92. &:nth-child(2){
  93. background-color:#d9b044
  94. }
  95. &:nth-child(3){
  96. background-color:#3aace0
  97. }
  98. &:nth-child(4){
  99. background-color:#909dd1
  100. }
  101. &:nth-child(5){
  102. background-color:#3ac87c
  103. }
  104. // flex:23%;
  105. &::before{
  106. content: "";
  107. position: absolute;
  108. display: block;
  109. width: 100%;
  110. height: 100%;
  111. z-index: 1;
  112. background:linear-gradient(rgba(255, 255, 255, .1) 0%,transparent 50% );
  113. background-origin: 0 0;
  114. background-position-y: 100%;
  115. background-size: 100% 200%;
  116. transition: all .3s;
  117. }
  118. &:hover::before{
  119. background-position-y: 200%;
  120. }
  121. &:hover label{
  122. opacity: 1;
  123. transform: scale(1.1);
  124. }
  125. label{
  126. color: #fff;
  127. padding: 1rem;
  128. transform: scale(.95);
  129. pointer-events: none;
  130. z-index: 2;
  131. text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  132. text-align: center;
  133. transition: all .3s;
  134. i{
  135. display: block;
  136. font-size: 40px;
  137. margin: 10px;
  138. }
  139. }
  140. }
  141. }
  142. </style>