|
|
@@ -0,0 +1,121 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>微分机器人</title>
|
|
|
+ <!--引入 element-ui 的样式，-->
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <!-- 必须先引入vue， 后使用element-ui -->
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <!-- 引入element 的组件库-->
|
|
|
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+ <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
|
|
+ <!-- <script>
|
|
|
+ var vConsole = new window.VConsole();
|
|
|
+ </script> -->
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FAFAFA;
|
|
|
+ }
|
|
|
+ .page5 {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+ .session_list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #E2E2E2;
|
|
|
+ padding: 15px 0;
|
|
|
+ }
|
|
|
+ .session_item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .session_head {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .head_img {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .on_line {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: #23E580;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .client_name {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ .session_btn {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2885FF;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <!-- 会话列表 -->
|
|
|
+ <div class="page5">
|
|
|
+ <div class="session_list" v-for="(item, index) in sessionList" :key="index">
|
|
|
+ <div class="session_item">
|
|
|
+ <div class="session_head">
|
|
|
+ <image class="head_img" src="./img/prize-bg.png"></image>
|
|
|
+ <div class="on_line"></div>
|
|
|
+ </div>
|
|
|
+ <div class="client_name">客户昵称</div>
|
|
|
+ </div>
|
|
|
+ <div class="session_btn" @click="handlePrize(item)">进入聊天</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sessionList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam (paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
