tropsCode/src/views/analysis/detail.vue

<template>
  <div class="main">
    <view class="back" @click="getBack" style="background: #efefef;">
      <view class="backBtn">返回</view>
    </view>
    <div class="main-a">
      <div class="main-a-title">
        <div class="project">{{ details.examsName }}</div>
        <div class="date">{{ details.cdate }}</div>
      </div>
      <div class="main-a-con">
        <div class="main-a-con-left">
          <div class="userInfo">
            <strong>{{ details.name }}</strong><span>{{ details.grade_name + details.class_name }}</span>
          </div>
          <div class="fraction">
            <strong>{{ details.score }}</strong><span>分</span>
          </div>
          <div class="score">
            <i>成绩</i><strong>{{ details.result }}</strong>
            <span>{{ details.unit }}</span>
          </div>
          <div class="ranking">
            <i>排名</i> <strong>{{ details.area_rank }}</strong><span>/{{ details.area_totals }}</span>
          </div>
        </div>
        <div class="main-a-con-right">
          <div class="main-a-con-right-box">
            <img v-if="query.exam_name == 'jump'" src="@/assets/images/analysis/jump.png" />
            <img v-if="['run800', 'runa800'].includes(query.exam_name)" src="@/assets/images/analysis/run800.png" />
            <img
              v-if="['run50', 'run60', 'run100', 'run200', 'run400', 'run1000', 'runa1000', 'run15x4', 'run50x8'].includes(query.exam_name)"
              src="@/assets/images/analysis/run1000.png" />
            <img v-if="query.exam_name == 'basketball' ||
              query.exam_name == 'basketballv1'
            " src="@/assets/images/analysis/basketball.png" />
            <img v-if="query.exam_name == 'football' || query.exam_name == 'footballv1'
            " src="@/assets/images/analysis/football.png" />
            <img v-if="query.exam_name == 'badminton' ||
              query.exam_name == 'badmintonv1'
            " src="@/assets/images/analysis/badminton.png" />
            <img v-if="query.exam_name == 'pingpong'" src="@/assets/images/analysis/pingpong.png" />
            <img v-if="query.exam_name == 'volleyball'" src="@/assets/images/analysis/volleyball.png" />
            <img v-if="query.exam_name == 'volleyballv1'" src="@/assets/images/analysis/volleyball.png" />
            <img v-if="query.exam_name == 'solidball'" src="@/assets/images/analysis/solidBall.png" />
            <img v-if="query.exam_name == 'situp'" src="@/assets/images/analysis/sitUp.png" />
            <img v-if="query.exam_name == 'pullup'" src="@/assets/images/analysis/pullUp.png" />
            <img v-if="query.exam_name == 'jumprope'" src="@/assets/images/analysis/jumprope.png" />
            <img v-if="query.exam_name == 'jumpingjack'" src="@/assets/images/analysis/jumpingjack.png" />
            <img v-if="query.exam_name == 'highknees'" src="@/assets/images/analysis/highknees.png" />
            <img v-if="query.exam_name == 'longjump'" src="@/assets/images/analysis/longjump.png" />
            <img v-if="query.exam_name == 'skiprope'" src="@/assets/images/analysis/skiprope.png" />
            <div class="svg-box" v-if="details.score">
              <svg class="svg" width="100%" height="100%" viewBox="0 0 400 400">
                <!-- 1圈 -->
                <circle cx="200" cy="200" r="100" stroke="#39BBBB" stroke-width="25" fill="none"
                  :stroke-dasharray="0 + ',' + 2 * Math.PI * 100" :stroke-dashoffset="0" stroke-linecap="butt">
                  <animate attributeName="stroke-dasharray" :from="0" :to="2 * Math.PI * 100 * (details.score / details.total_score)
                    " dur="1.2s" begin="0" fill="freeze" />
                </circle>
                <!-- 2圈 -->
                <circle cx="200" cy="200" r="60" stroke="#506794" stroke-width="25" fill="none"
                  :stroke-dasharray="0 + ',' + 2 * Math.PI * 60" :stroke-dashoffset="0" stroke-linecap="butt">
                  <animate attributeName="stroke-dasharray" :from="0" :to="2 * Math.PI * 60 * (details.score / details.total_score)
                    " dur="1.0s" begin="0" fill="freeze" />
                </circle>
                <!-- 3圈 -->
                <circle cx="200" cy="200" r="20" stroke="#FF8165" stroke-width="25" fill="none"
                  :stroke-dasharray="0 + ',' + 2 * Math.PI * 20" :stroke-dashoffset="0" stroke-linecap="butt">
                  <animate attributeName="stroke-dasharray" :from="0" :to="2 * Math.PI * 20 * (details.score / details.total_score)
                    " dur="0.8s" begin="0" fill="freeze" />
                </circle>
              </svg>
            </div>
          </div>
        </div>
        <div class="grade">
          <img v-if="details.score_level == '优秀'" src="@/assets/images/analysis/grade1.png" />
          <img v-if="details.score_level == '良好'" src="@/assets/images/analysis/grade2.png" />
          <img v-if="details.score_level == '及格'" src="@/assets/images/analysis/grade3.png" />
          <img v-if="details.score_level == '不及格'" src="@/assets/images/analysis/grade4.png" />
        </div>
      </div>
    </div>
    <div class="main-b" :class="{ 'main-b-margintop': details.score == 0 }">
      <div class="main-b-title">分数评级</div>
      <div class="main-b-con">
        <div class="drawingItem" v-if="JSON.stringify(details.std) != '{}' && details.std?.scores != undefined">
          <span class="a" :style="{ width: details.std.scores[0] * 100 + '%' }">不及格</span><span class="b" :style="{
            width:
              (details.std.scores[1] - details.std.scores[0]) * 100 + '%',
          }">及格</span><span class="c" :style="{
            width:
              (details.std.scores[2] - details.std.scores[1]) * 100 + '%',
          }">良好</span><span class="d" :style="{
            width:
              (details.std.scores[3] - details.std.scores[2]) * 100 + '%',
          }">优秀</span>
        </div>
        <div class="drawingItem" v-else>
          <span class="a">不及格</span><span class="b">及格</span><span class="c">良好</span><span class="d">优秀</span>
        </div>
        <div v-if="JSON.stringify(details.std) != '{}' && details.std?.scores != undefined">
          <i class="branchA scoreType">成绩</i>
          <i class="branchB scoreType" :style="{
            left: (details.std.scores[0] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.values[0] }}</i>
          <i class="branchC scoreType" :style="{
            left: (details.std.scores[1] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.values[1] }}</i>
          <i class="branchD scoreType" :style="{
            left: (details.std.scores[2] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.values[2] }}</i>
          <i class="branchE scoreType" :style="{
            left: (details.std.scores[3] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.values[3] }}</i>
        </div>
        <div v-if="JSON.stringify(details.std) != '{}' && details.std?.scores != undefined">
          <i class="branchA">分数</i>
          <i class="branchB" :style="{
            left: (details.std.scores[0] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.scores[0] }}</i>
          <i class="branchC" :style="{
            left: (details.std.scores[1] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.scores[1] }}</i>
          <i class="branchD" :style="{
            left: (details.std.scores[2] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.scores[2] }}</i>
          <i class="branchE" :style="{
            left: (details.std.scores[3] / details.std.scores[3]) * 100 + '%',
          }">{{ details.std.scores[3] }}</i>
        </div>
        <div v-else>
          <i class="branchA">分数</i>
          <i class="branchB">60</i>
          <i class="branchC">80</i>
          <i class="branchD">90</i>
          <i class="branchE">100</i>
        </div>
        <div v-if="JSON.stringify(details.std) != '{}' && details.std?.scores != undefined" class="currentDian" :style="{
          left:
            (details.score / details.std.scores[3] > 1
              ? 1
              : details.score / details.std.scores[3]) *
            100 +
            '%',
        }">
          <div class="chengji">
            <span>{{ details.result }}</span>
          </div>
          <div class="fenshu">
            <span>{{ details.score }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main-c" v-if="JSON.stringify(details) != '{}'">
      <!--立定跳远-->
      <Jump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['jump'].includes(query.exam_name)
      " />
      <!--实心球-->
      <SolidBall :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['solidball'].includes(query.exam_name)
      " />
      <!--脚环跑步-->
      <Runa :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['runa800', 'runa1000', 'runwb800', 'runwb1000'].includes(query.exam_name)
      " />
      <!--跑步-->
      <Run :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['run50', 'run60', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4', 'run50x8'].includes(query.exam_name)
      " />
      <!--仰卧起坐-->
      <SitUp :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['situp'].includes(query.exam_name)
      " />
      <!--引体向上-->
      <PullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['pullup'].includes(query.exam_name)
      " />
      <!--跳绳类-->
      <RopeSkipping :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['jumprope', 'jumpingjack', 'highknees', 'skiprope'].includes(query.exam_name)
      " />
      <!--球类-->
      <Balls :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        [
          'footballv1',
          'football',
          'basketballv1',
          'basketball',
          'volleyballv1',
          'volleyball',
          'badmintonv1',
          'badminton',
          'pingpong',
        ].includes(query.exam_name)
      " />
      <!--斜身引体-->
      <SidePullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['sidepullup'].includes(query.exam_name)
      " />
      <!--三级蛙跳-->
      <TriJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['trijump'].includes(query.exam_name)
      " />
      <!--铅球-->
      <ShotPut :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
        ['shotput'].includes(query.exam_name)
      " />
      <!--急行跳远-->
      <LongJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['longjump'].includes(query.exam_name)
      " />
      <div class="tip">
        <!-- 温馨提示：<br />
        因为光线或人员遮挡等环境问题，导致测试数据偶尔有偏差，最终解释权归卓浦士科技所有。<br />客服热线：<a
          href="tel:020-37804867"
          >020-37804867</a
        > -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import dataDictionary from "@/utils/dataDictionary"
import Balls from "./components/balls.vue";
import Jump from "./components/jump.vue";
import LongJump from "./components/longJump.vue";
import SolidBall from "./components/solidBall.vue";
import Run from "./components/run.vue";
import Runa from "./components/runa.vue";
import SitUp from "./components/sitUp.vue";
import PullUp from "./components/pullUp.vue";
import RopeSkipping from "./components/ropeSkipping.vue";
import SidePullUp from "./components/sidePullUp.vue";
import TriJump from "./components/triJump.vue";
import ShotPut from "./components/shotPut.vue";
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const dic: any = dataDictionary;
const data = reactive<any>({
  query: {},
  details: {},
  gradeType: []
});
const { query, details, gradeType } = toRefs(data);

/**
 * 测试详情
*/
const getTestExamDetails = () => {
  let params = {
    exam_name: query.value.exam_name,
    stu_key: query.value.stu_key,
    test_key: query.value.test_key
  };
  proxy?.$http.analysis.testExamDetails(params)
    .then((res: any) => {
      //console.log(res);
      details.value = res.data || {};
      getDetails();
    })
    .catch(() => {
      proxy?.$modal.msgWarning('无效报告');
      setTimeout(() => {
        getBack();
      }, 1500)
    });
};

/**
 * 上课详情
*/
const getTrainExamDetails = () => {
  let params = {
    exam_name: query.value.exam_name,
    student_id: query.value.student_id,
    result_ids: query.value.result_ids
  };
  proxy?.$http.analysis.trainExamDetails(params)
    .then((res: any) => {
      //console.log(res);
      details.value = res.data || {};
      getDetails();
    })
    .catch(() => {
      proxy?.$modal.msgWarning('无效报告');
      setTimeout(() => {
        getBack();
      }, 1500)
    });
};

/**
 * 重组详情
*/
const getDetails = () => {
  let myList: any = [];
  dataDictionary.gradeLists.forEach((item: any) => {
    item.child.forEach((items: any) => {
      let myIndex = myList.findIndex((itemss: any) => {
        return itemss.value == items.value;
      });
      if (myIndex == -1) {
        myList.push(items)
      }
    })
  })
  console.log("myList", myList)
  gradeType.value = myList;
  let obj = gradeType.value.find((item: any) => {
    return item.value == details.value.grade;
  });

  details.value.grade_name = obj?.label || "";
  details.value.unit = dic.unit[query.value.exam_name];
  details.value.examsName = dic.project[query.value.exam_name];
  details.value.image_url_list = details.value.image_url ?
    details.value.image_url.split("  ") : [];
  if (['trijump', 'solidball', 'shotput', 'longjump'].includes(query.value.exam_name)
  ) {
    details.value.result = Number(details.value.result / 100).toFixed(2);
  } else if (['runa800', 'runa1000', 'run800', 'run1000'].includes(query.value.exam_name)) {
    let myTime = String(details.value.result).indexOf(".") == -1 ?
      details.value.result :
      Number(details.value.result).toFixed(2);
    details.value.result = proxy?.runTime(myTime)
  } else if (['run50', 'run60', 'run70', 'run100', 'run200', 'run400', 'run15x4'].includes(query.value.exam_name)) {
    details.value.result =
      String(details.value.result).indexOf(".") == -1 ?
        details.value.result :
        Number(details.value.result).toFixed(2);
  } else if (['basketballv1'].includes(query.value.exam_name)) {
    details.value.result = proxy?.$utils.runTime(details.value.result, true, 0)
  } else {
    details.value.result =
      String(details.value.result).indexOf(".") == -1 ?
        details.value.result :
        Number(details.value.result).toFixed(1);
  }

  if (
    ['runa800', 'runa1000', 'run50', 'run60', 'run70', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4']
      .includes(query.value.exam_name) &&
    details.value.result == 0
  ) {
    proxy?.$modal.alertError(`无数据原因：${details.value.comments}`);
  }
};

//返回
const getBack = () => {
  router.go(-1);
};

onBeforeMount(() => {
  query.value = route.query;
  if (query.value.test_key) {
    //测试
    getTestExamDetails();
  } else {
    //上课
    getTrainExamDetails();
  }
})

onMounted(() => {
})

</script>

<style lang="scss">
@media screen and (max-width: 1280px) {
  :root {
    font-size: calc(1280px / 106);
  }
}

.main {
  background: #efefef;
  height: calc(100vh - 10vh - 20px);
  overflow-y: scroll;
  overflow-x: hidden;
	padding-bottom: 20px;
	padding-top: 10vh;

  .back {
	position: fixed;
	top: 0;
	width: 100%;
	height: 10vh;
	line-height: 10vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 0 1.5rem;
	cursor: pointer;
	z-index: 2;
}

  .back::before {
    content: "";
    width: 100%;
    height: 0.4vw;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: url("@/assets/images/common/xian.png") center bottom no-repeat;
    background-size: 100% 100%;
  }

  .backBtn {
    font-size: 3.8vh;
    color: #97d4a4;
    padding-left: calc(2vh + 24px);
    background: url("@/assets/images/common/back.png") left center no-repeat;
    background-size: 2vh 3.8vh;
  }

  .main-a {
    padding: 1.5rem 1.5rem 0 1.5rem;
    margin-bottom: 2.4rem;

    .main-a-title {
      display: flex;

      .project {
        font-weight: bold;
        color: #464646;
        font-size: 2.2rem;
        line-height: 2.2rem;
        padding-right: 1.6rem;
        margin-right: 1.6rem;
        border-right: 1px solid #464646;
      }

      .date {
        font-size: 1.6rem;
        line-height: 2.2rem;
        color: #999999;
        font-weight: normal;
      }
    }

    .main-a-con {
      display: flex;
      justify-content: space-between;
      position: relative;
      overflow: hidden;

      .main-a-con-left {
        width: 50%;
        margin-top: 2rem;

        .userInfo {
          margin-bottom: 1.2rem;
          display: flex;
          line-height: 1.3;

          strong {
            font-size: 1.5rem;
            font-weight: bold;
            margin-right: 1rem;
            flex-shrink: 0;
          }

          span {
            font-size: 1.5rem;
          }
        }

        .fraction {
          margin-bottom: 2rem;

          strong {
            font-size: 6.4rem;
            color: #39bbbb;
            font-weight: bold;
          }

          span {
            font-size: 1.6rem;
            color: #999999;
            margin-left: 0.4rem;
          }
        }

        .score {
          margin-bottom: 1.2rem;

          i {
            padding-left: 2.22rem;
            background: url("@/assets/images/analysis/resultIcon.png") left center no-repeat;
            background-size: 1.6rem;
            font-size: 1.4rem;
            margin-right: 1.2rem;
          }

          strong {
            font-size: 2.4rem;
            color: #464646;
            font-weight: bold;
          }

          span {
            font-size: 1.6rem;
            color: #999999;
          }
        }

        .ranking {
          i {
            padding-left: 2.2rem;
            background: url("@/assets/images/analysis/rankingIcon.png") left center no-repeat;
            background-size: 1.6rem;
            font-size: 1.4rem;
            margin-right: 1.2rem;
          }

          strong {
            font-size: 2.4rem;
            color: #464646;
            font-weight: bold;
          }

          span {
            font-size: 1.6rem;
            color: #999999;
          }
        }
      }

      .main-a-con-right {
        width: 50%;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        .main-a-con-right-box {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          justify-content: center;
        }

        img {
          max-width: 88%;
          max-height: 16rem;
          position: relative;
          z-index: 1;
          margin-bottom: 11vw;
        }

        .svg-box {
          position: absolute;
          z-index: 0;
          width: 35vw;
          height: 35vw;
          transform: rotate(155deg);
          bottom: -12vw;

          .svg {
            display: block;
            width: 100%;
            height: 100%;
            transform: skewX(60deg);
          }
        }
      }

      .grade {
        width: 7.2rem;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -3.6rem;
        margin-top: -3.6rem;

        img {
          width: 100%;
        }
      }
    }
  }

  .main-b {
    padding: 0rem 1.5rem;
    margin-bottom: 4.4rem;

    .main-b-title {
      font-size: 1.6rem;
      color: #464646;
      margin-bottom: 3.2rem;
    }

    .main-b-con {
      display: flex;
      border-radius: 12rem;
      text-align: center;
      font-size: 1.2rem;
      color: #ffffff;
      position: relative;

      span {
        height: 2.3rem;
        line-height: 2.3rem;
      }

      .a {
        width: 60%;
        background: #dcdcdc;
        border-radius: 12rem 0 0 12rem;
      }

      .b {
        width: 20%;
        background: #ff8165;
      }

      .c {
        width: 10%;
        background: #f7b249;
      }

      .d {
        width: 10%;
        background: #39bbbb;
        border-radius: 0 12rem 12rem 0;
      }

      i {
        position: absolute;
        color: #999999;
        top: 2.8rem;
      }

      .scoreType {
        top: -2rem;
      }

      .branchA {
        left: 0;
      }

      .branchB {
        left: 60%;
        margin-left: -0.8rem;
      }

      .branchC {
        left: 80%;
        margin-left: -0.8rem;
      }

      .branchD {
        left: 90%;
        margin-left: -0.8rem;
      }

      .branchE {
        right: 0;
        left: auto !important;
      }

      .currentVal {
        position: absolute;
        height: 2.8rem;
        left: 0%;
        top: -3.2rem;
        border-radius: 0.8rem;
        color: #464646;
        width: 4rem;
        margin-left: -2rem;
        font-size: 1.4rem;
        font-weight: bold;
        background: #c9c9c990;
        display: flex;
        align-items: center;

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

        em {
          font-size: 1.2rem;
          color: #999999;
          font-weight: normal;
        }

        &::after {
          content: "";
          width: 0;
          height: 0;
          border-left: 1px solid transparent;
          border-right: 1px solid transparent;
          border-top: 2px solid #c9c9c990;
          position: absolute;
          top: 2.72rem;
          left: 50%;
          margin-left: -0.816rem;
        }
      }

      .currentDian {
        width: 0.26rem;
        height: 4.8rem;
        position: absolute;
        top: 50%;
        left: 0%;
        margin-top: -2.4rem;
        margin-left: -0.2rem;
        background: #464646;
        color: #464646;

        .chengji {
          position: absolute;
          top: 0px;

          span {
            position: absolute;
            top: -2.4rem;
            margin-left: -1.2rem;
            font-size: 1.6rem;
          }

          &::before {
            content: "";
            display: block;
            width: 0.8rem;
            height: 0.8rem;
            margin-left: -0.24rem;
            border-radius: 50%;
            background: #464646;
          }
        }

        .fenshu {
          position: absolute;
          bottom: 0px;

          span {
            position: absolute;
            bottom: -2.4rem;
            margin-left: -1.2rem;
            font-size: 1.6rem;
          }

          &::before {
            content: "";
            display: block;
            width: 0.8rem;
            height: 0.8rem;
            margin-left: -0.24rem;
            border-radius: 50%;
            background: #464646;
          }
        }
      }

      .drawingItem {
        display: flex;
        width: 100%;
      }
    }
  }

  .main-b-margintop {
    margin-top: 3.2rem;
  }

  .main-c {
    padding: 0rem 1.5rem 1.5rem 1.5rem;

    .column {
      margin-bottom: 2rem;

      .column-title {
        margin-bottom: 1.6rem;
        font-size: 2rem;
        color: #555555;
        font-weight: bold;
      }

      .column-con {
        padding: 1.2rem;
        background: #ffffff;
        border-radius: 1.2rem;
        font-size: 1.6rem;
        line-height: 1.6;

        .item {
          border-bottom: 1px solid #d2d2d2;
          margin-bottom: 1.6rem;
          padding-bottom: 1.2rem;

          .item-title {
            margin-bottom: 1.6rem;
            font-weight: bold;
            font-size: 1.88rem;
            color: #555555;
            display: flex;
            line-height: 1;

            i {
              padding: 0.2rem 0.4rem;
              font-size: 1.2rem;
              margin-left: 1.2rem;
              border-radius: 0.4rem;
              line-height: 1.4rem;
              color: #ffffff;
            }

            .you {
              background: #39bbbb;
            }

            .liang {
              background: #f7b249;
            }

            .cha {
              background: #ff8165;
            }
          }

          .item-title2 {
            padding: 0px;
            background: none;
          }

          .item-con {
            font-size: 1.6rem;
            color: #999999;

            .item-con-li {
              margin-bottom: 1.6rem;
              position: relative;

              .item-con-li-label {
                position: absolute;
                left: 1.2rem;
                top: 1.2rem;
                border-radius: 0.4rem;
                color: #ffffff;
                font-size: 1.2rem;
                padding: 0.12rem 0.8rem;
              }

              .item-con-li-label-bg1 {
                background: #39bbbb;
              }

              .item-con-li-label-bg2 {
                background: #ff8165;
              }

              .item-con-li-title {
                font-size: 1.84rem;
                margin-bottom: 1.2rem;
                color: #464646;
              }

              .item-con-li-con {
                font-size: 1.6rem;
                margin-bottom: 1.6rem;
                color: #999999;

                .item-con-li-con-val {
                  display: flex;
                  justify-content: space-around;

                  .item-con-li-con-val-li-name1 {
                    font-size: 1.6rem;
                    padding-bottom: 0.9rem;
                    display: inline;
                    border-bottom: 2px solid #ff8165;
                    position: relative;

                    &::after {
                      content: "";
                      width: 0.8rem;
                      height: 0.8rem;
                      border-radius: 100%;
                      background: #ff8165;
                      left: 0;
                      bottom: -0.52rem;
                      position: absolute;
                    }

                    &::before {
                      content: "";
                      width: 0.8rem;
                      height: 0.8rem;
                      border-radius: 100%;
                      background: #ff8165;
                      right: 0;
                      bottom: -0.52rem;
                      position: absolute;
                    }
                  }

                  .item-con-li-con-val-li-name2 {
                    font-size: 1.6rem;
                    padding-bottom: 0.8rem;
                    display: inline;
                    border-bottom: 2px solid #39bbbb;
                    position: relative;

                    &::after {
                      content: "";
                      width: 0.8rem;
                      height: 0.8rem;
                      border-radius: 100%;
                      background: #39bbbb;
                      left: 0;
                      bottom: -0.52rem;
                      position: absolute;
                    }

                    &::before {
                      content: "";
                      width: 0.8rem;
                      height: 0.8rem;
                      border-radius: 100%;
                      background: #39bbbb;
                      right: 0;
                      bottom: -0.52rem;
                      position: absolute;
                    }
                  }

                  .item-con-li-con-val-li-con {
                    font-weight: bold;
                    font-size: 2rem;
                    display: block;
                    padding-top: 1.2rem;
                    color: #555555;
                    text-align: center;
                  }
                }

                .item-con-li-con-strong {
                  font-weight: 350;
                  margin-bottom: 0.4rem;
                  color: #666666;
                }
              }
            }
          }
        }

        .item:last-child {
          margin-bottom: 0;
          padding: 0;
          border: none;
        }
      }

      video {
        width: 100%;
        background: #ffffff;
      }

      img {
        max-width: 100%;
      }

      table {
        max-width: 100%;
      }
    }

    .tip {
      font-size: 1.4rem;
      color: #999999;
      line-height: 1.6;

      a {
        color: #555555;
      }
    }

    .bigImg {
      width: 100%;
    }
  }
}
</style>