AirSwitchVer.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="airSwitch">
  3. <div class="air-title head-title">
  4. <span>空调实时开关</span>
  5. <span class="status">{{status ? "空调已开启" : "空调已关闭"}}</span>
  6. </div>
  7. <div class="air-cont">
  8. <div class="air-left">
  9. <div class="bar-box">
  10. <div class="bar"></div>
  11. </div>
  12. <div class="air-rate">
  13. <span>空调开启率</span>
  14. <span class="air-rate-value">{{value}}%</span>
  15. </div>
  16. </div>
  17. <div class="air-bg">
  18. <img :src="[status ? img.openImg : img.closeImg]" />
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import air_close from '@/assets/horImg/air_close.png';
  25. import air_open from '@/assets/horImg/air_open.png';
  26. export default {
  27. name: "AirSwitch",
  28. props: {
  29. status: {
  30. type: Boolean,
  31. default: () => { return false } // 默认开
  32. },
  33. value: {
  34. type: Number,
  35. default: () => { return 75 } // 默认开
  36. },
  37. },
  38. data() {
  39. return {
  40. img: {
  41. openImg: air_open,
  42. closeImg: air_close,
  43. }
  44. }
  45. },
  46. }
  47. </script>
  48. <style lang="less" scoped>
  49. @import "/src/assets/css/common.less";
  50. .airSwitch {
  51. padding: 24px 32px;
  52. height: 250px;
  53. width: 1000px;
  54. margin: 0 auto;
  55. box-sizing: border-box;
  56. border-radius: 20px;
  57. border: 2px solid #ffffff;
  58. background: #ffffff;
  59. .air-title {
  60. .status {
  61. margin-top: 8px;
  62. margin-left: 12px;
  63. display: inline-block;
  64. height: 24px;
  65. line-height: 24px;
  66. width: 86px;
  67. border-radius: 4px;
  68. background: rgba(126, 216, 116, 1);
  69. box-sizing: border-box;
  70. color: #ffffff;
  71. font-weight: 600;
  72. text-align: center;
  73. font-size: 14px;
  74. &.close {
  75. background: rgba(155, 152, 173, 1);
  76. }
  77. }
  78. }
  79. .air-cont {
  80. display: flex;
  81. flex-direction: row;
  82. .air-left {
  83. flex: 3;
  84. display: flex;
  85. justify-content: center;
  86. flex-direction: column;
  87. .bar-box {
  88. width: 88%;
  89. height: 10px;
  90. background: rgba(62, 140, 255, 0.2);
  91. border-radius: 6px;
  92. .bar {
  93. width: 80%;
  94. height: 10px;
  95. background: linear-gradient(
  96. 90deg,
  97. #76deff 0%,
  98. #3e91f8 100%
  99. );
  100. border-radius: 6px;
  101. }
  102. }
  103. .air-rate {
  104. font-size: 20px;
  105. display: flex;
  106. height: 40px;
  107. align-items: center;
  108. margin-top:14px;
  109. .air-rate-value {
  110. font-size: 32px;
  111. padding-left:8px;
  112. }
  113. }
  114. }
  115. .air-bg {
  116. flex: 1;
  117. img {
  118. width: 240px;
  119. }
  120. }
  121. }
  122. }
  123. </style>