[feat][生涯决策][决策平衡单]

src/views/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet_explanation.vue

@@ -1,11 +1,156 @@
 <template>
-    选科决策平衡单知识讲解
+    <div class="plan_significance">
+        <head-component :headinfo=headinfo></head-component>
+        <div class="page-content">
+            <div class="page-box">
+                <p class="text-info">
+                    <span class="center-text">选科决策平衡单</span>是辅助新高考选科的重要工具，帮助我们通过赋值方式对影响选科决策的内在和外在考虑因素进行量化处理，让我们在各科目选择上多角度权衡利弊，最后获得更具有综合优势的选科结论。
+                </p>
+                <p class="text-info">
+                    选科决策平衡单的具体使用方法如下：
+                </p>
+                <p class="text-info">
+                    <span class="center-text">第一步：</span>罗列可选的选考科目。如：物理、化学、生物、历史、政治、地理等。
+                </p>
+                <p class="text-info">
+                    <span class="center-text">第二步：</span>梳理并罗列对选科有影响的考虑因素。如：人生目标与职业目标、学科基础与学科成绩、学科优势、专业倾向与限考要求、父母等家人建议、教师建议与同学建议、学校特色与师资水平、社会发展需要与贡献等。
+                </p>
+                <p class="text-info">
+                    <span class="center-text">第三步：</span>评估各考虑因素的重要程度并分配权重分数，范围通常为1-5分（1分表示该因素最不重要，5分表示最重要）。
+                </p>
+                <p class="text-info">
+                    <span class="center-text">第四步：</span>衡量每个选考科目中各考虑因素的得失程度。依据自己在每个选考科目对应因素上的优势（得分）、劣势（失分），为每个科目在该因素上设定得失分数，范围可在-5到+5之间。
+                </p>
+                <p class="text-info">
+                    <span class="center-text">第五步：</span>加权计算并得出结果。根据每个考虑因素的权重和得失分数，计算每个选考科目的总得分（将每个因素的权重分数乘以该科目在该因素上的得失分数，再将所有因素的乘积相加，得到总得分），然后依据总得分的高低来排列选考科目的优先级。
+                </p>
+                <p class="text-info">
+                    选科决策平衡单的结果主要是个人认知层面的反映，实际上仍有许多部分是决策平衡单无法展现出来的。因此，得分高的科目或许会与最终的决策不一致，但我们仍可通过选科决策平衡单来帮助自己清楚地了解整个选科决策过程。
+                </p>
+                <div class="img-box">
+                    <img src="@/assets/images/decision/decision_balance_sheet/explanation.png">
+                </div>
+            </div>
+            <drag_component></drag_component>
+        </div>
+    </div>
+
 </template>
 
 <script setup>
+    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+    import {onMounted, reactive} from "vue";
+    import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+    const headinfo = ref({})
+    const describeInfo = ref('')
+    function setHeadinfo(){
+        headinfo.value = {
+            title: '生涯唤醒学习系统',
+            user: {
+                avatar: '头像路径',
+                nickName: '张三'
+            },
+            backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
+        }
+    }
+    const centerDialogVisible = ref(false)
+    const position = reactive({ x: 10, y: 10 });
+    let isDragging = false;
+    let originX, originY;
+
+    const startDrag = (e) => {
+        console.log("e",e)
+        isDragging = true;
+        originX = e.clientX - position.x;
+        originY = e.clientY - position.y;
+        console.log("originX",originX,originY,"originY")
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', stopDrag);
+    };
+
+    const onMouseMove = (e) => {
+        if (isDragging) {
+            position.x = e.clientX - originX;
+            position.y = e.clientY - originY;
+            console.log("position.x",position.x,"position.y",position.y)
+        }
+    };
+
+    const stopDrag = () => {
+        isDragging = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', stopDrag);
+    };
+
+    onMounted(() => {
+        setHeadinfo()
+    })
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+    p{
+        margin: 0;
+        padding: 0;
+    }
+    .plan_significance{
+        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%;
+            height: 980px;
+            position: absolute;
+            top: 100px;
+            bottom: 0;
+        }
+        .page-box{
+            width: 1832px;
+            height: 910px;
+            background: #FFFFFF;
+            border-radius: 35px 35px 35px 35px;
+            margin: 13px auto 0;
+            padding-top: 25px;
+            position: relative;
+            overflow: auto;
+            .text-info{
+                font-weight: 400;
+                font-size: 30px;
+                color: #333333;
+                line-height: 52px;
+                padding: 0 150px;
+                text-indent: 2em;
+                margin-top: 20px;
+                .center-text{
+                    font-weight: bold;
+                }
+            }
+            .img-box{
+                width: 1810px;
+                height: 773px;
+                display: flex;
+                justify-content: center;
+                margin-bottom: 20px;
+                position: relative;
+                img{
+                    width: 1525px;
+                    height: 770px;
+                }
+            }
+
+            .title-text{
+                margin-left: 150px;
+                margin-right: 150px;
+                margin-top: 28px;
+                font-weight: bold;
+                font-size: 32px;
+                color: #333333;
+                line-height: 52px;
+            }
+        }
+
+    }
 
 </style>

src/views/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet_index.vue

@@ -1,11 +1,89 @@
 <template>
-    选科决策平衡单首页
+    <div class="maturity-game-page">
+        <head-component :headinfo=headinfo></head-component>
+        <div class="page-content">
+            <div class="top">
+                <img src="@/assets/images/decision/decision_balance_sheet/game-title.png" >
+            </div>
+            <div class="bottom">
+                <img src="@/assets/images/decision/common/index-game-left.png" @click="jumpTo('/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet_explanation')">
+                <img src="@/assets/images/decision/common/index-game-right.png" @click="jumpTo('/xjc-integratedmachine/decision/balance_sheet/decision_balance_sheet')">
+            </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 {onMounted} from "vue";
+    const router = useRouter()
 
+    const headinfo = ref({})
+
+    function setHeadinfo(){
+        headinfo.value = {
+            title: '',
+            user: {
+                avatar: '头像路径',
+                nickName: '张三'
+            },
+            backUrl: '/xjc-integratedmachine/decision/index',
+            backUrlUse:true,
+        }
+    }
+
+    function jumpTo(path) {
+        router.push({
+            path: path,
+            query: {name: 123}
+        })
+    }
+
+    onMounted(() => {
+        setHeadinfo()
+    })
 </script>
 
-<style scoped>
+
+<style scoped lang="scss">
+    .maturity-game-page{
+        background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
+        background-size: 1920px 1080px;
+        z-index:10;
+        width: 100%;
+        height: 1080px;
+        .page-content{
+            width: 100%;
+            position: absolute;
+            top: 123px;
+            bottom: 0;
+            .top{
+                width: 100%;
+                height: 212px;
+                display: flex;
+                justify-content: center;
+                margin-top: 104px;
+                img{
+                    width: 864px;
+                    height: 212px;
+                }
+            }
+            .bottom{
+                width: 100%;
+                height: 248px;
+                display: flex;
+                justify-content: space-around;
+                margin-top:186px;
+                img{
+                    width: 398px;
+                    height: 248px;
+                }
+            }
+        }
+
+    }
 
 </style>
+