index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div class="volumn-box" :class="isOpen ? 'active' : ''">
  3. <div class="top">
  4. <img
  5. :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
  6. alt=""
  7. />
  8. <div class="top-right">
  9. <Switch class="switch-btn" inactive-color="rgba(0, 0, 0, 0.3)" v-model="isOpen" />
  10. </div>
  11. </div>
  12. <div class="bottom">
  13. <div class="text">光照</div>
  14. <div class="status">{{ isOpen ? "已开启" : "已关闭" }}</div>
  15. <div class="right" @click="searchMore">
  16. <img
  17. :src="
  18. parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
  19. "
  20. alt=""
  21. />
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script lang="ts">
  27. import {
  28. defineComponent,
  29. onMounted,
  30. reactive,
  31. toRefs,
  32. computed,
  33. watch,
  34. onUnmounted,
  35. onBeforeMount,
  36. onBeforeUnmount,
  37. } from "vue";
  38. import { Switch, Dialog, Loading, Toast } from "vant";
  39. import { parseImgUrl } from "@/utils";
  40. import any = jasmine.any;
  41. export default defineComponent({
  42. components: {
  43. Switch,
  44. [Dialog.Component.name]: Dialog.Component,
  45. Loading,
  46. },
  47. setup(props, contx) {
  48. const proxyData = reactive({
  49. parseImgUrl: parseImgUrl,
  50. isOpen: false,
  51. searchMore() {
  52. contx.emit("showMore",'lamp',true);
  53. },
  54. });
  55. onBeforeUnmount(() => {});
  56. onMounted(() => {});
  57. return {
  58. ...toRefs(proxyData),
  59. };
  60. },
  61. });
  62. </script>
  63. <style lang="scss" scoped>
  64. .volumn-box {
  65. box-sizing: border-box;
  66. display: flex;
  67. flex-direction: column;
  68. justify-content: space-between;
  69. padding: 16px;
  70. width: 100%;
  71. height: 100%;
  72. border-radius: 24px 24px 44px 24px;
  73. background-color: rgba(255, 255, 255, 0.2);
  74. backdrop-filter: blur(40px);
  75. box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  76. .top {
  77. display: flex;
  78. justify-content: space-between;
  79. img {
  80. width: 30px;
  81. }
  82. }
  83. .bottom {
  84. // margin-top: 18vh;
  85. position: relative;
  86. // margin-top: 109px;
  87. .text {
  88. //styleName: Chi/Body Large;
  89. font-family: PingFang SC;
  90. font-size: 16px;
  91. font-weight: 300;
  92. line-height: 22px;
  93. letter-spacing: 0.02em;
  94. text-align: left;
  95. text-underline-position: from-font;
  96. text-decoration-skip-ink: none;
  97. color: rgba(255, 255, 255, 1);
  98. padding-bottom: 2px;
  99. }
  100. .status {
  101. //styleName: Chi/Body XS;
  102. font-family: PingFang SC;
  103. font-size: 11px;
  104. font-weight: 400;
  105. line-height: 15px;
  106. letter-spacing: 0.02em;
  107. color: rgba(255, 255, 255, 0.4);
  108. }
  109. .right {
  110. position: absolute;
  111. right: 0;
  112. bottom: 0;
  113. width: 36px;
  114. height: 36px;
  115. background: rgba(255, 255, 255, 0.2);
  116. backdrop-filter: blur(60px);
  117. border-radius: 50%;
  118. text-align: center;
  119. img {
  120. width: 20px;
  121. height: 20px;
  122. margin-top: 8px;
  123. }
  124. }
  125. }
  126. .switch-btn {
  127. margin-top: 0;
  128. width: 50px !important;
  129. height: 28px !important;
  130. border: none;
  131. }
  132. }
  133. .active {
  134. background: rgba(255, 255, 255, 0.8);
  135. backdrop-filter: blur(40px);
  136. box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
  137. .bottom {
  138. .text {
  139. color: rgba(0, 20, 40, 1);
  140. }
  141. .status {
  142. color: rgba(116, 128, 141, 1);
  143. }
  144. }
  145. .right {
  146. background: rgba(255, 255, 255, 0.4);
  147. }
  148. }
  149. </style>
  150. <style lang="scss">
  151. .volumn-box {
  152. .van-switch__node {
  153. background: rgba(255, 255, 255, 0.6);
  154. width: 24px;
  155. height: 24px;
  156. top: 0.33vh;
  157. }
  158. .van-switch--on.switch-btn {
  159. .van-switch__node {
  160. transform: translate(calc(50px - 28px)) !important;
  161. }
  162. }
  163. .van-switch--on {
  164. background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
  165. .van-switch__node {
  166. background: #fff !important;
  167. }
  168. }
  169. .van-loading__spinner {
  170. color: $elActiveColor !important;
  171. }
  172. .van-switch__loading {
  173. top: 0;
  174. left: 0;
  175. width: 100%;
  176. height: 100%;
  177. line-height: 1;
  178. }
  179. .van-switch--disabled {
  180. opacity: 0.5;
  181. }
  182. }
  183. </style>