From bac8dbd6247482fdd8c6663b1ffc603c17aad23e Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Thu, 1 Apr 2021 09:17:14 +0800
Subject: [PATCH] init

---
 pages/liaotian/liaotian.scss |  1 -
 pages/liaotian/liaotian.wxml |  2 +-
 pages/liaotian/liaotian.wxss |  1 -
 pages/ltjm/ltjm.json         |  4 +-
 pages/ltjm/ltjm.scss         | 65 ++++++++++++++++++++++++++++++++
 pages/ltjm/ltjm.wxml         | 18 ++++++---
 pages/ltjm/ltjm.wxss         | 73 ++++++++++++++++++++++++++++++++++++
 7 files changed, 155 insertions(+), 9 deletions(-)
 create mode 100644 pages/ltjm/ltjm.wxss

diff --git a/pages/liaotian/liaotian.scss b/pages/liaotian/liaotian.scss
index 46bd797..135b02a 100644
--- a/pages/liaotian/liaotian.scss
+++ b/pages/liaotian/liaotian.scss
@@ -18,7 +18,6 @@ page{
             height: 84rpx;
             border-radius: 10rpx;
             margin-right: 18rpx;
-            background-color: #0f0;
         }
         .info{
             display: flex;
diff --git a/pages/liaotian/liaotian.wxml b/pages/liaotian/liaotian.wxml
index cc2be73..b6dc757 100644
--- a/pages/liaotian/liaotian.wxml
+++ b/pages/liaotian/liaotian.wxml
@@ -1,6 +1,6 @@
 <view class="box">
     <view class="user" wx:for="{{10}}" bind:tap="tiaozhuan">
-        <image class="head"></image>
+        <image class="head" src="https://wx.qlogo.cn/mmhead/iaRlzG8zy7BuYTtsyMPfPRSibv9icvpO2SZO5GBev6PvWiabibfJJfmxueA/0"></image>
         <view class="info">
             <text class="name">name</text>
             <text class="text">texttexttext</text>
diff --git a/pages/liaotian/liaotian.wxss b/pages/liaotian/liaotian.wxss
index 4522b21..15d1367 100644
--- a/pages/liaotian/liaotian.wxss
+++ b/pages/liaotian/liaotian.wxss
@@ -19,7 +19,6 @@
   height: 84rpx;
   border-radius: 10rpx;
   margin-right: 18rpx;
-  background-color: #0f0;
 }
 
 .box .user .info {
diff --git a/pages/ltjm/ltjm.json b/pages/ltjm/ltjm.json
index 0a77525..d82f717 100644
--- a/pages/ltjm/ltjm.json
+++ b/pages/ltjm/ltjm.json
@@ -1,4 +1,6 @@
 {
-    "usingComponents": {},
+    "usingComponents": {
+        "van-button": "../../miniprogram_npm/@vant/weapp/button/index"
+    },
     "navigationBarTitleText": "实时聊天"
 }
\ No newline at end of file
diff --git a/pages/ltjm/ltjm.scss b/pages/ltjm/ltjm.scss
index e69de29..a308499 100644
--- a/pages/ltjm/ltjm.scss
+++ b/pages/ltjm/ltjm.scss
@@ -0,0 +1,65 @@
+.box{
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx;
+    .user{
+        width: 100%;
+        display: flex;
+        color: #fff;
+        margin-bottom: 20rpx;
+        flex-direction: row-reverse;
+        align-items: flex-end;
+        .head{
+            width: 90rpx;
+            height: 90rpx;
+            border-radius: 10rpx;
+        }
+        .text{
+            max-width: 470rpx;
+            background-color: #3399CC;
+            padding: 17rpx 35rpx;
+            border-radius: 30rpx 30rpx 0 30rpx;
+            margin: 0 17rpx;
+            font-size: 30rpx;
+            line-height: 35rpx;
+        }
+    }
+    .laixin{
+        flex-direction: row;
+        .text{
+            border-radius: 30rpx 30rpx 30rpx 0;
+        }
+    }
+  
+}
+.bot{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: #fff;
+    height: 98rpx;
+    width: 750rpx;
+    position: fixed;
+    bottom: 0;
+    .input{
+        width: 500rpx;
+        height: 46rpx;
+        background-color: #ECECEC;
+        border-radius: 23rpx;
+        font-size: 30rpx;
+        padding: 0 23rpx;
+    }
+    .fasong{
+        width: 125rpx;
+        height: 54rpx;
+        line-height: 54rpx;
+        font-size: 30rpx;
+        text-align: center;
+        background-color: #3399CC;
+        color: #fff;
+        border-radius: 5rpx;
+    }
+}
+page{
+    background-color: #ECECEC;
+}
\ No newline at end of file
diff --git a/pages/ltjm/ltjm.wxml b/pages/ltjm/ltjm.wxml
index 356657d..b895501 100644
--- a/pages/ltjm/ltjm.wxml
+++ b/pages/ltjm/ltjm.wxml
@@ -1,8 +1,16 @@
-<view class="box">
-    <view class="user">
+<view>
+    <view class="box">
+        <view class="user">
+            <image class="head" src="https://wx.qlogo.cn/mmhead/iaRlzG8zy7BuYTtsyMPfPRSibv9icvpO2SZO5GBev6PvWiabibfJJfmxueA/0"></image>
+            <view class="text">这是自己发的消息这是自己发的消息这是自己发的消息这是自己发的消息这是自己发的消息</view>
+        </view>
+        <view class="user laixin">
+            <image class="head" src="https://wx.qlogo.cn/mmhead/iaRlzG8zy7BuYTtsyMPfPRSibv9icvpO2SZO5GBev6PvWiabibfJJfmxueA/0"></image>
+            <view class="text">这是好友给发的消息这是好友给发的消息这是好友给发的消息这是好友给发的消息</view>
+        </view>
     </view>
-    <view class="laixin">
-
+    <view class="bot">
+        <input class="input" type="text" />
+        <view class="fasong">发送</view>
     </view>
-
 </view>
\ No newline at end of file
diff --git a/pages/ltjm/ltjm.wxss b/pages/ltjm/ltjm.wxss
new file mode 100644
index 0000000..4a4abc9
--- /dev/null
+++ b/pages/ltjm/ltjm.wxss
@@ -0,0 +1,73 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 30rpx;
+}
+
+.box .user {
+  width: 100%;
+  display: flex;
+  color: #fff;
+  margin-bottom: 20rpx;
+  flex-direction: row-reverse;
+  align-items: flex-end;
+}
+
+.box .user .head {
+  width: 90rpx;
+  height: 90rpx;
+  border-radius: 10rpx;
+}
+
+.box .user .text {
+  max-width: 470rpx;
+  background-color: #3399CC;
+  padding: 17rpx 35rpx;
+  border-radius: 30rpx 30rpx 0 30rpx;
+  margin: 0 17rpx;
+  font-size: 30rpx;
+  line-height: 35rpx;
+}
+
+.box .laixin {
+  flex-direction: row;
+}
+
+.box .laixin .text {
+  border-radius: 30rpx 30rpx 30rpx 0;
+}
+
+.bot {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #fff;
+  height: 98rpx;
+  width: 750rpx;
+  position: fixed;
+  bottom: 0;
+}
+
+.bot .input {
+  width: 500rpx;
+  height: 46rpx;
+  background-color: #ECECEC;
+  border-radius: 23rpx;
+  font-size: 30rpx;
+  padding: 0 23rpx;
+}
+
+.bot .fasong {
+  width: 125rpx;
+  height: 54rpx;
+  line-height: 54rpx;
+  font-size: 30rpx;
+  text-align: center;
+  background-color: #3399CC;
+  color: #fff;
+  border-radius: 5rpx;
+}
+
+page {
+  background-color: #ECECEC;
+}