1258 lines
25 KiB
SCSS
1258 lines
25 KiB
SCSS
@import '~@/uni.scss';
|
|
|
|
/* ========================================
|
|
全局样式 - yshop-drink-uniapp
|
|
统一规范：使用SCSS变量，简短BEM-like命名
|
|
======================================== */
|
|
|
|
/* ====== Reset & Base ====== */
|
|
page,
|
|
view,
|
|
scroll-view,
|
|
text,
|
|
image,
|
|
textarea,
|
|
button,
|
|
input {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
page {
|
|
background-color: $bg-color-grey;
|
|
min-height: 100%;
|
|
}
|
|
|
|
image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ====== Button Reset ====== */
|
|
button {
|
|
margin: 0;
|
|
|
|
&[type='primary'] {
|
|
background-color: $color-primary;
|
|
color: #ffffff;
|
|
font-size: $font-size-base;
|
|
|
|
&[disabled] {
|
|
opacity: $opacity-disabled;
|
|
}
|
|
|
|
&[plain] {
|
|
color: $color-primary;
|
|
border: 1rpx solid $color-primary;
|
|
}
|
|
|
|
&.button-hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&::after {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
&[type='default'] {
|
|
&[plain] {
|
|
color: $text-color-assist;
|
|
border: 1rpx solid $text-color-assist;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ====== Vant Override ====== */
|
|
:root {
|
|
--van-primary-color: $color-primary;
|
|
}
|
|
|
|
.van-grid-item__content {
|
|
padding: 0 var(--van-padding-base);
|
|
}
|
|
|
|
.van-button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.van-button--mini {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* ====== uv-ui Override ====== */
|
|
.uv-button--info {
|
|
border-color: $text-color-base !important;
|
|
color: $text-color-base !important;
|
|
}
|
|
|
|
/* ====== Iconfont ====== */
|
|
.iconfont {
|
|
font-family: iconfont;
|
|
}
|
|
|
|
/* ====== Display ====== */
|
|
.d-none { display: none !important; }
|
|
.d-inline { display: inline !important; }
|
|
.d-inline-block { display: inline-block !important; }
|
|
.d-block { display: block !important; }
|
|
.d-flex { display: flex; }
|
|
.invisible { visibility: hidden !important; }
|
|
|
|
/* ====== Flex Layout ====== */
|
|
.flex { display: flex; flex-direction: row; }
|
|
.flex-row { flex-direction: row !important; }
|
|
.flex-column { flex-direction: column !important; }
|
|
.flex-row-reverse { flex-direction: row-reverse !important; }
|
|
.flex-column-reverse { flex-direction: column-reverse !important; }
|
|
.flex-wrap { flex-wrap: wrap !important; }
|
|
.flex-nowrap { flex-wrap: nowrap !important; }
|
|
.flex-fill { flex: 1 1 auto !important; }
|
|
.flex-1 { flex: 1; }
|
|
.flex-2 { flex: 2; }
|
|
.flex-3 { flex: 3; }
|
|
.flex-4 { flex: 4; }
|
|
.flex-5 { flex: 5; }
|
|
.flex-shrink-0 { flex-shrink: 0 !important; }
|
|
|
|
/* ====== Flex Alignment ====== */
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-around { justify-content: space-around; }
|
|
.justify-evenly { justify-content: space-evenly !important; }
|
|
|
|
.align-start { align-items: flex-start; }
|
|
.align-center { align-items: center; }
|
|
.align-end { align-items: flex-end; }
|
|
.align-stretch { align-items: stretch; }
|
|
.align-baseline { align-items: baseline !important; }
|
|
|
|
/* ====== Grid System ====== */
|
|
.row {
|
|
margin-right: -20rpx;
|
|
margin-left: -20rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
|
|
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
|
|
position: relative;
|
|
padding-right: 20rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.col-12 { width: 750rpx; }
|
|
.col-11 { width: 687.5rpx; }
|
|
.col-10 { width: 625rpx; }
|
|
.col-9 { width: 562.5rpx; }
|
|
.col-8 { width: 500rpx; }
|
|
.col-7 { width: 437.5rpx; }
|
|
.col-6 { width: 375rpx; }
|
|
.col-5 { width: 312.5rpx; }
|
|
.col-4 { width: 250rpx; }
|
|
.col-3 { width: 187.5rpx; }
|
|
.col-2 { width: 125rpx; }
|
|
.col-1 { width: 62.5rpx; }
|
|
|
|
.col-offset-12 { margin-left: 750rpx; }
|
|
.col-offset-11 { margin-left: 687.5rpx; }
|
|
.col-offset-10 { margin-left: 625rpx; }
|
|
.col-offset-9 { margin-left: 562.5rpx; }
|
|
.col-offset-8 { margin-left: 500rpx; }
|
|
.col-offset-7 { margin-left: 437.5rpx; }
|
|
.col-offset-6 { margin-left: 375rpx; }
|
|
.col-offset-5 { margin-left: 312.5rpx; }
|
|
.col-offset-4 { margin-left: 250rpx; }
|
|
.col-offset-3 { margin-left: 187.5rpx; }
|
|
.col-offset-2 { margin-left: 125rpx; }
|
|
.col-offset-1 { margin-left: 62.5rpx; }
|
|
.col-offset-0 { margin-left: 0; }
|
|
|
|
/* ====== Width & Height ====== */
|
|
.w-25 { width: 25% !important; }
|
|
.w-40 { width: 40%; }
|
|
.w-50 { width: 50% !important; }
|
|
.w-60 { width: 60%; }
|
|
.w-75 { width: 75% !important; }
|
|
.w-80 { width: 80% !important; }
|
|
.w-90 { width: 90% !important; }
|
|
.w-100 { width: 100% !important; }
|
|
.h-100 { height: 100% !important; }
|
|
|
|
/* ====== Margin ====== */
|
|
.m-0 { margin: 0; }
|
|
.m-auto { margin: auto; }
|
|
.m-1 { margin: 10rpx; }
|
|
.m-2 { margin: 20rpx; }
|
|
.m-3 { margin: 30rpx; }
|
|
.m-4 { margin: 40rpx; }
|
|
.m-5 { margin: 50rpx; }
|
|
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-auto { margin-top: auto; }
|
|
.mt-1 { margin-top: 10rpx; }
|
|
.mt-2 { margin-top: 20rpx; }
|
|
.mt-3 { margin-top: 30rpx; }
|
|
.mt-4 { margin-top: 40rpx; }
|
|
.mt-5 { margin-top: 50rpx; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-auto { margin-bottom: auto; }
|
|
.mb-1 { margin-bottom: 10rpx; }
|
|
.mb-2 { margin-bottom: 20rpx; }
|
|
.mb-3 { margin-bottom: 30rpx; }
|
|
.mb-4 { margin-bottom: 40rpx; }
|
|
.mb-5 { margin-bottom: 50rpx; }
|
|
|
|
.ml-0 { margin-left: 0; }
|
|
.ml-auto { margin-left: auto; }
|
|
.ml-1 { margin-left: 10rpx; }
|
|
.ml-2 { margin-left: 20rpx; }
|
|
.ml-3 { margin-left: 30rpx; }
|
|
.ml-4 { margin-left: 40rpx; }
|
|
.ml-5 { margin-left: 50rpx; }
|
|
|
|
.mr-0 { margin-right: 0; }
|
|
.mr-auto { margin-right: auto; }
|
|
.mr-1 { margin-right: 10rpx; }
|
|
.mr-2 { margin-right: 20rpx; }
|
|
.mr-3 { margin-right: 30rpx; }
|
|
.mr-4 { margin-right: 40rpx; }
|
|
.mr-5 { margin-right: 50rpx; }
|
|
|
|
.mx-0 { margin-left: 0; margin-right: 0; }
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
|
|
.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
|
|
.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
|
|
.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
|
|
.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }
|
|
|
|
.my-0 { margin-top: 0; margin-bottom: 0; }
|
|
.my-auto { margin-top: auto; margin-bottom: auto; }
|
|
.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
|
|
.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
|
|
.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
|
|
.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
|
|
.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
|
|
|
|
/* ====== Padding ====== */
|
|
.p-0 { padding: 0; }
|
|
.p-1 { padding: 10rpx; }
|
|
.p-2 { padding: 20rpx; }
|
|
.p-3 { padding: 30rpx; }
|
|
.p-4 { padding: 40rpx; }
|
|
.p-5 { padding: 50rpx; }
|
|
|
|
.pt-0 { padding-top: 0; }
|
|
.pt-1 { padding-top: 10rpx; }
|
|
.pt-2 { padding-top: 20rpx; }
|
|
.pt-3 { padding-top: 30rpx; }
|
|
.pt-4 { padding-top: 40rpx; }
|
|
.pt-5 { padding-top: 50rpx; }
|
|
|
|
.pb-0 { padding-bottom: 0; }
|
|
.pb-1 { padding-bottom: 10rpx; }
|
|
.pb-2 { padding-bottom: 20rpx; }
|
|
.pb-3 { padding-bottom: 30rpx; }
|
|
.pb-4 { padding-bottom: 40rpx; }
|
|
.pb-5 { padding-bottom: 50rpx; }
|
|
|
|
.pl-0 { padding-left: 0; }
|
|
.pl-1 { padding-left: 10rpx; }
|
|
.pl-2 { padding-left: 20rpx; }
|
|
.pl-3 { padding-left: 30rpx; }
|
|
.pl-4 { padding-left: 40rpx; }
|
|
.pl-5 { padding-left: 50rpx; }
|
|
|
|
.pr-0 { padding-right: 0; }
|
|
.pr-1 { padding-right: 10rpx; }
|
|
.pr-2 { padding-right: 20rpx; }
|
|
.pr-3 { padding-right: 30rpx; }
|
|
.pr-4 { padding-right: 40rpx; }
|
|
.pr-5 { padding-right: 50rpx; }
|
|
|
|
.px-0 { padding-left: 0; padding-right: 0; }
|
|
.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
|
|
.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
|
|
.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
|
|
.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
|
|
.px-5 { padding-left: 50rpx; padding-right: 50rpx; }
|
|
|
|
.py-0 { padding-top: 0; padding-bottom: 0; }
|
|
.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
|
|
.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
|
|
.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
|
|
.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
|
|
.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
|
|
|
|
/* ====== Typography - Font Size ====== */
|
|
.font-smaller { font-size: 15rpx; }
|
|
.font-small { font-size: 20rpx; }
|
|
.font-sm { font-size: 25rpx; }
|
|
.font { font-size: 30rpx; }
|
|
.font-md { font-size: 35rpx; }
|
|
.font-lg { font-size: 40rpx; }
|
|
.font-size-sm { font-size: $font-size-sm; }
|
|
.font-size-base { font-size: $font-size-base; }
|
|
.font-size-medium { font-size: 26rpx; }
|
|
.font-size-lg { font-size: $font-size-lg; }
|
|
.font-size-extra-lg { font-size: 40rpx; }
|
|
|
|
.h1 { font-size: 80rpx; line-height: 1.8; }
|
|
.h2 { font-size: 60rpx; line-height: 1.8; }
|
|
.h3 { font-size: 45rpx; line-height: 1.8; }
|
|
.h4 { font-size: 32rpx; line-height: 1.8; }
|
|
.h5 { font-size: 30rpx; line-height: 1.8; }
|
|
.h6 { font-size: 28rpx; line-height: 1.8; }
|
|
|
|
/* ====== Typography - Font Weight ====== */
|
|
.font-weight-light { font-weight: 300 !important; }
|
|
.font-weight-lighter { font-weight: 100 !important; }
|
|
.font-weight-normal { font-weight: 400 !important; }
|
|
.font-weight-bold { font-weight: 700 !important; }
|
|
.font-weight-bolder { font-weight: 900 !important; }
|
|
.font-italic { font-style: italic; }
|
|
|
|
/* ====== Typography - Color ====== */
|
|
.text-base { color: $text-color-base; }
|
|
.text-assist { color: $text-color-assist; }
|
|
.text-primary { color: $color-primary; }
|
|
.text-success { color: $color-success; }
|
|
.text-warning { color: $color-warning; }
|
|
.text-danger { color: $color-error; }
|
|
.text-white { color: #ffffff; }
|
|
.text-dark { color: $text-color-base; }
|
|
.text-muted { color: $text-color-assist; }
|
|
.text-light-muted { color: $text-color-light-muted; }
|
|
.text-light-black { color: rgba(0, 0, 0, 0.5); }
|
|
.text-light-white { color: rgba(255, 255, 255, 0.5); }
|
|
|
|
/* ====== Typography - Alignment ====== */
|
|
.text-left { text-align: left !important; }
|
|
.text-right { text-align: right !important; }
|
|
.text-center { text-align: center !important; }
|
|
|
|
/* ====== Typography - Decoration ====== */
|
|
.text-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text-through { text-decoration: line-through; }
|
|
|
|
.line-height-100 { line-height: 100%; }
|
|
.line-height-2 { line-height: 2rem !important; }
|
|
|
|
/* ====== Background ====== */
|
|
.bg-base { background-color: $bg-color; }
|
|
.bg-white { background-color: #ffffff; }
|
|
.bg-transparent { background-color: transparent !important; }
|
|
.bg-primary { background-color: $color-primary; }
|
|
.bg-warning { background-color: $color-warning; }
|
|
.bg-light { background-color: #f8f9fa; }
|
|
.bg-dark { background-color: $text-color-base; }
|
|
|
|
/* ====== Border ====== */
|
|
.border { border-width: 1rpx; border-style: solid; border-color: $border-color; }
|
|
.border-top {
|
|
border-top-width: 1rpx;
|
|
border-top-style: solid;
|
|
border-top-color: $border-color;
|
|
}
|
|
.border-right {
|
|
border-right-width: 1rpx;
|
|
border-right-style: solid;
|
|
border-right-color: $border-color;
|
|
}
|
|
.border-bottom {
|
|
border-bottom-width: 1rpx;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: $border-color;
|
|
}
|
|
.border-left {
|
|
border-left-width: 1rpx;
|
|
border-left-style: solid;
|
|
border-left-color: $border-color;
|
|
}
|
|
|
|
.border-0 { border-width: 0 !important; }
|
|
.border-top-0 { border-top-width: 0 !important; }
|
|
.border-right-0 { border-right-width: 0 !important; }
|
|
.border-bottom-0 { border-bottom-width: 0 !important; }
|
|
.border-left-0 { border-left-width: 0 !important; }
|
|
|
|
.border-primary { border-color: $color-primary; }
|
|
.border-light-secondary { border-color: $border-color-light; }
|
|
.border-white { border-color: #ffffff; }
|
|
|
|
/* ====== Border Radius ====== */
|
|
.rounded { border-radius: 8rpx; }
|
|
.rounded-top {
|
|
border-top-left-radius: 8rpx;
|
|
border-top-right-radius: 8rpx;
|
|
}
|
|
.rounded-bottom {
|
|
border-bottom-right-radius: 8rpx;
|
|
border-bottom-left-radius: 8rpx;
|
|
}
|
|
.rounded-circle { border-radius: 50% !important; }
|
|
.rounded-pill { border-radius: 50rem !important; }
|
|
.rounded-0 { border-radius: 0; }
|
|
.border-radius-base { border-radius: $border-radius-base; }
|
|
|
|
/* ====== Overflow ====== */
|
|
.overflow-auto { overflow: auto !important; }
|
|
.overflow-hidden { overflow: hidden !important; }
|
|
|
|
/* ====== Position ====== */
|
|
.position-relative { position: relative !important; }
|
|
.position-absolute { position: absolute !important; }
|
|
.position-fixed { position: fixed !important; }
|
|
|
|
.fixed-top {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.fixed-bottom {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.top-0 { top: 0; }
|
|
.left-0 { left: 0; }
|
|
.right-0 { right: 0; }
|
|
.bottom-0 { bottom: 0; }
|
|
|
|
/* ====== Shadow ====== */
|
|
.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15); }
|
|
.shadow-lg { box-shadow: 0 40rpx 100rpx 0 rgba(0, 0, 0, 0.175); }
|
|
.shadow-none { box-shadow: none !important; }
|
|
|
|
/* ====== Vertical Align ====== */
|
|
.align-top { vertical-align: top !important; }
|
|
.align-middle { vertical-align: middle !important; }
|
|
.align-bottom { vertical-align: bottom !important; }
|
|
|
|
/* ====== Misc ====== */
|
|
.box-border { box-sizing: border-box; }
|
|
.pre-line { white-space: pre-line; }
|
|
.scroll-row { width: 100%; white-space: nowrap; }
|
|
.scroll-row-item { display: inline-block !important; }
|
|
.page-space { padding: 0 34rpx; }
|
|
|
|
/* ====== Business Components ====== */
|
|
|
|
/* Page Card */
|
|
.page-card {
|
|
background: #fff;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
/* Card Component */
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
|
|
&.noBorder {
|
|
.card-head { border-bottom: 0; }
|
|
.card-title { font-size: 28rpx; color: $text-color-assist; }
|
|
.card-content { padding: 0; }
|
|
}
|
|
|
|
&.min {
|
|
.card-title { font-size: 28rpx; color: $text-color-assist; }
|
|
.card-content { padding: 0; }
|
|
}
|
|
|
|
&.full {
|
|
border-radius: 0;
|
|
.card-content { padding: 0 34rpx 20rpx; }
|
|
}
|
|
|
|
&-head {
|
|
height: 85rpx;
|
|
border-bottom: 1rpx solid $border-color;
|
|
padding-left: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: $text-color-base;
|
|
|
|
.card-title-sub {
|
|
font-weight: normal;
|
|
font-size: 22rpx;
|
|
color: $text-color-assist;
|
|
}
|
|
}
|
|
|
|
&-more {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: $text-color-assist;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.uv-icon {
|
|
margin-left: 10rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding: 20rpx 0 0;
|
|
border-bottom-left-radius: 15rpx;
|
|
border-bottom-right-radius: 15rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10rpx 0;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
|
|
&-badge {
|
|
align-items: center;
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
span {
|
|
margin: 0 !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
&-label {
|
|
margin-top: 14rpx;
|
|
line-height: 33rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: $text-color-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Info Cell */
|
|
.infos {
|
|
padding: 20rpx 37rpx;
|
|
|
|
&.infos-right .info-cell-value {
|
|
text-align: right;
|
|
}
|
|
|
|
.info-cell {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&-label {
|
|
margin-right: 30rpx;
|
|
line-height: 32rpx;
|
|
font-size: 24rpx;
|
|
color: $text-color-assist;
|
|
}
|
|
|
|
&-value {
|
|
flex: 1;
|
|
line-height: 32rpx;
|
|
font-size: 24rpx;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-operation {
|
|
line-height: 32rpx;
|
|
font-size: 24rpx;
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Simple Cell */
|
|
.simple-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
&-content {
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
&-title {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-label {
|
|
line-height: 30rpx;
|
|
font-size: 22rpx;
|
|
color: $text-color-base;
|
|
}
|
|
}
|
|
|
|
/* Store Info */
|
|
.storeInfo {
|
|
padding: 24rpx 35rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
&-pic {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
&-info-name {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-info-address {
|
|
line-height: 28rpx;
|
|
font-size: 20rpx;
|
|
color: $text-color-assist;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
&-action {
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
background: $text-color-base;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* Center Title */
|
|
.center-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 20rpx 0;
|
|
|
|
&-line {
|
|
width: 36rpx;
|
|
height: 1rpx;
|
|
background: $text-color-base;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 22rpx;
|
|
}
|
|
}
|
|
|
|
/* List */
|
|
// .list {
|
|
// padding: 25rpx 35rpx;
|
|
// position: relative;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
// background: #fff;
|
|
|
|
// &-main {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// flex: 1;
|
|
// }
|
|
|
|
// &-actions-edit {
|
|
// width: 33rpx;
|
|
// height: 33rpx;
|
|
|
|
// .image {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// display: block;
|
|
// }
|
|
// }
|
|
|
|
// &.noBorder::after {
|
|
// display: none;
|
|
// }
|
|
|
|
// &::after {
|
|
// content: '';
|
|
// position: absolute;
|
|
// left: 35rpx;
|
|
// top: 0;
|
|
// right: 0;
|
|
// height: 1rpx;
|
|
// background: $border-color;
|
|
// }
|
|
|
|
// &-label {
|
|
// line-height: 40rpx;
|
|
// font-size: 28rpx;
|
|
// color: $text-color-base;
|
|
// }
|
|
|
|
// &-content {
|
|
// flex: 1;
|
|
|
|
// input,
|
|
// .uni-input {
|
|
// line-height: 40rpx;
|
|
// font-size: 28rpx;
|
|
// color: $text-color-base;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
/* Y-List */
|
|
.y-list {
|
|
margin-bottom: 20rpx;
|
|
|
|
&.min {
|
|
margin-bottom: 15rpx;
|
|
|
|
.y-list-label { margin-right: 10rpx; }
|
|
.y-list-content { height: 88rpx; }
|
|
}
|
|
|
|
.uv-list-item__wrapper {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
&-content {
|
|
flex: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
padding-left: 34rpx;
|
|
padding-right: 34rpx;
|
|
|
|
&.avatar { height: 130rpx; }
|
|
}
|
|
|
|
&-label {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: $text-color-assist;
|
|
margin-right: 30rpx;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
text-wrap: nowrap;
|
|
flex: 1;
|
|
}
|
|
|
|
&-select {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: $text-color-base;
|
|
flex: 1;
|
|
text-align: right;
|
|
|
|
&-placeholder {
|
|
color: $text-color-assist;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&-default {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-value {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: $color-primary;
|
|
|
|
.uv-input { border: 0; }
|
|
}
|
|
|
|
.uvicon-arrow-right {
|
|
font-size: 10rpx !important;
|
|
}
|
|
|
|
&-avatar {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.img {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Order */
|
|
.order {
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
margin: 10rpx 34rpx;
|
|
|
|
&-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 80rpx;
|
|
border-bottom: 1rpx solid $border-color;
|
|
padding: 0 34rpx;
|
|
}
|
|
|
|
&-logo .image {
|
|
height: 45rpx;
|
|
width: auto;
|
|
}
|
|
|
|
&-title {
|
|
line-height: 45rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-status {
|
|
&.status-1 {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-assist;
|
|
}
|
|
|
|
&.status-2 {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
|
|
&-info {
|
|
border-top: 1rpx solid $border-color;
|
|
border-bottom: 1rpx solid $border-color;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 24rpx;
|
|
color: $text-color-assist;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: 34rpx;
|
|
|
|
text { margin-left: 10rpx; }
|
|
}
|
|
|
|
&-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 34rpx;
|
|
|
|
&-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&-actions-delete {
|
|
width: 169rpx;
|
|
height: 60rpx;
|
|
border: 1px solid $text-color-base;
|
|
border-radius: 0;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
color: $text-color-base;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
&-actions-primary {
|
|
margin-left: 20rpx;
|
|
width: 169rpx;
|
|
height: 60rpx;
|
|
background: $color-primary;
|
|
border: 1px solid $color-primary;
|
|
border-radius: 0;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
/* Address */
|
|
.address {
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 40rpx 34rpx;
|
|
|
|
&-main { flex: 1; }
|
|
|
|
&-actions-edit {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.noBorder::after { display: none; }
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 35rpx;
|
|
top: 0;
|
|
right: 0;
|
|
height: 1rpx;
|
|
background: $border-color;
|
|
}
|
|
|
|
&-icon {
|
|
margin-right: 20rpx;
|
|
width: 35rpx;
|
|
height: 46rpx;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&-name {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-base;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
&-phone {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&-default {
|
|
margin-right: 82rpx;
|
|
}
|
|
|
|
&-desc {
|
|
line-height: 33rpx;
|
|
font-size: 24rpx;
|
|
color: $text-color-assist;
|
|
}
|
|
}
|
|
|
|
/* Action Bar */
|
|
.action-bar {
|
|
position: fixed;
|
|
display: flex;
|
|
bottom: 0;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
|
|
&.screen {
|
|
bottom: 50px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
&.column {
|
|
flex-direction: column;
|
|
|
|
.action-info { flex: 0 0 100rpx; }
|
|
.action-btns { height: 100rpx; align-items: center; }
|
|
}
|
|
|
|
.action-total { margin-left: 20rpx; }
|
|
|
|
.action-info {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 34rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.action-icons {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
padding-left: 20rpx;
|
|
|
|
&-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&-badge {
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: 0;
|
|
}
|
|
|
|
.action-icon-img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.action-icon-label {
|
|
line-height: 28rpx;
|
|
font-size: 20rpx;
|
|
color: $text-color-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24rpx;
|
|
|
|
.uv-button-wrapper {
|
|
flex: 1;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.uv-button {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Bottom Bar */
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
display: flex;
|
|
}
|
|
|
|
.bottom-bar-bg {
|
|
height: 150rpx;
|
|
}
|
|
|
|
/* Blank / Shopping Bar */
|
|
.blank {
|
|
height: var(--van-action-bar-height);
|
|
}
|
|
|
|
.shopping-bar {
|
|
bottom: var(--van-tabbar-height);
|
|
}
|
|
|
|
.full-btn {
|
|
height: var(--van-action-bar-height);
|
|
}
|
|
|
|
.shopping-checkbox .van-checkbox {
|
|
padding: 2px;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.shopping-checkbox-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 26rpx 0 26rpx 30rpx;
|
|
}
|
|
|
|
/* Form */
|
|
.form-checkbox {
|
|
padding: 43rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-buttons {
|
|
margin-top: 34rpx;
|
|
padding: 0 34rpx;
|
|
}
|
|
|
|
/* Background Warp */
|
|
.background-warp {
|
|
position: relative;
|
|
|
|
.background {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
|
|
.image { width: 100%; }
|
|
}
|
|
|
|
.background-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
/* Search */
|
|
.search .y-search {
|
|
background: none;
|
|
}
|
|
|
|
.search-bar {
|
|
background: #fff;
|
|
padding: 20rpx 34rpx;
|
|
}
|
|
|
|
/* Subsection */
|
|
.y-subsection {
|
|
padding: 20rpx 33rpx 0;
|
|
}
|
|
|
|
/* Swiper */
|
|
.swiper {
|
|
width: 100%;
|
|
|
|
&.detail { height: 750rpx; }
|
|
|
|
.image {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Cell Attr */
|
|
.cell-attr {
|
|
.cell-title {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-base;
|
|
}
|
|
|
|
.cell-sub-title {
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: $text-color-assist;
|
|
}
|
|
}
|
|
|
|
/* uv-list border override */
|
|
.uv-list--border-top { background: $border-color !important; }
|
|
.uv-list--border-left { background: $border-color !important; }
|
|
.uv-list--border-bottom { background: $border-color !important; }
|
|
.uv-list--border-right { background: $border-color !important; }
|
|
|
|
.uvicon-arrow-right {
|
|
color: $text-color-assist;
|
|
}
|
|
|
|
/* Icon component */
|
|
.icon .image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ====== Backward Compatibility Aliases ====== */
|
|
/* 旧类名 -> 新类名映射，保留兼容性 */
|
|
.justify-content-start { justify-content: flex-start; }
|
|
.justify-content-end { justify-content: flex-end; }
|
|
.justify-content-center { justify-content: center; }
|
|
.justify-content-between { justify-content: space-between; }
|
|
.justify-content-around { justify-content: space-around; }
|
|
.justify-content-evenly { justify-content: space-evenly !important; }
|
|
.just-content-center { justify-content: center; }
|
|
.just-content-around { justify-content: space-around; }
|
|
.align-items-start { align-items: flex-start; }
|
|
.align-items-end { align-items: flex-end; }
|
|
.align-items-center { align-items: center; }
|
|
.align-items-baseline { align-items: baseline !important; }
|
|
.text-color-base { color: $text-color-base; }
|
|
.text-color-assist { color: $text-color-assist; }
|
|
.text-color-primary { color: $color-primary; }
|
|
.text-color-danger { color: $color-error; }
|
|
.text-color-white { color: #ffffff; }
|
|
.text-color-warning { color: $color-warning; }
|
|
.font-size-medium { font-size: 26rpx; }
|
|
.font-size-extra-lg { font-size: 40rpx; }
|
|
.bg-base { background-color: $bg-color; }
|