xjc-vue/src/views/xjc-integratedmachine/plan/develop_career_plan1.vue

<template>
    <div class="main">
        <div class="top">
            <head-component :headinfo=headinfo></head-component>
        </div>
        <div class="center">
            <div class="left">
                <el-menu>
                    <el-submenu index="1">
                        <span>自我认知</span>
                        <el-menu-item>兴趣</el-menu-item>
                        <el-menu-item>能力</el-menu-item>
                        <el-menu-item>职业价值观</el-menu-item>
                        <el-menu-item>聚焦职业方向</el-menu-item>
                        <el-menu-item>优势学科</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <span>环境探索</span>
                        <el-menu-item>行业分析</el-menu-item>
                        <el-menu-item>职业分析</el-menu-item>
                        <el-menu-item>专业分析</el-menu-item>
                        <el-menu-item>高校分析</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="right"></div>
        </div>
    </div>


    <!--<div style="display: flex;flex-direction: row;">-->
    <!--<div style="width:500px;">-->
    <!--<div>-->
    <!--<p>自我认知&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
    <!--<p @click="showTab(0)">兴趣</p>-->
    <!--<p @click="showTab(1)">能力</p>-->
    <!--<p @click="showTab(2)">职业价值观</p>-->
    <!--<p @click="showTab(3)">聚焦职业方向</p>-->
    <!--<p @click="showTab(4)">科学优势</p>-->
    <!--</div>-->
    <!--<div>-->
    <!--<p>环境探索-&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
    <!--<p @click="showTab(5)">行业分析</p>-->
    <!--<p @click="showTab(6)">职业分析</p>-->
    <!--<p @click="showTab(7)">专业分析</p>-->
    <!--<p @click="showTab(8)">高校分析</p>-->
    <!--</div>-->
    <!--<div>-->
    <!--<p>选科-&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
    <!--<p @click="showTab(9)">目标职业专业</p>-->
    <!--<p @click="showTab(10)">选科方案</p>-->
    <!--</div>-->
    <!--<div>-->
    <!--<p>目标-&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
    <!--<p @click="showTab(11)">短期目标（高中阶段）</p>-->
    <!--<p @click="showTab(12)">中期目标</p>-->
    <!--<p @click="showTab(13)">长期目标</p>-->
    <!--</div>-->
    <!--<div>-->
    <!--<p>问题与策略-&#45;&#45;&#45;&#45;&#45;&#45;</p>-->
    <!--<p @click="showTab(14)">要解决的问题</p>-->
    <!--<p @click="showTab(15)">我的解决策略</p>-->
    <!--<p @click="showTab(16)">可立即实现的</p>-->
    <!--</div>-->
    <!--</div>-->


    <!--<div>-->
    <!--<div v-show="tabs[0]">-->
    <!--自我分析：-->
    <!--<el-input v-model="form.selfinterest" type="textarea"-->
    <!--placeholder="例如：我对人感兴趣，想了解人类的心理和行为，探索人性的奥秘；我喜欢和人打交道的工作，希望用自己的力量帮助他人；我比较喜欢关注社会问题和价值，对事物的观察也比较细致。"-->
    <!--rows="20" cols="100"></el-input>-->
    <!--<br>-->
    <!--霍兰德职业兴趣测评中，我得分最高的前三项类型依次是（CESAIR）：-->
    <!--<div>-->
    <!--{{content.interest_careerplan1}}-->
    <!--</div>-->
    <!--<div>-->
    <!--特征描述<br>-->
    <!--{{content.interest_detail}}-->
    <!--</div>-->
    <!--</div>-->
    <!--<div v-show="tabs[1]">-->
    <!--自我分析-->
    <!--<el-input v-model="form.selfability" type="textarea"-->
    <!--placeholder="例如：我大多数情况下都能够保持积极平和的心态，当遇到压力、人际冲突、生活困扰等问题时能较快地通过一些有效的方式来调节自己的情绪；我比较擅长和人沟通，和家人朋友都能和谐融洽地相处；我对人的情绪变化比较敏感，通常都能较快发现他人的情绪波动并灵活应对和处理。"-->
    <!--rows="20" cols="100"></el-input>-->
    <!--<br>-->
    <!--多元智能测评中，我的优势智能有（从高到低）：-->
    <!--</div>-->
    <!--<div v-show="tabs[2]">-->
    <!--自我分析:-->
    <!--<el-input v-model="form.selfvalue" type="textarea"-->
    <!--placeholder="例如：我喜欢比较单纯一些的工作环境和工作关系，希望未来的职场氛围是比较轻松和谐的，不想总是被复杂的人际关系分散精力；也希望能在工作岗位上做自己喜欢做的事，体现自己的价值、提升自己的能力，如果在这个过程中能帮助到他人，就更好了。"-->
    <!--rows="20" cols="100"></el-input>-->
    <!--<br>-->
    <!--职业价值观测评中，我较看重的价值观有（从高到低）-->
    <!--</div>-->
    <!--<div v-show="tabs[3]">-->
    <!--聚焦职业方向:<br>-->
    <!--<el-input v-model="form.careergoals" type="textarea"-->
    <!--placeholder="例如：基于兴趣、多元智能、职业价值观的探索和测评报告，以及课内外学习和探索，我希望对教师职业有进一步探索，并觉得这是自己未来的职业方向。"></el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[4]">-->
    <!--优势学科<br>-->
    <!--<div v-if="content.selectstyle == '2'">-->
    <!--优势学科测评中，我首选科目的相对优势学科为：-->
    <!--</div>-->
    <!--<div v-if="content.selectstyle == '3'">-->
    <!--优势学科测评中，我相对优势学科为：-->
    <!--</div>-->
    <!--{{content.ys_careerplan1}}-->
    <!--</div>-->
    <!--<div v-show="tabs[5]">-->
    <!--行业分析:<br>-->
    <!--<el-input v-model="form.industryanalysis" type="textarea"-->
    <!--placeholder="例如：教育行业是一个与国家发展和人才培养密切相关的行业，随着互联网技术的发展和政策的支持，呈现出多元化、个性化、智能化的特点。通过我对学校的调研发现，学校的教师队伍存在着老龄化问题，学校的骨干教师、高级教师中，有大约20%-30%的人将在未来十年内退休。这对于学校的教育质量是一个严峻挑战，对于我和其他有志于加入教师队伍的人来说是一个机遇。这意味着近十年内，学校将面临着较大规模的新教师需求，通过培养大量的年轻教师成为专业教师，保障学校教育的高质量发展。"></el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[6]">-->
    <!--职业分析:<br>-->
    <!--<el-input v-model="form.careeranalysis" type="textarea"-->

    <!--placeholder="例如：基于对国家政策和个人志趣的分析，我准备做一名学校心理健康教育专任教师。首先教师这个职业一直以来比较受到社会的尊重和支持，享有较高的社会地位，工作环境也比较好。随着经济社会快速发展，学生成长环境不断变化，叠加新冠疫情影响，学生心理健康问题更加凸显，心理健康教育愈加重要。然而目前各地心理健康教育的发展水平和重视程度不一，部分学校仅配备了一名专职心理教师，有的学校甚至只有兼职心理教师，心理教师缺口仍旧较大。且为了促进学生身心健康、全面发展，提升学生心理健康素养，近期教育部、中央宣传部等17部委联合印发《全面加强和改进新时代学生心理健康工作专项行动计划（2023—2025年）》，强调要切实把心理健康工作摆在更加突出的位置。这意味着心理健康工作成为促进人的发展的重要工作，对应聘者来说，未来学校对于心理教师的需求将会增加，就业前景较好，但应聘者本人需要具备较高的专业水平和素养，不断增强自身实力，以提升自己的竞争力。"></el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[7]">-->
    <!--专业分析:<br>-->
    <!--<el-input v-model="form.majoranalysis" type="textarea"-->

    <!--placeholder="例如：心理学专业的培养目标是培养具备心理学的基本理论、基本知识、基本技能，能在科研部门、高等和中等学校、中小学等从事心理学科学研究、教学工作和管理工作的高级专门人才，分为心理学和应用心理学两个专业方向。心理学专业的就业范围目前已经有了很大的选择空间，特别是一线城市对心理学的认可度已经非常高，需求明显。随着国家政策的普及，社会各界尤其是学校对心理健康的重视程度不断提高，心理学专业的需求将更加明显，心理学专业的毕业生可以在多个领域发挥自己的专长和价值，例如中小学教育、医疗、咨询、法律、社会服务、人力资源、市场营销等。总的来说，这是一个有挑战也有机遇的专业。我比较喜欢学习这个专业。从作为一名学校心理健康教师出发，应用心理学专业更适合我的专业选择。"></el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[8]">-->
    <!--高校分析:<br>-->
    <!--<el-input v-model="form.unianalysis" type="textarea"-->

    <!--placeholder="例如：全国共有70余所本科高校开设心理学专业，包括不少“双一流大学”。在教育部心理学学科评估中排名靠前的有北京师范大学、北京大学、华南师范大学、华东师范大学、西南大学等。加上地域因素的考量，我会更偏向北京和上海的高校。"></el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[9]">-->
    <!--目标、职业、专业与大学-->
    <!--<div v-if="content.careerplan != null">-->
    <!--职业:-->
    <!--<el-input v-model="form.careergoal1" placeholder="例如：心理教师"></el-input>-->
    <!--职业:-->
    <!--<el-input v-model="form.careergoal2" placeholder="例如：心理教师"-->
    <!--&gt;</el-input>-->
    <!--职业:-->
    <!--<el-input v-model="form.careergoal3" placeholder="例如：心理教师"-->
    <!--&gt;</el-input>-->

    <!--专业:-->
    <!--<el-input v-model="form.majorgoal1" placeholder="例如：心理学"-->
    <!--&gt;</el-input>-->
    <!--专业:-->
    <!--<el-input v-model="form.majorgoal2" placeholder="例如：心理学"-->
    <!--&gt;</el-input>-->
    <!--专业:-->
    <!--<el-input v-model="form.majorgoal3" placeholder="例如：心理学"-->
    <!--&gt;</el-input>-->

    <!--大学:-->
    <!--<el-input v-model="form.unigoal1" placeholder="例如：北京大学"-->
    <!--&gt;</el-input>-->
    <!--大学:-->
    <!--<el-input v-model="form.unigoal2" placeholder="例如：北京大学"-->
    <!--&gt;</el-input>-->
    <!--大学:-->
    <!--<el-input v-model="form.unigoal3" placeholder="例如：北京大学"-->
    <!--&gt;</el-input>-->

    <!--选考要求:-->
    <!--<el-input v-model="form.mustselect1" placeholder="例如：物理、化学，必选"-->
    <!--&gt;</el-input>-->
    <!--选考要求:-->
    <!--<el-input v-model="form.mustselect2" placeholder="例如：物理、化学，必选"-->
    <!--&gt;</el-input>-->
    <!--选考要求:-->
    <!--<el-input v-model="form.mustselect3" placeholder="例如：物理、化学，必选"-->
    <!--&gt;</el-input>-->

    <!--</div>-->
    <!--</div>-->
    <!--<div v-show="tabs[10]">-->
    <!--综合多方面因素，我科目选择：-->
    <!--<el-input v-model="form.selectstrategy" placeholder="例如：物理+化学+政治"></el-input>-->

    <!--</div>-->


    <!--<div v-show="tabs[11]">-->
    <!--<el-input v-model="form.goalshortterm" type="textarea"-->
    <!--placeholder="例如：本科阶段认真学习专业知识，为以后读研和工作打下扎实的基础；积极参加社会实践；顺利毕业并获得学士学位。计划读研，方向为应用心理学，研究生阶段完成专业课程和选修课程学习；积极参加课题研究，争取发表高质量论文；顺利毕业并获得硕士学位。">-->
    <!--</el-input>-->

    <!--<div>-->
    <!--高一目标：-->
    <!--<el-input v-model="form.goalgrade1"-->
    <!--type="textarea"-->
    <!--placeholder="例如：快速适应高中学习和生活，踏踏实实打好基础。根据自己的实际情况，从职业理想出发，我的选科组合定为物理+化学+政治。">-->
    <!--</el-input>-->
    <!--高二目标：-->

    <!--<el-input v-model="form.goalgrade2"-->
    <!--type="textarea"-->
    <!--placeholder="例如：寻求更好的学习方法，力争进入班级前5，年级前100，顺利通过会考，尽全力取得更好的成绩；参加心理、生涯等社团活动，开展研究性学习，学习心理健康知识和技能，提高自己的心理素质和抗压能力。">-->
    <!--</el-input>-->

    <!--高三目标：-->
    <!--<el-input v-model="form.goalgrade3"-->
    <!--type="textarea"-->
    <!--placeholder="例如：全力冲刺高考，争取考入目标院校和专业；利用在社团活动中积累的经验和技能，协助心理老师在班级开展心理减压、情绪调节等活动，在此过程中总结经验、反思不足，锻炼自己的专业素养和实践能力，为未来的专业选择和职业发展做好准备。">-->
    <!--</el-input>-->
    <!--</div>-->


    <!--</div>-->

    <!--<div v-show="tabs[12]">-->
    <!--<el-input v-model="form.goalmidterm" type="textarea"-->

    <!--placeholder="例如：本科阶段认真学习专业知识，为以后读研和工作打下扎实的基础；积极参加社会实践；顺利毕业并获得学士学位。计划读研，方向为应用心理学，研究生阶段完成专业课程和选修课程学习；积极参加课题研究，争取发表高质量论文；顺利毕业并获得硕士学位。">-->
    <!--</el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[13]">-->
    <!--<el-input v-model="form.goallongterm" type="textarea"-->

    <!--placeholder="例如：顺利通过教师招考，在热爱的工作岗位上施展自己的才能，不断积累经验，努力成为专家型教师。">-->
    <!--</el-input>-->
    <!--</div>-->

    <!--<div v-show="tabs[14]">-->
    <!--<el-input v-model="form.abstale" type="textarea"-->

    <!--placeholder="例如：物理难度较高，化学难度也高且很多要记忆的，政治也是记忆性的知识较多又要贴合生活和时政热点，这三科得高分都比较难。">-->
    <!--</el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[15]">-->
    <!--<el-input v-model="form.strategy" type="textarea"-->

    <!--placeholder="例如：根据自己的基础和水平，制定合理的学习计划，根据自己的进步和问题，及时调整学习策略、不断总结。参加学长学姐学法报告会，尽快提升学业成绩。">-->
    <!--</el-input>-->
    <!--</div>-->
    <!--<div v-show="tabs[16]">-->
    <!--<el-input v-model="form.immediatestrategy" type="textarea"-->

    <!--placeholder="例如：请老师一起分析自己目前的科目学习情况及提升方法，尽快制定详细的学习计划，包括每天的学习时间、内容、方法和目标，以及每周的总结和反思等，坚持执行和检查。">-->
    <!--</el-input>-->
    <!--<el-button @click="finish" v-show="form.status == 0 || form.status == 1 || form.status == undefined">-->
    <!--制定完成-->
    <!--</el-button>-->
    <!--</div>-->
    <!--</div>-->


    <!--<el-button @click="save" v-show="(form.status == 0 || form.status == undefined) && !tabs[16]">保存</el-button>-->


    <!--<el-dialog v-model="openNotice" width="500px" append-to-body>-->
    <!--建议:....-->
    <!--<el-button @click="closeNotice">关闭</el-button>-->
    <!--</el-dialog>-->

    <!--<el-dialog v-model="openEstimate" width="900px" append-to-body>-->
    <!--<table border="1" style="width:800px">-->
    <!--<tr>-->
    <!--<td>评估时间</td>-->
    <!--<td>评估内容</td>-->
    <!--<td>达成度</td>-->
    <!--<td>保持/改进</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td rowspan="6">-->
    <!--2025/07/02-->
    <!--</td>-->
    <!--<td>品格发展目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v11">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v12">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>学业发展目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v21">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v22">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>身心健康目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v31">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v32">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>艺术素养目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v41">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v42">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>生涯发展目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v51">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v52">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
    <!--<td>事件创新目标</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v61">-->
    <!--<el-option v-for="(item,index) in achievement_rate" :label="item.label" :value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--<td>-->
    <!--<el-select v-model="pgForm.v62">-->
    <!--<el-option v-for="(item,index) in maintain_improvement" :label="item.label"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</td>-->
    <!--</tr>-->
    <!--</table>-->


    <!--<el-button @click="saveEstimate">保存评估</el-button>-->
    <!--<el-button @click="editEstimate">修改规划书</el-button>-->
    <!--</el-dialog>-->


    <!--</div>-->


</template>

<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
    import {careerplan, doSaveCareerplan, finishCareerplan} from '@/api/xjc-integratedmachine/plan/careeplan.js'
    import {ElMessage} from 'element-plus'
    import {doEstimateSave} from '@/api/xjc-integratedmachine/plan/estimate.js'

    const {proxy} = getCurrentInstance()
    const {achievement_rate, maintain_improvement} = proxy.useDict('achievement_rate', 'maintain_improvement')
    const form = ref({})

    const headinfo = ref({})

    const tabs = ref([
        false, false, false, false, false, false,
        false, false, false, false, false, false,
        false, false, false, false, false
    ])

    function showTab(index) {
        for (let i = 0; i < tabs.value.length; i++) {
            if (i == index) {
                tabs.value[i] = true
            } else {
                tabs.value[i] = false
            }
        }
    }

    const content = ref({})

    function list() {
        careerplan({id: null}).then(resp => {
            form.value = resp
            if (form.value.careerplan != null) {
                form.value.id = form.value.careerplan.id
                form.value.selfinterest = form.value.careerplan.selfinterest
                form.value.selfability = form.value.careerplan.selfability
                form.value.selfvalue = form.value.careerplan.selfvalue
                form.value.careergoals = form.value.careerplan.careergoals
                form.value.careeranalysis = form.value.careerplan.careeranalysis
                form.value.majoranalysis = form.value.careerplan.majoranalysis
                form.value.unianalysis = form.value.careerplan.unianalysis
                form.value.careergoal1 = form.value.careerplan.careergoal1
                form.value.careergoal2 = form.value.careerplan.careergoal2
                form.value.careergoal3 = form.value.careerplan.careergoal3
                form.value.majorgoal1 = form.value.careerplan.majorgoal1
                form.value.majorgoal2 = form.value.careerplan.majorgoal2
                form.value.majorgoal3 = form.value.careerplan.majorgoal3
                form.value.unigoal1 = form.value.careerplan.unigoal1
                form.value.unigoal2 = form.value.careerplan.unigoal2
                form.value.unigoal3 = form.value.careerplan.unigoal3
                form.value.mustselect1 = form.value.careerplan.mustselect1
                form.value.mustselect2 = form.value.careerplan.mustselect2
                form.value.mustselect3 = form.value.careerplan.mustselect3
                form.value.selectstrategy = form.value.careerplan.selectstrategy
                form.value.goalgrade1 = form.value.careerplan.goalgrade1
                form.value.goalgrade2 = form.value.careerplan.goalgrade2
                form.value.goalgrade3 = form.value.careerplan.goalgrade3
                form.value.goalmidterm = form.value.careerplan.goalmidterm
                form.value.goallongterm = form.value.careerplan.goallongterm
                form.value.abstale = form.value.careerplan.abstale
                form.value.strategy = form.value.careerplan.strategy
                form.value.immediatestrategy = form.value.careerplan.immediatestrategy
                form.value.status = form.value.careerplan.status
                pgForm.value.careerplanId = form.value.careerplan.id
            }
        })
    }

    function save() {
        form.value.status = 0
        doSaveCareerplan(form.value).then(resp => {
            list()
            ElMessage.success("保存完成")
        })
    }

    let openNotice = ref(false)
    let openEstimate = ref(false)

    function finish() {
        form.value.status = 1
        doSaveCareerplan(form.value).then(resp => {
            list()
            ElMessage.success("制定完成")
        })
        openNotice.value = true
    }

    function closeNotice() {
        openNotice.value = false
        openEstimate.value = true

    }

    //---------------------------------
    const pgForm = ref({})

    function saveEstimate() {
        doEstimateSave(pgForm.value).then(resp => {
            ElMessage.success("保存完成")
        })
    }

    function editEstimate() {
        finishCareerplan(form.value).then(resp => {
            list()
            showTab(0)
            openEstimate.value = false
            ElMessage.success("修改完成")
        })
    }


    onMounted(() => {
        list()
        showTab(0)
    })
</script>

<style scoped>
    .main {
        width: 1920px;
        height: 1931px;
        display: flex;
        flex-direction: column;
    }

    .top {
        width: 1920px;
        height: 123px;
    }

    .center {
        width: 1920px;
        height: 1808px;
        display: flex;
        flex-direction: row;
    }

    .left {
        width: 244px;
        height: 100%;
    }

    .right {
        width: 1676px;
        height: 100%;
    }
</style>