优化路由间切换从顶部开始；优化列表页的搜索；优化登录流程

src/App.vue

@@ -7,7 +7,9 @@
       <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"></router-view> -->
-    <el-backtop :bottom="100" :right="80"></el-backtop>
+    <el-backtop :bottom="100" :right="80">
+      <svg-icon icon-class="backToTop"></svg-icon>
+    </el-backtop>
     <Footer />
   </div>
 </template>

src/components/NavBar/index.vue

@@ -59,7 +59,13 @@
         </div>
       </div>
     </div>
-    <el-dialog :visible.sync="loginVisible" append-to-body>
+    <el-dialog
+      :visible.sync="loginVisible"
+      append-to-body
+      v-loading="loading"
+      element-loading-background="rgba(0, 0, 0, 0.5)"
+      :element-loading-text="loadingText"
+    >
       <div slot="title" class="login-title">
         <div
           :class="['title-item', isLoginByUsername ? 'active' : '']"
@@ -135,7 +141,6 @@
             round
             @click="handleLoginSubmit"
             size="small"
-            :loading="loading"
             class="loginBtn"
             >登 陆</el-button
           >
@@ -193,8 +198,8 @@ export default {
 
         if (value.params.themeType) {
           this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
-        }else{
-          this.$store.commit("app/CHANGE_NAV_COLOR", '1');
+        } else {
+          this.$store.commit("app/CHANGE_NAV_COLOR", "1");
         }
       },
       immediate: true,
@@ -282,6 +287,7 @@ export default {
         captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
       },
       isLoginByUsername: true,
+      loadingText: "",
     };
   },
   mounted() {
@@ -340,6 +346,7 @@ export default {
         if (valid) {
           // debugger
           this.loading = true;
+          this.loadingText = "正在登陆";
           const { account, password, captcha } = this.loginForm;
           const params = {
             captcha,
@@ -362,6 +369,7 @@ export default {
                 }
               }
               this.loading = false;
+              this.$message.success("登录成功");
             })
             .catch((err) => {
               console.log(err);
@@ -377,7 +385,7 @@ export default {
     handleCloseLogin() {
       this.loginVisible = false;
       this.$refs["loginForm"].resetFields;
-    },
+    },                                      
 
     handleGetCaptcha() {
       this.currdatetime = new Date().getTime();
@@ -453,7 +461,7 @@ export default {
     .logo-container {
       width: 380px;
       height: 74px;
-      img{
+      img {
         width: 100%;
         height: 100%;
       }
@@ -529,7 +537,7 @@ export default {
   }
 }
 
-::v-deep .el-button.is-round{
+::v-deep .el-button.is-round {
   padding: 8px 20px;
 }
 .el-dropdown-menu {

src/components/SearchBar/index.vue

@@ -70,5 +70,6 @@ export default {
 }
 .searchButton{
   width: 300px;
+
 }
 </style>

src/icons/svg/backToTop.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1665301449218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3204" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M832 64H192c-17.6 0-32 14.4-32 32s14.4 32 32 32h640c17.6 0 32-14.4 32-32s-14.4-32-32-32zM852.484 519.469L538.592 205.577a30.79 30.79 0 0 0-3.693-4.476c-6.241-6.241-14.556-9.258-22.899-9.09-8.343-0.168-16.658 2.849-22.899 9.09a30.778 30.778 0 0 0-3.693 4.476L171.419 519.566C164.449 525.448 160 534.228 160 544c0 0.058 0.004 0.115 0.004 0.172-0.124 8.285 2.899 16.529 9.096 22.727 6.202 6.202 14.453 9.224 22.743 9.096 0.066 0 0.131 0.005 0.197 0.005H352v320c0 35.2 28.8 64 64 64h192c35.2 0 64-28.8 64-64V576h160c0.058 0 0.115-0.004 0.172-0.004 8.285 0.124 16.529-2.899 22.727-9.096 6.198-6.198 9.22-14.442 9.096-22.727 0-0.058 0.004-0.115 0.004-0.172 0.001-9.826-4.489-18.65-11.515-24.532z" p-id="3205"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -128,7 +128,13 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  routes
+  routes,
+  scrollBehavior(to, from, savePosition) {
+    // return 期望滚动到哪个的位置
+    return {
+      y: 0
+    }
+  }
 })
 
 export default router

src/views/culturalRelic/Detail.vue

@@ -427,10 +427,11 @@ export default {
       }
     },
     handleToDetail(crId) {
-      const newPage = this.$router.resolve({
-        path: `culturalReli/${crId}`,
-      });
-      window.open(newPage.href, "_blank");
+      // const newPage = this.$router.resolve({
+      //   path: `culturalReli/${crId}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`culturalRelic/${crId}`)
     },
     // 点击音频
     handleClickAudio() {
@@ -466,10 +467,11 @@ export default {
 
     handleToCr(item) {
       const { crId } = item;
-      const newPage = this.$router.resolve({
-        path: "/culturalRelic/" + crId,
-      });
-      window.open(newPage.href, "_blank");
+      // const newPage = this.$router.resolve({
+      //   path: "/culturalRelic/" + crId,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`culturalRelic/${crId}`)
     },
   },
 };
@@ -681,7 +683,7 @@ $blue: #2069c4;
             .basic-info {
               .body-item {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 margin-bottom: 10px;
                 .label {
                   display: flex;

src/views/culturalRelic/index.vue

@@ -230,7 +230,7 @@ export default {
     this.culturalRelicYears = res.culturalRelicYears;
     traveseYears(this.culturalRelicYears);
     function traveseYears(arr) {
-      if (arr &&arr.length > 0) {
+      if (arr && arr.length > 0) {
         arr.map((item) => {
           if (item.children && item.children.length == 0) {
             delete item.children;
@@ -286,10 +286,11 @@ export default {
 
     handleClick(item) {
       const { crId } = item;
-      const newPage = this.$router.resolve({
-        path: "culturalRelic/" + crId,
-      });
-      window.open(newPage.href, "_blank");
+      // const newPage = this.$router.resolve({
+      //   path: "culturalRelic/" + crId,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`culturalRelic/${crId}`);
     },
     handleClickThreeD() {
       this.onlyShow3d = !this.onlyShow3d;
@@ -300,6 +301,7 @@ export default {
 
     handleTypeChange(value) {
       this.type = value;
+      this.list.current = 1;
       this.loadData();
     },
     handleYearsChange(value) {
@@ -308,6 +310,7 @@ export default {
       } else {
         this.years = value;
       }
+      this.list.current = 1;
       this.loadData();
       this.$refs.years.dropDownVisible = false;
     },
@@ -410,7 +413,7 @@ $text-indent: 16px;
         background: url("@/assets/imgs/list/search-button-bg.png") transparent;
         background-size: 100% 100%;
         color: #444;
-        font-size: 14px;
+        font-size: 16px;
         transition: all 0.2s ease;
 
         &:hover {
@@ -606,6 +609,7 @@ $text-indent: 16px;
     &::placeholder {
       text-indent: 10px;
       color: #999;
+      font-size: 16px;
     }
   }
 }

src/views/display/index.vue

@@ -243,10 +243,11 @@ export default {
 
     handleClick(item) {
       const { themeType, exhibitionId } = item;
-      const newPage = this.$router.resolve({
-        path: `display/${themeType}/${exhibitionId}`,
-      });
-      window.open(newPage.href, "_blank");
+      // const newPage = this.$router.resolve({
+      //   path: `display/${themeType}/${exhibitionId}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`display/${themeType}/${exhibitionId}`);
     },
     defImg(e) {
       e.target.src = require("@/assets/404_images/no-pic.png");
@@ -254,6 +255,7 @@ export default {
 
     handleTypeChange(value) {
       this.type = value;
+      this.list.current = 1;
       this.loadData();
     },
     // handleKeyWordChange(value) {
@@ -264,6 +266,7 @@ export default {
     handleRegionChange(value) {
       this.regionCode = value;
       this.$refs.region.dropDownVisible = false;
+      this.list.current = 1;
       this.loadData();
     },
 
@@ -345,7 +348,7 @@ $text-indent: 16px;
         background: url("@/assets/imgs/list/search-button-bg.png");
         background-size: 100% 100%;
         color: #444;
-        font-size: 14px;
+        font-size: 16px;
         width: 156px;
         height: 54px;
         &:hover {
@@ -441,7 +444,7 @@ $text-indent: 16px;
               padding: 36px 30px;
               transition: all 0.5s ease;
               background: #fff;
-               .name {
+              .name {
                 font-size: 22px;
                 font-weight: bold;
                 color: #2069c4;
@@ -516,6 +519,7 @@ $text-indent: 16px;
     &::placeholder {
       text-indent: 10px;
       color: #999;
+      font-size: 16px;
     }
   }
 }

src/views/home/components/Boutique.vue

@@ -2,7 +2,7 @@
   <div class="boutique">
     <el-carousel class="slider" autoplay arrow="nerver">
       <el-carousel-item>
-        <div>
+        <div class="img-container">
           <img src="@/assets/imgs/boutique/1.jpg" width="100%" />
         </div>
       </el-carousel-item>
@@ -28,4 +28,13 @@ export default {
   height: 100vh;
   width: 100%;
 }
+.img-container{
+  width: 100%;
+  height: 100%;
+  img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 </style>>
\ No newline at end of file

src/views/home/components/CulturalRelic.vue

@@ -88,9 +88,11 @@ export default {
     },
     handleClick(item) {
       const { crId } = item;
-      this.$router.push({
-        path: "culturalRelic/" + crId,
-      });
+      // const newPage = this.$router.resolve({
+      //   path: `culturalRelic/${crId}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`culturalRelic/${crId}`)
     },
   },
 };
@@ -178,7 +180,11 @@ $blue: #2069c4;
       width: 100%;
       padding: 16px;
       // background-color: rgba($color: #000000, $alpha: 0.2);
-      background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2));
+      background-image: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.5),
+        rgba(0, 0, 0, 0.2)
+      );
       color: #fff;
       transform: translateY(100px);
       text-align: right;

src/views/home/components/Display.vue

@@ -81,11 +81,12 @@ export default {
       console.log(-this.currentIndex * this.sliderItemWidth);
     },
     handleClick(item) {
-      console.log(item);
-      const { exhibitionId } = item;
-      this.$router.push({
-        path: "display/" + exhibitionId,
-      });
+      const { exhibitionId, themeType } = item;
+      // const newPage = this.$router.resolve({
+      //   path: `display/${themeType}/${exhibitionId}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`display/${themeType}/${exhibitionId}`);
     },
     getSlideItemWidth() {
       setTimeout(() => {

src/views/home/components/MuseumMap.vue

@@ -7,9 +7,7 @@
     <div class="wrapper">
       <div class="content wow animate__animated animate__fadeIn">
         <div class="name">{{ curMuseum.name }}</div>
-        <div class="intro" v-html="curMuseum.intro">
-         
-        </div>
+        <div class="intro" v-html="curMuseum.intro"></div>
         <!-- <div
           class="entrance"
           @click="handleClick(curMuseum)"
@@ -18,13 +16,16 @@
           <span class="entrance-text">点击进入</span>
           <img src="@/assets/imgs/home/entrance-black.png" alt="" />
         </div> -->
-        <EntranceIcon color="#000" @click.native="handleClick(curMuseum)"/>
+        <EntranceIcon color="#000" @click.native="handleClick(curMuseum)" />
       </div>
 
       <div class="map wow animate__animated animate__fadeInRight">
         <div id="map"></div>
 
-        <transition enter-active-class="animate__animated animate__fadeInLeftBig" leave-active-class="animate__animated animate__fadeOutLeftBig">
+        <transition
+          enter-active-class="animate__animated animate__fadeInLeftBig"
+          leave-active-class="animate__animated animate__fadeOutLeftBig"
+        >
           <div class="chart-refresh" v-if="regionName !== 'guizhou'">
             <i class="el-icon-refresh-left" @click="initChart()"></i>
           </div>
@@ -106,7 +107,7 @@ export default {
         });
       }
     },
-    initChart(data = this.museumList, name = 'guizhou', hasClick = true) {
+    initChart(data = this.museumList, name = "guizhou", hasClick = true) {
       let that = this;
       this.regionName = name;
 
@@ -320,9 +321,13 @@ export default {
     },
     handleClick(item) {
       const { id } = item;
+      // const newPage = this.$router.resolve({
+      //   path: `museum/${id}`,
+      // });
+      // window.open(newPage.href, "_blank");
       this.$router.push({
-        path: "museum/" + id,
-      });
+        path: `museum/${id}`,
+      })
     },
     /* init() {
       echarts.registerMap("guizhou", guizhou);
@@ -404,6 +409,11 @@ export default {
         font-size: 14px;
         font-weight: 300;
         margin-bottom: 85px;
+        overflow: hidden;
+        -webkit-line-clamp: 20;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
       }
       .entrance {
         font-size: 16px;

src/views/home/components/Virtural.vue

@@ -69,7 +69,11 @@ export default {
       }
     },
     handleClick(item) {
-      window.open(item.url);
+      this.$message(`即将打开${item.name}虚拟展厅...`)
+      setTimeout(()=>{
+        window.open(item.url);
+      },1000)
+      
     },
   },
 };
@@ -92,7 +96,7 @@ $blue: #2069c4;
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding: 60px 0 80px 0;
+      padding: 100px 0 80px 0;
       font-family: "Alibaba PuHuiTi";
       .ch {
         font-size: 30px;
@@ -123,7 +127,7 @@ $blue: #2069c4;
           margin-bottom: 60px;
           width: 258px;
           overflow: hidden;
-          -webkit-line-clamp: 3;
+          -webkit-line-clamp: 4;
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-box-orient: vertical;

src/views/home/index.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script>
-// import NavBar from "@/components/NavBar";
-// import Footer from "@/components/Footer";
 import Boutique from "./components/Boutique.vue";
 import MuseumMap from "./components/MuseumMap.vue";
 import Virtural from "./components/Virtural.vue";
@@ -19,20 +17,12 @@ import CulturalRelic from "./components/CulturalRelic.vue";
 export default {
   name: "Home",
   components: {
-    // NavBar,
-    // Footer,
     MuseumMap,
     Boutique,
     Virtural,
     Display,
     CulturalRelic,
   },
-  // data() {
-  //   return {
-  //     headerFixed: false,
-  //   };
-  // },
-
 };
 </script>
 

src/views/museum/Detail.vue

 <!-- -->
 <template>
-  <div class="display-detail">
+  <div class="museum-detail">
     <div class="wrapper">
-      <div class="back"  @click="handleBack"> 
+      <!-- <div class="back" @click="handleBack">
         <svg-icon icon-class="mz-fh"></svg-icon>
         <span>返回上页 </span>
-      </div>
+      </div> -->
       <el-row class="detail-container" :gutter="10">
         <el-col class="cr-images" :span="24">
           <el-image
-            style="width: 100%; height:600px"
-            :src="$getFullUrl(museumDetail.faceImagePressUrl || museumDetail.faceImageUrl)"
+            style="width: 100%; height: 600px"
+            :src="
+              $getFullUrl(
+                museumDetail.faceImagePressUrl || museumDetail.faceImageUrl
+              )
+            "
             fit="contain"
           ></el-image>
           <div class="enlarge" @click="handelPreviewImages">
@@ -29,7 +33,7 @@
               <h2>
                 {{ museumDetail.name }}
               </h2>
-            
+
               <!-- <span>
                 <svg-icon
                   icon-class="view"
@@ -127,8 +131,8 @@ export default {
     },
 
     handleBack() {
-      // this.$router.go(-1);
-      this.$router.push({path:'/museum'})
+      this.$router.go(-1);
+      // this.$router.push({path:'/museum'})
     },
 
     closeImgViewer() {
@@ -139,7 +143,6 @@ export default {
       this.imgViewerVisible = true;
       this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)];
     },
-
   },
 };
 </script>
@@ -149,16 +152,17 @@ export default {
   margin-right: 20px;
 }
 $label: #9f9c9a;
-.search {
-  width: 1200px;
-  margin: auto;
-  margin-bottom: 32px;
+
+.museum-detail {
+  padding: 40px 13%;
 }
 .wrapper {
-  width: 1200px;
+  width: 100%;
+
   margin: 60px auto;
   background-color: #fff;
   padding: 40px;
+  box-shadow: 6px 7px 6px 3px rgb(0 0 0 / 4%);
   .back {
     font-size: 18px;
     display: flex;
@@ -174,7 +178,7 @@ $label: #9f9c9a;
     }
   }
   .detail-container {
-    margin: 32px 0; 
+    margin: 32px 0;
     // display: flex;
     img {
       max-width: 100%;
@@ -237,7 +241,7 @@ $label: #9f9c9a;
         }
       }
 
-      .intro{
+      .intro {
         text-indent: 32px;
       }
     }

src/views/museum/index.vue

@@ -41,7 +41,7 @@
             v-for="(item, index) in list.records"
             :key="index"
           >
-          <!-- id为1 的是文旅厅 -->
+            <!-- id为1 的是文旅厅 -->
             <div
               class="container wow animate__animated animate__fadeInUp"
               v-if="item.status == 1 && item.id != '1'"
@@ -209,10 +209,13 @@ export default {
     },
     handleClick(item) {
       const { id } = item;
-      const newPage = this.$router.resolve({
+      // const newPage = this.$router.resolve({
+      //   path: `museum/${id}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push({
         path: `museum/${id}`,
       });
-      window.open(newPage.href, "_blank");
     },
 
     handleTypeChange(value) {
@@ -292,7 +295,7 @@ $text-indent: 16px;
         background: url("@/assets/imgs/list/search-button-bg.png");
         background-size: 100% 100%;
         color: #444;
-        font-size: 14px;
+        font-size: 16px;
         .svg-icon {
           margin-right: 4px;
         }
@@ -429,6 +432,7 @@ $text-indent: 16px;
     &::placeholder {
       text-indent: 10px;
       color: #999;
+      font-size: 16px;
     }
   }
 }

src/views/personal/components/Info.vue

 <template>
   <div class="personal-info">
     <div class="name">个人信息</div>
-    <div class="info-item">
-      <div class="label">用户名</div>
-      <el-input
-        size="small"
-        v-if="isEditing"
-        v-model="userInfoForm.username"
-        style="width: 300px"
-      ></el-input>
-      <div class="value" v-else>{{ userInfoForm.username || "暂未填写" }}</div>
-    </div>
-    <div class="info-item">
-      <div class="label">昵称</div>
-      <el-input
-        size="small"
-        v-if="isEditing"
-        v-model="userInfoForm.nickName"
-        style="width: 300px"
-      ></el-input>
-      <div class="value" v-else>{{ userInfoForm.nickName || "暂未填写" }}</div>
-    </div>
-    <div class="info-item">
-      <div class="label">手机号</div>
-      <el-input
-        size="small"
-        v-if="isEditing"
-        v-model="userInfoForm.phone"
-        style="width: 300px"
-      ></el-input>
-      <div class="value" v-else>{{ userInfoForm.phone || "暂未填写" }}</div>
-    </div>
-    <div class="buttons">
-      <div
-        class="edit-button"
-        v-if="!isEditing"
-        @click="handleEdit('userInfo')"
-      >
-        修改个人信息
-      </div>
-      <div class="edit-button" v-if="!isEditing" @click="handleEdit('pwd')">
-        修改密码
-      </div>
-      <div class="edit-button" v-if="isEditing" @click="handleReSet">
-        取消修改
-      </div>
-      <div class="edit-button" v-if="isEditing" @click="handleSubmit">保存</div>
-    </div>
+    <el-form
+      :model="userInfoForm"
+      :rules="userInfoRules"
+      label-width="100px"
+      class="userInfoForm"
+      ref="userInfoForm"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input
+          size="small"
+          v-if="isEditing"
+          v-model="userInfoForm.username"
+        ></el-input>
+        <div class="value" v-else>
+          {{ userInfoForm.username || "暂未填写" }}
+        </div>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickName">
+        <el-input
+          size="small"
+          v-if="isEditing"
+          v-model="userInfoForm.nickName"
+        ></el-input>
+        <div class="value" v-else>
+          {{ userInfoForm.nickName || "暂未填写" }}
+        </div>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          size="small"
+          v-if="isEditing"
+          v-model="userInfoForm.phone"
+        ></el-input>
+        <div class="value" v-else>
+          {{ userInfoForm.phone || "暂未填写" }}
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          class="edit-button"
+          v-if="!isEditing"
+          @click.native="handleEdit('userInfo')"
+        >
+          修改个人信息
+        </el-button>
+        <el-button
+          class="edit-button"
+          v-if="!isEditing"
+          @click.native="handleEdit('pwd')"
+        >
+          修改密码
+        </el-button>
+        <el-button
+          class="edit-button"
+          v-if="isEditing"
+          @click.native="handleCancelUserInfo"
+        >
+          取消修改
+        </el-button>
+        <el-button
+          class="edit-button"
+          v-if="isEditing"
+          @click.native="handleSubmit"
+        >
+          保存
+        </el-button>
+      </el-form-item>
+    </el-form>
     <el-dialog
       title="修改密码"
       :visible="dialogFormVisible"
@@ -72,7 +94,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button @click="handleCancelPwd">取 消</el-button>
         <el-button type="primary" @click="handleChangePwd">确 定</el-button>
       </div>
     </el-dialog>
@@ -134,6 +156,29 @@ export default {
           { validator: validatePass2, trigger: "blur", required: true },
         ],
       },
+      userInfoRules: {
+        username: [
+          {
+            required: true,
+            message: "请填写用户名",
+            trigger: "blur",
+          },
+        ],
+        nickName: [
+          {
+            required: true,
+            message: "请填写昵称",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: "请填写手机号",
+            trigger: "blur",
+          },
+        ],
+      },
     };
   },
   computed: {
@@ -158,41 +203,58 @@ export default {
       }
     },
 
-    async handleSubmit(type) {
-      let res = await editUserInfo(this.userInfoForm);
-      if (res.code == "0") {
-        this.$message.success("修改成功！");
-        this.$store.commit("user/SET_USERINFO", this.userInfoForm);
-        setUserInfo(this.userInfoForm);
-      }
-      this.isEditing = false;
+    handleSubmit(type) {
+      this.$refs.userInfoForm.validate(async (valid) => {
+        if (valid) {
+          let res = await editUserInfo(this.userInfoForm);
+          if (res.code == "0") {
+            this.$message.success("修改成功！");
+            this.$store.commit("user/SET_USERINFO", this.userInfoForm);
+            setUserInfo(this.userInfoForm);
+          }
+          this.isEditing = false;
+        }
+      });
     },
 
-    handleReSet() {
+    handleCancelUserInfo() {
       this.isEditing = false;
       this.userInfoForm = this.userInfo;
+      this.$refs.userInfoForm.resetFields();
     },
 
     async handleChangePwd() {
-      const { newPwd, oldPwd } = this.pwdForm;
-      const params = {
-        newPwd,
-        oldPwd,
-      };
-      let res = await editUserPwd(params);
-      if (res.code == "0") {
-        let path = this.$route.fullPath;
-        if (path.indexOf("/personal") != -1) {
-          this.$router.push("/");
+      this.$refs.pwdForm.validate(async (valid) => {
+        if (valid) {
+          const { newPwd, oldPwd } = this.pwdForm;
+          const params = {
+            newPwd,
+            oldPwd,
+          };
+          let res = await editUserPwd(params);
+          if (res.code == "0") {
+            let path = this.$route.fullPath;
+            if (path.indexOf("/personal") != -1) {
+              this.$router.push("/");
+            }
+            this.$message.success("修改成功，请重新登录！");
+            setTimeout(async () => {
+              await this.$store.dispatch("user/logout");
+              this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
+            }, 2000);
+          }
         }
-        this.$message.success("修改成功，请重新登录！");
-        this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
-      }
+      });
     },
 
     handleCloseChangePwd() {
       this.dialogFormVisible = false;
     },
+
+    handleCancelPwd() {
+      this.dialogFormVisible = false;
+      this.$refs.pwdForm.resetFields();
+    },
   },
 };
 </script>
@@ -208,6 +270,12 @@ export default {
   }
 }
 
+::v-deep .el-dialog__body {
+  padding: 30px 40px 10px 20px;
+}
+.userInfoForm {
+  width: 400px;
+}
 .personal-info {
   margin-left: 40px;
   .name {

src/views/personal/components/Like.vue

@@ -25,7 +25,7 @@
         ></el-empty>
       </el-tab-pane>
     </el-tabs>
-    <div class="pagination" v-if="list.records.length>0">
+    <div class="pagination" v-if="list.records.length > 0">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
@@ -42,7 +42,7 @@
 
 <script>
 import Card from "./Card";
-// import CulturalRelicCard from "@/components/CulturalRelicCard";
+import { mapGetters } from "vuex";
 import { getLikeList } from "@/api/user";
 export default {
   name: "Like",
@@ -94,9 +94,14 @@ export default {
       this.loadList(name);
     },
   },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
   mounted() {
     let type = "biz_cultural_relic";
-    this.loadList(type);
+    if (this.userInfo && this.userInfo.username && this.userInfo.nickName) {
+      this.loadList(type);
+    }
   },
   methods: {
     async loadList(type) {

src/views/personal/index.vue

 <template>
   <div class="personal">
     <div class="content-wrapper">
-      <div class="title wow animate__animated animate__fadeInLeft">个人中心</div>
+      <div class="title wow animate__animated animate__fadeInLeft">
+        个人中心
+      </div>
       <div class="bottom-line wow animate__animated animate__fadeInLeft"></div>
       <div class="main">
         <el-tabs :tab-position="'left'" type="card" class="wrapper">
@@ -53,17 +55,15 @@ export default {
 <style lang='scss' scoped>
 $blue: #2069c4;
 .personal {
-  // width: 1200px;
-  padding-bottom: 100px;
-  display: flex;
-  justify-content: center;
+  padding: 40px 0;
   background-color: #fff;
+  min-height: calc(100vh - 300px);
   .content-wrapper {
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    padding: 60px 0;
-    width: 1200px;
+    padding: 60px 13% 0 13%;
+    width: 100%;
 
     .title {
       font-family: KaiTi;

src/views/virtual/index.vue

@@ -313,7 +313,7 @@ $text-indent: 16px;
         background: url("@/assets/imgs/list/search-button-bg.png");
         background-size: 100% 100%;
         color: #444;
-        font-size: 14px;
+        font-size: 16px;
         &:hover {
           -webkit-box-reflect: below 2px
             linear-gradient(transparent, rgba(0, 0, 0, 0.3));
@@ -458,6 +458,7 @@ $text-indent: 16px;
     &::placeholder {
       text-indent: 10px;
       color: #999;
+      font-size: 16px;
     }
   }
 }