<template>
  <div class="displayall">
    <div class="displayheader">
      <div class="displayheadertop">
        <img
          class="displaylogo"
          src="../../../static/img/15476113465c3eacd26975a.jpg"
          alt="建科LOGO"
        />
      </div>
      <div class="displayheaderbottom">
        <div class="displaycompanyname">上海建科检验有限公司</div>
        <div class="displaytitlename">职业安全健康培训</div>
        <div class="displaycardresult">证书查询结果</div>
      </div>
    </div>
    <div class="displaycore">
      <div class="displaypic">
        <img
          class="displaypeoplepic"
          src="../../../static/img/zhengjianzhao.jpg"
          alt="照片"
        />
      </div>
      <div class="displaymain">
        <span class="displaykey">姓名</span>
        <div class="displayvalue">小红</div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
      <div class="displaymain">
        <span class="displaykey">性别</span>
        <div class="displayvalue">女</div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
      <div class="displaymain">
        <span class="displaykey">培训科目</span>
        <div class="displayvalue" style="height: auto">
          安全管理挨罚危险化学品经营产业产业
        </div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
      <div class="displaymain">
        <span class="displaykey">证件号</span>
        <div class="displayvalue"></div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
      <div class="displaymain">
        <span class="displaykey">工作单位</span>
        <div class="displayvalue">安全管理挨罚危险化学品经营产业产业</div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
      <div class="displaymain">
        <span class="displaykey">有效期限</span>
        <div class="displayvalue">2022-1-1 至 2022-2-2</div>
      </div>
      <div
        style="
          border: 1px solid rgb(70, 67, 67);
          margin-left: 6%;
          margin-right: 8%;
        "
      ></div>
    </div>
    <div>
      <button class="back">返回查询主页</button>
    </div>
    <div class="displayfooter">
      地址:上海市闵行区申富路568号&nbsp;&nbsp;&nbsp;电话:021-64854767,64852721
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.displayall {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh);
  background: url("../../../static/img/jianke.jpg");
  background-size: 100% 100%;
  /* border: solid red 0.1em; */
}

.displayheader {
  display: flex;
  flex-direction: column;
  flex: 2.7;
  /* border: solid rgb(225, 0, 255) 0.1em; */
  justify-content: center;
}

.displayheadertop {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  flex: 2.5;
  margin-top: 2em;
  margin-left: 3.8em;
}

.displaylogo {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: solid 0.2em #c3a571;
}

.displayheaderbottom {
  display: flex;
  flex-direction: column;
  flex: 7;
  align-items: center;
  justify-content: center;
}

.displaycompanyname {
  display: flex;
  flex-direction: row;
  flex: 1;
  font-size: 1.8em;
  font-weight: bold;
  color: #3d6697;
  letter-spacing: 0.13em;
}

.displaytitlename {
  display: flex;
  flex: 1;
  font-size: 1.55em;
  font-weight: bolder;
}

.displaycardresult {
  display: flex;
  flex: 1;
  font-size: 1.55em;
  flex: 1;
}

.displaycore {
  display: flex;
  flex-direction: column;
  flex: 6;
  /* justify-content: center; */
}

.displaypic {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.displaypeoplepic {
  display: flex;
  width: 7em;
  height: 9em;
  margin-top: 0.8em;
  /* border: solid rgb(225, 0, 255) 0.1em; */
}

.displaymain {
  display: flex;
  flex-direction: row;
  /* padding-top: 1em;
            padding-bottom: 0.3em; */
  padding: 1.5em 1.3em 0.3em 0;
  font-size: 1em;
}

.displaykey {
  display: flex;
  /* width: 6.4em; */
  flex: 2.4;
  justify-content: flex-end;
  align-items: flex-end;
}

.displayvalue {
  display: flex;
  flex-direction: row;
  flex: 7;
  padding-left: 1.3em;
  /* overflow: hidden; 溢出内容隐藏 */
  /* white-space: nowrap; 强制文本在一行内显示 */
  /* text-overflow: ellipsis; 当对象内文本溢出时显示省略标记 */
}

.back {
  /* display: flex;
            flex-direction: row;
            justify-content: flex-end; */
  background-color: #8eb2e2;
  width: 11em;
  height: 3.3em;
  float: right;
  margin-right: 4em;
  margin-top: 0.8em;
  font-size: 0.8em;
  border-radius: 5px;
  border: none;
}

.displayfooter {
  display: flex;
  flex-direction: row;
  flex: 2;
  justify-content: center;
  padding-top: 3em;
  font-size: 0.9em;
  /* white-space: nowrap;         */
}
</style>
