issues 支持代码显示

[kinglisky]

@JayZangwill 贴个vue模板示例

<template>
  <section class="main-wrapper">
    <div class="main-panel">
      <div class="msg-panel">
        <msg-panel></msg-panel>
      </div>
      <div class="function-panel">
        <input-panel></input-panel>
        <user-panel></user-panel>
      </div>
    </div>
    <base-panel></base-panel>
  </section>
</template>
<script>
import InputPanel from './input-panel';
import UserPanel from './user-panel';
import BasePanel from './base-panel';
import MsgPanel from './msg-panel';

export default {
  components: {
    InputPanel,
    UserPanel,
    BasePanel,
    MsgPanel
  },

  data() {
    return {};
  },
}
</script>
<style lang="less" scoped>
.main-wrapper {
  width: 100%;
  background-color: #000;
  color: #fff;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  // justify-content: center;
  // align-items: center;
  > * {
    box-sizing: border-box;
  }
}

.main-panel {
  display: flex;
  flex-direction: column;
  width: 80%;
  border-right: none;
  > * {
    box-sizing: border-box;
  }
  .msg-panel {
    min-height: 80vh;
    // border: 1px solid #fff;
  }
  .function-panel {
    min-height: 20vh;
    display: flex;
  }
}
</style>