初始上传
This commit is contained in:
751
addon/cashier/source/os/common/css/common.scss
Executable file
751
addon/cashier/source/os/common/css/common.scss
Executable file
@@ -0,0 +1,751 @@
|
||||
// 基础flex布局
|
||||
.uni-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-flex-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.justify-start {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.items-flex-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
-ms-flex-negative: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-grow-0 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
-webkit-flex-grow: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.justify-self-auto {
|
||||
-ms-grid-column-align: auto;
|
||||
justify-self: auto;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-start {
|
||||
-ms-flex-line-pack: start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// 高度填充
|
||||
.height-all {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
// 公共区块样式
|
||||
.common-wrap {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
// margin: .15rem .2rem;
|
||||
|
||||
// &:first-child {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
|
||||
// &:last-child {
|
||||
// margin-right: .14rem;
|
||||
// }
|
||||
}
|
||||
|
||||
// 公共滚动条样式
|
||||
.common-scrollbar,
|
||||
.common-scrollbar .uni-scroll-view {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.06rem;
|
||||
box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 公共头像样式
|
||||
.common-headimg {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 公共tab切换
|
||||
.common-tab-wrap {
|
||||
height: 0.53rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
display: flex;
|
||||
padding: 0 0.2rem;
|
||||
position: relative;
|
||||
|
||||
.tab-item {
|
||||
height: 0.53rem;
|
||||
line-height: 0.53rem;
|
||||
padding: 0 0.2rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.active-bar {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0.03rem;
|
||||
border-radius: 0.02rem;
|
||||
background: $primary-color;
|
||||
bottom: -0.01rem;
|
||||
left: 0;
|
||||
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 公共表格操作样式
|
||||
.common-table-action {
|
||||
text {
|
||||
margin-left: 0.1rem;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color-light-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 公共表格批量操作样式
|
||||
.common-table-batch {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0.02rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
border-radius: 0.02rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 主要按钮
|
||||
.primary-btn {
|
||||
background: $primary-color !important;
|
||||
color: #fff !important;
|
||||
font-size: 0.14rem;
|
||||
|
||||
&::after {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color-light-2) !important;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: var(--primary-color-light-6) !important;
|
||||
border-color: var(--primary-color-light-6) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color-light-6) !important;
|
||||
border-color: var(--primary-color-light-6) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 默认按钮
|
||||
.default-btn {
|
||||
font-size: 0.14rem;
|
||||
background: #fff !important;
|
||||
color: #606266 !important;
|
||||
border-color: #606266 !important;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-color: $primary-color !important;
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
background-color: var(--primary-color-light-9) !important;
|
||||
|
||||
&:after {
|
||||
border-color: $primary-color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary-color !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #ddd !important;
|
||||
border-color: #e6e6e6 !important;
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
&:after {
|
||||
border-color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ddd !important;
|
||||
border-color: #e6e6e6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #ddd !important;
|
||||
border-color: #e6e6e6 !important;
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
&:after {
|
||||
border-color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ddd !important;
|
||||
border-color: #e6e6e6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 公共数字键盘 */
|
||||
.keyboard-wrap {
|
||||
width: 5rem;
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
|
||||
.num-wrap {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.key-item {
|
||||
margin: 0.1rem 0.1rem 0 0;
|
||||
background: #f5f5f5;
|
||||
min-width: calc((100% - 0.3rem) / 3);
|
||||
text-align: center;
|
||||
padding: 0.15rem 0;
|
||||
border-radius: 0.05rem;
|
||||
font-size: 0.16rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
&.empty:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1rem;
|
||||
|
||||
.delete,
|
||||
.confirm {
|
||||
background: #f5f5f5;
|
||||
min-width: calc((100% - 0.3rem) / 3);
|
||||
text-align: center;
|
||||
padding: 0.15rem 0;
|
||||
margin-top: 0.1rem;
|
||||
border-radius: 0.05rem;
|
||||
font-size: 0.16rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
flex: 1;
|
||||
background: $primary-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 单行超出隐藏 */
|
||||
.using-hidden {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
/* 多行超出隐藏 */
|
||||
.multi-hidden {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button::after {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button[type=default] {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
uni-switch .uni-switch-input.uni-switch-input-checked {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
//二次确认弹框
|
||||
.confirm-pop {
|
||||
width: 3rem;
|
||||
// min-height: 1.5rem;
|
||||
border-radius: 0.06rem;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2rem;
|
||||
|
||||
.title {
|
||||
font-size: 0.16rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.3rem;
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
padding: 0 0.15rem;
|
||||
margin: 0;
|
||||
height: 0.35rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.message {
|
||||
width: 5.2rem;
|
||||
min-height: 3.2rem;
|
||||
background: #ffffff;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.15rem;
|
||||
|
||||
&:after {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
content: '';
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
font-size: 0.16rem;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0.15rem;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-box {
|
||||
margin: 0.15rem;
|
||||
height: 2.2rem;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 0.06rem;
|
||||
padding: 0.15rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.save {
|
||||
width: calc(100% - 0.3rem);
|
||||
float: right;
|
||||
margin: 0.15rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//开单左侧主体头部会员信息展示样式
|
||||
.cashregister-header-box {
|
||||
padding: 0.20rem;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
.search-box {
|
||||
.head-search {
|
||||
display: flex;
|
||||
|
||||
.search-switch {
|
||||
width: 0.7rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-left: 0.1rem;
|
||||
display: flex;
|
||||
border-width: 0.01rem;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
height: 0.3rem;
|
||||
align-items: center;
|
||||
padding-left: 0.05rem;
|
||||
width: calc(100% - 1.3rem);
|
||||
|
||||
.iconfont {
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 0.55rem;
|
||||
margin-left: 0.1rem;
|
||||
padding: 0 0.1rem;
|
||||
height: 0.32rem;
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
height: 0.3rem;
|
||||
padding: 0 0.1rem 0 0.1rem;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.14rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-date {
|
||||
flex: 1;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.uni-date-x {
|
||||
height: 0.28rem;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
margin-top: 0.14rem;
|
||||
// height: 0.86rem;
|
||||
font-size: 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.14rem;
|
||||
padding-right: 0.12rem;
|
||||
background: linear-gradient(270deg, #515A6E 0%, #19233E 100%);
|
||||
border-radius: 0.04rem;
|
||||
|
||||
.header-image {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.headimg{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.member-nameplate{
|
||||
width: 0.52rem;
|
||||
height: 0.18rem;
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.1rem;
|
||||
font-weight: 600;
|
||||
color: #793913;
|
||||
line-height: 0.16rem;
|
||||
text-align: center;
|
||||
margin-top: -0.09rem;
|
||||
z-index: 2;
|
||||
background-image: url('@/static/member/info_bg.png');
|
||||
}
|
||||
}
|
||||
.head-info {
|
||||
flex: 1;
|
||||
margin-left: 0.1rem;
|
||||
|
||||
.name {
|
||||
font-size: 0.16rem;
|
||||
color: #F4C89A;
|
||||
display: flex;
|
||||
margin-bottom: 0.04rem;
|
||||
max-width: 1.6rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.mobile {
|
||||
width: 0.88rem;
|
||||
height: 0.2rem;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 800;
|
||||
line-height: 0.2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
// max-width: 0.8rem;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname{
|
||||
max-width: 0.44rem;
|
||||
font-size: 0.12rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
line-height: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.head-info-bottom {
|
||||
font-size: 0.12rem;
|
||||
font-weight: 500;
|
||||
color: #F0F0F0;
|
||||
line-height: 0.17rem;
|
||||
&.point{
|
||||
margin-bottom: 0.02rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
line-height: 0.3rem;
|
||||
padding: 0 0.05rem;
|
||||
overflow: hidden;
|
||||
font-size: $uni-font-size-sm;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-ms-flex-negative: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0.04rem;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.menber-open{
|
||||
width: 0.68rem;
|
||||
}
|
||||
.replace-member{
|
||||
margin-left: 0.06rem;
|
||||
width: 0.36rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
//返回上一级
|
||||
.title-back{
|
||||
margin-bottom: 0.2rem;
|
||||
.left{
|
||||
margin-left: 0.05rem;
|
||||
}
|
||||
.iconqianhou1{
|
||||
font-size: 0.17rem;
|
||||
}
|
||||
text{
|
||||
font-size: 0.18rem !important;
|
||||
line-height: 1;
|
||||
}
|
||||
.content{
|
||||
margin: -0.02rem 0.05rem 0 0.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary-color-9{
|
||||
background-color: var(--primary-color-light-9) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user