@kengic/uni 0.5.1 → 0.5.2-beta.1

package/dist/uni/uni-ui/uni-list-chat/uni-list-chat.vue

@@ -1,593 +1,609 @@
 <template>
-	<!-- #ifdef APP-NVUE -->
-	<cell>
-		<!-- #endif -->
-		<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
-			<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
-			<view class="uni-list-chat__container">
-				<view class="uni-list-chat__header-warp">
-					<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
-						<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatarUrl" mode="aspectFill"></image>
-					</view>
-					<!-- 头像组 -->
-					<view v-else class="uni-list-chat__header">
-						<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
-						 :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
-							<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
-							 mode="aspectFill"></image>
-						</view>
-					</view>
-				</view>
-				<!-- #ifndef APP -->
-				<view class="slot-header">
-				<!-- #endif -->
-					<slot name="header"></slot>
-				<!-- #ifndef APP -->
-				</view>
-				<!-- #endif -->
-				<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
-					<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
-				</view>
-				<view class="uni-list-chat__content">
-					<view class="uni-list-chat__content-main">
-						<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
-						<view style="flex-direction: row;">
-							<text class="draft" v-if="isDraft">[草稿]</text>
-							<text class="uni-list-chat__content-note uni-ellipsis">{{isDraft?note.slice(14):note}}</text>
-						</view>
-					</view>
-					<view class="uni-list-chat__content-extra">
-						<slot>
-							<text class="uni-list-chat__content-extra-text">{{ time }}</text>
-							<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
-								<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
-							</view>
-						</slot>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- #ifdef APP-NVUE -->
-	</cell>
-	<!-- #endif -->
+    <!-- #ifdef APP-NVUE -->
+    <cell>
+        <!-- #endif -->
+        <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
+            <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
+            <view class="uni-list-chat__container">
+                <view class="uni-list-chat__header-warp">
+                    <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
+                        <image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatarUrl" mode="aspectFill"></image>
+                    </view>
+                    <!-- 头像组 -->
+                    <view v-else class="uni-list-chat__header">
+                        <view
+                            v-for="(item, index) in avatarList"
+                            :key="index"
+                            class="uni-list-chat__header-box"
+                            :class="computedAvatar"
+                            :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }"
+                        >
+                            <image
+                                class="uni-list-chat__header-image"
+                                :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }"
+                                :src="item.url"
+                                mode="aspectFill"
+                            ></image>
+                        </view>
+                    </view>
+                </view>
+                <!-- #ifndef APP -->
+                <view class="slot-header">
+                    <!-- #endif -->
+                    <slot name="header"></slot>
+                    <!-- #ifndef APP -->
+                </view>
+                <!-- #endif -->
+                <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
+                    <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+                </view>
+                <view class="uni-list-chat__content">
+                    <view class="uni-list-chat__content-main">
+                        <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
+                        <view style="flex-direction: row">
+                            <text class="draft" v-if="isDraft">[草稿]</text>
+                            <text class="uni-list-chat__content-note uni-ellipsis">{{ isDraft ? note.slice(14) : note }}</text>
+                        </view>
+                    </view>
+                    <view class="uni-list-chat__content-extra">
+                        <slot>
+                            <text class="uni-list-chat__content-extra-text">{{ time }}</text>
+                            <view
+                                v-if="badgeText && badgePositon === 'right'"
+                                class="uni-list-chat__badge"
+                                :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']"
+                            >
+                                <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+                            </view>
+                        </slot>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- #ifdef APP-NVUE -->
+    </cell>
+    <!-- #endif -->
 </template>
 
 <script>
-	// 头像大小
-	const avatarWidth = 45;
-
-	/**
-	 * ListChat 聊天列表
-	 * @description 聊天列表,用于创建聊天类列表
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
-	 * @property {String} 	title 							标题
-	 * @property {String} 	note 							描述
-	 * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈，默认为false
-	 * @property {String} 	badgeText						数字角标内容
-	 * @property {String}  	badgePositon = [left|right]		角标位置，默认为 right
-	 * @property {String} 	link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
-	 *  @value false	 	不开启
-	 *  @value navigateTo 	同 uni.navigateTo()
-	 * 	@value redirectTo 	同 uni.redirectTo()
-	 * 	@value reLaunch   	同 uni.reLaunch()
-	 * 	@value switchTab  	同 uni.switchTab()
-	 * @property {String | PageURIString} 	to  			跳转目标页面
-	 * @property {String} 	time							右侧时间显示
-	 * @property {Boolean} 	avatarCircle = [true|false]		是否显示圆形头像，默认为false
-	 * @property {String} 	avatar							头像地址，avatarCircle 不填时生效
-	 * @property {Array} 	avatarList 						头像组，格式为 [{url:''}]
-	 * @event {Function} 	click 							点击 uniListChat 触发事件
-	 */
-	export default {
-		name: 'UniListChat',
-		emits:['click'],
-		props: {
-			title: {
-				type: String,
-				default: ''
-			},
-			note: {
-				type: String,
-				default: ''
-			},
-			clickable: {
-				type: Boolean,
-				default: false
-			},
-			link: {
-				type: [Boolean, String],
-				default: false
-			},
-			to: {
-				type: String,
-				default: ''
-			},
-			badgeText: {
-				type: [String, Number],
-				default: ''
-			},
-			badgePositon: {
-				type: String,
-				default: 'right'
-			},
-			time: {
-				type: String,
-				default: ''
-			},
-			avatarCircle: {
-				type: Boolean,
-				default: false
-			},
-			avatar: {
-				type: String,
-				default: ''
-			},
-			avatarList: {
-				type: Array,
-				default () {
-					return [];
-				}
-			}
-		},
-		// inject: ['list'],
-		computed: {
-			isDraft(){
-				return this.note.slice(0,14) == '[uni-im-draft]'
-			},
-			isSingle() {
-				if (this.badgeText === 'dot') {
-					return 'uni-badge--dot';
-				} else {
-					const badgeText = this.badgeText.toString();
-					if (badgeText.length > 1) {
-						return 'uni-badge--complex';
-					} else {
-						return 'uni-badge--single';
-					}
-				}
-			},
-			computedAvatar() {
-				if (this.avatarList.length > 4) {
-					this.imageWidth = avatarWidth * 0.31;
-					return 'avatarItem--3';
-				} else if (this.avatarList.length > 1) {
-					this.imageWidth = avatarWidth * 0.47;
-					return 'avatarItem--2';
-				} else {
-					this.imageWidth = avatarWidth;
-					return 'avatarItem--1';
-				}
-			}
-		},
-		watch: {
-			avatar:{
-				handler(avatar) {
-					if(avatar.substr(0,8) == 'cloud://'){
-						uniCloud.getTempFileURL({
-							fileList: [avatar]
-						}).then(res=>{
-							// console.log(res);
-							// 兼容uniCloud私有化部署
-							let fileList = res.fileList || res.result.fileList
-							this.avatarUrl = fileList[0].tempFileURL
-						})
-					}else{
-						this.avatarUrl = avatar
-					}
-				},
-				immediate: true
-			}
-		},
-		data() {
-			return {
-				isFirstChild: false,
-				border: true,
-				// avatarList: 3,
-				imageWidth: 50,
-				avatarUrl:''
-			};
-		},
-		mounted() {
-			this.list = this.getForm()
-			if (this.list) {
-				if (!this.list.firstChildAppend) {
-					this.list.firstChildAppend = true;
-					this.isFirstChild = true;
-				}
-				this.border = this.list.border;
-			}
-		},
-		methods: {
-			/**
-			 * 获取父元素实例
-			 */
-			getForm(name = 'uniList') {
-				let parent = this.$parent;
-				let parentName = parent.$options.name;
-				while (parentName !== name) {
-					parent = parent.$parent;
-					if (!parent) return false
-					parentName = parent.$options.name;
-				}
-				return parent;
-			},
-			onClick() {
-				if (this.to !== '') {
-					this.openPage();
-					return;
-				}
-
-				if (this.clickable || this.link) {
-					this.$emit('click', {
-						data: {}
-					});
-				}
-			},
-			openPage() {
-				if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
-					this.pageApi(this.link);
-				} else {
-					this.pageApi('navigateTo');
-				}
-			},
-			pageApi(api) {
-				let callback = {
-					url: this.to,
-					success: res => {
-						this.$emit('click', {
-							data: res
-						});
-					},
-					fail: err => {
-						this.$emit('click', {
-							data: err
-						});
-					}
-				}
-				switch (api) {
-					case 'navigateTo':
-						uni.navigateTo(callback)
-						break
-					case 'redirectTo':
-						uni.redirectTo(callback)
-						break
-					case 'reLaunch':
-						uni.reLaunch(callback)
-						break
-					case 'switchTab':
-						uni.switchTab(callback)
-						break
-					default:
-					uni.navigateTo(callback)
-				}
-			}
-		}
-	};
+    // 头像大小
+    const avatarWidth = 45;
+
+    /**
+     * ListChat 聊天列表
+     * @description 聊天列表,用于创建聊天类列表
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+     * @property {String} 	title 							标题
+     * @property {String} 	note 							描述
+     * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈，默认为false
+     * @property {String} 	badgeText						数字角标内容
+     * @property {String}  	badgePositon = [left|right]		角标位置，默认为 right
+     * @property {String} 	link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
+     *  @value false	 	不开启
+     *  @value navigateTo 	同 uni.navigateTo()
+     * 	@value redirectTo 	同 uni.redirectTo()
+     * 	@value reLaunch   	同 uni.reLaunch()
+     * 	@value switchTab  	同 uni.switchTab()
+     * @property {String | PageURIString} 	to  			跳转目标页面
+     * @property {String} 	time							右侧时间显示
+     * @property {Boolean} 	avatarCircle = [true|false]		是否显示圆形头像，默认为false
+     * @property {String} 	avatar							头像地址，avatarCircle 不填时生效
+     * @property {Array} 	avatarList 						头像组，格式为 [{url:''}]
+     * @event {Function} 	click 							点击 uniListChat 触发事件
+     */
+    export default {
+        name: 'UniListChat',
+        emits: ['click'],
+        props: {
+            title: {
+                type: String,
+                default: '',
+            },
+            note: {
+                type: String,
+                default: '',
+            },
+            clickable: {
+                type: Boolean,
+                default: false,
+            },
+            link: {
+                type: [Boolean, String],
+                default: false,
+            },
+            to: {
+                type: String,
+                default: '',
+            },
+            badgeText: {
+                type: [String, Number],
+                default: '',
+            },
+            badgePositon: {
+                type: String,
+                default: 'right',
+            },
+            time: {
+                type: String,
+                default: '',
+            },
+            avatarCircle: {
+                type: Boolean,
+                default: false,
+            },
+            avatar: {
+                type: String,
+                default: '',
+            },
+            avatarList: {
+                type: Array,
+                default() {
+                    return [];
+                },
+            },
+        },
+        // inject: ['list'],
+        computed: {
+            isDraft() {
+                return this.note.slice(0, 14) == '[uni-im-draft]';
+            },
+            isSingle() {
+                if (this.badgeText === 'dot') {
+                    return 'uni-badge--dot';
+                } else {
+                    const badgeText = this.badgeText.toString();
+                    if (badgeText.length > 1) {
+                        return 'uni-badge--complex';
+                    } else {
+                        return 'uni-badge--single';
+                    }
+                }
+            },
+            computedAvatar() {
+                if (this.avatarList.length > 4) {
+                    this.imageWidth = avatarWidth * 0.31;
+                    return 'avatarItem--3';
+                } else if (this.avatarList.length > 1) {
+                    this.imageWidth = avatarWidth * 0.47;
+                    return 'avatarItem--2';
+                } else {
+                    this.imageWidth = avatarWidth;
+                    return 'avatarItem--1';
+                }
+            },
+        },
+        watch: {
+            avatar: {
+                handler(avatar) {
+                    if (avatar.substr(0, 8) == 'cloud://') {
+                        uniCloud
+                            .getTempFileURL({
+                                fileList: [avatar],
+                            })
+                            .then((res) => {
+                                // console.log(res);
+                                // 兼容uniCloud私有化部署
+                                let fileList = res.fileList || res.result.fileList;
+                                this.avatarUrl = fileList[0].tempFileURL;
+                            });
+                    } else {
+                        this.avatarUrl = avatar;
+                    }
+                },
+                immediate: true,
+            },
+        },
+        data() {
+            return {
+                isFirstChild: false,
+                border: true,
+                // avatarList: 3,
+                imageWidth: 50,
+                avatarUrl: '',
+            };
+        },
+        mounted() {
+            this.list = this.getForm();
+            if (this.list) {
+                if (!this.list.firstChildAppend) {
+                    this.list.firstChildAppend = true;
+                    this.isFirstChild = true;
+                }
+                this.border = this.list.border;
+            }
+        },
+        methods: {
+            /**
+             * 获取父元素实例
+             */
+            getForm(name = 'uniList') {
+                let parent = this.$parent;
+                let parentName = parent.$options.name;
+                while (parentName !== name) {
+                    parent = parent.$parent;
+                    if (!parent) return false;
+                    parentName = parent.$options.name;
+                }
+                return parent;
+            },
+            onClick() {
+                if (this.to !== '') {
+                    this.openPage();
+                    return;
+                }
+
+                if (this.clickable || this.link) {
+                    this.$emit('click', {
+                        data: {},
+                    });
+                }
+            },
+            openPage() {
+                if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+                    this.pageApi(this.link);
+                } else {
+                    this.pageApi('navigateTo');
+                }
+            },
+            pageApi(api) {
+                let callback = {
+                    url: this.to,
+                    success: (res) => {
+                        this.$emit('click', {
+                            data: res,
+                        });
+                    },
+                    fail: (err) => {
+                        this.$emit('click', {
+                            data: err,
+                        });
+                    },
+                };
+                switch (api) {
+                    case 'navigateTo':
+                        uni.navigateTo(callback);
+                        break;
+                    case 'redirectTo':
+                        uni.redirectTo(callback);
+                        break;
+                    case 'reLaunch':
+                        uni.reLaunch(callback);
+                        break;
+                    case 'switchTab':
+                        uni.switchTab(callback);
+                        break;
+                    default:
+                        uni.navigateTo(callback);
+                }
+            },
+        },
+    };
 </script>
 
-<style lang="scss" >
-	$uni-font-size-lg:16px;
-	$uni-spacing-row-sm: 5px;
-	$uni-spacing-row-base: 10px;
-	$uni-spacing-row-lg: 15px;
-	$background-color: #fff;
-	$divide-line-color: #e5e5e5;
-	$avatar-width: 45px;
-	$avatar-border-radius: 5px;
-	$avatar-border-color: #eee;
-	$avatar-border-width: 1px;
-	$title-size: 16px;
-	$title-color: #3b4144;
-	$title-weight: normal;
-	$note-size: 12px;
-	$note-color: #999;
-	$note-weight: normal;
-	$right-text-size: 12px;
-	$right-text-color: #999;
-	$right-text-weight: normal;
-	$badge-left: 0px;
-	$badge-top: 0px;
-	$dot-width: 10px;
-	$dot-height: 10px;
-	$badge-size: 18px;
-	$badge-font: 12px;
-	$badge-color: #fff;
-	$badge-background-color: #ff5a5f;
-	$badge-space: 6px;
-	$hover: #f5f5f5;
-
-	.uni-list-chat {
-		font-size: $uni-font-size-lg;
-		position: relative;
-		flex-direction: column;
-		justify-content: space-between;
-		background-color: $background-color;
-	}
-
-	// .uni-list-chat--disabled {
-	// 	opacity: 0.3;
-	// }
-
-	.uni-list-chat--hover {
-		background-color: $hover;
-	}
-
-	.uni-list--border {
-		position: relative;
-		margin-left: $uni-spacing-row-lg;
-		/* #ifdef APP-PLUS */
-		border-top-color: $divide-line-color;
-		border-top-style: solid;
-		border-top-width: 0.5px;
-		/* #endif */
-	}
-
-	/* #ifndef APP-NVUE */
-	.uni-list--border:after {
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		height: 1px;
-		content: '';
-		-webkit-transform: scaleY(0.5);
-		transform: scaleY(0.5);
-		background-color: $divide-line-color;
-	}
-
-	.uni-list-item--first:after {
-		height: 0px;
-	}
-
-	/* #endif */
-
-	.uni-list-chat--first {
-		border-top-width: 0px;
-	}
-
-	.uni-ellipsis {
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		lines: 1;
-		/* #endif */
-	}
-
-	.uni-ellipsis-2 {
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-		/* #endif */
-
-		/* #ifdef APP-NVUE */
-		lines: 2;
-		/* #endif */
-	}
-
-	.uni-list-chat__container {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-		padding: $uni-spacing-row-base $uni-spacing-row-lg;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.uni-list-chat__header-warp {
-		position: relative;
-	}
-
-	.uni-list-chat__header {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		align-content: center;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		flex-wrap: wrap-reverse;
-		/* #ifdef APP-NVUE */
-		width: 50px;
-		height: 50px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		width: $avatar-width;
-		height: $avatar-width;
-		/* #endif */
-
-		border-radius: $avatar-border-radius;
-		border-color: $avatar-border-color;
-		border-width: $avatar-border-width;
-		border-style: solid;
-		overflow: hidden;
-	}
-
-	.uni-list-chat__header-box {
-		/* #ifndef APP-PLUS */
-		box-sizing: border-box;
-		display: flex;
-		width: $avatar-width;
-		height: $avatar-width;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		width: 50px;
-		height: 50px;
-		/* #endif */
-		overflow: hidden;
-		border-radius: 2px;
-	}
-
-	.uni-list-chat__header-image {
-		margin: 1px;
-		/* #ifdef APP-NVUE */
-		width: 50px;
-		height: 50px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		width: $avatar-width;
-		height: $avatar-width;
-		/* #endif */
-	}
-
-	/* #ifndef APP-NVUE */
-	.uni-list-chat__header-image {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	.avatarItem--1 {
-		width: 100%;
-		height: 100%;
-	}
-
-	.avatarItem--2 {
-		width: 47%;
-		height: 47%;
-	}
-
-	.avatarItem--3 {
-		width: 32%;
-		height: 32%;
-	}
-
-	/* #endif */
-	.header--circle {
-		border-radius: 50%;
-	}
-
-	.uni-list-chat__content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-		overflow: hidden;
-		padding: 2px 0;
-	}
-
-	.uni-list-chat__content-main {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: space-between;
-		padding-left: $uni-spacing-row-base;
-		flex: 1;
-		overflow: hidden;
-	}
-
-	.uni-list-chat__content-title {
-		font-size: $title-size;
-		color: $title-color;
-		font-weight: $title-weight;
-		overflow: hidden;
-	}
-
-	.draft ,.uni-list-chat__content-note {
-		margin-top: 3px;
-		color: $note-color;
-		font-size: $note-size;
-		font-weight: $title-weight;
-		overflow: hidden;
-	}
-	.draft{
-		color: #eb3a41;
-		/* #ifndef APP-NVUE */
-		flex-shrink: 0;
-		/* #endif */
-		padding-right: 3px;
-	}
-
-	.uni-list-chat__content-extra {
-		/* #ifndef APP-NVUE */
-		flex-shrink: 0;
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: space-between;
-		align-items: flex-end;
-		margin-left: 5px;
-	}
-
-	.uni-list-chat__content-extra-text {
-		color: $right-text-color;
-		font-size: $right-text-size;
-		font-weight: $right-text-weight;
-		overflow: hidden;
-	}
-
-	.uni-list-chat__badge-pos {
-		position: absolute;
-		/* #ifdef APP-NVUE */
-		left: 55px;
-		top: 3px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
-		top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
-		/* #endif */
-	}
-
-	.uni-list-chat__badge {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		border-radius: 100px;
-		background-color: $badge-background-color;
-	}
-
-	.uni-list-chat__badge-text {
-		color: $badge-color;
-		font-size: $badge-font;
-	}
-
-	.uni-badge--single {
-		/* #ifndef APP-NVUE */
-		// left: calc(#{$avatar-width} + 7px + #{$badge-left});
-		/* #endif */
-		width: $badge-size;
-		height: $badge-size;
-	}
-
-	.uni-badge--complex {
-		/* #ifdef APP-NVUE */
-		left: 50px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		width: auto;
-		/* #endif */
-		height: $badge-size;
-		padding: 0 $badge-space;
-	}
-
-	.uni-badge--dot {
-		/* #ifdef APP-NVUE */
-		left: 60px;
-		top: 6px;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
-		/* #endif */
-		width: $dot-width;
-		height: $dot-height;
-		padding: 0;
-	}
-
-	.uni-list-chat--right {
-		/* #ifdef APP-NVUE */
-		left: 0;
-		/* #endif */
-	}
+<style lang="scss">
+    $uni-font-size-lg: 16px;
+    $uni-spacing-row-sm: 5px;
+    $uni-spacing-row-base: 10px;
+    $uni-spacing-row-lg: 15px;
+    $background-color: #fff;
+    $divide-line-color: #e5e5e5;
+    $avatar-width: 45px;
+    $avatar-border-radius: 5px;
+    $avatar-border-color: #eee;
+    $avatar-border-width: 1px;
+    $title-size: 16px;
+    $title-color: #3b4144;
+    $title-weight: normal;
+    $note-size: 12px;
+    $note-color: #999;
+    $note-weight: normal;
+    $right-text-size: 12px;
+    $right-text-color: #999;
+    $right-text-weight: normal;
+    $badge-left: 0px;
+    $badge-top: 0px;
+    $dot-width: 10px;
+    $dot-height: 10px;
+    $badge-size: 18px;
+    $badge-font: 12px;
+    $badge-color: #fff;
+    $badge-background-color: #ff5a5f;
+    $badge-space: 6px;
+    $hover: #f5f5f5;
+
+    .uni-list-chat {
+        font-size: $uni-font-size-lg;
+        position: relative;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: $background-color;
+    }
+
+    // .uni-list-chat--disabled {
+    // 	opacity: 0.3;
+    // }
+
+    .uni-list-chat--hover {
+        background-color: $hover;
+    }
+
+    .uni-list--border {
+        position: relative;
+        margin-left: $uni-spacing-row-lg;
+        /* #ifdef APP-PLUS */
+        border-top-color: $divide-line-color;
+        border-top-style: solid;
+        border-top-width: 0.5px;
+        /* #endif */
+    }
+
+    /* #ifndef APP-NVUE */
+    .uni-list--border:after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        height: 1px;
+        content: '';
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+        background-color: $divide-line-color;
+    }
+
+    .uni-list-item--first:after {
+        height: 0px;
+    }
+
+    /* #endif */
+
+    .uni-list-chat--first {
+        border-top-width: 0px;
+    }
+
+    .uni-ellipsis {
+        /* #ifndef APP-NVUE */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        lines: 1;
+        /* #endif */
+    }
+
+    .uni-ellipsis-2 {
+        /* #ifndef APP-NVUE */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        /* #endif */
+
+        /* #ifdef APP-NVUE */
+        lines: 2;
+        /* #endif */
+    }
+
+    .uni-list-chat__container {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        flex: 1;
+        padding: $uni-spacing-row-base $uni-spacing-row-lg;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .uni-list-chat__header-warp {
+        position: relative;
+    }
+
+    .uni-list-chat__header {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        align-content: center;
+        /* #endif */
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap-reverse;
+        /* #ifdef APP-NVUE */
+        width: 50px;
+        height: 50px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        width: $avatar-width;
+        height: $avatar-width;
+        /* #endif */
+
+        border-radius: $avatar-border-radius;
+        border-color: $avatar-border-color;
+        border-width: $avatar-border-width;
+        border-style: solid;
+        overflow: hidden;
+    }
+
+    .uni-list-chat__header-box {
+        /* #ifndef APP-PLUS */
+        box-sizing: border-box;
+        display: flex;
+        width: $avatar-width;
+        height: $avatar-width;
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        width: 50px;
+        height: 50px;
+        /* #endif */
+        overflow: hidden;
+        border-radius: 2px;
+    }
+
+    .uni-list-chat__header-image {
+        margin: 1px;
+        /* #ifdef APP-NVUE */
+        width: 50px;
+        height: 50px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        width: $avatar-width;
+        height: $avatar-width;
+        /* #endif */
+    }
+
+    /* #ifndef APP-NVUE */
+    .uni-list-chat__header-image {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .avatarItem--1 {
+        width: 100%;
+        height: 100%;
+    }
+
+    .avatarItem--2 {
+        width: 47%;
+        height: 47%;
+    }
+
+    .avatarItem--3 {
+        width: 32%;
+        height: 32%;
+    }
+
+    /* #endif */
+    .header--circle {
+        border-radius: 50%;
+    }
+
+    .uni-list-chat__content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: row;
+        flex: 1;
+        overflow: hidden;
+        padding: 2px 0;
+    }
+
+    .uni-list-chat__content-main {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        justify-content: space-between;
+        padding-left: $uni-spacing-row-base;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .uni-list-chat__content-title {
+        font-size: $title-size;
+        color: $title-color;
+        font-weight: $title-weight;
+        overflow: hidden;
+    }
+
+    .draft,
+    .uni-list-chat__content-note {
+        margin-top: 3px;
+        color: $note-color;
+        font-size: $note-size;
+        font-weight: $title-weight;
+        overflow: hidden;
+    }
+    .draft {
+        color: #eb3a41;
+        /* #ifndef APP-NVUE */
+        flex-shrink: 0;
+        /* #endif */
+        padding-right: 3px;
+    }
+
+    .uni-list-chat__content-extra {
+        /* #ifndef APP-NVUE */
+        flex-shrink: 0;
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-left: 5px;
+    }
+
+    .uni-list-chat__content-extra-text {
+        color: $right-text-color;
+        font-size: $right-text-size;
+        font-weight: $right-text-weight;
+        overflow: hidden;
+    }
+
+    .uni-list-chat__badge-pos {
+        position: absolute;
+        /* #ifdef APP-NVUE */
+        left: 55px;
+        top: 3px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
+        top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
+        /* #endif */
+    }
+
+    .uni-list-chat__badge {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        justify-content: center;
+        align-items: center;
+        border-radius: 100px;
+        background-color: $badge-background-color;
+    }
+
+    .uni-list-chat__badge-text {
+        color: $badge-color;
+        font-size: $badge-font;
+    }
+
+    .uni-badge--single {
+        /* #ifndef APP-NVUE */
+        // left: calc(#{$avatar-width} + 7px + #{$badge-left});
+        /* #endif */
+        width: $badge-size;
+        height: $badge-size;
+    }
+
+    .uni-badge--complex {
+        /* #ifdef APP-NVUE */
+        left: 50px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        width: auto;
+        /* #endif */
+        height: $badge-size;
+        padding: 0 $badge-space;
+    }
+
+    .uni-badge--dot {
+        /* #ifdef APP-NVUE */
+        left: 60px;
+        top: 6px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
+        /* #endif */
+        width: $dot-width;
+        height: $dot-height;
+        padding: 0;
+    }
+
+    .uni-list-chat--right {
+        /* #ifdef APP-NVUE */
+        left: 0;
+        /* #endif */
+    }
 </style>