nvue-vue

pages/im/components/showText.vue

@@ -0,0 +1,55 @@
+<template>
+    <view class="msg--text">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'showText',
+        props: {
+            msg: {
+                type: Object,
+                default: {}
+            },
+            name: {
+                type: String,
+                default: ''
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .msg--text {
+        .name {
+            font-size: 26rpx;
+            padding-bottom: 10rpx;
+            color: $text-gray-m;
+        }
+
+        .im--text {
+            max-width: 508rpx;
+            padding: 20rpx;
+            line-height: 46rpx;
+            font-size: 32rpx;
+            color: $text-color;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+            }
+        }
+    }
+</style>