sc
This commit is contained in:
qsh
@@ -11,8 +11,8 @@ VITE_APP_PHONE = 18056811878
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
#开发环境
|
||||
VITE_APP_BASE_API = 'https://cloud.ahxunjia.cn/'
|
||||
# VITE_APP_BASE_API = 'https://cloud.ahduima.com/'
|
||||
# VITE_APP_BASE_API = 'https://cloud.ahxunjia.cn/'
|
||||
VITE_APP_BASE_API = 'https://cloud.ahduima.com/'
|
||||
|
||||
#
|
||||
VITE_WEB_BASE_URL = 'https://xj.ahduima.com'
|
||||
|
||||
@@ -236,6 +236,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -245,7 +250,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -254,6 +259,13 @@
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 表单内容 */
|
||||
@@ -265,10 +277,15 @@
|
||||
/* 表单 section */
|
||||
.form-section {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -393,4 +410,187 @@
|
||||
font-size: 20rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.account-form-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
}
|
||||
|
||||
.switch.active .switch-button {
|
||||
left: 52rpx;
|
||||
}
|
||||
|
||||
.data-scope-item {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.scope-name {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.scope-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.account-form-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 36rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 180rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
}
|
||||
|
||||
.switch.active .switch-button {
|
||||
left: 62rpx;
|
||||
}
|
||||
|
||||
.data-scope-item {
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.scope-name {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.scope-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -229,6 +229,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -238,7 +243,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -247,6 +252,13 @@
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 筛选条件 */
|
||||
@@ -254,8 +266,13 @@
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@@ -309,10 +326,21 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.account-item:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
|
||||
.account-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.account-info {
|
||||
@@ -358,6 +386,7 @@
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
@@ -365,11 +394,21 @@
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background-color: #ebefff;
|
||||
color: #66b1ff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #fef0f0;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: #fde2e2;
|
||||
color: #f78989;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
@@ -442,14 +481,44 @@
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.account-manage-container {
|
||||
max-width: 1200px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
@@ -457,8 +526,18 @@
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.account-list {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 34rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
@@ -466,7 +545,102 @@
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
padding: 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.account-manage-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 36rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
padding: 28rpx 48rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -455,7 +455,7 @@
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
margin: 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -623,4 +623,183 @@
|
||||
color: #67c23a !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.profit-rule-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.rule-info-section,
|
||||
.rule-config-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.rule-content {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.rule-input {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.rule-unit {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.vip-item {
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.car-tag {
|
||||
padding: 4rpx 12rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.profit-rule-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 36rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.rule-info-section,
|
||||
.rule-config-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.rule-content {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.rule-input {
|
||||
width: 180rpx;
|
||||
height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.rule-unit {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.vip-item {
|
||||
padding: 20rpx 28rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.car-tag {
|
||||
padding: 6rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -58,7 +58,7 @@
|
||||
<view class="mock-qrcode">
|
||||
<view class="qrcode-pattern">
|
||||
<!-- 小程序二维码图片 -->
|
||||
<image :src="qrcode.appletUrl" mode="aspectFill"></image>
|
||||
<image :src="qrcode.appletUrl" mode="aspectFill" style="width: 100%; height: 100%;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -350,8 +350,13 @@
|
||||
|
||||
.qrcode-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.qrcode-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.qrcode-card {
|
||||
@@ -449,9 +454,9 @@
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8rpx 16rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -531,4 +536,141 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.qrcode-manage-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.qrcode-list-section {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.qrcode-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(350rpx, 1fr));
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.qrcode-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.qrcode-code {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.qrcode-status {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 28rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.mock-qrcode {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.qrcode-pattern {
|
||||
width: 190rpx;
|
||||
height: 190rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.qrcode-manage-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.qrcode-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(500rpx, 1fr));
|
||||
}
|
||||
|
||||
.qrcode-card {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.qrcode-code {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.qrcode-status {
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 18rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.mock-qrcode {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.qrcode-pattern {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -169,6 +169,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -178,7 +183,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -187,15 +192,27 @@
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 表单内容 */
|
||||
.form-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -335,25 +352,59 @@
|
||||
}
|
||||
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-add-container {
|
||||
max-width: 1000px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
padding: 28rpx 32rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
@@ -361,14 +412,88 @@
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 28rpx 32rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-add-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -193,6 +193,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -202,7 +207,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -211,15 +216,27 @@
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 表单内容 */
|
||||
.form-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -260,7 +277,7 @@
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
@@ -359,25 +376,58 @@
|
||||
}
|
||||
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-add-container {
|
||||
max-width: 1000px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
@@ -385,14 +435,87 @@
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 28rpx 32rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-add-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -277,7 +277,7 @@ const loadDistributorList = async () => {
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -346,10 +346,15 @@ const loadDistributorList = async () => {
|
||||
.distributor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.distributor-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.distributor-avatar {
|
||||
@@ -493,27 +498,100 @@ const loadDistributorList = async () => {
|
||||
}
|
||||
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-list-container {
|
||||
max-width: 1200px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.distributor-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.distributor-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 28rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.distributor-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-list-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.distributor-item {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.distributor-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 34rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
@@ -521,7 +599,8 @@ const loadDistributorList = async () => {
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 20rpx;
|
||||
padding: 18rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -572,4 +572,46 @@
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.login-card {
|
||||
max-width: 800rpx;
|
||||
padding: 180rpx 80rpx;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
height: 110rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 116rpx;
|
||||
line-height: 116rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.register-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,12 +19,12 @@
|
||||
<view class="generate-control">
|
||||
<picker
|
||||
:range="memberTypeOptions"
|
||||
:range-key="'memberName'"
|
||||
:range-key="'displayName'"
|
||||
:value="memberTypeIndex"
|
||||
@change="onMemberTypeChange"
|
||||
class="picker"
|
||||
>
|
||||
<view class="picker-text">{{ memberTypeOptions[memberTypeIndex]?.memberName || '请选择' }}</view>
|
||||
<view class="picker-text">{{ memberTypeOptions[memberTypeIndex]?.displayName || '请选择' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
@@ -60,7 +60,10 @@
|
||||
>
|
||||
<view class="code-header">
|
||||
<view class="code-value">{{ code.code }}</view>
|
||||
<view class="code-status" :class="getStatusClass(code)">{{ getStatusText(code) }}</view>
|
||||
<!-- <view class="code-status" :class="getStatusClass(code)">{{ getStatusText(code) }}</view> -->
|
||||
<view class="action-btn copy-btn" @click="copyCode(code.code)">
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
<view class="code-body">
|
||||
<view class="code-info">
|
||||
@@ -76,19 +79,25 @@
|
||||
<view class="info-label">使用时间：</view>
|
||||
<view class="info-value">{{ new Date(code.writeOffTime).toLocaleString() }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">使用状态：</view>
|
||||
<view class="info-value">
|
||||
<view class="code-status" :class="getStatusClass(code)">{{ getStatusText(code) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item" v-if="code.writeOffUser">
|
||||
<view class="info-label">使用人：</view>
|
||||
<view class="info-value">{{ code.writeOffUser }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="code-footer">
|
||||
<!-- <view class="code-footer">
|
||||
<view class="code-actions">
|
||||
<view class="action-btn copy-btn" @click="copyCode(code.code)">
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -153,7 +162,11 @@
|
||||
onMounted(() => {
|
||||
getVipTypeList().then(res => {
|
||||
if (res.code == 0) {
|
||||
memberTypeOptions.value = res.data.list
|
||||
// 将 carName 和 memberName 合并到一个新字段中
|
||||
memberTypeOptions.value = res.data.list.map(item => ({
|
||||
...item,
|
||||
displayName: `${item.carName || ''} - ${item.memberName || ''}`
|
||||
}))
|
||||
}
|
||||
})
|
||||
loadCodeList()
|
||||
@@ -281,7 +294,7 @@
|
||||
// 根据memberId获取会员类型名称
|
||||
function getMemberName(memberId) {
|
||||
const memberType = memberTypeOptions.value.find(item => item.memberId == memberId)
|
||||
return memberType?.memberName || '未知'
|
||||
return memberType?.displayName || '未知'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -463,6 +476,7 @@
|
||||
}
|
||||
|
||||
.code-status {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
padding: 4rpx 12rpx;
|
||||
@@ -491,7 +505,7 @@
|
||||
.code-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
@@ -584,4 +598,138 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.gift-member-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.generate-section,
|
||||
.code-list-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.generate-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.generate-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.generate-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.count-input,
|
||||
.period-input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.code-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.code-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.code-status {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.gift-member-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.generate-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.count-input,
|
||||
.period-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.code-item {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.code-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.code-status {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 16rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -160,8 +160,8 @@
|
||||
|
||||
// 分页信息
|
||||
const currentPage = ref(1)
|
||||
const totalOrders = ref(100)
|
||||
const pageSize = ref(10)
|
||||
const totalOrders = ref(0)
|
||||
const pageSize = ref(5)
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
@@ -425,12 +425,16 @@
|
||||
|
||||
.order-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.order-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.order-item:hover {
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2rpx);
|
||||
@@ -579,14 +583,39 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.member-order-container {
|
||||
max-width: 1000px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
@@ -594,28 +623,147 @@
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.order-list-section {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
margin-bottom: 28rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.order-code {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
.distributor-name {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 20rpx;
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-value.price {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.member-order-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
margin-bottom: 32rpx;
|
||||
padding-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.order-code {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.info-value.price {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -255,50 +255,62 @@
|
||||
<style scoped>
|
||||
.container {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
height: 120rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 0 32rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-btn text:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
width: 44px;
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
padding: 0 16px;
|
||||
margin: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-container:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
@@ -306,33 +318,47 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.picker {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.picker:hover {
|
||||
border-color: #c6e2ff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.有效期-input {
|
||||
@@ -342,53 +368,61 @@
|
||||
|
||||
.validity-input {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px 0 0 8px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx 0 0 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.validity-input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.unit-picker {
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
border: 1px solid #e5e5e5;
|
||||
width: 160rpx;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 0 12px;
|
||||
border-radius: 0 12rpx 12rpx 0;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.unit-picker:hover {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #007aff;
|
||||
background-color: #f5faff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #666;
|
||||
transition: transform 0.2s ease;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-top: 8rpx solid #606266;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.unit-picker:hover .dropdown-arrow {
|
||||
border-top-color: #007aff;
|
||||
transform: translateY(1px);
|
||||
border-top-color: #409eff;
|
||||
transform: translateY(2rpx);
|
||||
}
|
||||
|
||||
/* Radio和Checkbox样式 */
|
||||
@@ -396,36 +430,36 @@
|
||||
checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.radio-item,
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.rights-container {
|
||||
min-height: 100px;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 20px 0;
|
||||
color: #909399;
|
||||
padding: 50rpx 0;
|
||||
}
|
||||
|
||||
.no-rights {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 20px 0;
|
||||
color: #909399;
|
||||
padding: 50rpx 0;
|
||||
}
|
||||
|
||||
.rights-list {
|
||||
@@ -434,18 +468,171 @@
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin: 24px 16px;
|
||||
height: 44px;
|
||||
background-color: #007aff;
|
||||
border-radius: 8px;
|
||||
margin: 32rpx 16rpx;
|
||||
height: 80rpx;
|
||||
background-color: #409eff;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #66b1ff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
background-color: #3a8ee6;
|
||||
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.input,
|
||||
.picker {
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.validity-input {
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.unit-picker {
|
||||
height: 80rpx;
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin: 40rpx 32rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 40rpx 48rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.input,
|
||||
.picker {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.validity-input {
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.unit-picker {
|
||||
height: 90rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin: 48rpx 32rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -189,23 +189,30 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
height: 120rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 0 32rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 筛选区域样式 */
|
||||
.filter-container {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 24rpx 32rpx;
|
||||
margin: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-container:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 24rpx;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -214,34 +221,35 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
gap: 2px;
|
||||
border-radius: 12rpx;
|
||||
padding: 8rpx;
|
||||
gap: 4rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 8px 16px;
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.filter-option:hover {
|
||||
color: #007aff;
|
||||
background-color: rgba(0, 122, 255, 0.05);
|
||||
color: #409eff;
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
}
|
||||
|
||||
.filter-option.active {
|
||||
background-color: #007aff;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
|
||||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 筛选选择器样式 */
|
||||
@@ -311,21 +319,26 @@
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-btn text:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
@@ -335,25 +348,32 @@
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 6px 16px;
|
||||
color: #007aff;
|
||||
border-radius: 16px;
|
||||
padding: 12rpx 24rpx;
|
||||
color: #409eff;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.add-btn text {
|
||||
font-size: 14px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 列表视图样式 */
|
||||
.list-container {
|
||||
flex: 1;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 40px 0;
|
||||
color: #909399;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
@@ -361,68 +381,80 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 24px;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
padding: 10px 24px;
|
||||
background-color: #007aff;
|
||||
border-radius: 20px;
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #409eff;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-btn:hover {
|
||||
background-color: #66b1ff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding: 10px;
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
|
||||
.member-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 18px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 24rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -430,23 +462,23 @@
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12rpx;
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
|
||||
.detail-item::before {
|
||||
content: "•";
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
color: #409eff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-row .detail-item {
|
||||
flex: 0 0 auto;
|
||||
min-width: 120px;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
/* 价格样式 */
|
||||
@@ -460,15 +492,15 @@
|
||||
|
||||
.discount-price {
|
||||
color: #ff4d4f;
|
||||
font-size: 16px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
color: #909399;
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
/* 详情标签样式 */
|
||||
@@ -479,60 +511,60 @@
|
||||
/* 使用方式标签 */
|
||||
.use-type-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.use-type-tag {
|
||||
padding: 4px 12px;
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: #e6f7ff;
|
||||
color: #007aff;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: #409eff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 权益标签 */
|
||||
.rights-tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-tag {
|
||||
padding: 4px 12px;
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
border: 1px solid #d9f7be;
|
||||
border: 1rpx solid #d9f7be;
|
||||
}
|
||||
|
||||
.member-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #333;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background-color: #e9ecef;
|
||||
border-color: #007aff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
@@ -540,29 +572,178 @@
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(255, 77, 79, 0.1);
|
||||
background-color: rgba(255, 77, 79, 0.1);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 16px;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 480px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.add-btn text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 20rpx 36rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding: 0 32rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
font-size: 28rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.detail-row .detail-item {
|
||||
min-width: 100%;
|
||||
.discount-price {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
min-width: 100%;
|
||||
.original-price {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.use-type-tag {
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.right-tag {
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-btn text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 20rpx 36rpx;
|
||||
}
|
||||
|
||||
.add-btn text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 24rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
font-size: 32rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.use-type-tag {
|
||||
padding: 16rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.right-tag {
|
||||
padding: 16rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 24rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -192,6 +192,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -210,56 +215,71 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60rpx 32rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.company-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 80rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background-color: #409eff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.company-section:hover .company-logo {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 80rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.version-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.version-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e4e7ed;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.version-item:last-child {
|
||||
@@ -267,12 +287,12 @@
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
@@ -285,26 +305,47 @@
|
||||
border-radius: 6rpx;
|
||||
background-color: #67c23a;
|
||||
margin-right: 8rpx;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能介绍 */
|
||||
.features-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.features-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 12rpx;
|
||||
border-left: 8rpx solid #409eff;
|
||||
line-height: 1.2;
|
||||
@@ -312,21 +353,28 @@
|
||||
|
||||
.features-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
|
||||
gap: 24rpx;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr));
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -336,7 +384,7 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8rpx;
|
||||
@@ -344,38 +392,49 @@
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 联系信息 */
|
||||
.contact-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -384,13 +443,13 @@
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
@@ -401,42 +460,194 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 32rpx;
|
||||
background-color: #f0f2f5;
|
||||
padding: 32rpx;
|
||||
background-color: #f5f7fa;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.copyright-policy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.policy-item {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.policy-item:hover {
|
||||
color: #66b1ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
|
||||
/* 平板设备响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.about-us-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.company-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 64rpx 48rpx;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 80rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
margin: 0 32rpx 16rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
margin: 0 32rpx 16rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(360rpx, 1fr));
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
margin: 0 32rpx 16rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.copyright-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.policy-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.about-us-container {
|
||||
@@ -457,62 +668,61 @@
|
||||
}
|
||||
|
||||
.company-section {
|
||||
padding: 100rpx 50rpx;
|
||||
padding: 80rpx 48rpx;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-bottom: 48rpx;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 90rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 100rpx;
|
||||
font-size: 96rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
padding: 48rpx;
|
||||
padding: 32rpx 48rpx;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
padding: 28rpx 0;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: 48rpx;
|
||||
padding: 32rpx 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 48rpx;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
|
||||
gap: 40rpx;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400rpx, 1fr));
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@@ -521,61 +731,60 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 32rpx 48rpx;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.copyright-section {
|
||||
padding: 80rpx 50rpx;
|
||||
padding: 64rpx;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 40rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.policy-item {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -132,7 +132,7 @@
|
||||
{
|
||||
id: 4,
|
||||
question: '如何给学员赠送会员？',
|
||||
answer: '在工作页面的"会员维护"模块中，点击"赠送会员操作"，输入学员信息和赠送时长，即可生成赠送会员的核验码，学员使用核验码即可激活会员。'
|
||||
answer: '在工作页面的"会员维护"模块中，点击"赠送会员操作"，点击生成赠送会员的核验码，学员使用核验码即可激活会员。'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -292,6 +292,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -307,22 +312,27 @@
|
||||
/* 常见问题 */
|
||||
.faq-section {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
@@ -333,7 +343,7 @@
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 300rpx;
|
||||
width: 240rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 24rpx;
|
||||
background-color: #f9f9f9;
|
||||
@@ -341,6 +351,13 @@
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
@@ -354,6 +371,12 @@
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f9f9f9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
border-color: #c6e2ff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
@@ -362,15 +385,16 @@
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-header:hover {
|
||||
background-color: #f0f0f0;
|
||||
background-color: #f5faff;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
line-height: 1.4;
|
||||
@@ -380,36 +404,42 @@
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
margin-left: 16rpx;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 24rpx 24rpx;
|
||||
font-size: 26rpx;
|
||||
font-size: 22rpx;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 使用指南 */
|
||||
.guide-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.guide-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.guide-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
@@ -419,6 +449,7 @@
|
||||
.guide-item:hover {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
@@ -431,7 +462,7 @@
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8rpx;
|
||||
@@ -439,39 +470,55 @@
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #909399;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.guide-item:hover .guide-arrow {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 联系客服 */
|
||||
.contact-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
@@ -484,13 +531,13 @@
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
@@ -499,9 +546,15 @@
|
||||
padding: 12rpx 24rpx;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-action:hover {
|
||||
background-color: #66b1ff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
@@ -510,7 +563,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
padding: 80rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -520,11 +573,120 @@
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
|
||||
/* 平板设备响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.help-center-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.faq-section,
|
||||
.guide-section,
|
||||
.contact-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 300rpx;
|
||||
height: 70rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 32rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contact-action {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.help-center-container {
|
||||
@@ -547,26 +709,26 @@
|
||||
.faq-section,
|
||||
.guide-section,
|
||||
.contact-section {
|
||||
padding: 48rpx;
|
||||
padding: 40rpx 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 400rpx;
|
||||
height: 84rpx;
|
||||
width: 360rpx;
|
||||
height: 80rpx;
|
||||
padding: 0 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
padding: 40rpx;
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
@@ -574,12 +736,12 @@
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 40rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 36rpx 36rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
padding: 40rpx;
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
@@ -588,19 +750,19 @@
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
font-size: 40rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 40rpx;
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
@@ -609,15 +771,15 @@
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.contact-action {
|
||||
padding: 20rpx 40rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
@@ -627,7 +789,7 @@
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -356,10 +356,9 @@
|
||||
.feature-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -387,7 +386,7 @@
|
||||
|
||||
/* 图标文本样式 */
|
||||
.icon-text {
|
||||
font-size: 36rpx;
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -445,6 +444,103 @@
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
.mine-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 50rpx;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.welcome-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.mine-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 56rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
@@ -482,28 +578,22 @@
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.role-tab {
|
||||
padding: 32rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 40rpx;
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 52rpx;
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
|
||||
@@ -284,7 +284,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@@ -199,6 +199,11 @@ const loadUserInfo = async () => {
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -208,7 +213,7 @@ const loadUserInfo = async () => {
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -217,6 +222,13 @@ const loadUserInfo = async () => {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
@@ -224,8 +236,13 @@ const loadUserInfo = async () => {
|
||||
padding: 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 头像部分 */
|
||||
@@ -366,8 +383,13 @@ const loadUserInfo = async () => {
|
||||
padding: 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 16rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.account-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -410,6 +432,105 @@ const loadUserInfo = async () => {
|
||||
}
|
||||
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.personal-info-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 96rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 200rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.account-section {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.info-label,
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.personal-info-container {
|
||||
@@ -450,10 +571,6 @@ const loadUserInfo = async () => {
|
||||
font-size: 112rpx;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
@@ -215,6 +215,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -224,7 +229,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 60rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -233,24 +238,36 @@
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
.form-section {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.form-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12rpx;
|
||||
@@ -263,60 +280,63 @@
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 28rpx;
|
||||
height: 70rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 160rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
|
||||
box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 提示信息 */
|
||||
.tips-section {
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #ecf5ff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
border-left: 8rpx solid #409eff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -326,6 +346,76 @@
|
||||
}
|
||||
|
||||
|
||||
/* 平板设备响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.school-info-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 24rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.school-info-container {
|
||||
@@ -350,41 +440,41 @@
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 48rpx;
|
||||
padding: 40rpx 48rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 48rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 112rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 40rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
font-size: 32rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
padding: 28rpx;
|
||||
font-size: 32rpx;
|
||||
min-height: 240rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
padding: 48rpx;
|
||||
padding: 40rpx 48rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
|
||||
@@ -221,6 +221,11 @@
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -241,8 +246,13 @@
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-section:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@@ -301,9 +311,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.student-item:hover {
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
|
||||
.student-item:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.student-avatar {
|
||||
@@ -375,7 +396,7 @@
|
||||
padding: 24rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
@@ -395,6 +416,11 @@
|
||||
font-size: 20rpx;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover {
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-btn.disabled {
|
||||
@@ -402,29 +428,143 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 大屏平板响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.page-btn.disabled:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.student-list-container {
|
||||
max-width: 1200px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 48rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 60rpx;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 40rpx;
|
||||
margin: 16rpx 32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 48rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 48rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.student-list-section {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.student-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.student-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.student-list-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 36rpx 48rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
@@ -432,23 +572,19 @@
|
||||
}
|
||||
|
||||
.student-avatar {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 100rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 40rpx;
|
||||
font-size: 60rpx;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 56rpx;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
@@ -456,19 +592,20 @@
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 44rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 40rpx;
|
||||
.page-info {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.page-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
padding: 32rpx 40rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -314,7 +314,7 @@
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100rpx;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@@ -474,18 +474,29 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 统计区域 */
|
||||
.stats-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
border-left: 6rpx solid #409eff;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 12rpx;
|
||||
border-left: 8rpx solid #409eff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -500,10 +511,9 @@
|
||||
.feature-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
padding: 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -515,20 +525,20 @@
|
||||
|
||||
/* 图标容器 */
|
||||
.feature-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 图标文本样式 */
|
||||
.icon-text {
|
||||
font-size: 32rpx;
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -580,52 +590,52 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6rpx;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
.work-container {
|
||||
max-width: 1000px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
gap: 24rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
flex: 0 0 calc(33.333% - 16rpx);
|
||||
max-width: calc(33.333% - 16rpx);
|
||||
padding: 32rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 44rpx;
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
@@ -637,11 +647,90 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 超大屏设备响应式 */
|
||||
@media screen and (min-width: 1440px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.work-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 32rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
flex: 0 0 calc(25% - 18rpx);
|
||||
max-width: calc(25% - 18rpx);
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.work-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -64,7 +64,7 @@ const request = config => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(error => {
|
||||
let { message } = error;
|
||||
let message = error.errMsg || error.message;
|
||||
if (message === 'Network Error') {
|
||||
message = '后端接口连接异常';
|
||||
} else if (message.includes('timeout')) {
|
||||
|
||||
Reference in New Issue
Block a user