From 01b15d67e92ba230de65fac039790b37001ea12a Mon Sep 17 00:00:00 2001 From: mullins <476823686@qq.com> Date: Thu, 4 Jun 2020 09:40:57 +0800 Subject: [PATCH] =?UTF-8?q?bottomSheet=20=E4=BB=A3=E7=A0=81=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/frameDetail/components/BottomSheet.vue | 2375 +++++++++++----------- src/pages/frameDetail/frameDetail.vue | 147 +- 2 files changed, 1302 insertions(+), 1220 deletions(-) diff --git a/src/pages/frameDetail/components/BottomSheet.vue b/src/pages/frameDetail/components/BottomSheet.vue index e138d5f..b214ec9 100644 --- a/src/pages/frameDetail/components/BottomSheet.vue +++ b/src/pages/frameDetail/components/BottomSheet.vue @@ -1,1161 +1,1232 @@ +.content { + min-height: 100vh; + background-color: #f2f2f2; + // padding-top: 20rpx; + .goodInfo { + width: 100%; + height: 272rpx; + border-radius: 16rpx; + background-color: #ffffff; + box-sizing: border-box; + padding: 36rpx; + display: flex; + flex-direction: row; + justify-content: flex-start; + .imageWrap { + height: 188rpx; + width: 188rpx; + margin-right: 28rpx; + image { + height: 188rpx; + width: 188rpx; + } + } + .infoRight { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + .goodName { + font-size: 28rpx; + color: #333333; + } + .remarks { + font-size: 20rpx; + color: #999999; + } + .priceBox { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + font-size: 14px; + color: #999999; + .price { + color: #ff6b4a; + font-size: 28rpx; + } + .counter { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: 28rpx; + color: #333333; + width: 122rpx; + .btn { + display: flex; + justify-content: center; + line-height: 32rpx; + height: 32rpx; + width: 32rpx; + background-color: #f2f2f2; + color: #cfcfcf; + } + } + } + } + } + .peopleChoose { + width: 100%; + min-height: 200rpx; + border-radius: 16rpx; + background-color: #ffffff; + box-sizing: border-box; + padding: 36rpx; + margin: 10px 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + .title { + font-size: 16px; + color: #333333; + letter-spacing: -0.3px; + text-align: justify; + line-height: 24px; + margin: 4px 0; + } + .loveList { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + padding-top: 24rpx; + width: 100%; + .peopleName { + padding: 0 30rpx; + height: 60rpx; + margin: 0 20rpx 20rpx 0; + transition: all 0.3s; + background: #f2f2f2; + border-radius: 2px; + border-radius: 2px; + line-height: 60rpx; + text-align: center; + color: #666666; + font-size: 12px; + } + .active2 { + background: rgba(255, 107, 74, 0.15); + color: #ff6b4a; + } + } + } + .goods-data { + width: 100%; + box-sizing: border-box; + padding: 37rpx 40rpx 0 40rpx; + background: #ffffff; + border-radius: 12rpx; + .opCollapse { + width: 100%; + padding-bottom: 28rpx; + margin-top: 7px; + border-bottom: 1px solid #e9e9e9; + .head { + display: flex; + justify-content: space-between; + height: 24px; + // font-family: PingFangSC-Medium; + font-size: 16px; + color: #333333; + letter-spacing: -0.3px; + text-align: justify; + line-height: 24px; + margin-bottom: 18rpx; + .headRighted { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #cfcfcf; + transform: scaleY(-1); + margin-top: 10px; + } + .headMid { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-left: -120rpx; + } + .headRight { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #cfcfcf; + margin-top: 10px; + } + } + .body { + font-size: 12px; + color: #666666; + letter-spacing: 0; + .bodyBox { + margin-top: 15px; + .names { + font-size: 12px; + color: #151515; + letter-spacing: 0; + text-align: justify; + line-height: 17px; + margin-left: 5px; + margin-right: 10px; + } + text { + font-size: 12px; + color: #666666; + letter-spacing: 0; + text-align: justify; + } + } + } + .goods-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #fff; + width: 100%; + padding: 40rpx 0; + .p1 { + font-size: 16px; + color: #333333; + letter-spacing: -0.3px; + text-align: justify; + line-height: 24px; + margin: 4px 0; + } + .p2 { + font-size: 12px; + color: #999999; + letter-spacing: -0.23px; + margin-bottom: 32rpx; + } + .image2 { + width: 42rpx; + height: 34rpx; + margin-right: 12rpx; + } + .confirm { + display: flex; + align-items: center; + font-size: 12px; + color: #666666; + letter-spacing: -0.23px; + width: 684rpx; + .image1 { + margin-right: 25rpx; + width: 42rpx; + height: 38rpx; + } + } + .picker { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + + .picker-choice { + display: flex; + width: 684rpx; + align-items: center; + margin-bottom: 40rpx; + .input { + border-bottom: 1px solid #cfcfcf; + height: 40rpx; + } + .choice-left { + width: 210rpx; + .pd { + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + text-align: justify; + line-height: 24px; + margin-right: 44rpx; + } + .p11 { + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + text-align: justify; + line-height: 24px; + // margin-right: 10px; + } + .p12 { + font-size: 10px; + color: #3f3f3f; + letter-spacing: -0.19px; + text-align: justify; + line-height: 24px; + } + } + .p13 { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-right: 10px; + } + .p13-date { + font-size: 10px; + color: #999999; + letter-spacing: -0.19px; + margin-right: 5px; + } + picker { + width: 144rpx; + height: 40rpx; + display: flex; + position: relative; + .p14 { + font-size: 14px; + color: #666666; + letter-spacing: -0.26px; + text-align: center; + width: 124rpx; + border-bottom: 1px solid #cfcfcf; + height: 38rpx; + } + image { + width: 20rpx; + height: 20rpx; + position: absolute; + right: 20rpx; + top: 8rpx; + } + } + } + } + } + } + } + .choose { + width: 100%; + background: #ffffff; + border-radius: 12rpx; + margin-top: 20rpx; + padding: 40rpx 40rpx 112rpx 40rpx; + box-sizing: border-box; + .chooseItem { + width: 100%; + padding-bottom: 32rpx; + border-bottom: 1px solid #e9e9e9; + margin-bottom: 28rpx; + } + .chooseRes { + font-size: 12px; + color: #666666; + } + .itemsWrap { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + padding-top: 24rpx; + .item1 { + width: 64rpx; + height: 64rpx; + border-radius: 32rpx; + margin: 0 36rpx 24rpx 0; + transition: all 0.3s; + border: 1px solid #ffffff; + } + .item2 { + // width: 100rpx; + padding: 0 30rpx; + height: 60rpx; + margin: 0 20rpx 20rpx 0; + transition: all 0.3s; + background: #f2f2f2; + border-radius: 2px; + border-radius: 2px; + line-height: 60rpx; + text-align: center; + color: #666666; + font-size: 12px; + } + .active1 { + opacity: 0.7; + border: 1px solid #ff6b4a; + } + .active2 { + background: rgba(255, 107, 74, 0.15); + color: #ff6b4a; + } + } + } + .button { + position: fixed; + z-index: 10; + width: 100%; + height: 112rpx; + background-color: #ff6b4a; + font-size: 16px; + color: #ffffff; + line-height: 112rpx; + text-align: center; + // position: absolute; + bottom: 0; + left: 0; + } +} +/* sheet弹窗 */ +.sheet { + width: 100%; + height: 100%; + position: fixed; + top: 150%; + left: 0upx; + bottom: 0upx; + right: 0upx; + background: rgba(0, 0, 0, 0.3); + z-index: 10000; +} + +/* 显示时候的动画默认0.5s */ +.sheetView { + width: 100%; + height: 0upx; + position: absolute; + bottom: 0upx; + background: white; + z-index: 10001; + transition: all 0.5s; +} +.sheetShow { + top: 0upx !important; +} +/* 关闭时的动画，时间自己可以设置0.5s*/ +.sheeHide { + top: 120% !important; + transition: all 0.5s; +} + +/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/ +.sheetView_active { + height: 942upx; +} + diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue index 45d2f6c..f57749d 100644 --- a/src/pages/frameDetail/frameDetail.vue +++ b/src/pages/frameDetail/frameDetail.vue @@ -291,12 +291,18 @@ class="D5" v-if="current !==2" > - + 商品详细 - + @@ -309,7 +315,7 @@ class="botton_1" > - + {{cartNumber}} 购物车 @@ -321,27 +327,33 @@ >加入购物车 立即购买 - - + +