|
@@ -0,0 +1,753 @@
|
|
|
+<template>
|
|
|
+ <div class="statisticalAnalysis">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="show"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ fullscreen
|
|
|
+ :modal="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <div class="s_box">
|
|
|
+ <div class="s_b_top">
|
|
|
+ <div class="s_b_t_left">
|
|
|
+ <img src="../../assets/icon/thirdToolList/ask.png" />
|
|
|
+ <div class="s_b_t_l_detail">
|
|
|
+ <div>{{ askData.title }}</div>
|
|
|
+ <span>{{ askData.describe }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s_b_t_right" @click="close">
|
|
|
+ <svg
|
|
|
+ t="1730691027130"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4288"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M632.117978 513.833356l361.805812 361.735298a85.462608 85.462608 0 1 1-121.001515 120.789974L511.116463 634.552816 146.913186 998.756094a86.026718 86.026718 0 0 1-121.706652-121.706652L389.480325 512.775651 27.674513 150.969839A85.392095 85.392095 0 0 1 148.393973 30.250379L510.199785 392.056191l366.671258-366.671258a86.026718 86.026718 0 0 1 121.706652 121.706652z"
|
|
|
+ p-id="4289"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <span>退出</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s_b_bottom">
|
|
|
+ <div class="s_b_b_left">
|
|
|
+ <span
|
|
|
+ @click="changeShowType(0)"
|
|
|
+ :class="{ s_b_b_l_active: showType === 0 }"
|
|
|
+ >题目情况</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="changeShowType(1)"
|
|
|
+ :class="{ s_b_b_l_active: showType === 1 }"
|
|
|
+ >学生汇总</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="changeShowType(2)"
|
|
|
+ :class="{ s_b_b_l_active: showType === 2 }"
|
|
|
+ >班级汇总</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="s_b_b_right">
|
|
|
+ <div class="s_b_b_r_item" v-if="showType === 0">
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据统计图</div>
|
|
|
+ <div class="ib_echarts" style="width:60%;height: 600px">
|
|
|
+ <eChartsView
|
|
|
+ id="problemSituationData"
|
|
|
+ v-if="problemSituationData.eChartsOption && show "
|
|
|
+ :data="problemSituationData.eChartsOption"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据详情</div>
|
|
|
+ <el-table
|
|
|
+ v-if="problemSituationData.tableData.length > 0"
|
|
|
+ :data="problemSituationData.tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="label"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in problemSituationData.tableData[0]
|
|
|
+ .options"
|
|
|
+ width="70"
|
|
|
+ :key="index"
|
|
|
+ :label="`选项${index + 1}`"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ scope.row.options[index] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s_b_b_r_item" v-if="showType === 1">
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据统计图</div>
|
|
|
+ <div class="ib_echarts" style="width:60%;height: 600px">
|
|
|
+ <eChartsView2
|
|
|
+ id="studentSummaryData"
|
|
|
+ v-if="studentSummary.eChartsOption && show"
|
|
|
+ :data="studentSummary.eChartsOption"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据详情</div>
|
|
|
+ <el-table
|
|
|
+ v-if="studentSummary.tableData.length > 0"
|
|
|
+ :data="studentSummary.tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="label"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in studentSummary.tableData[0].options"
|
|
|
+ width="70"
|
|
|
+ :key="index"
|
|
|
+ :label="`选项${index + 1}`"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ scope.row.options[index] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_b_r_item" v-if="showType === 2">
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据统计图</div>
|
|
|
+ <div class="ib_echarts" style="width:800px;height: 600px">
|
|
|
+ <eChartsView3
|
|
|
+ id="classSummaryData"
|
|
|
+ v-if="classSummary.eChartsOption && show"
|
|
|
+ :data="classSummary.eChartsOption"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="itemBox">
|
|
|
+ <div class="ib_title">数据详情</div>
|
|
|
+ <el-table
|
|
|
+ v-if="classSummary.tableData.length > 0"
|
|
|
+ :data="classSummary.tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ :index="indexMethod"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="label"
|
|
|
+ width="100"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in classSummary.tableData[0].options"
|
|
|
+ width="70"
|
|
|
+ :key="index"
|
|
|
+ :label="`选项${index + 1}`"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{ scope.row.options[index] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import eChartsView from "./eChartsView.vue";
|
|
|
+import eChartsView2 from "./eChartsView.vue";
|
|
|
+import eChartsView3 from "./eChartsView.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ eChartsView,
|
|
|
+ eChartsView2,
|
|
|
+ eChartsView3
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ showType: 0,
|
|
|
+ data: null,
|
|
|
+ tType: null,
|
|
|
+ worksData: null,
|
|
|
+ worksStudent: null,
|
|
|
+ askData: {
|
|
|
+ title: "",
|
|
|
+ describe: ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(data) {
|
|
|
+ this.show = true;
|
|
|
+ this.data = data;
|
|
|
+ this.worksStudent = data.worksStudent;
|
|
|
+ if (data.worksStudent.length > 0) {
|
|
|
+ let works = data.worksStudent[0].works
|
|
|
+ ? JSON.parse(data.worksStudent[0].works)
|
|
|
+ : null;
|
|
|
+ if (works) {
|
|
|
+ works = works[0].askJson;
|
|
|
+ this.worksData = works.askJson;
|
|
|
+ this.askData.title = works.askTitle;
|
|
|
+ } else {
|
|
|
+ this.worksData = [];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.worksData = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.show = false;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.data = null;
|
|
|
+ this.showType = 0;
|
|
|
+ this.tType = null;
|
|
|
+ this.worksData = null;
|
|
|
+ this.askData = {
|
|
|
+ title: "",
|
|
|
+ describe: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+ changeShowType(type) {
|
|
|
+ this.showType = type;
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ indexMethod(index) {
|
|
|
+ if (index === 0) {
|
|
|
+ return "";
|
|
|
+ } else {
|
|
|
+ return index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 题目情况
|
|
|
+ problemSituationData() {
|
|
|
+ let result = {
|
|
|
+ eChartsOption: {
|
|
|
+ legend: {
|
|
|
+ selectedMode: false
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 100,
|
|
|
+ right: 100,
|
|
|
+ top: 50,
|
|
|
+ bottom: 50
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function(value) {
|
|
|
+ return value * 100 + "%"; // 将值转换为百分比
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: {}
|
|
|
+ },
|
|
|
+ tableData: []
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.worksData === null || this.worksData.length === 0) {
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取题目选项最多的长度
|
|
|
+ let optionsLength = 0;
|
|
|
+
|
|
|
+ this.worksData.forEach((item, index) => {
|
|
|
+ if (item.checkList.length > optionsLength) {
|
|
|
+ optionsLength = item.checkList.length;
|
|
|
+ }
|
|
|
+ let itemObj = {
|
|
|
+ label: `题目${index + 1}`,
|
|
|
+ question: item.askTitle,
|
|
|
+ options: []
|
|
|
+ };
|
|
|
+
|
|
|
+ result.tableData.push(itemObj);
|
|
|
+ });
|
|
|
+
|
|
|
+ //填充选项次数
|
|
|
+ result.tableData.forEach(item => {
|
|
|
+ item.options = new Array(optionsLength).fill(0);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.worksStudent.forEach((item, index) => {
|
|
|
+ let works = item.works ? JSON.parse(item.works) : null;
|
|
|
+ if (works) {
|
|
|
+ let answer = works[0].anwer;
|
|
|
+ answer.forEach((item2, index2) => {
|
|
|
+ if (Array.isArray(item2)) {
|
|
|
+ item2.forEach(item3 => result.tableData[index2].options[item3]++);
|
|
|
+ } else if (typeof item2 === "number") {
|
|
|
+ result.tableData[index2].options[item2]++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ result.eChartsOption.yAxis.data = result.tableData
|
|
|
+ .map(item => item.label)
|
|
|
+ .reverse();
|
|
|
+
|
|
|
+ let optionsDataList = result.tableData.map(i => i.options).reverse();
|
|
|
+
|
|
|
+ let totalData = [];
|
|
|
+ let endwaysData = [];
|
|
|
+
|
|
|
+ optionsDataList.forEach((item, index) => {
|
|
|
+ totalData.push(item.reduce((a, b) => a + b, 0));
|
|
|
+
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ if (!endwaysData[i]) {
|
|
|
+ endwaysData[i] = [];
|
|
|
+ }
|
|
|
+ endwaysData[i].push(item[i]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let series = result.tableData[0].options.map((item, index) => {
|
|
|
+ return {
|
|
|
+ name: `选项${index + 1}`,
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ barWidth: "60%",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: params => {
|
|
|
+ let data = Math.round(params.value * 1000) / 10;
|
|
|
+ if (data === 0) {
|
|
|
+ return "";
|
|
|
+ } else {
|
|
|
+ return data + "%";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: endwaysData[index].map((d, did) => {
|
|
|
+ return totalData[did] <= 0 ? 0 : d / totalData[did];
|
|
|
+ })
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ result.eChartsOption.series = series;
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ //学生汇总
|
|
|
+ studentSummary() {
|
|
|
+ let result = {
|
|
|
+ eChartsOption: {
|
|
|
+ legend: {
|
|
|
+ selectedMode: false
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 100,
|
|
|
+ right: 100,
|
|
|
+ top: 50,
|
|
|
+ bottom: 50
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function(value) {
|
|
|
+ return value * 100 + "%"; // 将值转换为百分比
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: {}
|
|
|
+ },
|
|
|
+ tableData: []
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.worksData === null || this.worksData.length === 0) {
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取题目选项最多的长度
|
|
|
+ let optionsLength = 0;
|
|
|
+
|
|
|
+ this.worksData.forEach((item, index) => {
|
|
|
+ if (item.checkList.length > optionsLength) {
|
|
|
+ optionsLength = item.checkList.length;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.worksStudent.forEach((item, index) => {
|
|
|
+ let works = item.works ? JSON.parse(item.works) : null;
|
|
|
+ let obj = {
|
|
|
+ label: `${item.sName}`,
|
|
|
+ index: index,
|
|
|
+ options: new Array(optionsLength).fill(0)
|
|
|
+ };
|
|
|
+ if (works) {
|
|
|
+ let answer = works[0].anwer;
|
|
|
+ answer.forEach((item2, index2) => {
|
|
|
+ if (Array.isArray(item2)) {
|
|
|
+ item2.forEach(item3 => obj.options[item3]++);
|
|
|
+ // item2.forEach(item3 => result.tableData[index2].options[item3]++);
|
|
|
+ } else if (typeof item2 === "number") {
|
|
|
+ obj.options[item2]++;
|
|
|
+ // result.tableData[index2].options[item2]++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ result.tableData.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ result.eChartsOption.yAxis.data = result.tableData
|
|
|
+ .map(item => item.label)
|
|
|
+ .reverse();
|
|
|
+
|
|
|
+ let optionsDataList = result.tableData.map(i => i.options).reverse();
|
|
|
+
|
|
|
+ let totalData = [];
|
|
|
+ let endwaysData = [];
|
|
|
+
|
|
|
+ optionsDataList.forEach((item, index) => {
|
|
|
+ totalData.push(item.reduce((a, b) => a + b, 0));
|
|
|
+
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ if (!endwaysData[i]) {
|
|
|
+ endwaysData[i] = [];
|
|
|
+ }
|
|
|
+ endwaysData[i].push(item[i]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let series = result.tableData[0].options.map((item, index) => {
|
|
|
+ return {
|
|
|
+ name: `选项${index + 1}`,
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ barWidth: "60%",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: params => {
|
|
|
+ let data = Math.round(params.value * 1000) / 10;
|
|
|
+ if (data === 0) {
|
|
|
+ return "";
|
|
|
+ } else {
|
|
|
+ return data + "%";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: endwaysData[index].map((d, did) => {
|
|
|
+ return totalData[did] <= 0 ? 0 : d / totalData[did];
|
|
|
+ })
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ result.eChartsOption.series = series;
|
|
|
+
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ //班级汇总
|
|
|
+ classSummary() {
|
|
|
+ let result = {
|
|
|
+ eChartsOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: "5%",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ name: "班级汇总",
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ padAngle: 0,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ formatter: "{b}:{c}人",
|
|
|
+ fontSize: 30
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tableData: []
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取题目选项最多的长度
|
|
|
+ let optionsLength = 0;
|
|
|
+
|
|
|
+ this.worksData.forEach((item, index) => {
|
|
|
+ if (item.checkList.length > optionsLength) {
|
|
|
+ optionsLength = item.checkList.length;
|
|
|
+ }
|
|
|
+ let itemObj = {
|
|
|
+ label: `题目${index + 1}`,
|
|
|
+ question: item.askTitle,
|
|
|
+ options: []
|
|
|
+ };
|
|
|
+
|
|
|
+ result.tableData.push(itemObj);
|
|
|
+ });
|
|
|
+
|
|
|
+ //填充选项次数
|
|
|
+ result.tableData.forEach(item => {
|
|
|
+ item.options = new Array(optionsLength).fill(0);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.worksStudent.forEach((item, index) => {
|
|
|
+ let works = item.works ? JSON.parse(item.works) : null;
|
|
|
+ if (works) {
|
|
|
+ let answer = works[0].anwer;
|
|
|
+ answer.forEach((item2, index2) => {
|
|
|
+ if (Array.isArray(item2)) {
|
|
|
+ item2.forEach(item3 => result.tableData[index2].options[item3]++);
|
|
|
+ } else if (typeof item2 === "number") {
|
|
|
+ result.tableData[index2].options[item2]++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let totalData = {
|
|
|
+ label: "总计",
|
|
|
+ question: "总计",
|
|
|
+ options: new Array(optionsLength).fill(0)
|
|
|
+ };
|
|
|
+
|
|
|
+ result.tableData.forEach(i => {
|
|
|
+ i.options.forEach((i2, index2) => {
|
|
|
+ totalData.options[index2] += i2;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ result.tableData.unshift(totalData);
|
|
|
+
|
|
|
+
|
|
|
+ totalData.options.forEach((item,index)=>{
|
|
|
+ let obj = {
|
|
|
+ value:item,
|
|
|
+ name:`选项${index+1}`
|
|
|
+ }
|
|
|
+ result.eChartsOption.series[0].data.push(obj)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.statisticalAnalysis {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.statisticalAnalysis >>> .el-dialog__header,
|
|
|
+.statisticalAnalysis >>> .el-dialog__footer {
|
|
|
+ display: none; /* 隐藏头部和底部 */
|
|
|
+}
|
|
|
+
|
|
|
+.statisticalAnalysis >>> .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.s_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-self: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #dee0e3;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_left {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_left > img {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_l_detail {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_l_detail > div {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_l_detail > span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #beb4b4;
|
|
|
+ display: block;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_right {
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ margin: auto;
|
|
|
+ margin-right: 40px;
|
|
|
+ margin-left: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_right > svg {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 10px;
|
|
|
+ fill: #000;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_t_right > span {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_b_left {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 1px solid #beb4b4;
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_b_left > span {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 22px;
|
|
|
+ margin-top: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_b_l_active {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_b_right {
|
|
|
+ width: calc(100% - 300px);
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_b_r_item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.itemBox {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.ib_title {
|
|
|
+ font-size: 24px;
|
|
|
+ /* font-weight: bold; */
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|