Merge pull request #18 from lsqy/dev

Dev
lsqy · Aug 18, 2019 · d316664 · d316664
2 parents 1d58eb4 + e6defca
commit d316664
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 35 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -30,8 +30,8 @@ class App extends Component {
   config: Config = {
     pages: [
       'pages/my/index',
-      'pages/search/index',
       'pages/searchResult/index',
+      'pages/search/index',
       // 'pages/search/index',
       'pages/index/index',
       'pages/songDetail/index',

diff --git a/src/base.scss b/src/base.scss
@@ -1 +1,8 @@
-$primary-color: #d43c33;
+$primary-color: #d43c33;
+@mixin text-ellipsis {
+  overflow: hidden;
+  /*文本不会换行*/
+  white-space: nowrap;
+  /*当文本溢出包含元素时，以省略号表示超出的文本*/
+  text-overflow: ellipsis;
+}
diff --git a/src/pages/searchResult/index.scss b/src/pages/searchResult/index.scss
@@ -1,33 +1,81 @@
-.seaechResult_container {
+@import '../../base.scss';
+.searchResult_container {
   &.hasMusicBox {
     padding-bottom: 120px;
   }
-  .seaechResult__music {
-    padding: 10px 30px;
+  .search_content {
+    padding: 108px 36px 24px 36px;
+    height: 100%;
+    box-sizing: border-box;
+    .search_content__title {
+      font-size: 38px;
+      font-weight: 700;
+      padding: 20px 0;
+    }
+    .search_content__more {
+      text-align: center;
+      font-size: 24px;
+      line-height: 50px;
+      padding: 15px 0;
+      color: #888888;
+    }
+  }
+  .searchResult__music {
+    padding: 10px 30px 10px 0;
     display: flex;
     align-items: center;
     width: 100%;
     box-sizing: border-box;
-    .seaechResult__music__info {
+    border-bottom: 1px solid #eeeeee;
+    .searchResult__music__info {
       flex: 1;
       overflow: hidden;
-      .seaechResult__music__info__name {
+      .searchResult__music__info__name {
         font-size: 34px;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .seaechResult__music__info__desc {
+      .searchResult__music__info__desc {
         font-size: 24px;
         color: #888888;
         margin-top: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
-    .seaechResult__music__icon {
+    .searchResult__music__icon {
       font-size: 30px;
       color: #dddddd;
       padding: 40px 0 40px 80px;
     }
   }
+  .search_content__playList__item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .search_content__playList__item__cover {
+      width: 150px;
+      height: 150px;
+      border-radius: 10px;
+      margin-right: 20px;
+      display: block;
+    }
+    .search_content__playList__item__info {
+      flex: 1;
+      .search_content__playList__item__info__title {
+        width: 95%;
+        @include text-ellipsis;
+        margin-bottom: 10px;
+        font-size: 30px;
+      }
+      .search_content__playList__item__info__desc {
+        font-size: 20px;
+        color: #bbbbbb;
+        display: flex;
+      }
+      .search_content__playList__item__info__desc__nickname {
+        margin: 0 10px;
+      }
+    }
+  }
 }