Skip to content

U
user
Commit ba390777 by 宋冰琦
Options

调整首页部分页面效果

parent 89645432
Showing with 77 additions and 76 deletions
App.vue
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
wx.getSystemInfo({ wx.getSystemInfo({
success: res => { success: res => {
const BottomSafeHeight = res.screenHeight - res.safeArea.bottom const BottomSafeHeight = res.screenHeight - res.safeArea.bottom
uni.setStorage({ key: 'BottomSafeHeight', data: BottomSafeHeight?BottomSafeHeight+10:0 }); uni.setStorage({ key: 'BottomSafeHeight', data: BottomSafeHeight?BottomSafeHeight:0 });
} }
}) })
......
components/menuAssembly/index.vue
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</view> </view>
<view class="mon"> <view class="mon">
<view class="priceBox"> <view class="priceBox">
<view class="discount">￥{{ Utils.isInteger(getSku(item).discount) }}</view> <view class="discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(getSku(item).discount) }}</view>
<view class="price" v-if="getSku(item).price!=getSku(item).discount">￥<text class="num">{{ Utils.isInteger(getSku(item).price) }}</text></view> <view class="price" v-if="getSku(item).price!=getSku(item).discount">￥<text class="num">{{ Utils.isInteger(getSku(item).price) }}</text></view>
</view> </view>
<view class="addbox"> <view class="addbox">
...@@ -392,9 +392,9 @@ export default { ...@@ -392,9 +392,9 @@ export default {
box-sizing: border-box; box-sizing: border-box;
width: 160rpx; width: 160rpx;
background: #fff; background: #fff;
border-right: 2rpx solid #EEEEEE; border-right: 2rpx solid #F0F0F0;
height: calc(100vh - var(--scroll-height)); height: calc(100vh - var(--scroll-height));
overflow: auto; overflow-y: auto;
// background: var(--header-color); // background: var(--header-color);
} }
...@@ -418,7 +418,7 @@ export default { ...@@ -418,7 +418,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
height: calc(100vh - var(--scroll-height)); height: calc(100vh - var(--scroll-height));
overflow: auto; overflow: auto;
padding-top: 50rpx; padding-top: 40rpx;
width: 585.21rpx; width: 585.21rpx;
} }
...@@ -444,8 +444,8 @@ export default { ...@@ -444,8 +444,8 @@ export default {
.right-title { .right-title {
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 28rpx; padding-left: 31rpx;
margin-bottom: 24.84rpx; margin-bottom: 30rpx;
height: 40rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
...@@ -456,9 +456,8 @@ export default { ...@@ -456,9 +456,8 @@ export default {
.nav-right-item { .nav-right-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0rpx 36rpx 0rpx 32rpx; padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 70rpx; margin-bottom: 70rpx;
height: 162rpx;
background: #fff; background: #fff;
position: relative; position: relative;
.thumbnailBox{ .thumbnailBox{
...@@ -483,13 +482,12 @@ export default { ...@@ -483,13 +482,12 @@ export default {
.info { .info {
flex: 1; flex: 1;
margin-left: 23.78rpx; margin-left: 24rpx;
.goods-name { .goods-name {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx; font-size: 28rpx;
height: 40rpx; height: 40rpx;
line-height: 40rpx;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
...@@ -497,17 +495,15 @@ export default { ...@@ -497,17 +495,15 @@ export default {
.tags { .tags {
.tag-item { .tag-item {
margin-top: 8.9rpx; margin-top: 8.9rpx;
font-family: ArialMT, Helvetica SC; font-family: PingFangSC-Regular, PingFang SC;
height: 28rpx; height: 28rpx;
border-radius: 4rpx; background-color: #F0F0F0;
background-color: #f0edf1; margin-right: 16rpx;
margin-right: 10rpx; padding: 0rpx 8rpx;
padding: 4rpx 10rpx;
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
line-height: 28rpx; line-height: 28rpx;
display: inline-block; display: inline-block;
vertical-align: top;
} }
} }
...@@ -517,7 +513,7 @@ export default { ...@@ -517,7 +513,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 40rpx; line-height: 40rpx;
margin-top: 12rpx; margin-top: 13rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
.desc { .desc {
...@@ -528,27 +524,32 @@ export default { ...@@ -528,27 +524,32 @@ export default {
} }
.mon { .mon {
width: 338.45rpx; height: 40rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 22rpx; margin-top: 22rpx;
.discount { .discount {
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
height: 30rpx; height: 40rpx;
font-size: 24rpx; font-size: 28rpx;
color: #333333; color: #333333;
line-height: 30rpx; line-height: 40rpx;
margin-right: 6rpx; margin-right: 4.2rpx;
font-weight:500; font-weight:500;
.moneyLog {
font-size: 24rpx;
}
} }
.price { .price {
flex: 1; flex: 1;
height: 22rpx; height: 40rpx;
font-size: 20rpx; font-size: 20rpx;
color: #666666; color: #999999;
line-height: 22rpx; font-family: Futura-Medium, Futura;
line-height: 48rpx;
.num { .num {
text-decoration: line-through; text-decoration: line-through;
...@@ -594,6 +595,7 @@ export default { ...@@ -594,6 +595,7 @@ export default {
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
width: 164rpx;
background: #FFFFFF; background: #FFFFFF;
font-size: 24rpx; font-size: 24rpx;
background: #fff; background: #fff;
...@@ -601,14 +603,14 @@ export default { ...@@ -601,14 +603,14 @@ export default {
.active-line { .active-line {
height: 100%; height: 100%;
width: 2rpx; width: 4rpx;
position: absolute; position: absolute;
right: 0rpx; right: 0rpx;
box-sizing:border-box; box-sizing:border-box;
top: 0; top: 0;
background: #0050F6; background: #0050F6;
z-index: 1; z-index: 1;
border: 2rpx solid #0050F6; border: 4rpx solid #0050F6;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
......
components/shopCar/shopCar.vue
<template> <template>
<view> <view>
<u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true" <u-popup :show="showShopCar && goods.length" mode="bottom" :round="5" :overlay="true"
:closeOnClickOverlay="true" @close="closeT"> :closeOnClickOverlay="true" @close="closeT">
<view class="shop-car"> <view class="shop-car" :style="{'padding-bottom':bottomPadding+'rpx'}">
<view class="header"> <view class="header">
<text class="left">购物袋</text> <text class="left">购物袋</text>
<text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text> <text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text>
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
</view> </view>
</view> </view>
</view> </view>
<view style="height:200rpx"></view>
</view> </view>
</u-popup> </u-popup>
...@@ -103,13 +102,18 @@ export default { ...@@ -103,13 +102,18 @@ export default {
loginInfo: "", loginInfo: "",
imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309', imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309',
Utils, Utils,
shopCar:0 shopCar:0,
BottomSafeHeight:0,
bottomPadding:0,
} }
}, },
created() { created() {
$EventBus.$off('updateCar'); $EventBus.$off('updateCar');
}, },
mounted() { mounted() {
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
console.log(this.BottomSafeHeight+132+100)
this.bottomPadding = this.BottomSafeHeight+132+92
this.shopCar = uni.getStorageSync('shopCar') this.shopCar = uni.getStorageSync('shopCar')
console.log(this.shopCar) console.log(this.shopCar)
if(!this.userms){ if(!this.userms){
...@@ -261,18 +265,18 @@ export default { ...@@ -261,18 +265,18 @@ export default {
font-weight: 500; font-weight: 500;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
display: flex; display: flex;
margin-left: 38rpx; margin-left: 30rpx;
letter-spacing: 1px; letter-spacing: 1rpx;
align-items: center; align-items: center;
} }
.shop-car { .shop-car {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 860rpx; height: 495rpx;
.header { .header {
height: 88rpx; padding:24.87rpx 31.78rpx 22.3rpx 31.54rpx;
display: flex; display: flex;
border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC;
...@@ -280,7 +284,6 @@ export default { ...@@ -280,7 +284,6 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 31rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
...@@ -292,7 +295,6 @@ export default { ...@@ -292,7 +295,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-right: 31rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -304,7 +306,7 @@ export default { ...@@ -304,7 +306,7 @@ export default {
background: url(../../static/imgs/icon-delete.png) center center no-repeat; background: url(../../static/imgs/icon-delete.png) center center no-repeat;
background-size: cover; background-size: cover;
display: inline-block; display: inline-block;
margin-right: 8rpx; margin-right: 6rpx;
} }
} }
} }
...@@ -479,20 +481,20 @@ export default { ...@@ -479,20 +481,20 @@ export default {
.end { .end {
width: 100%; width: 100%;
height: 92rpx; height: 100rpx;
background-color: rgb(253, 253, 253); background-color: rgb(253, 253, 253);
position: fixed; position: fixed;
left: 0; left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex; display: flex;
z-index: 1024; z-index: 99999;
align-items: center; align-items: center;
&-left { &-left {
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 30rpx; padding: 0 32rpx;
.end-flex { .end-flex {
display: flex; display: flex;
...@@ -532,7 +534,7 @@ export default { ...@@ -532,7 +534,7 @@ export default {
&-right { &-right {
width: 169rpx; width: 169rpx;
font-size: 32rpx; font-size: 32rpx;
line-height: 92rpx; line-height: 100rpx;
background-color: #0050F6; background-color: #0050F6;
text-align: right; text-align: right;
color: #fff; color: #fff;
...@@ -546,7 +548,7 @@ export default { ...@@ -546,7 +548,7 @@ export default {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
line-height: 92rpx; line-height: 100rpx;
width: 200rpx; width: 200rpx;
height: 100%; height: 100%;
} }
......
components/tabBar/tabBar.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10 this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
uni.setStorageSync("taBarHeight",(this.BottomSafeHeight+546)) uni.setStorageSync("taBarHeight",(this.BottomSafeHeight+546))
uni.setStorageSync("shopCar",this.BottomSafeHeight==10?120:(this.BottomSafeHeight+288)/2) uni.setStorageSync("shopCar",this.BottomSafeHeight==10?120:(this.BottomSafeHeight+288)/2)
uni.setStorageSync("orderBottom",(this.BottomSafeHeight+150)) uni.setStorageSync("orderBottom",(this.BottomSafeHeight+180))
this.selectedIndex = Number(this.select) this.selectedIndex = Number(this.select)
}, },
data() { data() {
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
z-index: 999; z-index: 99999;
background: #FFFFFF; background: #FFFFFF;
border-top: 2rpx solid #FFFFFF; border-top: 2rpx solid #FFFFFF;
} }
...@@ -82,9 +82,9 @@ ...@@ -82,9 +82,9 @@
.navigator { .navigator {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 85%; width: 89%;
margin: 0 auto; margin: 0 auto;
padding: 20rpx; padding: 18rpx;
} }
.navigator-item { .navigator-item {
...@@ -102,7 +102,10 @@ ...@@ -102,7 +102,10 @@
} }
.text-active { .text-active {
color: #2E92FD !important; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
} }
.icon { .icon {
......
pages/menu/menu.vue
<template> <template>
<view class="menu-box"> <view class="menu-box">
<view class="menu-banner" :style="{'height':buied?'360rpx':'440rpx'}"> <view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}">
<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> <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4"></video>
<view class="shop-info" :style="'top:102rpx'"> <view class="shop-info" :style="'top:102rpx'">
<view class="shop-box"> <view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text> <text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
...@@ -351,20 +351,19 @@ export default { ...@@ -351,20 +351,19 @@ export default {
} }
.menu-banner { .menu-banner {
height: 440rpx; height: 40rpx;
position: relative; position: relative;
video { video {
width: 100%; width: 100%;
height: 401rpx; height: 400rpx;
} }
.login-area { .login-area {
display: flex; display: flex;
width: 686rpx; width: 686rpx;
height: 104rpx; padding:18.8rpx 32rpx 18.8rpx 34rpx;
padding:20rpx 30rpx 20rpx 34rpx;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
...@@ -381,12 +380,12 @@ export default { ...@@ -381,12 +380,12 @@ export default {
align-items: center; align-items: center;
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;
margin-right: 22rpx; margin-right: 16.93rpx;
border-radius: 4rpx; border-radius: 72rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 60rpx; border-radius: 72rpx;
}; };
} }
...@@ -397,22 +396,19 @@ export default { ...@@ -397,22 +396,19 @@ export default {
justify-content:space-between; justify-content:space-between;
flex-wrap:nowrap; flex-wrap:nowrap;
.user-name { .user-name {
margin-top: 2rpx; margin-top: 2.68rpx;
height: 34rpx !important;
font-size: 24rpx; font-size: 24rpx;
font-weight: normal; font-weight: normal;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
line-height: 28rpx; color: #333333;
} }
.dialog { .dialog {
height: 28rpx;
line-height: 28rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-top: 4rpx; margin-top: 4.64rpx;
.content { .content {
flex: 1; flex: 1;
...@@ -445,7 +441,7 @@ export default { ...@@ -445,7 +441,7 @@ export default {
width: 718rpx; width: 718rpx;
height: 179rpx; height: 179rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: -2px -2px 4px 0px rgba(102, 102, 102, 0.1), 4px 4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1), 4px 4px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
left: 16rpx; left: 16rpx;
...@@ -473,16 +469,14 @@ export default { ...@@ -473,16 +469,14 @@ export default {
} }
.second { .second {
margin-top: 12rpx; margin-top: 20rpx;
width: 400rpx; width: 400rpx;
height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500; font-weight: 400;
color: #999999; color: #999999;
line-height: 34rpx;
letter-spacing: 0rpx; letter-spacing: 0rpx;
text-shadow: -2px -2px 4px rgba(102, 102, 102, 0.1); text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1);
white-space: nowrap; white-space: nowrap;
.time { .time {
...@@ -496,18 +490,18 @@ export default { ...@@ -496,18 +490,18 @@ export default {
} }
.line { .line {
width: 0; width: 4rpx;
height: 104rpx; height: 104rpx;
border-right: 2rpx solid #f8f5f8; border-right: 2rpx solid #f8f5f8;
position: absolute; position: absolute;
left: 510rpx; left: 510rpx;
box-shadow: -2rpx -2rpx 4rpx 0rpx rgba(102, 102, 102, 0.1); box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1);
top: 36rpx; top: 36rpx;
} }
.barCode-box { .barCode-box {
margin-top: 30rpx; margin-top: 30rpx;
margin-left: 126rpx; margin-left: 115rpx;
width: 150rpx; width: 150rpx;
height: 122rpx; height: 122rpx;
display: flex; display: flex;
......
pages/mine/mine.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> --> <!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> --> <!-- <view class="logText">未 来 咖 啡</view> -->
</view> </view>
<video class="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> <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.mp4"></video>
</view> </view>
<view class="mod11"> <view class="mod11">
<view class="avatar"> <view class="avatar">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<view class="user-name" v-if="userms">HI！{{ userInfo.customerName || '我是谁' }}</view> <view class="user-name" v-if="userms">HI！{{ userInfo.customerName || '我是谁' }}</view>
<view class="user-name" v-else>未登录</view> <view class="user-name" v-else>未登录</view>
<view class="dialog"> <view class="dialog">
<view class="content" v-if="userms">如果以后再也见不到你，那就祝你早安</view> <view class="content" v-if="userms">希望你今天，明天，天天都开心～</view>
<view class="content" v-if="!userms">请您尽快登录～</view> <view class="content" v-if="!userms">请您尽快登录～</view>
</view> </view>
</view> </view>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment