diff --git a/src/App.vue b/src/App.vue
index 954759c..b5fa94f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,9 @@
     <Frame />
     <div class="main">
       <Aside />
-      <transition-group name="fade">
+      <transition>
         <Film key="film" />
-      </transition-group>
+      </transition>
     </div>
   </div>
 </template>
@@ -20,7 +20,6 @@ export default {
 @import './assets/scss/theme.scss';
 html, body, #app{
   height: 100%;
-  border-radius: 10px;
   overflow: hidden;
 }
 #app{
diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss
new file mode 100644
index 0000000..2311053
--- /dev/null
+++ b/src/assets/scss/animation.scss
@@ -0,0 +1,100 @@
+.AniSlideRight-enter-active, .AniSlideRight-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniSlideRight-enter, .AniSlideRight-leave-to{
+  transform: translateX(50%);
+  opacity: 0;
+}
+.AniRotate-enter-active, .AniRotate-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniRotate-enter, .AniRotate-leave-to{
+  transform: rotate(-180deg);
+  opacity: 0;
+}
+.AniSlideUp-enter-active, .AniSlideUp-leave-active{
+  transition: all 0.5s ease-in-out;
+}
+.AniSlideUp-enter, .AniSlideUp-leave-to{
+  transform: translateY(50%);
+  opacity: 0;
+}
+
+@keyframes shake-bottom {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 100%;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}
+@keyframes shake-top {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 50% 0;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}
+@keyframes shake-br {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: 100% 100%;
+  }
+  10% {
+    transform: rotate(2deg);
+  }
+  20%,
+  40%,
+  60% {
+    transform: rotate(-4deg);
+  }
+  30%,
+  50%,
+  70% {
+    transform: rotate(4deg);
+  }
+  80% {
+    transform: rotate(-2deg);
+  }
+  90% {
+    transform: rotate(2deg);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index fb59969..6de7d4b 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -7,13 +7,15 @@
   --l-c-9: #823aa099;
   --l-f-1: #808695;
   --l-f-2: #332f5c;
-  --l-bgc-1: #ffffffff;
+  --l-bgc-1: #ffffff;
   --l-bgc-2: #f2f6f9;
   --l-bsc: 0 1px 3px #8e8da233, 0 1px 2px #8e8da244;
   --l-bsc-hover: 0 14px 28px #8e8da255, 0 10px 10px #8e8da244;
   --l-bsc-2: 0 -4px 23px 0 #8e8da233;
+  --l-bsc-3: 0 0px 14px #8e8da255, 0 0px 10px #8e8da244;
   --l-bsc-scroll: inset 0 0 5px #823aa000;
 }
 
 @import './theme/Light.scss';
+@import './animation.scss';
 @import './style.scss';
diff --git a/src/assets/scss/theme/Light.scss b/src/assets/scss/theme/Light.scss
index 635510b..78e5293 100644
--- a/src/assets/scss/theme/Light.scss
+++ b/src/assets/scss/theme/Light.scss
@@ -76,4 +76,22 @@
       }
     }
   }
+  .zy-film{
+    box-shadow: var(--l-bsc-3);
+    color: var(--l-f-1);
+    .btn-placeholder{
+      box-shadow: var(--l-bsc);
+      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+      &:hover{
+        box-shadow: var(--l-bsc-hover);
+      }
+    }
+    .btn-list{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc-hover);
+      li:hover{
+        background-color: var(--l-bgc-2);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/background.js b/src/background.js
index 86535da..f780c9c 100644
--- a/src/background.js
+++ b/src/background.js
@@ -21,7 +21,6 @@ function createWindow () {
     height: 720,
     frame: false,
     resizable: true,
-    transparent: true,
     webPreferences: {
       webSecurity: false,
       enableRemoteModule: true,
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index dcd0cd8..2cdfe31 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -56,13 +56,15 @@ export default {
   align-items: center;
   flex-direction: column;
   justify-content: center;
+  -webkit-app-region: drag;
   span{
     width: 100%;
     height: 60px;
     display: flex;
+    cursor: pointer;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
+    -webkit-app-region: no-drag;
     &:hover, &.active{
       .icon{
         stroke-width: 2;
diff --git a/src/components/Film.vue b/src/components/Film.vue
index c08ee9c..fd0e5f6 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -1,13 +1,88 @@
 <template>
-  <div class="zy-film">film</div>
+  <div class="zy-film">
+    <div class="header">
+      <div class="btn-select" @mouseleave="show.site = false">
+        <div class="btn-placeholder" @click="show.site = true">OK资源网</div>
+        <transition name="AniSlideUp">
+          <div class="btn-list zy-scrollbar" v-show="show.site">
+            <ul>
+              <li>OK资源网</li>
+              <li>最大资源网</li>
+              <li>卧龙资源网</li>
+            </ul>
+          </div>
+        </transition>
+      </div>
+    </div>
+    <div class="body"></div>
+  </div>
 </template>
 <script>
 export default {
-  name: 'Film'
+  name: 'Film',
+  data () {
+    return {
+      show: {
+        site: false
+      }
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .zy-film{
   flex: 1;
+  margin: 0 10px 10px 0;
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .header{
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .btn-select{
+      width: 180px;
+      height: 34px;
+      cursor: pointer;
+      position: relative;
+      font-size: 14px;
+      margin-left: 10px;
+      .btn-placeholder{
+        width: 180px;
+        height: 34px;
+        line-height: 34px;
+        padding-left: 10px;
+      }
+      .btn-list{
+        width: 180px;
+        position: absolute;
+        top: 34px;
+        left: 0;
+        z-index: 2;
+        max-height: 340px;
+        overflow: hidden;
+        &:hover{
+          overflow: auto;
+        }
+        ul{
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          li{
+            height: 34px;
+            line-height: 34px;
+            padding-left: 10px;
+            &.active{}
+          }
+        }
+      }
+    }
+  }
+  .body{
+    flex: 1;
+    // border: 1px solid #000;
+  }
 }
 </style>
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
index 7955f52..c0b04f5 100644
--- a/src/components/Frame.vue
+++ b/src/components/Frame.vue
@@ -13,7 +13,7 @@
         <span class="btn" @click="searchBtnClick()">
           <IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
         </span>
-        <transition name="slide">
+        <transition name="AniSlideRight">
           <input
             v-if="search"
             v-model.trim="searchTxt"
@@ -23,10 +23,10 @@
             @keyup.enter="searchEvent()"
             type="text">
         </transition>
-        <transition name="rotate">
+        <transition name="AniRotate">
           <IconClose v-if="searchTxt.length > 0" class="icon icon-search-close" @click="clearSearchTxt()" />
         </transition>
-        <transition name="slideUp">
+        <transition name="AniSlideUp">
           <div v-if="search" class="search-box zy-scrollbar">
             <ul>
               <li v-for="(i, j) in searchHistoryList" :key="j" @click="searchHistoryClick(i)">{{i}}</li>
@@ -163,32 +163,6 @@ export default {
       &:hover{
         .icon{
           animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
-          @keyframes shake-bottom {
-            0%,
-            100% {
-              transform: rotate(0deg);
-              transform-origin: 50% 100%;
-            }
-            10% {
-              transform: rotate(2deg);
-            }
-            20%,
-            40%,
-            60% {
-              transform: rotate(-4deg);
-            }
-            30%,
-            50%,
-            70% {
-              transform: rotate(4deg);
-            }
-            80% {
-              transform: rotate(-2deg);
-            }
-            90% {
-              transform: rotate(2deg);
-            }
-          }
         }
       }
     }
@@ -196,32 +170,6 @@ export default {
       &:hover{
         .icon{
           animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
-          @keyframes shake-top {
-            0%,
-            100% {
-              transform: rotate(0deg);
-              transform-origin: 50% 0;
-            }
-            10% {
-              transform: rotate(2deg);
-            }
-            20%,
-            40%,
-            60% {
-              transform: rotate(-4deg);
-            }
-            30%,
-            50%,
-            70% {
-              transform: rotate(4deg);
-            }
-            80% {
-              transform: rotate(-2deg);
-            }
-            90% {
-              transform: rotate(2deg);
-            }
-          }
         }
       }
     }
@@ -236,32 +184,6 @@ export default {
         &:hover{
           .icon{
             animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
-            @keyframes shake-br {
-              0%,
-              100% {
-                transform: rotate(0deg);
-                transform-origin: 100% 100%;
-              }
-              10% {
-                transform: rotate(2deg);
-              }
-              20%,
-              40%,
-              60% {
-                transform: rotate(-4deg);
-              }
-              30%,
-              50%,
-              70% {
-                transform: rotate(4deg);
-              }
-              80% {
-                transform: rotate(-2deg);
-              }
-              90% {
-                transform: rotate(2deg);
-              }
-            }
           }
         }
         .active{
@@ -292,6 +214,7 @@ export default {
         height: auto;
         max-height: 172px;
         overflow-y: hidden;
+        z-index: 3;
         &:hover{
           overflow-y: auto;
         }
@@ -318,27 +241,6 @@ export default {
           }
         }
       }
-      .slide-enter-active, .slide-leave-active{
-        transition: all 0.5s ease-in-out;
-      }
-      .slide-enter, .slide-leave-to{
-        transform: translateX(50%);
-        opacity: 0;
-      }
-      .rotate-enter-active, .rotate-leave-active{
-        transition: all 0.5s ease-in-out;
-      }
-      .rotate-enter, .rotate-leave-to{
-        transform: rotate(-180deg);
-        opacity: 0;
-      }
-      .slideUp-enter-active, .slideUp-leave-active{
-        transition: all 0.5s ease-in-out;
-      }
-      .slideUp-enter, .slideUp-leave-to{
-        transform: translateY(50%);
-        opacity: 0;
-      }
     }
   }
   .right{