xjc-vue/src/views/xjc-integratedmachine/environment/contrast_major.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 :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
            <img v-if="threePage" src="@/assets/images/environment/score-h.png">
            <img v-else src="@/assets/images/environment/score.png">
            专业解读
          </div>
          <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
            <img v-if="fourPage" src="@/assets/images/environment/score-h.png">
            <img v-else src="@/assets/images/environment/score.png">
            就业前景与方向
          </div>
          <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
            <img v-if="fivePage" 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.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 style="text-align: center">{{ item.code }}</p>
              </td>
            </tr>
            <tr>
              <td>学科门类</td>
              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
                <p style="text-align: center">{{ item.subjectcategories }}</p>
              </td>
            </tr>
            <tr>
              <td>一级学科</td>
              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
                <p style="text-align: center">{{ item.firstsubject }}</p>
              </td>
            </tr>
            <tr>
              <td>授权学位</td>
              <td v-for="(item,index) in contrastData" :key="index" >
                <p>{{ item.degree }}</p>
                </td>
            </tr>
            <tr>
              <td>修学年限</td>
              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.years }}</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.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 style="text-align: center" v-html="item.course"></p>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="three-page" v-show="threePage">
          <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.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">
                <div class="info" v-if="!item.describe"  v-html="item.describe"></div>
                <div class="info" v-else >暂无</div>

<!--                <p style="text-align: center" >{{ item.code }}</p>-->
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="four-page" v-show="fourPage">
          <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.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">
                <div class="info"  v-html="item.describe"></div>
                <!--                <p style="text-align: center" >{{ item.code }}</p>-->
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="five-page" v-show="fivePage">
          <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.name }}</td>
            </tr>
            </thead>
            <tbody>
            <tr v-show="false"></tr>
            <tr class="two-tr">
              <td>开设院校</td>
              <td class="school-box" v-for="(item,index) in contrastData" :key="index">
                <div class="info"  v-for="(item,index) in item.kaishe_list">
                  {{ item.name }}
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <drag_component></drag_component>
    </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} from "@/api/xjc-integratedmachine/environment/university.js";


const router = useRouter()

const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const fourPage = ref(false)
const fivePage = 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'
  }
}

//切换tabs
const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
    fourPage.value = false;
    fivePage.value = false;
  }else if (val === 4) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = true;
    fivePage.value = false;
  }else if (val === 5) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.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('majorList') && JSON.parse(sessionStorage.getItem('majorList'));
  contrastData.value = contrastList;
  console.log("{{contrastA.name}}", contrastData.value)
}

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_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
} = proxy.useDict('gk_province', 'educationlevel', 'school_category', 'characteristic', 'property')


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
  })
}

onMounted(() => {
  setHeadinfo()
  getData()
  const contrastData = JSON.parse(sessionStorage.getItem('contrastList'));
  if (contrastData) {
    contrastList.value = contrastData
  }
})
</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;
      overflow: auto;
      .one-page {
        display: flex;
        justify-content: center;
        align-items: center;

        .table {
          width: 1526px;
          height: 887px;
          margin-top: 25px;
          tr>td{
            height:119px !important;
          }
          tr:nth-child(1) {
            font-weight: 400;
            font-size: 32px;
            color: #FFFFFF;
            text-align: center;

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

            }

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

            td:nth-child(3) {
              width: 616px;
              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) {
              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;
              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;
              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;
              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;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border-bottom: 8px solid #E0EEF4;
              border-right: 8px solid #E0EEF4;
            }

            td:nth-child(3) {
              width: 620px;
              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;
              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;
              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;
              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;
              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;
              border-right: 8px solid #E0EEF4;
              border-bottom: 8px solid #E0EEF4;
              font-weight: 400;
              font-size: 32px;
              color: #333333;
              line-height: 52px;
              text-align: center;
            }

            td:nth-child(3) {
              width: 290px;
              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;
              text-align: center;
            }
          }
          tr:nth-child(6) {
            td:nth-child(1) {
              width: 290px;
              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;
              text-align: center;
            }

            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;
              text-align: center;
            }
          }
          .school-level-box {
            display: flex;
            justify-content: left;
            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 {
            width: 300px;
            .text-td-p {
              display: flex;
            }
          }
        }
      }

      .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: 100px;
              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;
            }
          }


          .text-td {
            text-align: center;

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

      }
       .three-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: 100px;
               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;
             }
           }


           .text-td {
             text-align: center;

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

       }
      .four-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: 100px;
              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;
            }
          }


          .text-td {
            text-align: center;

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

      }
      .five-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: 100px;
              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;
              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;
              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;
            }
            .school-box{
               //display: flex;
               //justify-content: space-around;
              //flex-wrap: wrap;
               .info{
                 //width: 200px;
                 //height: 200px;
                 margin-left: 30px;
               }
            }
          }


          .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>