浏览代码

技术交底书理解升级

zhuliu 3 周之前
父节点
当前提交
5a9015a5e0
共有 2 个文件被更改,包括 250 次插入91 次删除
  1. 13 7
      src/components/xiaoshi_AI/index.vue
  2. 237 84
      src/views/AITools/technicalDisclosure/technicalDisclosure.vue

+ 13 - 7
src/components/xiaoshi_AI/index.vue

@@ -135,16 +135,18 @@ export default {
         type:String,
         type:String,
         default:'app-DDGJt4QUmzlc2aFQ5voOAXIj'
         default:'app-DDGJt4QUmzlc2aFQ5voOAXIj'
     },
     },
+    AItype:{
+        type:Number,
+        default:0
+    },
     chatApi:{
     chatApi:{
         type:String,
         type:String,
         default:'/api/xiaoshi/dify/chatMessage'
         default:'/api/xiaoshi/dify/chatMessage'
     },
     },
     slotDataFunction:{
     slotDataFunction:{
         type:Function,
         type:Function,
-        default:()=>{
-            return (val)=>{
-                return val
-            }
+        default:(val)=>{
+            return val
         }
         }
     }
     }
   },
   },
@@ -185,7 +187,7 @@ export default {
             this.queryChatHistory.has_more = true
             this.queryChatHistory.has_more = true
             this.getChatHistory(1)
             this.getChatHistory(1)
         }else{
         }else{
-            this.chatHistory = []
+            this.$set(this,'chatHistory',[])
         }
         }
     }
     }
   },
   },
@@ -316,6 +318,7 @@ export default {
         }
         }
         var params = {
         var params = {
             conversationId:this.conversationId,
             conversationId:this.conversationId,
+            type:this.AItype,
             ...this.queryChatHistory
             ...this.queryChatHistory
         }
         }
         await this.$api.queryHistoryMessage(params).then(response=>{
         await this.$api.queryHistoryMessage(params).then(response=>{
@@ -414,7 +417,8 @@ export default {
           signal: this.controller.signal
           signal: this.controller.signal
         });
         });
         if (!response.ok) throw new Error('AI API 调用失败');
         if (!response.ok) throw new Error('AI API 调用失败');
-        
+        this.showHistory = true
+        this.$emit('getShowHistory',this.showHistory)
         const reader = response.body.getReader();
         const reader = response.body.getReader();
         const decoder = new TextDecoder('utf-8');
         const decoder = new TextDecoder('utf-8');
         var messageId = ''
         var messageId = ''
@@ -560,7 +564,8 @@ export default {
         }
         }
         if(this.currentTaskId){
         if(this.currentTaskId){
             var params = {
             var params = {
-                taskId:this.currentTaskId
+                taskId:this.currentTaskId,
+                type:this.AItype
             }
             }
             this.$api.stopMessage(params).then(response=>{
             this.$api.stopMessage(params).then(response=>{
                 if(response.code == 200){
                 if(response.code == 200){
@@ -762,6 +767,7 @@ export default {
     --padding:20px;
     --padding:20px;
     padding: var(--padding) 0;
     padding: var(--padding) 0;
     margin:0 auto;
     margin:0 auto;
+    min-width: 450px;
     width: calc(100% - 0px);
     width: calc(100% - 0px);
     height: calc(100% - var(--padding) - var(--padding));
     height: calc(100% - var(--padding) - var(--padding));
     max-width: 720px;
     max-width: 720px;

+ 237 - 84
src/views/AITools/technicalDisclosure/technicalDisclosure.vue

@@ -10,7 +10,7 @@
               <el-button size="mini" :type="showOption.showLeft?'success':'info'" @click="showOption.showLeft = !showOption.showLeft">{{showOption.showLeft?"隐藏":"显示"}}左侧</el-button>
               <el-button size="mini" :type="showOption.showLeft?'success':'info'" @click="showOption.showLeft = !showOption.showLeft">{{showOption.showLeft?"隐藏":"显示"}}左侧</el-button>
               <el-button size="mini" :type="showOption.showRight?'success':'info'" @click="showOption.showRight = !showOption.showRight">{{showOption.showRight?"隐藏":"显示"}}右侧</el-button>
               <el-button size="mini" :type="showOption.showRight?'success':'info'" @click="showOption.showRight = !showOption.showRight">{{showOption.showRight?"隐藏":"显示"}}右侧</el-button>
             </div>
             </div>
-            <el-upload
+            <!-- <el-upload
               ref="uploadConfession"
               ref="uploadConfession"
               class="upload-demo"
               class="upload-demo"
               action="#"
               action="#"
@@ -19,17 +19,22 @@
               :on-change="onChangeConfession"
               :on-change="onChangeConfession"
               :limit="1">
               :limit="1">
               <el-button type="primary" size="mini">切换技术交底书</el-button>
               <el-button type="primary" size="mini">切换技术交底书</el-button>
-            </el-upload>
+            </el-upload> -->
+            <el-button type="primary" size="mini" @click="addConversation">添加新会话</el-button>
           </div>
           </div>
           <div class="topMenu_right">
           <div class="topMenu_right">
-            <el-button type="primary" size="mini" v-if="!editTechnical" @click="changeEditTechnical()">修改</el-button>
-            <el-button type="primary" size="mini" v-else @click="changeEditTechnical()">完成</el-button>
-            <el-button type="info" size="mini" disabled>查新检索</el-button>
-            <el-button type="info" size="mini" disabled>辅助撰写说明书</el-button>
+            <el-button :type="styleShow=='style1'?'success':'info'" size="mini" @click="styleShow='style1'">样式一</el-button>
+            <el-button :type="styleShow=='style2'?'success':'info'" size="mini" @click="styleShow='style2'">样式二</el-button>
+            <el-button :type="styleShow=='style3'?'success':'info'" size="mini" @click="styleShow='style3'">样式三</el-button>
+
+            <el-button type="primary" size="mini" v-if="!editTechnical" @click="changeEditTechnical()">编辑模式</el-button>
+            <el-button type="primary" size="mini" v-else @click="changeEditTechnical()">返回预览模式</el-button>
+            <el-button type="info" size="mini" @click="$message.info('敬请期待')">查新检索</el-button>
+            <el-button type="info" size="mini" @click="$message.info('敬请期待')">辅助撰写说明书</el-button>
 
 
           </div>
           </div>
         </div>
         </div>
-        <div class="technicalDisclosure_content">
+        <div :class="['technicalDisclosure_content',styleShow]">
           <!-- 左侧文件展示 -->
           <!-- 左侧文件展示 -->
           <div class="left" v-loading="loading" v-show="showOption.showLeft" :style="!showOption.showRight?'width:calc(100% - 0px) !important':''">
           <div class="left" v-loading="loading" v-show="showOption.showLeft" :style="!showOption.showRight?'width:calc(100% - 0px) !important':''">
               <template v-if="show">
               <template v-if="show">
@@ -42,6 +47,16 @@
           <div class="right" v-show="showOption.showRight" :style="!showOption.showLeft?'width:calc(100% - 0px) !important':''">
           <div class="right" v-show="showOption.showRight" :style="!showOption.showLeft?'width:calc(100% - 0px) !important':''">
             <!-- 格式化技术交底书内容 -->
             <!-- 格式化技术交底书内容 -->
             <div class="mainContent">
             <div class="mainContent">
+              <!-- 背景技术 -->
+              <div class="background_technology content_box">
+                <div class="title">背景技术</div>
+                <div v-if="!editTechnical">
+                  {{ technicalContent.background }}
+                </div>
+                <div v-else>
+                  <el-input type="textarea" v-model="editTechnicalContent.background" placeholder="请输入背景技术" @change="saveTechnicalContent"></el-input>
+                </div>
+              </div>
               <!-- 技术领域 --> 
               <!-- 技术领域 --> 
               <div class="technical_field content_box">
               <div class="technical_field content_box">
                 <div class="title">技术领域</div>
                 <div class="title">技术领域</div>
@@ -60,7 +75,7 @@
                     <div class="delBtn">
                     <div class="delBtn">
                       <el-button class="delTextBtn" type="text" @click="delData('technicalCase',technicalContent.technicalCase,index)">删除技术问题</el-button>
                       <el-button class="delTextBtn" type="text" @click="delData('technicalCase',technicalContent.technicalCase,index)">删除技术问题</el-button>
                     </div>
                     </div>
-                    <div class="text"><span class="childTitle">技术问题:</span>{{ item.technicalProblem }}</div>
+                    <div class="text"><span class="childTitle">技术问题{{index+1}}:</span>{{ item.technicalProblem }}</div>
                     <div class="technical_means">
                     <div class="technical_means">
                       <div class="title">技术手段:</div>
                       <div class="title">技术手段:</div>
                       <div v-for="(mean,inde) in item.technicalMeans" :key="'mean'+inde" class="technical_means_item">
                       <div v-for="(mean,inde) in item.technicalMeans" :key="'mean'+inde" class="technical_means_item">
@@ -193,30 +208,10 @@
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
-              <!-- 背景技术 -->
-              <div class="background_technology content_box">
-                <div class="title">背景技术</div>
-                <div v-if="!editTechnical">
-                  {{ technicalContent.background }}
-                </div>
-                <div v-else>
-                  <el-input type="textarea" v-model="editTechnicalContent.background" placeholder="请输入背景技术" @change="saveTechnicalContent"></el-input>
-                </div>
-              </div>
-              <!-- 术语解释 -->
-              <div class="terminology_explanation content_box">
-                <div class="title">术语解释</div>
-                <div>
-                  <div v-for="(item,index) in technicalContent.termsExplanation" :key="index" class="terminology_explanation_item">
-                    <div class="childTitle">{{ item.terms }}</div>
-                    <div class="text">{{ item.explanation }}</div>
-                  </div>
-                </div>
-              </div>
               <!-- 布局建议 -->
               <!-- 布局建议 -->
               <div class="layout_suggestions content_box">
               <div class="layout_suggestions content_box">
                 <div class="title">布局建议</div>
                 <div class="title">布局建议</div>
-                <div class="text">
+                <div class="text" v-if="technicalContent.claimSuggestions">
                   <p v-if="technicalContent.claimSuggestions.mainClaimSuggestions">
                   <p v-if="technicalContent.claimSuggestions.mainClaimSuggestions">
                     <span class="childTitle">独权建议:</span> {{technicalContent.claimSuggestions.mainClaimSuggestions}}
                     <span class="childTitle">独权建议:</span> {{technicalContent.claimSuggestions.mainClaimSuggestions}}
                   </p>
                   </p>
@@ -232,12 +227,24 @@
                   {{ technicalContent.additionalSuggestions || '无' }}
                   {{ technicalContent.additionalSuggestions || '无' }}
                 </div>
                 </div>
               </div>
               </div>
+              
+              <!-- 术语解释 -->
+              <div class="terminology_explanation content_box">
+                <div class="title">术语解释</div>
+                <div>
+                  <div v-for="(item,index) in technicalContent.termsExplanation" :key="index" class="terminology_explanation_item">
+                    <div class="childTitle">{{ item.terms }}</div>
+                    <div class="text">{{ item.explanation }}</div>
+                  </div>
+                </div>
+              </div>
+              
               <!-- 空白 -->
               <!-- 空白 -->
               <div class="kongbai"></div>
               <div class="kongbai"></div>
             </div>
             </div>
             <!-- AI对话框 -->
             <!-- AI对话框 -->
             <div class="AIChat" :style="showHistory?'height:100%':'height:auto'">
             <div class="AIChat" :style="showHistory?'height:100%':'height:auto'">
-              <xiaoshiAI style="width:100%;max-width:100%" :slotDataFunction="slotDataFunction" :chat_id="chat_id" :params="AIParams" :API_KEY="API_KEY" :chatApi="chat_api" :defaultShowHistory="showHistory" @getShowHistory="getShowHistory" @getConversationId="getConversationId">
+              <xiaoshiAI style="width:100%;max-width:100%" :AItype="4" :slotDataFunction="slotDataFunction" :chat_id="chat_id" :params="AIParams" :API_KEY="API_KEY" :chatApi="chat_api" :defaultShowHistory="showHistory" @getShowHistory="getShowHistory" @getConversationId="getConversationId">
                 <template slot="questionBtn">
                 <template slot="questionBtn">
                   <div>
                   <div>
                     <el-button size="mini" :type="AIModel=='chat'?'success':'info'" round @click="changeAIModel('chat')">AI对话</el-button>
                     <el-button size="mini" :type="AIModel=='chat'?'success':'info'" round @click="changeAIModel('chat')">AI对话</el-button>
@@ -246,6 +253,13 @@
                 </template>
                 </template>
                 <template v-if="AIModel == 'edit'" v-slot:answer="data">
                 <template v-if="AIModel == 'edit'" v-slot:answer="data">
                   <div class="mainContent">
                   <div class="mainContent">
+                     <!-- 背景技术 -->
+                    <div class="background_technology content_box">
+                      <div class="title">背景技术</div>
+                      <div>
+                        {{ data.data.background }}
+                      </div>
+                    </div>
                     <!-- 技术领域 --> 
                     <!-- 技术领域 --> 
                     <div class="technical_field content_box">
                     <div class="technical_field content_box">
                       <div class="title">技术领域</div>
                       <div class="title">技术领域</div>
@@ -302,27 +316,10 @@
                         </div>
                         </div>
                       </div>
                       </div>
                     </div>
                     </div>
-                    <!-- 背景技术 -->
-                    <div class="background_technology content_box">
-                      <div class="title">背景技术</div>
-                      <div>
-                        {{ data.data.background }}
-                      </div>
-                    </div>
-                    <!-- 术语解释 -->
-                    <div class="terminology_explanation content_box">
-                      <div class="title">术语解释</div>
-                      <div>
-                        <div v-for="(item,index) in data.data.termsExplanation" :key="index" class="terminology_explanation_item">
-                          <div class="childTitle">{{ item.terms }}</div>
-                          <div class="text">{{ item.explanation }}</div>
-                        </div>
-                      </div>
-                    </div>
-                    <!-- 布局建议 -->
+                   <!-- 布局建议 -->
                     <div class="layout_suggestions content_box">
                     <div class="layout_suggestions content_box">
                       <div class="title">布局建议</div>
                       <div class="title">布局建议</div>
-                      <div class="text">
+                      <div class="text" v-if="data.data.claimSuggestions">
                         <p v-if="data.data.claimSuggestions.mainClaimSuggestions">
                         <p v-if="data.data.claimSuggestions.mainClaimSuggestions">
                           <span class="childTitle">独权建议:</span> {{data.data.claimSuggestions.mainClaimSuggestions}}
                           <span class="childTitle">独权建议:</span> {{data.data.claimSuggestions.mainClaimSuggestions}}
                         </p>
                         </p>
@@ -338,10 +335,21 @@
                         {{ data.data.additionalSuggestions || '无' }}
                         {{ data.data.additionalSuggestions || '无' }}
                       </div>
                       </div>
                     </div>
                     </div>
+                    <!-- 术语解释 -->
+                    <div class="terminology_explanation content_box">
+                      <div class="title">术语解释</div>
+                      <div>
+                        <div v-for="(item,index) in data.data.termsExplanation" :key="index" class="terminology_explanation_item">
+                          <div class="childTitle">{{ item.terms }}</div>
+                          <div class="text">{{ item.explanation }}</div>
+                        </div>
+                      </div>
+                    </div>
+                    
                   </div>
                   </div>
                 </template>
                 </template>
                 <template v-if="AIModel == 'edit'"  v-slot:messageBtn="data">
                 <template v-if="AIModel == 'edit'"  v-slot:messageBtn="data">
-                  <div @click="ying">
+                  <div @click="applyResults(data.data)">
                     应用
                     应用
                   </div>
                   </div>
                 </template>
                 </template>
@@ -470,7 +478,8 @@ export default {
         editTechnicalContent:{},
         editTechnicalContent:{},
         editTechnical:false,
         editTechnical:false,
         showHistory:false,
         showHistory:false,
-        AIModel:'chat'
+        AIModel:'chat',
+        styleShow:'style1'
     };
     };
   },
   },
   watch: {
   watch: {
@@ -484,15 +493,12 @@ export default {
     
     
   },
   },
   methods: {
   methods: {
-    slotDataFunction(){
-      return (val)=>{
-        let obj = {}
-        try{
-          obj = JSON.parse(val)
-        }catch{}
-        return obj
-      }
-      
+    slotDataFunction(val){
+      let obj = {}
+      try{
+        obj = JSON.parse(val)
+      }catch{}
+      return obj
     },
     },
     getShowHistory(val){
     getShowHistory(val){
       this.showHistory = val
       this.showHistory = val
@@ -501,8 +507,10 @@ export default {
       this.AIModel = val
       this.AIModel = val
       if(this.AIModel == 'chat'){
       if(this.AIModel == 'chat'){
         this.chat_id = this.currentConversation.dialogueConversationId
         this.chat_id = this.currentConversation.dialogueConversationId
+        this.AIParams.type = 31
       }else if(this.AIModel == 'edit'){
       }else if(this.AIModel == 'edit'){
         this.chat_id = this.currentConversation.aiUpdateConversationId
         this.chat_id = this.currentConversation.aiUpdateConversationId
+        this.AIParams.type = 32
       }
       }
     },
     },
     addData(field,parentData){
     addData(field,parentData){
@@ -532,19 +540,46 @@ export default {
     },
     },
     delData(field,parentData,index){
     delData(field,parentData,index){
       parentData.splice(index,1)
       parentData.splice(index,1)
+      this.saveTechnicalContent()
+    },
+    applyResults(data){
+      var params = {
+        confessionSessionId:this.currentConversation.id,
+        discoveryResult:JSON.stringify(data)
+      }
+      this.$api.updateDiscoveryResult(params).then(response=>{
+        if(response.code == 200){
+          this.$message.success('应用成功')
+          this.technicalContent = data
+          if(this.editTechnical){
+            this.editTechnicalContent = JSON.parse(JSON.stringify(data))
+          }
+        }
+      }).catch(error=>{
+        
+      })
     },
     },
     saveTechnicalContent(){
     saveTechnicalContent(){
       var params = {
       var params = {
         confessionSessionId:this.currentConversation.id,
         confessionSessionId:this.currentConversation.id,
-        discoveryResult:JSON.stringify(this.editTechnicalContent)
+      }
+      if(this.editTechnical){
+        params.discoveryResult = JSON.stringify(this.editTechnicalContent)
+      }else{
+        params.discoveryResult = JSON.stringify(this.technicalContent)
       }
       }
       this.$api.updateDiscoveryResult(params).then(response=>{
       this.$api.updateDiscoveryResult(params).then(response=>{
         if(response.code == 200){
         if(response.code == 200){
           this.$message.success('修改成功')
           this.$message.success('修改成功')
-          this.technicalContent = JSON.parse(JSON.stringify(this.editTechnicalContent))
+          if(this.editTechnical){
+            this.technicalContent = JSON.parse(JSON.stringify(this.editTechnicalContent))
+          }
         }
         }
       }).catch(error=>{
       }).catch(error=>{
-        this.editTechnicalContent = JSON.parse(JSON.stringify(this.technicalContent))
+        if(this.editTechnical){
+          this.editTechnicalContent = JSON.parse(JSON.stringify(this.technicalContent))
+        }
+        
       })
       })
       
       
     },
     },
@@ -596,13 +631,14 @@ export default {
       this.queryConfessionSession(true)
       this.queryConfessionSession(true)
     },
     },
     //切换会话
     //切换会话
-    async changeConversation(obj){
+    async changeConversation(obj,generate){
       if(obj.id == this.currentConversation.id){
       if(obj.id == this.currentConversation.id){
         this.currentConversation = obj
         this.currentConversation = obj
         return
         return
       }
       }
       this.currentConversation = obj
       this.currentConversation = obj
       this.AIParams.confessionSessionId = obj.id
       this.AIParams.confessionSessionId = obj.id
+      this.chat_id = ''
       if(this.AIModel == 'chat'){
       if(this.AIModel == 'chat'){
         this.AIParams.type = 31
         this.AIParams.type = 31
       }else if(this.AIModel == 'edit'){
       }else if(this.AIModel == 'edit'){
@@ -611,6 +647,8 @@ export default {
       this.$set(this,'addNewConversation',false)
       this.$set(this,'addNewConversation',false)
       if(!this.currentConversation.discoveryResult){
       if(!this.currentConversation.discoveryResult){
         await this.getDiscoveryResultDetail()
         await this.getDiscoveryResultDetail()
+      }else{
+        this.changeAIModel(this.AIModel)
       }
       }
       if(this.currentConversation.discoveryFiles && this.currentConversation.discoveryFiles.length){
       if(this.currentConversation.discoveryFiles && this.currentConversation.discoveryFiles.length){
         this.confession = this.currentConversation.discoveryFiles[0]
         this.confession = this.currentConversation.discoveryFiles[0]
@@ -618,8 +656,32 @@ export default {
         this.confession = {}
         this.confession = {}
       }
       }
       this.getOption()
       this.getOption()
+      if(generate){
+        this.generateDiscoveryResult()
+      }
       
       
     },
     },
+    async generateDiscoveryResult(){
+      let params = {
+        confessionSessionId:this.currentConversation.id
+      }
+      this.generateLoading = true
+      const loading = this.$loading({
+        lock: true,
+        text: '技术交底书信息提取中...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      await this.$api.generateDiscoveryResult(params).then(response=>{
+        if(response.code == 200){
+          this.currentConversation.discoveryResult = response.data
+          this.technicalContent=response.data
+          loading.close();
+        }
+      }).catch(error=>{
+        loading.close();
+      })
+    },
      //上传技术交底书
      //上传技术交底书
      onChangeConfession(file){
      onChangeConfession(file){
         let formData = new FormData()
         let formData = new FormData()
@@ -636,7 +698,7 @@ export default {
               this.$refs.uploadConfession.clearFiles()
               this.$refs.uploadConfession.clearFiles()
               var params = {
               var params = {
                 fileGuid:guid,
                 fileGuid:guid,
-                type:3
+                type:4
               }
               }
               this.$api.addConfessionSession(params).then(response=>{
               this.$api.addConfessionSession(params).then(response=>{
                 if(response.code == 200){
                 if(response.code == 200){
@@ -644,7 +706,7 @@ export default {
                   this.$message.success('文件上传成功')
                   this.$message.success('文件上传成功')
                   
                   
                   //查询技术交底书会话记录
                   //查询技术交底书会话记录
-                  this.queryConfessionSession()
+                  this.queryConfessionSession(false,true)
                 }
                 }
               }).catch(error=>{
               }).catch(error=>{
                 message.close()
                 message.close()
@@ -653,16 +715,16 @@ export default {
         })
         })
     },
     },
     //查询技术交底书会话记录
     //查询技术交底书会话记录
-    queryConfessionSession(onlyQuery){
+    queryConfessionSession(onlyQuery,generate){
       var params = {
       var params = {
-        type:3
+        type:4
       }
       }
       this.$api.queryConfessionSession(params).then(response=>{
       this.$api.queryConfessionSession(params).then(response=>{
         if(response.code == 200){
         if(response.code == 200){
           this.confessionSessionList = response.data || []
           this.confessionSessionList = response.data || []
           if(!onlyQuery && this.confessionSessionList.length>0){
           if(!onlyQuery && this.confessionSessionList.length>0){
             let obj = this.confessionSessionList[0]
             let obj = this.confessionSessionList[0]
-            this.changeConversation(obj)
+            this.changeConversation(obj,generate)
           }else if(this.confessionSessionList.length==0){
           }else if(this.confessionSessionList.length==0){
             this.currentConversation = {}
             this.currentConversation = {}
             this.AIParams.confessionSessionId = null
             this.AIParams.confessionSessionId = null
@@ -745,15 +807,15 @@ export default {
           this.changeAIModel(this.AIModel)
           this.changeAIModel(this.AIModel)
         }
         }
       }).catch(error=>{
       }).catch(error=>{
-        // this.technicalContent = {
-        //   technicalField:'',
-        //   technicalCase:[],
-        //   technicalFeature:[],
-        //   background:'',
-        //   termsExplanation:[],
-        //   claimSuggestions:{},
-        //   additionalSuggestions:''
-        // }
+        this.technicalContent = {
+          technicalField:'',
+          technicalCase:[],
+          technicalFeature:[],
+          background:'',
+          termsExplanation:[],
+          claimSuggestions:{},
+          additionalSuggestions:''
+        }
       })
       })
     },
     },
 
 
@@ -801,7 +863,7 @@ export default {
       height: calc(100% - 40px);
       height: calc(100% - 40px);
     }
     }
     .left{
     .left{
-        width:40%;
+        width:45%;
         height:calc(100% - 0px);
         height:calc(100% - 0px);
         padding-right: 10px;
         padding-right: 10px;
         text-align: center;
         text-align: center;
@@ -836,7 +898,7 @@ export default {
         background: #e6e6e6;
         background: #e6e6e6;
     }
     }
     .right{
     .right{
-      width:calc(100% - 40% - 2px);
+      width:calc(100% - 45% - 2px);
       min-width: 450px;
       min-width: 450px;
       height:100%;
       height:100%;
       padding-left: 10px;
       padding-left: 10px;
@@ -845,9 +907,12 @@ export default {
       position: relative;
       position: relative;
       .mainContent{
       .mainContent{
         width: calc(100% - 10px);
         width: calc(100% - 10px);
+        min-width: 400px;
         padding:0 10px;
         padding:0 10px;
         height:calc(100% - 0px);
         height:calc(100% - 0px);
         overflow-y: auto;
         overflow-y: auto;
+        line-height: 1.8em;
+        font-size: 16px;
         &>*{
         &>*{
           padding: 5px 0;
           padding: 5px 0;
         }
         }
@@ -867,13 +932,14 @@ export default {
         
         
         .title{
         .title{
           font-weight: bolder;
           font-weight: bolder;
-          font-size: 18px;
+          font-size: 20px;
           height:20px;
           height:20px;
           background: white;
           background: white;
           padding: 2px;
           padding: 2px;
           position: absolute;
           position: absolute;
-          top: -17px;
+          top: -19px;
           left: 10px;
           left: 10px;
+          color: #3498db;
         }
         }
         .childTitle{
         .childTitle{
           font-weight: bolder;
           font-weight: bolder;
@@ -983,10 +1049,10 @@ export default {
             border:1px dashed  black;
             border:1px dashed  black;
             padding: 10px;
             padding: 10px;
             .title{
             .title{
-              font-size: 16px;
+              font-size: 18px;
             }
             }
             .text{
             .text{
-              font-size: 14px;
+              font-size: 16px;
             }
             }
             .technical_means_item{
             .technical_means_item{
               
               
@@ -1042,4 +1108,91 @@ export default {
 
 
     }
     }
 }
 }
+</style>
+<style lang="scss" scoped>
+  .style2{
+    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+    .right{
+      background:#f3f5f8;
+    }
+    .content_box{
+      background: white;
+      border-radius: 10px;
+      box-shadow: 0 4px 15px rgb(0 0 0 / 5%) !important;
+      transition: transform 0.3s ease;
+      font-size: 16px;
+      margin-bottom: 20px !important;
+      .title{
+        position: unset !important;
+        height: auto !important;
+        padding: 0 !important;
+      }
+      .text{
+        font-size: 16px !important;
+      }
+      .technical_means{
+        border: none !important;
+        margin-top: 0 !important;
+        background: #ecf0f1;
+        border-radius: 10px;
+        .title{
+          background: unset;
+        }
+      }
+      .layout_suggestions{
+        
+      }
+      .terminology_explanation{
+        .childTitle{
+          font-size: 18px !important;
+        }
+      }
+    }
+  }
+  .style3{
+    .content_box{
+      box-shadow: unset !important;
+      font-size: 16px;
+      margin-bottom: 0px !important;
+      .title{
+        position: unset !important;
+        height: auto !important;
+        padding: 0 !important;
+      }
+      .text{
+        font-size: 16px !important;
+      }
+      .technical_means{
+        border: none !important;
+        margin-top: 0 !important;
+        padding-bottom: 0 !important;
+        padding-top: 0 !important;
+        .title{
+          background: unset;
+        }
+      }
+      .layout_suggestions{
+        p{
+          // margin: 0 !important;
+        }
+      }
+      .terminology_explanation{
+        .childTitle{
+          font-size: 18px !important;
+        }
+      }
+    }
+    hr{
+      display: none !important;
+    }
+  }
+</style>
+<style lang="scss">
+  .style3{
+    .layout_suggestions{
+      p{
+        margin-top: 0 !important;
+      }
+    }
+  }
 </style>
 </style>