新增设备详情页面

src/router.ts

@@ -59,6 +59,14 @@ const projectRoutes = [
       title: '智慧屏首頁'
     }
   },
+  {
+    name: "device-detail",
+    path: "/device-detail",
+    component: () => import("@/view/device-detail/device-detail.vue"),
+    meta: {
+      title: '设备详情页'
+    }
+  },
   // 非哈希路由暂不启用
   {
     name: "notFound",

src/view/device-detail/device-detail.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="device-detail-wrapper">
+        <div class="title">
+            <!-- 返回按钮 -->
+            <div class="back-icon" style="margin-left: 24px;">
+                <img src="@/assets/imgs/device-detail/back@2x.png" width="100%" class="back-img" @click="back()">
+            </div>
+            <!-- 标头名称 -->
+            <div class="title-name">客厅空调</div>
+            <!-- 更多 -->
+            <div class="more-icon" style="margin-right: 24px;">
+                <img src="@/assets/imgs/device-detail/more@2x.png" width="100%" class="more-img">
+            </div>
+        </div>
+
+        <!-- 常规/智慧模式切换 -->
+        <div class="switch-mode-wrapper">
+            <div class="switch-mode-container">
+                <div
+                    v-for="item in modeTabList"
+                    :key="item.id"
+                    class="default-tab"
+                    :class="{'active-tab': activeTab === item.id}"
+                    @click="switchModeTabs(item)"
+                >{{ item.value }}</div>
+            </div>
+
+            <!-- 清洁度 -->
+            <div class="cleanliness">
+                <div class="cleanliness-text">清洁度</div>
+                <div class="cleanliness-container">
+                    <div class="cleanliness-progress" ref="cleanlinessProgress"></div>
+                </div>
+                <div class="cleanliness-reminder" ref="cleanlinessReminder">
+                    {{ cleanlinessReminderText }}
+                </div>
+            </div>
+        </div>
+
+        <!-- 模式 -->
+        <!-- 常规模式 -->
+        <NormalMode class="normal-mode"></NormalMode>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeMount, onMounted } from 'vue';
+import { useRouter, onBeforeRouteUpdate } from "vue-router";
+import NormalMode from './mode/normal.vue';
+
+const router = useRouter();
+/** 模式tab列表 */
+const modeTabList = ref([
+    {id: 0, value: '常规'},
+    {id: 1, value: '智慧'}
+]);
+/** 模式tab当前激活 */
+const activeTab = ref(0);
+/** 自定义清洁度 0~100 */
+const cleanliness = ref(21);
+/** 
+ * 自清洁状态 
+ * 0：无，1：清洁中，2：除菌中，3：健康中
+ */
+const isClean = ref(2);
+/** 自清洁状态文字 */
+const cleanlinessReminderText = ref('');
+/** ref获取dom元素 */
+const cleanlinessProgress: any = ref(null);
+const cleanlinessReminder: any = ref(null);
+
+onBeforeMount(() => {
+    // 路由参数接收
+    const query: any = router.currentRoute.value.query;
+})
+
+onMounted(() => {
+    if (cleanlinessProgress.value) {
+        cleanlinessProgress.value.style.background = (cleanliness.value < 100 / 2)? '#D65659': '#278958';
+        cleanlinessProgress.value.style.width = `${cleanliness.value}%`;
+    }
+
+    if (cleanlinessReminder.value) {
+        let cleanlinessReminderColor = '';
+        if (isClean.value === 0 && (cleanliness.value < 100 / 2)) {
+            cleanlinessReminderText.value = '需清洁';
+            cleanlinessReminderColor = '255, 133, 61';
+        } else if (isClean.value === 1) {
+            cleanlinessReminderText.value = '清洁中';
+            cleanlinessReminderColor = '89, 145, 255';
+        } else if (isClean.value === 2) {
+            cleanlinessReminderText.value = '除菌中';
+            cleanlinessReminderColor = '89, 145, 255';
+        } else if (isClean.value === 3) {
+            cleanlinessReminderText.value = '健康中';
+            cleanlinessReminderColor = '39, 137, 88';
+        }
+        cleanlinessReminder.value.style.color = `rgb(${cleanlinessReminderColor})`;
+        cleanlinessReminder.value.style.backgroundColor = `rgba(${cleanlinessReminderColor}, .2)`;
+
+    }
+})
+
+/** 模式卡片切换 */
+const switchModeTabs = (item: any) => {
+    if (activeTab.value === item.id) {
+        return;
+    }
+    activeTab.value = item.id;
+}
+
+/** 返回上一个页面 */
+const back = () => {
+    router.back();
+}
+</script>
+
+<style lang="scss" scoped>
+.device-detail-wrapper {
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    background: url('src/assets/imgs/device-detail/normal-mode/normal_bg_shutdown@2x.png') no-repeat;
+    background-size: 100% 100%;
+    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 62px 0;
+        flex-shrink: 0;
+        
+        .back-icon, .more-icon {
+            width: 96px;
+            height: 96px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .title-name {
+            color: #FFF;
+            font-size: 80px;
+            font-weight: 400;
+        }
+    }
+
+    .switch-mode-wrapper {
+        width: 100%;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+
+        .switch-mode-container {
+            padding: 12px;
+            display: flex;
+            font-size: 56px;
+            font-weight: 400;
+            background: url('src/assets/imgs/device-detail/mode-container-bg@2x.png') no-repeat;
+            background-size: 100% 100%;
+
+            .default-tab {
+                color: rgba($color: #FFF, $alpha: .7);
+                padding: 26px 58px;
+            }
+
+            .active-tab {
+                color: #FFF;
+                background: url('src/assets/imgs/device-detail/mode-tab-active@2x.png') no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+        
+        .cleanliness {
+            position: absolute;
+            top: 220px;
+            right: 50px;
+            color: #FFF;
+            
+            .cleanliness-text {
+                font-size: 52px;
+            }
+
+            .cleanliness-container {
+                width: 152px;
+                height: 28px;
+                background-color: rgba($color: #B8B8B8 , $alpha: .2);
+                border-radius: 4px;
+                margin-top: 32px;
+                
+                .cleanliness-progress {
+                    width: 0%;
+                    height: 100%;
+                    border-radius: 4px;
+                }
+            }
+
+            .cleanliness-reminder {
+                font-size: 40px;
+                padding: 12px 20px;
+                margin-top: 20px;
+                border-radius: 32px;
+            }
+        }
+    }
+
+    .normal-mode {
+        flex: 1;
+        margin-top: 46px;
+    }
+}
+</style>

src/view/device-detail/mode/enmu/mode.enmu.ts

@@ -0,0 +1,31 @@
+/** 模式枚举 */
+export enum Mode {
+    /** 舒爽 */
+    RELAX,
+    /** 送风 */
+    WIND,
+    /** 制冷 */
+    COLD,
+    /** 制热 */
+    HOT,
+    /** 除湿 */
+    WET,
+    /** 自动 */
+    AUTO,
+    /** 干爽除湿 */
+    DRY_WET,
+    /** 强力除湿 */
+    STRONG_WET,
+    /** 全年除湿 */
+    ANNUAL_WET,
+    /** 自动除湿 */
+    AUTO_WET,
+    /** 舒心睡眠 */
+    SLEEP,
+    /** 地暖 */
+    FLOOR,
+    /** 制热+地暖 */
+    HOT_FLOOR,
+    /** 除湿+地暖 */
+    WET_FLOOR,
+}

src/view/device-detail/mode/enmu/wind.enmu.ts

@@ -0,0 +1,17 @@
+/** 风量枚举 */
+export enum Wind {
+    /** 微风 */
+    LIGHT,
+    /** 超低风 */
+    SUPER_LOW,
+    /** 低风 */
+    LOW,
+    /** 中风 */
+    MIDDLE,
+    /** 高风 */
+    HIGH,
+    /** 超高风 */
+    SUPER_HIGH,
+    /** 自动 */
+    AUTO
+}

src/view/device-detail/mode/mode-dic.ts

@@ -0,0 +1,102 @@
+import { Mode } from './enmu/mode.enmu';
+
+/**
+ * 模式字典
+ * modeName：模式名称
+ * mode：模式id
+ * modeImg：模式图片
+ * nomalBg：常规背景
+ * smartBg：智慧背景
+ */
+const ModeOptions = [
+    {
+        modeName: '制冷',
+        mode: Mode.COLD,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/cold@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '除湿',
+        mode: Mode.WET,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/wet@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '干爽除湿',
+        mode: Mode.DRY_WET,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/dry_wet@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '强力除湿',
+        mode: Mode.STRONG_WET,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/strong_wet@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '自动除湿',
+        mode: Mode.AUTO_WET,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/auto_wet@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '全年除湿',
+        mode: Mode.ANNUAL_WET,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/annual_wet@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '舒爽',
+        mode: Mode.RELAX,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/relax@2x.png',
+        nomalBg: 'normal_bg_wind@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '舒心睡眠',
+        mode: Mode.SLEEP,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/sleep@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '制热',
+        mode: Mode.HOT,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/hot@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '送风',
+        mode: Mode.WIND,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/wind@2x.png',
+        nomalBg: 'normal_bg_wind@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '自动',
+        mode: Mode.AUTO,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/auto@2x.png',
+        nomalBg: 'normal_bg_wind@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '地暖',
+        mode: Mode.FLOOR,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/floor@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '制热+地暖',
+        mode: Mode.HOT_FLOOR,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/hot_floor@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png',
+        smartBg: ''
+    }, {
+        modeName: '除湿+地暖',
+        mode: Mode.WET_FLOOR,
+        modeImg: '/src/assets/imgs/device-detail/normal-mode/wet_floor@2x.png',
+        nomalBg: '/src/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png',
+        smartBg: ''
+    }
+]
+
+ModeOptions.forEach((item: any, index: number) => {
+    item['id'] = index;
+});
+export {ModeOptions}

src/view/device-detail/mode/normal.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="normal-wrapper">
+        <div class="title">{{ currentOptions.titleName }}</div>
+        <!-- 温湿度设置 -->
+        <div class="set-wrapper">
+            <div class="set-reduce" @click="handleReduce()">
+                <img src="@/assets/imgs/device-detail/normal-mode/set-reduce@2x.png" width="100%">
+            </div>
+            <div class="set-container">
+                <div class="current-value">{{ currentOptions.value }}</div>
+                <div class="current-unit">{{ currentOptions.unit }}</div>
+                <div class="treat">
+                    <span>{{ treatOptions.value }}{{ treatOptions.unit }}</span>
+                    <img src="@/assets/imgs/device-detail/normal-mode/switch_btn@2x.png" width="100%" @click="switchTempHumi()">
+                </div>
+            </div>
+            <div class="set-add" @click="handleAdd()">
+                <img src="@/assets/imgs/device-detail/normal-mode/set-add@2x.png" width="100%">
+            </div>
+        </div>
+        <!-- 滤网未复位提示 -->
+        <div class="filter-screen-prompt">
+            <img src="@/assets/imgs/device-detail/normal-mode/filter_fault@2x.png" width="100%" class="filter-screen-prompt-img">
+            <span>滤网未复位</span>
+            <img src="@/assets/imgs/device-detail/normal-mode/right@2x.png" width="100%">
+        </div>
+        <!-- 模式、风量、风向、开关 -->
+        <div class="setting-control">
+            <div class="circle-card mode">
+                <img :src="modeImg" alt="">
+            </div>
+            <div class="circle-card wind"></div>
+            <div class="circle-card wind-dire"></div>
+            <div class="circle-card switch"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeMount, onMounted } from 'vue';
+import { ModeOptions } from './mode-dic';
+import { Mode } from './enmu/mode.enmu';
+
+const tempOptions = ref({
+    titleName: '室内',
+    value: 25,
+    unit: '℃',
+    min: 16,
+    max: 32,
+    current: 'temp'
+});
+const humiOptions = ref({
+    titleName: '湿度',
+    value: 76,
+    unit: '%',
+    min: 35,
+    max: 90,
+    current: 'humi'
+});
+const currentOptions = ref();
+const treatOptions = ref();
+const modeOptions: any = ModeOptions;
+const mode = ref(Mode.COLD);
+const modeImg = ref('');
+
+onBeforeMount(() => {
+    currentOptions.value = {...tempOptions.value};
+    treatOptions.value = {...humiOptions.value};
+    modeImg.value = modeOptions.find((item: any) => item.mode === mode.value).modeImg;
+})
+
+onMounted(() => {
+})
+
+/** 温湿度减 */
+const handleReduce = () => {
+    if (currentOptions.value.value <= currentOptions.value.min) {
+        currentOptions.value.value = currentOptions.value.max;
+    } else {
+        currentOptions.value.value -= 1;
+    }
+}
+
+/** 温湿度加 */
+const handleAdd = () => {
+    if (currentOptions.value.value >= currentOptions.value.max) {
+        currentOptions.value.value = currentOptions.value.min;
+    } else {
+        currentOptions.value.value += 1;
+    }
+}
+
+/** 切换温湿度 */
+const switchTempHumi = () => {
+    if (currentOptions.value.current === 'temp') {
+        tempOptions.value = {...currentOptions.value};
+        currentOptions.value = {...humiOptions.value};
+        treatOptions.value = {...tempOptions.value};
+    } else {
+        humiOptions.value = {...currentOptions.value};
+        currentOptions.value = {...tempOptions.value};
+        treatOptions.value = {...humiOptions.value};
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.normal-wrapper {
+    width: 100%;
+    height: 100%;
+
+    .title {
+        color: #FFF;
+        font-size: 56px;
+        text-align: center;
+    }
+
+    .set-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 22px;
+        position: relative;
+
+        .set-reduce, .set-add {
+            width: 268px;
+            height: 268px;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .set-container {
+            color: #FFF;
+            font-family: Roboto-Regular, Roboto;
+
+            .current-value {
+                font-size: 360px;
+                font-family: Roboto-Light, Roboto;
+                font-weight: 300;
+            }
+
+            .current-unit {
+                font-size: 100px;
+                position: absolute;
+                top: 35px;
+                right: 380px;
+            }
+
+            .treat {
+                position: absolute;
+                bottom: 35px;
+                right: 280px;
+                font-size: 68px;
+
+                img {
+                    width: 60px;
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
+
+    .filter-screen-prompt {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 35px;
+
+        img {
+            width: 60px;
+            height: 62px;
+        }
+
+        span {
+            color: #D65659;
+            font-size: 52px;
+            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+            font-weight: 400;
+            margin: 0 6px 0 12px;
+        }
+    }
+
+    .setting-control {
+        margin-top: 86px;
+        padding: 0 128px;
+        display: flex;
+        justify-content: space-between;
+
+        .circle-card {
+            width: 220px;
+            height: 220px;
+            background: url('src/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+                width: 112px;
+                height: 112px;
+            }
+        }
+    }
+}
+</style>

src/view/drop-down-menu/drop-down-menu.vue

@@ -70,33 +70,34 @@ const pullUp = () => {
     overflow: hidden;
 
     .content-top {
-        padding: 19px 24px;
+        padding: 38px 48px;
+        padding-bottom: 0;
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
 
         .func-wrapper {
-            width: 210px;
+            width: 420px;
-            height: 200px;
+            height: 400px;
-            border-radius: 16px;
+            border-radius: 32px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            margin: 5px 0;
+            margin: 10px 0;
             background: #20252E;
 
             .func-img {
-                width: 66px;
+                width: 132px;
-                height: 66px;
+                height: 132px;
             }
 
             .func-text {
-                font-size: 28px;
+                font-size: 56px;
                 color: #FFF;
                 font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                 font-weight: 400;
-                margin-top: 42px;
+                margin-top: 84px;
             }
         }
     }
@@ -104,10 +105,10 @@ const pullUp = () => {
     .content-btm {
         width: 100vw;
         text-align: center;
-        padding-bottom: 6px;
+        padding-bottom: 12px;
 
         img {
-            width: 142px;
+            width: 284px;
         }
     }
 }

src/view/tabs/device-control.vue

@@ -16,6 +16,7 @@
                         'air-quality-liang': item.airQuality === '良',
                         'air-quality-cha': item.airQuality === '差',
                     }"
+                    @click="goToDetail(item)"
                 >
                     <div class="content-top">
                         <div class="device-name">{{ item.name }}</div>
@@ -38,7 +39,7 @@
                                 </span>
                                 <span v-for="i in item.unitArr" class="unit">{{ i }}</span>
                             </div>
-                            <div class="close-btn" @click="switchDevice(item)">
+                            <div class="close-btn" @click.stop="switchDevice(item)">
                                 <img src="@/assets/imgs/device-control/power_on@2x.png" v-show="item.openFlg">
                                 <img src="@/assets/imgs/device-control/shutdown@2x.png" v-show="!item.openFlg">
                             </div>
@@ -61,6 +62,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
+import router from "@/router";
 
 const deviceList: any = ref<any[]>([]);
 
@@ -126,6 +128,17 @@ const allShutDown = () => {
         }
     })
 }
+
+/**
+ * 进入详情页面
+ * @param item 点击的设备信息
+ */
+const goToDetail = (item: any) => {
+    router.push({
+        path: '/device-detail',
+        query: {}
+    })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -139,7 +152,7 @@ const allShutDown = () => {
 
     .title {
         width: 100%;
-        padding: 35px 0;
+        padding: 70px 0;
         position: relative;
         flex-shrink: 0;
 
@@ -147,40 +160,39 @@ const allShutDown = () => {
             text-align: center;
             color: #FFF;
             font-weight: 400;
-            font-size: 40px;
+            font-size: 80px;
         }
 
         .all-close-btn {
             color: #FFF;
-            font-size: 32px;
+            font-size: 64px;
-            padding: 14px 18px;
+            padding: 28px 36px;
             background: #394457;
-            border-radius: 16px;
+            border-radius: 32px;
             position: absolute;
-            top: 25px;
+            top: 50px;
-            right: 24px;
+            right: 48px;
         }
     }
 
     .container {
         flex: 1;
-        overflow: auto;
     }
 
     .content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        padding: 0 24px;
+        padding: 0 48px;
 
         .device-card {
-            width: 326px;
-            height: 146px;
             box-sizing: border-box;
+            width: 620px;
+            height: 292px;
             background: #20252E;
-            border-radius: 16px;
+            border-radius: 32px;
-            padding: 22px 24px 10px 24px;
+            padding: 44px 48px 20px 48px;
-            margin-bottom: 20px;
+            margin-bottom: 40px;
 
             .content-top {
                 display: flex;
@@ -188,15 +200,15 @@ const allShutDown = () => {
 
                 .device-name {
                     color: #FFF;
-                    font-size: 24px;
+                    font-size: 48px;
-                    margin-right: 10px;
+                    margin-right: 20px;
-                    padding: 6px 0;
+                    padding: 12px 0;
                 }
 
                 .status-border {
-                    font-size: 20px;
+                    font-size: 40px;
-                    padding: 6px 10px;
+                    padding: 12px 20px;
-                    border-radius: 16px;
+                    border-radius: 32px;
 
                     span {
                         display: inline-block;
@@ -215,7 +227,7 @@ const allShutDown = () => {
             }
 
             .content-btm {
-                margin-top: 18px;
+                margin-top: 36px;
                 font-family: Roboto-Light, Roboto;
 
                 // 关机
@@ -229,9 +241,9 @@ const allShutDown = () => {
                 }
 
                 .status {
-                    font-size: 40px;
+                    font-size: 80px;
                     font-weight: 300;
-                    margin-right: 4px;
+                    margin-right: 8px;
                 }
 
                 .hot {
@@ -243,12 +255,12 @@ const allShutDown = () => {
                 }
 
                 .unit {
-                    font-size: 18px;
+                    font-size: 36px;
                     font-weight: 400;
                 }
 
                 .air-quality {
-                    font-size: 40px;
+                    font-size: 80px;
                 }
             }
 
@@ -256,10 +268,11 @@ const allShutDown = () => {
             .device-btm {
                 display: flex;
                 justify-content: space-between;
+                align-items: center;
 
                 .close-btn {
-                    width: 60px;
+                    width: 120px;
-                    height: 60px;
+                    height: 120px;
                     
                     img {
                         width: 100%;