<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="12">
        <area-blcok :lookData="formData.look"/>
      </el-col>
      <el-col :span="12">
        <div :style="{backgroundImage:`url(${background})`}" class="view">
          <div v-html="formData.look.content" class="view-content">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import AreaBlcok from '../textarea'
  import background from '../../assets/mould/lookBlock.png'
  export default {
    name: "lookBlock",
    props:[
      'formData'
    ],
    data(){
      return {
        background:background
      }
    },
    components:{
      AreaBlcok
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .view{
    width: 335px;
    height: 469px;
    background-size: 100% 100%;
    padding: 140px 20px 77px 20px;
    margin: auto;
    .view-content{
      background: white;
      padding: 10px;
      width: 315px;
      height: 459px;
      overflow: auto;
      border-radius: 8px;
    }
  }
</style>