Browse Source

style(market): 优化编辑线索日志页面样式

- 修改时间轴背景色为 #292929
- 更新时间轴节点边框颜色为 #29d3b4
-调整表格列宽比例
- 优化表格样式,增加白色字体颜色
- 调整表格布局,使用 flex 布局
master
liutong 10 months ago
parent
commit
f85a6dc05f
  1. 42
      pages/market/clue/edit_clues_log.vue

42
pages/market/clue/edit_clues_log.vue

@ -9,7 +9,7 @@
type="button"
radius="8"
height="80"
color="#465cff"
color="#29d3b4"
bold="true"
@click="segmented">
</fui-segmented-control>
@ -25,7 +25,7 @@
>
<!--时间轴-->
<view class="table_list">
<fui-timeaxis background="#f8f8f8" :padding="['36rpx','16rpx']">
<fui-timeaxis background="#292929" :padding="['36rpx','16rpx']">
<fui-timeaxis-node
:lineColor="k<3 ? v.activeColor:'#ccc'"
:lined="k!==tableList.length-1"
@ -35,7 +35,7 @@
<!--inco-->
<view
class="fui-node"
:style="{borderColor:(k != tableList.length-1 ? '#465CFF' :'' ) }"
:style="{borderColor:(k != tableList.length-1 ? '#29d3b4' :'' ) }"
>
</view>
<template v-slot:right>
@ -57,17 +57,17 @@
<thead>
<tr>
<th style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">字段名称</th>
<th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">原数据</th>
<th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">新数据</th>
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">原数据</th>
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">新数据</th>
</tr>
</thead>
<!-- 自定义每一行数据 -->
<tbody>
<tr v-for="(row, index) in v.update_arr" :key="index">
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
<td style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
</tr>
</tbody>
</table>
@ -90,7 +90,7 @@
>
<!--时间轴-->
<view class="table_list">
<fui-timeaxis background="#f8f8f8" :padding="['36rpx','16rpx']">
<fui-timeaxis background="#292929" :padding="['36rpx','16rpx']">
<fui-timeaxis-node
:lineColor="k<3?v.activeColor:'#ccc'"
:lined="k!==tableList.length-1"
@ -100,7 +100,7 @@
<!--inco-->
<view
class="fui-node"
:style="{borderColor:(k != tableList.length-1 ? '#465CFF' :'' ) }"
:style="{borderColor:(k != tableList.length-1 ? '#29d3b4' :'' ) }"
>
</view>
<template v-slot:right>
@ -122,17 +122,17 @@
<thead>
<tr>
<th style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">字段名称</th>
<th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">原数据</th>
<th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">新数据</th>
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">原数据</th>
<th style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">新数据</th>
</tr>
</thead>
<!-- 自定义每一行数据 -->
<tbody>
<tr v-for="(row, index) in v.update_arr" :key="index">
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
<td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
<td style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
<td style="width: 34%; border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
</tr>
</tbody>
</table>
@ -281,13 +281,18 @@ export default {
.assemble{
width: 100%;
height: 100%;
//background-color: #292929;
background-color: #292929;
overflow: auto;
.tab_section{
padding: 0 20rpx;
padding-top: 30rpx;
}
.table_list{
color: #fff;
::v-deep .fui-timeaxis__line{
background-color: #fff;
}
.itme_box {
margin-top: 30rpx;
display: flex;
@ -301,6 +306,11 @@ export default {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
tr{
display: flex;
th{}
td{}
}
}
}

Loading…
Cancel
Save