|
@@ -1,36 +1,21 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="app-content">
|
|
<view class="app-content">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
- <view class="record-list">
|
|
|
|
|
- <view v-for="(item, index) in list.data" :key="index" class="record-item">
|
|
|
|
|
- <view class="record-header">
|
|
|
|
|
- <view class="date-info">
|
|
|
|
|
- <text class="date-text">{{ item.addTime.substr(5,11) }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="staff-info">
|
|
|
|
|
- <text class="staff-name">{{ item.staffName!=''?item.staffName:'系统' }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="record-content">
|
|
|
|
|
- <view class="event-section">
|
|
|
|
|
- <text class="event-label">事项</text>
|
|
|
|
|
- <text class="event-value">{{ item.event }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="change-section">
|
|
|
|
|
- <view class="change-item">
|
|
|
|
|
- <text class="change-label">变化前</text>
|
|
|
|
|
- <text class="change-value before">{{ item.beforeName!=''?item.beforeName:'普通用户' }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="change-arrow">
|
|
|
|
|
- <text class="arrow-icon">→</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="change-item">
|
|
|
|
|
- <text class="change-label">变化后</text>
|
|
|
|
|
- <text class="change-value after">{{ item.afterName }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="level-table">
|
|
|
|
|
+ <view class="table-header table-row">
|
|
|
|
|
+ <view class="table-cell cell-date">日期</view>
|
|
|
|
|
+ <view class="table-cell cell-event">事项</view>
|
|
|
|
|
+ <view class="table-cell cell-staff">操作</view>
|
|
|
|
|
+ <view class="table-cell cell-before">变化前</view>
|
|
|
|
|
+ <view class="table-cell cell-after">变化后</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-for="(item, index) in list.data" :key="index" class="table-body">
|
|
|
|
|
+ <view class="table-row table-row-data">
|
|
|
|
|
+ <view class="table-cell cell-date">{{ item.addTime.substr(5,11) }}</view>
|
|
|
|
|
+ <view class="table-cell cell-event">{{ item.event }}</view>
|
|
|
|
|
+ <view class="table-cell cell-staff">{{ item.staffName!=''?item.staffName:'系统' }}</view>
|
|
|
|
|
+ <view class="table-cell cell-before">{{ item.beforeName!=''?item.beforeName:'普通用户' }}</view>
|
|
|
|
|
+ <view class="table-cell cell-after">{{ item.afterName }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -84,118 +69,76 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.app-content {
|
|
.app-content {
|
|
|
- padding: 20upx;
|
|
|
|
|
|
|
+ padding: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.record-list {
|
|
|
|
|
- .record-item {
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- border-radius: 16upx;
|
|
|
|
|
- margin-bottom: 20upx;
|
|
|
|
|
- box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.08);
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+.level-table {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+
|
|
|
|
|
+ .table-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-height: 72upx;
|
|
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
|
|
- .record-header {
|
|
|
|
|
- background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
|
|
|
|
- padding: 24upx 32upx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
-
|
|
|
|
|
- .date-info {
|
|
|
|
|
- .date-text {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 28upx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .staff-info {
|
|
|
|
|
- .staff-name {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 26upx;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
- padding: 8upx 16upx;
|
|
|
|
|
- border-radius: 20upx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.table-header {
|
|
|
|
|
+ background: #f5f7fa;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 30upx;
|
|
|
|
|
+ color: #333;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .record-content {
|
|
|
|
|
- padding: 32upx;
|
|
|
|
|
-
|
|
|
|
|
- .event-section {
|
|
|
|
|
- margin-bottom: 32upx;
|
|
|
|
|
- padding: 24upx;
|
|
|
|
|
- background: #f6ffed;
|
|
|
|
|
- border-radius: 12upx;
|
|
|
|
|
- border-left: 6upx solid #52c41a;
|
|
|
|
|
-
|
|
|
|
|
- .event-label {
|
|
|
|
|
- font-size: 24upx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin-bottom: 8upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .event-value {
|
|
|
|
|
- font-size: 32upx;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.table-row-data {
|
|
|
|
|
+ font-size: 26upx;
|
|
|
|
|
+ color: #222;
|
|
|
|
|
+ transition: background 0.2s;
|
|
|
|
|
|
|
|
- .change-section {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: stretch;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
-
|
|
|
|
|
- .change-item {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
-
|
|
|
|
|
- .change-label {
|
|
|
|
|
- font-size: 24upx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- display: block;
|
|
|
|
|
- margin-bottom: 12upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .change-value {
|
|
|
|
|
- font-size: 28upx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- padding: 16upx 20upx;
|
|
|
|
|
- border-radius: 12upx;
|
|
|
|
|
- display: block;
|
|
|
|
|
-
|
|
|
|
|
- &.before {
|
|
|
|
|
- background: #fff2f0;
|
|
|
|
|
- color: #ff4d4f;
|
|
|
|
|
- border: 2upx solid #ffccc7;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.after {
|
|
|
|
|
- background: #f6ffed;
|
|
|
|
|
- color: #237804;
|
|
|
|
|
- border: 2upx solid #95de64;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .change-arrow {
|
|
|
|
|
- width: 60upx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
-
|
|
|
|
|
- .arrow-icon {
|
|
|
|
|
- font-size: 32upx;
|
|
|
|
|
- color: #52c41a;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #f0f9ff;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .table-cell {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 18upx 8upx 18upx 8upx;
|
|
|
|
|
+ color: #222;
|
|
|
|
|
+
|
|
|
|
|
+ &.cell-date {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 100upx;
|
|
|
|
|
+ flex: 1.2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.cell-event {
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ min-width: 200upx;
|
|
|
|
|
+ flex: 2.2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.cell-staff {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 80upx;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.cell-before {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 120upx;
|
|
|
|
|
+ flex: 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.cell-after {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ min-width: 120upx;
|
|
|
|
|
+ flex: 1.5;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|