便携式空调

最新推荐文章于 2024-08-09 21:30:00 发布
oldwang1999
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量198
点赞数
分类专栏：项目文章标签：前端 javascript vue.js
本文链接：https://blog.csdn.net/oldwang1999/article/details/125496501
版权
项目专栏收录该内容
2 篇文章 0 订阅
订阅专栏
夏天太热了，自研便携式空调。
创建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>