✨ feat:

components/nav-bar/index.vue

@@ -120,6 +120,7 @@
 		left: 0;
 		width: 100%;
 		z-index: 999;
+		overflow: hidden;
 	}
 
 	.heads {
@@ -135,10 +136,9 @@
 		padding-bottom: 10rpx;
 		background: var(--bgcolor);
 		box-sizing: border-box;
-
 		.bgImg {
 			width: 100%;
-			height: 100%;
+			// height: 100%;
 			position: absolute;
 			top: 0;
 			left: 0;

components/user-avatar/index.vue

@@ -162,6 +162,7 @@
 		overflow: hidden;
 		width: 100%;
 		height: 100%;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 	}
 
 	.avatar-img {

pages/index/index.vue

@@ -1,9 +1,10 @@
 <template>
-	<view class="card-container">
+	<scroll-view class="card-container" scroll-y @scroll="onScroll" :scroll-top="0">
 
 		<!-- 顶部背景 -->
 		<image class="top-bg" src="/static/image/home/top-bg.png" />
-		<NavBar :title="'首页'" :show_back="false" color="#fff" :fixed="true" :bg="'transparent'">
+		
+		<NavBar :title="'首页'" :show_back="false" :color="'#fff'" :fixed="true" :bgImg="'/static/image/home/top-bg.png'" :bg="'transparent'">
 			<template #left>
 				<!-- <view class="left-title">{{appName}}</view> -->
 			</template>
@@ -59,7 +60,7 @@
 		<view class="hidden-canvas-box">
 			<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
 		</view>
-	</view>
+	</scroll-view>
 </template>
 
 <script setup>
@@ -97,6 +98,20 @@
 			title: `${cardInfo.value.nickName} 向你分享了名片`
 		};
 	});
+	// 导航栏滚动渐变
+	const navBg = ref('transparent')
+	const navColor = ref('#ffffff')
+	const onScroll = (e) => {
+		const scrollTop = e.detail.scrollTop
+		if (scrollTop > 30) {
+			navBg.value = '#ffffff'
+			navColor.value = '#333333'
+		} else {
+			navBg.value = 'transparent'
+			navColor.value = '#ffffff'
+		}
+	}
+
 	const makeCall = () => {
 		if (cardInfo.value.phonenumber) {
 			uni.makePhoneCall({
@@ -114,6 +129,7 @@
 <style lang="scss" scoped>
 	.card-container {
 		background: #f5f6f8;
+		height: 100vh;
 	}
 
 	.left-title {
@@ -124,8 +140,7 @@
 	}
 
 	.top-bg {
-		width: 750rpx;
-		height: 634rpx;
+		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;

pages/login/login.vue

@@ -48,7 +48,7 @@
 			<view class="wechat-login-wrapper">
 				<button class="wechat-login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
 					<image class="wechat-icon-img" src="/static/image/public/wechat-icon.png" mode="aspectFit" />
-					<text class="wechat-text">微信一键登录</text>
+					<text class="wechat-text">一键登录</text>
 				</button>
 			</view>
 			<!-- #endif -->

pages/mine/card.vue

@@ -3,7 +3,7 @@
 
 		<!-- 顶部背景 -->
 		<image class="top-bg" src="/static/image/home/top-bg.png" />
-		<NavBar :title="'我的名片'" color="#fff" :fixed="true" :bg="'transparent'">
+		<NavBar :title="'我的名片'" color="#fff" :fixed="true" :bgImg="'/static/image/home/top-bg.png'" :bg="'transparent'">
 			<template #left>
 				<!-- <view class="left-title">{{appName}}</view> -->
 			</template>
@@ -117,8 +117,7 @@
 	}
 
 	.top-bg {
-		width: 750rpx;
-		height: 634rpx;
+		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;

pages/mine/userCard.vue

@@ -3,7 +3,7 @@
 
 		<!-- 顶部背景 -->
 		<image class="top-bg" src="/static/image/home/top-bg.png" />
-		<NavBar :title="'名片信息'" :show_back="false" color="#fff" :fixed="true" :bg="'transparent'">
+		<NavBar :title="'名片信息'" :show_back="false" color="#fff" :bgImg="'/static/image/home/top-bg.png'" :fixed="true" :bg="'transparent'">
 			<template #left>
 				<!-- <view class="left-title">{{appName}}</view> -->
 			</template>
@@ -122,8 +122,7 @@
 		text-shadow: 2px 2px 0 black;
 	}
 	.top-bg {
-		width: 750rpx;
-		height: 634rpx;
+		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;