更新

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.4",
     "element-ui": "^2.13.1",
     "loadsh": "0.0.4",
+    "moment": "^2.24.0",
     "naf-core": "^0.1.2",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.3",

src/components/parts/chat.vue

@@ -0,0 +1,208 @@
+<template>
+  <div id="chat">
+    <p class="luyanTop">
+      <span>公共聊天</span>
+      <!-- <span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
+      <span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>发贺信</span> -->
+    </p>
+    <div class="chatList">
+      <ul>
+        <li v-for="(i, index) in list" :key="index">
+          <p>
+            <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;">{{ i.sender_name }}：</span>
+            <span> {{ i.content }}</span>
+          </p>
+        </li>
+      </ul>
+      <div class="input">
+        <input v-model="text" />
+        <button type="button" @click="send">发送</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: chat } = createNamespacedHelpers('chat');
+var moment = require('moment');
+export default {
+  name: 'chat',
+  props: {},
+  components: {},
+  data: () => {
+    return {
+      list: [],
+      text: '',
+    };
+  },
+  created() {
+    //回车事件
+    // this.enterListen();
+    this.search();
+  },
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...chat(['query', 'create']),
+    async search() {
+      const res = await this.query({ skip: 0, limit: 10 });
+      if (this.$checkRes(res)) this.$set(this, `list`, _.reverse(res.data));
+    },
+    async send() {
+      if (!this.user.uid) {
+        this.$message.error('游客不能发言,请先注册');
+        return;
+      }
+      if (this.text != '') {
+        let object = { sender_name: this.user.name, content: this.text };
+        if (this.user.id) object.sender_id = this.user.id;
+        //TODO接口
+        let res = await this.create(object);
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+      } else this.$message.error('请输入信息后发送');
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/public_chat`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      // console.log('receive a message: ', message.body);
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.list.push(body);
+        this.text = '';
+      }
+      // const { content, contenttype, sendid, sendname, icon, groupid, sendtime, type } = message.headers;
+      // let object = { content, contenttype, sendid, sendname, icon, groupid, sendtime, type };
+      // this.list.push(object);
+    },
+    enterListen() {
+      var lett = this;
+      document.onkeydown = function(e) {
+        var key = window.event.keyCode;
+        if (key == 13) {
+          lett.send();
+        }
+      };
+    },
+  },
+  filters: {
+    getTime(date) {
+      if (!date) return '很久以前';
+      let today = moment().format('YYYY-MM-DD');
+      let dd = moment(date).format('YYYY-MM-DD');
+      let time;
+      if (today == dd) time = moment(date).format('HH:mm:ss');
+      else time = moment(date).format('YYYY-MM-DD HH:mm:ss');
+      return time;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.fangtan .chat {
+  float: left;
+  width: 30%;
+  height: 545px;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #c20808;
+  padding: 0 10px 0px 10px;
+  margin: 4px 0px 0 3px;
+}
+
+.chat .luyanTop {
+  height: 30px;
+  line-height: 30px;
+}
+
+.chat .luyanTop span:first-child {
+  display: inline-block;
+  padding: 0 10px;
+  height: 30px;
+  color: #fff;
+  background-color: #ff8500;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.chat .luyanTop .icon {
+  float: right;
+  background: #f2f4f5;
+  border-radius: 20px;
+  color: #666;
+  padding: 0 5px;
+  margin: 0 0 0 5px;
+}
+
+.chat .luyanTop .icon {
+  cursor: pointer;
+}
+
+.chat .chatList {
+  height: 505px;
+  background: #fff;
+}
+
+.chat .chatList ul {
+  float: left;
+  width: 100%;
+  height: 454px;
+  padding: 5px 0 0 0;
+  overflow: auto;
+  margin: 10px 0 0 0;
+}
+
+.chat .chatList ul li {
+  padding: 0 10px;
+  margin: 0 0 5px 0;
+}
+
+.chat .chatList ul li span:first-child {
+  color: #666;
+  padding: 0 5px 0 0;
+}
+
+.chat .chatList .input {
+  height: 40px;
+  line-height: 40px;
+  float: left;
+  width: 100%;
+}
+
+.chat .chatList .input input {
+  border: 1px solid #ccc;
+  float: left;
+  height: 34px;
+  width: 68%;
+  margin-right: 3%;
+}
+
+.chat .chatList .input button {
+  float: left;
+  background: #ff8500;
+  color: #fff;
+  height: 34px;
+  width: 21%;
+  max-width: 109px;
+  border-radius: 5px;
+}
+.jiabinlist ul {
+  margin: 0;
+  padding: 0;
+}
+</style>

src/store/chat.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/live/chat`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = undefined, ...info } = {}) {
+    const res = await this.$axios.$get(api.interface, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.interface}/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-
+import chat from './chat';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {},
+  modules: {
+    chat,
+  },
 });

src/store/user/mutations.js

@@ -0,0 +1,33 @@
+const jwt = require('jsonwebtoken');
+export const setUser = (state, payload) => {
+  let res = true;
+  //登陆时
+  if (payload) {
+    state.token = payload;
+  } else {
+    //已经登陆,切换路由时取出用户信息放在总store中
+    let token = localStorage.getItem('token');
+    if (token && token !== 'guest') {
+      state.user = jwt.decode(token);
+    } else if (token && token == 'guest') {
+      let user = localStorage.getItem('user');
+      state.user = JSON.parse(user);
+    } else {
+      let timestamp = new Date().getTime();
+      let user = {
+        // id: `guest${timestamp}`,
+        name: `游客${timestamp}`,
+      };
+      state.user = user;
+      localStorage.setItem('token', 'guest');
+      localStorage.setItem('user', JSON.stringify(user));
+      console.warn('游客身份');
+    }
+  }
+  return res;
+};
+
+export const deleteUser = (state, payload) => {
+  state.user = {};
+  localStorage.removeItem('user');
+};

src/store/user/state.js

@@ -0,0 +1,2 @@
+export const user = {};
+export const menuList = [];

src/views/direct.vue

@@ -95,16 +95,139 @@
                       </p>
                     </el-col>
                     <el-col :span="10" class="liright">
-                      <p>{{ acc.context }}</p>
+                      <p>简介:{{ acc.context }}</p>
                     </el-col>
                   </li>
                 </ul>
               </el-tab-pane>
-              <el-tab-pane label="找产品">配置管理</el-tab-pane>
-              <el-tab-pane label="找服务">角色管理</el-tab-pane>
-              <el-tab-pane label="找专家">定时任务补偿</el-tab-pane>
+              <el-tab-pane label="找产品">
+                <ul>
+                  <li v-for="(acc, index) in jishulist" :key="index">
+                    <el-col :span="14" class="lileft">
+                      <p>
+                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
+                      </p>
+
+                      <p class="newp">
+                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
+                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                      </p>
+                      <p>
+                        <span class="pspan">类型:{{ acc.type }}</span
+                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
+                        ><span class="pspan">交易方式:{{ acc.status }}</span
+                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
+                      </p>
+                    </el-col>
+                    <el-col :span="10" class="liright">
+                      <p>简介:{{ acc.context }}</p>
+                    </el-col>
+                  </li>
+                </ul></el-tab-pane
+              >
+              <el-tab-pane label="找服务">
+                <ul>
+                  <li v-for="(acc, index) in jishulist" :key="index">
+                    <el-col :span="14" class="lileft">
+                      <p>
+                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
+                      </p>
+
+                      <p class="newp">
+                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
+                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                      </p>
+                      <p>
+                        <span class="pspan">类型:{{ acc.type }}</span
+                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
+                        ><span class="pspan">交易方式:{{ acc.status }}</span
+                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
+                      </p>
+                    </el-col>
+                    <el-col :span="10" class="liright">
+                      <p>简介:{{ acc.context }}</p>
+                    </el-col>
+                  </li>
+                </ul></el-tab-pane
+              >
+              <el-tab-pane label="找专家">
+                <ul>
+                  <li v-for="(acc, index) in jishulist" :key="index">
+                    <el-col :span="14" class="lileft">
+                      <p>
+                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
+                      </p>
+
+                      <p class="newp">
+                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
+                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                      </p>
+                      <p>
+                        <span class="pspan">类型:{{ acc.type }}</span
+                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
+                        ><span class="pspan">交易方式:{{ acc.status }}</span
+                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
+                      </p>
+                    </el-col>
+                    <el-col :span="10" class="liright">
+                      <p>简介:{{ acc.context }}</p>
+                    </el-col>
+                  </li>
+                </ul></el-tab-pane
+              >
             </el-tabs>
           </el-col>
+
+          <el-col :span="24" class="newimage">
+            <el-image :src="two" style="width:100%;height:100px;position:relative;"> </el-image>
+            <span>使用手册</span>
+          </el-col>
+
+          <el-col :span="24">
+            <div class="fangtan">
+              <div class="jiabin">
+                <p class="jiabintop">
+                  <span>嘉宾访谈</span>
+                  <el-link :underline="false">MORE</el-link>
+                </p>
+                <div class="jiabinlist">
+                  <ul>
+                    <li v-for="(ref, index) in jiabinlist" :key="index">
+                      <img :src="ref.url" />
+                      <p>
+                        <span class="textOver">{{ ref.title }}</span>
+                        <span>{{ ref.date }}</span>
+                        <span class="text">{{ ref.context }} </span>
+                      </p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="jiabin luyan">
+                <p class="jiabintop luyanTop">
+                  <span>项目路演</span>
+                  <el-link :underline="false">MORE</el-link>
+                </p>
+                <div class="luyanList">
+                  <ul>
+                    <li v-for="(item, index) in luyanList" :key="index">
+                      <p>
+                        <span>{{ item.title }}</span>
+                        <span>浏览:{{ item.num }}</span>
+                      </p>
+                      <p>
+                        <span>所在地区：{{ item.city }} | 所属行业：{{ item.hy }}</span>
+                        <span>项目融资方式：{{ item.xurz }}</span>
+                      </p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div class="chat">
+                <chat></chat>
+              </div>
+            </div>
+          </el-col>
         </el-col>
       </div>
     </el-col>
@@ -113,12 +236,15 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+import chat from '@/components/parts/chat.vue';
 
 import _ from 'loadsh';
 export default {
   name: 'hall',
   props: {},
-  components: {},
+  components: {
+    chat,
+  },
   data: () => ({
     directlist: [
       {
@@ -141,11 +267,109 @@ export default {
         chanpin: '产品1',
         status: '方式10',
         jueduan: '阶段1',
-        context:
-          '测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1测试产品1产品1产品1',
+        context: '1测试产品1测试产1试产品1',
+      },
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
+      },
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
+      },
+
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
+      },
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
+      },
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
+      },
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context: '1测试产品1测试产1试产品1',
       },
     ],
+
+    jiabinlist: [
+      {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '测试title',
+        date: '2017-03-04',
+        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
+      },
+      {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '测试title',
+        date: '2017-03-04',
+        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
+      },
+      {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '测试title',
+        date: '2017-03-04',
+        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
+      },
+
+      {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '测试title',
+        date: '2017-03-04',
+        context: '1231232121212121212121212121212121212121231111111111111111111111111111111111111111121212121212121212121212121212121212121212121212121321',
+      },
+    ],
+
+    luyanList: [
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+      { title: '测试路演', num: '1234', city: '测试city', hy: '测试hy', xurz: '测试xurz' },
+    ],
     superOne: require('@/assets/live/main1.png'),
+    two: require('@/assets/live/top_bg.png'),
   }),
   created() {},
   methods: {},
@@ -257,7 +481,7 @@ p {
   height: 400px;
   margin: 0 10px 10px 10px;
   border: 2px solid #ccc;
-  width: 685px;
+  width: 97%;
 }
 .livemain .livevideo .right {
   width: 50%;
@@ -354,6 +578,8 @@ p {
   overflow: hidden;
   // white-space: nowrap;
   text-overflow: ellipsis;
+  border-bottom: 1px solid #ff8500;
+  height: 150px;
 }
 
 /deep/.el-tabs--border-card > .el-tabs__content {
@@ -379,19 +605,22 @@ p {
 }
 .liright p {
   float: left;
-  width: 100%;
+  width: 96%;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 3;
   word-break: break-all;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  padding: 10px;
+  height: 67px;
 }
 .duijie {
   color: #fff;
   background-color: #ff8500;
   text-align: center;
   padding: 10px 15px 10px 15px;
+  margin: 10px 0 0 0;
 }
 .duijie:hover {
   background-color: #0279d5;
@@ -415,4 +644,245 @@ p {
   width: 25%;
   font-size: 16px;
 }
+
+.fangtan {
+  height: 631px;
+  overflow: hidden;
+}
+
+.fangtan .jiabin {
+  float: left;
+  width: 31%;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #c20808;
+  padding: 0 10px 0px 10px;
+  margin: 4px 15px 0 3px;
+}
+
+.jiabin .jiabintop {
+  height: 30px;
+  line-height: 30px;
+}
+
+.jiabin .jiabintop span {
+  display: inline-block;
+  padding: 0 10px;
+  height: 30px;
+  color: #fff;
+  background-color: #ff8500;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.jiabin .jiabintop a {
+  float: right;
+}
+
+.jiabin .jiabinlist ul li {
+  float: left;
+  width: 100%;
+  border-bottom: 1px dashed #ff8500;
+  padding: 9px 0;
+}
+
+.jiabin .jiabinlist ul li:last-child {
+  border-bottom: none;
+  float: left;
+  width: 100%;
+}
+
+.jiabin .jiabinlist ul li:hover p span:first-child {
+  color: #0e90d2;
+}
+
+.jiabin .jiabinlist ul li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+
+.jiabin .jiabinlist ul li p {
+  float: left;
+  width: 71%;
+  padding: 0 0 0 10px;
+}
+
+.jiabin .jiabinlist ul li p span:first-child {
+  float: left;
+  width: 100%;
+  font-size: 18px;
+}
+
+.jiabin .jiabinlist ul li p span:nth-child(2n) {
+  float: left;
+  width: 100%;
+  font-size: 14px;
+  padding: 5px 0;
+}
+
+.jiabin .jiabinlist ul li p span:last-child {
+  float: left;
+  width: 100%;
+  font-size: 14px;
+  color: #888;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.fangtan .luyan {
+  float: left;
+  width: 33%;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #c20808;
+  padding: 0 10px 0px 10px;
+  margin: 4px 10px 0 3px;
+  height: 624px;
+  overflow: hidden;
+}
+
+.luyanList {
+  padding: 10px 0 0 0;
+}
+
+.luyanList ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.luyanList ul li {
+  float: left;
+
+  border-radius: 10px;
+  padding: 5px 10px;
+  margin: 0 0 7px 0;
+  width: 96%;
+  height: 95px;
+  border: 1px solid #ff8500;
+}
+
+.luyanList ul li:nth-child(5) {
+  border: 1px solid #ff8500;
+  float: left;
+  border-radius: 10px;
+  padding: 5px 10px;
+  margin: 0 0 22px 0;
+  width: 96%;
+  height: 95px;
+}
+
+.luyanList ul li:hover {
+  box-shadow: 0 0 5px red;
+}
+
+.luyanList ul li p:first-child span:first-child {
+  font-size: 18px;
+  float: left;
+  width: 80%;
+}
+
+.luyanList ul li p:first-child span:last-child {
+  float: left;
+  width: 20%;
+  color: #c20808;
+}
+
+.luyanList ul li p:last-child span {
+  float: left;
+  width: 100%;
+  padding: 5px 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.fangtan .chat {
+  float: left;
+  width: 30%;
+    height: 624px;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #c20808;
+  padding: 0 10px 0px 10px;
+  margin: 4px 0px 0 3px;
+}
+
+.chat .luyanTop {
+  height: 30px;
+  line-height: 30px;
+}
+
+.chat .luyanTop span:first-child {
+  display: inline-block;
+  padding: 0 10px;
+  height: 30px;
+  color: #fff;
+  background-color: #ff8500;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.chat .luyanTop .icon {
+  float: right;
+  background: #f2f4f5;
+  border-radius: 20px;
+  color: #666;
+  padding: 0 5px;
+  margin: 0 0 0 5px;
+}
+
+.chat .luyanTop .icon {
+  cursor: pointer;
+}
+
+.chat .chatList {
+  height: 505px;
+  background: #fff;
+}
+
+.chat .chatList ul {
+  float: left;
+  width: 100%;
+  height: 454px;
+  padding: 5px 0 0 0;
+  overflow: auto;
+  margin: 10px 0 0 0;
+}
+
+.chat .chatList ul li {
+  padding: 0 10px;
+  margin: 0 0 5px 0;
+}
+
+.chat .chatList ul li span:first-child {
+  color: #666;
+  padding: 0 5px 0 0;
+}
+
+.chat .chatList .input {
+  height: 40px;
+  line-height: 40px;
+  float: left;
+  width: 100%;
+}
+
+.chat .chatList .input input {
+  border: 1px solid #ccc;
+  float: left;
+  height: 38px;
+  width: 79%;
+}
+
+.chat .chatList .input button {
+  float: left;
+  background: forestgreen;
+  color: #fff;
+  height: 42px;
+  width: 67px;
+}
+.jiabinlist ul {
+  margin: 0;
+  padding: 0;
+}
 </style>