From 4024d63f26e2355a16c246cc28220ec7def20aae Mon Sep 17 00:00:00 2001
From: dhao2001 <dhao2001@outlook.com>
Date: Sat, 30 Apr 2022 21:47:45 +0800
Subject: [PATCH] Add link for NewsAlbumItem

---
 src/App.vue                      |  5 ++++-
 src/components/DetectResult.vue  |  8 +++-----
 src/components/NewsAlbum.vue     |  1 +
 src/components/NewsAlbumItem.vue | 11 ++++++++---
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f79ee19..6868131 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,7 @@ export default {
       showDetectResult: false,
       news: [
         {
+          link: "https://zhuanlan.zhihu.com/p/364111215",
           title: "一到春天就皮肤过敏瘙痒怎么办？掌握这几招立马止痒",
           image:
             "https://pic4.zhimg.com/v2-df56391f8128d2c8921d0b5112a51fa3_1440w.jpg?source=172ae18b",
@@ -49,6 +50,7 @@ export default {
           readMinutes: 5,
         },
         {
+          link: "https://zhuanlan.zhihu.com/p/68955803",
           title: "下雨天，皮肤就不用补水了吗？",
           image:
             "https://pic1.zhimg.com/v2-6bf489635811b1552320c23bd58392fd_1440w.jpg?source=172ae18b",
@@ -57,11 +59,12 @@ export default {
           readMinutes: 8,
         },
         {
+          link: "https://www.zhihu.com/question/495232227",
           title: "脸上经常长痘痘是什么原因导致的？",
           image:
             "https://pic2.zhimg.com/80/v2-598043efaf9de7e18ddc63a6a6e42a08_720w.jpg?source=1940ef5c",
           abstract:
-            "曾经的我，也是满脸痘痘的男人。现在的我，浑身肌肤嫩滑，吹弹可破。前方高能预警：文章很长，干货很干，全文没有多余的废话，请一定一定，耐心读完。",
+            "曾经的我，也是满脸痘痘的男人。现在的我，浑身肌肤嫩滑，吹弹可破。前方高能预警：文章很长，干货很干。",
           readMinutes: 12,
         },
       ],
diff --git a/src/components/DetectResult.vue b/src/components/DetectResult.vue
index af8d6ce..faf127e 100644
--- a/src/components/DetectResult.vue
+++ b/src/components/DetectResult.vue
@@ -2,16 +2,14 @@
   <section class="py-1 text-center container">
     <div class="row py-lg-3">
       <div class="col-lg-6 col-md-8 mx-auto">
-        <h1 class="mb-3 text-center">Detect Result</h1>
+        <h1 class="mb-3 text-center">检测结果</h1>
         <img
-          class="img-thumbnail my-2 w-25"
+          class="img-thumbnail my-2 w-50"
           :src="imageUrl"
           :alt="'Disease ' + diseaseName"
         />
         <h3 class="my-1">{{ diseaseName }}</h3>
-        <p class="my-1 lead text-muted">
-          Trustworthiness: {{ trustworthiness }}
-        </p>
+        <p class="my-1 lead text-muted">置信度: {{ trustworthiness }}</p>
       </div>
     </div>
   </section>
diff --git a/src/components/NewsAlbum.vue b/src/components/NewsAlbum.vue
index a0deffd..01614df 100644
--- a/src/components/NewsAlbum.vue
+++ b/src/components/NewsAlbum.vue
@@ -7,6 +7,7 @@
           v-for="n in NewsList"
           :key="n.id"
           :id="n.id"
+          :link="n.link"
           :title="n.title"
           :abstract="n.abstract"
           :image="n.image"
diff --git a/src/components/NewsAlbumItem.vue b/src/components/NewsAlbumItem.vue
index 244c497..ab5cb22 100644
--- a/src/components/NewsAlbumItem.vue
+++ b/src/components/NewsAlbumItem.vue
@@ -12,9 +12,12 @@
         <p class="card-text">{{ NewsAbstract }}</p>
         <div class="d-flex justify-content-between align-items-center">
           <div class="btn-group">
-            <button type="button" class="btn btn-sm btn-outline-secondary">
-              Read More...
-            </button>
+            <a
+              :href="NewsLink"
+              class="btn btn-sm btn-outline-secondary"
+              target="_blank"
+              >Read More...</a
+            >
           </div>
           <small class="text-muted">{{ NewsMinutesToRead }} mins</small>
         </div>
@@ -28,6 +31,7 @@ export default {
   data() {
     return {
       NewsId: this.id,
+      NewsLink: this.link,
       NewsTitle: this.title,
       NewsImage: this.image,
       NewsAbstract: this.abstract,
@@ -36,6 +40,7 @@ export default {
   },
   props: {
     id: { type: Number },
+    link: { type: String },
     title: { type: String },
     image: { type: String },
     abstract: { type: String },