eed73239ab
- 优化日期选择器样式和默认值 - 重新设计优惠券卡片样式 - 添加加载状态和空状态处理 - 更新项目配置和小程序基础库版本
257 lines
3.7 KiB
Plaintext
257 lines
3.7 KiB
Plaintext
/* pages/customer/score/exchange.wxss */
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 顶部导航栏 */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 15px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-btn .icon-back {
|
|
font-size: 24px;
|
|
color: #333;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dots {
|
|
font-size: 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.record-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #666;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 日期选择区域 */
|
|
.date-section {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
gap: 15px;
|
|
}
|
|
|
|
.date-picker {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.date-input {
|
|
display: flex;
|
|
align-items: center;
|
|
/* gap: 5px; */
|
|
padding: 10rpx 15rpx;
|
|
/* border: 1px solid #ddd; */
|
|
/* border-radius: 4px; */
|
|
/* background-color: #fff; */
|
|
width: 210rpx;
|
|
}
|
|
|
|
.date-icon {
|
|
/* font-size: 16px; */
|
|
}
|
|
|
|
.date-text {
|
|
/* font-size: 14px; */
|
|
color: #333;
|
|
}
|
|
|
|
.date-separator {
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 8px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 订单列表 */
|
|
.order-list {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.order-item {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
/* padding: 15px; */
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* 订单头部 */
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #ebf7f5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.order-number {
|
|
/* font-size: 28rpx; */
|
|
}
|
|
|
|
.order-detail-btn {
|
|
/* color: #4CAF50;
|
|
font-size: 14px; */
|
|
}
|
|
|
|
/* 客户信息 */
|
|
.customer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.customer-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.customer-phone {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.points-info {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.points-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.points-value {
|
|
font-size: 14px;
|
|
color: #ff4444;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 优惠券卡片 */
|
|
.coupon-card {
|
|
display: flex;
|
|
background-image: url('https://img.liche.cn/lichebao/coupon-red.png');
|
|
width: 650rpx;
|
|
height: 174rpx;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
/* background: linear-gradient(135deg, #ffebee 0%, #fff 100%); */
|
|
/* border-radius: 8px;
|
|
overflow: hidden; */
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.coupon-left {
|
|
/* padding: 20px; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 120px;
|
|
/* background-color: #ffebee; */
|
|
}
|
|
|
|
.coupon-amount {
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
color: #ff4444;
|
|
line-height: 1;
|
|
}
|
|
|
|
.coupon-unit {
|
|
font-size: 16px;
|
|
color: #ff4444;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.coupon-rules {
|
|
color: #ae5151;
|
|
}
|
|
|
|
.coupon-divider {
|
|
width: 2px;
|
|
/* background: repeating-linear-gradient(
|
|
to bottom,
|
|
transparent 0px,
|
|
transparent 5px,
|
|
#ddd 5px,
|
|
#ddd 10px
|
|
); */
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.coupon-right {
|
|
flex: 1;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.coupon-title {
|
|
font-size: 18px;
|
|
color: #333;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.coupon-validity {
|
|
color: #ae5151;
|
|
}
|
|
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
} |