vehicle-monitor/src/views/smart-park/components/smart-park-footer/index.vue

48 lines
924 B
Vue

<script lang="ts" setup></script>
<template>
<footer>
<ul class="smart-park__footer-nav">
<li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
<img alt="车辆管理" src="@/views/smart-park/images/car/car-39.png" />
<span class="text-white hover">车辆管理</span>
</li>
</ul>
</footer>
</template>
<style lang="scss" scoped>
footer {
margin: 66px auto auto auto;
width: 772px;
height: 125px;
}
.smart-park__footer-nav {
display: flex;
justify-content: space-around;
align-items: center;
li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 138px;
height: 125px;
background: rgba(16, 11, 87, 0.55);
border-radius: 10px;
img {
width: 67px;
height: 67px;
}
span {
font-size: 15px;
font-weight: lighter;
}
}
}
</style>