<template>
  <div class="look-content">
    <guide-block/>
    <div class="content" v-if="!contentData.old" v-html="content">
    </div>
    <div class="old-content" v-if="contentData.old"  v-html="nohidden">
    </div>
  </div>
</template>

<script>
  import guideBlock from '../guide/look'
  export default {
    name: "look",
    props:[
      'contentData'
    ],
    components:{
      guideBlock
    },
    computed:{
      content(){
        let content = null;
          content = this.contentData.content.content
        return content.replace(/video/g,'audio')
      },
      nohidden(){
        let content = null;
          content = this.contentData.content.content
        return content.replace(/hidden="true"/g,'')
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .look-content{
    .content{
      background: white;
      width: 315*@toVw;
      position: absolute;
      top: 80*@toVw;
      left: 20*@toVw;
      right: 20*@toVw;
      bottom: 20*@toVw;
      overflow: auto;
      margin: auto;
      display: block;
      border-radius: 8px;
      padding: 10*@toVw;
    }
  }

  @media screen and (orientation: landscape) {
    @toVw:100/667vw;
    .look-content{
      position: absolute;
      top: 20*@toVw;
      bottom: 20*@toVw;
      left: 20*@toVw;
      right: 20*@toVw;
      background:rgba(255,255,255,1);
      box-shadow:inset 0*@toVw 1*@toVw 3*@toVw 0*@toVw rgba(0,0,0,0.2);
      overflow: auto;
      border-radius:8*@toVw;
      padding: 20*@toVw;
    .content,.old-content{
      width: 300*@toVw;
    position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      border-radius: 8px;
      padding: 10*@toVw;
    }
    }
  }
</style>
<style>
  .old-content img,.old-content video{
    margin-top: 50px;
    max-width: 100% !important;
  }
  .old-content h3{
    font-family: hanti
  }
  .look-content .preview img,.look-content .preview audio,.look-content .preview video{
    max-width: 100%;
  }
  .audio-box {
    position: relative;
    width: 100%;
    height: 70px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #F1F1F1;
    box-shadow: 0 0 10px 0 rgba(151,160,184,0.20);
  }
  #preview{
    margin-left: auto;
    margin-right:auto;
    /*padding:14px;*/
    width:375px;
    height:667px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    margin-top: 20px;
    box-sizing: border-box;
  }
  .look-content img,video,audio{
    max-width: 100%;
  }
  @font-face{font-family:hanti;src:url(https://cdn.singsingenglish.com/template/SentyZHAO.ttf)}
  /* @media screen and (min-width: 1025px){
       #preview{
           width:700px;
       }
   }*/
  #preview *{font-family:sans-serif;font-size:16px;}
  .look-content .content img{
    max-width: 100% !important;
  }
</style>
