页面美化修改

src/api/api.js

@@ -47,7 +47,9 @@ let apiServe = {
     // 商城购买
     shop:(id) => getIdddData("point/getGoodByPoint", "get", id),
     //注销
-    LogOut:() => LayOut("logout","get")
+    LogOut:() => LayOut("logout","get"),
+
+    banner:(data) => getData("home/banna","get",data)
 }
 
 export { apiServe };

src/api/http.js

@@ -5,9 +5,12 @@ import { Message } from 'element-ui';
 //引入路由实例
 import router from '@/router';
 let path = ''
+export const baseURL  = "http://127.0.0.1:8080"
 const server = axios.create({
     // 设置端口前缀
-    baseURL: 'https://9miao.fun:6838/prod-api/api/',
+    // baseURL: 'https://9miao.fun:6838/prod-api/api/',
+    baseURL: baseURL+ '/api/',
+
     // 设置超时时间
     timeout: 5000,
     // 设置请求头 全局

src/components/index/VueIndex.vue

@@ -1,27 +1,33 @@
 <template>
   <div class="index">
     <!-- 轮播图 -->
-    <el-carousel indicator-position="outside">
+    <el-carousel indicator-position="outside" height="70vh">
       <el-carousel-item v-for="(item, index) in imgs" :key="index">
-        <h3><img :src="item.url" alt="" /></h3>
+        <h3><img :src="item.imageUrl" alt="" /></h3>
       </el-carousel-item>
     </el-carousel>
 
     <div class="sub">
       <div class="sublist">
-        <div class="item">
-          <img src="../../assets/12.jpg" alt="" />
-          <p>添加</p>
+        <div class="item-box" @click="go(1)">
+          <div class="item">
+            <img src="../../assets/jifenshangcheng.png" alt="" />
+          </div>
+          <p>积分商场</p>
         </div>
 
-        <div class="item">
-          <img src="../../assets/12.jpg" alt="" />
-          <p>编辑</p>
+        <div class="item-box" @click="go(2)">
+          <div class="item">
+            <img src="@/assets/zs 3.png" alt="" />
+          </div>
+          <p>文化小知识</p>
         </div>
 
-        <div class="item">
-          <img src="../../assets/12.jpg" alt="" />
-          <p>删除</p>
+        <div class="item-box"  @click="go(3)">
+          <div class="item">
+            <img src="@/assets/li.png" alt="" />
+          </div>
+          <p>留言板</p>
         </div>
       </div>
     </div>
@@ -34,7 +40,7 @@
           class="cllist_item"
           v-for="(item, index) in list"
           :key="index"
-          @click="desc(item.id,item.userId)"
+          @click="desc(item.id, item.userId)"
         >
           <img :src="item.cultureImage" alt="" />
           <div class="item_box">
@@ -48,48 +54,65 @@
 </template>
 
 <script>
-import { apiServe }  from '@/api/api.js'
+import { apiServe } from "@/api/api.js";
+import {baseURL} from "@/api/http"
+import axios from 'axios';
 export default {
   data() {
     return {
       imgs: [
-        {
-          url: "https://qiniu.ltshgs.com/5cfc3b6898394a9681d9fed627100d1e.jpg",
-        },
-        {
-          url: "https://qiniu.ltshgs.com/501d1c0683724753a1f8f43ba9d53b32.jpg",
-        },
-        {
-          url: "https://qiniu.ltshgs.com/a32b4f50c0184073bb12aaaa9ebce3b5.jpg",
-        },
-        {
-          url: "https://qiniu.ltshgs.com/4d0888b9477a4ec69a2387e53ff1c8a9.jpg",
-        },
+        // {
+        //   url: "https://qiniu.ltshgs.com/5cfc3b6898394a9681d9fed627100d1e.jpg",
+        // },
+        // {
+        //   url: "https://qiniu.ltshgs.com/501d1c0683724753a1f8f43ba9d53b32.jpg",
+        // },
+        // {
+        //   url: "https://qiniu.ltshgs.com/a32b4f50c0184073bb12aaaa9ebce3b5.jpg",
+        // },
+        // {
+        //   url: "https://qiniu.ltshgs.com/4d0888b9477a4ec69a2387e53ff1c8a9.jpg",
+        // },
       ],
 
-      list: [
-      ],
-      cdata:{
-
-      },
+      list: [],
+      cdata: {},
     };
   },
 
   mounted() {
-    this.cdata.token =  localStorage.getItem('token')
+    this.cdata.token = localStorage.getItem("token");
     console.log(this.token);
-    this.searchUser()
+    this.searchUser();
+    this.getBanner()
   },
 
   methods: {
-    desc(id,cid) {
+    getBanner(){
+      axios.get(baseURL+"/home/banna").then(res=>{
+        console.log(res)
+        this.imgs = res.data.data
+      })
+    },
+    go(e){
+      switch(e){
+        case 1:
+          this.$router.push("shop")
+        case 2:
+        this.$router.push("desc")
+        case 3:
+        this.$router.push("liuyan")
+
+      }
+    },
+    desc(id, cid) {
       console.log(id);
-      this.$router.push({ path:"/desc", query: { id: id} });
+      this.$router.push({ path: "/desc", query: { id: id } });
     },
     searchUser() {
       apiServe.Cllist(this.cdata).then((res) => {
-        console.log(res,"resVueIndex");
-        this.list = res.data.data
+        console.log(res, "resVueIndex");
+        this.list = res.data.data;
       });
     },
   },
@@ -97,6 +120,12 @@ export default {
 </script>
 
 <style scoped lang="less">
+
+.item-box{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .index::v-deep {
   height: 100%;
   //   background-color: #ccc;
@@ -166,7 +195,7 @@ export default {
       background-color: #fff;
       border-radius: 10px;
       //   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-      border: 1px solid #ccc;
+      // border: 1px solid #ccc;
 
       //   background-color: aqua;
       display: flex;
@@ -178,10 +207,15 @@ export default {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-
+        border-radius: 50%;
+        font-weight: 600;
+        color: #fff;
+        width: 100px;
+        height: 100px;
+        background-color: #81ecec;
         img {
-          width: 100px;
-          height: 100px;
+          width: 80px;
+          height: 80px;
           margin-bottom: 10px;
           border-radius: 10px;
         }

src/views/HomeView.vue

@@ -32,7 +32,7 @@ export default {
   .el-card__body,
   .el-main {
     padding: 0;
-    background-color: #F5F6F3;
+    background-color: #dfe6e9;
   }
 }
 </style>

src/views/Login.vue

@@ -74,7 +74,7 @@ export default {
                 }
                 let res = await apiServe.login(data);
                 console.log(res,"LoginRes")
-                if (res.data.token.code == 200) {
+                if (res.data.code == 200) {
                     console.log(res,"res");
                     localStorage.setItem('token', res?.data?.token?.data);
                     this.$message({
@@ -84,6 +84,10 @@ export default {
                     this.$router.push('/')
                 }
             } else {
+                this.$message({
+                    message: res.msg,
+                    type: 'error'
+                })
                 console.log('表单验证失败');
             }
         })

src/views/commonHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <div class="container">
-      <h2>公众文化平台</h2>
+      <h2 style="color: #00b894;">公众文化平台</h2>
       <div class="box">
         <el-menu :default-active="this.$route.path" router class="el-menu-demo" mode="horizontal"
           >
@@ -104,7 +104,7 @@ export default {
 
     .el-menu-demo {
       margin-right: 30px;
-      // background-color: #ccc;
+      // background-color: #b2bec3;
     }
   }