|
@@ -0,0 +1,469 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <div class="d-flex mb20">
|
|
|
+ <div class="content-box Info">
|
|
|
+ <div style="width: 100%; height: 150px; position: relative">
|
|
|
+ <img style="
|
|
|
+ width: calc(100% - 42px);
|
|
|
+ height: 128px;
|
|
|
+ margin: 20px 0 0 20px;
|
|
|
+ position: absolute;
|
|
|
+ " src="@/assets/bg.png" alt="" />
|
|
|
+ <img style="
|
|
|
+ width: 105px;
|
|
|
+ height: 105px;
|
|
|
+ border-radius: 105px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -52px;
|
|
|
+ margin-top: 10px;
|
|
|
+ " :src="jcxxInfo.xdx_sczp" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; margin-top: 50px">
|
|
|
+ <p style="
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ ">
|
|
|
+ {{ jcxxInfo.xdx_xsxm }}
|
|
|
+ </p>
|
|
|
+ <p style="
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang, PingFang-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #8083a3;
|
|
|
+ ">
|
|
|
+ 学籍号:{{ jcxxInfo.xdx_xsxh }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li>性别</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_xb_option_n }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>民族</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_mz }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>出生年月</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_csrq }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>血型</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_xx }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li>身份证号码</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_zjhm }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>户籍所在地</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_jtzz }}</li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li>家庭住址</li>
|
|
|
+ <li>{{ jcxxInfo.xdx_xxdz }}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ml20 content-box student-body-health" style="height: 730px">
|
|
|
+ <div>
|
|
|
+ <span>学生体质健康</span>
|
|
|
+ <!-- <a>查看更多</a> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-heart.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <span>{{ tzjkInfo.xtj_jcxl }}</span>
|
|
|
+ <span>基础心率</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-BMI.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <span>{{ tzjkInfo.xtj_bmi }}</span>
|
|
|
+ <span>BMI</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-scale.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <span>{{ tzjkInfo.xtj_tzl }}</span>
|
|
|
+ <span>体脂率</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-lung.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <span>{{ tzjkInfo.xtj_fhl }}</span>
|
|
|
+ <span>肺活量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span></span>
|
|
|
+ <div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <img src="@/assets/icon-vision.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_sl }}</span>
|
|
|
+ </div>
|
|
|
+ <div>视力</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <img src="@/assets/icon-backrun.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_wfp }}</span>
|
|
|
+ </div>
|
|
|
+ <div>往返跑</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-longrun.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_nlp }}</span>
|
|
|
+ </div>
|
|
|
+ <div>耐力跑成绩</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-shortrun.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_50mp }}</span>
|
|
|
+ </div>
|
|
|
+ <div>50米跑</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-situp.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_1fzywqz }}</span>
|
|
|
+ </div>
|
|
|
+ <div>1分钟仰卧起坐</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-jump.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_ldty }}</span>
|
|
|
+ </div>
|
|
|
+ <div>立定跳远</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-skip.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_1fzts }}</span>
|
|
|
+ </div>
|
|
|
+ <div>1分钟跳绳</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-pullup.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_ytxs }}</span>
|
|
|
+ </div>
|
|
|
+ <div>引体向上</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-sit.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_zwtqq }}</span>
|
|
|
+ </div>
|
|
|
+ <div>坐位体前屈</div>
|
|
|
+ </div>
|
|
|
+ <div class="tzjk-info">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/icon-ball.png" />
|
|
|
+ <span>{{ tzjkInfo.xtj_sxq }}</span>
|
|
|
+ </div>
|
|
|
+ <div>实心球</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { xjk_list, xslb_list, xjk_detail, xslb_detail } from "./api";
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ limit: 10,
|
|
|
+ total: 12,
|
|
|
+ cur_page: 1,
|
|
|
+ keyword: "",
|
|
|
+ jcxxInfo: {},
|
|
|
+ tzjkInfo: {},
|
|
|
+ firstForm: {
|
|
|
+ grade: "",
|
|
|
+ class: "",
|
|
|
+ },
|
|
|
+ xtj_id: "",
|
|
|
+ xtj_xsxh: "",
|
|
|
+ xdx_xsxm: "",
|
|
|
+ xdx_xsxh: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: ["xxx_xsxh"],
|
|
|
+ watch: {
|
|
|
+ xxx_xsxh: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ this.xtj_xsxh = val;
|
|
|
+ this.tzjkData()
|
|
|
+ this.jcxxData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ jcxxData() {
|
|
|
+ let data = {
|
|
|
+ xdx_xsxh: this.xtj_xsxh,
|
|
|
+ };
|
|
|
+
|
|
|
+ xjk_detail(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.jcxxInfo = res.data.one_info;
|
|
|
+ let a = this.jcxxInfo.xdx_sczp.indexOf("|");
|
|
|
+ this.jcxxInfo.xdx_sczp = this.jcxxInfo.xdx_sczp.substring(0, a);
|
|
|
+ console.log(this.jcxxInfo.xdx_sczp, "xdx_sczp");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ tzjkData() {
|
|
|
+ let data = {
|
|
|
+ xtj_xsxh: this.xtj_xsxh,
|
|
|
+ };
|
|
|
+
|
|
|
+ xslb_detail(data).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.tzjkInfo = res.data.one_info;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // mounted() {
|
|
|
+ // if (this.$route.params.xtj_xsxh != "") {
|
|
|
+ // (this.xtj_xsxh = this.$route.params.xtj_xsxh), this.tzjkData();
|
|
|
+ // this.jcxxData();
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.d-flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.ml20 {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+* {
|
|
|
+ box-sizing: unset !important;
|
|
|
+}
|
|
|
+//基本信息
|
|
|
+.Info div:nth-child(3) {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: calc(50% - 47px);
|
|
|
+ height: 50px;
|
|
|
+ border: 1px dashed #dadada;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 15px 0 0 15px;
|
|
|
+ & :nth-child(1) {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ color: #9a9a9a;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang, PingFang-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.Info div:nth-child(4) {
|
|
|
+ ul {
|
|
|
+ width: calc(100% - 57px);
|
|
|
+ height: 50px;
|
|
|
+ border: 1px dashed #dadada;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 15px 0 0 15px;
|
|
|
+ & :nth-child(1) {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ color: #9a9a9a;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang, PingFang-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//体质健康
|
|
|
+.student-body-health {
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px 20px 15px 20px;
|
|
|
+ border-bottom: 1px solid #e4e6e8;
|
|
|
+ & :nth-child(1) {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #171721;
|
|
|
+ }
|
|
|
+ & :nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #265cd4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ margin-top: 25px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ margin-left: 20px;
|
|
|
+ border-bottom: 1px solid #5f5f5f53;
|
|
|
+ border-right: 1px solid #5f5f5f53;
|
|
|
+ }
|
|
|
+ & > div:nth-child(3) {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ & > div:nth-child(4) {
|
|
|
+ border-top: 1px solid #5f5f5f53;
|
|
|
+ border-left: 1px solid #5f5f5f53;
|
|
|
+ }
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ padding: 45px;
|
|
|
+ display: flex;
|
|
|
+ width: calc(50% - 112px);
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 30px;
|
|
|
+ & :nth-child(1) {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #171721;
|
|
|
+ }
|
|
|
+ & :nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8083a3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & > div:nth-child(3) {
|
|
|
+ & > span {
|
|
|
+ height: 1px;
|
|
|
+ display: block;
|
|
|
+ background-color: #5f5f5f53;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 5%;
|
|
|
+ }
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ & > div:nth-child(even) {
|
|
|
+ padding-left: 35px;
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ padding-right: 20px;
|
|
|
+ border-right: 1px solid #5f5f5f53;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 20px 5px;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: calc(50% - 45px);
|
|
|
+ align-items: center;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #171721;
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8083a3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tzjk-info img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//通用
|
|
|
+.content {
|
|
|
+ // background: #f2f6fc;
|
|
|
+ height: 700px;
|
|
|
+ width: 100%;
|
|
|
+ // margin: -10px;
|
|
|
+ // padding-right: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.content-box {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ border-bottom: 1px solid #e4e6e8;
|
|
|
+ padding: 15px 0 15px 20px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #171721;
|
|
|
+ }
|
|
|
+}
|
|
|
+//布局
|
|
|
+.Info {
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
+.student-body-health {
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+</style>
|