|
.u-wrap { height: calc(100vh); }
|
.u-menu-wrap { flex: 1; display: flex; overflow: hidden;
|
.u-tab-view { width: 100px; height: 100%; background: #f6f6f6;
|
.u-tab-item { height: 55px; background: #f6f6f6; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #444; font-weight: 400; line-height: 1; }
|
.u-tab-item-active { position: relative; color: #000; font-weight: 600; background: #fff; }
|
.u-tab-item-active::before { content: ""; position: absolute; border-left: 4px solid #e02e24; height: 16px; left: 0; top: 20px; }
|
}
|
.right-box { background-color: rgb(250, 250, 250); width: calc(100% - 100px);
|
.class-item { margin-bottom: 15px; background-color: #fff; padding: 8px; border-radius: 4px;
|
.item-title { font-size: 12px; color: $u-main-color; font-weight: bold; }
|
.item-container { display: flex; flex-wrap: wrap;
|
.thumb-box { width: 33.333333%; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 10px;
|
.item-menu-name { font-weight: normal; font-size: 12px; color: $u-main-color; margin-top: 7.5px; }
|
}
|
}
|
}
|
}
|
}
|
|
|
.main { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
|
|
.nav { width: 100%; height: 212rpx; flex-shrink: 0; display: flex; flex-direction: column;
|
.header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background-color: #ffffff; height: 140rpx;
|
.left { flex: 1; display: flex; flex-direction: column;
|
.store-name { display: flex; justify-content: flex-start; align-items: center; font-size: 32rpx; margin-bottom: 10rpx;
|
.iconfont { margin-left: 10rpx; line-height: 100%; }
|
}
|
.store-location { display: flex; justify-content: flex-start; align-items: center; color: #919293; font-size: 24rpx;
|
.iconfont { vertical-align: middle; display: table-cell; color: #ADB838; line-height: 100%; }
|
}
|
}
|
.right { background-color: #F5F5F5; border-radius: 38rpx; display: flex; align-items: center; font-size: 24rpx; padding: 0 38rpx; color: #919293;
|
.dinein, .takeout { position: relative; display: flex; align-items: center;
|
&.active { padding: 14rpx 38rpx; color: #ffffff; background-color: #E8EACF; border-radius: 38rpx; }
|
}
|
.takeout { margin-left: 20rpx; height: 100%; flex: 1; padding: 14rpx 0; }
|
.dinein.active { margin-left: -38rpx; }
|
.takeout.active { margin-right: -38rpx; }
|
}
|
}
|
.coupon { flex: 1; width: 100%; background-color: #E8EACF; font-size: 28rpx; color: #ADB838; padding: 0 20rpx; display: flex; align-items: center; overflow: hidden;
|
.title { flex: 1; margin-left: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
.iconfont { line-height: 100%; }
|
}
|
}
|
.content { flex: 1; overflow: hidden; width: 100%; display: flex;
|
.menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5;
|
.wrapper { width: 100%; height: 100%;
|
.menu { display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
|
&:nth-last-child(1) { margin-bottom: 130rpx; }
|
&.current { background-color: #ffffff; color: #5A5B5C; }
|
.dot { position: absolute; width: 34rpx; height: 34rpx; line-height: 34rpx; font-size: 22rpx; background-color: #ADB838; color: #ffffff; top: 16rpx; right: 10rpx; border-radius: 100%; text-align: center; }
|
}
|
}
|
}
|
|
.goods { flex: 1; overflow: hidden; background-color: #ffffff;
|
.wrapper { width: 100%; height: 100%; padding: 20rpx;
|
.ads { height: calc(300 / 550 * 510rpx);
|
image { width: 100%; height: 100%; border-radius: 8rpx; }
|
}
|
.list { width: 100%; font-size: 28rpx; padding-bottom: 30rpx;
|
.category { width: 100%;
|
.title { padding: 30rpx 0; display: flex; align-items: center; color: #5A5B5C;
|
.icon { width: 38rpx; height: 38rpx; margin-left: 10rpx; }
|
}
|
}
|
.items { display: flex; flex-direction: column;
|
.good { display: flex; align-items: center; margin-bottom: 30rpx;
|
.image { width: 160rpx; height: 160rpx; margin-right: 20rpx; border-radius: 8rpx; }
|
.right { flex: 1; height: 160rpx; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
|
.name { margin-bottom: 10rpx; }
|
.tips { width: 100%; height: 40rpx; line-height: 40rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; color: #919293; margin-bottom: 10rpx; }
|
.price_and_action { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: 5px;
|
.price { font-size: 28rpx; font-weight: 600; color: #e02e24; }
|
.btn-group { display: flex; justify-content: space-between; align-items: center; position: relative;
|
.btn { padding: 0 20rpx; box-sizing: border-box; font-size: 24rpx; height: 44rpx; line-height: 44rpx;
|
&.property_btn { border-radius: 24rpx; }
|
&.add_btn,
|
&.reduce_btn { padding: 0; width: 44rpx; border-radius: 44rpx; }
|
}
|
.dot { position: absolute; background-color: #ffffff; border: 1px solid #ADB838; color: #ADB838; font-size: 24rpx; width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; border-radius: 100%; right: -12rpx; top: -10rpx; }
|
.number { width: 44rpx; height: 44rpx; line-height: 44rpx; text-align: center; }
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
|
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
|
.cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
|
.pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
|
.mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;
|
.tag { background-color: #FAB714; color: #ffffff; display: flex; justify-content: center; align-items: center; font-size: 24rpx; position: absolute; right: -10rpx; top: -50rpx; border-radius: 100%; padding: 4rpx; width: 40rpx; height: 40rpx; opacity: .9; }
|
}
|
.price { flex: 1; color: #5A5B5C; }
|
}
|
|
|
|
.text-color-base { color: #5A5B5C; }
|
text-color-assist { color: #919293; }
|
.overflow-hidden { overflow: hidden !important; }
|
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.col3Box { width: 33%; padding: 5px; float: left; }
|
