init
This commit is contained in:
231
src/views/ChoicePart/index.vue
Normal file
231
src/views/ChoicePart/index.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="choicepart-container">
|
||||
<div class="choicepat-navbar">
|
||||
<navbar :showhome="false" :show-title="true" />
|
||||
</div>
|
||||
<div class="choicepart-container-box" :style="{ width: '100%' }" />
|
||||
<div class="choicepart-box grid">
|
||||
<div
|
||||
v-for="(item, index) in routeList"
|
||||
:key="item.path"
|
||||
class="choicepart-item grid-item"
|
||||
@click="handelClick(item, index)"
|
||||
>
|
||||
<!-- :style="{ background: colorArr.colorList[index % 9] }" -->
|
||||
<div class="choicepart-item-border">
|
||||
<div class="choicepart-item-icon"><div class="svgDiv"><svg-icon class="item-icon" :icon-class="item.meta.iconPart" /></div></div>
|
||||
<div class="choicepart-item-title" :style="language === 'en' ? {fontSize: '22px'} : ''">{{ item.meta.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Masonry from 'masonry-layout'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { constantRoutes } from '@/router'
|
||||
import { Navbar } from '@/layout/components'
|
||||
import store from '@/store'
|
||||
const colorList = ['#8080ff', '#ff8080', '#b004fb', '#ff409f', '#00caca', '#8080c0', '#cccc00', '#ff8040', '#0c4d9e']
|
||||
const colorList1 = ['#b4b4ff', '#ffb4b4', '#c648fb', '#ff86c2', '#66f6f6', '#a2a2f3', '#ffff9a', '#ffc3a5', '#367cd4']
|
||||
|
||||
export default {
|
||||
name: 'ChoicePart',
|
||||
components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
rowNum: 1,
|
||||
colorArr: {
|
||||
colorList,
|
||||
colorList1
|
||||
},
|
||||
windowWidth: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routeList() {
|
||||
const cangoList = []
|
||||
const permission_routes = store.getters.permission_routes
|
||||
console.log(constantRoutes)
|
||||
console.log(permission_routes)
|
||||
permission_routes.map(item => {
|
||||
if (!item.hidden && item.meta) {
|
||||
cangoList.push(item)
|
||||
}
|
||||
})
|
||||
const formatList = cangoList.map((item, index) => {
|
||||
return this.setIndex(item, index)
|
||||
})
|
||||
console.log(formatList)
|
||||
return formatList
|
||||
},
|
||||
...mapGetters(['language'])
|
||||
},
|
||||
created() {
|
||||
this.windowWidth = window.innerWidth
|
||||
},
|
||||
mounted() {
|
||||
const grid = document.querySelector('.grid')
|
||||
new Masonry(grid, {
|
||||
itemSelector: '.grid-item',
|
||||
columnWidth: 300
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
const grid = document.querySelector('.grid')
|
||||
new Masonry(grid, {
|
||||
itemSelector: '.grid-item',
|
||||
columnWidth: 300
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
resize() {},
|
||||
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 })
|
||||
}
|
||||
},
|
||||
setIndex(list, index) {
|
||||
list.meta.routeIndex = index
|
||||
if (list.children) {
|
||||
list.children.map(item => {
|
||||
this.setIndex(item, index)
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.choicepart-container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
|
||||
background: url('../../assets/img/login-new.jpg') no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
.choicepart-container-box{
|
||||
background: rgba(255, 255, 255, .1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.grid {
|
||||
position: relative;
|
||||
.grid-item {
|
||||
position: absolute;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
.choicepart-box{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 60px;
|
||||
min-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
.choicepart-item{
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
.choicepart-item-border{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
line-height: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: lighter;
|
||||
color: #2C6BD8;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
.choicepart-item-icon{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.svgDiv{
|
||||
background-color: #fff;
|
||||
border: 1px solid #2C6BD8;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
.item-icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.choicepart-item-title {
|
||||
-webkit-line-clamp:3;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.choicepart-item-title {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.choicepart-item:hover .choicepart-item-border{
|
||||
color: #fff;
|
||||
}
|
||||
.choicepart-item:hover{
|
||||
background-color: #2C6BD8;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
.choicepat-navbar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
|
||||
background: rgba(255, 255, 255, .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>
|
||||
Reference in New Issue
Block a user