聊天框样式调整

zhaoxing

2023-05-11 ac65fb87fa3f2e0cd551019cd6cb8de753eebce8

聊天框样式调整

 components/css/index.css

@@ -28,7 +28,7 @@
    /* font-weight: 500; */

    position: relative;

    /* padding: 20rpx; */

    border-radius: 12rpx;

    border-radius: 20rpx;

    max-width: 450rpx;

    /* line-height:1.2; */

    word-wrap: break-word;

@@ -54,13 +54,13 @@
}



.body_rcon {

    /* color: #ffffff; */

    color: #ffffff;

    /* background: #4E82FA; */

    margin-right: 36rpx;



    /*markdown兼容样式*/

    /* margin-right: 48rpx; */

    background: #F6F7FB;

    background: #30324f;

    /* margin-left: 15rpx; */

}




 pages/index/chat.vue

@@ -16,7 +16,7 @@
                    </view>
                    <view class="body_box">
                        <view class="body_jt">
                            <u-icon name="play-left-fill" color="#F6F7FB" size="20"></u-icon>
                            <u-icon name="play-left-fill" color="#30324f" size="20"></u-icon>
                        </view>
                        <!-- <view class="body_lcon pdg" v-html="item.content"></view> -->
                        <view class="body_rcon pdg">
@@ -30,7 +30,7 @@
                <view class="body_r" v-if="item.role == 'user'">
                    <view class="body_box">
                        <view class="body_rjt">
                            <u-icon name="play-right-fill" color="#F6F7FB" size="20"></u-icon>
                            <u-icon name="play-right-fill" color="#30324f" size="20"></u-icon>
                        </view>
                        <!-- <view class="body_rcon pdg" v-html="item.content"> -->
                        <view class="body_rcon pdg">
@@ -473,6 +473,12 @@
</script>

<style lang="scss">
    page {
        background-color: #17181d;
        box-sizing: border-box;
        letter-spacing: 0;
        word-wrap: break-word;
    }
    .safebottom {
        padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
    }

 pages/index/index.vue

@@ -8,7 +8,7 @@
                    </view>
                    <view class="body_box">
                        <view class="body_jt">
                            <u-icon name="play-left-fill" color="#F6F7FB" size="20"></u-icon>
                            <u-icon name="play-left-fill" color="#30324f" size="20"></u-icon>
                        </view>
                        <!-- <view class="body_lcon pdg" v-html="item.content"></view> -->
                        <view class="body_rcon pdg">
@@ -22,7 +22,7 @@
                <view class="body_r" v-if="item.role == 'user'">
                    <view class="body_box">
                        <view class="body_rjt">
                            <u-icon name="play-right-fill" color="#F6F7FB" size="20"></u-icon>
                            <u-icon name="play-right-fill" color="#30324f" size="20"></u-icon>
                        </view>
                        <!-- <view class="body_rcon pdg" v-html="item.content"> -->
                        <view class="body_rcon pdg">
@@ -358,5 +358,13 @@
</script>

<style>
    page {
        background-color: #17181d;
        box-sizing: border-box;
        letter-spacing: 0;
        word-wrap: break-word;
    }
</style>
<style>
    @import '../../components/css/index.css';
</style>