From 0c8a100d1c783551b1cef0c43f9b103536522a96 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Tue, 29 Dec 2020 22:29:20 +0100
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=88=86=E7=B1=BB=E8=A2=AB?=
 =?UTF-8?q?=E9=80=89=E5=90=8E=E6=97=B6=E6=94=B9=E5=8F=98=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/theme/dark.scss  |  3 +++
 src/assets/scss/theme/green.scss |  3 +++
 src/assets/scss/theme/light.scss |  3 +++
 src/assets/scss/theme/pink.scss  |  3 +++
 src/components/Detail.vue        | 24 +++++++++++++++++++-----
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 641cae5..7c724ec 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -131,6 +131,9 @@
                 border-color: var(--d-c-8);
               }
             }
+            .selected {
+              background-color: var(--d-c-1);
+            }
           }
         }
       }
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index bb13b3e..2a1291d 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -131,6 +131,9 @@
                 border-color: var(--g-c-8);
               }
             }
+            .selected {
+              background-color: var(--g-c-1);
+            }
           }
         }
       }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 5944db5..0a738f4 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -131,6 +131,9 @@
                 border-color: var(--l-c-8);
               }
             }
+            .selected {
+              background-color: var(--l-c-1);
+            }
           }
         }
       }
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index 0f4e353..69cfa72 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -131,6 +131,9 @@
                 border-color: var(--p-c-8);
               }
             }
+            .selected {
+              background-color: var(--p-c-1);
+            }
           }
         }
       }
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index e21917f..a23f6f2 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -54,12 +54,10 @@
         <div
           class="desc" v-show="info.des">{{info.des}}
         </div>
-        <div class="m3u8" v-if="videoFullList.length > 1">
-          <div class="box">
-            <span v-for="(i, j) in videoFullList" :key="j" @click="updateVideoList(i)">{{i.flag}}</span>
-          </div>
-        </div>
         <div class="m3u8">
+          <div class="box">
+            <span v-bind:class="{ selected: i.flag === videoFlag }" v-for="(i, j) in videoFullList" :key="j" @click="updateVideoList(i)">{{i.flag}}</span>
+          </div>
           <div class="box">
             <span v-for="(i, j) in videoList" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
           </div>
@@ -133,6 +131,13 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_VIEW', 'SET_VIDEO', 'SET_DETAIL', 'SET_SHARE']),
+    addClass (flag) {
+      if (flag === this.videoFlag) {
+        return 'selectedBox'
+      } else {
+        return 'box'
+      }
+    },
     close () {
       this.detail.show = false
     },
@@ -407,6 +412,15 @@ export default {
           margin: 6px 10px 0px 0px;
           padding: 8px 22px;
         }
+        .selected {
+          display: inline-block;
+          font-size: 12px;
+          border: 1px solid;
+          border-radius: 2px;
+          cursor: pointer;
+          margin: 6px 10px 0px 0px;
+          padding: 8px 22px;
+        }
       }
     }
   }