164 lines
3.8 KiB
Vue
164 lines
3.8 KiB
Vue
<template>
|
|
<div class="choicepart-container">
|
|
<div class="choicepat-navbar">
|
|
<navbar :showhome="false" :show-title="true" />
|
|
</div>
|
|
<div class="choicepart-box">
|
|
<div
|
|
v-for="(item, index) in moduleList"
|
|
:key="item.path"
|
|
class="choicepart-item"
|
|
@click="handelClick(item, index)"
|
|
>
|
|
<div class="choicepart-item-border">
|
|
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="">
|
|
</div>
|
|
<div class="choicepart-item-title" :title="item.meta.title">{{ item.meta.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { routes } from '@/router'
|
|
import { Navbar } from '@/layout/components'
|
|
|
|
export default {
|
|
name: 'HomeIndex',
|
|
components: { Navbar },
|
|
data() {
|
|
return {
|
|
moduleList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getModuleList()
|
|
},
|
|
methods: {
|
|
getModuleList() {
|
|
const temp = []
|
|
routes &&
|
|
routes.map((item) => {
|
|
if (item.hidden) {
|
|
return true
|
|
}
|
|
temp.push(item)
|
|
})
|
|
this.moduleList = temp
|
|
console.log(this.moduleList)
|
|
},
|
|
handelClick(item, index) {
|
|
this.$store.dispatch('app/setChoicepart', index)
|
|
if (item.meta.unuse) {
|
|
this.$message.warning(this.$t('choisePart.module'))
|
|
} else {
|
|
this.toRouter(item)
|
|
}
|
|
},
|
|
toRouter(item) {
|
|
if (item.children) {
|
|
this.toRouter(item.children[0])
|
|
} else {
|
|
this.$router.push({ name: item.name })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.choicepart-container {
|
|
min-width: 100%;
|
|
min-height: 100vh;
|
|
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
|
|
background: url('../../assets/img/choicepart/choicepart-back.png') repeat;
|
|
background-size: cover;
|
|
overflow-x: auto;
|
|
.choicepart-box {
|
|
width: 1585px;
|
|
margin: 0 auto;
|
|
padding-top: 25vh;
|
|
.choicepart-item {
|
|
display: inline-block;
|
|
width: 184px;
|
|
height: 223px;
|
|
margin: 40px;
|
|
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
// border: 1px dashed #fff;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
top: 0;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
position: relative;
|
|
img {
|
|
width: 104px;
|
|
height: 99px;
|
|
position: absolute;
|
|
top: 32px;
|
|
left: 43px;
|
|
}
|
|
.choicepart-item-border {
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
padding: 0 5px;
|
|
line-height: 32px;
|
|
font-size: 28px;
|
|
font-weight: lighter;
|
|
color: #2c6bd8;
|
|
overflow: hidden;
|
|
}
|
|
.choicepart-item-title {
|
|
overflow: hidden;
|
|
padding: 0 10px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 2px;
|
|
right: 2px;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
letter-spacing: 2px;
|
|
background-color: rgba($color: #0b58ff, $alpha: 0.45);
|
|
}
|
|
}
|
|
.choicepart-item:hover {
|
|
.choicepart-item-title {
|
|
background-color: rgba($color: #0b58ff, $alpha: 1);
|
|
}
|
|
}
|
|
}
|
|
.choicepat-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
::-webkit-scrollbar-track-piece {
|
|
//滚动条凹槽的颜色，还可以设置边框属性
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
::-webkit-scrollbar {
|
|
//滚动条的宽度
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
//滚动条的设置
|
|
background-color: #dddddd;
|
|
background-clip: padding-box;
|
|
min-height: 28px;
|
|
border-radius: 9px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #bbb;
|
|
}
|
|
</style>
|