Storehouse/src/App.vue

<template>
  <div id="app">
    <iframe id="iframe" src="" frameborder="0"></iframe>
    <header class="nav">
      <div class="wether">
        <img src="@/assets/images/cloudy.png" alt="">
        <span class="tianqi">多云</span>
      </div>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input placeholder="请输入" v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <ul>
        <li v-for="s in liImgs" class="nav-li">
          <img :src="s.img" alt="">
        </li>
      </ul>
    </header>
    <aside class="right-aside">
      <span v-for="(s, i) in heatList" :class="`span${i}`" :key="i">
        {{ s }}
      </span>
    </aside>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      heatList: [20, 40, 200, 100],
      liImgs: [
        { img: require('@/assets/images/1.png') },
        { img: require('@/assets/images/2.png') },
        { img: require('@/assets/images/3.png') },
        { img: require('@/assets/images/4.png') },
        { img: require('@/assets/images/5.png') },
        { img: require('@/assets/images/6.png') }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '仓位号',

      input3: '',
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {
  background-color: transparent !important;
  border-color: transparent !important;

}

/deep/ .el-select {
  width: 13%;
  margin: 0 5px;
}

/deep/ .el-select>.el-input {
  width: 100%;
  
}

/deep/ .el-input {
  width: 25%;
  margin: 0 5px;
  box-shadow: 0 0 10px #5d8cad;
  border-radius: 4px;
}
</style>
<style lang="less" >
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body,
html {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

  #iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}

#app {
  width: 100%;
  height: 100%;
}

.nav {
  // width: 42.4%;

  position: fixed;
  right: 0;
  top: 0;
  height: 7.4%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .wether {
    display: flex;
    align-items: center;

    .tianqi {
      width: 40px;
      color: #FFF;
      font-family: quare;
      vertical-align: middle;
      margin-left: 10px;
      margin-right: 5px;
    }
  }

  ul {
    display: flex;
    // justify-content: center;
    align-items: center;

    .nav-li {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px;
      // background-color: rgba(35, 95, 156, 0.2);
      border-radius: 8px;
      box-shadow: 0 0 10px #5d8cad;
    }
  }

}

.right-aside {
  width: 4.7%;
  height: 34.6%;
  top: 35%;
  right: 0;
  position: absolute;
  background-image: url('@/assets/images/aside.png');
  background-size: 100% 100%;

  span {
    font-size: 18px;
    color: rgb(255, 255, 255);
    line-height: 1;
    z-index: 1406;
    left: 8%;
    position: absolute;
    font-family: quare;
  }

  .span0 {
    top: 9%;
  }

  .span1 {
    top: 38%;
  }

  .span2 {
    top: 67%;
  }

  .span3 {
    top: 95%;
  }

  // display: flex;
  // align-items: center;
}</style>