<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基础信息'" />
          <div class="right">
            <div class="box_cont">
              <div class="fromBox">
                <div class="box-left">
                  <el-form ref="ruleFormRef" label-width="130px" :model="fromObj" :inline="true" :rules="rules"
                    :disabled="true">
                    <el-form-item label="姓名：" prop="drivername" style="display: flex">
                      <el-input v-model="fromObj.drivername" style="width: 337px;" />
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                      <el-select v-model="fromObj.sex" style="width: 337px;" clearable>
                        <el-option v-for="item in props.dict.D_BZ_XB" :key="item" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期：" prop="brithday">
                      <el-date-picker v-model="fromObj.brithday" type="data" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择出生日期" :default-value="getDefaultDates"
                        :disabled-date="disabledDate" style="width: 337px;">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄：" prop="age" v-if="ISzjz || fromObj.thebidtype == '2'">
                      <el-input v-model="fromObj.age" clearable style="width: 337px;" />
                    </el-form-item>
                    <el-form-item label="工作单位：" prop="jobpart" style="display: flex">
                      <el-input v-model="fromObj.jobpart" clearable style="width: 337px;" />
                    </el-form-item>
                    <el-form-item label="文化程度：" prop="education">
                      <el-select v-model="fromObj.education" style="width: 337px;" clearable>
                        <el-option v-for="item in props.dict.D_BZ_AQRYWHCD" :key="item" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="驾驶工龄：" prop="driverhistory">
                      <el-input v-model="fromObj.driverhistory" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="驾驶证证号：" prop="drivernumber">
                      <el-input v-model="fromObj.drivernumber" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="准驾车型：" prop="carstyle">
                      <el-select v-model="fromObj.carstyle" style="width: 337px;" clearable>
                        <el-option v-for="item in props.dict.D_TB_DRIVELEVEL" :key="item" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="从事岗位：" prop="thejob">
                      <el-input v-model="fromObj.thejob" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="有效期：" prop="usestate">
                      <el-input v-model="fromObj.usestate" style="width: 337px;" clearable disabled>
                        <template #append>
                          年</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="家庭住址：">
                      <el-input v-model="fromObj.address" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="联系电话:" prop="phone">
                      <MaskInput v-model="fromObj.phone" placeholder="请输入联系电话：" style="width: 337px" />
                    </el-form-item>
                    <!-- <el-form-item label="联系电话：" prop="phone">
                      <el-input v-model="fromObj.phone" style="width: 337px;" clearable />
                    </el-form-item> -->
                    <el-form-item label="初次领证时间：" prop="fristpoststime" v-if="ISsy">
                      <el-date-picker v-model="fromObj.fristpoststime" type="data" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" style="width: 337px;">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="上次审验时间：" prop="lastpoststime" v-if="ISsy">
                      <el-date-picker v-model="fromObj.lastpoststime" style="width: 337px;" type="data"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="下次审验时间：" prop="nextpoststime" v-if="ISsy">
                      <el-date-picker v-model="fromObj.nextpoststime" type="data" style="width: 337px;"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="政治面貌：" prop="zzmm">
                      <el-select v-model="fromObj.zzmm" clearable style="width: 337px;">
                        <el-option v-for="item in props.dict.D_BZ_AQRYZZMM" :key="item" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="技术职称：" v-if="!ISsy">
                      <el-input v-model="fromObj.jszc" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="理论考试成绩：" v-if="!ISsy">
                      <el-input v-model="fromObj.theory" style="width: 337px;" clearable />
                    </el-form-item>
                    <el-form-item label="备注：" style="width: 100%;">
                      <el-input v-model="fromObj.bz" clearable style="width: 947px" />
                    </el-form-item>

                  </el-form>
                  <div class="box_bg" id="htmlPdfcan"
                    v-if="(ISsy || fromObj.tokzstate == '1') && fromObj.thebidtype == '1'">
                    <div class="pic_title">
                      中国烟草机动车驾驶员上岗证
                    </div>
                    <div class="titleStyle1">证号：<span class="textStyle">{{ fromObj.idnumber }}</span></div>
                    <div class="pic_cent">
                      <div class="nameStyle">姓名：<span class="textStyle">{{ fromObj.drivername }}</span></div>
                      <div class="nameStyle">性别：
                        <span class="textStyle">{{ fromObj.sex == '1' ? '男' : '女' }}</span>
                      </div>
                      <div class="nameStyle">出生年月：<span class="textStyle">{{ fromObj.brithday }}</span></div>
                    </div>
                    <div class="pic_fix">
                      <div class="pic_right">
                        <div class="nameStyle">工作单位：<span class="textStyle">{{ fromObj.jobpart }}</span></div>
                        <div class="nameStyle">发证单位：<span class="textStyle">{{ fromObj.tbdw }}</span></div>
                        <div class="nameStyle">发证时间：<span class="textStyle">{{ fromObj.fristpoststime }}</span></div>
                        <div class="nameStyle">
                          审验时间：<span class="textStyle">{{ fromObj.verificationtime }}</span>
                        </div>
                        <div class="nameStyle">
                          截止时间：<span class="textStyle">{{ fromObj.nextpoststime }}</span>
                        </div>
                      </div>
                      <div class="pic_left">

                        <img v-if="fromObj.img" :src="fromObj.img" alt="" style="height:100%;width:auto;">
                        <img v-else :src="getImgUrl('indexImages/zwtp.jpg')" alt="" style="height:100%;width:auto;">
                      </div>
                    </div>
                    <!-- 底部 -->
                    <div class="foot">
                      <div class="imgs">
                        <img :src="getImgUrl('indexImages/yan.png')">
                      </div>
                      <div class="foot_font">中国烟草 CHINA TOBACCO
                      </div>
                    </div>
                  </div>
                  <div class="box_bg" id="htmlPdfcan"
                    v-if="(ISsy || fromObj.tokzstate == '1') && fromObj.thebidtype == '2'">
                    <div class="pic_title">
                      车辆业务外包驾驶员准驾证
                    </div>
                    <div class="titleStyle1">证号：<span class="textStyle">{{ fromObj.idnumber }}</span></div>
                    <div class="pic_cent">
                      <div class="nameStyle">姓名：<span class="textStyle">{{ fromObj.drivername }}</span></div>
                      <div class="nameStyle">性别：
                        <span class="textStyle">{{ fromObj.sex == '1' ? '男' : '女' }}</span>
                      </div>
                      <div class="nameStyle">出生年月：<span class="textStyle">{{ fromObj.brithday }}</span></div>
                    </div>
                    <div class="pic_fix">
                      <div class="pic_right">
                        <div class="nameStyle">车辆所属单位：<span class="textStyle">{{ fromObj.xtCityName }}</span></div>
                        <div class="nameStyle">发证单位：<span class="textStyle">{{ fromObj.xtCityName }}</span></div>
                        <div class="nameStyle">发证时间：<span class="textStyle">{{ fromObj.fristpoststime }}</span></div>
                        <div class="nameStyle">
                          审验时间：<span class="textStyle">{{ fromObj.verificationtime }}</span>
                        </div>
                        <div class="nameStyle">
                          截止时间：<span class="textStyle">{{ fromObj.nextpoststime }}</span>
                        </div>
                      </div>
                      <div class="pic_left">
                        <img v-if="fromObj.img" :src="fromObj.img" alt="" style="height:100%;width:auto;">
                        <img v-else :src="getImgUrl('indexImages/zwtp.jpg')" alt="" style="height:100%;width:auto;">
                      </div>
                    </div>
                    <!-- 底部 -->
                    <div class="foot" style="background: rgb(14, 95, 55);">
                    </div>
                  </div>
                </div>

                <div class="box_right">
                  <div class="line"></div>
                  <ul>
                    <li class="timeimg">
                      <div class="boc_tim">
                        <img :src="getImgUrl('indexImages/icon06.gif')" />
                      </div>
                    </li>
                    <!-- 申请人 -->
                    <li>
                      <div class="time_le">
                        <span>{{ fromObj.tbsj ? fromObj.tbsj : fromObj.xtCjtbsjsj }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ">申请</span>
                        <span class="typ">{{ fromObj.xtCjr }}</span>
                      </div>
                    </li>
                    <!-- 县-车管部门负责人 -->
                    <li v-if="fromObj.unitpartname"
                      :class="fromObj.unitpartspstate && fromObj.unitpartspstate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.unitpartsptime ? fromObj.unitpartsptime : (fromObj.xtZhgxsj ? fromObj.xtZhgxsj
                          :
                          fromObj.xtCjsj) }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "1"'>县-车管部门负责人审批</span>
                        <span class="typ" v-if='fromObj.unitpartspstate == "1"'>县-车管部门负责人审批通过</span>
                        <span class="typ" v-if='fromObj.unitpartspstate == "2"'>县-车管部门负责人审批驳回</span>
                        <span class="typ">{{ fromObj.unitpartname }}<span class="hg"
                            v-if="ISsy && fromObj.unitpartspstate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 物流-车管部门负责人 -->
                    <li v-if="fromObj.unitsecurityname"
                      :class="fromObj.unitsecurityspstate && fromObj.unitsecurityspstate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.unitsecuritysptime ? fromObj.unitsecuritysptime : fromObj.unitpartsptime
}}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "3"'>待物流-车管部门负责人审批</span>
                        <span class="typ" v-if='fromObj.unitsecurityspstate == "1"'>物流-车管部门负责人审批通过</span>
                        <span class="typ" v-if='fromObj.unitsecurityspstate == "2"'>物流-车管部门负责人审批驳回</span>
                        <span class="typ">{{ fromObj.unitsecurityname }}<span class="hg"
                            v-if="ISsy && fromObj.unitsecurityspstate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 市车管员 -->
                    <li v-if="fromObj.fgldname" :class="fromObj.fgldstate && fromObj.fgldstate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.fgldtime ? fromObj.fgldtime : fromObj.unitpartsptime
                        }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "2"'>待市车管员审批</span>
                        <span class="typ" v-if='fromObj.fgldstate == "1"'>市车管员审批通过</span>
                        <span class="typ" v-if='fromObj.fgldstate == "2"'>市车管员审批驳回</span>
                        <span class="typ">{{ fromObj.fgldname }}<span class="hg"
                            v-if="ISsy && fromObj.fgldstate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 省/市-车管部门负责人 -->
                    <li v-if="fromObj.unitspheadname"
                      :class="fromObj.unitspheadspsate && fromObj.unitspheadspsate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.unitspheadsptime ? fromObj.unitspheadsptime : fromObj.unitsecuritysptime
                        }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "4"'>待{{ orgLevel == '1' ? '省' : '市'
                        }}-车管部门负责人审批</span>
                        <span class="typ" v-if='fromObj.unitspheadspsate == "1"'>{{ orgLevel == '1' ? '省' : '市'
                        }}-车管部门负责人审批通过</span>
                        <span class="typ" v-if='fromObj.unitspheadspsate == "2"'>{{ orgLevel == '1' ? '省' : '市'
                        }}-车管部门负责人审批驳回</span>
                        <span class="typ">{{ fromObj.unitspheadname }} <span class="hg"
                            v-if="ISsy && fromObj.unitspheadspsate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 省/市-交通管理员 -->
                    <li v-if="fromObj.carcontrollername"
                      :class="fromObj.carcontrollerstate && fromObj.carcontrollerstate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.carcontrollertime ? fromObj.carcontrollertime : fromObj.unitspheadsptime
                        }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "5"'>待{{ orgLevel == '1' ? '省' : '市安全科'
}}-安全管理员审批</span>
                        <span class="typ" v-if='fromObj.carcontrollerstate == "1"'>{{ orgLevel == '1' ? '省' : '市安全科'
}}-安全管理员审批通过</span>
                        <span class="typ" v-if='fromObj.carcontrollerstate == "2"'>{{ orgLevel == '1' ? '省' : '市安全科'
}}-安全管理员审批驳回</span>
                        <span class="typ">{{ fromObj.carcontrollername }} <span class="hg"
                            v-if="ISsy && fromObj.carcontrollerstate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 省/市-安全处(科)负责人-->
                    <li v-if="fromObj.tokzname" :class="fromObj.tokzstate && fromObj.tokzstate == '1' ? '' : 'colorcc'">
                      <div class="time_le">
                        <span>{{ fromObj.tokztime ? fromObj.tokztime : fromObj.carcontrollertime }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ" v-if='fromObj.state == "6"'>待{{ orgLevel == '1' ? '省' : '市'
                        }}-安全{{ orgLevel == '1' ? '处' : '科' }}负责人审批</span>
                        <span class="typ" v-if='fromObj.tokzstate == "1"'> {{ orgLevel == '1' ? '省' : '市' }}-安全{{
                          orgLevel
                            == '1' ? '处' :
                            '科' }}负责人审批通过</span>
                        <span class="typ" v-if='fromObj.tokzstate == "2"'>{{ orgLevel == '1' ? '省' : '市' }}-安全{{
                          orgLevel
                            == '1' ? '处' :
                            '科' }}负责人审批驳回</span>
                        <span class="typ">{{ fromObj.tokzname }} <span class="hg"
                            v-if="ISsy && fromObj.tokzstate == '1'">(合格)</span></span>
                      </div>
                    </li>
                    <!-- 完成 -->
                    <li v-if='fromObj.state == "7"'>
                      <div class="time_le">
                        <span>{{ fromObj.fgldtime }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ">完成</span>
                      </div>
                    </li>
                    <li v-if='fromObj.state == "8"'>
                      <div class="time_le">
                        <span>{{ fromObj.fgldtime }}</span>
                      </div>
                      <img class="iconre" :src="getImgUrl('indexImages/icon07.gif')" />
                      <div>
                        <span class="typ">失败</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

        </template>
        <template #footer>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>
    </div>
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" @choosedUsers="getSonValue"
      :deptId="data.deptId">
    </ChooseUser>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watchEffect,
} from "vue";
import { getItem } from "@/utils/storage";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { getDefaultDate, disabledDate } from '@/utils/tools.js'
import MaskInput from "@/components/MaskInput.vue"

const getDefaultDates = ref(getDefaultDate())
const orgLevel = ref(null);
const ISsy = ref(false)
const bigHeight = ref(); //整个高度
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: null
  },
  rwid: String,
  examineshow: {
    default: false,
    type: Boolean
  },
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  },
  dict: {
    type: Object,
    default: { D_TB_DRIVELEVEL: [], D_BZ_AQRYWHCD: [], D_BZ_XB: [], D_BZ_AQRYZZMM: [] }
  }
});
const chooseUserVisible = ref(false);
const leaderid = ref("");
const singleShow = ref(true); //单选多选
//规则校验
const rules = reactive({
  drivername: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
  brithday: [{ trigger: "blur", required: true, message: "出生年月不能为空" }],
  jobpart: [{ required: true, message: "工作单位不能为空", trigger: "blur" }],
  education: [{ required: true, message: "文化程度不能为空", trigger: "blur" }],
  driverhistory: [{ required: true, message: "驾驶工龄不能为空", trigger: "blur" }],
  drivernumber: [{ required: true, message: "驾驶证证号不能为空", trigger: "blur" }],
  carstyle: [{ required: true, message: "准驾车型不能为空", trigger: "blur" }],
  phone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
  thejob: [{ required: true, message: "从事岗位不能为空", trigger: "blur" }],
  usestate: [
    { required: true, message: "有效期不能为空", trigger: "blur" }
  ],
  zzmm: [{ required: true, message: "政治面貌不能为空", trigger: "blur" }]
});
// 树的展开与折叠
const emits = defineEmits(["close"]);
const fromObj = ref({});
const ISzjz = ref(false)
const showPeop = ref(false);
const showDept = ref(false);
const zzlx = ref();
onMounted(() => {
  getdeptId();
  ChooesDdld();
});
const data = reactive({
  fromObj: {}
});
watchEffect(() => {
  if (props.editObj) {
    if (props.type && props.type == 'sy') {
      //是否是审验
      ISsy.value = true
    }
    if (props.type && props.type == 'zjzsq') {
      ISzjz.value = true
    }
    if (props.editObj.rowId) {
      getmain(props.editObj.rowId)
    } else {
      fromObj.value = {};
    }
  } else {
    fromObj.value = {};
  }
});
//详情
function getmain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/driverposts/queryDriverpostsById").then(
      (res) => {
        if (res) {
          fromObj.value = res;
          if (res.pic) {
            getimg(res.pic)
          }
          if (res.tbdwid) {
            getdeptinfo(res.tbdwid)
          }
        }
      }
    );

  }
};
//获取驾驶员图片
function getimg(id) {
  getApi({}, `/mosty-base/minio/file/download/${id}`).then(
    (res) => {
      if (res) {
        fromObj.value.img = res.url;
      }
    }
  );
}
//选择人员
function ChooesSpry(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = fromObj.value.drivernameid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
//完成选人
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    fromObj.value.drivername = value[0].userName;
    fromObj.value.drivernameid = value[0].id;
  }
};
//限制选人只能为本部门的人
function getdeptId() {
  data.deptId = getItem("deptId").ssbmid;
  fromObj.value.usestate = 3;
}
//	根据id查询部门
function getdeptinfo(id) {
  getApi({ id }, '/mosty-base/deptFeign/getOrgById').then(res => {
    //1、省  其余为市
    orgLevel.value = res.orgLevel.substring(0, 1)
  })
}
function ChooesDdld(val) {
  zzlx.value = val;
  //选择检查成员
  if (val == "02") {
    showPeop.value = true;
  } else {
    showDept.value = true;
  }
}
const CloseEvent = () => {
  emits("close");
};

</script>

<style lang="scss" scoped>
.box_cont {
  height: calc(100vh - 15vh);
}

.fromBox {
  height: 76vh;
  display: flex;
  background: #fff;
  margin: 20px;
  overflow-y: scroll;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.box-left {
  width: 63%;
}

.el-form {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-right: 20px;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}

//时间轴
.box_right {
  width: 37%;
  position: relative;
  border-left: 1px dashed #5ecb4c;
}

.box_right .line {
  position: absolute;
  top: 0;
  left: 201px;
  width: 1px;
  background-color: #5ecb4c;
  height: 90%;
  z-index: 10;
}

.typ {
  display: block;
}

.colorcc {
  color: red !important;
}

.timeimg {
  width: 100%;
  text-align: center;
}

.boc_tim {
  width: 60px;
  margin-left: 90px !important;
  height: 60px;
  background-color: #fff;
  z-index: 999;
}

.box_right ul li {
  color: #000;
  display: flex;
  padding: 0 20px;
  margin: 20px 0;
  z-index: 99;
  padding-left: 80px;
}

.box_right ul li div {
  margin: 0 20px;
}

.iconre {
  width: 20px;
  height: 20px;
  z-index: 99;
  margin-right: 5px;
}

.time_le span {
  display: block;
  text-align: right;
  width: 80px;
}

.hg {
  margin-left: 10px;
  color: green;
}

.box_bg {
  width: 470px;
  height: 300px;
  padding: 10px;
  font-family: "仿宋", monospace;
  font-weight: 600;
  box-shadow: 2px 2px 8px gray;
  overflow: hidden;
  border: 1px solid #d3c4c4;
  border-radius: 10px;
  text-align: left;
  box-sizing: border-box;
  background: url("~@/assets/images/bg.png") repeat center;
  background-size: 4% 4%;
  position: relative;
  margin: 20px auto;

  .pic_title {
    font-size: 18px;
    text-align: center;
    color: #000;
    font-family: "黑体";
    margin: 10px auto;
  }
}

.pic_cent {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.pic_fix {
  display: flex;
  justify-content: space-between;

  .pic_left {
    width: 110px;
    height: 130px;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 15px;
  }

  .pic_right {
    width: 73%;
    margin-right: 10px;
  }
}

.nameStyle {
  margin-top: 5px;
  color: gray;
  font-size: 16px;
  font-family: "仿宋";
  margin-bottom: 10px;
}

.textStyle {
  color: rgb(0, 61, 141);
  font-size: 16px;
  font-family: "仿宋";
  border-bottom: 1px dashed rgb(0, 61, 141);
}

.titleStyle1 {
  font-size: 18px;
  text-align: center;
  color: gray;
  font-family: "仿宋";
}

.trainTitleStyle {
  font-size: 18px;
  margin: 10px 12px auto;
  font-size: 16px;
  font-family: "仿宋";
  color: rgb(0, 61, 141);
}

.foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 620px;
  height: 50px;
  background: rgb(42, 82, 151);
  display: flex;

  .foot_font {
    font-size: 20px;
    color: white;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.imgs {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(42, 82, 151);
  display: flex;
  align-items: center;
  justify-content: center;

  >img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: -80px;
  }
}
</style>