9.20界面
This commit is contained in:
@@ -1,35 +1,106 @@
|
||||
|
||||
.page { display:flex; flex-direction: column; height: 100vh;
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 藏青系主色(高亮) */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
.filters { display:flex; gap: 16rpx; padding: 16rpx; background:#fff;
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.field { display:flex; justify-content: space-between; align-items:center; padding: 16rpx; border:1rpx solid #eee; border-radius: 12rpx; min-width: 300rpx;
|
||||
.field {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
min-width: 300rpx;
|
||||
}
|
||||
.label { color:#666;
|
||||
.label {
|
||||
color: #444;
|
||||
}
|
||||
.value { color:#333;
|
||||
.value {
|
||||
color: #111;
|
||||
}
|
||||
.summary { display:grid; grid-template-columns: repeat(4,1fr); gap: 12rpx; padding: 12rpx 16rpx; background:#fff; border-top:1rpx solid #f1f1f1; border-bottom:1rpx solid #f1f1f1;
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #e5e7eb;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.sum-item { padding: 12rpx; text-align:center;
|
||||
.sum-item {
|
||||
padding: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.k { display:block; color:#888; font-size: 24rpx;
|
||||
.k {
|
||||
display: block;
|
||||
color: #444;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.v { display:block; margin-top:6rpx; font-weight:700; color:#333;
|
||||
.v {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
}
|
||||
.list { flex:1;
|
||||
.list {
|
||||
flex: 1;
|
||||
}
|
||||
.item { padding: 18rpx 16rpx; border-bottom:1rpx solid #f4f4f4; background:#fff;
|
||||
.item {
|
||||
padding: 18rpx 16rpx;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
}
|
||||
.row { display:flex; align-items:center; justify-content: space-between; margin-bottom: 6rpx;
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.title { color:#333;
|
||||
.title {
|
||||
color: #111;
|
||||
}
|
||||
.amount { font-weight:700;
|
||||
.amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
.amount.in { color:#2a9d8f;
|
||||
.amount.in {
|
||||
color: #2a9d8f;
|
||||
}
|
||||
.amount.out { color:#d35b5b;
|
||||
}
|
||||
.meta { color:#999; font-size: 24rpx;
|
||||
.amount.out {
|
||||
color: #d35b5b;
|
||||
}
|
||||
.meta {
|
||||
color: #444;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user