生涯故事 mycos 咨讯

src/router/router_environment.js

@@ -146,7 +146,7 @@ const router = [
     //资讯详情
     {
         path: '/xjc-integratedmachine/environment/info_detail',
-        component: () => import('@/views/xjc-integratedmachine/environment/info_detail.vue'),
+        component: () => import('@/views/xjc-integratedmachine/environment/mycos_detail.vue'),
     },
     //AI生涯访谈角色
     {

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

@@ -91,7 +91,7 @@ const eightPage = ref(false)
 
 function setHeadinfo(){
   headinfo.value = {
-    title: '学职资讯',
+    title: '生涯故事',
     user: {
       avatar: '头像路径',
       nickName: '张三'
@@ -124,7 +124,7 @@ onMounted(() => {
 
 const queryParams = ref({
   pageNum: 1,
-  pageSize: 10,
+  pageSize: 5,
   type: '5'
 })
 

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

@@ -45,9 +45,6 @@ function detail() {
 detail()
 import {ref} from "vue";
 
-
-
-
 const headinfo = ref({})
 
 function setHeadinfo(){

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

@@ -1,29 +0,0 @@
-<template>
-    <div>{{data.title}}</div>
-    <div v-html="data.content"></div>
-</template>
-
-<script setup>
-    import {mycosdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-
-    const router = useRouter()
-    const route = useRoute()
-    const param = route.query
-
-    const data = ref({})
-
-    function detail() {
-        mycosdetail({
-            id: param.id
-        }).then(resp => {
-            data.value = resp.entity
-        })
-    }
-
-    detail()
-
-</script>
-
-<style scoped>
-
-</style>

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

@@ -0,0 +1,124 @@
+
+<template>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div  v-html="data.content"></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 {mycosdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
+    const router = useRouter()
+    const route = useRoute()
+    const param = route.query
+
+    const data = ref({})
+
+    function detail() {
+        mycosdetail({
+            id: param.id
+        }).then(resp => {
+            data.value = resp.entity
+        })
+    }
+
+    detail()
+    import {ref} from "vue";
+
+    const headinfo = ref({})
+    function setHeadinfo(){
+      headinfo.value = {
+        title: '学职资讯',
+        user: {
+          avatar: '头像路径',
+          nickName: '张三'
+        },
+        backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+        homeUrl:'/xjc-integratedmachine/environment/index',
+      }
+    }
+    onMounted(() => {
+      setHeadinfo()
+    })
+</script>
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_details_video {
+  background: url('@/assets/images/environment/university-detail.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: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    background: white;
+    //border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    border-top: 10px solid #1EC590;
+    padding-left: 157px;
+    padding-right: 157px;
+    padding-top: 20px;
+    .item-box{
+      width: 1750px;
+      height: 204px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 52px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,45 +1,168 @@
+
 <template>
-    cos
-    <div v-for="(item,index) in list" @click="toDetail(item)">
-        <div v-html="item.title"></div><br>
-        <div v-html="item.content"></div>
-        <div @click="toDetail(item)">>>>></div>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <!--        生涯故事1-->
+        <div>
+          <div  class="item-box" v-for="(item,index) in list" @click="toDetail(item)">
+            <div class="top">
+              <p class="title" v-html="item.title"></p>
+              <p class="details">详情 ></p>
+            </div>
+          </div>
+        </div>
+        <div class="fenye">
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                    v-model:limit="queryParams.pageSize" @pagination="query"/>
+        </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="list"/>
+  </div>
 </template>
 
+
+
 <script setup>
-    import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const list = ref([])
-    const total = ref(0)
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        type : '1'
-    })
-    function query() {
-        careerinformation(queryParams.value).then(resp =>{
-            console.log(resp.data_list.rows)
-            list.value = resp.data_list.rows
-            total.value = resp.data_list.total
-        })
-    }
-    function toDetail(item) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/info_detail',
-            query :{
-                id : item.id
-            }
-        })
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+/*import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";*/
+
+import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+import {ref} from "vue";
+const router = useRouter()
+const route = useRoute()
+const list = ref([])
+const total = ref(0)
+
+const entity = ref({})
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+  }
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 5,
+  type : '1'
+})
+function query() {
+  careerinformation(queryParams.value).then(resp =>{
+    console.log(resp.data_list.rows)
+    list.value = resp.data_list.rows
+    total.value = resp.data_list.total
+  })
+}
+function toDetail(item) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/info_detail',
+    query :{
+      id : item.id
     }
-    query()
+  })
+}
+query()
 
 </script>
 
 <style scoped>
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_details_video {
+  background: url('@/assets/images/environment/university-detail.png') no-repeat;
+  background-size: 1920px 1080px;
+
+  width: 100%;
+  height: 1080px;
+
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    .item-box{
+      width: 1750px;
+      height: 120px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 36px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          transform: translateY(5px);
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+        padding-top: 30px;
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+      }
+    }
+  }
+
+  .fenye{
+    width: 72px;
+    height: -48px;
+    align-self: center;
+    margin-top: 20px;
+    margin-left: 600px;
+    background: #F4F4F4;
+    border-radius: 0px 0px 0px 0px;
+    border: 1px solid #E2E8F0;
+  }
 
+}
 </style>