'normal'

src/containers/sign/index.css

@@ -0,0 +1,109 @@
+.sign-body{
+  background: url("/static/sign/bg.jpg") no-repeat fixed bottom;
+  background-size: 100% auto;
+  background-color:#4eaceb;
+  margin:0;
+  font-family:"Arial";
+  padding-bottom: 30px;
+  font-size: 18px;
+  min-height: 600px;
+}
+
+ul, ol {
+    padding-left: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+.clear{
+    clear: both;
+    _zoom: 1;
+}
+.clear:after, .clear:before{
+     display: block;
+     content: "clear";
+     height: 0;
+     clear: both;
+     overflow: hidden;
+     visibility: hidden;
+}
+.fl{float: left;}
+.fr{float: right;}
+
+.title-2{
+    width: 70%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 30px;
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    display: block;
+}
+
+.content-box {
+    width: 80%;
+    background-color: white;
+    border-radius: .2rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: .3rem;
+    margin-bottom: .4rem;
+}
+
+.title {
+    font-size: .36rem;
+    font-weight: bold;
+    color: #439fff;
+}
+
+.content {
+    width: 100%;
+    margin-top: .2rem;
+    border-top: 1px solid #e6e6e6;
+}
+
+.course-name {
+    font-size: .32rem;
+    font-weight: bold;
+    color: #333;
+    margin-top: .2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    margin-bottom: -0.1rem;
+}
+
+.ul-info {
+    font-size: .3rem;
+    margin-top: .2rem;
+    color: #333;
+}
+
+.info {
+    margin-top: .05rem;
+}
+
+.info-2 {
+    width: 40%;
+    float: left;
+}
+.info-3 {
+    width: 60%;
+    float: left;
+}
+
+.con {
+    font-size: .26rem;
+}
+
+.tips {
+    margin-left: auto;
+    margin-right: auto;
+    font-size: .26rem;
+    font-weight: bold;
+    color: white;
+    width: 80%;
+    margin-bottom: .4rem;
+}

src/containers/sign/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="sign-body" style="font-size: 16px;">
+    <img class="title-2" src="/static/sign/title.png" alt="继续教育信息验证结果">
+    <div class="content-box">
+      <div class="title">人员信息</div>
+      <div class="content">
+        <ul class="ul-info">
+          <li class="info"><span>姓名：</span><span>{{info.nickname}}</span>
+          </li>
+          <li class="info"><span>身份证号码：</span><span>{{info.cardId}}</span></li>
+          <li class="info">
+            <span>培训类别：</span><span>{{info.courseName}}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="content-box">
+      <div class="title">选修课-课程
+        <span style="font-size: 20px;color: black">（共</span>
+        <span style="font-size: 20px;color: black">{{info.mediaList|totalXs}}</span>
+        <span style="font-size: 20px;color: black">学时）</span>
+      </div>
+
+      <div class="content" v-for="item in info.mediaList">
+        <div class="course-name">{{item.name}}</div>
+        <ul class="ul-info clear">
+          <li class="info">
+            <span>学时：</span>
+            <span>{{item.xs/10}}</span>
+          </li>
+          <li class="info">
+            <span>培训师资：</span>
+            <span>{{item.author}}</span>
+          </li>
+        </ul>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
+  export default {
+    data() {
+      return {
+        id: '',
+        info: {}
+      };
+    },
+    filters:{
+      totalXs(list){
+        if( !list) return 0;
+        let xs = 0;
+        for(let i=0;i < list.length;i++ ){
+          xs += list[i].xs;
+        }
+        return (xs/10)
+      }
+    },
+    methods: {
+      gotoDetail() {
+        let id = this.id;
+        httpServer("User.getCert", {
+          id
+        }).then(res => {
+          if (res.code == 200) {
+            this.info = JSON.parse(res.data)
+          }
+        })
+      }
+    },
+    created() {
+      this.id = this.$route.query.id || '';
+      if (this.id) {
+        this.gotoDetail();
+      }
+    }
+  }
+</script>
+<style>
+  @import url("./index.css");
+</style>