夏天太热了，自研便携式空调。

创建vue项目，写入这个文件，打包生成app，就能使用了。

<template><div class="home"><h1>夏日空调</h1><div class="air-conditioning"><div class="line"></div><div class="sign"><div class="top-box"><div class="grade-1"><div class="bar-chart"></div></div><div class="grade-2"><div class="bar-chart"></div></div><div class="grade-3"><div class="bar-chart"></div></div></div><div class="bottom-box"><div class="label"><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div><div class="circle-box"><div class="circle-black"></div></div></div><div class="bottom-box-line"></div><div class="explain"><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div><div class="circle-box"><div class="circle-black width-2"></div><div class="circle-black width-2"></div></div></div></div><div class="top-white-circle"><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div></div><div class="bottom-white-circle"><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div><div class="circle-box"><div class="circle-white"></div></div></div></div><div class="temperature"><img :src="require('../assets/snow.svg')" class="img-100" alt=""><div>{{ temperature }}℃</div><img :src="require('../assets/stop.svg')" class="img-100" alt="" v-if="!open"><img :src="require('../assets/open.svg')" class="img-100" alt="" v-else></div></div><div class="cloud-box"><div v-if="open" class="cloud"><div class="mr-20 cloud-img rotate-105"><img :src="require('../assets/cloud.svg')" height="30" width="30"></div><div class="mr-20 cloud-img rotate-90"><img :src="require('../assets/cloud.svg')" height="30" width="30"></div><div class="cloud-img rotate-75"><img :src="require('../assets/cloud.svg')" height="30" width="30"></div></div></div><div class="operation"><div class="add"><button class="button" @click="temperature++"><img :src="require('../assets/up.svg')" height="20" width="20"></button></div><div class="open-close"><button class="button" @click="open=!open"><img :src="require('../assets/stop.svg')" height="20" width="20"></button></div><div class="del"><button class="button" @click="temperature--"><img :src="require('../assets/down.svg')" height="20" width="20"></button></div></div></div>
</template><script>export default {name: 'HomeView',data() {return {temperature: 26,open:false,}}
}
</script>
<style lang="scss">
.home {position: relative;width: 100%;height: 100%;
}.cloud-box {margin-top: 50px;height: 200px;.cloud{display: flex;justify-content: center;.mr-20 {margin-right: 20px;}.cloud-img {width: 30px;height: 30px;}.rotate-105 {transform: rotate(105deg);}.rotate-75 {transform: rotate(72deg);}.rotate-90 {transform: rotate(90deg);}}}.operation {position: absolute;bottom: 0;left: 0;right: 0;display: flex;.button {border-radius: 50%;height: 30px;padding: 0;align-items: center;justify-content: center;display: flex;width: 30px;background-color: #fff;}.add {align-items: center;justify-content: center;display: flex;flex: 1;}.open-close {align-items: center;justify-content: center;display: flex;flex: 1;}.del {align-items: center;justify-content: center;display: flex;flex: 1;}
}.air-conditioning {position: relative;border: 2px solid #ECEDEB;height: 150px;border-radius: 0 0 20px 20px;box-shadow: 0 5px 12px 2px rgba(0, 0, 0, 0.15);.temperature {position: absolute;right: 20px;top: 20px;.img-100 {width: 20px;height: 20px;}}
}.line {height: 2px;width: 100%;background-color: #ECEDEB;position: absolute;bottom: 20px;
}.sign {margin: 10px;background-color: #0094dd;height: 70px;width: 55px;position: relative;box-sizing: border-box;padding: 10px 5px;display: flex;flex-direction: column;.top-box {flex: 1;box-sizing: border-box;padding-left: 3px;border-radius: 4px;background-color: #fff;display: flex;flex-direction: column;.grade-1 {flex: 1;display: flex;align-items: center;.bar-chart {width: 5px;height: 4px;background-color: #3a6a50;}}.grade-2 {flex: 1;display: flex;align-items: center;flex: 1;.bar-chart {width: 10px;height: 4px;background-color: #74ac41;}}.grade-3 {flex: 1;display: flex;align-items: center;.bar-chart {width: 15px;height: 4px;background-color: #d93526;}}}.bottom-box {border-radius: 4px;flex: 1;display: flex;flex-direction: column;margin-top: 3px;background-color: #fff;.label {display: flex;align-items: center;height: 8px;}.bottom-box-line {height: 1px;background-color: #000;}.explain {padding: 0 10px;display: flex;align-items: center;flex: 1;.width-2 {margin-top: 2px;width: 2px !important;height: 2px !important;}}}.top-white-circle {position: absolute;width: 45px;height: 8px;top: 0;display: flex;}.bottom-white-circle {position: absolute;width: 45px;height: 8px;bottom: 0;display: flex;}.circle-box {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;.circle-white {width: 3px;height: 3px;background-color: #fff;border-radius: 50%;}.circle-black {width: 3px;height: 3px;background-color: #000;border-radius: 50%;}}
}
</style>