diff --git a/src/components/home.vue b/src/components/home.vue
index 70cdd77..b82311f 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -41,7 +41,7 @@
             <!-- 爱情买卖 -->
             <li @click="$router.push({path: '/love'})">
               <div class="my-menu">
-                💋 <span>预测研发流程</span>
+                🥼 <span>预测研发流程</span>
               </div>
             </li>
 
diff --git a/src/components/love.vue b/src/components/love.vue
index ea13689..6b71e89 100644
--- a/src/components/love.vue
+++ b/src/components/love.vue
@@ -26,6 +26,7 @@
       </div>
     </div>
 
+
     <!-- 内容 -->
     <div class="love-container">
 
@@ -102,6 +103,41 @@
       </div>
 
       <div style="padding: 0 20px">
+
+
+        <div style="width: 350px ;padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out" class="card-wrap card-content shadow-box-mini background-opacity wow" v-show="card !== 4">
+          <div style="display: flex; flex-wrap: wrap">
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px; white-space: nowrap;">
+                预测DDI
+              </div>
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <input class="ais-SearchBox-input" type="text"
+                     v-model="smiles1"
+                     placeholder="请输入SMILES" maxlength="32">
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <input class="ais-SearchBox-input" type="text"
+                     v-model="smiles2"
+                     placeholder="请输入SMILES" maxlength="32">
+            </div>
+            <div style="flex-basis: 100%; margin-bottom: 10px;">
+              <div class="ais-SearchBox-input" style="background-color: white; padding: 6px; border-radius: 4px;border: none; text-align: center;">
+                {{predictResult}}
+              </div>
+            </div>
+
+            <div class="ais-SearchBox-submit" @click="handleQuery();" style="flex-basis: 100%;display: flex; justify-content: right; align-items: center;" >
+              <svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
+                <path d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z" fill="#51C492"></path>
+                <path d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z" fill="#FFFFFF"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+
         <!-- 卡片 -->
         <div class="card-wrap" v-show="card !== 4">
 
@@ -397,6 +433,8 @@
 
 <script>
 
+import {listTable1, predictReaction} from "@/utils/table1";
+
   const treeHole = () => import( "./common/treeHole");
   const comment = () => import( "./comment/comment");
   const myFooter = () => import( "./common/myFooter");
@@ -418,6 +456,9 @@
 
     data() {
       return {
+        predictResult:'type预测结果',
+        smiles1 :'',
+        smiles2 :'',
         userLove: {
           bgCover: "",
           manCover: "",
@@ -506,6 +547,17 @@
     },
 
     methods: {
+      /** 预测按钮操作 */
+      handleQuery() {
+        this.predictResult = '输入的SMILES错误，请重试';
+        predictReaction(this.smiles1, this.smiles2)
+          .then(prediction => {
+            this.predictResult = "type:"+prediction;
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
       selectSort(sort) {
         this.$emit("selectSort", sort);
       },
@@ -868,6 +920,19 @@
 
 <style scoped>
 
+.ais-SearchBox-input {
+  padding: 0 14px;
+  height: 30px;
+  width: calc(100% - 50px);
+  outline: 0;
+  border: 2px solid var(--lightGreen);
+  border-right: 0;
+  border-radius: 40px;
+  color: var(--maxGreyFont);
+  background: var(--white);
+  opacity: 0.5;
+}
+
   .love-container {
     background-image: linear-gradient(to right, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px), linear-gradient(to bottom, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px);
     background-size: 3rem 3rem;
diff --git a/src/utils/table1.js b/src/utils/table1.js
index 0075fa1..33a5bcf 100644
--- a/src/utils/table1.js
+++ b/src/utils/table1.js
@@ -31,6 +31,18 @@ export function selectDetails(drugName) {
     .catch(error => console.error(error));
 }
 
+/**
+ *
+ * @param drugName
+ * @returns {Promise<AxiosResponse<any> | void>}
+ */
+export function predictReaction(mol1, mol2) {
+  const url = 'http://127.0.0.1:5000/predict';
+  return axios.get(url, { params: { mol1, mol2 } })
+    .then(response => Number(response.data))
+    .catch(error => {console.error(error);throw new Error('请求出错');}); // 抛出错误
+}
+
 
 // 查询药品作用管理详细
 // export function getTable1(id) {