bottomLayer.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!-- 楼层和设备底图下面的放大缩小的浮层 -->
  2. <template>
  3. <div class='bottom-layer'>
  4. <span class='icon-style'>
  5. <a-icon type='arrow-down' />
  6. </span>
  7. <span class='icon-style'>
  8. <a-icon type='poweroff' />
  9. </span>
  10. <span class='icon-style'>
  11. <a-icon type='aliyun' />
  12. </span>
  13. <span class='icon-style'>
  14. <a-icon type='minus-square' />
  15. </span>
  16. <span class='slider'>
  17. <a-slider class='slider-style' id='test' :default-value='30' />
  18. </span>
  19. <span class='icon-style'>
  20. <a-icon type='plus-square' />
  21. </span>
  22. </div>
  23. </template>
  24. <script>
  25. export default {}
  26. </script>
  27. <style lang="less" scoprd>
  28. .bottom-layer {
  29. position: fixed;
  30. width: 360px;
  31. height: 40px;
  32. line-height: 40px;
  33. bottom: 40px;
  34. z-index: 2;
  35. background: #ffffff;
  36. left: 483px;
  37. display: flex;
  38. .icon-style {
  39. width: 40px;
  40. display: inline-block;
  41. text-align: center;
  42. border-right: 1px solid #e4e5e7;
  43. }
  44. .slider {
  45. width: 200px;
  46. display: inline-block;
  47. text-align: center;
  48. border-right: 1px solid #e4e5e7;
  49. .slider-style {
  50. display: inline-block;
  51. width: 180px;
  52. }
  53. }
  54. }
  55. </style>