Building the basic static page of Vue chat room

Time:2022-5-23

design sketch

Building the basic static page of Vue chat room

Building the basic static page of Vue chat room

HTML:

<template>

    <view>

        <view>

            <scroll-view scroll-y=”true”>

                <div>

<!– Message notification — >

                    <div>

                        <div>2021-12-28 16:50:00</div>

< div > XXX processed this work order < / div >

                    </div>

<!– Left — >

                    <!– <div></div> –>

<!– Right — >

                    <!– <div></div> –>

              </div>

              <div>

                <div>

                    <image src=”../../static/logo.png”>

                    <div>

                        <div>2021-12-28 16:50:00</div>

< div > this is a message, a long message. This is a message, a long message. This is a message, a long message. This is a message, a long message</ div>

                    </div>

                </div>

              </div>

              <div>

                <div>

                    <image src=”../../static/logo.png”>

                    <div>

                        <div>2021-12-28 16:50:00</div>

< div > this is a message, a long message. You can use if to judge the image file and display < / div >

                </div>

            </div>

        </div>

    </scroll-view>

 </view>

<view>

        <input type=”text”>

< button > send < / button >

</view>

</view>

</template>

style:

<style lang=”scss” scoped>

.chat{

.chat_room{

border-top: 1px solid #CCCCCC;

padding: 0 32rpx 10rpx;

.chat_scroll{

height:calc(100vh – 352rpx – var(–window-bottom)); // Look at yourself to reduce

}

.lang_for{

.chat_message{

width:100%;

text-align: center;

font-size: 24rpx;

font-weight: 500;

color: #aaa;

padding: 32rpx;

box-sizing: border-box;

}

.chat_con{

display: flex;

image{

width:96rpx;

height:96rpx;

border: 1px solid #707070;

box-sizing: border-box;

border-radius: 50%;

}

.message{

margin-left:16rpx;

.m_time{

font-size: 24rpx;

color: #333333;

line-height:44rpx;

}

.m_con{

max-width: 540rpx;

min-height: 80rpx;

line-height:40rpx;

background: #FFFFFF;

border-radius: 0px 8rpx 8rpx 8rpx;

font-size:28rpx;

color: #111111;

padding:20rpx;

box-sizing: border-box;

}

}

}

.chat_left{

}

.chat_right{

flex-direction: row-reverse;

.message{

margin-right:16rpx;

.m_time{

text-align: right;

}

.m_con{

background: #9EEA6A ;

border-radius: 8rpx 0px 8rpx 8rpx;

}

}

}

}

.lang_for+.lang_for{

margin-top:10px;

}

}

.chat_send{

display: flex;

padding:48rpx 32rpx;

background:#fff;

input{

width: 520rpx;

height: 60rpx;

background: #F5F5F5;

border-radius: 8rpx;

padding:0 16rpx;

}

button{

width: 104rpx;

height: 60rpx;

line-height: 60rpx;

margin-left:32rpx;

color:#FFFFFF;

font-weight: bold;

background: #D60011;

border-radius: 8rpx;

border:none;

font-size:24rpx;

padding:0;

}

}

}

</style>

Recommended Today

13、 Mitmproxy mock actual combat

catalogue Introduction to mitmproxy Mitmproxy tool Mitmdump actual combat Introduction to mitmproxy As the name suggests, mitmproxy is the proxy for mitm, which is man in the middle attack ­ in ­ the ­ middle attack)。 The agent used for man in the middle attack will first forward the request to the normal agent to […]