会话存档
This commit is contained in:
		| @@ -67,12 +67,12 @@ | ||||
|           <div class="item item-right" v-else> | ||||
|             <p class="time">2023-04-26 16:11:43</p> | ||||
|             <div class="item-content-flex"> | ||||
|               <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img"> | ||||
|               <i class="el-icon-warning"></i> | ||||
|               <div class="content"> | ||||
|                 <span></span> | ||||
|                 <p>{{item.content}}</p> | ||||
|               </div> | ||||
|               <i class="el-icon-warning"></i> | ||||
|               <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img"> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -118,11 +118,11 @@ | ||||
|         }, | ||||
|         current: 1, | ||||
|         list: [ | ||||
|           {type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部'}, | ||||
|           {type: 1, content: '123'}, | ||||
|           {type: 0, content: '456'}, | ||||
|           {type: 0, content: '123'}, | ||||
|           {type: 1, content: '123'}, | ||||
|           {type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右'}, | ||||
|           {type: 1, content: '123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左'}, | ||||
|           {type: 0, content: '456右右右右'}, | ||||
|           {type: 0, content: '123右右右右'}, | ||||
|           {type: 1, content: '123左左左左'}, | ||||
|         ] | ||||
|       } | ||||
|     }, | ||||
| @@ -328,65 +328,83 @@ | ||||
|           color: #999; | ||||
|           font-size: 14px; | ||||
|           line-height: 44px; | ||||
|           text-align: center; | ||||
|         } | ||||
|         .item-content-flex { | ||||
|           display: flex; | ||||
|           .user-img { | ||||
|             width: 44px; | ||||
|             height: 44px; | ||||
|             border-radius: 50%; | ||||
|             margin-right: 8px; | ||||
|           } | ||||
|           .content { | ||||
|             max-width: calc(100% - 144px); | ||||
|             position: relative; | ||||
|             background-color: #f3f6f9; | ||||
|              | ||||
|             span { | ||||
|               width: 0px; | ||||
|               height: 0px; | ||||
|               border: 10px solid transparent; | ||||
|               position: absolute; | ||||
|               top: 20px; | ||||
|               top: 50%; | ||||
|               margin-top: -10px; | ||||
|             } | ||||
|             p { | ||||
|               display: inline-block; | ||||
|               padding: 14px 54px 14px 32px; | ||||
|               background-color: #fff; | ||||
|               padding: 8px; | ||||
|               line-height: 28px; | ||||
|               font-family: PingFangSC-Regular; | ||||
|               font-size: 32px; | ||||
|               font-size: 16px; | ||||
|               color: #333; | ||||
|               word-break: break-all; | ||||
|             } | ||||
|           } | ||||
|           .fail-icon { | ||||
|             width: 32px; | ||||
|             height: 32px; | ||||
|             margin: auto 0 auto 24px; | ||||
|           .el-icon-warning { | ||||
|             font-size: 32px; | ||||
|             color: #f46; | ||||
|             margin-top: 8px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .item-left { | ||||
|         .content { | ||||
|           span { | ||||
|             left: -18px; | ||||
|             border-right-color: #fff; | ||||
|         .item-content-flex {  | ||||
|           .user-img { | ||||
|             margin: 0 20px 0 0; | ||||
|           } | ||||
|           .content { | ||||
|             span { | ||||
|               left: -18px; | ||||
|               border-right-color: #f3f6f9; | ||||
|             } | ||||
|           } | ||||
|           .el-icon-warning { | ||||
|             margin-left: 16px; | ||||
|           } | ||||
|         } | ||||
|          | ||||
|       } | ||||
|       .item-right { | ||||
|         width: 100%; | ||||
|         justify-content: right; | ||||
|         .user-img { | ||||
|           margin: 0 0 0 20px; | ||||
|         } | ||||
|         .content { | ||||
|           span { | ||||
|             border-left-color: #C7E7FE; | ||||
|             right: -18px; | ||||
|         .item-content-flex { | ||||
|           justify-content: end; | ||||
|           .user-img { | ||||
|             margin: 0 0 0 20px; | ||||
|           } | ||||
|           p { | ||||
|             background-color: #C7E7FE; | ||||
|             padding: 14px 32px 14px 54px; | ||||
|           .content { | ||||
|             background-color: #90e287; | ||||
|             span { | ||||
|               border-left-color:#90e287; | ||||
|               right: -18px; | ||||
|             } | ||||
|           } | ||||
|           .el-icon-warning { | ||||
|             margin-right: 16px; | ||||
|           } | ||||
|         } | ||||
|          | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user