From db7b5dca7aa8fa63c4624b30f91fde9b895b9b17 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期一, 13 二月 2023 16:20:27 +0800
Subject: [PATCH] #
---
pages/index/index.vue | 232 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 187 insertions(+), 45 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6ec723e..f209ffc 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,71 +1,213 @@
<template>
- <view>
- <scroll-view scroll-y>
- <view class="vve">
- <image src="../../static/zoneyung.png" @click="changeImg" mode="aspectFit"></image>
+ <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 class="content">
- <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>
+ </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" @click="checked()">
+ <view class="nav-title">{{item.title}}</view>
+ <view class="nav-name">{{item.name}}</view>
+ <text :class="'cuIcon-' + item.cuIcon"></text>
+ </navigator>
+ </view>
+ </scroll-view>
</template>
<script>
export default {
data() {
return {
- elements:[
- {
- title: '鍏ュ簱鍗曠粍鎵�',
- name: 'combPro',
- color: 'olive',
- cuIcon: 'goods'
- },
- {
- title: '搴撳瓨鐩樼偣',
- name: 'stockCheck',
- color: 'cyan',
- cuIcon: 'squarecheck'
- },
- {
- title: '搴撳瓨鏌ヨ',
- name: 'stockQuery',
- color: 'blue',
- cuIcon: 'searchlist'
- }]
+ elements: [
+
+ {
+ title: '缁勬墭鍏ュ簱',
+ name: 'pakin',
+ color: 'blue',
+ cuIcon: 'copy'
+ },
+ {
+ title: '搴撳瓨鏌ヨ',
+ name: 'stockQuery',
+ color: 'blue',
+ cuIcon: 'searchlist'
+ },
+ {
+ title: '搴撳瓨鐩樼偣',
+ name: 'stockCheck',
+ color: 'blue',
+ cuIcon: 'safe'
+ },
+ {
+ title: '鎷ｆ枡鍑哄簱',
+ name: 'piking',
+ color: 'blue',
+ cuIcon: 'safe'
+ },
+ {
+ title: '閫�鍑虹櫥褰�',
+ name: 'logOut',
+ color: 'grey',
+ cuIcon: 'exit'
+ },
+
+ ]
}
},
onLoad() {
},
methods: {
- changeImg(){
+ changeImg() {
console.log(1)
+ },
+ checked() {
+ uni.vibrateShort();
}
}
}
</script>
<style>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: -100rpx;
- }
- .vve {
- display: flex;
- justify-content: center;
- margin-top: -100rpx;
+ @import "../../colorui/main.css";
+ @import "../../colorui/icon.css";
+
+ .custom-position {
+ margin: 10rpx 10rpx 50rpx 0rpx;
}
+ .img-logo {
+ width: 150rpx;
+ }
+ .nav-list {
+ display: flex;
+ /* flex-wrap: wrap; */
+ flex-direction: column;
+ padding: 0px 40upx 0px;
+ justify-content: flex-start;
+ }
+ .nav-li {
+ padding: 30upx;
+ border-radius: 12upx;
+ width: 95%;
+ margin: 0 2.5% 40upx;
+ 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);
+ }
+ }
</style>
--
Gitblit v1.9.1