wei

src/view/antibody/index.vue

@@ -25,6 +25,29 @@
                 </el-table>
             </template>
         </div>
+        <div class="articleMove">
+            <template>
+                <el-table
+                    :data="overView"
+                    stripe
+                    empty-text="Not Date"
+                    style="width: 100%"
+                    @row-click="gotoArticle">
+                    <el-table-column prop="catalog" :label="$t('AntibodyDatabase.CatNo')" />
+                    <el-table-column prop="name" :label="$t('AntibodyDatabase.AntibodyName')" />
+                    <el-table-column prop="target" :label="$t('AntibodyDatabase.Target')" >
+                      <template slot-scope="scope">
+                        <!-- <span v-for="(one, i) in scope.row.targetList" :key="i">
+                          {{ one }}
+                        </span> -->
+                        <span>{{ $util.targetDictionaries(scope.row.target) }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="moa" :label="$t('AntibodyDatabase.MOA')" />
+                    <el-table-column prop="company" :label="$t('AntibodyDatabase.Inventor')" />
+                </el-table>
+            </template>
+        </div>
     </div>
   </template>
 <script>
@@ -96,6 +119,40 @@ export default {
             cursor: pointer;
         }
       }
+      .articleMove{
+        display: none;
+      }
+    }
+  }
+  @media screen and (min-width: 0px) and (max-width: 750px) {
+    .box {
+      .list_title{
+        width: 100%;
+        padding: 0.15rem 0.2rem;
+        box-sizing: border-box;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      .article{
+        display: none;
+      }
+      .articleMove /deep/{
+        width: 100%;
+        padding: 0 0.2rem 0.15rem;
+        box-sizing: border-box;
+        .cell{
+          color: #000;
+          font-size: 0.1rem;
+        }
+        .el-table__row td{
+            background-color: #fff !important;
+            cursor: pointer;
+        }
+        .el-table__row--striped td{
+            background-color: #F0FAFE !important;
+            cursor: pointer;
+        }
+      }
     }
   }
   </style>

src/view/article/index.vue

@@ -27,6 +27,31 @@
                 </el-table>
             </template>
         </div>
+        <div class="article_boxMove">
+            <template>
+                <el-table
+                    :data="list"
+                    stripe
+                    empty-text="Not Date"
+                    style="width: 100%"
+                    @row-click="gotoArticle">
+                    <el-table-column type="index" :label="$t('RelatedArticles.No')"  width="40" show-overflow-tooltip/>
+                    <el-table-column prop="catalog" :label="$t('RelatedArticles.CatNo')" width="60"/>
+                    <el-table-column prop="company" :label="$t('RelatedArticles.Inventor')" width="60"/>
+                    <el-table-column
+                        prop="moa"
+                        :label="$t('RelatedArticles.MOA')"
+                        :filters="filters"
+                        :filter-method="filterHandler"
+                        width="60"
+                        >
+                    </el-table-column>
+                    <el-table-column prop="country" :label="$t('RelatedArticles.Country')" width="60"/>
+                    <el-table-column prop="name" :label="$t('RelatedArticles.AntibodyName')" width="60"/>
+                    <el-table-column prop="articleTitle" :label="$t('RelatedArticles.ArticleTitle')" width="80"/>
+                </el-table>
+            </template>
+        </div>
     </div>
   </template>
 <script>
@@ -119,6 +144,41 @@ export default {
             cursor: pointer;
         }
       }
+      .article_boxMove{
+        display: none;
+      }
+    }
+  }
+  @media screen and (min-width: 0px) and (max-width: 750px) {
+    .box {
+      .list_title{
+        width: 100%;
+        padding: 0.15rem 0.2rem;
+        box-sizing: border-box;
+        font-size: 0.14rem;
+        font-weight: 600;
+      }
+      .article_box{
+        display: none;
+      }
+      .article_boxMove /deep/{
+        padding: 0 0.2rem;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0 auto 0.3rem;
+        .cell{
+          font-size: 0.08rem;
+          color: #000;
+        }
+        .el-table__row td{
+            background-color: #fff !important;
+            cursor: pointer;
+        }
+        .el-table__row--striped td{
+            background-color: #F0FAFE !important;
+            cursor: pointer;
+        }
+      }
     }
   }
   </style>

src/view/articleDetail/index.vue

@@ -77,4 +77,37 @@ export default {
       }
     }
   }
+  @media screen and (min-width: 0px) and (max-width: 750px) {
+    .box {
+      .article{
+        width: 100%;
+        padding: 0.15rem 0.2rem;
+        box-sizing: border-box;
+        .return-news{
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.2rem;
+          cursor: pointer;
+          .return-img{
+            width: 16px;
+          }
+          .return-text{
+            font-size: 14px;
+            color: #333333;
+            line-height: 1;
+            margin-left: 0.1rem;
+          }
+        }
+        .article_title{
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 0.14rem;
+        }
+        .article_text{
+          font-size: 14px;
+          line-height: 24px;
+        }
+      }
+    }
+  }
 </style>