xjc-vue/src/views/xjc-integratedmachine/environment/contrast_university.vue

<template>
  <div class="contrast_university">
    <head-component :headinfo=headinfo @backTo="backTo"></head-component>
    <div class="page-content">
      <div class="content-left">
        <div class="tab-box">
          <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
            <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
            <img v-else src="@/assets/images/environment/condition-search.png">
            院校数据
          </div>
          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
            <img v-else src="@/assets/images/environment/score.png">
            录取分数线
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="one-page" v-show="onePage">
          <table class="table table-bordered">
            <thead>
            <tr class="one-tr">
              <td class="first-title">大学名称</td>
              <td v-for="(item,index) in contrastData" :key="index">{{ item.university.name }}</td>
            </tr>
            </thead>
            <tbody>
            <tr v-show="false"></tr>
            <tr class="two-tr">
              <td>基本信息</td>
              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
                <p>创建时间：<span>{{ item.university.ctime }}</span></p>
                <p>所在地区：<span>{{ item.university.areaname }}</span></p>
                <p>院校隶属：<span>{{ item.university.subjection }}</span></p>
                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category"
                                                                :value="item.university.categoryid"/></span></p>
              </td>
            </tr>
            <tr>
              <td>院校特色</td>
              <td v-for="(item,index) in contrastData" :key="index">
                <div class="school-level-box">
                  <p class="school-level" style="background-color: #B3FC7C" v-show="item.university.nef==='1'">
                    985</p>
                  <p class="school-level" style="background-color: #BBF88D" v-show="item.university.too==='1'">
                    211</p>
                  <p class="school-level" style="background-color: #8CE349"
                     v-show="item.university.istopschool==='1'">
                    一流大学</p>
                  <p class="school-level" style="background-color: #9DFF51"
                     v-show="item.university.istopsubject==='1'">
                    一流学科</p>
                  <p class="school-level" style="background-color: #8ADFC4" v-show="item.university.self==='1'">
                    强</p>
                  <p class="school-level" style="background-color: #1EC590"
                     v-show="item.university.graduate==='1'">研</p>
                </div>
              </td>
            </tr>
            <tr>
              <td>学校性质</td>
              <td v-for="(item,index) in contrastData" class="text-td ">
                <dict-tag :options="property" :value="item.university.property"/>
              </td>
            </tr>
            <tr>
              <td>学校地址</td>
              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.university.address }}
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="two-page" v-show="twoPage">
          <table class="table table-bordered">
            <thead>
            <tr class="one-tr">
              <td class="first-title">大学名称</td>
              <td v-for="(item,index) in contrastData" :key="index">{{ item.university.name }}</td>
            </tr>
            </thead>
            <tbody>
            <tr v-show="false"></tr>
            <tr class="two-tr">
              <td style="border-bottom: 8px solid #E0EEF4;">录取分数线
                <el-select v-model="dbForm.area" placeholder="选择高考省份" style="width: 240px">
                  <el-option
                      v-for="dict in gk_province"
                      :key="dict.value" :value="dict.value"
                      :label="dict.label"
                  />
                </el-select>
                <el-select v-model="dbForm.category" placeholder="选择分科" style="width: 240px">
                  <el-option
                      v-for="dict in candidate_category"
                      :key="dict.value" :value="dict.value"
                      :label="dict.label"
                  />
                </el-select>
                <button @click="dbResult">对比结果</button>
              </td>
              <td style="width: 616px;height: 760px;border-bottom: 8px solid #E0EEF4;">
                <div style="width: 616px;height: 760px; display: flex;flex-direction: column;overflow: auto">
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                </div>
              </td>
              <td style="width: 616px;height: 760px;border-bottom: 8px solid #E0EEF4;">
                <div style="width: 616px;height: 760px; display: flex;flex-direction: column;overflow: auto">
                  <div class="score-box" v-for="(item,index) in dbData.university1" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                  <div class="score-box" v-for="(item,index) in dbData.university0" :key="index">
                    <p>年份：<span>{{ item.years }}</span></p>
                    <p>录取批次：<span>{{ item.batchname }}</span></p>
                    <p>最低分：<span>{{ item.lowscore }}</span></p>
                    <p class="text-td-p">最低分位次：<span>  {{ item.totalorder }}</span></p>
                  </div>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
          <!--                    对比 孙一石-->


        </div>


      </div>
      <drag_component></drag_component>
    </div>
    <div>
      <!--院校属地-->
      <el-dialog v-model="showAreaChoose" width="1000px" append-to-body>
        <div class="dialog-box">
          <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">
            <p>
              {{ dict.label }}
            </p>
          </div>
        </div>
      </el-dialog>    </div>
    <div>
      <!--学历层次-->
      <el-dialog v-model="showEducationlevel" width="1000px" append-to-body>
        <div class="dialog-box dialog-box2">
          <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
            <p>
              {{ dict.label }}
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <!--特色-->
      <el-dialog v-model="showCharacteristic" width="1000px" append-to-body>
        <div class="dialog-box">
          <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
            <p>
              {{ dict.label }}
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {ref} from "vue";
import {
  getUniversityByKeyword,
  getScoreInfo,
  universityDetail
} from "@/api/xjc-integratedmachine/environment/university.js";
import {getCompareList} from "@/api/xjc-integratedmachine/environment/common.js";
import {occupationDetail} from "@/api/xjc-integratedmachine/environment/occupation.js";


const router = useRouter()

const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const contrastList = ref(false)

const form = ref({
  areaid: null,
  areaname: null,
  educationlevel: null,
  educationlevelName: null,
  characteristic: null,
  characteristicName: null,
  name: null
})
const keyInput = ref(false);
const headinfo = ref({})

function setHeadinfo() {
  headinfo.value = {
    title: '高校信息查询',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl: '/xjc-integratedmachine/environment/index',
    homeUrl: '/xjc-integratedmachine/environment/index',
    contrastPage:true,
    contrastType:'university'
  }
}

//切换tabs
const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
  }
}

function jumpTo(path) {
  router.push({
    path: path,
    query: {name: 123}
  })
}

function backTo() {
  sessionStorage.removeItem('contrastA');
  sessionStorage.removeItem('contrastB');
}

onMounted(() => {
  setHeadinfo()

})

const contrastData = ref({})

// function getData() {
//   // const contrastList = sessionStorage.getItem('contrastList') && JSON.parse(sessionStorage.getItem('contrastList'));
//   // contrastData.value = contrastList;
//   // console.log("{{contrastA.name}}", contrastData.value)
//
// }
function getData() {
  getCompareList({
    type:'1'
  }).then(resp => {
    contrastData.value = resp.rows
  })
}
const universityList = ref([])

// 定义一个函数，用于将关键词变为红色
function highlightKeywords(text, keywords) {
  // 遍历关键词列表
  keywords.forEach(keyword => {
    // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
    // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
    console.log("keywords", keywords)
    let regex = new RegExp(keyword, 'g');
    text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
    console.log("text", text)
  });
  return text;
}

function byKeyword() {
  getUniversityByKeyword(form.value).then(resp => {
    resp.list.map(item => {
      item.selected = false;
      let keyWord = form.value.name
      item.name = highlightKeywords(item.name, [keyWord]);
      console.log(" item.name", item.name)
      // 遍历数据数组，并处理每个字符串
    })

    universityList.value = resp.list
  })
}


function toDetail(row) {
  router.push({
    path: '/xjc-integratedmachine/environment/university/university_details_video',
    query: {
      id: row.id,
      name: row.name,
    }
  })
}


const tab = ref("tj")

function changeTab(path) {
  tab.value = path
}


const showAreaChoose = ref(false)
const showEducationlevel = ref(false)
const showCharacteristic = ref(false)

const {proxy} = getCurrentInstance()
const {
  gk_province,
  educationlevel,
  characteristic,
  school_category,
  property,
  candidate_category
} = proxy.useDict('gk_province', 'educationlevel', 'school_category', 'characteristic', 'property', 'candidate_category')


function showAreaChooseHandler() {
  showAreaChoose.value = true
}

function chooseArea(item) {
  form.value.areaid = item.value
  form.value.areaname = item.label
  showAreaChoose.value = false
}

function showEducationlevelHandler() {
  showEducationlevel.value = true
}

function chooseEducationlevel(item) {
  form.value.educationlevel = item.value
  form.value.educationlevelName = item.label
  showEducationlevel.value = false
}

function showCharacteristicHandler() {
  showCharacteristic.value = true
}

function chooseCharacteristic(item) {
  form.value.characteristic = item.value
  form.value.characteristicName = item.label
  showCharacteristic.value = false
}

function search() {
  router.push({
    path: '/xjc-integratedmachine/environment/university_list',
    query: form.value
  })
}

//对比 孙一石 2025-08-15
const dbForm = ref({})
const dbData = ref({})

function dbResult(e) {
  let univercity = contrastData.value
  if (univercity.length != 2) {
    alert("选择2个学校啊,现在是" + univercity.length)
  } else {
    dbForm.value.university0 = univercity[0].oldid
    dbForm.value.university1 = univercity[1].oldid
  }
  getScoreInfo(dbForm.value).then(resp => {
    console.log(resp)
    dbData.value = resp;
  })
}

onMounted(() => {
  setHeadinfo()
  getData()
  // const contrastData = JSON.parse(sessionStorage.getItem('contrastList'));
  // if (contrastData) {
  //   contrastList.value = contrastData
  // }
  // dbResult();
})
</script>


<style scoped lang="scss">
p, div {
  margin: 0;
  padding: 0;
}

.contrast_university {
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index: 10;
  width: 100%;
  height: 1080px;

  .page-content {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    display: flex;
    justify-content: space-between;

    .content-left {
      width: 244px;
      height: 957px;
      background: rgba(255, 255, 255, 0.26);

      ::v-deep .el-menu-item .is-active {
        background: red !important;
      }

      .item-box {
        width: 244px;
        height: 80px;
        color: #B3B3B3;
        display: flex;
        align-items: center;
        margin-right: 5px;
        font-weight: bold;
        font-size: 20px;
        background: #C8FFED;

        img {
          width: 28px;
          height: 28px;
          margin-right: 10px;
          margin-left: 40px;
        }
      }

      .item-box-active {
        width: 244px;
        height: 80px;
        background: #1EC590;
        font-weight: bold;
        font-size: 20px;
        display: flex;
        color: #FFFFFF;
        line-height: 40px;
        margin-right: 5px;
        align-items: center;

        img {
          width: 28px;
          height: 28px;
          margin-right: 10px;
          margin-left: 40px;
        }
      }
    }

    .content-right {
      width: 1615px;
      height: 926px;
      background: #FFFFFF;
      border-radius: 35px 35px 35px 35px;
      margin-top: 13px;
      margin-right: 24px;

      .one-page {
        display: flex;
        justify-content: center;
        align-items: center;

        .table {
          width: 1526px;
          height: 887px;
          margin-top: 25px;

          tr:nth-child(1) {
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            text-align: center;

            td:nth-child(1) {
              width: 290px;
              height: 100px;
              background: #1E410E;
              border-radius: 32px 4px 4px 4px;
              border: 8px solid #E0EEF4;

            }

            td:nth-child(2) {
              width: 620px;
              height: 100px;
              background: #1EC590;
              border-top: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
            }

            td:nth-child(3) {
              width: 616px;
              height: 119px;
              background: #8CE349;
              border-radius: 4px 32px 4px 4px;
              border-top: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;

            }
          }

          tr:nth-child(2) {
            td:nth-child(1) {
              height: 290px;
              border-radius: 0px 0px 0px 0px;
              background: #1E410E;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              text-align: center;
            }

            td:nth-child(2) {
              width: 620px;
              height: 290px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              //border-top: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }

            td:nth-child(3) {
              width: 620px;
              height: 290px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }
          }

          tr:nth-child(3) {
            td:nth-child(1) {
              width: 290px;
              height: 180px;
              background: #1E410E;
              border-radius: 4px 4px 4px 4px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              text-align: center;
            }

            td:nth-child(2) {
              width: 620px;
              height: 210px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
            }

            td:nth-child(3) {
              width: 620px;
              height: 210px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
            }
          }

          tr:nth-child(4) {
            td:nth-child(1) {
              width: 290px;
              height: 110px;
              background: #1E410E;
              border-radius: 4px 4px 4px 4px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              line-height: 16px;
              text-align: center;
            }

            td:nth-child(2) {
              width: 620px;
              height: 119px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }

            td:nth-child(3) {
              width: 620px;
              height: 119px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }
          }

          tr:nth-child(5) {
            td:nth-child(1) {
              width: 290px;
              height: 100px;
              background: #1E410E;
              border-radius: 4px 4px 4px 32px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              line-height: 16px;
              text-align: center;
            }

            td:nth-child(2) {
              width: 290px;
              height: 100px;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }

            td:nth-child(3) {
              width: 290px;
              height: 100px;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              border-radius: 4px 4px 32px 4px;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }
          }

          .school-level-box {
            display: flex;
            justify-content: left;
            //margin-top: 32px;
            flex-wrap: wrap;
            width: 620px;
            padding-left: 30px;

            .school-level {
              margin-right: 20px;
              width: 174px;
              height: 54px;
              background: #B3FC7C;
              border-radius: 5px 5px 5px 5px;
              font-weight: bold;
              font-size: 20px;
              color: #000000;
              line-height: 54px;
              text-align: center;
              margin-top: 10px;
            }
          }

          .text-td {
            //text-align: center;
            width: 300px;
            //border: 1px solid;
            padding-left: 150px;

            .text-td-p {
              display: flex;
              //justify-content: center;
            }
          }
        }
      }

      .two-page {
        display: flex;
        flex-direction: column;
        align-items: center;

        .table {
          width: 1526px;
          height: 887px;
          margin-top: 25px;

          .one-tr {
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            text-align: center;

            td:nth-child(1) {
              width: 290px;
              height: 100px;
              background: #1E410E;
              border-radius: 32px 4px 4px 4px;
              border: 8px solid #E0EEF4;

            }

            td:nth-child(2) {
              width: 620px;
              height: 100px;
              background: #1EC590;
              border-top: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
            }

            td:nth-child(3) {
              width: 616px;
              height: 119px;
              background: #8CE349;
              border-radius: 4px 32px 4px 4px;
              border-top: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;

            }
          }

          .two-tr {
            td:nth-child(1) {
              height: 290px;
              border-radius: 0px 0px 0px 0px;
              background: #1E410E;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              //border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              text-align: center;
            }
            td:nth-child(2) {
              width: 620px;
              height: 290px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              //border-top: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              //border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;

              .score-box{
                width: 610px;
                height: 287px;
                background: #FFFFFF;
                border-radius: 4px 4px 4px 4px;
                border-bottom: 8px solid #E0EEF4;
                //border-right: 8px solid #E0EEF4;
                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
              }
              .score-box:last-child{
                border-bottom: none;
                width: 610px;
                height: 287px;
                background: #FFFFFF;
                border-radius: 4px 4px 4px 4px;
                border-bottom: 8px solid #E0EEF4;
                //border-right: 8px solid #E0EEF4;
                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;

              }
            }

            td:nth-child(3) {
              width: 620px;
              height: 760px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
              display: flex;
              flex-direction: column;
              .score-box{
                width: 610px;
                height: 287px;
                background: #FFFFFF;
                border-radius: 4px 4px 4px 4px;
                border-bottom: 8px solid #E0EEF4;
                //border-right: 8px solid #E0EEF4;
                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
              }
            }

          }

          tr:nth-child(3) {
            td:nth-child(1) {
              width: 290px;
              height: 180px;
              background: #1E410E;
              border-radius: 4px 4px 4px 4px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              //border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              text-align: center;
            }

            td:nth-child(2) {
              width: 620px;
              height: 210px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
            }

            td:nth-child(3) {
              width: 620px;
              height: 210px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
            }
          }

          tr:nth-child(4) {
            td:nth-child(1) {
              width: 290px;
              height: 110px;
              background: #1E410E;
              border-radius: 4px 4px 4px 4px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              //border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              line-height: 16px;
              text-align: center;
            }

            td:nth-child(2) {
              width: 620px;
              height: 119px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }

            td:nth-child(3) {
              width: 620px;
              height: 119px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }
          }

          tr:nth-child(5) {
            td:nth-child(1) {
              width: 290px;
              height: 100px;
              background: #1E410E;
              border-radius: 4px 4px 4px 32px;
              border-left: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
              //border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #FFFFFF;
              line-height: 16px;
              text-align: center;
            }

            td:nth-child(2) {
              width: 290px;
              height: 100px;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }

            td:nth-child(3) {
              width: 290px;
              height: 100px;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              border-radius: 4px 4px 32px 4px;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
            }
          }

          .school-level-box {
            display: flex;
            justify-content: left;
            //margin-top: 32px;
            flex-wrap: wrap;
            width: 620px;
            padding-left: 30px;

            .school-level {
              margin-right: 20px;
              width: 174px;
              height: 54px;
              background: #B3FC7C;
              border-radius: 5px 5px 5px 5px;
              font-weight: bold;
              font-size: 20px;
              color: #000000;
              line-height: 54px;
              text-align: center;
              margin-top: 10px;
            }
          }

          .text-td {
            text-align: center;

            .text-td-p {
              display: flex;
              justify-content: center;
            }
          }
        }

      }
    }
  }

}

.dialog-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    //border: 1px solid;

  }

  p {
    min-width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    height: 60px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    text-align: center;
    line-height: 60px;
    border-radius: 10px;
  }
}

.dialog-box2 {
  display: flex;
  justify-content: space-around;
}
</style>