学生端导航菜单调整

public/index.html

@@ -31,7 +31,7 @@
   </script>
   <script src="./math.js"></script>
 
-  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4939100_4d2bva7l2pq.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4939100_xa8g84rmxb.css">
 </head>
 
 <body>

src/styles/common.scss

@@ -402,6 +402,177 @@ body {
       }
     }
 
+}
+
+//靶向提升导航菜单样式
+.target_nav_menu {
+  width: calc(100% - 20px);
+  border-radius: 10px;
+  margin: auto;
+  margin-top: 10px;
+
+  .el-menu-item
+  {
+    padding: 0;
+  }
+   .el-menu-item *
+  {
+    vertical-align:baseline;
+  }
+  .menu_one_item {
+    height:100px;
+    line-height: 40px;
+    border-radius: 6px;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    margin-bottom: 8px;
+    padding-left: 0 !important;
+
+    i {
+      margin-left: 11px;
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      color: #666;
+      font-size: 28px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+  }
+
+  .menu_one_item:hover {
+    i {
+      margin-left: 11px;
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      color: #2e64fa;
+      font-size: 30px;
+    }
+
+    span {
+      color: #2e64fa;
+      font-size: 14px;
+    }
+  }
+
+  .menu_one_title {}
+
+  .el-submenu .el-menu-item {
+    min-width: 100px;
+    width: 100px;
+    border-radius: 6px;
+    padding-left: 39px !important;
+
+  }
+
+  .el-menu {
+    border: none;
+    background-color: transparent;
+  }
+
+  .el-menu-item {
+    font-size: 14px;
+    font-weight: 400;
+    width: 100px;
+    height: 100px;
+    color: #666666;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #DCDFE6;
+    margin-bottom: 10px !important;
+
+
+  }
+
+  .el-menu-item:hover {
+    color: #2e64fa;
+
+    i {
+      color: #2e64fa !important;
+    }
+  }
+
+  .is-active {
+    color: #2e64fa;
+
+    span {
+      color: #2e64fa;
+    }
+
+    i {
+      color: #2e64fa !important;
+    }
+  }
+
+  .el-submenu>div .el-submenu__icon-arrow {
+    font-weight: 600;
+    font-size: 14px;
+    right: -12px;
+  }
+
+  .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 6px;
+    font-size: 14px;
+    color: #666;
+    font-weight: 400;
+    padding-left: 0px !important;
+    margin-bottom: 8px;
+
+    i {
+      margin-left: 11px;
+      margin-right: 8px;
+      width: 16px;
+      height: 16px;
+      color: #666;
+      font-size: 18px;
+    }
+  }
+
+  .el-submenu__title:hover {
+    background-color: transparent !important;
+    color: #2e64fa !important;
+
+    i {
+      color: #2e64fa !important;
+
+    }
+  }
+
+  .el-menu-item.is-active {
+    background: #EDF1FA;
+    color: #fff;
+    font-weight: 500px;
+    font-size: 14px;
+    border: 1px solid #2e64fa;
+
+    i {
+      color: #2e64fa !important;
+    }
+
+    span {
+      color: #2e64fa !important;
+    }
+  }
+
+  .el-menu-item.is-active:hover {
+    // background: #2e64fa;
+    color: #2e64fa;
+    font-weight: 500px;
+    font-size: 14px;
+
+    i {
+      color: #2e64fa !important;
+    }
+  }
+
 }
 //顶部header 菜单样式
 .page_header

src/views/targetImprove/components/SideBar.vue

@@ -2,7 +2,7 @@
   <SideBarItem :menuList="menuList" />
 </template>
 <script>
-import SideBarItem from "@/components/SideBarItem.vue";
+import SideBarItem from "./SideBarItem.vue";
 import { mapGetters } from "vuex";
 export default {
   components: {
@@ -16,14 +16,14 @@ export default {
       activeMenuName: "/targetImprove",
       menuList: [
         {
-          icon: "icon_nianjihuaxiang",
+          icon: "icon_baxiangzizhulianxi",
           externalLink: "/targetImprove/pracice",
-          menuName: "自主练习",
+          menuName: "靶向自主练习",
         },
         {
-          icon: "icon_zhidianbuqiang",
+          icon: "icon_baxiangcuotifupan",
           externalLink: "/targetImprove/consolidate",
-          menuName: "错题巩固",
+          menuName: "靶向精准提升",
         },
       ],
       allMenuList:[],//总菜单

src/views/targetImprove/components/SideBarItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-aside class="side_bar">
+    <div class="target_nav_menu">
+      <el-menu
+        :default-active="activeMenuName"
+      
+        text-color="#666"
+        :router="true"
+      >
+        <el-menu-item
+          v-for="(item, index) in menuList"
+          :key="index"
+          :index="item.externalLink" class="menu_one_item"
+        >
+          <div class="menu_one_title" @click="OpenUrl(item)">
+              <div class="icon_box">
+                <i class="iconfont" :class="item.icon"></i>
+              </div>
+              <div class="menu_one_title_text">
+                <span>{{ item.menuName }}</span>
+              </div>
+              
+          </div>
+        </el-menu-item>
+      </el-menu>
+    </div>
+  </el-aside>
+</template>
+<script>
+export default {
+  name: "SideBarItem",
+  props: {
+    menuList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      activeMenuName: "",
+    };
+  },
+  watch: {
+    $route() {
+      this.activeMenu();
+    },
+  },
+  created() {
+    this.activeMenu();
+  },
+  mounted() {
+    this.activeMenu();
+  },
+  methods: {
+
+    OpenUrl(item)
+    {
+      console.log("打印item",item);
+      if(item.externalLink=='')
+      {
+        this.$message.warning("功能正在开发中,敬请期待!");
+      }
+      this.$store.commit('target/SetCurrentStep',1)//切换菜单重置步骤
+    },
+    activeMenu() {
+      const route = this.$route;
+      const { path } = route;
+
+      // if(path == '/userInfo'){
+      //   this.activeMenuName = "/userInfo/personInfo";
+      // }else if(path.includes('examMarking')){
+      // console.log("打印当前路由地址path",path);
+      // console.log("打印menuList",this.menuList);
+      if(path=='/examMarking/help/detail')
+      {
+        // console.log("进来了",);
+        this.activeMenuName = '/examMarking/help';
+      }
+      else
+      {
+          this.activeMenuName = path;
+      }
+      // console.log("打印当前选中菜单activeMenuName",this.activeMenuName);
+      // this.activeMenuName = path;
+      // }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+
+.side_bar {
+    width: 120px !important;
+    border-radius: 10px;
+    position: fixed;
+    background-color: #fff;
+    border-radius: 10px;
+    padding-bottom: 0px;
+  }
+@media screen and (max-width: 1400px) {
+  .side_bar {
+    width: 120px !important;
+    border-radius: 10px;
+    position: fixed;
+    // background-color: #fff;
+    border-radius: 10px;
+    padding-bottom: 0px;
+  }
+}
+.menu_one_title
+{
+  width: 100%;
+}
+
+.menu_one_title_text
+{
+  text-align: center;
+
+  font-weight: 400;
+  font-size: 14px;
+  color: #666666;
+}
+
+.icon_box
+{
+  text-align: center;
+  margin-top: 10px;
+  height: 35px;
+  .iconfont 
+  {
+    font-size: 30px;
+    color: #666666;
+  }
+}
+
+</style>

src/views/targetImprove/components/UserMain.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="user_main">
-    <div class="user_main_left">
+  <div class="user_mains">
+    <div class="user_main_lefts">
       <SideBar/>
     </div>
-    <div class="user_main_right">
+    <div class="user_main_rights">
       <router-view></router-view>
     </div>
   </div>
@@ -31,5 +31,46 @@ export default{
 }
 </script>
 <style lang="scss" scoped>
+//内容区布局
+.user_mains {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  box-sizing: border-box;
 
+  .user_main_lefts {
+    width: 120px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .user_main_rights {
+    width: calc(100% - 130px);
+    height: 100%;
+    background-color: transparent;
+    padding: 0 !important;
+    box-sizing: border-box;
+    overflow-y:auto;
+
+    position: relative;
+    .old_link
+    {
+      position: absolute;
+      right: 20px;
+      top:10px;
+      color: #2E64FA;
+      cursor: pointer;
+      width: 140px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      background-color: #fff;
+    }
+
+  }
+}
 </style>

src/views/targetImprove/consolidate/index.vue

@@ -61,7 +61,7 @@
             <span class="left_title">错题详情</span>  <span>共{{pageInfo.total}}道题</span>
           </div>
           <div class="content_right">
-            <el-button type="primary" @click="ExportPDF()">导出PDF</el-button>
+            <el-button type="primary" @click="ExportPDF()"> <i class="iconfont icon_export"></i>导出个性化错题手册</el-button>
           </div>
         </div>
         <div class="page_jg_20">