完成2.0基本布局

src/layout/Index.vue

@@ -1,140 +1,13 @@
 <script setup>
 import Aside from "./component/Aside.vue";
 import Header from './component/Header.vue'
+import Footer from './component/Footer.vue'
 import { useStore } from "vuex";
-import { computed, ref,watch } from "vue";
-import moment from "moment";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
-const router=useRouter()
 
+const router=useRouter()
 const store = useStore();
-store.dispatch('getUserInfo')//获取个人信息
-const userInfo = computed(() => store.state.userInfo);
-const lastTime = computed(() => {
-  let timeArr = [];
-  store.state.userInfo.permission_list &&
-    store.state.userInfo.permission_list.forEach((item) => {
-      item.permission_list.forEach((item2) => {
-        timeArr.push(new Date(item2.end_date));
-      });
-    });
-
-  let maxTime = Math.max(...timeArr);
-  if (timeArr.length === 0) {
-    return "";
-  } else {
-    return moment(maxTime).format("YYYY.MM.DD");
-  }
-});
-
-import { apiGetPermissionList } from "@/api/common.js";
-let permissionList = ref([]);
-const getPermissionList = async () => {
-  const res = await apiGetPermissionList();
-  if (res.code === 200) {
-    permissionList.value = res.data;
-  }
-};
-getPermissionList();
-
-let permission_list_str = computed(() => {
-  let hasArr = [];
-  store.state.userInfo.permission_list &&
-    store.state.userInfo.permission_list.forEach((item) => {
-      item.permission_list.forEach((item2) => {
-        hasArr.push(item2.name);
-      });
-    });
-  let arr = permissionList.value.filter((item) => {
-    if (hasArr.find((e) => e === item.permission_name)) return item;
-  });
-  let arr2=arr.map(item=>item.name)
-
-  return arr2.join('/')
-});
-
-//我的中点击去申请权限
-import { ElMessageBox,ElMessage } from 'element-plus'
-import {apiLastApplyRecord} from '@/api/user'
-const handleGoApplyPermission=async ()=>{
-  const res=await apiLastApplyRecord()
-  if(res.code===200){
-    if(res.data){
-      const htmlStr=`<p style="text-align:center;">您已提交过申请，请耐心等待</p>`
-      ElMessageBox({
-        title:'申请提醒',
-        message:htmlStr,
-        center: true,
-        dangerouslyUseHTMLString: true,
-        confirmButtonText:'知道了',
-        confirmButtonClass:'self-elmessage-confirm-btn'
-      })
-    }else{
-      // 流失客户主动申请一次
-      if(userInfo.value.status=='流失'){
-        apiApplyPermission({
-          company_name:userInfo.value.company_name,
-          real_name:userInfo.value.real_name,
-          source:1,
-          from_page:'我的',
-        }).then(res=>{
-          const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
-          ElMessageBox({
-            title:'申请提醒',
-            message:htmlStr,
-            center: true,
-            dangerouslyUseHTMLString: true,
-            confirmButtonText:'知道了',
-            confirmButtonClass:'self-elmessage-confirm-btn'
-          })
-        })
-        return
-      }
-      router.push({
-        path:'/apply/permission',
-        query:{
-          source:1,
-          fromPage:'我的'
-        }
-      })
-    } 
-  }
-}
-
-//我的中点击联系销售
-import {apiApplyPermission} from '@/api/user'
-const handleContact=async ()=>{
-  const res=await apiApplyPermission({
-    company_name:userInfo.value.company_name,
-    real_name:userInfo.value.real_name,
-		source:1,
-    from_page:'我的',
-  })
-  if(res.code===200){
-    console.log('主动申请成功');
-  }
-  const htmlStr=`<p>请联系对口销售--${userInfo.value.seal_name}：${userInfo.value.seal_mobile}</p>`
-  ElMessageBox({
-    title:'申请提醒',
-    message:htmlStr,
-    center: true,
-    dangerouslyUseHTMLString: true,
-    confirmButtonText:'知道了',
-    confirmButtonClass:'self-elmessage-confirm-btn'
-  })
-}
-
-
-// 全局返回按钮
-const goBack=()=>{
-  if(window.history.state.back){
-    console.log('返回上一页');
-    router.go(-1)
-  }else{
-    console.log('返回首页');
-    router.push({path:'/'})
-  }
-}
 
 
 // 音频切换
@@ -156,74 +29,27 @@ store.state.audioData.INS=globalAudioIns
 
 <template>
   <div class="layout-wrap">
-    <el-container style="width: 100%;height:100%">
-      <el-header><Header></Header></el-header>
-      <el-container>
-      <Aside></Aside>
-      <el-main>
-        <img v-if="$route.meta.hasBack" @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="">
-        <!-- <router-view /> -->
-        <router-view v-slot="{ Component }">
-            <keep-alive>
-                <component :is="Component" v-if="$route.meta.keepAlive" />
-            </keep-alive>
-            <component :is="Component" v-if="!$route.meta.keepAlive" />
-        </router-view>
-      </el-main>
-      <!-- 个人信息模块 -->
-      <div class="userinfo-wrap">
-        <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
-          <template #reference>
-            <img class="icon-scan" src="@/assets/icon-scan.png" alt="" />
-          </template>
-          <template #default>
-            <div class="flex" style="justify-content: space-between">
-              <div style="flex: 1; text-align: center">
-                <img style="width: 121px" src="@/assets/xcx-img.png" alt="" />
-                <p>手机扫码<br />体验更多小程序功能</p>
-              </div>
-              <div style="flex: 1; text-align: center">
-                <img style="width: 121px" src="@/assets/gzh-img.png" alt="" />
-                <p>关注弘则研报公众号<br />及时获取活动和报告通知</p>
-              </div>
-            </div>
-          </template>
-        </el-popover>
-        <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
-          <template #reference>
-            <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
-          </template>
-          <template #default>
-            <div class="userinfo-box" v-if="userInfo">
-              <div class="top">
-                <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
-                <p style="font-size: 20px">{{ userInfo.real_name||'--' }}</p>
-                <p>{{ userInfo.mobile||userInfo.email }}</p>
-              </div>
-              <div class="flex info-item">
-                <div class="label">公司</div>
-                <div class="con">{{ userInfo.company_name||'--' }}</div>
-              </div>
-              <div class="flex info-item">
-                <div class="label">品种权限</div>
-                <div class="con" v-if="userInfo.status=='冻结'||(userInfo.status=='试用'&&userInfo.is_suspend==1)">
-                  <span>暂无权限</span>
-                  <span class="btn" @click="handleContact">联系销售</span>
-                </div>
-                <div class="con" v-else-if="userInfo.permission_list.length==0">
-                  <span>暂无权限</span>
-                  <span class="btn" @click="handleGoApplyPermission">立即申请</span>
-                </div>
-                <div class="con" v-else>{{permission_list_str}}</div>
-              </div>
-              <div class="flex info-item">
-                <div class="label">服务截至日期</div>
-                <div class="con">{{ lastTime }}</div>
-              </div>
-            </div>
-          </template>
-        </el-popover>
-      </div>
+    <el-container style="width:100%;height:100%">
+      <el-header>
+        <Header/>
+      </el-header>
+      <el-container style="padding-top:60px">
+        <el-container>
+        <el-aside width="160px">
+          <Aside />
+        </el-aside>
+        <el-main style="padding-left:180px">
+          <router-view v-slot="{ Component }">
+              <keep-alive>
+                  <component :is="Component" v-if="$route.meta.keepAlive" />
+              </keep-alive>
+              <component :is="Component" v-if="!$route.meta.keepAlive" />
+          </router-view>
+        </el-main>
+        </el-container>
+        <el-footer>
+          <Footer/>
+        </el-footer>
       </el-container>
     </el-container>
 
@@ -259,75 +85,34 @@ store.state.audioData.INS=globalAudioIns
   background-color: #fff;
   position: relative;
 }
-.el-main {
-  min-width: 580px;
-  max-width: 1200px;
+.el-header{
+  box-shadow: 0px 2px 9px 1px rgba(227, 227, 227, 0.5);
   background-color: #fff;
-  padding-left: 60px;
-  padding-top: 0;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  .back-icon{
-    position: fixed;
-    left: 180px;
-    top: 23px;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-  }
-  
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 999;
 }
-.userinfo-wrap {
+.el-aside{
+  box-shadow: 0px 2px 9px 1px rgba(227, 227, 227, 0.5);
+  position: fixed;
+  left: 0;
+  top: 60px;
+  bottom: 0;
+  z-index: 998;
   background-color: #fff;
-  width: 186px;
-  padding: 20px;
-  text-align: center;
-  flex-shrink: 0;
-  .icon-scan {
-    width: 26px;
-    height: 26px;
-    position: relative;
-    margin-right: 20px;
-    top: -10px;
-  }
 }
-.userinfo-box {
-  .top {
-    text-align: center;
-    margin-bottom: 31px;
-    p {
-      margin: 0;
-    }
-  }
-  .info-item {
-    padding: 20px 26px 20px 20px;
-    border-top: 1px solid #ebebeb;
-    position: relative;
-    .label {
-      width: 90px;
-      margin-right: 19px;
-      flex-shrink: 0;
-    }
-    .con{
-      .btn{
-        width: 97px;
-        height: 30px;
-        border-radius: 8px;
-        border: 1px solid #DAB37C;
-        font-size: 16px;
-        color: #DAB37C;
-        display: inline-block;
-        text-align: center;
-        line-height: 30px;
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-      }
-    }
-  }
+.el-main {
+
+}
+.el-footer{
+  position: relative;
+  z-index: 999;
+  background-color: #fff;
+  border-top: 1px solid #f2f2f2;
+  height: auto;
+  padding: 0;
 }
 
 .global-audio-box{

src/layout/component/Aside.vue

@@ -26,11 +26,7 @@ const menuList = reactive([
 </script>
 
 <template>
-  <el-aside width="166px" class="aside-wrap">
-    <div class="logo-box flex-row-col-center">
-      <img src="@/assets/logo.png" alt="logo" class="logo" />
-      <span>弘则研报</span>
-    </div>
+  <div class="aside-wrap">
     <el-menu router :default-active="activePath" unique-opened background-color="#FFFBF5" text-color="#333" active-text-color="#333" class="el-menu-wrap">
       <template v-for="menu in menuList">
         <el-menu-item :index="menu.path" :key="menu.id" v-if="!menu.children">
@@ -48,14 +44,13 @@ const menuList = reactive([
         </el-sub-menu>
       </template>
     </el-menu>
-  </el-aside>
+  </div>
 </template>
 
 
 <style lang="scss" scoped>
 .aside-wrap {
-  padding-top: 103px;
-  background-color: #fff;
+  padding-top: 20px;
   position: relative;
   border-right:1px solid #F2F2F2;
   height: 100%;
@@ -63,25 +58,6 @@ const menuList = reactive([
     width: 0;
   }
 }
-.logo-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 73px;
-  z-index: 99;
-  text-align: center;
-  background-color: #fff;
-  border-bottom: 1px solid #F2F2F2;
-  .logo {
-    width: 32px;
-    margin-right: 8px;
-  }
-  span{
-    font-size: 18px;
-    font-weight: bold;
-  }
-}
 
 .el-menu-wrap {
   width: 100%;

src/layout/component/Footer.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="footer-wrap">
+        <div class="flex top-box">
+            <div class="left-con">
+                <div class="about-text">关于弘则</div>
+                <div class="about-text-en">ABOUT US</div>
+                <div class="info-item">公司名称：弘则弥道（上海）投资咨询有限公司</div>
+                <div class="info-item">地址：上海市世纪大道210号 21世纪大厦12层1206室</div>
+                <div class="info-item">电话：86-21-61645300</div>
+                <div class="info-item">官网：http//www.hzinsights.com</div>
+                <div class="info-item">邮箱：service@hzinsights.com</div>
+            </div>
+            <div class="right-con">
+                <img class="gzh-img" src="@/assets/gzh-img.png" alt="">
+                <div style="font-size:16px;margin:14px 0 10px 0">扫码关注弘则研究公众号</div>
+                <div style="font-size:14px;color:#666">弘则研究：专注为全球投资<br/>者提供中立客观的研究服务</div>
+            </div>
+        </div>
+        <div class="copy-right-box">Copyright ©2020 弘则弥道（上海）投资咨询有限公司 沪ICP备15035458号-1</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.footer-wrap{
+    .top-box{
+        padding-left: 180px;
+        padding-right: 260px;
+        padding-top: 30px;
+        padding-bottom: 20px;
+        justify-content: space-between;
+        .left-con{
+            .about-text{
+                font-size: 26px;
+                font-weight: bold;
+                &::after{
+                    display: block;
+                    content:'';
+                    width:61px;
+                    height: 6px;
+                    background-color: #F3A52F;
+                    margin-top: 5px;
+                }
+            }
+            .about-text-en{
+                font-size: 20px;
+                font-weight: 300;
+                margin-top: 7px;
+                margin-bottom: 20px;
+            }
+            .info-item{
+                font-weight: 300;
+                font-size: 14px;
+                margin-bottom: 6px;
+            }
+        }
+        .right-con{
+            .gzh-img{
+                border: 1px solid #F3A52F;
+                border-radius: 4px;
+                width: 103px;
+                height: 103px;
+                padding: 7px;
+                display: block;
+                margin: 0 auto;
+            }
+        }
+    }
+    .copy-right-box{
+        border-top: 1px solid #f2f2f2;
+        padding: 20px 0;
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+    }
+}
+</style>

src/layout/component/Header.vue

@@ -1,10 +1,306 @@
 <script setup>
+import { useStore } from "vuex";
+import { computed, ref, watch } from "vue";
+import moment from "moment";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+const store = useStore();
+store.dispatch("getUserInfo"); //获取个人信息
+const userInfo = computed(() => store.state.userInfo);
+const lastTime = computed(() => {
+  let timeArr = [];
+  store.state.userInfo.permission_list &&
+    store.state.userInfo.permission_list.forEach((item) => {
+      item.permission_list.forEach((item2) => {
+        timeArr.push(new Date(item2.end_date));
+      });
+    });
+
+  let maxTime = Math.max(...timeArr);
+  if (timeArr.length === 0) {
+    return "";
+  } else {
+    return moment(maxTime).format("YYYY.MM.DD");
+  }
+});
+import { apiGetPermissionList } from "@/api/common.js";
+let permissionList = ref([]);
+const getPermissionList = async () => {
+  const res = await apiGetPermissionList();
+  if (res.code === 200) {
+    permissionList.value = res.data;
+  }
+};
+getPermissionList();
+
+let permission_list_str = computed(() => {
+  let hasArr = [];
+  store.state.userInfo.permission_list &&
+    store.state.userInfo.permission_list.forEach((item) => {
+      item.permission_list.forEach((item2) => {
+        hasArr.push(item2.name);
+      });
+    });
+  let arr = permissionList.value.filter((item) => {
+    if (hasArr.find((e) => e === item.permission_name)) return item;
+  });
+  let arr2 = arr.map((item) => item.name);
+
+  return arr2.join("/");
+});
+
+//我的中点击去申请权限
+import { ElMessageBox, ElMessage } from "element-plus";
+import { apiLastApplyRecord } from "@/api/user";
+const handleGoApplyPermission = async () => {
+  const res = await apiLastApplyRecord();
+  if (res.code === 200) {
+    if (res.data) {
+      const htmlStr = `<p style="text-align:center;">您已提交过申请，请耐心等待</p>`;
+      ElMessageBox({
+        title: "申请提醒",
+        message: htmlStr,
+        center: true,
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: "知道了",
+        confirmButtonClass: "self-elmessage-confirm-btn",
+      });
+    } else {
+      // 流失客户主动申请一次
+      if (userInfo.value.status == "流失") {
+        apiApplyPermission({
+          company_name: userInfo.value.company_name,
+          real_name: userInfo.value.real_name,
+          source: 1,
+          from_page: "我的",
+        }).then((res) => {
+          const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`;
+          ElMessageBox({
+            title: "申请提醒",
+            message: htmlStr,
+            center: true,
+            dangerouslyUseHTMLString: true,
+            confirmButtonText: "知道了",
+            confirmButtonClass: "self-elmessage-confirm-btn",
+          });
+        });
+        return;
+      }
+      router.push({
+        path: "/apply/permission",
+        query: {
+          source: 1,
+          fromPage: "我的",
+        },
+      });
+    }
+  }
+};
+
+//我的中点击联系销售
+import { apiApplyPermission } from "@/api/user";
+const handleContact = async () => {
+  const res = await apiApplyPermission({
+    company_name: userInfo.value.company_name,
+    real_name: userInfo.value.real_name,
+    source: 1,
+    from_page: "我的",
+  });
+  if (res.code === 200) {
+    console.log("主动申请成功");
+  }
+  const htmlStr = `<p>请联系对口销售--${userInfo.value.seal_name}：${userInfo.value.seal_mobile}</p>`;
+  ElMessageBox({
+    title: "申请提醒",
+    message: htmlStr,
+    center: true,
+    dangerouslyUseHTMLString: true,
+    confirmButtonText: "知道了",
+    confirmButtonClass: "self-elmessage-confirm-btn",
+  });
+};
+
+// 全局返回按钮
+const goBack=()=>{
+  if(window.history.state.back){
+    console.log('返回上一页');
+    router.go(-1)
+  }else{
+    console.log('返回首页');
+    router.push({path:'/'})
+  }
+}
 </script>
 
 <template>
-    <div>
-        <span>头部</span>
-        <div id="report-search-box"></div>
+  <div class="clear-float head-wrap">
+    <div class="flex-col-center logo-box">
+      <img src="@/assets/logo.png" alt="logo" class="logo" />
+      <span>弘则研报</span>
+    </div>
+    <div class="flex-col-center userinfo-wrap">
+      <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
+        <template #reference>
+          <img class="icon-scan" src="@/assets/icon-scan.png" alt="" />
+        </template>
+        <template #default>
+          <div class="flex" style="justify-content: space-between">
+            <div style="flex: 1; text-align: center">
+              <img style="width: 121px" src="@/assets/xcx-img.png" alt="" />
+              <p>手机扫码<br />体验更多小程序功能</p>
+            </div>
+            <div style="flex: 1; text-align: center">
+              <img style="width: 121px" src="@/assets/gzh-img.png" alt="" />
+              <p>关注弘则研报公众号<br />及时获取活动和报告通知</p>
+            </div>
+          </div>
+        </template>
+      </el-popover>
+      <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
+        <template #reference>
+          <el-avatar shape="square" :size="40" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
+        </template>
+        <template #default>
+          <div class="userinfo-box" v-if="userInfo">
+            <div class="top">
+              <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
+              <p style="font-size: 20px">{{ userInfo.real_name || "--" }}</p>
+              <p>{{ userInfo.mobile || userInfo.email }}</p>
+            </div>
+            <div class="flex info-item">
+              <div class="label">公司</div>
+              <div class="con">{{ userInfo.company_name || "--" }}</div>
+            </div>
+            <div class="flex info-item">
+              <div class="label">品种权限</div>
+              <div class="con" v-if="userInfo.status == '冻结' || (userInfo.status == '试用' && userInfo.is_suspend == 1)">
+                <span>暂无权限</span>
+                <span class="btn" @click="handleContact">联系销售</span>
+              </div>
+              <div class="con" v-else-if="userInfo.permission_list.length == 0">
+                <span>暂无权限</span>
+                <span class="btn" @click="handleGoApplyPermission">立即申请</span>
+              </div>
+              <div class="con" v-else>{{ permission_list_str }}</div>
+            </div>
+            <div class="flex info-item">
+              <div class="label">服务截至日期</div>
+              <div class="con">{{ lastTime }}</div>
+            </div>
+          </div>
+        </template>
+      </el-popover>
     </div>
+
+    <!-- 头部版心 -->
+    <div class="head-main">
+      <!-- 面包屑 -->
+      <div class="flex-col-center left-breadcrumb-box">
+        <img @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="">
+        <span class="breadcrumb-item">研报</span>
+      </div>
+      
+    </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.head-wrap {
+  width: 100%;
+  height: 100%;
+  .logo-box {
+    float: left;
+    width: 140px;
+    height: 100%;
+    border-right: 1px solid #f2f2f2;
+    .logo {
+      width: 32px;
+      height: 32px;
+      margin-right: 10px;
+    }
+    span {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .userinfo-wrap {
+    float: right;
+    width: 120px;
+    height: 100%;
+    .icon-scan {
+      width: 26px;
+      height: 26px;
+      position: relative;
+      margin-right: 20px;
+    }
+  }
+  .head-main{
+    width: calc(100% - 280px);
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    .left-breadcrumb-box{
+      float: left;
+      margin-left: 20px;
+      height: 100%;
+      .back-icon{
+        width: 30px;
+        height: 30px;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+      .breadcrumb-item{
+        font-size: 14px;
+        cursor: pointer;
+        &::after{
+          content: '/';
+          display: inline-block;
+          margin: 0 5px;
+        }
+        &:last-child::after{
+          content: '';
+        }
+      }
+    }
+    
+  }
+}
+.userinfo-box {
+  .top {
+    text-align: center;
+    margin-bottom: 31px;
+    p {
+      margin: 0;
+    }
+  }
+  .info-item {
+    padding: 20px 26px 20px 20px;
+    border-top: 1px solid #ebebeb;
+    position: relative;
+    .label {
+      width: 90px;
+      margin-right: 19px;
+      flex-shrink: 0;
+    }
+    .con {
+      .btn {
+        width: 97px;
+        height: 30px;
+        border-radius: 8px;
+        border: 1px solid #dab37c;
+        font-size: 16px;
+        color: #dab37c;
+        display: inline-block;
+        text-align: center;
+        line-height: 30px;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -5,7 +5,7 @@ const routes=[
   {
     path: "/",
     name: "Layout",
-    // redirect:'/activity/list',
+    redirect:'/activity/list',
     component: ()=>import("@/layout/Index.vue"),
   },
 
@@ -35,22 +35,11 @@ const routes=[
           title: "报告及活动详情",
           hasBack:true
         },
-      }
-    ]
-  },
-  {
-    path:'/report',
-    name:'Report',
-    redirect: '/report/detail',
-    component: () => import("@/layout/Index.vue"),
-    meta: {
-      title:"报告"
-    },
-    children:[
+      },
       {
-        path: "detail",
+        path: "reportdetail",
         name: "ReportDetail",
-        component: () => import("@/views/report/Detail.vue"),
+        component: () => import("@/views/activity/ReportDetail.vue"),
         meta: {
           title: "报告详情",
           hasBack:true
@@ -59,7 +48,7 @@ const routes=[
       {
         path: "chapterdetail",
         name: "ChapterReportDetail",
-        component: () => import("@/views/report/ChapterDetail.vue"),
+        component: () => import("@/views/activity/ChapterDetail.vue"),
         meta: {
           title: "报告详情",
           hasBack:true
@@ -67,6 +56,16 @@ const routes=[
       }
     ]
   },
+  {
+    path:'/report',
+    name:'Report',
+    redirect: '/report/detail',
+    component: () => import("@/layout/Index.vue"),
+    meta: {
+      title:"报告"
+    },
+    children:[]
+  },
   {
     path: "/apply",
     name: "Apply",

src/views/activity/Detail.vue

@@ -118,7 +118,7 @@ const formatAudioTime=(e)=>{
 // 跳转报告详情
 const goDetail=()=>{
     let params=info.value.reportLink.split('?')[1]
-    router.push(`/report/detail?${params}`)
+    router.push(`/activity/reportdetail?${params}`)
 }
 
 

src/views/report/Detail.vue → src/views/activity/ReportDetail.vue

@@ -54,7 +54,7 @@ onMounted(()=>{
 // 跳转章节详情
 const goChapterDetail=(item)=>{
     router.push({
-        path:'/report/chapterdetail',
+        path:'/activity/chapterdetail',
         query:{
             research_report_type_id:item.ResearchReportTypeId,
             research_report_id:route.query.research_report_id