From d8e6f395fea1419c73f6b6f0a2ddd75eac3eed84 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期五, 01 十二月 2023 08:15:17 +0800
Subject: [PATCH] #
---
components/z-data-list/z-data-list.vue | 128 ++++++++++++++++++++++++++++++++++--------
1 files changed, 104 insertions(+), 24 deletions(-)
diff --git a/components/z-data-list/z-data-list.vue b/components/z-data-list/z-data-list.vue
index 813a4c4..1aeb745 100644
--- a/components/z-data-list/z-data-list.vue
+++ b/components/z-data-list/z-data-list.vue
@@ -2,17 +2,27 @@
<view >
<view class="main">
<view class="main-left" >
- <view class="main-list" v-for="it in dataList" >
- <view>key</view>
- <view style="margin-left: 8px;">value</view>
+ <view class="main-list" v-for="it in lable" style="width: 100%;">
+ <view class="left-key">{{it.label}}</view>
+ <view>:</view>
+ <view class="left-val">
+ <text :class="it.valText">{{fields[it.attribute]}}</text>
+ </view>
</view>
</view>
- <view class="main-right">
- <view class="list-options">
- <view class="list-number">1</view>
- <view class="abdb"> > </view>
+ <uni-badge
+ class="main-right uni-badge-left-margin"
+ :text="index"
+ absolute="rightTop"
+ size="small"
+ type="primary"
+ >
+ <view style="height: 100%;display: flex;align-items: center;" @click="goDetail">
+ <view class="list-options">
+ <uni-icons class="opt-icon" type="right" size="20" color="#b9b9b9"></uni-icons>
+ </view>
</view>
- </view>
+ </uni-badge>
</view>
</view>
</template>
@@ -23,12 +33,49 @@
data() {
return {
dataList: [
- {},
- {},
- {},
- {},
- ]
+ {key: '鍟嗗搧缂栫爜',value: 'fbr3242'},
+ {key: '鎵瑰彿',value: '20231006'},
+ {key: '鏁伴噺',value: '200'},
+ {key: '鍟嗗搧缂栫爜',value: 'fbr3242'},
+ {key: '鎵瑰彿',value: '20231006'},
+ {key: '鏁伴噺',value: '200'}
+ ],
+ detailList: [],
+ dataKey: {},
+ valText: 'val-text'
};
+ },
+ methods: {
+ goDetail() {
+ this.$emit('goDetail');
+ }
+ },
+ created() {
+ // this.dataList = this.list.detl
+ },
+ props: {
+ lable: {
+ type: Array,
+ default() {
+ return {}
+ }
+ },
+ fields: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ keyName: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ index: {
+ type: Number,
+ default: 2
+ }
}
}
</script>
@@ -38,26 +85,37 @@
<style scoped>
.main {
position: relative;
- min-height: 70rpx;
- background-color: #fdadfc;
+ min-height: 35px;
+ background-color: #f5f5f5;
display: flex;
align-items: stretch;
- margin: 8px 8px 8px 8px;
+ margin: 8px 12px 8px 12px;
+ border-radius: 8px;
}
.main-left {
- flex: 4;
+ flex: 7;
display: flex;
flex-direction: column;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ color: #606164;
+ font-size: 14px;
}
.main-right {
- background-color: #cccccc;
- flex: 1;
+ width: 30px;
display: flex;
align-items: center;
- /* flex-direction: column; */
+ justify-content: center;
+ border-left: 1px solid #ffffff;
+ }
+ .main-right:active {
+ background-color: #e3e5e7;
+ color: #FFF;
}
.main-list {
display: flex;
+ align-items: center;
+ margin: 2px 0;
}
.list-options {
display: flex;
@@ -65,10 +123,32 @@
}
.list-number {
position: absolute;
- right: 30px;
- top: 20px;
+ right: 10px;
+ top: 5px;
}
- .abdb {
- flex: 0;
+ .opt-icon {
+ display: flex;
+ }
+ .left-key {
+ width: 65px;
+ padding-right: 4px;
+ text-align: end;
+ font-weight: 700;
+ }
+ .left-val {
+ flex: 1;
+ padding-left: 4px;
+ color: #606266;
+ }
+ .val-text {
+ background-color: #00aeec;
+ padding: 2px 4px;
+ border-radius: 4px;
+ color: #FFF;
+ }
+ .val-num {
+ font-weight: 900;
+ color: #d19a66;
+ font-size: 16px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1