最近天儿逐渐热起来了，大家无论是在办公室还是在家里或多或少都会把空调打开。
但是，空调最大的痛点是什么？
我简单总结了一下：费电、直吹太冷、噪音。
今天这些问题都随着"梨牌"第一代空调的发布随之解决！！！
<template>
<div class="air-wrap">
<div class="air-container">
<div class="air-logo">
<svg t="1748314349747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4208" width="40" height="40"><path d="M517 299.8l11.3 1.9c50.2 8.3 88.1 54.1 88.1 106.5 0 54 23.5 110.6 61.3 147.7 45.3 44.5 68.2 100.1 68.2 165.4 0 65.1-20.4 112.2-62.3 143.7-21.3 16-46.4 28.6-74.8 37.2-29.9 9.2-62.7 13.8-97.5 13.8-34.7 0-67.5-4.6-97.3-13.8-28.3-8.7-53.3-21.2-74.6-37.2-41.7-31.5-62-78.5-62-143.8 0-34.7 5.3-64.9 16.3-92.2 11.1-27.7 27.7-51.9 50.8-73.8 19.7-18.7 35.1-40.7 45.9-65.4 10.9-25 16.4-51.5 16.4-78.6v-0.7c0-31.1 11.9-61.9 31.1-80.5 18.7-18 42.2-28.2 68.1-29.6l11-0.6m17.8-40.3h-31v0.9c-35.2 1.9-68.1 16-93.7 40.8-28.5 27.6-43.3 69.9-43.3 109.3v0.7c0 43.5-18.3 85-49.9 115-55 52.2-79.5 117.2-79.5 195 0 73.8 23.3 134.5 77.9 175.7 49.4 37.3 117.1 59.1 196 59.1s146.8-21.8 196.3-59.1c54.8-41.3 78.2-102.1 78.2-175.7 0-73.9-25.7-140.4-80.2-193.9-31.1-30.6-49.3-77.1-49.3-119.2 0-72.6-52.4-134.5-121.5-145.9v-2.7z" p-id="4209" fill="#bfbfbf"></path><path d="M506.6 278.3h-0.5c-11-0.3-19.8-9.5-19.5-20.5 0.3-12.9-1.1-25.2-4.4-36.9-7.9-28.4-26.3-53.1-55.1-73.8-31.6-22.7-63.4-31.6-63.7-31.7-10.7-2.9-16.9-13.9-14-24.6 2.9-10.7 13.9-16.9 24.6-14 1.6 0.4 39.2 10.9 76.5 37.8 26.7 19.3 46.7 42.1 59.4 67.6 11.7 23.4-9.6 44.7-10.3 72.1-0.2 10.9 17.8 24 7 24z" p-id="4210" fill="#bfbfbf"></path><path d="M608.3 160.9c-1.9 21.5-9.9 41.8-23.5 58.7-8 9.9-17.6 18-27.7 23.4-9.3 5-18.8 7.6-27.7 7.6-5.8 0-11.3-1.1-16.5-3.3 1-13.9 5.2-34.7 19.8-51.8 9-10.4 21.2-18.8 36.3-24.8 11.5-4.5 24.6-7.8 39.3-9.8m37-42.3c-194.8 0-171.9 150.4-171.9 150.4 17 14.9 36.4 21.6 55.9 21.6 67.1 0 135.8-78.9 116-172z" p-id="4211" fill="#bfbfbf"></path></svg>
</div>
<div class="air-screen">
<template v-if="isStart">
<div class="air-wifi">
<svg t="1748314644804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6886" width="20" height="20"><path d="M723 620.5C666.8 571.6 593.4 542 513 542s-153.8 29.6-210.1 78.6c-3.2 2.8-3.6 7.8-0.8 11.2l36 42.9c2.9 3.4 8 3.8 11.4 0.9C393.1 637.2 450.3 614 513 614s119.9 23.2 163.5 61.5c3.4 2.9 8.5 2.5 11.4-0.9l36-42.9c2.8-3.3 2.4-8.3-0.9-11.2zM840.4 480.4C751.7 406.5 637.6 362 513 362s-238.7 44.5-327.5 118.4c-3.4 2.8-3.8 7.9-1 11.3l36 42.9c2.8 3.4 7.9 3.8 11.2 1C308 472.2 406.1 434 513 434s205 38.2 281.2 101.6c3.4 2.8 8.4 2.4 11.2-1l36-42.9c2.8-3.4 2.4-8.5-1-11.3z" p-id="6887" fill="#bfbfbf"></path><path d="M957.1 341.4C835.7 241.8 680.3 182 511 182c-168.2 0-322.6 59-443.7 157.4-3.5 2.8-4 7.9-1.1 11.4l36 42.9c2.8 3.3 7.8 3.8 11.1 1.1C222 306.7 360.3 254 511 254c151.8 0 291 53.5 400 142.7 3.4 2.8 8.4 2.3 11.2-1.1l36-42.9c2.9-3.4 2.4-8.5-1.1-11.3z" p-id="6888" fill="#bfbfbf"></path><path d="M512 778m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="6889" fill="#bfbfbf"></path></svg>
</div>
<div class="air-temperature">
<div class="temperature-left">
{{ temperatureText }}.
</div>
<div style="width: 20px">
<div class="temperature-icon">
<svg t="1748317594980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8836" width="12" height="12"><path d="M489 714.2c-13.3 0-24-10.7-24-24V336.7c0-13.3 10.7-24 24-24s24 10.7 24 24v353.5c0 13.3-10.7 24-24 24zM709.9 302.4H530.6c-13.3 0-24-10.7-24-24s10.7-24 24-24h179.3c13.3 0 24 10.7 24 24s-10.7 24-24 24zM730.3 772.5H551.1c-13.3 0-24-10.7-24-24s10.7-24 24-24h179.2c13.3 0 24 10.7 24 24s-10.7 24-24 24zM346.7 403.2c-41 0-74.4-33.4-74.4-74.4s33.4-74.4 74.4-74.4 74.4 33.4 74.4 74.4-33.4 74.4-74.4 74.4z m0-100.8c-14.6 0-26.4 11.8-26.4 26.4s11.8 26.4 26.4 26.4 26.4-11.8 26.4-26.4-11.8-26.4-26.4-26.4z" p-id="8837" fill="#bfbfbf"></path></svg>
</div>
<div class="temperature-right">{{ temperatureTextSub }}</div>
</div>
</div>
<div class="air-snowflake">
<svg t="1748314541033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5799" width="20" height="20"><path d="M512 64c24.7 0 44.8 20.1 44.8 44.8v43.1l29.3-15.5c21.9-11.6 49-3.2 60.5 18.7s3.2 49-18.7 60.5l-71.2 37.6v85.2c32 8.2 60.6 25.1 83.1 48l73.8-42.6-3-80.4c-0.9-24.7 18.4-45.5 43.1-46.4 24.7-0.9 45.5 18.4 46.4 43.1l1.2 33.1 37.3-21.5c21.4-12.4 48.8-5 61.2 16.4 12.4 21.4 5 48.8-16.4 61.2l-37.3 21.5 28.1 17.6c21 13.2 27.3 40.8 14.1 61.8-13.2 20.9-40.8 27.3-61.8 14.1l-68.2-42.8-73.6 42.5c4.2 15.3 6.5 31.4 6.5 48s-2.3 32.7-6.5 48l73.8 42.6 68.2-42.8c20.9-13.2 48.6-6.8 61.8 14.1 13.2 21 6.8 48.6-14.1 61.8l-28.1 17.6 37.3 21.5c21.4 12.4 28.8 39.8 16.4 61.2-12.4 21.4-39.8 28.8-61.2 16.4l-37.3-21.5-1.2 33.1c-0.9 24.7-21.7 44-46.4 43.1-24.7-0.9-44-21.7-43.1-46.4l3-80.4-73.8-42.6c-22.5 22.9-51 39.8-83.1 48v85.2l71.2 37.6c21.9 11.6 30.2 38.7 18.7 60.5-11.6 21.9-38.7 30.2-60.5 18.7L557 872.2v43.1c0 24.7-20.1 44.8-44.8 44.8-24.7 0-44.8-20.1-44.8-44.8v-43.1l-29.3 15.5c-21.9 11.6-49 3.2-60.5-18.7-11.6-21.9-3.2-49 18.7-60.5l71.2-37.6v-85.2c-32-8.2-60.6-25.1-83.1-48l-73.8 42.6 3 80.4c0.9 24.7-18.4 45.5-43.1 46.4-24.7 0.9-45.5-18.4-46.4-43.1l-1.2-33.1-37.3 21.5c-21.4 12.4-48.8 5-61.2-16.4s-5-48.8 16.4-61.2l37.3-21.5-28.1-17.6c-21-13.2-27.3-40.8-14.1-61.8 13.2-20.9 40.8-27.3 61.8-14.1l68.2 42.8 73.8-42.6c-4.2-15.3-6.5-31.4-6.5-48s2.3-32.7 6.5-48l-73.8-42.6-68.2 42.8c-21 13.2-48.6 6.8-61.8-14.1-13.2-21-6.8-48.6 14.1-61.8l28.1-17.6-37.3-21.5C119 336.8 111.7 309.4 124 288c12.4-21.4 39.8-28.8 61.2-16.4l37.3 21.5 1.2-33.1c0.9-24.7 21.7-44 46.4-43.1 24.7 0.9 44 21.7 43.1 46.4l-3 80.4 73.8 42.6c22.5-22.9 51-39.8 83.1-48v-85.2L396 215.6c-21.9-11.6-30.2-38.7-18.7-60.5 11.6-21.9 38.7-30.2 60.5-18.7l29.3 15.5v-43.1C467.2 84.1 487.3 64 512 64z m0 537.6c49.5 0 89.6-40.1 89.6-89.6s-40.1-89.6-89.6-89.6-89.6 40.1-89.6 89.6 40.1 89.6 89.6 89.6z" p-id="5800" fill="#bfbfbf"></path></svg>
</div>
</template>
</div>
<div class="air-bottom">
<div class="air-bottom-content">
<div class="fan-blade-hole">
<div class="wind" :class="{'open': isStart, 'topBottom': isTopBottom, 'leftRight': isLeftRight}"></div>
</div>
<div class="fan-blade" :class="{'open': isStart}">
</div>
</div>
</div>
</div>
<div class="control-container">
<div class="control-container-content">
<div class="control-screen">
<template v-if="isStart">
<span class="screen-temperature">
{{ temperature }}
</span>
<svg t="1748317594980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8836" width="20" height="20"><path d="M489 714.2c-13.3 0-24-10.7-24-24V336.7c0-13.3 10.7-24 24-24s24 10.7 24 24v353.5c0 13.3-10.7 24-24 24zM709.9 302.4H530.6c-13.3 0-24-10.7-24-24s10.7-24 24-24h179.3c13.3 0 24 10.7 24 24s-10.7 24-24 24zM730.3 772.5H551.1c-13.3 0-24-10.7-24-24s10.7-24 24-24h179.2c13.3 0 24 10.7 24 24s-10.7 24-24 24zM346.7 403.2c-41 0-74.4-33.4-74.4-74.4s33.4-74.4 74.4-74.4 74.4 33.4 74.4 74.4-33.4 74.4-74.4 74.4z m0-100.8c-14.6 0-26.4 11.8-26.4 26.4s11.8 26.4 26.4 26.4 26.4-11.8 26.4-26.4-11.8-26.4-26.4-26.4z" p-id="8837" fill="#bfbfbf"></path></svg>
<div style="position: absolute;bottom: 10px;right: 36px;" v-if="isTopBottom">
<svg t="1748334422291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16295" width="16" height="16"><path d="M524.8 527.36L435.2 709.12l-20.48 40.96a984.96 984.96 0 0 1-145.92-145.92l40.96-20.48 181.76-89.6 33.28 33.28zM578.56 576l51.2 245.76 12.8 61.44c-53.76-17.92-110.08-46.08-163.84-81.92l10.24-48.64 48.64-209.92c12.8 10.24 28.16 23.04 40.96 33.28zM688.64 650.24L870.4 896c-46.08 17.92-102.4 17.92-163.84 5.12l-23.04-64-84.48-243.2c30.72 23.04 61.44 40.96 89.6 56.32zM222.72 542.72c-35.84-53.76-64-110.08-81.92-163.84l61.44 12.8 253.44 53.76c10.24 12.8 17.92 25.6 30.72 38.4l-212.48 48.64-51.2 10.24zM122.88 314.88c-12.8-61.44-12.8-117.76 2.56-163.84l273.92 202.24c10.24 23.04 25.6 48.64 40.96 74.24l-256-89.6-61.44-23.04zM483.84 115.2h294.4c35.84 0 69.12 15.36 94.72 38.4 23.04 25.6 38.4 58.88 38.4 94.72v360.96h-89.6c-99.84 0-192-40.96-258.56-107.52-66.56-66.56-107.52-158.72-107.52-258.56v-128h28.16z m294.4 56.32H512v74.24c0 84.48 35.84 163.84 92.16 217.6 56.32 56.32 133.12 92.16 217.6 92.16h33.28v-307.2c0-20.48-7.68-40.96-23.04-53.76-12.8-15.36-33.28-23.04-53.76-23.04z" fill="#bfbfbf" p-id="16296"></path></svg>
</div>
<div style="position: absolute;bottom: 10px;right: 10px;" v-if="isLeftRight">
<svg t="1748334389094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14316" width="16" height="16"><path d="M860.16 358.4c0 48.64-10.24 92.16-28.16 122.88-20.48 35.84-48.64 58.88-79.36 58.88H271.36c-33.28 0-61.44-23.04-79.36-58.88-17.92-33.28-28.16-76.8-28.16-122.88 0-48.64 10.24-92.16 28.16-122.88 20.48-35.84 48.64-58.88 79.36-58.88h481.28c33.28 0 61.44 23.04 79.36 58.88 17.92 30.72 28.16 74.24 28.16 122.88zM140.8 752.64c-46.08-30.72-81.92-66.56-99.84-107.52l302.08-46.08c20.48 7.68 46.08 15.36 74.24 20.48l-220.16 104.96-56.32 28.16z m209.92 81.92l23.04-38.4 102.4-166.4c-15.36 0-28.16-2.56-43.52-5.12l-194.56 128-46.08 30.72c48.64 20.48 99.84 38.4 158.72 51.2z m363.52-227.84l271.36 40.96c-17.92 40.96-53.76 76.8-102.4 107.52l-53.76-25.6-207.36-99.84c33.28-7.68 64-15.36 92.16-23.04z m-117.76 23.04c-15.36 2.56-30.72 2.56-48.64 2.56l102.4 163.84 23.04 38.4c56.32-12.8 110.08-28.16 156.16-51.2l-46.08-30.72-186.88-122.88z m-64 2.56l58.88 171.52 12.8 40.96c-30.72 2.56-58.88 5.12-89.6 5.12-30.72 0-61.44-2.56-89.6-5.12l12.8-40.96 58.88-174.08c7.68 2.56 20.48 2.56 35.84 2.56zM808.96 358.4c0-38.4-7.68-74.24-20.48-99.84-10.24-20.48-23.04-33.28-35.84-33.28H271.36c-12.8 0-25.6 12.8-35.84 33.28-12.8 25.6-20.48 61.44-20.48 99.84s7.68 74.24 20.48 99.84c10.24 20.48 23.04 33.28 35.84 33.28h481.28c12.8 0 25.6-12.8 35.84-33.28 12.8-25.6 20.48-61.44 20.48-99.84z" fill="#bfbfbf" p-id="14317"></path></svg>
</div>
</template>
</div>
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
<div class="control-btn off-btn" @click="isStart=!isStart;temperature=26.5">
<svg t="1748334174382" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10195" width="26" height="26"><path d="M652.899 189.266c-16.036-7.058-34.761 0.22-41.82 16.258-7.059 16.038 0.221 34.761 16.258 41.819 104.649 46.06 172.27 149.682 172.27 263.991 0 77-29.986 149.392-84.434 203.839s-126.839 84.434-203.839 84.434-149.393-29.986-203.84-84.434c-54.448-54.447-84.433-126.839-84.433-203.839 0-114.963 68.159-218.821 173.642-264.591 16.075-6.975 23.451-25.659 16.477-41.733-6.975-16.075-25.662-23.452-41.734-16.477-128.688 55.837-211.839 182.544-211.839 322.8 0 47.469 9.304 93.535 27.653 136.917 17.717 41.887 43.073 79.499 75.365 111.791 32.292 32.291 69.903 57.647 111.791 75.364 43.383 18.35 89.449 27.653 136.918 27.653 47.468 0 93.535-9.304 136.917-27.653 41.888-17.717 79.499-43.073 111.791-75.364 32.291-32.292 57.647-69.904 75.364-111.791 18.35-43.383 27.653-89.448 27.653-136.917 0.001-139.458-82.493-265.877-210.16-322.067z" fill="#bfbfbf" p-id="10196"></path><path d="M512 479.517c17.522 0 31.727-14.205 31.727-31.727V128.228c0-17.522-14.204-31.727-31.727-31.727s-31.727 14.205-31.727 31.727V447.79c0 17.522 14.205 31.727 31.727 31.727z" fill="#bfbfbf" p-id="10197"></path></svg>
</div>
<div class="control-btn off-btn" @click="handleChangeModel">
<svg t="1748335331920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3170" width="26" height="26"><path d="M793.144889 574.179556l-263.111111 141.255111a39.025778 39.025778 0 0 1-9.159111 2.901333 37.660444 37.660444 0 0 1-10.752 1.479111c-8.760889 0-16.782222-2.730667-23.665778-5.12l-259.982222-141.198222c-16.440889-8.362667-28.16-28.330667-28.16-48.526222V250.481778c0-20.252444 11.719111-40.220444 28.501333-48.753778l260.608-140.117333c16.099556-8.305778 35.953778-8.248889 51.996444-0.113778L797.582222 201.955556a39.082667 39.082667 0 0 1 24.462222 25.998222l0.682667 4.209778c0 1.308444 0.512 3.299556 1.024 5.404444l0.113778 0.455111 0.113778 0.568889c0.853333 3.470222 1.763556 7.395556 1.763555 11.889778v274.488889c0 21.504-13.084444 41.301333-32.597333 49.208889zM512 138.012444L280.007111 264.590222v246.215111l224.142222 122.311111V379.676444L729.315556 256.568889 512 138.012444z" fill="#bfbfbf" p-id="3171"></path><path d="M0 684.316444c0 76.117333 134.087111 190.577778 323.697778 218.339556l0.682666 87.210667 225.450667-144.213334-227.555555-140.231111 0.512 75.320889 0.056888 8.931556c-155.022222-23.722667-262.599111-75.662222-262.599111-135.964445 0-26.055111 20.138667-50.631111 55.637334-71.964444 0.739556-4.323556 1.706667-8.647111 2.844444-12.856889C44.657778 600.177778 0 640.398222 0 684.316444zM632.490667 910.222222v-112.241778c190.976-17.464889 331.264-75.434667 331.264-144.213333 0-26.168889-20.138667-50.631111-55.637334-72.021333a137.216 137.216 0 0 0-2.844444-12.856889c74.126222 31.288889 118.727111 71.509333 118.727111 115.427555 0 84.878222-166.912 206.848-391.509333 225.905778z" fill="#bfbfbf" p-id="3172"></path></svg>
</div>
</div>
<div class="round-container">
<div class="round-btn btn-add" @click="handleAddTemperature">
<svg t="1748335291851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2046" width="26" height="26"><path d="M224 464h576a48 48 0 0 1 0 96h-576a48 48 0 0 1 0-96z" fill="#bfbfbf" p-id="2047"></path><path d="M560 224v576a48 48 0 0 1-96 0v-576a48 48 0 0 1 96 0z" fill="#bfbfbf" p-id="2048"></path></svg>
</div>
<div class="round-btn btn-reduce" @click="handleReduceTemperature">
<svg t="1748335252043" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22520" width="26" height="26"><path d="M224 464h576a48 48 0 0 1 0 96h-576a48 48 0 0 1 0-96z" fill="#bfbfbf" p-id="22521"></path></svg>
</div>
<div class="round-btn btn-wind-add" @click="handleAddWind">
<svg t="1748334980873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20269" width="26" height="26"><path d="M860.16 358.4c0 48.64-10.24 92.16-28.16 122.88-20.48 35.84-48.64 58.88-79.36 58.88H271.36c-33.28 0-61.44-23.04-79.36-58.88-17.92-33.28-28.16-76.8-28.16-122.88 0-48.64 10.24-92.16 28.16-122.88 20.48-35.84 48.64-58.88 79.36-58.88h481.28c33.28 0 61.44 23.04 79.36 58.88 17.92 30.72 28.16 74.24 28.16 122.88zM532.48 632.32l58.88 171.52 12.8 40.96c-30.72 2.56-58.88 5.12-89.6 5.12s-61.44-2.56-89.6-5.12l12.8-40.96 58.88-174.08c7.68 2.56 20.48 2.56 35.84 2.56zM808.96 358.4c0-38.4-7.68-74.24-20.48-99.84-10.24-20.48-23.04-33.28-35.84-33.28H271.36c-12.8 0-25.6 12.8-35.84 33.28-12.8 25.6-20.48 61.44-20.48 99.84s7.68 74.24 20.48 99.84c10.24 20.48 23.04 33.28 35.84 33.28h481.28c12.8 0 25.6-12.8 35.84-33.28 12.8-25.6 20.48-61.44 20.48-99.84z" fill="#bfbfbf" p-id="20270"></path></svg>
</div>
<div class="round-btn btn-wind-reduce" @click="handleReduceWind">
<svg t="1748335005753" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20459" width="26" height="26"><path d="M860.16 358.4c0 48.64-10.24 92.16-28.16 122.88-20.48 35.84-48.64 58.88-79.36 58.88H271.36c-33.28 0-61.44-23.04-79.36-58.88-17.92-33.28-28.16-76.8-28.16-122.88 0-48.64 10.24-92.16 28.16-122.88 20.48-35.84 48.64-58.88 79.36-58.88h481.28c33.28 0 61.44 23.04 79.36 58.88 17.92 30.72 28.16 74.24 28.16 122.88zM140.8 752.64c-46.08-30.72-81.92-66.56-99.84-107.52l302.08-46.08c20.48 7.68 46.08 15.36 74.24 20.48l-220.16 104.96-56.32 28.16z m573.44-145.92l271.36 40.96c-17.92 40.96-53.76 76.8-102.4 107.52l-53.76-25.6-207.36-99.84c33.28-7.68 64-15.36 92.16-23.04z m94.72-248.32c0-38.4-7.68-74.24-20.48-99.84-10.24-20.48-23.04-33.28-35.84-33.28H271.36c-12.8 0-25.6 12.8-35.84 33.28-12.8 25.6-20.48 61.44-20.48 99.84s7.68 74.24 20.48 99.84c10.24 20.48 23.04 33.28 35.84 33.28h481.28c12.8 0 25.6-12.8 35.84-33.28 12.8-25.6 20.48-61.44 20.48-99.84z" fill="#bfbfbf" p-id="20460"></path></svg>
</div>
</div>
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
<div class="control-btn" @click="isTopBottom=!isTopBottom">
<svg t="1748334422291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16295" width="26" height="26"><path d="M524.8 527.36L435.2 709.12l-20.48 40.96a984.96 984.96 0 0 1-145.92-145.92l40.96-20.48 181.76-89.6 33.28 33.28zM578.56 576l51.2 245.76 12.8 61.44c-53.76-17.92-110.08-46.08-163.84-81.92l10.24-48.64 48.64-209.92c12.8 10.24 28.16 23.04 40.96 33.28zM688.64 650.24L870.4 896c-46.08 17.92-102.4 17.92-163.84 5.12l-23.04-64-84.48-243.2c30.72 23.04 61.44 40.96 89.6 56.32zM222.72 542.72c-35.84-53.76-64-110.08-81.92-163.84l61.44 12.8 253.44 53.76c10.24 12.8 17.92 25.6 30.72 38.4l-212.48 48.64-51.2 10.24zM122.88 314.88c-12.8-61.44-12.8-117.76 2.56-163.84l273.92 202.24c10.24 23.04 25.6 48.64 40.96 74.24l-256-89.6-61.44-23.04zM483.84 115.2h294.4c35.84 0 69.12 15.36 94.72 38.4 23.04 25.6 38.4 58.88 38.4 94.72v360.96h-89.6c-99.84 0-192-40.96-258.56-107.52-66.56-66.56-107.52-158.72-107.52-258.56v-128h28.16z m294.4 56.32H512v74.24c0 84.48 35.84 163.84 92.16 217.6 56.32 56.32 133.12 92.16 217.6 92.16h33.28v-307.2c0-20.48-7.68-40.96-23.04-53.76-12.8-15.36-33.28-23.04-53.76-23.04z" fill="#bfbfbf" p-id="16296"></path></svg>
</div>
<div class="control-btn" @click="isLeftRight=!isLeftRight">
<svg t="1748334389094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14316" width="26" height="26"><path d="M860.16 358.4c0 48.64-10.24 92.16-28.16 122.88-20.48 35.84-48.64 58.88-79.36 58.88H271.36c-33.28 0-61.44-23.04-79.36-58.88-17.92-33.28-28.16-76.8-28.16-122.88 0-48.64 10.24-92.16 28.16-122.88 20.48-35.84 48.64-58.88 79.36-58.88h481.28c33.28 0 61.44 23.04 79.36 58.88 17.92 30.72 28.16 74.24 28.16 122.88zM140.8 752.64c-46.08-30.72-81.92-66.56-99.84-107.52l302.08-46.08c20.48 7.68 46.08 15.36 74.24 20.48l-220.16 104.96-56.32 28.16z m209.92 81.92l23.04-38.4 102.4-166.4c-15.36 0-28.16-2.56-43.52-5.12l-194.56 128-46.08 30.72c48.64 20.48 99.84 38.4 158.72 51.2z m363.52-227.84l271.36 40.96c-17.92 40.96-53.76 76.8-102.4 107.52l-53.76-25.6-207.36-99.84c33.28-7.68 64-15.36 92.16-23.04z m-117.76 23.04c-15.36 2.56-30.72 2.56-48.64 2.56l102.4 163.84 23.04 38.4c56.32-12.8 110.08-28.16 156.16-51.2l-46.08-30.72-186.88-122.88z m-64 2.56l58.88 171.52 12.8 40.96c-30.72 2.56-58.88 5.12-89.6 5.12-30.72 0-61.44-2.56-89.6-5.12l12.8-40.96 58.88-174.08c7.68 2.56 20.48 2.56 35.84 2.56zM808.96 358.4c0-38.4-7.68-74.24-20.48-99.84-10.24-20.48-23.04-33.28-35.84-33.28H271.36c-12.8 0-25.6 12.8-35.84 33.28-12.8 25.6-20.48 61.44-20.48 99.84s7.68 74.24 20.48 99.84c10.24 20.48 23.04 33.28 35.84 33.28h481.28c12.8 0 25.6-12.8 35.84-33.28 12.8-25.6 20.48-61.44 20.48-99.84z" fill="#bfbfbf" p-id="14317"></path></svg>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "air2",
data() {
return {
isStart: false,
isTopBottom: false,
isLeftRight: false,
temperature: 26.5,
}
},
computed: {
temperatureText() {
// 获取temperature的整数部分
return Math.floor(this.temperature);
},
temperatureTextSub() {
// 判断temperature是不是整数，如果是整数返回0，不是整数返回5
return this.temperature % 1 === 0 ? 0 : 5;
}
},
methods: {
handleChangeModel() {
alert('大夏天的你吹哪门子热风?');
},
handleAddTemperature() {
if(this.temperature >= 32) {
alert('热疯了!')
return;
}
this.temperature += 0.5;
},
handleReduceTemperature() {
if(this.temperature <= 12) {
alert('忒冷了!')
return;
}
this.temperature -= 0.5;
},
handleAddWind() {
},
handleReduceWind() {
},
}
}
</script>
<style scoped>
@font-face {
font-family: "digital";
src: url("./digital-7.ttf");
}
.air-wrap {
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.air-container {
width: 840px;
height: 310px;
border-width: 2px 2px 0 2px;
border-style: solid;
border-color: #ddd;
position: relative;
}
.air-logo {
position: absolute;
left: 40px;
bottom: 90px;
}
.air-screen {
width: 90px;
height: 90px;
border: 2px solid #ddd;
border-radius: 50%;
position: absolute;
bottom: 80px;
right: 60px;
text-align: center;
line-height: 0;
padding: 6px;
box-sizing: border-box;
}
.air-temperature {
width: 100%;
height: 38px;
display: flex;
justify-content: center;
}
.temperature-left {
width: 40px;
font-size: 36px;
line-height: 38px;
font-family: digital;
color: #bfbfbf;
}
.temperature-icon {
width: 20px;
height: 13px;
line-height: 13px;
}
.temperature-right {
width: 20px;
height: 20px;
font-size: 20px;
line-height: 20px;
font-family: digital;
color: #bfbfbf;
}
.air-bottom {
width: calc(100% + 4px);
height: 50px;
border: 2px solid #ddd;
box-sizing: border-box;
border-radius: 50px;
position: absolute;
left: -2px;
bottom: -25px;
transform: rotateX(40deg);
}
.air-bottom-content {
width: calc(100% - 6px);
height: calc(100% - 6px);
border: 1px solid #ddd;
box-sizing: border-box;
border-radius: 50px;
position: absolute;
left: 3px;
bottom: 3px;
transform: rotateX(20deg);
}
.fan-blade-hole {
width: 770px;
height: 80%;
border: 1px solid #ddd;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.fan-blade {
width: 770px;
height: 80%;
border: 2px solid #ddd;
margin: 0 auto;
background-color: #f4f4f4;
transition: all 0.3s;
position: relative;
z-index: -1;
}
.fan-blade.open {
transform-origin: bottom center;
transform: rotateX(160deg);
}
.wind {
width: 770px;
height: 100px;
background: linear-gradient(0deg, rgba(0, 143, 235, 0.3) 0%, rgba(0, 143, 235, 0.05) 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
mask-image: linear-gradient(
to bottom,
hsl(0 0% 0% / 0),
hsl(0 0% 0% / 1) 20%,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
margin-top: 20px;
position: relative;
z-index: 99;
transition: all 1s;
opacity: 0;
}
.wind.open {
opacity: 1;
}
.wind.topBottom {
transform-origin: 50% 0;
animation: topBottom 4s infinite alternate;
}
@keyframes topBottom {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(30px);
}
}
.wind.leftRight {
animation: leftRight 4s infinite alternate;
}
@keyframes leftRight {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(100px);
}
}
.control-container {
width: 140px;
height: 400px;
margin-left: 20px;
}
.control-container-content {
width: 140px;
height: 400px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
}
.control-screen {
width: 120px;
height: 100px;
background-color: #f4f4f4;
border-radius: 8px;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.screen-temperature {
font-family: digital;
font-size: 40px;
color: #bfbfbf;
}
.round-container {
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid #ddd;
box-sizing: border-box;
margin-bottom: 10px;
position: relative;
}
.round-container::before {
content: '';
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid #ddd;
box-sizing: border-box;
position: absolute;
top: 20px;
left: 20px;
}
.round-btn {
cursor: pointer;
}
.btn-add {
width: 26px;
height: 26px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.btn-reduce {
width: 26px;
height: 26px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.btn-wind-add {
width: 26px;
height: 26px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn-wind-reduce {
width: 26px;
height: 26px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.control-btn {
width: 30px;
height: 30px;
border: 1px solid #ddd;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
欢迎体验，伯君一笑~
