day7-2023.1.31-布局作业二

一、完成如下页面设计

 

 二、作业代码如下：

<template>
  <div class="box">
    <div class="title">欢迎登录XXXX应用系统</div>
    <div class="en-title">Welcom to Login Application of substation electrification</div>
    <div class="parent">
      <div class="child" style="background: #1eb5ae">
        <div class="icon">
          <img src="../assets/substationEquipment.svg" alt="">
        </div>
        <div class="item">XXXX健康管理</div>
      </div>
      <div class="child" style="background: #1a91bc">
        <div class="icon">
          <img src="../assets/Online.svg" alt=" ">
        </div>
        <div class="item">XXXXXXX在线监测系统</div>
      </div>
      <div class="child" style="background: #5233bf">
        <div class="icon">
          <img src="../assets/nodev.svg" alt=" ">
        </div>
        <div class="item">暂未开发</div>
      </div>
    </div>
  </div>


</template>
<script>

</script>
<style scoped>
  .box{
    width: 100%;
    height: 730px;
    background: #0a083a;
  }
  .title{
    font-size: 40px;
    color: white;
    padding-top: 126px;
　　/*margin-top:126px 在最大的元素中设置overflow:hidden 就可以实现子元素超出父元素高度时禁止使用滚动条*/

overflow: hidden;

  }
  .en-title{
    color: gray;
    padding-top: 30px;
    padding-bottom: 40px;
  }
  .parent{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .child{
    display: flex;
    justify-content: center;
    align-content:center;   //用于有多行时对齐方式。
    flex-wrap: wrap;       //换行，多行选择对齐方式时需要用到换行
    width:20%;
    height: 248px;
    margin: 10px;
  }
  .item{
    color: white;
    font-size: 30px;
    width: 100%;
    letter-spacing: 5px;    //文字间的间距
  }
  .icon{
    width: 100%;
  }
</style>