sc
This commit is contained in:
qsh
@@ -39,7 +39,7 @@ export function getInfo() {
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/logout',
|
||||
url: '/system/auth/logout',
|
||||
method: 'post'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -487,4 +487,100 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.log-manage-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section,
|
||||
.pagination {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
min-width: 250rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.log-time,
|
||||
.log-detail,
|
||||
.log-meta,
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.log-status {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
}
|
||||
|
||||
.log-operation {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.log-manage-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
min-width: 300rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.log-operation {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.log-time,
|
||||
.log-detail,
|
||||
.log-meta {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -387,4 +387,89 @@
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.account-manage-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.account-list {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.account-manage-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -407,4 +407,93 @@
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.personal-account-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-section,
|
||||
.security-section,
|
||||
.account-info-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: row;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-input,
|
||||
.info-text,
|
||||
.info-value,
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.security-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.security-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.security-status {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.personal-account-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.info-section,
|
||||
.security-section,
|
||||
.account-info-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-input,
|
||||
.info-text,
|
||||
.info-value,
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.security-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -434,21 +434,141 @@
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.quota-manage-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.total-quota-section,
|
||||
.distributor-quota-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.quota-stats {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.quota-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.quota-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.quota-input {
|
||||
width: 160rpx;
|
||||
height: 72rpx;
|
||||
width: 180rpx;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.quota-unit {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.quota-hint {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.distributor-id {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.quota-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.quota-manage-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.quota-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.quota-input {
|
||||
width: 200rpx;
|
||||
height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.quota-unit {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.quota-hint {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.distributor-id {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -669,4 +669,206 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distribution-data-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.trend-section,
|
||||
.detail-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 56rpx;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.detail-status {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distribution-data-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.detail-status {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -311,4 +311,87 @@
|
||||
font-size: 18rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-add-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
height: 200rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.textarea-count {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-add-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -372,4 +372,97 @@
|
||||
background-color: #fef0f0;
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-edit-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-section,
|
||||
.action-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
height: 200rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.textarea-count {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 26rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-edit-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -492,4 +492,122 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-list-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.distributor-list-section {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 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;
|
||||
}
|
||||
|
||||
.distributor-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.distributor-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.distributor-meta {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-list-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.distributor-name {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -470,4 +470,127 @@
|
||||
color: #303133;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distributor-rule-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rule-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.rule-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.rule-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.switch {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.picker {
|
||||
min-width: 250rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
min-width: 200rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.input-suffix {
|
||||
font-size: 26rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.level-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.condition-label,
|
||||
.benefit-label {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.condition-value,
|
||||
.benefit-value {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distributor-rule-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker {
|
||||
min-width: 300rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
min-width: 250rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.input-suffix {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.level-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.condition-label,
|
||||
.benefit-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.condition-value,
|
||||
.benefit-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -582,28 +582,170 @@
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.ai-recharge-exception-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-section,
|
||||
.exception-section {
|
||||
.stats-section {
|
||||
margin: 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.exception-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.exception-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.exception-status {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.ai-recharge-exception-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -617,28 +617,170 @@
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.member-order-exception-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-section,
|
||||
.exception-section {
|
||||
.stats-section {
|
||||
margin: 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.exception-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.exception-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.exception-status {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.member-order-exception-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -579,28 +579,170 @@
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.profit-exception-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-section,
|
||||
.exception-section {
|
||||
.stats-section {
|
||||
margin: 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.exception-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.exception-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.exception-status {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.profit-exception-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.exception-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.exception-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -517,24 +517,113 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.index-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 56rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.welcome-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.index-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 60rpx;
|
||||
padding: 64rpx;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 52rpx;
|
||||
}
|
||||
|
||||
.welcome-desc {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
@@ -551,6 +640,10 @@
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
@@ -620,4 +620,123 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.member-order-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.order-list-section {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 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;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.order-code {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.member-order-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.order-code {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -445,39 +445,293 @@
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@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: 24rpx;
|
||||
padding: 80rpx 40rpx;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 90rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 90rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(400rpx, 1fr));
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.copyright-section {
|
||||
padding: 60rpx 40rpx;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.policy-item {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.about-us-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.company-section {
|
||||
padding: 100rpx 50rpx;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 100rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.version-item {
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.version-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.copyright-section {
|
||||
padding: 80rpx 50rpx;
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.copyright-desc {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.policy-item {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -55,11 +55,10 @@
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
.about-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
@@ -67,5 +66,122 @@
|
||||
padding: 30rpx 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 60rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.header-section image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
margin: 16rpx 0;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
padding: 28rpx 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.about-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
padding: 60rpx 32rpx 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-section image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin: 0;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
font-size: 32rpx;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 80rpx;
|
||||
font-size: 26rpx;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.about-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
padding: 80rpx 48rpx 60rpx;
|
||||
}
|
||||
|
||||
.header-section image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
font-size: 36rpx;
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 100rpx;
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -333,13 +333,34 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cropper-config {
|
||||
padding: 20rpx 40rpx;
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
min-height: 750rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.cropper-config {
|
||||
padding: 20rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cropper-config button {
|
||||
font-size: 28rpx;
|
||||
height: 88rpx;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.uni-corpper {
|
||||
@@ -615,4 +636,81 @@
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cropper-config {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.cropper-config button {
|
||||
font-size: 32rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 40rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.uni-cropper-point {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.point-rb {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cropper-config {
|
||||
padding: 60rpx;
|
||||
}
|
||||
|
||||
.cropper-config button {
|
||||
font-size: 36rpx;
|
||||
height: 112rpx;
|
||||
margin-top: 50rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.uni-cropper-point {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.point-rb {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -622,19 +622,84 @@
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.custom-fields-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;
|
||||
}
|
||||
|
||||
.fields-section {
|
||||
margin: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
margin-right: 12rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.fields-list {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.field-header {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.field-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.field-form {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@@ -649,12 +714,188 @@
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
font-size: 28rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.rules-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 24rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.custom-fields-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;
|
||||
}
|
||||
|
||||
.fields-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
margin-right: 16rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.fields-list {
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.field-header {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.field-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.field-form {
|
||||
gap: 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: 24rpx;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
transform: scale(1.6);
|
||||
}
|
||||
|
||||
.rules-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.rule-label {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -622,25 +622,314 @@
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.data-logs-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;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
margin: 24rpx;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 28rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.logs-section,
|
||||
.backup-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.log-item,
|
||||
.backup-item {
|
||||
padding: 32rpx;
|
||||
.section-header {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 400rpx;
|
||||
height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.logs-list {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.log-actor {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.log-ip {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.backup-list {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.backup-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.backup-header {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.backup-time {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.backup-status {
|
||||
padding: 8rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.backup-details {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 40rpx;
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 12rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 24rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.data-logs-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 32rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.logs-section,
|
||||
.backup-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 450rpx;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.logs-list {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.log-actor {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.log-ip {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 32rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.backup-list {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.backup-item {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.backup-time {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.backup-status {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 140rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 48rpx;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 16rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -524,37 +524,253 @@
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.help-center-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faq-section,
|
||||
.guide-section,
|
||||
.contact-section {
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.faq-section {
|
||||
margin: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.guide-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
margin: 0 24rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 350rpx;
|
||||
height: 72rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
.faq-icon {
|
||||
font-size: 28rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 32rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.guide-list {
|
||||
gap: 24rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 26rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
gap: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.contact-action {
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.help-center-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.faq-section,
|
||||
.guide-section,
|
||||
.contact-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 400rpx;
|
||||
height: 84rpx;
|
||||
padding: 0 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
padding: 0 40rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.guide-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
font-size: 64rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.guide-desc {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.guide-arrow {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 64rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.contact-action {
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 140rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -63,19 +63,53 @@
|
||||
}
|
||||
|
||||
.help-container {
|
||||
min-height: 100vh;
|
||||
margin-bottom: 100rpx;
|
||||
padding: 30rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 16px;
|
||||
margin-right: 10rpx;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.childList {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.question {
|
||||
color: #606266;
|
||||
font-size: 28rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.question:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.line {
|
||||
@@ -84,25 +118,81 @@
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.help-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 100rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 40rpx;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
font-size: 36rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 16px;
|
||||
margin-right: 10rpx;
|
||||
font-size: 20px;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
.childList {
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.question {
|
||||
color: #606266;
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 32rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.help-container {
|
||||
max-width: 1000px;
|
||||
padding: 60rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
font-size: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.childList {
|
||||
margin-top: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 36rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -491,16 +491,28 @@
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.mine-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 30rpx;
|
||||
padding: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 50rpx;
|
||||
padding: 56rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 72rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
@@ -511,6 +523,10 @@
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
@@ -519,13 +535,30 @@
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.role-switch {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.role-tab {
|
||||
padding: 28rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 30rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
@@ -547,23 +580,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.mine-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
padding: 60rpx;
|
||||
padding: 64rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.role-tab {
|
||||
padding: 32rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 36rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
|
||||
@@ -90,35 +90,203 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 28rpx;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input:focus) {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__list) {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__item) {
|
||||
margin-right: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 10px;
|
||||
:deep(.uni-data-checkbox__input) {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 28rpx;
|
||||
height: 88rpx;
|
||||
margin-top: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #66b1ff;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #3a8ee6;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 24rpx;
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 32rpx;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 32rpx;
|
||||
height: 96rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox) {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__list) {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__item) {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__input) {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 32rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 50rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 32rpx;
|
||||
padding: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 36rpx;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 36rpx;
|
||||
height: 112rpx;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox) {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__list) {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__item) {
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-data-checkbox__input) {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 36rpx;
|
||||
height: 112rpx;
|
||||
margin-top: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,8 +30,117 @@
|
||||
getUser()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
:deep(.uni-list) {
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item) {
|
||||
padding: 28rpx;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__content) {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__extra) {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__icon) {
|
||||
font-size: 32rpx;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
:deep(.uni-list) {
|
||||
margin: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.uni-list-item) {
|
||||
padding: 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__content) {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__extra) {
|
||||
font-size: 30rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__icon) {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
:deep(.uni-list) {
|
||||
margin: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.uni-list-item) {
|
||||
padding: 40rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__content) {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__extra) {
|
||||
font-size: 34rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-list-item__icon) {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -466,14 +466,33 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.password-change-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: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
@@ -487,21 +506,148 @@
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 100rpx;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 120rpx 0 32rpx;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.strength-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.strength-tips {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.strength-indicator {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.strength-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.strength-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.operation-tips {
|
||||
margin: 0 24rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.password-change-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;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 112rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 140rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.strength-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.strength-tips {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.strength-indicator {
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.strength-label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.strength-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.operation-tips {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -466,17 +466,53 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@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: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 96rpx;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
@@ -487,7 +523,7 @@
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 100rpx;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
@@ -499,13 +535,136 @@
|
||||
}
|
||||
|
||||
.form-text {
|
||||
height: 100rpx;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.account-section {
|
||||
margin: 0 24rpx 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
margin-bottom: 56rpx;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
font-size: 112rpx;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 112rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 240rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
height: 112rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
font-size: 36rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.account-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
gap: 28rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.info-label,
|
||||
.info-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -69,11 +69,143 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.pwd-retrieve-container {
|
||||
padding-top: 36rpx;
|
||||
padding: 15px;
|
||||
min-height: 100vh;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms) {
|
||||
background-color: #fff;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 28rpx;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input:focus) {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 28rpx;
|
||||
height: 88rpx;
|
||||
margin-top: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #66b1ff;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #3a8ee6;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.pwd-retrieve-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms) {
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 32rpx;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 32rpx;
|
||||
height: 96rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 32rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 50rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.pwd-retrieve-container {
|
||||
max-width: 1000px;
|
||||
padding: 60rpx;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.uni-forms) {
|
||||
padding: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.uni-forms-item) {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-forms-label) {
|
||||
font-size: 36rpx;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__input) {
|
||||
font-size: 36rpx;
|
||||
height: 112rpx;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
font-size: 36rpx;
|
||||
height: 112rpx;
|
||||
margin-top: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -318,14 +318,33 @@
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@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: 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
@@ -339,7 +358,7 @@
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 100rpx;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
@@ -351,6 +370,7 @@
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
margin: 0 24rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
@@ -362,22 +382,75 @@
|
||||
.tips-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.school-info-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;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.form-section {
|
||||
padding: 50rpx;
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 120rpx;
|
||||
height: 112rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 240rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.tips-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -59,20 +59,160 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #f8f8f8;
|
||||
page {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 菜单列表样式 */
|
||||
.menu-list {
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
padding: 28rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-cell:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list-cell:active {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 24rpx;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 退出登录按钮样式 */
|
||||
.cu-list {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx;
|
||||
background-color: #fff;
|
||||
margin: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #303133;
|
||||
font-size: 28rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.item-box:active {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.setting-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 菜单列表样式 */
|
||||
.menu-list {
|
||||
margin: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
font-size: 32rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 退出登录按钮样式 */
|
||||
.item-box {
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.setting-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* 菜单列表样式 */
|
||||
.menu-list {
|
||||
margin: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.menu-item-box {
|
||||
font-size: 36rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 退出登录按钮样式 */
|
||||
.item-box {
|
||||
margin: 32rpx;
|
||||
padding: 40rpx;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -563,27 +563,246 @@
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.distribution-stats-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.page-header {
|
||||
height: 140rpx;
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.ranking-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
height: 400rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.bar-label,
|
||||
.bar-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.ranking-number {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.ranking-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.ranking-arrow {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.distribution-stats-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.ranking-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 64rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
height: 450rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 72rpx;
|
||||
}
|
||||
|
||||
.bar-label,
|
||||
.bar-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.ranking-number {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.ranking-name {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-arrow {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -721,23 +721,276 @@
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.member-stats-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;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.distribution-section,
|
||||
.recent-orders-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chart-lines {
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.distribution-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.distribution-icon {
|
||||
font-size: 56rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-title {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
}
|
||||
|
||||
.info-label,
|
||||
.info-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.member-stats-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.distribution-section,
|
||||
.recent-orders-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 64rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.chart-lines {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.distribution-icon {
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.distribution-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.info-label,
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -736,27 +736,296 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.student-stats-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;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.distribution-section,
|
||||
.student-section {
|
||||
margin: 0 24rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
height: 400rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.bar-label,
|
||||
.bar-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.distribution-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.distribution-icon {
|
||||
font-size: 56rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-title {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.meta-label,
|
||||
.meta-value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.student-arrow {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 32rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.student-stats-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 160rpx;
|
||||
padding: 0 64rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.filter-control {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.metrics-section,
|
||||
.chart-section,
|
||||
.distribution-section,
|
||||
.student-section {
|
||||
padding: 48rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 64rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
height: 450rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 72rpx;
|
||||
}
|
||||
|
||||
.bar-label,
|
||||
.bar-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.distribution-card {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.distribution-icon {
|
||||
font-size: 64rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.distribution-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.stat-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
.meta-label,
|
||||
.meta-value {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.student-arrow {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -472,4 +472,148 @@
|
||||
.ranking-cell.count {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.learning-analysis-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section,
|
||||
.core-data-section,
|
||||
.trend-section,
|
||||
.distribution-section,
|
||||
.ranking-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
padding: 64rpx;
|
||||
}
|
||||
|
||||
.chart-rect {
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.chart-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.trend-hint,
|
||||
.distribution-hint {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.ranking-cell {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.learning-analysis-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.chart-rect {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.chart-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.trend-hint,
|
||||
.distribution-hint {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-cell {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -624,19 +624,161 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.student-detail-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.learning-metrics {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
.info-section,
|
||||
.learning-section,
|
||||
.record-section,
|
||||
.action-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.learning-metrics {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 56rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.progress-subject,
|
||||
.progress-percentage {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 22rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.record-type {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.record-detail {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
padding: 40rpx 24rpx;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.student-detail-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.progress-subject,
|
||||
.progress-percentage {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.record-type {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.record-detail {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -508,4 +508,126 @@
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.student-list-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.student-list-section {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 0 32rpx 32rpx;
|
||||
padding: 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;
|
||||
}
|
||||
|
||||
.student-item {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.student-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.student-list-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text,
|
||||
.search-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.student-name {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.student-meta {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -512,4 +512,173 @@
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.learning-remind-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.remind-setting-section,
|
||||
.student-select-section,
|
||||
.preview-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
margin: 0 32rpx 24rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 48rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.setting-card,
|
||||
.select-card,
|
||||
.preview-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.picker {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
height: 200rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.content-count {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.students-textarea {
|
||||
height: 160rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: 32rpx;
|
||||
font-size: 26rpx;
|
||||
min-height: 160rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 28rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.learning-remind-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.students-textarea {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 32rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -488,17 +488,17 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 12rpx;
|
||||
border-left: 8rpx solid #409eff;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
border-left: 6rpx solid #409eff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -514,9 +514,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -528,19 +528,20 @@
|
||||
|
||||
/* 图标容器 */
|
||||
.feature-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 图标文本样式 */
|
||||
.icon-text {
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -548,25 +549,20 @@
|
||||
/* 异常徽章样式 */
|
||||
.exception-badge {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
min-width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
min-width: 28rpx;
|
||||
height: 28rpx;
|
||||
padding: 0 8rpx;
|
||||
background-color: #f56c6c;
|
||||
color: #fff;
|
||||
border-radius: 18rpx;
|
||||
font-size: 20rpx;
|
||||
border-radius: 14rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(245, 108, 108, 0.5);
|
||||
}
|
||||
|
||||
/* 图标容器相对定位，用于异常徽章 */
|
||||
.feature-icon {
|
||||
position: relative;
|
||||
box-shadow: 0 2rpx 6rpx rgba(245, 108, 108, 0.5);
|
||||
}
|
||||
|
||||
/* 各模块颜色 */
|
||||
@@ -597,39 +593,98 @@
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: 6rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 22rpx;
|
||||
font-size: 20rpx;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
/* 平板响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.work-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 30rpx;
|
||||
padding: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 12rpx;
|
||||
border-left: 8rpx solid #409eff;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
flex: 0 0 calc(50% - 10rpx);
|
||||
max-width: calc(50% - 10rpx);
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备响应式 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.work-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 30rpx;
|
||||
flex: 0 0 calc(33.333% - 16rpx);
|
||||
max-width: calc(33.333% - 16rpx);
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
@@ -646,31 +701,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板和大屏响应式 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.work-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* 超大屏设备响应式 */
|
||||
@media screen and (min-width: 1440px) {
|
||||
.feature-card {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 52rpx;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 26rpx;
|
||||
flex: 0 0 calc(25% - 18rpx);
|
||||
max-width: calc(25% - 18rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user