<template>
  <div>
    <div>
      <div style="text-align: center;margin-top: 20px;margin-bottom: 30px">
        <router-link to="/face/compare"><span style="font-size: 20px;margin-top: 30px">人脸对比</span></router-link>
        <router-link to="/face/detect"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人脸检测</span></router-link>
        <router-link to="/face/search"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人脸搜索</span></router-link>
        <router-link to="/face/bodyAnalysis"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人体关键点识别</span></router-link>
        <router-link to="/face/bodyAttr"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">人体检测和属性识别</span></router-link>
        <router-link to="/face/bodyNum"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px;">人流量统计</span></router-link>
        <router-link to="/face/gesture"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px">手势识别</span></router-link>
        <router-link to="/face/faceVerify"><span style="font-size: 20px;margin-top: 30px;margin-left: 20px;">在线活体检测</span></router-link>
        <router-link to="/face/hVideo"><span style="font-size: 28px;margin-top: 30px;margin-left: 20px;text-decoration:underline">视频活体检测</span></router-link>
        <br>
      </div>
      <p/>
      <div class="area">
        <div class="main_up_2"><!--src="https://aicloud.wo186.tv/video/index.html"-->
          <iframe id="show-iframe" frameborder="0" width="1000px" height="800px" name="showHere" scrolling="auto" src="http://192.168.11.218/jsVideo/index.html"/>
        </div>
      </div>
    </div>
  </div>

</template>
<style scoped>
  .area {
    width: 1180px;
    height: 855px;
    text-align: center;
    margin:0 auto;
  }
  .area_left {
    float: left;
    width: 840px;
    height: 655px;
  }
  .main_up {
    width:840px;
    height: 525px;
    background: #515254;
  }
  .main_up_1 {
    width:840px;
    height: 107px;
    color: white;
  }
  .main_up_2 {
    width:840px;
    height: 303px;
  }
  .main_up_2_left {
    float: left;
    width: 840px;
    height: 424px;
  }
  .photo {
    width: 840px;
    height: 424px;
  }
  .upload_btn {
    float: left;
    display: inline;
    width: 840px;
    height: 100px;
    background: rgba(0,0,0,.45);
  }
  .mt {
    margin-top: 20px;
    margin-left: 30px;
  }
  .ml {
    text-align: left;
    margin-left: 20px;
  }
  .main_up_2_right {
    float: left;
    width: 360px;
    height: 303px;
    margin-left: 40px;
  }
  .main_up_3 {
    width:840px;
    height: 100px;
    color:white;
  }
  .main_bottom {
    width:840px;
    height: 130px;
    background: #ebebeb;
  }
  .preset_pic {
    margin-left: 20px;
    margin-top: 20px;
    width: 144px;
    height: 90px;
    float: left;
  }
  .preset_image {
    margin-left: 2px;
    margin-top: 2px;
    width: 140px;
    height: 86px;
  }
  .area_right {
    float: left;
    width: 325px;
    margin-left: 15px;
    height: 655px;
    border: 3px;
    overflow-y:scroll;
  }
  .gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

</style>
