开始做预测功能

src/assets/css/index.css

@@ -43,8 +43,8 @@ body {
 
 /* 模块化背景色及透明度 */
 .background-opacity {
-    /*background: var(--background);*/
+    background-color: var(--background);
-    /*opacity: 0.88;*/
+    opacity: 0.88;
 }
 
 .my-el-image {

src/components/index.vue

@@ -73,7 +73,7 @@
         <div class="page-container-wrap">
           <div class="page-container">
             <div class="aside-content" v-if="showAside">
-              <myAside @selectSort="selectSort" @selectArticle="selectArticle"></myAside>
+              <myAside ref="myAsideRef" @selectSort="selectSort" @selectArticle="selectArticle"></myAside>
             </div>
             <div class="recent-posts">
               <div class="announcement background-opacity">
@@ -88,10 +88,8 @@
               <articleList :articleList="articles"></articleList>
 
               <template>
-                <div class=" pagination-wrap">
+                <div class="shadow-box pagination-wrap background-opacity">
                   <el-table :data="table1List">
-<!--                    <el-table-column prop="drug1" label="药品A"></el-table-column>-->
-<!--                    <el-table-column prop="drug2" label="药品B"></el-table-column>-->
                     <el-table-column label="药品A">
                       <template slot-scope="{ row }">
                         <span  @click="selectDrugDetails(row.drug1)">{{ row.drug1 }}</span>
@@ -102,25 +100,12 @@
                         <span @click="selectDrugDetails(row.drug2)">{{ row.drug2 }}</span>
                       </template>
                     </el-table-column>
-
                     <el-table-column prop="reaction" label="相互作用效果"></el-table-column>
                   </el-table>
-<!--                  <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
-<!--                    下一页-->
-<!--                  </div>-->
-<!--                  <pagination-->
-<!--                    v-show="total>0"-->
-<!--                    :total="total"-->
-<!--                    :page.sync="queryParams.pageNum"-->
-<!--                    :limit.sync="queryParams.pageSize"-->
-<!--                    @pagination="getList"-->
-<!--                  />-->
-
-
                 </div>
 
                 <!--分页组件-->
-                <div class="block">
+                <div class="block background-opacity">
                   <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -211,6 +196,9 @@ import {listTable1, listTotal, selectDetails} from "@/utils/table1";
     },
 
     methods: {
+      selectDrugDetails(drugName) {
+        this.$refs.myAsideRef.updateDrugName(drugName);
+      },
       /** 查询药品作用列表条数 */
       getTotal() {
         listTotal(this.queryParams).then(response => {

src/components/myAside.vue

@@ -98,7 +98,7 @@
          style="margin-top: 30px;padding: 25px 25px 5px;border-radius: 10px;animation: hideToShow 1s ease-in-out">
       <div class="card-content2-title">
         <i class="el-icon-folder-opened card-content2-icon"></i>
-        <span>药品详情</span>
+        <span>药品简述</span>
       </div>
 <!--      <div v-for="(sort, index) in sortInfo"-->
 <!--           :key="index"-->
@@ -127,7 +127,8 @@
               </div>
             </div>
             <div style="height: 36px;line-height: 36px">
-              {{ item.admire }}元
+<!--              {{ item.admire }}元-->
+              500元
             </div>
           </div>
         </vue-seamless-scroll>
@@ -191,6 +192,10 @@
       this.getAdmire();
     },
     methods: {
+      updateDrugName(drugName) {
+        this.drugName = drugName;
+        this.selectDrugDetails();
+      },
       selectDrugDetails(){
         selectDetails(this.drugName).then(response => {
           this.drugDetails = response;