Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
70d584f9 1 parent be246e0e

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

Inline Side-by-side
Showing 3 changed files with 20 additions and 78 deletions
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-26 10:46:21
* @FilePath: /vite-project/src/router.js
* @LastEditTime: 2024-09-30 16:23:36
* @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) => {
......
<!--
* @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 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 @click="goToSolution(item)" class="solution-item" v-for="(item, index) in 10" :key="index"><p>住宅解决方案</p></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'
});
}
}
}
......
......@@ -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">
<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">
<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;">
......@@ -98,7 +38,11 @@ export default {
},
methods: {
goToSolution (v) {
this.$router.push({
path: '/solution/detail'
});
}
}
}
</script>
......