body内容页面居中_前端页面仔，准备适配 ipad 端

今天编写了一个 ipad 端的静态页面，准备适配 ipad 端的页面了，主要是关于聊天界面模块，到时候会独立一个页面出来，接下来为我们看看设计稿吧

分析页面如何布局

1. 我把页面分为 三栏，左中右三栏
2. 大部分代码使用 flex 布局，发现 flex 布局还真是好用

左边一栏

暂时先定住了 宽高度，从页面可以看出 头像与下面的四个图标布局还是有点不一样的，需要给头像一个特定的样式，然后下面四个图标给定一个初始化样式，每个图标使用 flex 布局，让图标自动居中，背景样式使用渐变样式

中间一栏

中间一栏分为上下两栏，头部的搜索框分为左右两栏使用 flex 布局方式，让页面自动同一行排版，下面的消息 item 分来竖向三栏，第一栏是图片，中间部分，右边是消息提示，同样式使用 flex 布局，justify-content: space-between

右侧一栏

分为上中下三部分，上面使用 flex 布局，justify-content: space-between 让自动放置左边和右边，中间部分是消息部分，也使用 flex 布局，

最终代码

<template>
  <div class="ipad-wrap">
    <div class="ipad-side-bar-wrap">
      <ul>
        <li class="picture">
          <div class="img"></div>
        </li>
        <li class="active cursor">
          <div class="info"></div>
        </li>
        <li class="deactive cursor">
          <div class="member"></div>
        </li>
        <li class="deactive cursor">
          <div class="work"></div>
        </li>
        <li class="deactive cursor">
          <div class="me"></div>
        </li>
      </ul>
    </div>
    <div class="ipad-item-wrap">
      <div class="search-wrap">
        <div class="search">
          <input type="text" placeholder="搜索" />
          <i class="search-icon"></i>
        </div>
        <i class="add-group-member"></i>
      </div>
      <div class="info-item-wrap">
        <ul>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">无敌风火轮</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">芊芊·开心旅行2群</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-two">22</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">OP可爱小fuli</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">开心旅行（3）</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">长沙5天4晚游（4）</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">待办</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">开心旅行2群（6）</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="notify-three">99+</span>
          </li>
          <li>
            <div class="img"></div>
            <div class="info-text">
              <span class="title text-elips">长沙5天4晚...（7）</span>
              <span class="date text-elips">2019-10-29 10:31</span>
            </div>
            <span class="not-notify-three">99+</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="ipad-info-wrap">
      <div class="head">
        <div class="head-wrap">
          <span class="title">芊芊·开心旅行2群</span>
          <i class="more"></i>
        </div>
      </div>
      <div class="body">
        <div class="body-wrap">
          <div class="reciever">
            <!-- 接收者 -->
            <div class="img"></div>
            <div class="title-info">
              <span class="title">芊芊阙歌</span>
              <div class="info">请问最近去台湾需要什么样的流程？ 我们有3大1小计划暑假去旅游</div>
            </div>
          </div>
          <div class="sender">
            <!-- 发送者 -->
            <div class="title-info">
              <div class="info">您好，我是销售大乔，很高兴为您 服务！</div>
            </div>
            <div class="img"></div>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="file-bar">
          <ul>
            <li class="ejmo"></li>
            <li class="file"></li>
          </ul>
        </div>
        <div class="text-field">
          <textarea name="field" id="field" cols="30" rows="10"></textarea>
          <button class="button">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demoIpad",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.ipad-wrap {
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  .ipad-side-bar-wrap {
    display: flex;
    flex-direction: row;
    justify-content: cemter;
    width: 70px;
    height: 768px;
    background: linear-gradient(
      0deg,
      rgba(174, 155, 245, 1) 0%,
      rgba(114, 150, 247, 1) 100%
    );
    ul {
      li {
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        &.picture {
          box-sizing: border-box;
          padding: 7px;
          .img {
            width: 56px;
            height: 56px;
            background: red;
            border-radius: 10px;
          }
        }
        &.active {
          background: rgba(173, 165, 255, 1);
        }
        &.deactive {
          background: none;
        }
        &.cursor {
          cursor: pointer;
          display: flex;
          justify-content: center; // 左右剧中
          align-items: center; // 上下居中
          div {
            width: 28px;
            height: 28px;
            background-size: 100% 100%;
            &.info {
              background: url("~@img/ipad/info.png") no-repeat;
            }
            &.member {
              background: url("~@img/ipad/member.png") no-repeat;
            }
            &.work {
              background: url("~@img/ipad/work.png") no-repeat;
            }
            &.me {
              background: url("~@img/ipad/me.png") no-repeat;
            }
          }
        }
      }
    }
  }
  .ipad-item-wrap {
    height: 768px;
    background: linear-gradient(
      0deg,
      rgba(114, 150, 247, 1) 0%,
      rgba(173, 155, 245, 1) 100%
    );
    .search-wrap {
      display: flex;
      justify-content: space-between; // 两端对齐
      align-items: center; // 上下居中
      box-sizing: border-box;
      padding: 15px 15px 15px 10px;
      height: 70px;
      background: rgb(221, 215, 251);
      .add-group-member {
        display: inline-block;
        width: 28px;
        height: 28px;
        background: url("~@img/ipad/add-chat-group.png") no-repeat;
      }
      .search {
        position: relative;
        input[type="text"] {
          width: 180px;
          height: 40px;
          border: none;
          outline: none;
          border-radius: 10px;
          text-indent: 51px;
        }
        .search-icon {
          position: absolute;
          left: 14px;
          top: 9px;
          bottom: 8px;
          right: 15px;
          display: inline-block;
          width: 22px;
          height: 23px;
          background: url("~@img/ipad/search.png") no-repeat;
        }
      }
    }
    .info-item-wrap {
      box-sizing: border-box;
      padding: 17px 10px 17px 17px;
      ul {
        li:last-child {
          margin-bottom: 0;
        }
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 17px;
          .img {
            width: 54px;
            height: 54px;
            background: #fff;
            border-radius: 10px;
            margin-right: 6px;
          }
          .info-text {
            display: flex;
            flex-flow: column nowrap;
            flex: auto;
            margin-right: 36px;
            .title {
              vertical-align: top;
              margin-bottom: 15px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              &.text-elips {
                white-space: nowrap;
              }
            }
            .date {
              vertical-align: bottom;
              font-size: 12px;
              &.text-elips {
                white-space: nowrap;
              }
            }
          }
          .notify-one {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(255, 107, 107, 1);
            border-radius: 50%;
            color: #fff;
            float: right;
          }
          .not-notify-one {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(221, 221, 221, 1);
            border-radius: 50%;
            color: #fff;
            float: right;
          }
          .notify-two {
            display: inline-block;
            width: 30px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(255, 107, 107, 1);
            border-radius: 15px;
            color: #fff;
            float: right;
          }
          .not-notify-two {
            display: inline-block;
            width: 30px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(221, 221, 221, 1);
            border-radius: 15px;
            color: #fff;
            float: right;
          }
          .notify-three {
            display: inline-block;
            width: 40px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(255, 107, 107, 1);
            border-radius: 15px;
            color: #fff;
            float: right;
          }
          .not-notify-three {
            display: inline-block;
            width: 40px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: rgba(221, 221, 221, 1);
            border-radius: 15px;
            color: #fff;
            float: right;
          }
        }
      }
    }
  }
  .ipad-info-wrap {
    width: 704px;
    height: 767px;
    background: rgba(247, 249, 255, 1);
    box-sizing: border-box;
    .head {
      box-sizing: border-box;
      height: 70px;
      border-bottom: 1px solid rgba(233, 233, 233, 1);
      padding: 25px 30px 25px 20px;
      .head-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 16px;
          font-weight: bold;
        }
        .more {
          display: inline-block;
          width: 27px;
          height: 4px;
          background: black;
        }
      }
    }
    .body {
      width: 100%;
      height: 456px;
      border-bottom: 1px solid rgba(233, 233, 233, 1);
      box-sizing: border-box;
      padding: 20px;
      .body-wrap {
        width: 100%;
        display: flex;
        flex-flow: column;
        .reciever {
          display: flex;
          margin-bottom: 50px;
          .img {
            width: 54px;
            height: 54px;
            background: red;
            border-radius: 10px;
            margin-right: 10px;
          }
          .title-info {
            display: flex;
            flex-flow: column;
            .title {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 7px;
            }
            .info {
              box-sizing: border-box;
              width: 270px;
              padding: 10px 12px 15px 15px;
              background: rgba(255, 255, 255, 1);
              border-radius: 10px;
            }
          }
        }
        .sender {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          .img {
            width: 54px;
            height: 54px;
            background: red;
            border-radius: 10px;
            margin-left: 10px;
          }
          .title-info {
            display: flex;
            flex-flow: column;
            .title {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 7px;
            }
            .info {
              box-sizing: border-box;
              width: 270px;
              padding: 10px 12px 15px 15px;
              background: linear-gradient(
                0deg,
                rgba(114, 150, 247, 1) 0%,
                rgba(174, 155, 245, 1) 100%
              );
              border-radius: 10px;
            }
          }
        }
      }
    }
    .foot {
      box-sizing: border-box;
      .file-bar {
        background: #fff;
        box-sizing: border-box;
        padding: 10px 20px 10px 20px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);
        ul {
          display: flex;
          li:last-child {
            margin-right: 0;
          }
          li {
            width: 30px;
            height: 30px;
            margin-right: 30px;
            &.ejmo {
              background: url("~@img/ipad/ejmo.png") no-repeat;
            }
            &.file {
              background: url("~@img/ipad/file.png") no-repeat;
            }
          }
        }
      }
      .text-field {
        position: relative;
        box-sizing: border-box;
        height: 100%;
        textarea[name="field"] {
          box-sizing: border-box;
          padding: 20px 10px;
          outline: none;
          border: none;
          width: 100%;
          height: 100%;
        }
        .button {
          position: absolute;
          bottom: 30px;
          right: 30px;
          border: none;
          outline: none;
          width: 100px;
          height: 32px;
          border: 1px solid rgba(73, 133, 238, 1);
          background: #fff;
          color: rgba(73, 133, 238, 1);
          border-radius: 2px;
        }
      }
    }
  }
}
</style>

最终页面