solve nav active bug

.env.development

@@ -0,0 +1,6 @@
+# 开发环境配置
+ENV = 'development'
+
+# 开发环境
+VUE_APP_BASE_API = '/api'
+

src/api/api.js

@@ -1,32 +1,12 @@
 import request from "@/utils/request.js";
 import qs from "qs";
 
-const baseUrl = '/api/jwt/auth'
+const baseUrl = '/api/'
 
 
-//登录
+export function getHotNews() {
-export function authCodeLogin(params) {
     return request({
-        url: baseUrl + "/authCodeLogin/" + params.code,
+        url: "/api",
         method: "get",
     });
-}
+}
-//退出
-export function authLogout(params) {
-    return request({
-        url: baseUrl + "/logout",
-        method: "get",
-    });
-}
-//获取用户数据
-export function getUserInfo(params) {
-    return request({
-        url: baseUrl + "/getUserInfo",
-        method: "get",
-        params:qs.stringfy(params)
-    });
-}
-
-//其实，也不一定就是params，也可以是 query 还有 data 的呀！
-//params是添加到url的请求字符串中的，用于get请求。会将参数加到 url后面。所以，传递的都是字符串。无法传递参数中含有json格式的数据
-//而data是添加到请求体（body）中的， 用于post请求。添加到请求体（body）中，json 格式也是可以的。

src/assets/css/home-style.css

@@ -174,6 +174,7 @@ body.light-mode .video-bg:before {
     border-bottom: 2px solid transparent;
     transition: 0.3s;
 }
+
 @media screen and (max-width: 610px) {
     .header-menu a:not(.main-header-link) {
         display: none;

src/components/home/HomeHeader.vue

@@ -2,14 +2,14 @@
   <div class="header">
     <div class="menu-circle"></div>
     <div class="header-menu">
-      <!--      <router-link class="router" to="/home"><a class="menu-link is-active" >ALL</a></router-link>-->
+      <router-link class="menu-link" active-class="is-active" v-for="(item,index) in tabList" v-if="tabList.length>0" :key="item.index" :to="item.path" >{{item.libel}}</router-link>
-      <!--      <router-link class="router" to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>-->
-      <!--      <router-link  class="router" to="/navDetail"><a class="menu-link">Discover</a></router-link>-->
-      <router-link class="menu-link is-active" to="/home">ALL</router-link>
-      <router-link class="menu-link notify" to="/news">HotNews</router-link>
-      <router-link class="menu-link" to="/navDetail">Discover</router-link>
-      <router-link class="menu-link notify" to="#">Market</router-link>
     </div>
+<!--    <el-menu class="header-menu" :default-active="$route.path" router background-color="#0C0F194C">-->
+<!--      <el-menu-item class="menu-link is-active" index="/home">ALL</el-menu-item>-->
+<!--      <el-menu-item class="menu-link notify" index="/news">HotNews</el-menu-item>-->
+<!--      <el-menu-item  class="menu-link" index="/navDetail">Discover</el-menu-item>-->
+<!--      <el-menu-item  class="menu-link notify" index="#">Market</el-menu-item>-->
+<!--    </el-menu>-->
     <div class="search-bar">
       <input type="text" placeholder="Search">
     </div>
@@ -35,8 +35,9 @@
         :visible.sync="loginDialogVisible"
         width="30vw"
         append-to-body
-        :close-on-click-modal="false"
+        :show-close="false"
-        :before-close="modalClose"
+        :close-on-click-modal="true"
+
     >
       <el-tabs type="border-card">
         <el-tab-pane>
@@ -172,6 +173,12 @@ export default {
   components: {},
   data() {
     return {
+      tabList:[
+          {path:'/home',libel:'ALL'},
+          {path:'/news',libel:'HotNews'},
+          {path:'/navDetail',libel:'navDetail'},
+          {path:'/#',libel:'TEST'},
+      ],
       loginDialogVisible: false,
       passwordVisible: "password",
       icon: "el-icon-view",
@@ -190,7 +197,8 @@ export default {
         captcha:null,
         password: null,
         repassword:null,
-      }
+      },
+      ind: '0', // 用ind作为选择标识
     }
   },
   mounted() {
@@ -202,6 +210,8 @@ export default {
   },
   computed: {},
   methods: {
+
+
     // 打开登陆注册
     openLoginDialog() {
       this.loginDialogVisible = true;
@@ -288,10 +298,16 @@ export default {
 
 }
 </script>
-<style scoped>
+<style>
 .dialog {
   backdrop-filter: blur(20px);
 }
+.el-dialog {
+  background: rgba(255, 255, 255, 0.98);
+}
+.el-dialog__header {
+  display: none;
+}
 
 
 </style>

src/components/hotNews/HotNews.vue

@@ -1,11 +1,10 @@
-
-
 <template>
   <div>
     666
   </div>
 </template>
 <script>
+import {getHotNews} from '@/api/api'
 export default {
   name: "HotNews",
   components: {},
@@ -13,13 +12,19 @@ export default {
     return {}
   },
   mounted() {
-
+  this.getNews();
   },
   created() {
 
   },
   computed: {},
-  methods: {}
+  methods: {
+    getNews(){
+      getHotNews().then(response=>{
+        console.log(response);
+      })
+    }
+  }
 }
 </script>
 <style scoped>

src/main.js

@@ -14,9 +14,6 @@ window.$ = $;
 import * as echarts from 'echarts';//引入echarts
 Vue.prototype.$echarts = echarts //引入组件
 
-import 'bootstrap'
-import 'bootstrap/dist/css/bootstrap.min.css'
-
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 new Vue({

src/utils/request.js

@@ -2,11 +2,11 @@
 // 导入axios
 import axios from 'axios'
 // 使用element-ui Message做消息提醒
-import { Message} from 'element-plus';
+import { Message} from 'element-ui';
 //1. 创建新的axios实例，
 const service = axios.create({
     // 公共接口--这里注意后面会讲
-    baseURL: 'http://localhost:8080',
+    baseURL: process.env.VUE_APP_BASE_API,
     // 超时时间 单位是ms，这里设置了3s的超时时间
     timeout: 3 * 1000
 })

vue.config.js

@@ -10,7 +10,7 @@ module.exports = defineConfig({
 
       '/api': {
         //后端接口的baseurl
-        target: 'http://localhost:8082/helloGithub_war_exploded',
+        target: 'https://open.tophub.today/daily',
         //是否允许跨域
         changeOrigin: true,
         // ws: true,                       //是否代理 websockets
@@ -24,22 +24,6 @@ module.exports = defineConfig({
           '^/api': ''
         }
       },
-      '/image': {
-        //后端接口的baseurl
-        target: 'https://tucdn.wpon.cn/api/',
-        //是否允许跨域
-        changeOrigin: true,
-        // ws: true,                       //是否代理 websockets
-        // secure: true,
-        // 'secure': true,
-        headers: {
-          Connection: "kepp-alive"
-        },
-        pathRewrite: {
-          //这里的作用是使用去掉api
-          '^/image': ''
-        }
-      },
     }
   }
 })