修改

src/components/custom/custom-layout.vue

@@ -9,9 +9,15 @@
           </div>
         </div>
         <div class="right">
-          <span @click="toLogin('0')">注册</span>
-          <span>|</span>
-          <span @click="toLogin('1')">登录</span>
+          <div class="right_1">
+            <span @click="toLogin('0')">注册</span>
+            <span>|</span>
+            <span @click="toLogin('1')">登录</span>
+          </div>
+          <div class="right_2" @click="toChat">
+            <el-icon><Bell /></el-icon>
+            <span>消息</span>
+          </div>
         </div>
       </el-col>
       <el-col :span="24" class="header_2">
@@ -128,6 +134,10 @@ const selectMenu = (item, query) => {
 const toHelp = () => {
   router.push({ path: `/help` })
 }
+// 消息
+const toChat = () => {
+  router.push({ path: `/chat` })
+}
 const handleMouseOver = (index) => {
   data.value[index].hover = true
   info.value = data.value[index]
@@ -172,12 +182,24 @@ const handleMouseLeave = (index) => {
       }
       .right {
         display: flex;
-        padding: 10px 0 0 0;
-        font-size: $global-font-size-20;
-        color: $global-color-107;
+        font-size: $global-font-size-18;
         cursor: pointer; /* 改变鼠标样式为手形 */
-        span {
+        .right_1 {
+          display: flex;
+          align-items: center;
+          color: $global-color-107;
+          margin: 0 10px 0 0;
+          span {
+            margin: 0 5px;
+          }
+        }
+        .right_2 {
+          display: flex;
+          align-items: center;
           margin: 0 5px;
+          span {
+            margin: 0 0 0 5px;
+          }
         }
       }
     }
@@ -199,7 +221,7 @@ const handleMouseLeave = (index) => {
 
       .info_1 {
         position: absolute;
-        left: 2%;
+        left: 0;
         top: 128px;
         display: flex;
         padding: 10px 0;
@@ -300,17 +322,4 @@ const handleMouseLeave = (index) => {
     margin: 0 auto;
   }
 }
-@media screen and (max-width: 1746px) {
-  #c-layout {
-    .header {
-      .header_2 {
-        .list {
-          .text {
-            font-size: $global-font-size-18;
-          }
-        }
-      }
-    }
-  }
-}
 </style>

src/layout/site.js

@@ -36,14 +36,14 @@ export const menuList = [
         title: '需求中心',
         label: '需求中心',
         children: [
-          { key: '3-1-1', route: 'demand', title: '技术需求', label: '技术需求', value: '0' },
-          { key: '3-1-2', route: 'demand', title: '人才需求', label: '人才需求', value: '1' },
-          { key: '3-1-3', route: 'demand', title: '资金需求', label: '资金需求', value: '2' },
-          { key: '3-1-4', route: 'demand', title: '合作伙伴', label: '合作伙伴', value: '3' },
-          { key: '3-1-5', route: 'demand', title: '知识产权', label: '知识产权', value: '4' },
-          { key: '3-1-6', route: 'demand', title: '市场需求', label: '市场需求', value: '5' },
-          { key: '3-1-7', route: 'demand', title: '政策支持', label: '政策支持', value: '6' },
-          { key: '3-1-8', route: 'demand', title: '其他', label: '其他', value: '7' }
+          { key: '3-1-1', route: 'thr', title: '技术需求', label: '技术需求', value: '0' },
+          { key: '3-1-2', route: 'thr', title: '人才需求', label: '人才需求', value: '1' },
+          { key: '3-1-3', route: 'thr', title: '资金需求', label: '资金需求', value: '2' },
+          { key: '3-1-4', route: 'thr', title: '合作伙伴', label: '合作伙伴', value: '3' },
+          { key: '3-1-5', route: 'thr', title: '知识产权', label: '知识产权', value: '4' },
+          { key: '3-1-6', route: 'thr', title: '市场需求', label: '市场需求', value: '5' },
+          { key: '3-1-7', route: 'thr', title: '政策支持', label: '政策支持', value: '6' },
+          { key: '3-1-8', route: 'thr', title: '其他', label: '其他', value: '7' }
         ]
       },
       {
@@ -51,20 +51,20 @@ export const menuList = [
         title: '供方中心',
         label: '供方中心',
         children: [
-          { key: '3-2-1', route: 'supply', title: '技术支持', label: '技术支持', value: '0' },
-          { key: '3-2-1', route: 'supply', title: '培训教育', label: '培训教育', value: '1' },
-          { key: '3-2-3', route: 'supply', title: '资金支持', label: '资金支持', value: '2' },
-          { key: '3-2-4', route: 'supply', title: '合作机会', label: '合作机会', value: '3' },
+          { key: '3-2-1', route: 'thr', title: '技术支持', label: '技术支持', value: '0' },
+          { key: '3-2-1', route: 'thr', title: '培训教育', label: '培训教育', value: '1' },
+          { key: '3-2-3', route: 'thr', title: '资金支持', label: '资金支持', value: '2' },
+          { key: '3-2-4', route: 'thr', title: '合作机会', label: '合作机会', value: '3' },
           {
             key: '3-2-5',
-            route: 'supply',
+            route: 'thr',
             title: '知识产权管理',
             label: '知识产权管理',
             value: '4'
           },
-          { key: '3-2-6', route: 'supply', title: '市场推广', label: '市场推广', value: '5' },
-          { key: '3-2-7', route: 'supply', title: '政策支持', label: '政策支持', value: '6' },
-          { key: '3-2-8', route: 'supply', title: '其他', label: '其他', value: '7' }
+          { key: '3-2-6', route: 'thr', title: '市场推广', label: '市场推广', value: '5' },
+          { key: '3-2-7', route: 'thr', title: '政策支持', label: '政策支持', value: '6' },
+          { key: '3-2-8', route: 'thr', title: '其他', label: '其他', value: '7' }
         ]
       }
     ]
@@ -101,7 +101,7 @@ export const menuList = [
     label: '信息库',
     children: [
       { key: '10-1', route: 'expert', title: '专家库', label: '专家库', value: '0' },
-      { key: '10-2', route: 'demand', title: '供需库', label: '供需库', value: '1' },
+      { key: '10-2', route: 'thr', title: '供需库', label: '供需库', value: '1' },
       { key: '10-3', route: 'company', title: '企业库', label: '企业库', value: '2' },
       { key: '10-4', route: 'project', title: '项目库', label: '项目库', value: '3' }
     ]

src/router/index.js

@@ -170,6 +170,11 @@ const router = createRouter({
       meta: { title: '产学研用协同创新数字化平台-行研产研详情' },
       component: () => import('@/views/detail/studyDetail.vue')
     },
+    {
+      path: '/chat',
+      meta: { title: '产学研用协同创新数字化平台-消息' },
+      component: () => import('@/views/chat/index.vue')
+    },
     {
       path: '/login',
       name: 'login',

src/styles/variables.scss

@@ -133,3 +133,6 @@ $global-color-595: #595959;
     font-size: 16px; /* 设置复选框内部文字的字体大小 */
   }
 }
+.ant-menu-title-content {
+  font-size: 18px !important; /* 设置复选框内部文字的字体大小 */
+}

src/views/chat/index copy.vue

@@ -0,0 +1,384 @@
+<template>
+  <custom-layout class="main" v-loading="loading">
+    <div class="w_1200">
+      <el-container>
+        <el-aside width="400px" class="aside">
+          <el-col :span="24" class="one">
+            <el-col :span="24" class="one_1">
+              <el-col :span="4" class="left">
+                <a-avatar :size="60" style="background-color: #409eff">
+                  {{ user.nick_name }}
+                </a-avatar>
+              </el-col>
+              <el-col :span="20" class="right">
+                {{ user.nick_name || '游客' }}
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="one_2">
+              <a-input placeholder="查找联系人">
+                <template #prefix><SearchOutlined /></template>
+              </a-input>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col
+              :span="24"
+              class="list"
+              v-for="(item, index) in chatList"
+              :key="index"
+              @click="toView(item)"
+            >
+              <div class="line" v-if="item.id == id"></div>
+              <el-col :span="4" class="left">
+                <a-badge :dot="item.is_read == '0'">
+                  <a-avatar :size="60" style="background-color: #409eff">
+                    {{ item.nick_name }}
+                  </a-avatar>
+                </a-badge>
+              </el-col>
+              <el-col :span="20" class="right">
+                <el-col :span="24" class="right_1">
+                  <div class="name">{{ item.nick_name }}</div>
+                  <div class="time">{{ item.send_time }}</div>
+                </el-col>
+                <el-col :span="24" class="right_2">{{ item.content }}</el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-aside>
+        <el-main style="background: #eee; padding: 0">
+          <Chat></Chat>
+        </el-main>
+      </el-container>
+    </div>
+  </custom-layout>
+  <el-dialog v-model="dialog" title="智能客服">
+    <el-col :span="24" class="dialog">
+      <div class="content">
+        <div class="title">智能客服为您服务</div>
+        <div class="list">
+          <el-image class="image" :src="kf" fit="fill" />
+          <div class="message">Hi，遇到问题随时找智能客服哟～ 有什么需要我帮忙的吗？</div>
+        </div>
+      </div>
+      <div class="foot">
+        <textarea class="input" placeholder="输入消息"></textarea>
+        <div class="button">
+          <div class="send">发 送</div>
+        </div>
+      </div>
+    </el-col>
+  </el-dialog>
+</template>
+
+<script setup>
+// 基础
+import moment from 'moment'
+import Chat from './parts/chat.vue'
+import { SearchOutlined } from '@ant-design/icons-vue'
+// import { sendWebsocket, closeWebsocket } from '@/utils/websocket'
+// 接口
+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)
+// 图片引入
+import kf from '/images/kf.png'
+// 路由
+const route = useRoute()
+// 加载中
+const loading = ref(false)
+// 是否弹框客服
+const dialog = ref(false)
+// 聊天者id
+const id = ref(route.query.id || '')
+// 聊天室
+const chatList = ref([])
+// 列表
+const list = ref([])
+let skip = 0
+let limit = inject('limit')
+// 搜索
+const searchForm = ref({})
+// 个人信息
+const info = ref({})
+// 消息
+const textarea = ref('')
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  // sendWebsocket('ws://localhost:9700', wsMessage, wsError, succeed)
+  loading.value = false
+})
+
+// onBeforeUnmount(() => {
+//   closeWebsocket()
+// })
+
+// ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
+const wsMessage = async (data) => {
+  const dataJson = data
+  if (dataJson && dataJson.id) {
+    if (
+      (dataJson.senderid == user.value.id && dataJson.receiverid == id.value) ||
+      (dataJson.senderid == id.value && dataJson.receiverid == user.value.id)
+    ) {
+      await searchList()
+      list.value.push(dataJson)
+    }
+  }
+}
+// // ws连接失败，组件要执行的代码
+// const wsError = async () => {
+//   sendWebsocket('ws://localhost:9700', wsMessage, wsError, succeed)
+// }
+// ws连接成功，组件要执行的代码
+const succeed = async () => {
+  console.log('ws连接成功')
+}
+
+const search = async () => {
+  searchList()
+  if (id.value) {
+    let res = await store.fetch(id.value)
+    if (res.errcode == '0') info.value = res.data
+    searchChat({ skip, limit })
+  }
+}
+
+const searchList = async () => {
+  const res = await chatstore.chat()
+  if (res.errcode == '0') chatList.value = res.data
+}
+
+const toView = async (item) => {
+  id.value = item.id
+  info.value = item
+  await chatstore.read({ senderid: user.value.id, receiverid: id.value })
+  await searchList()
+  await searchChat({ skip, limit })
+}
+const searchChat = async (query = { skip: 0, limit }) => {
+  const data = {
+    skip: query.skip,
+    limit: query.limit,
+    user: info.value.id,
+    ...searchForm.value
+  }
+  const res = await chatstore.query(data)
+  if (res.errcode == '0' && res.data.length > 0) list.value = res.data
+  else chatList.value.unshift(info.value)
+}
+const toSend = async () => {
+  const data = {
+    senderid: user.value.id,
+    receiverid: id.value,
+    type: '0',
+    content: textarea.value,
+    send_time: moment().format('YYYY-MM-DD HH:mm:ss')
+  }
+  const res = await chatstore.create(data)
+  if (res.errcode === 0) {
+    textarea.value = ''
+    await searchChat({ skip, limit })
+  }
+}
+// provide
+provide('id', id)
+provide('list', list)
+provide('info', info)
+provide('textarea', textarea)
+provide('toSend', toSend)
+</script>
+<style scoped lang="scss">
+.main {
+  margin: 10px 0;
+  .aside {
+    border-radius: 5px 0 0 5px;
+    background: #33353a;
+    .one {
+      .one_1 {
+        display: flex;
+        align-items: center;
+        background: #292b2e;
+        padding: 10px;
+
+        .left {
+          image {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+          }
+        }
+        .right {
+          margin: 0 0 0 10px;
+          white-space: nowrap;
+          color: #fff;
+          font-size: $global-font-size-18;
+        }
+      }
+      .one_2 {
+        padding: 10px;
+        border-bottom: 1px solid #404247;
+        background-color: hsla(0, 0%, 75.3%, 0.2);
+        :deep(.ant-input-affix-wrapper) {
+          color: #ccc !important;
+          background-color: transparent;
+        }
+        :deep(.ant-input) {
+          height: 32px;
+          position: relative;
+          caret-color: #fff;
+          color: #fff;
+          font-size: $global-font-size-18;
+          padding: 6px 0;
+          border: none;
+          outline: none;
+          background-color: transparent;
+          &::placeholder {
+            color: #ccc !important;
+          }
+        }
+      }
+    }
+    .two {
+      overflow-y: auto;
+      height: 57vh;
+      .list {
+        position: relative;
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid #2c2e31;
+        .right {
+          margin: 5px 0 0 10px;
+          .right_1 {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 10px 10px 0;
+            .name {
+              color: #fff;
+              font-size: $global-font-size-18;
+            }
+            .time {
+              color: #51555e;
+              vertical-align: top;
+              word-break: keep-all;
+              font-size: 10px;
+            }
+          }
+          .right_2 {
+            color: #999;
+          }
+        }
+        .line {
+          position: absolute;
+          background: #ff8f2c;
+          width: 2px;
+          left: 0;
+          top: 0;
+          height: 85px;
+        }
+      }
+      .list:hover {
+        background-color: #3a3c42;
+      }
+    }
+    .two::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+:deep(.el-dialog__body) {
+  padding: 0 !important;
+}
+
+.dialog {
+  .content {
+    padding: 20px;
+
+    .title {
+      padding-top: 23px;
+      padding-bottom: 26px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      font-size: $global-font-size-18;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+
+      .image {
+        width: 60px;
+        height: 60px;
+        border-radius: 60px;
+        margin: 0 10px 0 0;
+      }
+
+      .message {
+        position: relative;
+        max-width: 330px;
+        border-radius: 4px;
+        font-size: $global-font-size-18;
+        line-height: $global-font-size-24;
+        box-sizing: border-box;
+        color: rgba(0, 0, 0, 0.65);
+        padding: 16px 11px 16px 16px;
+        background: #ffffff;
+        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
+  .foot {
+    height: 140px;
+    background: rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    padding: 13px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .input {
+      flex: 1;
+      height: 0;
+      resize: none;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: $global-font-size-18;
+      line-height: $global-font-size-24;
+    }
+
+    .button {
+      margin-top: 8px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+
+      .send {
+        cursor: pointer;
+        color: #fff;
+        background: #2f54eb;
+        border-radius: 4px;
+        width: 64px;
+        height: 32px;
+        font-size: $global-font-size-18;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

src/views/chat/index.vue

@@ -0,0 +1,147 @@
+<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;
+    .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>

src/views/chat/parts/chat.vue

@@ -0,0 +1,186 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one" v-if="id">
+          <el-container>
+            <el-header class="Header">{{ info.nick_name || '平台用户' }}</el-header>
+            <el-main class="Main">
+              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                <el-col :span="24" class="time">{{ item.send_time }}</el-col>
+                <el-col :span="24" class="message" v-if="item.receiver_id != info._id">
+                  <el-col :span="2" class="left">
+                    <a-avatar :size="55" style="background-color: #409eff">
+                      {{ item.sender_name }}
+                    </a-avatar>
+                  </el-col>
+                  <el-col :span="20" class="right">
+                    <div class="name">{{ item.sender_name }}</div>
+                    <div class="content">
+                      <text>{{ item.content }}</text>
+                    </div>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="message flexOne" v-else>
+                  <el-col :span="2" class="left">
+                    <a-avatar :size="55" style="background-color: #409eff">
+                      {{ item.sender_name }}
+                    </a-avatar>
+                  </el-col>
+                  <el-col :span="20" class="right">
+                    <div class="name">{{ item.sender_name }}</div>
+                    <div class="content">
+                      <text>{{ item.content }}</text>
+                    </div>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-main>
+            <el-footer class="Footer">
+              <el-col :span="24" class="Footer1">
+                <textarea class="input" v-model="textarea" placeholder="请输入您想输入的内容" />
+              </el-col>
+              <el-col :span="24" class="Footer2">
+                <el-button type="primary" size="small" @click="toSend">发送</el-button>
+              </el-col>
+            </el-footer>
+          </el-container>
+        </el-col>
+        <el-col :span="24" class="two" v-else>
+          <p>您还未选中或发起聊天，快去跟好友聊一聊吧</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+const id = inject('id')
+const list = inject('list')
+const info = inject('info')
+const textarea = inject('textarea')
+const toSend = inject('toSend')
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    height: 72vh;
+    width: 100%;
+    border-radius: 0 5px 5px 0;
+    color: #a3a7ae;
+    .Header {
+      position: sticky;
+      top: 0;
+      background: #eee;
+      z-index: 1;
+      height: 50px;
+      box-sizing: border-box;
+      line-height: 50px;
+      margin-left: 18px;
+      margin-right: 20px;
+      border-bottom: 1px solid #d9d9d9;
+      white-space: nowrap;
+      word-break: break-all;
+      display: inline-block;
+      font-size: $global-font-size-18;
+      color: grey;
+    }
+    .Main {
+      height: 52vh;
+      .list {
+        .time {
+          width: 100%;
+          font-size: $global-font-size-14;
+          margin: 7px auto;
+          text-align: center;
+          color: #a3a7ae;
+        }
+        .flexOne {
+          flex-direction: row-reverse;
+          .left {
+            text-align: right;
+          }
+          .right {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            .content {
+              color: #fff !important;
+              background: #409eff !important;
+              padding: 12px !important;
+              border-radius: 10px 0 10px 10px !important;
+            }
+          }
+        }
+        .message {
+          display: flex;
+          margin: 0 0 10px 0;
+          .left {
+            .image {
+              width: 50px;
+              height: 50px;
+              border-radius: 50%;
+            }
+          }
+          .right {
+            .name {
+              padding-bottom: 5px;
+              color: #a3a7ae;
+              display: inline-block;
+              font-size: $global-font-size-14;
+            }
+            .content {
+              width: fit-content;
+              font-size: $global-font-size-18;
+              color: #333;
+              background: rgb(255, 255, 255);
+              padding: 12px;
+              border-radius: 0 10px 10px 10px;
+            }
+          }
+        }
+      }
+    }
+    .Main::-webkit-scrollbar {
+      display: none;
+    }
+    .Footer {
+      border-top: 1px solid #ddd;
+      background: #eee;
+      padding: 10px;
+      .Footer1 {
+        .input {
+          color: #333;
+          width: 100%;
+          height: 80px;
+          display: block;
+          box-sizing: border-box;
+          padding: 0 8px 0 17px;
+          font-size: $global-font-size-18;
+          line-height: $global-font-size-24;
+          background: #eee;
+          overflow: auto;
+          border: none;
+        }
+        textarea:focus {
+          outline: none;
+        }
+      }
+      .Footer2 {
+        margin: 10px 0 0 0;
+        text-align: right;
+      }
+    }
+  }
+  .two {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70vh;
+    width: 100%;
+    border-radius: 0 5px 5px 0;
+    color: #a3a7ae;
+    font-size: $global-font-size-18;
+  }
+}
+</style>

src/views/detail/expertDetail.vue

@@ -4,7 +4,75 @@
       <div class="w_1200">
         <div class="info_1"></div>
         <div class="info_2">
-          <div></div>
+          <div class="infoName">
+            <el-image class="image" :src="userLogo" fit="fill" />
+            <div class="other_1">
+              <div class="name">{{ info.name || '暂无' }}</div>
+              <div class="brief">
+                <span>{{ info.title || '暂无' }}</span>
+                <span>{{ info.area || '暂无' }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="infoBrief">
+            <div class="Brief_1">
+              <span>科研能力</span>
+              <span>{{ info.ability || '暂无' }}</span>
+            </div>
+            <div class="Brief_2">
+              <span>个人能力</span>
+              <span>{{ info.brief || '暂无' }}</span>
+            </div>
+          </div>
+          <div class="infoOther">
+            <div class="title">合作信息</div>
+            <div class="content">
+              <el-table
+                :data="tableData"
+                stripe
+                style="width: 100%"
+                :header-cell-style="{
+                  backgroundColor: 'rgba(194, 209, 225, 0.5)',
+                  color: '#ffffff',
+                  fontSize: '16px',
+                  textAlign: 'center'
+                }"
+                :cell-style="{
+                  fontSize: '16px',
+                  textAlign: 'center'
+                }"
+                :row-style="{ fontSize: '16px', textAlign: 'center' }"
+              >
+                <el-table-column prop="company" label="合作单位" />
+                <el-table-column prop="num" label="合作论文数量" />
+              </el-table>
+            </div>
+          </div>
+          <div class="infoOther">
+            <div class="title">荣誉&成就</div>
+            <div class="content">{{ info.achievement || '暂无' }}</div>
+          </div>
+          <div class="infoOther">
+            <div class="title">科研成果</div>
+            <div class="content">
+              <div class="content_1">
+                <div class="menu menuTrue">
+                  <span>期刊论文</span>
+                </div>
+                <div class="menu">
+                  <span>科技成果</span>
+                </div>
+                <div class="menu">
+                  <span>专利</span>
+                </div>
+              </div>
+              <div class="content_2">
+                <div class="scientific" v-for="(item, index) in info.scientific" :key="index">
+                  {{ item || '暂无' }}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </el-col>
@@ -12,7 +80,7 @@
 </template>
 
 <script setup>
-import match_4 from '/images/match_4.jpg'
+import userLogo from '/images/userLogo.png'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
@@ -20,12 +88,26 @@ const user = computed(() => userStore.user)
 const loading = ref(false)
 // 路由
 const router = useRouter()
+const tableData = ref([
+  { company: '中国科学院固定物理研究所', num: '23' },
+  { company: '中国科学院固定物理研究所', num: '23' },
+  { company: '中国科学院固定物理研究所', num: '23' },
+  { company: '中国科学院固定物理研究所', num: '23' }
+])
 const info = ref({
   name: '张教授',
   area: '吉林长春市',
   education: '博士',
+  title: '副教授',
   field: '科技金融',
   ability: '#基金项目申报##应用技术研究##产学研合作#',
+  scientific: [
+    '面向等离子体材料用先进钨复合材料的改性研究进展与趋势',
+    '湿化学法W-Re合金制备与性能',
+    '低能高通量氨离子辐照下W28Ta28V28Zr8Sc8高熵合金损伤行为研究',
+    '配位聚合物衍生的硒化锡@多孔碳纳米棒及其储钠性能研究'
+  ],
+  achievement: '中国机械工业优秀青年科技专家',
   brief:
     '张教授主要从事石油资产定价与预测、能源环境政策绩效评价、碳交易与碳减排机制政策等领域的研究工作。现已主持国家自然科学基金优秀青年基金项目、重点专项，国家社科基金重大项目、重点项目等重要科研任务10余项'
 })
@@ -39,12 +121,99 @@ const info = ref({
       padding: 30px 0;
     }
     .info_2 {
-      display: flex;
       border-radius: 5px;
       padding-right: 30px;
       padding: 50px;
-      background: url(/images/userBg.png) no-repeat;
+      background: url(/images/userbg.png) no-repeat;
       background-position: center top;
+      .infoName {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .other_1 {
+          margin: 0 0 0 10px;
+          .name {
+            font-size: $global-font-size-22;
+            font-weight: bold;
+          }
+          .brief {
+            font-size: $global-font-size-18;
+            color: $global-color-595;
+            margin: 5px 0 0 0;
+            span {
+              margin: 0 5px 0 0;
+            }
+          }
+        }
+      }
+      .infoBrief {
+        background: rgba(194, 209, 225, 0.5);
+        padding: 20px;
+        margin: 20px 0;
+        border-radius: 5px;
+        font-size: $global-font-size-18;
+        .Brief_1 {
+          margin: 10px 0;
+          span:first-child {
+            margin: 0 5px 0 0;
+          }
+          span:last-child {
+            color: #dc4900;
+            margin: 0 5px 0 0;
+          }
+        }
+        .Brief_2 {
+          margin: 10px 0;
+          span:first-child {
+            margin: 0 5px 0 0;
+          }
+          span:last-child {
+            margin: 0 5px 0 0;
+          }
+        }
+      }
+      .infoOther {
+        margin: 20px 0;
+        border-radius: 5px;
+        padding: 10px;
+        background: #ffffff;
+        box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.3);
+        .title {
+          margin: 10px 0 10px;
+          padding-left: 10px;
+          height: 18px;
+          line-height: 18px;
+          font-size: 16px;
+          font-weight: bold;
+          color: #1073ff;
+          border-left: 3px solid #1073ff;
+        }
+        .content {
+          padding: 20px;
+          font-size: $global-font-size-18;
+          .content_1 {
+            display: flex;
+            align-items: center;
+            .menu {
+              padding: 10px 20px;
+              margin: 0 10px 0 0;
+              color: #666666;
+              border: 1px solid #bbbbbb;
+            }
+            .menuTrue {
+              color: $global-color-fff;
+              background: #1073ff;
+              border: none;
+            }
+          }
+          .content_2 {
+            margin: 10px 0;
+            .scientific {
+              margin: 10px 0;
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/detail/matchDetail.vue

@@ -78,7 +78,10 @@ const info = ref({
         display: flex;
         margin-top: 60px !important;
         color: #666;
+        font-size: $global-font-size-16;
         .image {
+          width: 18px;
+          height: 18px;
           margin: 0 5px 0 0;
         }
       }

src/views/detail/news.vue

@@ -42,7 +42,7 @@
                   <el-image class="image" v-else :src="new_4" fit="fill" />
                 </el-col>
                 <el-col :span="17" class="right">
-                  <el-col :span="24" class="right_1 textOver">
+                  <el-col :span="24" class="right_1 textOne">
                     {{ item.title || '暂无标题' }}
                   </el-col>
                   <el-col :span="24" class="right_2 textMore">
@@ -66,7 +66,7 @@
                     :key="index"
                     @click="toCommon(item, '/achievement/detail')"
                   >
-                    <div class="name textOver">{{ item.name }}</div>
+                    <div class="name textOne">{{ item.name }}</div>
                     <div class="time">{{ item.time }}</div>
                   </a-timeline-item>
                 </a-timeline>
@@ -82,7 +82,7 @@
                     :key="index"
                     @click="toCommon(item, '/project/detail')"
                   >
-                    <div class="name textOver">{{ item.name }}</div>
+                    <div class="name textOne">{{ item.name }}</div>
                     <div class="time">{{ item.time }}</div>
                   </a-timeline-item>
                 </a-timeline>

src/views/detail/newsDetail.vue

@@ -282,6 +282,7 @@ const toView = (item, type) => {
         }
         .content {
           margin-top: 30px !important;
+          font-size: $global-font-size-16;
         }
       }
       .right {

src/views/detail/platformDetail.vue

@@ -218,6 +218,7 @@ const toView = (item) => {
         }
         .content {
           padding: 20px;
+          font-size: $global-font-size-16;
         }
       }
       .bottom {
@@ -243,7 +244,7 @@ const toView = (item) => {
               font-size: $global-font-size-20;
               font-weight: bold;
               display: inline-block;
-              margin: 0 0 8px 0;
+              margin: 5px 0 8px 0;
             }
 
             .name:hover {

src/views/detail/serviceDetail.vue

@@ -122,7 +122,7 @@ const toView = (item) => {
       .top {
         display: flex;
         .info_left {
-          width: 480px;
+          width: 460px;
           height: 260px;
           .image {
             height: 100%;
@@ -131,7 +131,7 @@ const toView = (item) => {
         }
         .info_right {
           margin-left: 40px;
-          width: 580px;
+          width: 600px;
           .right_name {
             color: #22284e;
             font-size: $global-font-size-26;
@@ -163,6 +163,7 @@ const toView = (item) => {
         }
         .content {
           padding: 20px;
+          font-size: $global-font-size-16;
         }
       }
       .bottom {

src/views/detail/studyDetail.vue

@@ -13,11 +13,11 @@
         <div class="twoValue">
           <div class="value" v-for="(item, index) in list" :key="index">
             <div class="table-colunm table-colunm1 textOne">{{ item.id || '暂无' }}</div>
-            <div class="table-colunm table-colunm3 textOne">{{ item.name || '暂无' }}</div>
+            <div class="table-colunm table-colunm2 textOne">{{ item.name || '暂无' }}</div>
             <div class="table-colunm table-colunm1 textOne">{{ item.client || '暂无' }}</div>
             <div class="table-colunm table-colunm1 textOne">{{ item.partner || '暂无' }}</div>
             <div class="table-colunm table-colunm3 textOne">{{ item.brief || '暂无' }}</div>
-            <div class="table-colunm button" @click="toView(item)">查看详情</div>
+            <!-- <div class="table-colunm button" @click="toView(item)">查看详情</div> -->
           </div>
         </div>
         <div class="twoTotal">
@@ -40,11 +40,11 @@ const loading = ref(false)
 const router = useRouter()
 const column = ref([
   { name: '序号', key: 'id', style: { width: '116px' } },
-  { name: '名称', key: 'name', style: { width: '416px' } },
+  { name: '名称', key: 'name', style: { width: '420px' } },
   { name: '委托方', key: 'client', style: { width: '116px' } },
   { name: '合作方', key: 'partner', style: { width: '116px' } },
-  { name: '研究主旨', key: 'brief', style: { width: '416px' } },
-  { name: '操作', key: 'operation', style: { width: '216px' } }
+  { name: '研究主旨', key: 'brief', style: { width: '450px' } }
+  // { name: '操作', key: 'operation', style: { width: '216px' } }
 ])
 const list = ref([
   {
@@ -156,10 +156,10 @@ const toView = (item) => {
           width: 116px !important;
         }
         .table-colunm2 {
-          width: 316px !important;
+          width: 420px !important;
         }
         .table-colunm3 {
-          width: 416px !important;
+          width: 450px !important;
         }
         .button {
           cursor: pointer; /* 改变鼠标样式为手形 */

src/views/eight/index.vue

@@ -10,7 +10,7 @@
             <el-row class="list">
               <el-image class="image" :src="item.url" fit="fill" />
               <el-col :span="24" class="other">
-                <el-col :span="24" class="title textOver">{{ item.label }}</el-col>
+                <el-col :span="24" class="title">{{ item.label }}</el-col>
                 <el-col :span="24" class="friend">合作伙伴</el-col>
                 <el-col
                   :span="24"

src/views/four/parts/index.vue

@@ -205,10 +205,8 @@
               <el-col :span="1">
                 <div class="i"></div>
               </el-col>
-              <el-col :span="16" class="content">
-                <el-tooltip class="textOne" effect="dark" :content="item.name" placement="top">
-                  {{ item.name || '暂无名称' }}
-                </el-tooltip>
+              <el-col :span="16" class="content textOne">
+                {{ item.name || '暂无名称' }}
               </el-col>
               <el-col :span="7" class="other textOne">
                 {{ getDict(item.field || '暂无技术领域', 'field') }}
@@ -615,7 +613,7 @@ const toChat = (item) => {
 }
 // 查看成果
 const toAchive = (item) => {
-  router.push({ path: '/achievement', query: { type: item.value } })
+  router.push({ path: '/nine', query: { type: item.value } })
 }
 const removeHtmlStyle = (html) => {
   let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式

src/views/login/index.vue

@@ -88,30 +88,29 @@ provide('roleList', roleList)
 <style scoped lang="scss">
 .main {
   .one {
-    position: relative;
     background-image: url(/images/bg_login.jpg);
     background-position: center center;
     background-repeat: no-repeat;
-    height: calc(100vh - 13.1vh);
+    min-height: calc(100vh - 14vh);
     width: 100%;
     background-size: cover;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
     .one_1 {
       width: 600px;
-      position: absolute;
-      top: 5%;
-      right: 10%;
       background-color: $global-color-fff;
       padding: 10px;
       border-radius: 20px;
+      margin: 50px 200px 50px 0;
     }
     .one_2 {
       width: 450px;
-      position: absolute;
-      top: 20%;
-      right: 15%;
       background-color: $global-color-fff;
       padding: 10px;
       border-radius: 20px;
+      margin: 50px 200px 50px 0;
     }
   }
 }

src/views/ten/index.vue

@@ -304,7 +304,6 @@ const toMore = (type) => {
         align-items: center;
         justify-content: space-between;
         background: linear-gradient(90deg, #d7e8ff, #fff);
-        width: 300px;
         height: 64px;
         padding-left: 21px;
         box-sizing: border-box;

src/views/thirteen/index.vue

@@ -43,7 +43,7 @@
                   <el-row>
                     <el-image class="image" :src="item.url" fit="fill" />
                     <el-col :span="24" class="other">
-                      <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                      <el-col :span="24" class="title textOne">{{ item.name }}</el-col>
                       <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
                     </el-col>
                   </el-row>
@@ -69,7 +69,7 @@
                   <el-row>
                     <el-image class="image" :src="item.url" fit="fill" />
                     <el-col :span="24" class="other">
-                      <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                      <el-col :span="24" class="title textOne">{{ item.name }}</el-col>
                       <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
                     </el-col>
                   </el-row>
@@ -95,7 +95,7 @@
                         :key="index"
                         @click="toView(item)"
                       >
-                        <div class="name textOver">{{ item.name }}</div>
+                        <div class="name textOne">{{ item.name }}</div>
                       </a-timeline-item>
                     </a-timeline>
                   </el-col>
@@ -373,8 +373,8 @@ const toView = async (item) => {
               margin-bottom: 5px;
             }
             .other_2 {
-              line-height: $global-font-size-18;
-              font-size: $global-font-size-18;
+              line-height: $global-font-size-16;
+              font-size: $global-font-size-16;
               height: 80px;
               overflow: hidden;
               color: #1d1e20;
@@ -412,7 +412,7 @@ const toView = async (item) => {
                 cursor: pointer;
               }
               .other_2 {
-                font-size: $global-font-size-18;
+                font-size: $global-font-size-16;
                 overflow: hidden;
                 color: #1d1e20;
                 text-align: justify;