[feat][规划管理][首页]

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

@@ -1,28 +1,121 @@
 <template>
-    规划管理首页
-
-    <el-button @click="jumpTo('/xjc-integratedmachine/plan/develop_career_plan1')">制定生涯规划书</el-button>
-    <el-button>目标管理</el-button>
-    <el-button>时间管理</el-button>
-    <el-button>自控测评力</el-button>
-    <el-button>生涯成熟度复测</el-button>
-
+    <div class="wake-up-page">
+        <head-component :headinfo=headinfo></head-component>
+        <div class="page-content">
+            <div class="page-img-box">
+                <div class="img-box">
+                    <img src="@/assets/images/plan/index/card1.png" @click="jumpTo('/xjc-integratedmachine/plan/develop_career_plan1')">
+                    <img src="@/assets/images/plan/index/card2.png" @click="jumpTo('/xjc-integratedmachine/plan/prodb_search_undergraduate')">
+                    <img src="@/assets/images/plan/index/card3.png" @click="jumpTo('/xjc-integratedmachine/plan/occdb_search_industry')">
+                </div>
+                <div class="bottom-img common-img-button">
+                    <img src="@/assets/images/plan/index/card4.png" @click="jumpTo('/xjc-integratedmachine/plan/studyocc_information')">
+                    <img src="@/assets/images/plan/index/card5.png" @click="jumpTo('/xjc-integratedmachine/plan/ai_career_interview')">
+                </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";
+
     const router = useRouter()
+
+    const headinfo = ref({})
+
+    function setHeadinfo(){
+        headinfo.value = {
+            title: '规划管理学习系统',
+            user: {
+                avatar: '头像路径',
+                nickName: '张三'
+            },
+            backUrl : '/index',
+            isHome:true,
+            backUrlUse:true,
+        }
+    }
+
+
     function jumpTo(path) {
         router.push({
             path: path,
+            query: {name: 123}
         })
     }
+    onMounted(() => {
+        setHeadinfo()
+    })
+</script>
 
 
+<style scoped lang="scss">
+    .wake-up-page{
+        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: 123px;
+            bottom: 0;
+            p{
+                padding-left: 44px;
+                padding-right: 44px;
+                font-weight: 400;
+                font-size: 30px;
+                color: #333333;
+                line-height: 52px;
+                letter-spacing: 3px;
+                text-indent: 2em;
+            }
+        }
+        .content-text-box{
+            width: 100%;
+            height: 126px;
+            background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
+            background-size: 1920px 126px;
+            margin-top:23px;
+            display: flex;
+            align-items: center;
+        }
+        .page-img-box{
+            width: 100%;
+            display: flex;
+            justify-content:space-around;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 40px;
+            .img-box{
+                width: 1520px;
+                display: flex;
+                justify-content: space-around;
+                img{
+                    width: 324px;
+                    height: 400px;
+                }
+            }
+            .bottom-img{
+                width: 1520px;
+                height: 316px;
+                margin-top: 63px;
+                img{
+                    width: 324px;
+                    height: 400px;
+                }
+            }
+        }
 
 
-</script>
+    }
 
-<style scoped>
 
 </style>
+
+