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