cxyy-web/src/views/chat/index.vue

<template>
  <custom-layout class="main" v-loading="loading">
    <div class="one w_1200">
      <div class="left">
        <el-image class="image" :src="userLogo" fit="fill" />
        <div class="name">{{ user.name || '测试用户' }}</div>
        <div class="menu">
          <div class="menu_1">
            <el-icon><User /></el-icon>
            <span>我的信息</span>
          </div>
          <div class="menu_1">
            <el-icon><Document /></el-icon>
            <span>对接记录</span>
          </div>
          <div class="menu_1 menuTrue">
            <el-icon><Bell /></el-icon>
            <span>消息中心</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_1">
          <div class="rightLeft">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="0"></el-tab-pane>
              <el-tab-pane label="未读" name="1"></el-tab-pane>
              <el-tab-pane label="已读" name="2"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="rightRight">
            <div class="menu">
              <span>标记已读</span>
            </div>
            <div class="menu">
              <span>删除</span>
            </div>
            <div class="menu">
              <span>全部已读</span>
            </div>
            <div class="menu">
              <span>全部删除</span>
            </div>
          </div>
        </div>
        <div class="right_2">
          <el-image class="image" :src="chat" fit="fill" />
        </div>
      </div>
    </div>
  </custom-layout>
</template>

<script setup>
import userLogo from '/images/userLogo.png'
import chat from '/images/chat.png'
// 基础
import moment from 'moment'
// 接口
import { ChatStore } from '@/store/api/platform/chat'
import { UsersStore } from '@/store/api/user/user'
const store = UsersStore()
const chatstore = ChatStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()

const user = computed(() => userStore.user)
// 路由
const route = useRoute()
// 加载中
const loading = ref(false)
const activeName = ref('0')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
<style scoped lang="scss">
.main {
  background: #f2f2f2;
  .one {
    display: flex;
    padding: 7.5px 0;
    .left {
      padding: 20px 0;
      min-height: 56vh;
      margin: 20px 0;
      text-align: center;
      width: 160px;
      border-radius: 5px;
      background: #f8f8f8;
      .image {
        width: 95px;
        height: 95px;
        margin: 10px 0;
      }
      .name {
        font-size: $global-font-size-20;
      }
      .menu {
        margin: 10px 0;
        .menu_1 {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px 0;
          font-size: $global-font-size-20;
          span {
            margin: 0 0 0 10px;
          }
        }
        .menuTrue {
          background: #ffffff;
          color: $global-color-107;
          border-left: 3px solid #1073ff;
        }
      }
    }
    .right {
      width: 1020px;
      padding: 20px;
      .right_1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .rightRight {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .menu {
            background: #f8f8f8;
            padding: 10px 20px;
            margin: 0 10px 0 0;
            color: #666666;
            border: 1px solid #bbbbbb;
          }
        }
      }
      .right_2 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }
}
</style>