解决方案跳转操作新增，页面滚动重置

hookehuyr
Commit 70d584f9f82d3af5467f97331d871d9b2b0f1c08 70d584f9 1 parent be246e0e
Showing 3 changed files with 20 additions and 78 deletions
src/router.js
src/views/index.vue
src/views/solution/index.vue
--- a/src/router.js
View file @70d584f
+++ b/src/router.js
View file @70d584f
 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-26 10:46:21
+ * @LastEditTime: 2024-09-30 16:23:36
- * @FilePath: /vite-project/src/router.js
+ * @FilePath: /hager/src/router.js
  * @Description: 文件描述
  */
 import Vue from 'vue'
@@ -15,7 +15,11 @@ const router = new VueRouter({
   history: false,
   hashbang: true,
   base: '/',
-  routes: ConfigRouter
+  routes: ConfigRouter,
+  scrollBehavior(to, from, savedPosition) {
+    // 每次路由切换后，页面滚动到顶部
+    return { x: 0, y: 0 };
+  }
 })
 router.beforeEach((to, from, next) => {
--- a/src/views/index.vue
View file @70d584f
+++ b/src/views/index.vue
View file @70d584f
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 16:14:48
+ * @LastEditTime: 2024-09-30 16:21:59
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -49,18 +49,7 @@
     <hager-box class="box-2n">
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div class="hager-solution">
-        <div class="solution-item"><p>住宅解决方案</p></div>
+        <div @click="goToSolution(item)" class="solution-item" v-for="(item, index) in 10" :key="index"><p>住宅解决方案</p></div>
-        <div class="solution-item"><p>商建解决方案</p></div>
-        <div class="solution-item"><p>工建解决方案</p></div>
-        <div class="solution-item"><p>供电局解决方案</p></div>
-        <div class="solution-item"><p>发电解决方案</p></div>
-        <div class="solution-item"><p>石油石化解决方案</p></div>
-        <div class="solution-item"><p>冶金解决方案</p></div>
-        <div class="solution-item"><p>电子解决方案</p></div>
-        <div class="solution-item"><p>通信解决方案</p></div>
-        <div class="solution-item"><p>算力解决方案</p></div>
-        <div class="solution-item"><p>交通解决方案</p></div>
-        <div class="solution-item other">Other解决方案</div>
       </div>
     </hager-box>
     <hager-box class="box-n">
@@ -175,6 +164,11 @@ export default {
       this.$router.push({
         path: '/news/detail'
       });
+    },
+    goToSolution (v) {
+      this.$router.push({
+        path: '/solution/detail'
+      });
     }
   }
 }
--- a/src/views/solution/index.vue
View file @70d584f
+++ b/src/views/solution/index.vue
View file @70d584f
@@ -5,67 +5,7 @@
       <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
       <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
       <div class="hager-industry-solutions">
-        <div class="card">
+        <div @click="goToSolution(item)" class="card" v-for="(item, index) in 10" :key="index">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
-              <i class="el-icon-right"></i>
-            </div>
-            <p>Residential Solution Case</p>
-          </div>
-        </div>
-        <div class="card">
           <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
           <div class="card-content">
             <div style="display: flex; align-items: center; justify-content: space-between;">
@@ -98,7 +38,11 @@ export default {
   },
   methods: {
-
+    goToSolution (v) {
+      this.$router.push({
+        path: '/solution/detail'
+      });
+    }
   }
 }
 </script>