footer.vue
1.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
<el-row class="footer-wrap">
<template v-for="item in footBtn">
<el-col :span="8" class="footer-btn" @click="linkTo(item.path)">
<el-image class="btn-img" fit="contain" :src="item.isActive ? getImage(item.icon1, '/home'): getImage(item.icon2, '/home')"/>
<div :class="item.isActive ? 'btn-dsc active' : 'btn-dsc'">{{item.name}}</div>
</el-col>
</template>
<div v-show="false">{{route.path}}</div>
</el-row>
</template>
<script setup lang="ts">
const route = useRoute();
import router from "../router/index";
import getImage from './../assets/getImage'
let footBtn = reactive([
{
name: '首页',
path: '/',
isActive: false,
icon1: 'home1.png',
icon2: 'home2.png',
},
{
name: '采购融资',
path: '/product',
isActive: false,
icon1: 'product1.png',
icon2: 'product2.png',
},
{
name: '我的',
path: '/mine',
isActive: false,
icon1: 'mine1.png',
icon2: 'mine2.png',
}
])
watchEffect(() => {
footBtn.forEach(item=> {
item.isActive = false
if (item.path == route.path) {
item.isActive = true
}
})
})
let linkTo = (url: string) => {
router.push(url)
}
</script>
<style scoped>
.btn-dsc.active {
background: linear-gradient(0deg, #475EE2 0%, #717AFD 81.0791015625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>