'冲冲冲'

README.md

@@ -26,7 +26,7 @@
 ### TODO
   - [ ] 修复与喜马拉雅Lite的颜色差距
   - [ ] 修复分类页的侧边栏选择项的滑动计算逻辑
-  - [ ] 实现详情页的背景色根据图片的颜色改变而改变
+  - [x] 实现详情页的背景色虚化
   - [x] 实现搜索页
   - [ ] 实现节目详情页面的一些小功能
   - [x] 实现榜单页面的下拉选项点击选择功能

pages/details/details.wxml

@@ -2,10 +2,13 @@
   title和背景 
   注：这部分的背景色还没有处理好
 -->
-<view class="toptitlebar" style="background:url({{imgurl}}) no-repeat;background-size:100% 100%">
+<view class="toptitlebar">
+    <!-- 背景虚化层 -->
+    <view class="bg" style="background:url({{imgurl}}); background-size: 100% 100%; background-repeat: no-repeat;"></view>
+    <!-- 内容 -->
     <view class="baritem" wx:for="{{performanceInfo}}" wx:key="index">
       <view class="baritemtop">
-        <view class="themebgimg" style="background:url({{item.imgurl}}) background-size:100% 100%"></view>
+        <view class="themebgimg" style="background:url({{item.imgurl}}); background-size:100% 100%"></view>
         <view class="themeinfo">
           <view class="themetitle">{{item.title}}</view>
           <view class="themeauthor">

pages/details/details.wxss

@@ -2,22 +2,21 @@
   width: 100%;
   height: 410rpx;
   overflow: hidden;
+  position: relative;
 }
-
-.Performance {
+/* 背景虚化层 */
+.bg{
   width: 100%;
-  height: 500rpx;
-  border-top-left-radius: 20rpx;
-  border-top-right-radius: 20rpx;
-  position: relative;
-  top: -10rpx;
+  height: 410rpx;
+  filter: blur(15rpx);
 }
-
 .baritem {
   width: 100%;
   height: 400rpx;
   margin-top: 50rpx;
   padding: 20rpx 0rpx;
+  position: absolute;
+  top: 0rpx;
 }
 
 .baritemtop {
@@ -98,6 +97,14 @@
   background: orangered;
 }
 
+.Performance {
+  width: 100%;
+  height: 500rpx;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  position: relative;
+  top: -10rpx;
+}
 .selectbar {
   width: 100%;
   height: 100rpx;

pages/index/bangdan/bangdan.wxml

@@ -1,3 +1,5 @@
+<!-- 因为其他几个页面和榜单是一样的所以其他3个页面就都用的这一个界面 -->
+
 <block wx:if="{{showCover}}">
   <!-- 蒙板内容 要放在蒙板的外面-->
   <view class="menu">