清洁度
@@ -39,7 +39,27 @@
-
+
+
+
@@ -47,7 +67,9 @@
import { ref, onBeforeMount, onMounted, onActivated } from 'vue';
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import NormalMode from './mode/normal.vue';
+import SmartMode from './mode/smart.vue';
import { $commonService } from "@/services/framework/dependency-injection-service";
+import { SmartModeEnum } from './mode/enmu/smart-mode';
const getImgSrc = $commonService.$imgService.getImgSrc;
const router = useRouter();
@@ -72,14 +94,36 @@ const cleanlinessReminderText = ref('');
/** ref获取dom元素 */
const cleanlinessProgress: any = ref(null);
const cleanlinessReminder: any = ref(null);
+/** 开关机状态 */
+const ifRun = ref(false);
+/** 当前的智慧模式 */
+const smartMode = ref(SmartModeEnum.COLD);
+/** 标题名称 */
+const titelName = ref('');
+/** 模式切换是否显示 */
+const showTabs = ref(true);
+/** 模式是否显示 */
+const showMode = ref(true);
+/** 风量是否显示 */
+const showWind = ref(true);
+/** 风向是否显示 */
+const showWindDire = ref(true);
+/** 设备类型 */
+const deviceType = ref();
onActivated(() => {
- console.log(6666)
-})
-
-onBeforeMount(() => {
// 路由参数接收
const query: any = router.currentRoute.value.query;
+ titelName.value = query.name;
+ ifRun.value = query.openFlg === 'true'? true: false;
+ activeTab.value = parseInt(query.setMode);
+ smartMode.value = parseInt(query.smartMode);
+ deviceType.value = query.deviceType;
+ if (query.deviceType === '4E') {
+ showTabs.value = false;
+ showWind.value = false;
+ showWindDire.value = false;
+ }
})
onMounted(() => {
@@ -117,17 +161,31 @@ const switchModeTabs = (item: any) => {
activeTab.value = item.id;
}
+/** 开关机状态改变 */
+const changeSwitch = (value: boolean) => {
+ ifRun.value = value;
+}
+
/**
- * 监听常规模式下切换背景
+ * 监听模式下切换背景
* @param url 背景图片静态地址
*/
-const nomalChangeBg = (url: string) => {
+const changeBg = (url: string) => {
if (deviceDetailWrapper.value) {
url = getImgSrc(url);
- deviceDetailWrapper.value.style.background = `url(${url})`;
+ deviceDetailWrapper.value.style.background = `url(${url}) no-repeat`;
+ deviceDetailWrapper.value.style.backgroundSize = "100% 100%";
}
}
+/**
+ * 更换智慧模式
+ * @param mode 智慧模式
+ */
+const changeSmartMode = (mode: number) => {
+ smartMode.value = mode;
+}
+
/** 返回上一个页面 */
const back = () => {
router.back();
@@ -239,5 +297,10 @@ const back = () => {
flex: 1;
margin-top: 23px;
}
+
+ .smart-mode {
+ flex: 1;
+ margin-top: 23px;
+ }
}
\ No newline at end of file
diff --git a/src/view/device-detail/mode/enmu/smart-mode.ts b/src/view/device-detail/mode/enmu/smart-mode.ts
new file mode 100644
index 0000000..77d8f62
--- /dev/null
+++ b/src/view/device-detail/mode/enmu/smart-mode.ts
@@ -0,0 +1,13 @@
+/** 智慧模式枚举 */
+export enum SmartModeEnum {
+ /** 偏冷 */
+ COLD,
+ /** 凉爽 */
+ COOL,
+ /** 舒适 */
+ COMFORT,
+ /** 温暖 */
+ WARM,
+ /** 偏热 */
+ HOT,
+}
\ No newline at end of file
diff --git a/src/view/device-detail/mode/normal.vue b/src/view/device-detail/mode/normal.vue
index c5c9683..614cec0 100644
--- a/src/view/device-detail/mode/normal.vue
+++ b/src/view/device-detail/mode/normal.vue
@@ -9,7 +9,7 @@
{{ currentOptions.value }}
{{ currentOptions.unit }}
-
+
{{ treatOptions.value }}{{ treatOptions.unit }}
@@ -18,25 +18,58 @@
+
-
+
滤网未复位
+
+
+
+
-
-
![]()
+
+
+
![]()
+
+
{{ modeName }}
-
-
![]()
+
+
+
![]()
+
+
{{ windName }}
-
-
![]()
+
+
+
![]()
+
+
风向
-
-
![]()
+
+
+
![]()
+
+
开关
@@ -59,7 +92,7 @@
@@ -350,6 +404,32 @@ const changeSwitch = () => {
margin: 0 3px 0 6px;
}
}
+
+ // 水模块
+ .water-module-wrapper {
+ padding: 0 134px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #FFF;
+
+ .water-module-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .water-module-top {
+ font-size: 40px;
+ font-family: Roboto-Regular, Roboto, SourceHanSansCN-Regular, SourceHanSansCN;
+ }
+
+ .water-module-btm {
+ margin-top: 16px;
+ font-size: 20px;
+ font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+ }
+ }
+ }
.setting-control {
margin-top: 43px;
@@ -357,6 +437,19 @@ const changeSwitch = () => {
display: flex;
justify-content: space-between;
+ .setting-control-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ span {
+ color: #FFF;
+ font-size: 28px;
+ font-weight: 400;
+ margin-top: 20px;
+ }
+ }
+
.circle-card {
width: 110px;
height: 110px;
diff --git a/src/view/device-detail/mode/smart.vue b/src/view/device-detail/mode/smart.vue
index 4771880..8a8bc9c 100644
--- a/src/view/device-detail/mode/smart.vue
+++ b/src/view/device-detail/mode/smart.vue
@@ -1,37 +1,174 @@
-
-
-
-
-
- {{ item }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
@@ -40,5 +177,89 @@ const initSwiper = () => {
.smart-wrapper {
width: 100%;
height: 100%;
+ position: relative;
+
+ .swiper-container {
+ position: relative;
+ width: 100%;
+ height: 426px;
+
+ .select-wrapper {
+ position: absolute;
+ width: 212px;
+ height: 416px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ img {
+ width: 100%;
+ }
+ }
+ }
+
+ .swiper-slide {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: 300ms;
+ transform: scale(0.6);
+ color: rgba($color: #FFF, $alpha: .2);
+ }
+
+ .swiper-slide-active,.swiper-slide-duplicate-active{
+ transform: scale(1);
+ color: rgba($color: #FFF, $alpha: .7);
+ }
+
+ .swiper-slide-prev, .swiper-slide-next {
+ transform: scale(0.8);
+ color: rgba($color: #FFF, $alpha: .4);
+ }
+
+ .swiper-item {
+ font-size: 60px;
+ width: 65px;
+ text-align: center;
+ }
+
+ .smart-btm {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ bottom: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ z-index: 99;
+
+ .illustrate {
+ margin-left: 91px;
+ width: 56px;
+ height: 56px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .switch-btn {
+ width: 110px;
+ height: 110px;
+ border-radius: 50%;
+ background: url('@/assets/imgs/device-detail/smart-mode/circle-bg@2x.png') no-repeat;
+ background-size: 100% 100%;
+ margin-right: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 56px;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/view/tabs/device-control.vue b/src/view/tabs/device-control.vue
index ab110e4..b473fcb 100644
--- a/src/view/tabs/device-control.vue
+++ b/src/view/tabs/device-control.vue
@@ -63,6 +63,7 @@
diff --git a/src/view/tabs/tabs.vue b/src/view/tabs/tabs.vue
index 12b9620..a259128 100644
--- a/src/view/tabs/tabs.vue
+++ b/src/view/tabs/tabs.vue
@@ -140,6 +140,13 @@ const pullUp = () => {
position: relative;
-webkit-overflow-scrolling: touch;
+ .swiper-pagination ::v-deep .swiper-pagination-bullet {
+ width: 40px !important;
+ height: 4px;
+ background: rgba($color: #FFF, $alpha: .8) !important;
+ border-radius: 0;
+ }
+
.drop-down-menu {
width: 100vw;
height: 40px;
@@ -14,7 +14,7 @@
-