From 57bed203689a069cca7cfaed0c4f7a90d916956a Mon Sep 17 00:00:00 2001
From: 宋冰琦 <wy19939334056@163.com>
Date: Fri, 17 Jun 2022 18:21:30 +0800
Subject: [PATCH] 添加首页视频背景
---
pages/menu/menu.vue | 74 ++++++++++++++++++++++++++++++++++++--------------------------------------
pages/mine/mine.vue | 8 ++++----
static/imgs/jiantoubai.png | Bin 0 -> 622 bytes
static/imgs/jiantouhei.png | Bin 0 -> 1067 bytes
4 files changed, 40 insertions(+), 42 deletions(-)
create mode 100644 static/imgs/jiantoubai.png
create mode 100644 static/imgs/jiantouhei.png
diff --git a/pages/menu/menu.vue b/pages/menu/menu.vue
index 1d5f46a..4ab32a0 100644
--- a/pages/menu/menu.vue
+++ b/pages/menu/menu.vue
@@ -1,11 +1,11 @@
<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;
}
}
}
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index eb9e6d5..e3a66d6 100644
--- a/pages/mine/mine.vue
+++ b/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;
}
diff --git a/static/imgs/jiantoubai.png b/static/imgs/jiantoubai.png
new file mode 100644
index 0000000..1fb0087
Binary files /dev/null and b/static/imgs/jiantoubai.png differ
diff --git a/static/imgs/jiantouhei.png b/static/imgs/jiantouhei.png
new file mode 100644
index 0000000..c656ca2
Binary files /dev/null and b/static/imgs/jiantouhei.png differ
--
libgit2 0.26.0