Home Explore Help
Sign In
hexiugang
/
iamberry-common-parent
Watch 3
Star 3
Fork 1
Files Issues 0 Pull Requests 0 Wiki
Tree: 0b1327094b
Branches Tags
iamberry-com...
/
watero-rst-web
/
src
/
main
/
webapp
/
common
/
css
/
mobile-index.css

mobile-index.css 2.2 KB
History Raw

123456789101112131415161718192021222324252627 
  1. html{min-height: 100%;}
    2. 

  2. body{background: url(../images/mobile_index_bg.jpg) center center no-repeat;background-size: 100% 100%;min-height: 100%;height: 100%;}
    3. 

  3. .index-menu{position: fixed;top: 50%;left: 50%;width: 280px;height: 280px;background: #fff;margin: -180px 0 0 -140px;border-radius: 50%;border: 4px solid #58d1eb;}
    4. 

  4. .index-menu:before{content: '';position: absolute;left: 50%;top: 0;width: 4px;height: 272px;margin-left: -2px;}
    5. 

  5. .index-menu:after{content: '';position: absolute;left: 0;top: 50%;width: 272px;height: 4px;margin-top: -2px;}
    6. 

  6. .menu-box{position: relative;height: 100%;}
    7. 

  7. .menu-1{position: absolute;left: 20%;top: 22%;width: 60px;height: 60px;}
    8. 

  8. .menu-1:before{content: '\e699';font-size: 40px;position: absolute;top: 0;left: 0;text-align: center;width: 100%;color: #ddd;}
    9. 

  9. .menu-1.active:before{color: #58d1eb;}
    10. 

  10. .menu-1:after{content: '产品出库';font-size: 14px;text-align: center;position: absolute;bottom: 0;left:20px;color: #ddd;}
    11. 

  11. .menu-1.active:after{color: #999;}
    12. 

  12. .menu-2{position: absolute;right: 20%;top: 22%;width: 60px;height: 60px;}
    13. 

  13. .menu-2:before{content: '\e698';font-size: 44px;position: absolute;top: 0;right: 0;text-align: center;width: 100%;color: #ddd;}
    14. 

  14. .menu-2.active:before{color: #58d1eb;}
    15. 

  15. .menu-2:after{content: '我的订单';font-size: 14px;text-align: center;position: absolute;bottom: 0;left: 0;color: #ddd;}
    16. 

  16. .menu-2.active:after{color: #999;}
    17. 

  17. .menu-3{position: absolute;left: 20%;bottom: 16%;width: 60px;height: 60px;}
    18. 

  18. .menu-3:before{content: '\e69e';font-size: 40px;position: absolute;top: 0;left: 0;text-align: center;width: 100%;color: #ddd;}
    19. 

  19. .menu-3.active:before{color: #58d1eb;}
    20. 

  20. .menu-3:after{content: '财务审核';font-size: 14px;text-align: center;position: absolute;bottom: 0;left: 0;color: #ddd;}
    21. 

  21. .menu-3.active:after{color: #999;}
    22. 

  22. .menu-4{position: absolute;right: 20%;bottom: 16%;width: 60px;height: 60px;}
    23. 

  23. .menu-4:before{content: '\e697';font-size: 40px;position: absolute;top: 0;left: 0;text-align: center;width: 100%;color: #ddd;}
    24. 

  24. .menu-4.active:before{color: #58d1eb;}
    25. 

  25. .menu-4:after{content: '审核订单';font-size: 14px;text-align: center;position: absolute;bottom: 0;left: 0;color: #ddd;}
    26. 

  26. .menu-4.active:after{color: #999;}
    27. 

  27. .index-footer{position: absolute;width: 100%;left: 0;bottom: 20px;height: 30px;color: #fff;text-align: center;}
    28.