|
|
@@ -0,0 +1,689 @@
|
|
|
+<template>
|
|
|
+ <div id="hoursTimesRecord">
|
|
|
+ <div class="top_style">
|
|
|
+ <header>
|
|
|
+ <div class="left"><i></i><span>学员信息</span></div>
|
|
|
+ <span style="margin-left: 10px"
|
|
|
+ ><strong style="color: red">「1」</strong>所购商品：{{
|
|
|
+ objs.goodsName
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span style="margin-left: 10px"
|
|
|
+ ><strong style="color: red">「2」</strong>所在班级：{{
|
|
|
+ objs.className
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span style="margin-left: 10px"
|
|
|
+ ><strong style="color: red">「3」</strong>学时：{{
|
|
|
+ objs.classHours
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ <span style="margin-left: 10px"
|
|
|
+ ><strong style="color: red">「4」</strong>完成{{
|
|
|
+ userData.stuAllNum + userData.recordNum
|
|
|
+ }}节的内容学习</span
|
|
|
+ >
|
|
|
+ <span style="margin-left: 10px"
|
|
|
+ ><strong style="color: red">「5」</strong>学习时间：{{
|
|
|
+ $methodsTools.onlyForma(userData.studyStartTime, false)
|
|
|
+ }}
|
|
|
+ - {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
|
|
|
+ >
|
|
|
+ <el-button type="primary" size="mini" @click="showBox = !showBox">{{
|
|
|
+ showBox ? "收起" : "展开"
|
|
|
+ }}</el-button>
|
|
|
+ </header>
|
|
|
+ <div class="info_img" v-show="showBox">
|
|
|
+ <ul>
|
|
|
+ <li>学员编码：{{ userData.studentCode }}</li>
|
|
|
+ <li>学员姓名：{{ userData.realName }}</li>
|
|
|
+ <li>学员身份证号码：{{ userData.idCard }}</li>
|
|
|
+ <li>绑定手机号码：{{ userData.telPhone }}</li>
|
|
|
+ </ul>
|
|
|
+ <div class="img_by">
|
|
|
+ <div class="photoSty1">
|
|
|
+ <img
|
|
|
+ v-if="!userData.oneInchPhotos"
|
|
|
+ src="@/assets/images/peopleImg.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
|
|
|
+ :preview-src-list="[
|
|
|
+ $methodsTools.splitImgHost(userData.oneInchPhotos),
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div class="pos_bottom">一寸头像图</div>
|
|
|
+ </div>
|
|
|
+ <div class="photoSty2">
|
|
|
+ <img
|
|
|
+ v-if="!userData.idCardImg1"
|
|
|
+ src="@/assets/images/idcardF.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="$methodsTools.splitImgHost(userData.idCardImg1)"
|
|
|
+ :preview-src-list="[
|
|
|
+ $methodsTools.splitImgHost(userData.idCardImg1),
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div class="pos_bottom">身份证头像照</div>
|
|
|
+ </div>
|
|
|
+ <div class="photoSty2" style="margin-right: 0px">
|
|
|
+ <img
|
|
|
+ v-if="!userData.idCardImg2"
|
|
|
+ src="@/assets/images/idcardZ.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="$methodsTools.splitImgHost(userData.idCardImg2)"
|
|
|
+ :preview-src-list="[
|
|
|
+ $methodsTools.splitImgHost(userData.idCardImg2),
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <div class="pos_bottom">身份证国徽照</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-tabs
|
|
|
+ style="margin-top: 14px"
|
|
|
+ v-if="show"
|
|
|
+ v-model="activeCourseId"
|
|
|
+ type="card"
|
|
|
+ :before-leave="changeActiveCourseIdFunc"
|
|
|
+ >
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(item, index) in courseList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.courseName"
|
|
|
+ :name="item.courseId + ''"
|
|
|
+ ></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="footerTableStyle">
|
|
|
+ <el-table
|
|
|
+ v-if="!loading"
|
|
|
+ v-loading="loading"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ :header-cell-style="{
|
|
|
+ 'background-color': '#CCDDF7',
|
|
|
+ padding: '2px',
|
|
|
+ color: '#0047D0',
|
|
|
+ 'border-right-color': '#0047D0',
|
|
|
+ 'border-left-color': '#0047D0',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in tableList"
|
|
|
+ :width="item.width"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ align="center"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ header-align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="item.scope === 'status'">
|
|
|
+ {{
|
|
|
+ scope.row[item.prop] == 1
|
|
|
+ ? "及格"
|
|
|
+ : scope.row[item.prop] == 0
|
|
|
+ ? "不及格"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.scope === 'sectionType'">
|
|
|
+ {{
|
|
|
+ scope.row[item.prop] == 1
|
|
|
+ ? "录播"
|
|
|
+ : scope.row[item.prop] == 2
|
|
|
+ ? "直播"
|
|
|
+ : scope.row[item.prop] == 3
|
|
|
+ ? "回放"
|
|
|
+ : scope.row[item.prop] == 4
|
|
|
+ ? "题卷"
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <div v-else-if="item.scope === 'moreTime'">
|
|
|
+ {{ $methodsTools.onlyForma(scope.row[item.prop1]) }} -
|
|
|
+ {{ $methodsTools.onlyForma(scope.row[item.prop2]) }}
|
|
|
+ </div>
|
|
|
+ <span v-else-if="item.scope === 'durationTime'">
|
|
|
+ {{
|
|
|
+ scope.row[item.prop]
|
|
|
+ ? $methodsTools.secondToDate(scope.row[item.prop], false)
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.scope === 'score'">
|
|
|
+ {{ scope.row[item.prop] ? scope.row[item.prop] + "分" : "" }}
|
|
|
+ </span>
|
|
|
+ <span v-else>{{ scope.row[item.prop] }}</span></template
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "HoursTimesRecord",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ size: "medium",
|
|
|
+ loading: false,
|
|
|
+ userData: {},
|
|
|
+ tableList: [
|
|
|
+ {
|
|
|
+ label: "模块标题",
|
|
|
+ prop: "moduleName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "章标题",
|
|
|
+ prop: "chapterName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "节标题",
|
|
|
+ prop: "sectionName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学习类型",
|
|
|
+ prop: "sectionType",
|
|
|
+ scope: "sectionType",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "节时长",
|
|
|
+ prop: "durationTime",
|
|
|
+ scope: "durationTime",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学习/做题的次数",
|
|
|
+ prop: "newVisitNum",
|
|
|
+ width: "140px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学习/做题时间",
|
|
|
+ prop1: "studyStartTime",
|
|
|
+ prop2: "studyEndTime",
|
|
|
+ scope: "moreTime",
|
|
|
+ width: "310px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学习/做题状态",
|
|
|
+ prop: "status",
|
|
|
+ scope: "status",
|
|
|
+ width: "140px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "做题成绩",
|
|
|
+ prop: "score",
|
|
|
+ scope: "score",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "做题正确率",
|
|
|
+ prop: "rightRate",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData: [],
|
|
|
+ formData: {},
|
|
|
+ total: 0,
|
|
|
+ showBox: true,
|
|
|
+ //路由参数
|
|
|
+ objs: {},
|
|
|
+ //课程列表
|
|
|
+ courseList: [],
|
|
|
+ //选中课程Id
|
|
|
+ activeCourseId: "",
|
|
|
+ //等待获取课程成功后渲染
|
|
|
+ show: false,
|
|
|
+ typeNameArr: [],
|
|
|
+ typeNamePos: 0,
|
|
|
+ storeArr: [],
|
|
|
+ storePos: 0,
|
|
|
+ feeArr: [],
|
|
|
+ feePos: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.objs = this.$route.query;
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //获取用户信息
|
|
|
+ this.getUserInfo();
|
|
|
+ //获取课程列表
|
|
|
+ this.getGoodsCourseList(this.objs.goodsId).then((newName) => {
|
|
|
+ this.changeActiveCourseIdFunc(newName);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ tableData(val) {
|
|
|
+ this.merage();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取商品课程列表
|
|
|
+ getGoodsCourseList(id) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$api.obtainCourseSgoodsId(id).then((res) => {
|
|
|
+ if (res.rows.length > 0) {
|
|
|
+ this.courseList = res.rows;
|
|
|
+ this.activeCourseId = res.rows[0].courseId + "";
|
|
|
+ this.show = true;
|
|
|
+ resolve(res.rows[0].courseId + "");
|
|
|
+ } else {
|
|
|
+ this.$message.warning("查无该商品课程列表");
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取用户信息
|
|
|
+ getUserInfo() {
|
|
|
+ this.$api
|
|
|
+ .inquireGradegradelistUserlistPeriod({
|
|
|
+ gradeId: this.objs.gradeId,
|
|
|
+ userId: this.objs.userId,
|
|
|
+ goodsId: this.objs.goodsId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.userData = res.rows[0];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //选中课程触发方法
|
|
|
+ changeActiveCourseIdFunc(newName, oldName) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.loading = true;
|
|
|
+ const data = {
|
|
|
+ gradeId: this.objs.gradeId,
|
|
|
+ userId: this.objs.userId,
|
|
|
+ goodsId: this.objs.goodsId,
|
|
|
+ courseId: newName,
|
|
|
+ };
|
|
|
+ this.$api
|
|
|
+ .gradegradelistUserStudyRecord(data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ let COURSELISTMX = [];
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ if (item.recordList && item.recordList.length) {
|
|
|
+ for (let i = 0; i < item.recordList.length; i++) {
|
|
|
+ let ary = { ...item };
|
|
|
+ ary.recordList[i].newVisitNum = i + 1;
|
|
|
+ COURSELISTMX.push(Object.assign(ary, ary.recordList[i]));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.studyStartTime || item.studyEndTime) {
|
|
|
+ item.newVisitNum = 1;
|
|
|
+ } else {
|
|
|
+ item.newVisitNum = "未参与";
|
|
|
+ }
|
|
|
+
|
|
|
+ COURSELISTMX.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tableData = COURSELISTMX;
|
|
|
+ resolve();
|
|
|
+ } else {
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ merageInit() {
|
|
|
+ // 在下文的时候会用到，对数据进行初始化是很有必要的
|
|
|
+ this.typeNameArr = [];
|
|
|
+ this.typeNamePos = 0;
|
|
|
+ this.storeArr = [];
|
|
|
+ this.storePos = 0;
|
|
|
+ this.feeArr = [];
|
|
|
+ this.feePos = 0;
|
|
|
+ },
|
|
|
+ merage() {
|
|
|
+ this.merageInit(); // 前文的初始化数据函数
|
|
|
+ let arys = JSON.parse(JSON.stringify(this.tableData));
|
|
|
+ for (let i = 0; i < arys.length; i += 1) {
|
|
|
+ if (i === 0) {
|
|
|
+ // 第一行必须存在
|
|
|
+ this.typeNameArr.push(1);
|
|
|
+ this.typeNamePos = 0;
|
|
|
+ this.storeArr.push(1);
|
|
|
+ this.storePos = 0;
|
|
|
+ this.feeArr.push(1);
|
|
|
+ this.feePos = 0;
|
|
|
+ } else {
|
|
|
+ // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
|
|
|
+ // 第一列 下面的是eslint的不限制语法
|
|
|
+ // eslint-disable-next-line no-lonely-if
|
|
|
+ if (arys[i].moduleName === arys[i - 1].moduleName) {
|
|
|
+ this.typeNameArr[this.typeNamePos] += 1;
|
|
|
+ this.typeNameArr.push(0);
|
|
|
+ } else {
|
|
|
+ this.typeNameArr.push(1);
|
|
|
+ this.typeNamePos = i;
|
|
|
+ }
|
|
|
+ // 第二列
|
|
|
+ if (
|
|
|
+ arys[i].chapterName === arys[i - 1].chapterName &&
|
|
|
+ arys[i].moduleName === arys[i - 1].moduleName
|
|
|
+ ) {
|
|
|
+ this.storeArr[this.storePos] += 1;
|
|
|
+ this.storeArr.push(0);
|
|
|
+ } else {
|
|
|
+ this.storeArr.push(1);
|
|
|
+ this.storePos = i;
|
|
|
+ }
|
|
|
+ // 第三列
|
|
|
+ if (
|
|
|
+ arys[i].sectionName === arys[i - 1].sectionName &&
|
|
|
+ arys[i].chapterName === arys[i - 1].chapterName &&
|
|
|
+ arys[i].moduleName === arys[i - 1].moduleName
|
|
|
+ ) {
|
|
|
+ this.feeArr[this.feePos] += 1;
|
|
|
+ this.feeArr.push(0);
|
|
|
+ } else {
|
|
|
+ this.feeArr.push(1);
|
|
|
+ this.feePos = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ // 第一列的合并方法
|
|
|
+ const row1 = this.typeNameArr[rowIndex];
|
|
|
+ const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
|
|
|
+ return {
|
|
|
+ rowspan: row1,
|
|
|
+ colspan: col1,
|
|
|
+ };
|
|
|
+ } else if (columnIndex === 1) {
|
|
|
+ // 第二列的合并方法
|
|
|
+ const row2 = this.storeArr[rowIndex];
|
|
|
+ const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
|
|
|
+ return {
|
|
|
+ rowspan: row2,
|
|
|
+ colspan: col2,
|
|
|
+ };
|
|
|
+ } else if (columnIndex === 2) {
|
|
|
+ // 第三列的合并方法
|
|
|
+ const row3 = this.feeArr[rowIndex];
|
|
|
+ const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
|
|
|
+ return {
|
|
|
+ rowspan: row3,
|
|
|
+ colspan: col3,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+#hoursTimesRecord {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - 145px);
|
|
|
+}
|
|
|
+.footerTableStyle {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.btn_styleShow {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+.styFlex {
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.btnstyles {
|
|
|
+ margin-left: 0px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.dis_flexs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.dis_fs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 211px;
|
|
|
+ background-color: #eee;
|
|
|
+ padding: 0px 30px;
|
|
|
+ overflow: auto;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .ul_ls {
|
|
|
+ margin-right: 30px;
|
|
|
+ align-self: flex-start;
|
|
|
+ li {
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track,
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 999px;
|
|
|
+ border: 5px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ min-height: 20px;
|
|
|
+ background-clip: content-box;
|
|
|
+ box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-corner {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+.photoSty1 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 150px;
|
|
|
+ height: 160px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-right: 60px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.photoSty2 {
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 230px;
|
|
|
+ height: 160px;
|
|
|
+ margin-right: 60px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.pos_bottom {
|
|
|
+ position: absolute;
|
|
|
+ height: 20px;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.dis_fls {
|
|
|
+ margin: 16px 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .s_sd {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .dis_colu {
|
|
|
+ height: 55px;
|
|
|
+ margin-right: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.jdNumSty {
|
|
|
+ border: 1px solid #000;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 6px;
|
|
|
+}
|
|
|
+.shbtns {
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ background-color: #eee;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+.btnStys {
|
|
|
+ border: 1px solid #666;
|
|
|
+ padding: 0px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.liImgs {
|
|
|
+ float: left;
|
|
|
+ width: 250px;
|
|
|
+ height: 250px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ .abos {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(90, 90, 90, 0.7);
|
|
|
+ }
|
|
|
+}
|
|
|
+.top_style {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ & > header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ & > span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ & > .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 2px;
|
|
|
+ height: 18px;
|
|
|
+ background: #0c5dfb;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #666;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .info_img {
|
|
|
+ display: flex;
|
|
|
+ height: 210px;
|
|
|
+ ul {
|
|
|
+ width: 320px;
|
|
|
+ li {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img_by {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .pos_bottom {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ background-color: rgba(53, 53, 53, 0.6);
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ & > .photoSty1 {
|
|
|
+ width: 152px;
|
|
|
+ height: 208px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ margin-right: 75px;
|
|
|
+ & > img {
|
|
|
+ width: 106px;
|
|
|
+ height: 150px;
|
|
|
+ margin: 29px auto 0px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .photoSty2 {
|
|
|
+ width: 328px;
|
|
|
+ height: 208px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ margin-right: 75px;
|
|
|
+ & > img {
|
|
|
+ width: 243px;
|
|
|
+ height: 154px;
|
|
|
+ margin: 27px auto 0px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-table{
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
