| | |
| | | <template> |
| | | <view> |
| | | <scroll-view scroll-y> |
| | | <view class="flex justify-end custom-position"> |
| | | <view> |
| | | <image class="img-logo flex solid-bottom " src="../../static/zoneyung.png" mode="widthFix"></image> |
| | | </view> |
| | | </view> |
| | | <view class="nav-list" > |
| | | <navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color" |
| | | :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index"> |
| | | <view class="nav-title">{{item.title}}</view> |
| | | <view class="nav-name">{{item.name}}</view> |
| | | <text :class="'cuIcon-' + item.cuIcon"></text> |
| | | </navigator> |
| | | </view> |
| | | </scroll-view> |
| | | <view class="content"> |
| | | <image class="logo" src="/static/logo.png"></image> |
| | | <view class="text-area"> |
| | | <text class="title">{{title}}</text> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | elements:[ |
| | | { |
| | | title: '入库', |
| | | name: 'store', |
| | | color: 'orange', |
| | | cuIcon: 'deliver' |
| | | }, |
| | | { |
| | | title: '出库', |
| | | name: 'delivery', |
| | | color: 'brown', |
| | | cuIcon: 'deliver_fill' |
| | | }, |
| | | { |
| | | title: '上架管理', |
| | | name: 'sale', |
| | | color: 'olive', |
| | | cuIcon: 'goods' |
| | | }, |
| | | { |
| | | title: '快速上架', |
| | | name: 'publish', |
| | | color: 'green', |
| | | cuIcon: 'goodsnew' |
| | | }, |
| | | { |
| | | title: '拣货单', |
| | | name: 'orders', |
| | | color: 'cyan', |
| | | cuIcon: 'calendar' |
| | | }, |
| | | { |
| | | title: '盘点', |
| | | name: 'stock', |
| | | color: 'blue', |
| | | cuIcon: 'squarecheck' |
| | | }, |
| | | { |
| | | title: '退出登录', |
| | | name: 'logOut', |
| | | color: 'grey', |
| | | cuIcon: 'exit' |
| | | }] |
| | | title: 'Hello' |
| | | } |
| | | }, |
| | | onLoad() { |
| | | |
| | | }, |
| | | methods: { |
| | | changeImg(){ |
| | | console.log(1) |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .custom-position { |
| | | margin: 10rpx 10rpx 50rpx 0rpx; |
| | | } |
| | | .img-logo { |
| | | width: 150rpx; |
| | | .content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | |
| | | |
| | | .logo { |
| | | height: 200rpx; |
| | | width: 200rpx; |
| | | margin-top: 200rpx; |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | margin-bottom: 50rpx; |
| | | } |
| | | |
| | | .text-area { |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .title { |
| | | font-size: 36rpx; |
| | | color: #8f8f94; |
| | | } |
| | | </style> |