开发作品页面及组件

components/videoPreview/index.less

@@ -1,323 +1,325 @@
 .work {
-  margin-bottom: 24rpx;
-  background-color: white;
-  border-radius: 32rpx;
-  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
-  padding-bottom: 26rpx;
-
-  .workHead {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20rpx 20rpx 10rpx;
-
-    .wH-left {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .avatar {
-        width: 80rpx;
-        height: 80rpx;
-        border-radius: 50%;
-        overflow: hidden;
-        background-color: rgb(228, 225, 225);
-      }
-
-      .wH-left-user {
-        margin-left: 18rpx;
-
-        .nickname {
-          max-width: 320rpx;
-          font-size: 30rpx;
-          font-weight: bold;
-          color: #000;
-        }
+    width: 100%;
+    margin-bottom: 24rpx;
+    background-color: white;
+    border-radius: 32rpx;
+    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+    padding-bottom: 26rpx;
 
-        .time {
-          display: flex;
-          align-items: center;
-          margin-top: 4rpx;
-          font-size: 26rpx;
-          color: rgba(0, 0, 0, 0.6);
+    .workHead {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx 20rpx 10rpx;
+
+        .wH-left {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .avatar {
+                width: 80rpx;
+                height: 80rpx;
+                border-radius: 50%;
+                overflow: hidden;
+                background-color: rgb(228, 225, 225);
+            }
+
+            .wH-left-user {
+                margin-left: 18rpx;
+
+                .nickname {
+                    max-width: 320rpx;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    color: #000;
+                }
+
+                .time {
+                    display: flex;
+                    align-items: center;
+                    margin-top: 4rpx;
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                }
+
+                .playNum {
+                    margin: 4rpx 4rpx 0rpx 20rpx;
+                    width: 30rpx;
+                    height: 30rpx;
+                }
+            }
         }
 
-        .playNum {
-          margin: 4rpx 4rpx 0rpx 20rpx;
-          width: 30rpx;
-          height: 30rpx;
+        .wH-right {
+            display: flex;
+            align-items: center;
+
+            .wH-right-btn {
+                text-align: center;
+                margin-left: 30rpx;
+
+                .img {
+                    width: 27rpx;
+                    height: 32rpx;
+                }
+
+                .text {
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.74);
+                }
+            }
+
+            .follow {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 140rpx;
+                font-size: 24rpx;
+                padding: 8rpx 0rpx;
+                border-radius: 50rpx;
+                border: 1rpx solid #1BC665;
+                color: #1BC665;
+
+                .character {
+                    width: 22rpx;
+                    height: 22rpx;
+                    margin-right: 6rpx;
+                }
+            }
+
+            .isFans {
+                border: 1rpx solid #E2ECFB;
+                background-color: #E2ECFB;
+                color: #333;
+            }
+
+            .pkNum {
+                color: #30C866;
+                font-size: 44rpx;
+                margin-right: 20rpx;
+            }
         }
-      }
     }
 
-    .wH-right {
-      display: flex;
-      align-items: center;
-      .wH-right-btn {
-        text-align: center;
-        margin-left: 30rpx;
-
-        .img {
-          width: 27rpx;
-          height: 32rpx;
+    .workContent {
+        position: relative;
+        font-size: 0px;
+
+        .videoBox {
+            position: relative;
+            width: 100%;
+            height: 422rpx;
+
+            .maskBg {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
+            .maskImg {
+                z-index: 10;
+                width: 215rpx;
+                height: 215rpx;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                left: 0px;
+                bottom: 0px;
+                margin: auto;
+            }
+
+            .play {
+                position: absolute;
+                left: 20rpx;
+                bottom: 15rpx;
+                width: 70rpx;
+                height: 70rpx;
+            }
+
+            .cover {
+                width: 100%;
+                height: 100%;
+            }
         }
 
-        .text {
-          font-size: 26rpx;
-          color: rgba(0, 0, 0, 0.74);
+        .watermark {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0px;
+            top: 0px;
+            z-index: 2;
         }
-      }
 
-      .follow {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 140rpx;
-        font-size: 24rpx;
-        padding: 8rpx 0rpx;
-        border-radius: 50rpx;
-        border: 1rpx solid #1BC665;
-        color: #1BC665;
-
-        .character {
-          width: 22rpx;
-          height: 22rpx;
-          margin-right: 6rpx;
+        .video {
+            width: 100%;
+            height: 100%;
+            pointer-events: auto;
         }
-      }
-
-      .isFans {
-        border: 1rpx solid #E2ECFB;
-        background-color: #E2ECFB;
-        color: #333;
-      }
-
-      .pkNum {
-        color: #30C866;
-        font-size: 44rpx;
-        margin-right: 20rpx;
-      }
-    }
-  }
 
-  .workContent {
-    position: relative;
-    font-size: 0px;
-
-    .videoBox {
-      position: relative;
-      width: 100%;
-      height: 422rpx;
-
-      .maskBg {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-
-      .maskImg {
-        z-index: 10;
-        width: 215rpx;
-        height: 215rpx;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        left: 0px;
-        bottom: 0px;
-        margin: auto;
-      }
-
-      .play {
-        position: absolute;
-        left: 20rpx;
-        bottom: 15rpx;
-        width: 70rpx;
-        height: 70rpx;
-      }
-
-      .cover {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .watermark {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0px;
-      top: 0px;
-      z-index: 2;
+        .audioBox {
+            position: relative;
+            height: 270rpx;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+
+
+            .audioBg {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+            }
+
+            .titleBox {
+                position: relative;
+                margin-left: 50rpx;
+                margin-right: 30rpx;
+                width: 380rpx;
+                font-size: 36rpx;
+                line-height: 54rpx;
+                color: white;
+                text-align: center;
+            }
+
+            .audioPlay {
+                position: relative;
+                width: 220rpx;
+                height: 174rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .audioPlayBg {
+                    width: 150rpx;
+                    height: 150rpx;
+                }
+
+                .audioPlayZhen {
+                    position: absolute;
+                    right: 30rpx;
+                    top: 16rpx;
+                    width: 32rpx;
+                    height: 40rpx;
+                }
+
+                .cover {
+                    position: absolute;
+                    width: 130rpx;
+                    height: 130rpx;
+                    border-radius: 50%;
+                }
+
+                .circle {
+                    animation: identifier 12s infinite linear;
+                }
+            }
+
+            .progressBar {
+                position: absolute;
+                left: 0px;
+                bottom: 0px;
+                width: 100%;
+                padding: 0rpx 24rpx;
+                box-sizing: border-box;
+                font-size: 0rpx;
+                display: flex;
+                align-items: center;
+
+                .audioSwitch {
+                    width: 26rpx;
+                    height: 34rpx;
+                    padding: 10rpx;
+                    margin-right: 20rpx;
+                }
+
+                .time {
+                    color: white;
+                    font-size: 22rpx;
+                }
+
+                .slider {
+                    flex: 1;
+                }
+            }
+        }
     }
 
-    .video {
-      width: 100%;
-      height: 422rpx;
-      pointer-events: auto;
+    .workFooter {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx 20rpx 10rpx;
+
+        .mangeL-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-right: 30rpx;
+
+            .noticeTips {
+                position: absolute;
+                right: -38rpx;
+                top: -10rpx;
+                width: 34rpx;
+                padding: 4rpx 0rpx;
+                border-radius: 40rpx;
+                color: white;
+                font-size: 16rpx;
+                text-align: center;
+                background-color: #FF0000;
+            }
+
+            .icon {
+                width: 44rpx;
+                height: 44rpx;
+            }
+
+            .icon-name {
+                margin-left: 8rpx;
+                font-size: 26rpx;
+            }
+        }
     }
 
-    .audioBox {
-      position: relative;
-      height: 270rpx;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-
-
-      .audioBg {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-
-      .titleBox {
-        position: relative;
-        margin-left: 50rpx;
-        margin-right: 30rpx;
-        width: 380rpx;
-        font-size: 36rpx;
-        line-height: 54rpx;
-        color: white;
-        text-align: center;
-      }
-
-      .audioPlay {
-        position: relative;
-        width: 220rpx;
-        height: 174rpx;
+    .toReading {
+        width: 166rpx;
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 12rpx 32rpx;
+        border-radius: 50rpx;
+        background-color: #81C7FF;
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
 
-        .audioPlayBg {
-          width: 150rpx;
-          height: 150rpx;
+        .reading {
+            width: 24rpx;
+            height: 32rpx;
         }
 
-        .audioPlayZhen {
-          position: absolute;
-          right: 30rpx;
-          top: 16rpx;
-          width: 32rpx;
-          height: 40rpx;
+        .reading-text {
+            color: white;
+            font-size: 30rpx;
+            margin-left: 12rpx;
         }
 
-        .cover {
-          position: absolute;
-          width: 130rpx;
-          height: 130rpx;
-          border-radius: 50%;
-        }
+    }
 
-        .circle {
-          animation: identifier 12s infinite linear;
-        }
-      }
+    .pkToReading {
+        width: 250rpx;
+    }
 
-      .progressBar {
-        position: absolute;
-        left: 0px;
-        bottom: 0px;
+    .pkPageBtns {
         width: 100%;
-        padding: 0rpx 24rpx;
+        margin-top: 16rpx;
+        padding: 0rpx 32rpx;
         box-sizing: border-box;
-        font-size: 0rpx;
         display: flex;
         align-items: center;
-
-        .audioSwitch {
-          width: 26rpx;
-          height: 34rpx;
-          padding: 10rpx;
-          margin-right: 20rpx;
-        }
-
-        .time {
-          color: white;
-          font-size: 22rpx;
-        }
-
-        .slider {
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  .workFooter {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20rpx 20rpx 10rpx;
-
-    .mangeL-box {
-      position: relative;
-      display: flex;
-      align-items: center;
-      margin-right: 30rpx;
-
-      .noticeTips {
-        position: absolute;
-        right: -38rpx;
-        top: -10rpx;
-        width: 34rpx;
-        padding: 4rpx 0rpx;
-        border-radius: 40rpx;
-        color: white;
-        font-size: 16rpx;
-        text-align: center;
-        background-color: #FF0000;
-      }
-
-      .icon {
-        width: 44rpx;
-        height: 44rpx;
-      }
-
-      .icon-name {
-        margin-left: 8rpx;
-        font-size: 26rpx;
-      }
-    }
-  }
-
-  .toReading {
-    width: 166rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 12rpx 32rpx;
-    border-radius: 50rpx;
-    background-color: #81C7FF;
-    box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
-
-    .reading {
-      width: 24rpx;
-      height: 32rpx;
-    }
-
-    .reading-text {
-      color: white;
-      font-size: 30rpx;
-      margin-left: 12rpx;
+        justify-content: center;
     }
-
-  }
-
-  .pkToReading {
-    width: 250rpx;
-  }
-
-  .pkPageBtns {
-    width: 100%;
-    margin-top: 16rpx;
-    padding: 0rpx 32rpx;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }

components/videoPreview/index.wxss

@@ -1,4 +1,5 @@
 .work {
+  width: 100%;
   margin-bottom: 24rpx;
   background-color: white;
   border-radius: 32rpx;
@@ -135,7 +136,7 @@
 }
 .work .workContent .video {
   width: 100%;
-  height: 422rpx;
+  height: 100%;
   pointer-events: auto;
 }
 .work .workContent .audioBox {

components/worksList/index.json

@@ -1,7 +1,8 @@
 {
-  "component": true,
-  "usingComponents": {
-    "videoPreview": "/components/videoPreview/index",
-    "Comment": "/components/comment/index"
-  }
+    "component": true,
+    "usingComponents": {
+        "videoPreview": "/components/videoPreview/index",
+        "Comment": "/components/comment/index"
+    },
+    "styleIsolation": "apply-shared"
 }

components/worksList/index.less

@@ -1,18 +1,23 @@
 .worksList {
-  .playLine {
-    position: fixed;
-    top: 60%;
-    z-index: 999;
-    width: 100%;
-    height: 1rpx;
-    background-color: transparent;
-  }
+    .playLine {
+        position: fixed;
+        top: 60%;
+        z-index: 999;
+        width: 100%;
+        height: 1rpx;
+        background-color: transparent;
+    }
+
+    .box {
+        // width: 700rpx;
+        // margin: auto;
+    }
 }
 
 .share {
-  width: 375px;
-  height: 300px;
-  position: absolute;
-  left: -9999rpx;
-  top: -9999rpx;
+    width: 375px;
+    height: 300px;
+    position: absolute;
+    left: -9999rpx;
+    top: -9999rpx;
 }

components/worksList/index.wxml

@@ -1,13 +1,14 @@
 <view class="worksList">
-  <view class="playLine" />
-  <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}"
-    currentTime="{{currentTime}}" sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}'
-    currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
-    data-uid="{{item.user.uid}}"
-    data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}" bind:openComment="openComment"
-    bind:setSeek="setSeek" bind:setListFans="setListFans" bind:playAudio="playAudio" bind:playVideo="playVideo"
-    bind:deleteVideo='deleteVideo'>
-  </videoPreview>
-  <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
-  <canvas id='share' class="share" type="2d"> </canvas>
+    <view class="playLine" />
+    <view class="box">
+        <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}"
+            currentTime="{{currentTime}}" sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}'
+            currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
+            data-uid="{{item.user.uid}}" data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}"
+            bind:openComment="openComment" bind:setSeek="setSeek" bind:setListFans="setListFans"
+            bind:playAudio="playAudio" bind:playVideo="playVideo" bind:deleteVideo='deleteVideo'>
+        </videoPreview>
+    </view>
+    <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
+    <canvas id='share' class="share" type="2d"> </canvas>
 </view>

pages/works/index.js

@@ -1,97 +1,60 @@
-const app = getApp()
 import share from '~/mixins/share'
 import {
-  getSelfRead,
-  getFavoritesList
-} from '~/api/user'
-import {
-  getFollowWorks
-} from '~/api/works'
+    getHotrecommendList,
+} from "~/api/works"
 import event from '~/mixins/event'
 import reachBottom from '~/mixins/reachBottom'
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 Page({
-  behaviors: [reachBottom, share,event],
-  data: {
-    navBarHeight: app.globalData.navBarHeight,
-    // 4关注作品，5我的作品,6收藏作品
-    currentType: '4',
-    isFixed: false
-  },
-  onShow() {
-    if (typeof this.getTabBar === 'function') {
-      this.getTabBar().setData({
-        selected: 1
-      })
-    }
-    this.getLocUserInfo()
-    if (Object.keys(this.data.userInfo).length > 0) {
-      this.requestAgain()
-    } else {
-      getApp().callBack = (res) => {
-        this.getLocUserInfo()
-        this.requestAgain()
-      }
-    }
-  },
-  loadMore() {
-    if (this.data.currentType == '4') {
-      this.getData(getFollowWorks, {})
-    } else if (this.data.currentType == '5') {
-      this.getData(getSelfRead, {})
-    } else if (this.data.currentType == '6') {
-      this.getData(getFavoritesList, {})
-    }
-  },
-  changeType({
-    target
-  }) {
-    if (target.dataset.type) {
-      let workListDom = this.selectComponent('#worksList')
-      if (workListDom) {
-        this.selectComponent('#worksList').resetAudio()
-      }
-      this.setData({
-        currentType: target.dataset.type
-      })
-      this.requestAgain()
-    }
-  },
-  /**
-   * 监听页面滚动事件
-   */
-  onPageScroll(e) {
-    if (e.scrollTop >= 6 && !this.data.isFixed) {
-      this.setData({
-        isFixed: true
-      })
-    } else if (e.scrollTop < 6 && this.data.isFixed) {
-      this.setData({
+    behaviors: [reachBottom, share, event],
+    data: {
         isFixed: false
-      })
-    }
-  },
-  requestAgain() {
-    this.resetData()
-  },
-  async getLocUserInfo() {
-    this.storeBindings = createStoreBindings(this, {
-      store,
-      fields: {
-        userInfo: 'userInfo'
-      },
-    })
-    this.storeBindings.updateStoreBindings()
-  },
-  onReachBottom() {
-    this.loadMore()
-  },
-  onUnload() {
-    this.storeBindings.destroyStoreBindings()
-  },
+    },
+    onShow() {
+        if (typeof this.getTabBar === 'function') {
+            this.getTabBar().setData({
+                selected: 1
+            })
+        }
+        this.getLocUserInfo()
+        if (Object.keys(this.data.userInfo).length > 0) {
+            this.requestAgain()
+        } else {
+            getApp().callBack = (res) => {
+                this.getLocUserInfo()
+                this.requestAgain()
+            }
+        }
+    },
+    loadMore() {
+        if (!this.data.userInfo.grade) {
+            return
+        }
+        this.localGetData(getHotrecommendList, {
+            grade: this.data.userInfo.grade
+        })
+    },
+    requestAgain() {
+        this.resetData()
+    },
+    async getLocUserInfo() {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+        })
+        this.storeBindings.updateStoreBindings()
+    },
+    onReachBottom() {
+        this.loadMore()
+    },
+    onUnload() {
+        this.storeBindings.destroyStoreBindings()
+    },
 })

pages/works/index.json

@@ -1,8 +1,7 @@
 {
   "usingComponents": {
     "navigationBar": "/components/navigationBar/index",
-    "worksList": "/components/worksList/index",
-    "emptyBg": "/components/empty/index"
+    "worksList": "/components/worksList/index"
   },
   "navigationStyle": "custom"
 }

pages/works/index.less

@@ -1,43 +1,8 @@
 .worksBox {
     padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 
-    .selectType {
-        padding: 30rpx 15rpx 30rpx 26rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        z-index: 20;
-        background-color: #F2F6FC;
-
-        .type {
-            padding: 14rpx 0rpx;
-            width: 200rpx;
-            box-sizing: border-box;
-            text-align: center;
-            border: 1rpx solid #9f9f9fa4;
-            border-radius: 50rpx;
-            color: #1A1A1A;
-            font-size: 28rpx;
-        }
-
-        .currentType {
-            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-            color: white;
-            border-color: #00C657;
-            background-color: #00C657;
-            font-weight: bold;
-        }
-
-        .search {
-            padding: 8rpx 20rpx;
-            text-align: center;
-            border: 1rpx solid #9f9f9fa4;
-            border-radius: 50rpx;
-
-            .searchImg {
-                width: 26rpx;
-                height: 26rpx;
-            }
-        }
+    .worksList {    
+        margin: 0 auto;
+        width: 700rpx;
     }
 }

pages/works/index.wxml

@@ -1,16 +1,6 @@
 <navigationBar bind:reload='requestAgain'></navigationBar>
 <view class="worksBox">
-    <!-- 切换类型 -->
-    <view class="selectType {{isFixed?'isFixed isFixed2':''}}" style="top:{{navBarHeight}}px;" bindtap="changeType">
-        <view class="type {{currentType=='4'?'currentType':''}}" data-type='4'>关注作品</view>
-        <view class="type {{currentType=='5'?'currentType':''}}" data-type='5'>我的作品</view>
-        <view class="type {{currentType=='6'?'currentType':''}}" data-type='6'>收藏作品</view>
-    </view>
-    <!-- 优秀作品展播及官方推荐列表组件 -->
-    <worksList wx:if="{{currentType!='7'}}" id="worksList"
-        videoType="{{currentType=='4'||currentType=='6'?'follow':'my'}}" worksList="{{list}}" tabBarPadding='true'
-        autoPlay='{{false}}' />
-    <emptyBg wx:if="{{nullList}}"
-        message="{{currentType=='4'?'您还没有关注的用户哦':currentType=='5'?'您还没有作品哦，赶快去发表吧':'您还没有收藏作品哦'}}"></emptyBg>
+    <!-- 优秀作品展播-->
+    <worksList id="worksList" worksList="{{list}}" videoType="public" tabBarPadding='true' autoPlay='{{false}}' />
 </view>
 <canvas id='share' type="2d"> </canvas>

pages/works/index.wxss

@@ -1,38 +1,7 @@
 .worksBox {
   padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
 }
-.worksBox .selectType {
-  padding: 30rpx 15rpx 30rpx 26rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 20;
-  background-color: #F2F6FC;
-}
-.worksBox .selectType .type {
-  padding: 14rpx 0rpx;
-  width: 200rpx;
-  box-sizing: border-box;
-  text-align: center;
-  border: 1rpx solid #9f9f9fa4;
-  border-radius: 50rpx;
-  color: #1A1A1A;
-  font-size: 28rpx;
-}
-.worksBox .selectType .currentType {
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-  color: white;
-  border-color: #00C657;
-  background-color: #00C657;
-  font-weight: bold;
-}
-.worksBox .selectType .search {
-  padding: 8rpx 20rpx;
-  text-align: center;
-  border: 1rpx solid #9f9f9fa4;
-  border-radius: 50rpx;
-}
-.worksBox .selectType .search .searchImg {
-  width: 26rpx;
-  height: 26rpx;
+.worksBox .worksList {
+  margin: 0 auto;
+  width: 700rpx;
 }