案例AI弹窗ui

src/views/portal/case/AICall.vue

@@ -0,0 +1,184 @@
+<template>
+  <el-dialog
+    :visible="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :show-close="true"
+    @close="onClose"
+    class="case-expert-dialog"
+  >
+    <!-- 标题 -->
+    <div slot="title" class="dialog-title">
+      <!-- <img src="@/assets/images/case-expert-icon.png" alt="案例专家" class="icon" /> -->
+      <span>案例专家</span>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-wrapper">
+      <div class="welcome-message">
+        <div class="avatar">
+          <!-- <img src="@/assets/images/bot-avatar.png" alt="AI助手" /> -->
+        </div>
+        <div class="message-text">
+          <p>您好！我是京东方案侧智能问答助手，随时为您服务。</p>
+          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
+          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
+          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>
+        </div>
+      </div>
+
+      <!-- 输入框区域 -->
+      <div class="input-area">
+        <el-input v-model="AIContent" class="input-placeholder" placeholder="有问题，尽管问"></el-input>
+        <div class="action-buttons">
+          <el-button type="primary" size="small" class="start-btn">
+            + 开启新对话
+          </el-button>
+          <el-button type="text" class="send-btn">
+            <i class="el-icon-s-promotion"></i>
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 关闭按钮在右上角，由 el-dialog 自动处理 -->
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'CaseExpertDialog',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    AIContent:'',
+      // dialogVisible: true // 控制弹窗显示，实际项目中可通过父组件控制
+    }
+  },
+  methods: {
+    onClose() {
+      console.log('关闭弹窗')
+      this.$emit('close')
+      // 可以在这里执行其他逻辑
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.case-expert-dialog {
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .content-wrapper {
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    // height:400px;
+    // position:relative;
+    // margin-bottom: 20px;
+
+    .welcome-message {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 30px;
+
+      .avatar {
+        margin-right: 12px;
+        img {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background-color: #007aff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-size: 14px;
+        }
+      }
+
+      .message-text {
+        p {
+          // margin: 4px 0;
+          // line-height: 1.6;
+          color: #333;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .input-area {
+      background-color: white;
+      border: 1px solid #ebeef5;
+      border-radius: 8px;
+      padding: 5px 16px 10px 16px;
+      display: flex;
+      flex-direction: column;
+      // position:absolute;
+      // bottom:10px;
+      // width:93%;
+
+
+      .input-placeholder {
+        color: #999;
+        font-size: 12px;
+        margin: 0;
+        border: none;
+        ::v-deep .el-input__inner {
+          border: none;
+          padding:0;
+        }
+      }
+
+      .action-buttons {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .start-btn {
+          padding: 6px 10px;
+          font-size: 12px;
+          border-radius: 4px;
+          color: #409eff;
+          background-color: #f5f7fa;
+          border: 1px solid #dcdfe6;
+        }
+
+        .send-btn {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background-color: #409eff;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: #3a83ff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/portal/case/Index.vue

@@ -292,7 +292,12 @@
       </div>
       <!-- 打开排行榜 -->
       <div class="xcontent2-minor">
+        
         <div id="fixd-box">
+          <div class="AI-case">
+            <el-button type="success" @click="getAICase" plain>立即咨询</el-button>
+          <!-- <img src="../../../assets/images/course/courseTag.png" alt=""> -->
+        </div>
           <router-link class="the_charts" to="/case/charts">
             <div class="text">排行榜</div>
             <div class="icon">></div>
@@ -458,6 +463,7 @@
         </div>
       </el-dialog>
     </div>
+     <AICall :dialogVisible="showAICall" @close="onClose" />
   </div>
 </template>
 
@@ -477,6 +483,7 @@ import apiDict from "@/api/modules/dict.js";
 import apiType from "@/api/modules/type.js";
 import { cutFullName } from "@/utils/tools.js";
 import apiPlace from "@/api/phase2/place.js"
+import AICall from '@/views/portal/case/AICall.vue'
 export default {
   name: "case",
   components: {
@@ -486,6 +493,7 @@ export default {
     interactBar,
     timeShow,
     author,
+    AICall
   },
   data() {
     return {
@@ -1864,6 +1872,13 @@ export default {
     jumpRouter(item) {
       // console.log(item)
       this.$router.push(`/case/detail?id=${item.id}`);
+    },
+    // 案例立即咨询
+    getAICase(){
+    this.showAICall = true
+    },
+    onClose() {
+      this.showAICall = false
     }
   }
 };
@@ -2804,4 +2819,10 @@ export default {
     text-align: center;
   }
 }
+.AI-case{
+  // max-width: 400px;
+  height: 100px;
+  background: #CEE4FF;
+  margin-bottom:10px
+}
 </style>