<template>
|
<view>
|
<scroll-view scroll-y class="page">
|
<view class="nav-list">
|
<navigator hover-class='none' class="nav-li" navigateTo
|
:url="'/pages' + item.url"
|
:class="'bg-'+item.color"
|
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1',width: item.width}]"
|
v-for="(item,index) in menu"
|
:key="index">
|
<view class="nav-title">{{item.title}}</view>
|
<view class="nav-name">{{item.name}}</view>
|
<text :class="'cuIcon-' + item.cuIcon"></text>
|
</navigator>
|
</view>
|
<view class="cu-tabbar-height"></view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'//引入mapState
|
export default {
|
data() {
|
return {}
|
},
|
onShow() {
|
console.log(this.menu);
|
},
|
computed: mapState({
|
menu: state => state.project.menu
|
})
|
}
|
</script>
|
|
<style>
|
@import url("@/static/css/colorUi/icon.css");
|
.nav-list {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0px 20rpx 0px;
|
justify-content: space-between;
|
}
|
|
.nav-li {
|
padding: 30upx;
|
border-radius: 12upx;
|
width: 37%;
|
margin: 0 2% 40upx;
|
/* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */
|
background-size: cover;
|
background-position: center;
|
position: relative;
|
z-index: 1;
|
}
|
|
.nav-li::after {
|
content: "";
|
position: absolute;
|
z-index: -1;
|
background-color: inherit;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: -10%;
|
border-radius: 10upx;
|
opacity: 0.2;
|
transform: scale(0.9, 0.9);
|
}
|
|
.nav-li.cur {
|
color: #fff;
|
background: rgb(94, 185, 94);
|
box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
|
}
|
|
.nav-title {
|
font-size: 32upx;
|
font-weight: 300;
|
}
|
|
.nav-title::first-letter {
|
font-size: 40upx;
|
margin-right: 4upx;
|
}
|
|
.nav-name {
|
font-size: 28upx;
|
text-transform: Capitalize;
|
margin-top: 20upx;
|
position: relative;
|
}
|
|
.nav-name::before {
|
content: "";
|
position: absolute;
|
display: block;
|
width: 40upx;
|
height: 6upx;
|
background: #fff;
|
bottom: 0;
|
right: 0;
|
opacity: 0.5;
|
}
|
|
.nav-name::after {
|
content: "";
|
position: absolute;
|
display: block;
|
width: 100upx;
|
height: 1px;
|
background: #fff;
|
bottom: 0;
|
right: 40upx;
|
opacity: 0.3;
|
}
|
|
.nav-name::first-letter {
|
font-weight: bold;
|
font-size: 36upx;
|
margin-right: 1px;
|
}
|
|
.nav-li text {
|
position: absolute;
|
right: 30upx;
|
top: 30upx;
|
font-size: 52upx;
|
width: 60upx;
|
height: 60upx;
|
text-align: center;
|
line-height: 60upx;
|
}
|
|
.text-light {
|
font-weight: 300;
|
}
|
|
@keyframes show {
|
0% {
|
transform: translateY(-50px);
|
}
|
|
60% {
|
transform: translateY(40upx);
|
}
|
|
100% {
|
transform: translateY(0px);
|
}
|
}
|
|
@-webkit-keyframes show {
|
0% {
|
transform: translateY(-50px);
|
}
|
|
60% {
|
transform: translateY(40upx);
|
}
|
|
100% {
|
transform: translateY(0px);
|
}
|
}
|
|
.bg-red {
|
background-color: #e54d42;
|
color: #ffffff;
|
}
|
|
.bg-orange {
|
background-color: #f37b1d;
|
color: #ffffff;
|
}
|
|
.bg-yellow {
|
background-color: #fbbd08;
|
color: #333333;
|
}
|
|
.bg-olive {
|
background-color: #8dc63f;
|
color: #ffffff;
|
}
|
|
.bg-green {
|
background-color: #39b54a;
|
color: #ffffff;
|
}
|
|
.bg-cyan {
|
background-color: #1cbbb4;
|
color: #ffffff;
|
}
|
|
.bg-blue {
|
background-color: #0081ff;
|
color: #ffffff;
|
}
|
|
.bg-purple {
|
background-color: #6739b6;
|
color: #ffffff;
|
}
|
|
.bg-mauve {
|
background-color: #9c26b0;
|
color: #ffffff;
|
}
|
|
.bg-pink {
|
background-color: #e03997;
|
color: #ffffff;
|
}
|
|
.bg-brown {
|
background-color: #a5673f;
|
color: #ffffff;
|
}
|
|
.bg-grey {
|
background-color: #8799a3;
|
color: #ffffff;
|
}
|
|
.bg-gray {
|
background-color: #f0f0f0;
|
color: #333333;
|
}
|
|
.bg-black {
|
background-color: #333333;
|
color: #ffffff;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
color: #666666;
|
}
|
</style>
|
