From a2019ade7b884799e639150021c3cdeef27eea72 Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期六, 09 十一月 2024 11:40:52 +0800
Subject: [PATCH] 增加工号ui修改

---
 pages/home/home.vue |  234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 232 insertions(+), 2 deletions(-)

diff --git a/pages/home/home.vue b/pages/home/home.vue
index 10cdc78..f89fbf0 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -1,11 +1,241 @@
 <template>
-	<view class="">
-		Home
+	<view>
+		<scroll-view scroll-y class="page">
+			<view class="nav-list">
+				<navigator hover-class='none' class="nav-li" navigateTo
+				:url="'/pages/project' + 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>
\ No newline at end of file

--
Gitblit v1.9.1