From f9d4b09377c5471e1202be2fef2c89de27b6654d Mon Sep 17 00:00:00 2001 From: yiming <m13691596795@163.com> Date: 星期三, 13 三月 2024 19:50:42 +0800 Subject: [PATCH] feat(撒): 的 --- pages/resourceDetails/myAudio/index.wxss | 330 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 298 insertions(+), 32 deletions(-) diff --git a/pages/resourceDetails/myAudio/index.wxss b/pages/resourceDetails/myAudio/index.wxss index 498b3dc..e7ae00d 100644 --- a/pages/resourceDetails/myAudio/index.wxss +++ b/pages/resourceDetails/myAudio/index.wxss @@ -1,4 +1,4 @@ -/* pages/resourceDetails/myAudio/index.wxss */ +/* pages/resourceDetails/index.wxss */ .nacigationBar { background-color: #fff; display: flex; @@ -16,51 +16,317 @@ margin-bottom: 5rpx; } -.audioBox { - width: 100%; - height: 350rpx; + + +.titleBox { + margin: 30rpx; + border-bottom: 1px #f4f4f4 solid; + padding-bottom: 20rpx; + font-weight: bold; + } -.imageFront { - width: 300rpx; - height: 300rpx; - position: absolute; - top: 150rpx; - left: 250rpx; +.contentBox { + position: relative; } -.imageAfter { - width: 100%; +.contentBox .custom-tabs { + /* margin-bottom: 32rpx; */ + width: 400rpx; } -.controlBox { + +.t-tabs__content { + width: 750rpx !important; + overflow: auto !important; +} + + +.custom-panel { + /* height: 120px; */ width: 750rpx; + /* height: 200rpx; */ + +} + +.contentBox .takeNotes { + + position: absolute; + top: 5rpx; + right: 0; + width: 350rpx; + border-bottom: 1px solid #f4f4f4; + +} + +.takeNotes image { + width: 30rpx; + height: 30rpx; + margin-top: 10rpx; + margin-right: 10rpx; +} + +.takeNotesLining { + margin: 25rpx; + display: flex; + justify-content: flex-end; +} + +.operateBox { + display: flex; + align-items: flex-end; + justify-content: space-between; + +} + +.iconBox { + display: flex; +} + +.iconBox image { + width: 26rpx; + height: 26rpx; + margin: 0 10rpx; +} + +.t-dialog__content { + padding: 0 !important; +} + +.titleImageBox { + width: 40rpx; + height: 40rpx; + margin-left: 20rpx; +} + +.dialogTitleBox { + margin: 30rpx; + border-bottom: 1px #f4f4f4 solid; + padding-bottom: 20rpx; + font-weight: bold; + display: flex; + align-items: center; +} + +.input-example { + --td-input-vertical-padding: 24rpx; + + background-color: #fff; + padding: 32rpx 32rpx 16rpx; +} + +.input-example__label { + color: rgba(0, 0, 0, 0.9); + font-size: 24rpx; + line-height: 40rpx; + margin: 0 8rpx 16rpx; +} + +.buttonBox { + display: flex; + /* justify-content: flex-end; */ + justify-content: center; + +} + +/* .inputBox { + height: 500rpx; +} */ + + +.detailsName { + margin: 30rpx; + width: 90%; + height: 60rpx; + display: flex; + align-items: center; + + padding-left: 20rpx; + background-color: #FFF6F0 +} + +.detailsName:hover { + background-color: #fff0e6; + width: 90%; + height: 60rpx; + color: #ff6c00; +} + +.audioBox { + width: 750rpx; + height: 200rpx; +} + +.title-text { + display: flex; + align-items: center; +} + +.note-title { + width: 80%; + height: 84rpx; + line-height: 84rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 10rpx; + margin-left: 20rpx; +} + +.edit-icon { + margin-left: 10rpx; + width: 30rpx; + height: 30rpx; +} + +.submit-btn { + padding: 40rpx; + --td-button-border-radius: 60rpx; + --td-button-primary-bg-color: #ff6c00; + --td-button-primary-border-color: #ff6c00; + --td-button-primary-active-bg-color: #ff984d; + --td-button-primary-active-border-color: #ff984d; +} + +.edit-icon { + margin-left: 10rpx; + width: 30rpx; + height: 30rpx; +} + +.textarea-example { + padding: 32rpx 32rpx 48rpx; + background-color: #fff; +} + +.external-class { + padding-top: 24rpx !important; + padding-bottom: 24rpx !important; +} + +.textarea-example__label { + display: block; + color: rgba(0, 0, 0, 0.9); + font-size: 24rpx; + line-height: 40rpx; + padding-bottom: 16rpx; +} + +.dialogIconBox { + /* width: 500rpx; + height: 300rpx; + color: #000; + background-color: ccc; */ +} + +.popup { + padding: 40rpx; + width: 600rpx; + +} + +.close-btn { + position: absolute; + left: 50%; + margin-left: -32rpx; + bottom: calc(-1 * (48rpx + 64rpx)); +} + +.collapse-header { + display: flex; +} + +.collapse-header .header-name { + font-size: 32rpx; + width: 500rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.note-icon { + width: 44rpx; + height: 48rpx; + margin-right: 20rpx; +} + +.note-content { + height: min-content; + font-size: 28rpx; + color: #949494; + margin-bottom: 20rpx; + max-height: 600rpx; + text-align: justify; + /* padding-bottom: 200rpx; */ +} + +.note-bottom { + display: flex; + justify-content: space-between; + align-items: center; +} + +.note-time { + color: #D9D9D9; +} + +.bottom-btn { + height: 40rpx; + display: flex; + align-items: center; +} + +.complice, +.delete { + width: 30rpx; + height: 30rpx; + margin: 0 15rpx; +} + +.audioPlayerBox { + width: 100%; + height: 460rpx; + display: flex; + flex-direction: column; +} + +.audioBackground { + flex: 1; + background-size: 100% 110%; + + /* background-repeat: no-repeat; + background-position: center center; */ + background-color: #f9f9f9; + display: flex; + justify-content: center; + align-items: center; +} + +.audioBackground image { + width: 270rpx; + height: 280rpx; + +} + +.functionBox { height: 96rpx; background: #000000; - border-radius: 0rpx 0rpx 0rpx 0rpx; opacity: 0.6; - position: relative; + display: flex; + align-items: center; } -.controlBox image { - width: 45rpx; - height: 45rpx; - margin: 20rpx 35rpx; +.functionBox .audioIconBox {} + +.functionBox .color { + color: #fff; + } -audio { - position: relative; +.rightSwitchBox { + margin: 0 30rpx; } -.free-MusicProgress { - position: absolute; - width: 78%; - left: 21.7%; - bottom: 1px; - background: #C3C3C3; -} - -.free-MusicProgress>view { - background: #48c23d; - height: 5px; +.leftSwitchBox { + margin: 0 30rpx; } \ No newline at end of file -- Gitblit v1.9.1