Commit 81e66a57 by weijiguang

优化首页UI

parent 778a9a79
...@@ -169,214 +169,6 @@ export default { ...@@ -169,214 +169,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-box {
min-height: 100vh;
.shop-info {
position: absolute;
left: 32rpx;
color: #FFFFFF;
.shop-box {
min-width: 300rpx;
font-size: 28rpx;
font-weight: 600;
display: flex;
.shop-name {
flex: 1;
}
.arrow-right-select {
width: 9rpx;
}
}
.distance {
height: 46rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 42rpx;
}
}
}
.menu-banner {
height: 376rpx;
position: relative;
image {
width: 100%;
height: 376rpx;
}
.login-area {
display: flex;
width: 624rpx;
height: 88rpx;
padding: 20rpx 22rpx;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
backdrop-filter: blur(10rpx);
position: absolute;
z-index: 1;
bottom: 0;
left: 64rpx;
box-sizing: border-box;
.avatar {
display: flex;
justify-items: center;
align-items: center;
background: red;
width: 50rpx;
height: 48rpx;
margin-right: 22rpx;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
border-radius: 4rpx;
image {
width: 100%;
height: 100%;
}
;
}
.user-info {
flex: 1;
.user-name {
height: 28rpx;
font-size: 20rpx;
color: #FFFFFF;
line-height: 22rpx;
}
.dialog {
display: flex;
height: 22rpx;
font-size: 16rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 22rpx;
.content {
flex: 1;
}
.arrow {
width: 10rpx;
height: 12px;
display: flex;
font-size: 20rpx;
justify-content: center;
align-items: center;
}
}
}
.login-btn {
// width: 114rpx;
height: 48rpx;
background: #006ECF;
border-radius: 4rpx;
font-size: 20rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
}
}
.order-banner {
width: 686rpx;
height: 179rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
border-radius: 10rpx;
box-sizing: border-box;
position: relative;
left: 32rpx;
top: -8rpx;
z-index: 1;
display: flex;
.info {
padding-left: 32rpx;
flex: 1;
.first {
height: 44rpx;
font-size: 32rpx;
font-weight: 600;
color: #323232;
line-height: 44rpx;
margin-top: 40rpx;
}
.second {
margin-top: 20rpx;
height: 34rpx;
font-size: 24rpx;
font-weight: 500;
color: #323232;
line-height: 34rpx;
.time {
font-size: 28rpx;
font-weight: normal;
color: #006ECF;
margin: 0 16rpx;
}
}
}
.line {
width: 0;
height: 104rpx;
border-right: 4rpx solid #006ECF;
position: absolute;
right: 188rpx;
top: 36rpx;
}
.barCode-box {
margin-top: 30rpx;
width: 150rpx;
height: 122rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
.barCode {
width: 86rpx;
height: 86rpx;
background: #006ECF;
image {
width: 100%;
height: 100%;
}
}
.barCode-dis {
text-align: center;
margin-top: 14rpx;
font-size: 16rpx;
font-weight: 500;
color: #666666;
line-height: 22rpx;
}
}
}
.page-body { .page-body {
display: flex; display: flex;
background: #fff; background: #fff;
...@@ -410,6 +202,17 @@ export default { ...@@ -410,6 +202,17 @@ export default {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
} }
.active {
font-family: PingFangSC-Medium, PingFang SC;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333;
background: #FFFFFF;
font-size: 24rpx;
background: #fff;
border-right: 4rpx solid #0050F6;
}
.nav-left-item:last-child { .nav-left-item:last-child {
border-bottom: none; border-bottom: none;
} }
...@@ -418,9 +221,8 @@ export default { ...@@ -418,9 +221,8 @@ 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: 40rpx;
width: 585.21rpx; width: 585.21rpx;
padding-top: 42rpx;
} }
.buiedcss{ .buiedcss{
height: calc(100vh - 376rpx - 183rpx); height: calc(100vh - 376rpx - 183rpx);
...@@ -444,20 +246,20 @@ export default { ...@@ -444,20 +246,20 @@ export default {
.right-title { .right-title {
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 31rpx; padding-left: 32rpx;
margin-bottom: 30rpx; margin-bottom: 25rpx;
height: 40rpx; height: 44rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 44rpx;
} }
.nav-right-item { .nav-right-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0rpx 32rpx 0rpx 31.37rpx; padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 70rpx; margin-bottom: 64rpx;
background: #fff; background: #fff;
position: relative; position: relative;
.thumbnailBox{ .thumbnailBox{
...@@ -471,11 +273,10 @@ export default { ...@@ -471,11 +273,10 @@ export default {
} }
.thumbnail { .thumbnail {
//缩略图 //缩略图
display: flex;
align-items: center;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
margin-top: 6rpx; margin-top: -2rpx;
vertical-align: bottom;
} }
} }
...@@ -495,7 +296,7 @@ export default { ...@@ -495,7 +296,7 @@ export default {
.tags { .tags {
height: 28rpx; height: 28rpx;
margin-top: 7.91rpx; margin-top: 8rpx;
.tag-item { .tag-item {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
background-color: #F0F0F0; background-color: #F0F0F0;
...@@ -512,7 +313,7 @@ export default { ...@@ -512,7 +313,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-top: 13.46rpx; margin-top: 14rpx;
height: 22rpx; height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -524,49 +325,51 @@ export default { ...@@ -524,49 +325,51 @@ export default {
} }
.mon { .mon {
height: 38rpx; height: 40rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 22.64rpx; margin-top: 22rpx;
.discount {
font-family: Futura-Medium, Futura;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 54rpx;
margin-right: 4.2rpx;
font-weight:500;
.moneyLog {
font-size: 24rpx;
}
}
.price {
flex: 1;
height: 38rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 60rpx;
.num {
text-decoration: line-through;
}
}
.priceBox{ .priceBox{
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
.discount {
font-family: Futura-Medium, Futura;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 30rpx;
margin-right: 4.2rpx;
font-weight:500;
.moneyLog {
font-size: 24rpx;
}
}
.price {
flex: 1;
height: 26rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 26rpx;
.num {
text-decoration: line-through;
}
}
} }
.addbox{ .addbox{
line-height: 26rpx; // line-height: 26rpx;
margin-top: 20rpx ; // margin-top: 20rpx ;
.add{ .add{
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-top: 1rpx;
} }
} }
...@@ -590,29 +393,6 @@ export default { ...@@ -590,29 +393,6 @@ export default {
height: 150rpx; height: 150rpx;
} }
.active {
font-family: PingFangSC-Medium, PingFang SC;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333;
background: #FFFFFF;
font-size: 24rpx;
background: #fff;
border-right: 4rpx solid #0050F6;
}
.active-line {
height: 100%;
width: 4rpx;
position: absolute;
right: 5rpx;
box-sizing:border-box;
top: 0;
background: #0050F6;
z-index: 1;
border: 4rpx solid #0050F6;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
/*取消小程序的默认导航条样式*/ /*取消小程序的默认导航条样式*/
width: 0; width: 0;
......
<template> <template>
<view class="menu-box"> <view class="menu-box">
<view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}"> <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/27/71d36be0ed966.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" />
<view class="shop-info" :style="'top:86rpx'"> <view class="shop-info" :style="'top:100rpx'">
<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>
<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" /> <image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" />
...@@ -364,14 +364,14 @@ export default { ...@@ -364,14 +364,14 @@ export default {
display: flex; display: flex;
width: 686rpx; width: 686rpx;
height: 104rpx; height: 104rpx;
padding:18.8rpx 32rpx 18.8rpx 34rpx; padding:16rpx 32rpx 16rpx 34rpx;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: -5rpx; bottom: -2rpx;
left: 32rpx; left: 32rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
z-index: 9; z-index: 9;
......
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