修改图片显示

src/layout/index.vue

@@ -46,7 +46,7 @@
               </el-dropdown>
             </el-col>
             <el-col :span="6" class="top_2" v-if="user && user._id">
-              <el-button :icon="Bell" size="small">消息</el-button>
+              <el-button :icon="Bell" size="small" @click="toChat">消息</el-button>
             </el-col>
             <el-col :span="6" v-if="user && user._id" class="top_3">
               <el-dropdown>
@@ -157,6 +157,10 @@ const toOpen = async () => {
 const toCenter = () => {
   router.push('/center')
 }
+// 聊天记录
+const toChat = () => {
+  router.push('/chat')
+}
 // 退出登录
 const toLogout = () => {
   userStore.logOut()
@@ -179,7 +183,10 @@ provide('selectMenu', selectMenu)
 
     .current {
       border-bottom: 2px solid #409eff;
-      color: #409eff !important;
+      background-color: #ecf5ff;
+      :deep(.el-sub-menu__title) {
+        color: #409eff !important;
+      }
     }
 
     .top_1 {

src/router/index.js

@@ -99,6 +99,16 @@ const router = createRouter({
           meta: { title: '吉林省信息技术孵化平台-详情' },
           component: () => import('@/views/project/detail.vue')
         },
+        {
+          path: '/expert/detail',
+          meta: { title: '吉林省信息技术孵化平台-专家' },
+          component: () => import('@/views/expert/detail.vue')
+        },
+        {
+          path: '/chat',
+          meta: { title: '吉林省信息技术孵化平台-聊天记录' },
+          component: () => import('@/views/chat/index.vue')
+        },
         {
           path: '/login',
           meta: { title: '吉林省信息技术孵化平台-用户登录' },

src/views/chat/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <div class="w_1200">
+          <el-col :span="24" class="one" @click="toChat">聊天记录</el-col>
+        </div>
+      </el-col>
+    </el-row>
+    <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>
+  </div>
+</template>
+
+<script setup>
+// 基础
+import { get } from 'lodash-es'
+const $checkRes = inject('$checkRes')
+// 接口
+import { DemandStore } from '@/store/api/platform/demand'
+import { DictDataStore } from '@/store/api/system/dictData'
+const store = DemandStore()
+const dictDataStore = DictDataStore()
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 图片引入
+import kf from '@/assets/kf.png'
+// 路由
+const route = useRoute()
+// 加载中
+const loading = ref(false)
+// 是否弹框客服
+const dialog = ref(false)
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await search()
+  loading.value = false
+})
+const search = async () => {
+  let id = route.query.id
+  if (id) {
+    // let res = await store.fetch(id)
+    // if (res.errcode == '0') info.value = res.data
+  }
+}
+const searchOther = async () => {}
+const toChat = async () => {
+  dialog.value = true
+}
+</script>
+<style scoped lang="scss">
+.main {
+}
+: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: 14px;
+      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: 14px;
+        line-height: 22px;
+        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: 14px;
+      line-height: 22px;
+    }
+
+    .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: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

src/views/expert/detail.vue

@@ -3,74 +3,7 @@
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
         <div class="w_1200">
-          <el-col :span="24" class="one">
-            <el-row :span="24" class="one_1">
-              <el-col :span="20" class="title">{{ info.name || '暂无标题' }}</el-col>
-              <el-col :span="4" class="file" @click="toCollection">
-                <el-icon><Star /></el-icon>
-                收藏
-              </el-col>
-            </el-row>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-descriptions bordered>
-              <a-descriptions-item label="行业领域">
-                {{ getDict(info.field, 'field') }}
-              </a-descriptions-item>
-              <a-descriptions-item label="需求紧急度">
-                {{ getDict(info.urgent, 'urgent') }}
-              </a-descriptions-item>
-              <a-descriptions-item label="合作方式">
-                {{ getDict(info.method, 'method') }}
-              </a-descriptions-item>
-              <a-descriptions-item label="有效期">
-                {{ getTime(info.time) }}
-              </a-descriptions-item>
-              <a-descriptions-item label="需求地区">
-                {{ getArea(info.area) }}
-              </a-descriptions-item>
-            </a-descriptions>
-          </el-col>
-          <el-col :span="24" class="pointer">
-            <div class="money">
-              价格：<span> {{ info.money || '面议' }} </span>
-            </div>
-            <a-button type="primary" @click="toDocking"> 我要对接 </a-button>
-          </el-col>
-          <el-col :span="24" class="pointer" v-if="!user && !user._id">
-            提醒：您还没有登录，登录成功后再对接
-          </el-col>
-          <el-col :span="24" class="thr">
-            <el-col :span="24" class="thr_1">
-              <p>单位信息</p>
-            </el-col>
-            <el-row :span="24" class="thr_2">
-              <el-col :span="17" class="left">
-                <el-col :span="24" class="name">
-                  {{ unit.name || '暂无' }}
-                </el-col>
-                <el-col :span="24" class="other">
-                  <span>联系人</span>
-                  {{ unit.contacts || '暂无' }}
-                </el-col>
-              </el-col>
-              <el-col :span="4" class="right">
-                <a-button type="primary" @click="toChat">
-                  <template #icon>
-                    <MessageOutlined />
-                  </template>
-                  点击在线洽谈
-                </a-button>
-              </el-col>
-            </el-row>
-          </el-col>
-          <a-divider />
-          <el-col :span="24" class="four">
-            <el-col :span="24" class="four_1">
-              <p>需求详情</p>
-            </el-col>
-            <el-col :span="24" class="four_2">{{ info.brief || '暂无' }}</el-col>
-          </el-col>
+          <el-col :span="24" class="one">专家详情</el-col>
         </div>
       </el-col>
     </el-row>
@@ -79,7 +12,6 @@
 
 <script setup>
 // 基础
-import { MessageOutlined } from '@ant-design/icons-vue'
 import { get } from 'lodash-es'
 const $checkRes = inject('$checkRes')
 // 接口

src/views/expert/index.vue

@@ -52,7 +52,7 @@
                     {{ item.direction || '暂无' }}
                   </el-col>
                   <el-col :span="24" class="bottom">
-                    <el-button @click="toChat(item)" type="primary" size="small">
+                    <el-button @click.stop="toChat(item)" type="primary" size="small">
                       联络专家
                     </el-button>
                   </el-col>
@@ -239,6 +239,10 @@ const getDict = (data, model) => {
 const getArea = (data) => {
   if (data) return data.join(',')
 }
+// 联络专家
+const toChat = (item) => {
+  console.log(item)
+}
 const currentPage = ref(1)
 // 分页
 const changePage = (page = currentPage.value) => {

src/views/home/index.vue

@@ -29,7 +29,18 @@
                   :class="[active == item.type ? 'active' : '']"
                 >
                   <el-col :span="6" class="image">
-                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-image
+                      v-show="active == item.type"
+                      class="image"
+                      :src="item.icon"
+                      fit="fill"
+                    />
+                    <el-image
+                      v-show="active != item.type"
+                      class="image"
+                      :src="item.url"
+                      fit="fill"
+                    />
                   </el-col>
                   <el-col :span="18" class="title textOver">{{ item.title }}</el-col>
                 </el-col>
@@ -234,20 +245,29 @@ import science_6 from '@/assets/science_6.png'
 import science_7 from '@/assets/science_7.png'
 import science_8 from '@/assets/science_8.png'
 import science_9 from '@/assets/science_9.png'
+import science1 from '@/assets/science1.png'
+import science2 from '@/assets/science2.png'
+import science3 from '@/assets/science3.png'
+import science4 from '@/assets/science4.png'
+import science5 from '@/assets/science5.png'
+import science6 from '@/assets/science6.png'
+import science7 from '@/assets/science7.png'
+import science8 from '@/assets/science8.png'
+import science9 from '@/assets/science9.png'
 import news from '@/assets/news.jpg'
 // 加载中
 const loading = ref(false)
 const active = ref('0')
 const typeList = ref([
-  { url: science_1, title: '生物技术', type: '0' },
-  { url: science_2, title: '信息技术', type: '1' },
-  { url: science_3, title: '新材料', type: '2' },
-  { url: science_4, title: '新能源', type: '3' },
-  { url: science_5, title: '智能制造', type: '4' },
-  { url: science_6, title: '光电芯片', type: '5' },
-  { url: science_7, title: '人工智能', type: '6' },
-  { url: science_8, title: '航空航天', type: '7' },
-  { url: science_9, title: '其他', type: '8' }
+  { url: science_1, icon: science1, title: '生物技术', type: '0' },
+  { url: science_2, icon: science2, title: '信息技术', type: '1' },
+  { url: science_3, icon: science3, title: '新材料', type: '2' },
+  { url: science_4, icon: science4, title: '新能源', type: '3' },
+  { url: science_5, icon: science5, title: '智能制造', type: '4' },
+  { url: science_6, icon: science6, title: '光电芯片', type: '5' },
+  { url: science_7, icon: science7, title: '人工智能', type: '6' },
+  { url: science_8, icon: science8, title: '航空航天', type: '7' },
+  { url: science_9, icon: science9, title: '其他', type: '8' }
 ])
 const list = ref([])
 // 字典表