Skip to content

U
user
Commit 81e66a57 by weijiguang
Options

优化首页UI

parent 778a9a79
Showing with 41 additions and 261 deletions
components/menuAssembly/index.vue
......@@ -169,214 +169,6 @@ export default {
<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 {
display: flex;
background: #fff;
......@@ -410,6 +202,17 @@ export default {
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 {
border-bottom: none;
}
......@@ -418,9 +221,8 @@ export default {
box-sizing: border-box;
height: calc(100vh - var(--scroll-height));
overflow: auto;
padding-top: 40rpx;
width: 585.21rpx;
padding-top: 42rpx;
}
.buiedcss{
height: calc(100vh - 376rpx - 183rpx);
......@@ -444,20 +246,20 @@ export default {
.right-title {
font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 31rpx;
margin-bottom: 30rpx;
height: 40rpx;
padding-left: 32rpx;
margin-bottom: 25rpx;
height: 44rpx;
font-size: 32rpx;
font-weight: 600;
color: #333333;
line-height: 40rpx;
line-height: 44rpx;
}
.nav-right-item {
display: flex;
align-items: center;
padding: 0rpx 32rpx 0rpx 31.37rpx;
margin-bottom: 70rpx;
padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 64rpx;
background: #fff;
position: relative;
.thumbnailBox{
......@@ -471,11 +273,10 @@ export default {
}
.thumbnail {
//缩略图
display: flex;
align-items: center;
width: 160rpx;
height: 160rpx;
margin-top: 6rpx;
margin-top: -2rpx;
vertical-align: bottom;
}
}
......@@ -495,7 +296,7 @@ export default {
.tags {
height: 28rpx;
margin-top: 7.91rpx;
margin-top: 8rpx;
.tag-item {
font-family: PingFangSC-Regular, PingFang SC;
background-color: #F0F0F0;
......@@ -512,7 +313,7 @@ export default {
font-size: 20rpx;
font-weight: 400;
color: #666666;
margin-top: 13.46rpx;
margin-top: 14rpx;
height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -524,17 +325,23 @@ export default {
}
.mon {
height: 38rpx;
height: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 22.64rpx;
margin-top: 22rpx;
.priceBox{
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
.discount {
font-family: Futura-Medium, Futura;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 54rpx;
line-height: 30rpx;
margin-right: 4.2rpx;
font-weight:500;
......@@ -545,28 +352,24 @@ export default {
.price {
flex: 1;
height: 38rpx;
height: 26rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 60rpx;
line-height: 26rpx;
.num {
text-decoration: line-through;
}
}
.priceBox{
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
}
.addbox{
line-height: 26rpx;
margin-top: 20rpx ;
// line-height: 26rpx;
// margin-top: 20rpx ;
.add{
width: 40rpx;
height: 40rpx;
margin-top: 1rpx;
}
}
......@@ -590,29 +393,6 @@ export default {
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 {
/*取消小程序的默认导航条样式*/
width: 0;
......
pages/menu/menu.vue
<template>
<view class="menu-box">
<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>
<view class="shop-info" :style="'top:86rpx'">
<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:100rpx'">
<view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" />
......@@ -364,14 +364,14 @@ export default {
display: flex;
width: 686rpx;
height: 104rpx;
padding:18.8rpx 32rpx 18.8rpx 34rpx;
padding:16rpx 32rpx 16rpx 34rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: -5rpx;
bottom: -2rpx;
left: 32rpx;
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);
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