9.20界面
This commit is contained in:
@@ -89,7 +89,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
};
|
||||
}),
|
||||
o: common_vendor.o(($event) => $data.showType = false),
|
||||
p: common_vendor.sr("popup", "4430e2e8-0"),
|
||||
p: common_vendor.sr("popup", "42e126a9-0"),
|
||||
q: common_vendor.o(($event) => $data.showType = $event),
|
||||
r: common_vendor.p({
|
||||
type: "bottom",
|
||||
|
||||
@@ -1 +1 @@
|
||||
<view class="page"><view class="form"><view class="field"><text class="label">账户名称</text><input class="input" placeholder="必填" value="{{a}}" bindinput="{{b}}"/></view><view class="field" bindtap="{{d}}"><text class="label">账户类型</text><text class="value">{{c}}</text></view><view wx:if="{{e}}" class="field"><text class="label">银行名称</text><input class="input" placeholder="选填" value="{{f}}" bindinput="{{g}}"/></view><view wx:if="{{h}}" class="field"><text class="label">银行账号</text><input class="input" placeholder="选填" value="{{i}}" bindinput="{{j}}"/></view><view class="field"><text class="label">当前余额</text><input class="input" type="number" placeholder="0.00" value="{{k}}" bindinput="{{l}}"/></view></view><view class="actions"><button class="primary" bindtap="{{m}}">保存</button></view><uni-popup wx:if="{{r}}" class="r" u-s="{{['d']}}" u-r="popup" u-i="4430e2e8-0" bind:__l="__l" bindupdateModelValue="{{q}}" u-p="{{r}}"><view class="sheet"><view wx:for="{{n}}" wx:for-item="t" wx:key="b" class="sheet-item" bindtap="{{t.c}}">{{t.a}}</view><view class="sheet-cancel" bindtap="{{o}}">取消</view></view></uni-popup></view>
|
||||
<view class="page"><view class="form"><view class="field"><text class="label">账户名称</text><input class="input" placeholder="必填" value="{{a}}" bindinput="{{b}}"/></view><view class="field" bindtap="{{d}}"><text class="label">账户类型</text><text class="value">{{c}}</text></view><view wx:if="{{e}}" class="field"><text class="label">银行名称</text><input class="input" placeholder="选填" value="{{f}}" bindinput="{{g}}"/></view><view wx:if="{{h}}" class="field"><text class="label">银行账号</text><input class="input" placeholder="选填" value="{{i}}" bindinput="{{j}}"/></view><view class="field"><text class="label">当前余额</text><input class="input" type="number" placeholder="0.00" value="{{k}}" bindinput="{{l}}"/></view></view><view class="actions"><button class="primary" bindtap="{{m}}">保存</button></view><uni-popup wx:if="{{r}}" class="r" u-s="{{['d']}}" u-r="popup" u-i="42e126a9-0" bind:__l="__l" bindupdateModelValue="{{q}}" u-p="{{r}}"><view class="sheet"><view wx:for="{{n}}" wx:for-item="t" wx:key="b" class="sheet-item" bindtap="{{t.c}}">{{t.a}}</view><view class="sheet-cancel" bindtap="{{o}}">取消</view></view></uni-popup></view>
|
||||
@@ -1,23 +1,76 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
.form { background:#fff;
|
||||
.form {
|
||||
background: #ffffff;
|
||||
}
|
||||
.field { display:flex; align-items:center; justify-content: space-between; padding: 18rpx 20rpx; border-bottom:1rpx solid #f3f3f3;
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 20rpx;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.label { color:#666;
|
||||
.label {
|
||||
color: #444;
|
||||
}
|
||||
.input { flex:1; text-align: right; color:#333;
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: #111;
|
||||
}
|
||||
.value { color:#333;
|
||||
.value {
|
||||
color: #111;
|
||||
}
|
||||
.actions { margin-top: 20rpx; padding: 0 20rpx;
|
||||
.actions {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.primary { width: 100%; background: #3c9cff; color:#fff; border-radius: 8rpx; padding: 22rpx 0;
|
||||
.primary {
|
||||
width: 100%;
|
||||
background: #4C8DFF;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
padding: 22rpx 0;
|
||||
}
|
||||
.sheet { background:#fff;
|
||||
.sheet {
|
||||
background: #ffffff;
|
||||
}
|
||||
.sheet-item { padding: 26rpx; text-align:center; border-bottom:1rpx solid #f2f2f2;
|
||||
}
|
||||
.sheet-cancel { padding: 26rpx; text-align:center; color:#666;
|
||||
.sheet-item {
|
||||
padding: 26rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.sheet-cancel {
|
||||
padding: 26rpx;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,13 +1,62 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
.list { flex:1;
|
||||
.list {
|
||||
flex: 1;
|
||||
}
|
||||
.item { padding: 20rpx 24rpx; background:#fff; border-bottom: 1rpx solid #f1f1f1;
|
||||
.item {
|
||||
padding: 20rpx 24rpx;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.name { color:#333; margin-bottom: 6rpx;
|
||||
.name {
|
||||
color: #111;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.meta { color:#888; font-size: 24rpx;
|
||||
}
|
||||
.fab { position: fixed; right: 32rpx; bottom: 120rpx; width: 100rpx; height: 100rpx; border-radius: 50%; background:#3c9cff; color:#fff; display:flex; align-items:center; justify-content:center; font-size: 52rpx; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.18);
|
||||
.meta {
|
||||
color: #444;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 32rpx;
|
||||
bottom: 120rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #4C8DFF;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 52rpx;
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
Reference in New Issue
Block a user