添加首页视频背景

pages/menu/menu.vue

 <template>
 	<view class="menu-box">
 		<view class="menu-banner">
-			<image src="../../static/imgs/banner.png"></image>
-			<view class="shop-info" :style="'top:120rpx'">
+			<video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/17/b6448829fab53.mp4"></video>
+			<view class="shop-info" :style="'top:102rpx'">
 				<view class="shop-box">
 					<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
-					<u-icon name="arrow-right" class="arrow-right-select" color="#FFFFFF"></u-icon>
+					<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" />
 				</view>
 				<view v-if="shopInfo.distance && shopInfo.distance!=-1" class="distance">距您{{ shopInfo.distance }}</view>
 			</view>
@@ -283,20 +283,26 @@ export default {
 		color: #FFFFFF;
 
 		.shop-box {
-			min-width: 300rpx;
-			font-size: 28rpx;
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #FFFFFF;
 			font-family: PingFangSC-Medium, PingFang SC;
 			display: flex;
+			align-items: center;
+			height: 62rpx;
+			line-height: 62rpx;
 
 			.shop-name {
+				margin-right: 12rpx;
 				flex: 1;
-				font-family: PingFangSC-Medium, PingFang SC;
 				font-size: 32rpx;
-				color: #000000;
 			}
 
 			.arrow-right-select {
 				width: 9rpx;
+				height: 22rpx;
+				
+				// border: 3rpx solid #FFFFFF
 			}
 		}
 
@@ -306,7 +312,7 @@ export default {
 			font-family: PingFangSC-Regular, PingFang SC;
 			font-weight: 400;
 			color: #FFFFFF;
-			line-height: 50rpx;
+			line-height: 42rpx;
 		}
 	}
 }
@@ -315,31 +321,33 @@ export default {
 	height: 376rpx;
 	position: relative;
 
-	image {
+	video {
 		width: 100%;
-		height: 376rpx;
+		height: 363.83rpx;
+		
 	}
 
 	.login-area {
 		display: flex;
-		width: 684rpx;
-		height: 100rpx;
-		padding:16rpx 28rpx;
+		width: 686rpx;
+		height: 104rpx;
+		padding:16rpx 32rpx 16rpx 34rpx;
 		background: #ffffff;
 		position: absolute;
 		z-index: 1;
-		bottom: -10rpx;
-		left: 34rpx;
+		bottom: -5rpx;
+		left: 32rpx;
 		box-sizing: border-box;
-		box-shadow: 0px 3px 2px  #f4f2f2;
+		box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
+		backdrop-filter: blur(0px);
 		z-index: 9;
 
 		.avatar {
 			display: flex;
 			justify-items: center;
 			align-items: center;
-			width: 70rpx;
-			height: 70rpx;
+			width: 72rpx;
+			height: 72rpx;
 			margin-right: 22rpx;
 			border-radius: 4rpx;
 			image {
@@ -353,38 +361,28 @@ export default {
 			flex: 1;
 			display: flex;
 			align-items: center;
-			height: 70rpx;
 			justify-content:space-between;
 			flex-wrap:nowrap;
 			.user-name {
-				height: 28rpx;
-				font-size: 25rpx;
-				font-family: ArialMT;
-				font-weight:bolder;
-				line-height: 25rpx;
+				margin-top: 2rpx;
+				height: 34rpx !important;
+				font-size: 24rpx;
+				font-weight: normal;
+				font-family: Arial-BoldMT, Arial;
+				line-height: 28rpx;
 			}
 
 			.dialog {
-				display: flex;
-				height: 22rpx;
+				height: 28rpx;
+				line-height: 28rpx;
 				font-size: 20rpx;
 				font-family: PingFangSC-Regular, PingFang SC;
 				font-weight: 400;
-				margin-top: 8rpx;
+				color: #666666;
+				margin-top: 4rpx;
 
 				.content {
 					flex: 1;
-					letter-space:20rpx;
-					color: #666666;
-				}
-
-				.arrow {
-					width: 10rpx;
-					height: 12px;
-					display: flex;
-					font-size: 20rpx;
-					justify-content: center;
-					align-items: center;
 				}
 			}
 		}

pages/mine/mine.vue

@@ -2,10 +2,10 @@
 	<view class="pages">
 		<view class="menu-banner">
 			<view class="log">
-				<image class="logImg" src="/static/imgs/hooloo.png"></image>
-				<view class="logText">未 来 咖 啡</view>
+				<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
+				<!-- <view class="logText">未 来 咖 啡</view> -->
 			</view>
-			<image src="/static/imgs/banner.png"></image>
+			<video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/17/a2aaece8ad026.mp4"></video>
 		</view>
 		<view v-if="userms" class="mod11 flex-col">
 			<view class="box16 flex-col"></view>
@@ -159,7 +159,7 @@ button::after {
 		}
 	}
 
-	image {
+	video {
 		width: 100%;
 		height: 376rpx;
 	}