From fa267fa5a96d8c7ebc6a27dcf248c1c66f454131 Mon Sep 17 00:00:00 2001 From: Haiyi <1021441632@qq.com> Date: Fri, 9 Dec 2022 11:13:20 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=88=20style(UI):=E4=BF=AE=E6=94=B9UI?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/search/index.module.scss | 4 +- src/pages/addAddress/index.module.scss | 355 +++++++++--------- src/pages/addAddress/index.tsx | 2 +- .../components/tagPopup/index.module.scss | 221 ++++++----- .../components/ItemList/index.module.scss | 199 +++++----- .../components/Sort/index.module.scss | 56 +-- .../components/Tag/index.module.scss | 79 ++-- .../customerManagement/index.module.scss | 112 +++--- .../addressDetailBox/index.module.scss | 250 ++++++------ .../components/addressDetailBox/index.tsx | 2 +- 10 files changed, 627 insertions(+), 653 deletions(-) diff --git a/src/components/search/index.module.scss b/src/components/search/index.module.scss index 61c6b36..175e1d9 100644 --- a/src/components/search/index.module.scss +++ b/src/components/search/index.module.scss @@ -19,7 +19,7 @@ height: 60px; flex: 1 1 auto; padding-left: 60px; - background: #eee; + background: #f7f7f7; box-sizing: border-box; display: flex; align-items: center; @@ -73,6 +73,6 @@ padding-left: 20px !important; } } -.customRightSlot{ +.customRightSlot { margin-right: 20px; } diff --git a/src/pages/addAddress/index.module.scss b/src/pages/addAddress/index.module.scss index c336c51..d98e2d6 100644 --- a/src/pages/addAddress/index.module.scss +++ b/src/pages/addAddress/index.module.scss @@ -1,51 +1,10 @@ .main { - background: #FFFFFF; - border-radius: 16px; - margin: 24px; - padding: 40px 32px 50px 32px; + background: #ffffff; + border-radius: 16px; + margin: 24px; + padding: 40px 32px 50px 32px; - - .itemBox { - display: flex; - align-items: center; - padding-bottom: 40px; - border-bottom: 1px solid #f7f7f7; - margin-bottom: 40px; - - - - .leftBox { - width: 176px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - display: flex; - align-items: center; - // margin-right: 50px; - } - - .placeholderStyle { - color: #f7f7f7; - font-size: 28px; - font-weight: 400; - } - - .inputClass { - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #000000; - } - - - } - - - -} - -.itemBox:first-child { + .itemBox { display: flex; align-items: center; padding-bottom: 40px; @@ -53,171 +12,199 @@ margin-bottom: 40px; .leftBox { - width: 176px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - display: flex; - align-items: center; - // padding-right: 25px; + width: 176px; + font-size: 28px; + + font-weight: 500; + color: #000000; + display: flex; + align-items: center; + // margin-right: 50px; } .placeholderStyle { - color: #f7f7f7; - font-size: 28px; - font-weight: 400; + color: #f7f7f7; + font-size: 28px; + font-weight: 400; } .inputClass { - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #000000; + font-size: 28px; + + font-weight: 400; + color: #000000; } + } +} + +.itemBox:first-child { + display: flex; + align-items: center; + padding-bottom: 40px; + border-bottom: 1px solid #f7f7f7; + margin-bottom: 40px; + + .leftBox { + width: 176px; + font-size: 28px; + + font-weight: 500; + color: #000000; + display: flex; + align-items: center; + // padding-right: 25px; + } + + .placeholderStyle { + color: #f7f7f7; + font-size: 28px; + font-weight: 400; + } + + .inputClass { + font-size: 28px; + + font-weight: 400; + color: #000000; + } } .itemBox:last-child { + display: flex; + align-items: center; + padding-bottom: 40px; + margin-bottom: 40px; + border-bottom: none; + + .leftBox { + font-size: 28px; + + font-weight: 500; + color: #000000; display: flex; align-items: center; - padding-bottom: 40px; - margin-bottom: 40px; - border-bottom: none; + // margin-right: 50px; + width: 176px; + } + .inputClass { + font-size: 28px; - .leftBox { - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - display: flex; - align-items: center; - // margin-right: 50px; - width: 176px; - } - - .inputClass { - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #000000; - } - + font-weight: 400; + color: #000000; + } } .checkBox { - margin-left: 24px; - margin-top: 24px; - width: 702px; - height: 120px; - background: #FFFFFF; - border-radius: 16px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: space-between; + margin-left: 24px; + margin-top: 24px; + width: 702px; + height: 120px; + background: #ffffff; + border-radius: 16px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 15px; + .leftCheck { + margin-left: 32px; - .leftCheck { - margin-left: 32px; + .topFont { + margin-top: 24px; + font-size: 28px; - .topFont { - margin-top: 24px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - } - - .bottomFont { - margin-top: 8px; - font-size: 24px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #000000; - } + font-weight: 500; + color: #000000; } + .bottomFont { + margin-top: 8px; + font-size: 24px; - + font-weight: 400; + color: #777777; + } + } } .bottomBox { - width: 750px; - height: 160px; - background: #FFFFFF; - bottom: 0; - padding-top: 14px; - position: fixed; - display: flex; + width: 750px; + height: 160px; + background: #ffffff; + bottom: 0; + padding-top: 14px; + position: fixed; + display: flex; - .btn { - margin-left: 32px; - width: 702px; - height: 80px; - background: #337FFF; - border-radius: 44px; - opacity: 0.5; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - text-align: center; - line-height: 80px; - } + .btn { + margin-left: 32px; + width: 702px; + height: 80px; + background: #337fff; + border-radius: 44px; + opacity: 0.5; + font-size: 28px; - .adtiveBtns { - margin-left: 32px; - width: 702px; - height: 80px; - background: #337FFF; - border-radius: 44px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - text-align: center; - line-height: 80px; - } + font-weight: 500; + color: #ffffff; + text-align: center; + line-height: 80px; + } - .delectBox { - width: 311px; - height: 80px; - border-radius: 44px; - border: 1px solid #087EFF; - margin-left: 48px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #337FFF; - text-align: center; - line-height: 80px; - background-color: #fff; - } + .adtiveBtns { + margin-left: 32px; + width: 702px; + height: 80px; + background: #337fff; + border-radius: 44px; + font-size: 28px; - .nobtn { - width: 311px; - height: 80px; - background: #337FFF; - border-radius: 44px; - opacity: 0.5; - margin-left: 32px; - text-align: center; - line-height: 80px; - font-size: 28px; - color: FFFFFF; - } + font-weight: 500; + color: #ffffff; + text-align: center; + line-height: 80px; + } - .sureBox { - width: 311px; - height: 80px; - background: #337FFF; - border-radius: 44px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - margin-left: 32px; - text-align: center; - line-height: 80px; - } -} \ No newline at end of file + .delectBox { + width: 311px; + height: 80px; + border-radius: 44px; + border: 1px solid #f4536b; + margin-left: 48px; + font-size: 28px; + + font-weight: 500; + color: #f4536b; + text-align: center; + line-height: 80px; + background-color: #fff; + } + + .nobtn { + width: 311px; + height: 80px; + background: #337fff; + border-radius: 44px; + opacity: 0.5; + margin-left: 32px; + text-align: center; + line-height: 80px; + font-size: 28px; + color: #ffffff; + } + + .sureBox { + width: 311px; + height: 80px; + background: #337fff; + border-radius: 44px; + font-size: 28px; + + font-weight: 500; + color: #ffffff; + margin-left: 32px; + text-align: center; + line-height: 80px; + } +} diff --git a/src/pages/addAddress/index.tsx b/src/pages/addAddress/index.tsx index f63d540..c5fae47 100644 --- a/src/pages/addAddress/index.tsx +++ b/src/pages/addAddress/index.tsx @@ -310,7 +310,7 @@ const AddAddress = () => { 设置默认地址 提醒：下单会优先使用该地址 - { onChange(e) }} /> + { onChange(e) }} style={{ marginRight: '20rpx' }} /> { diff --git a/src/pages/customerDetails/components/tagPopup/index.module.scss b/src/pages/customerDetails/components/tagPopup/index.module.scss index a063ddf..b204ae0 100644 --- a/src/pages/customerDetails/components/tagPopup/index.module.scss +++ b/src/pages/customerDetails/components/tagPopup/index.module.scss @@ -1,127 +1,122 @@ .scrollView { - height: 600px; + height: 400px; - .thirdBox { - padding-left: 48px; + .thirdBox { + padding-left: 48px; - .thirdTopfont { - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - } - - .flexModebox { - margin-top: 24px; - display: flex; - flex-wrap: wrap; - flex-shrink: 0; - - .activemodeBox { - margin-bottom: 10px; - margin-right: 16px; - padding: 17px 48px 17px 48px; - // width: 152px; - // height: 68px; - background: rgba(51, 127, 255, 0.1); - border-radius: 8px; - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #337FFF; - text-align: center; - line-height: 68px; - border: 1px solid #337FFF; - box-sizing: border-box; - } - - .modeBox { - margin-bottom: 10px; - margin-right: 16px; - padding: 17px 48px 17px 48px; - // width: 152px; - // height: 68px; - background: #f6f6f6; - border-radius: 8px; - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #000000; - border: 1px solid #f6f6f6; - text-align: center; - line-height: 68px; - box-sizing: border-box; - // opacity: 0.4; - } - } + .thirdTopfont { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; } + .flexModebox { + margin-top: 24px; + display: flex; + flex-wrap: wrap; + flex-shrink: 0; + + .activemodeBox { + padding: 10px 20px; + min-width: 200px; + margin-bottom: 10px; + margin-right: 16px; + // padding: 17px 48px 17px 48px; + background: rgba(51, 127, 255, 0.1); + border-radius: 8px; + font-size: 28px; + font-weight: 400; + color: #337fff; + text-align: center; + line-height: 68px; + border: 1px solid #337fff; + box-sizing: border-box; + } + + .modeBox { + min-width: 200px; + margin-bottom: 10px; + margin-right: 16px; + padding: 10px 20px; + background: #f6f6f6; + border-radius: 8px; + font-size: 28px; + font-weight: 400; + color: #777777; + border: 1px solid #f6f6f6; + text-align: center; + line-height: 68px; + box-sizing: border-box; + } + } + } } .bottomBox { - width: 100%; - // width: 750px; - height: 160px; - background: #FFFFFF; - // position: fixed; - // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom)); - z-index: 99; - display: flex; - padding-top: 16px; - align-items: center; - justify-content: space-between; + width: 100%; + // width: 750px; + height: 160px; + background: #ffffff; + // position: fixed; + // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom)); + z-index: 99; + display: flex; + padding-top: 16px; + align-items: center; + justify-content: space-between; - .resetBox { - margin-left: 48px; - width: 311px; - height: 80px; - border-radius: 44px; - border: 1px solid #087EFF; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #337FFF; - text-align: center; - line-height: 80px; - background-color: #fff; - } + .resetBox { + margin-left: 48px; + width: 311px; + height: 80px; + border-radius: 44px; + border: 1px solid #087eff; + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #337fff; + text-align: center; + line-height: 80px; + background-color: #fff; + } - .button { - margin-right: 32px; - width: 311px; - height: 80px; - background: #68b4ff; - border-radius: 44px; - font-size: 32px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - text-align: center; - line-height: 80px; - letter-spacing: 4px; - } + .button { + margin-right: 32px; + width: 311px; + height: 80px; + background: #68b4ff; + border-radius: 44px; + font-size: 32px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + text-align: center; + line-height: 80px; + letter-spacing: 4px; + } - .activeButton { - margin-right: 32px; - width: 311px; - height: 80px; - background: #337FFF; - border-radius: 44px; - font-size: 32px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #fff; - text-align: center; - line-height: 80px; - letter-spacing: 4px; - } + .activeButton { + margin-right: 32px; + width: 311px; + height: 80px; + background: #337fff; + border-radius: 44px; + font-size: 32px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #fff; + text-align: center; + line-height: 80px; + letter-spacing: 4px; + } } .goLink { - position: absolute; - right: 32px; - top: 37px; - font-size: 28px; - font-weight: 400; - color: #337FFF; -} \ No newline at end of file + position: absolute; + right: 32px; + top: 37px; + font-size: 28px; + font-weight: 400; + color: #337fff; +} diff --git a/src/pages/customerManagement/components/ItemList/index.module.scss b/src/pages/customerManagement/components/ItemList/index.module.scss index 2ed40a7..8652350 100644 --- a/src/pages/customerManagement/components/ItemList/index.module.scss +++ b/src/pages/customerManagement/components/ItemList/index.module.scss @@ -1,119 +1,118 @@ .mainItem { - margin-left: 24px; - margin-right: 24px; - margin-bottom: 24px; - background: #fff; - overflow: hidden; - padding-bottom: 16px; - border-radius: 16px; + margin-left: 24px; + margin-right: 24px; + margin-bottom: 24px; + background: #fff; + overflow: hidden; + padding-bottom: 16px; + border-radius: 16px; - .itemTop { - margin-top: 36px; - display: flex; - justify-content: space-between; + .itemTop { + margin-top: 36px; + display: flex; + justify-content: space-between; - .itemLeft { - margin-left: 24px; - display: flex; + .itemLeft { + margin-left: 24px; + display: flex; + align-items: center; + .itemCile { + width: 78px; + height: 78px; + background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%); + font-size: 32px; + font-weight: 500; + color: #ffffff; + text-align: center; + line-height: 78px; + border-radius: 50%; + margin-right: 32px; + } - .itemCile { - width: 78px; - height: 78px; - background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%); - font-size: 32px; - font-weight: 500; - color: #FFFFFF; - text-align: center; - line-height: 78px; - border-radius: 50%; - margin-right: 32px; - } + .item_top_one { + .item_top_one_flex { + display: flex; + align-items: center; - .item_top_one { - .item_top_one_flex { - display: flex; - align-items: center; + .itemName { + font-size: 28px; + font-weight: 500; + color: #000000; + margin-right: 24px; + } - .itemName { - font-size: 28px; - font-weight: 500; - color: #000000; - margin-right: 24px; - } - - .itemPhone { - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #6e6e6e; - } - } - - .item_tag_box { - margin-top: 16px; - display: flex; - align-items: center; - flex-wrap: wrap; - - .item_tagItem { - margin-bottom: 5px; - margin-right: 16px; - padding: 6px 16px 6px 16px; - font-size: 24px; - font-weight: 500; - color: #4581FF; - background: #ecf2ff; - border-radius: 8px; - } - } - } + .itemPhone { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #6e6e6e; + } } - .itemRight { - display: flex; + .item_tag_box { + margin-top: 16px; + display: flex; + align-items: center; + flex-wrap: wrap; - .phoneFont { - // margin-right: 40px; - margin-left: 16px; - font-size: 24px; - font-weight: 400; - color: #4581FF; - width: 100rpx; - } + .item_tagItem { + margin-bottom: 5px; + margin-right: 16px; + padding: 6px 16px 6px 16px; + font-size: 24px; + font-weight: 500; + color: #4581ff; + background: #ecf2ff; + border-radius: 8px; + } } + } } - .line { - height: 1px; - background: #000000; - opacity: 0.1; - margin-right: 24px; - margin-left: 24px; - margin-top: 20px; - margin-bottom: 16px; - } + .itemRight { + display: flex; - .flex_bottom { - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 24px; - padding-right: 24px; + .phoneFont { + // margin-right: 40px; + margin-left: 16px; font-size: 24px; font-weight: 400; - color: #000000; + color: #4581ff; + width: 100rpx; + } + } + } - .flex_left { - color: #999999; - font-weight: 400; - font-size: 24px; - } + .line { + height: 1px; + background: #000000; + opacity: 0.1; + margin-right: 24px; + margin-left: 24px; + margin-top: 20px; + margin-bottom: 16px; + } - .flex_right { - color: #999999; - font-weight: 400; - font-size: 24px; - } + .flex_bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 24px; + padding-right: 24px; + font-size: 24px; + font-weight: 400; + color: #000000; + + .flex_left { + color: #999999; + font-weight: 400; + font-size: 24px; } -} \ No newline at end of file + .flex_right { + color: #999999; + font-weight: 400; + font-size: 24px; + } + } +} diff --git a/src/pages/customerManagement/components/Sort/index.module.scss b/src/pages/customerManagement/components/Sort/index.module.scss index 9848079..365c0c4 100644 --- a/src/pages/customerManagement/components/Sort/index.module.scss +++ b/src/pages/customerManagement/components/Sort/index.module.scss @@ -1,31 +1,31 @@ .mainBox { - display: flex; - flex-wrap: wrap; - padding-left: 40px; + display: flex; + flex-wrap: wrap; + padding-left: 40px; - .itemFlex { - padding: 23px 11px 23px 11px; - background: #f6f6f6; - // box-sizing: border-box; - border: 1px solid #f6f6f6; - font-size: 28px; - font-weight: 400; - color: #000000; - margin-right: 24px; - margin-bottom: 24px; - border-radius: 16px; - } + .itemFlex { + padding: 23px 18px 23px 18px; + background: #f6f6f6; + // box-sizing: border-box; + border: 1px solid #f6f6f6; + font-size: 28px; + font-weight: 400; + color: #777777; + margin-right: 24px; + margin-bottom: 24px; + border-radius: 16px; + } - .itemactiveFlex { - padding: 23px 11px 23px 11px; - background: rgba(51, 127, 255, 0.1); - border-radius: 16px; - border: 1px solid #337FFF; - // box-sizing: border-box; - font-size: 28px; - font-weight: 400; - color: #337FFF; - margin-right: 24px; - margin-bottom: 24px; - } -} \ No newline at end of file + .itemactiveFlex { + padding: 23px 18px 23px 18px; + background: rgba(51, 127, 255, 0.1); + border-radius: 16px; + border: 1px solid #337fff; + // box-sizing: border-box; + font-size: 28px; + font-weight: 400; + color: #337fff; + margin-right: 24px; + margin-bottom: 24px; + } +} diff --git a/src/pages/customerManagement/components/Tag/index.module.scss b/src/pages/customerManagement/components/Tag/index.module.scss index 570fbd8..893d575 100644 --- a/src/pages/customerManagement/components/Tag/index.module.scss +++ b/src/pages/customerManagement/components/Tag/index.module.scss @@ -1,44 +1,45 @@ .mainBox { - .pussTitle { - font-size: 28px; - font-weight: 500; - color: #000000; - margin-bottom: 24px; - margin-left: 40px; - margin-top: 15px; + .pussTitle { + font-size: 28px; + font-weight: 500; + color: #000000; + margin-bottom: 24px; + margin-left: 40px; + margin-top: 15px; + } + + .pussBox { + display: flex; + flex-wrap: wrap; + padding-left: 40px; + + .itemFlex { + min-width: 80px; + padding: 23px 60px 23px 60px; + background: #f6f6f6; + // box-sizing: border-box; + border: 1px solid #f6f6f6; + font-size: 28px; + font-weight: 400; + color: #777777; + margin-right: 24px; + margin-bottom: 24px; + border-radius: 16px; + text-align: center; } - .pussBox { - display: flex; - flex-wrap: wrap; - padding-left: 40px; - - - - .itemFlex { - padding: 23px 47px 23px 47px; - background: #f6f6f6; - // box-sizing: border-box; - border: 1px solid #f6f6f6; - font-size: 28px; - font-weight: 400; - color: #000000; - margin-right: 24px; - margin-bottom: 24px; - border-radius: 16px; - } - - .itemactiveFlex { - padding: 23px 47px 23px 47px; - background: rgba(51, 127, 255, 0.1); - border-radius: 16px; - border: 1px solid #337FFF; - // box-sizing: border-box; - font-size: 28px; - font-weight: 400; - color: #337FFF; - margin-right: 24px; - margin-bottom: 24px; - } + .itemactiveFlex { + min-width: 80px; + padding: 23px 60px 23px 60px; + background: rgba(51, 127, 255, 0.1); + border-radius: 16px; + border: 1px solid #337fff; + // box-sizing: border-box; + font-size: 28px; + font-weight: 400; + color: #337fff; + margin-right: 24px; + margin-bottom: 24px; } + } } diff --git a/src/pages/customerManagement/index.module.scss b/src/pages/customerManagement/index.module.scss index 4cf2db6..4517213 100644 --- a/src/pages/customerManagement/index.module.scss +++ b/src/pages/customerManagement/index.module.scss @@ -1,65 +1,61 @@ .mainBox { + .topBox { + width: 100%; + position: sticky; + top: 0; + z-index: 999; + // padding-bottom: 24px; + background: #fff; + // overflow: hidden; - .topBox { - width: 100%; - position: sticky; - top: 0; - z-index: 999; - // padding-bottom: 24px; - background: #fff; - // overflow: hidden; - - .search_input { - padding-top: 8px; - margin-left: 24px; - margin-right: 24px; - margin-bottom: 10px; - } - - .menuBox { - width: 100%; - display: flex; - flex: 1; - - - } - + .search_input { + padding-top: 8px; + margin-left: 24px; + margin-right: 24px; + margin-bottom: 10px; } - .totalFont { - margin-top: 24px; - margin-left: 24px; - font-size: 26px; - font-weight: 400; - color: #000000; - margin-bottom: 15px; + .menuBox { + width: 100%; + display: flex; + flex: 1; } + } - .order_list { - height: calc(100vh - env(safe-area-inset-bottom) - 200px); - background: #f7f7f7; + .totalFont { + margin-top: 24px; + margin-left: 24px; + font-size: 26px; + font-weight: 400; + color: #aeaeae; + margin-bottom: 15px; + } + + .order_list { + height: calc(100vh - env(safe-area-inset-bottom) - 200px); + background: #f7f7f7; + } + + .bottom_box { + height: 160px; + background: #ffffff; + position: fixed; + bottom: 0; + z-index: 1; + + .bottom_btn { + margin-top: 16px; + margin-left: 24px; + margin-right: 24px; + width: 702px; + height: 80px; + background: #337fff; + border-radius: 44px; + line-height: 80px; + text-align: center; + font-size: 28px; + font-weight: 500; + color: #ffffff; } - - .bottom_box { - height: 160px; - background: #FFFFFF; - position: fixed; - bottom: 0; - z-index: 1; - - .bottom_btn { - margin-top: 16px; - margin-left: 24px; - margin-right: 24px; - width: 702px; - height: 80px; - background: #337FFF; - border-radius: 44px; - line-height: 80px; - text-align: center; - font-size: 28px; - font-weight: 500; - color: #FFFFFF; - } - } -} \ No newline at end of file + } +} diff --git a/src/pages/orderDetails/components/addressDetailBox/index.module.scss b/src/pages/orderDetails/components/addressDetailBox/index.module.scss index 4260b47..8d29843 100644 --- a/src/pages/orderDetails/components/addressDetailBox/index.module.scss +++ b/src/pages/orderDetails/components/addressDetailBox/index.module.scss @@ -1,141 +1,137 @@ .addressBox { - margin-right: 24px; - // width: 702px; - height: 223px; - background: #FFFFFF; - border-radius: 16px; + margin-right: 24px; + // width: 702px; + height: 223px; + background: #ffffff; + border-radius: 16px; + margin-top: 24px; + margin-left: 24px; + + .topBox { + padding-top: 28px; + display: flex; + align-items: center; + + .cirle { + border-radius: 50%; + margin-left: 32px; + width: 64px; + height: 64px; + background: #4a7fff; + display: flex; + align-items: center; + justify-content: center; + + .dingwei { + color: #ffffff; + font-size: 26px; + } + } + + .address { + margin-left: 24px; + width: 461px; + height: 78px; + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + margin-right: 41px; + display: flex; + align-items: center; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; /*这里设置几行*/ + overflow: hidden; + } + + .icon_more { + font-size: 50px; + } + } + + .line { + margin-top: 16px; + float: right; + margin-right: 32px; + width: 550px; + height: 1px; + background: #000000; + opacity: 0.1; + } + + .bottom { + display: flex; + align-items: center; + justify-content: flex-end; margin-top: 24px; - margin-left: 24px; - .topBox { - padding-top: 28px; - display: flex; - align-items: center; - - .cirle { - border-radius: 50%; - margin-left: 32px; - width: 64px; - height: 64px; - background: #4A7FFF; - display: flex; - align-items: center; - justify-content: center; - - .dingwei { - color: #FFFFFF; - font-size: 26px; - } - } - - .address { - margin-left: 24px; - width: 461px; - height: 78px; - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; - margin-right: 41px; - display: flex; - align-items: center; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; /*这里设置几行*/ - overflow: hidden; - } - - .icon_more { - font-size: 50px; - } + .name { + line-height: 34px; + width: 84px; + height: 34px; + @include common_ellipsis(); + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #343434; + margin-right: 16px; } - .line { - margin-top: 16px; - float: right; - margin-right: 32px; - width: 550px; - height: 1px; - background: #000000; - opacity: 0.1; + .phone { + height: 34px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #343434; + margin-right: 70px; } - .bottom { - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 24px; + .reatBox { + position: relative; + margin-right: 32px; - .name { - line-height: 34px; - width: 84px; - height: 34px; - @include common_ellipsis(); - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #343434; - margin-right: 16px; + .updateBtn { + width: 200px; + font-size: $font_size_min; + background-color: #f0f0f0; + height: 64px; + border-radius: 16px; + color: $color_font_two; + // position: absolute; + bottom: 10px; + // right: -10px; + text-align: center; + z-index: 999; + + .updateBtn_list { + position: absolute; + display: flex; + z-index: 5; + width: 100%; + + .updateBtn_item_select { + color: #fff; + } } - .phone { - height: 34px; - font-size: 28px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: #343434; - margin-right: 70px; + .updateBtn_item { + flex: 1; + text-align: center; + line-height: 64px; } - .reatBox { - position: relative; - margin-right: 32px; - - .updateBtn { - - width: 200px; - font-size: $font_size_min; - background-color: #F0F0F0; - height: 64px; - border-radius: 24px; - color: $color_font_two; - // position: absolute; - bottom: 10px; - // right: -10px; - text-align: center; - z-index: 999; - - .updateBtn_list { - position: absolute; - display: flex; - z-index: 5; - width: 100%; - - .updateBtn_item_select { - color: #fff; - } - } - - .updateBtn_item { - flex: 1; - text-align: center; - line-height: 64px; - } - - .updateBtn_select { - color: #fff; - background-color: $color_main; - border-radius: 24px; - position: absolute; - width: 100px; - height: 61px; - z-index: 1; - transition: all 0.3s ease-in-out; - } - - } + .updateBtn_select { + color: #fff; + background-color: $color_main; + border-radius: 16px; + position: absolute; + width: 100px; + height: 61px; + z-index: 1; + transition: all 0.3s ease-in-out; } - - + } } -} \ No newline at end of file + } +} diff --git a/src/pages/orderDetails/components/addressDetailBox/index.tsx b/src/pages/orderDetails/components/addressDetailBox/index.tsx index 32647b9..002f951 100644 --- a/src/pages/orderDetails/components/addressDetailBox/index.tsx +++ b/src/pages/orderDetails/components/addressDetailBox/index.tsx @@ -23,7 +23,7 @@ const AddressDetailBox = (props: propsObj) => { navSelect?.(obj)}> - + { receivingStatus == 1 && {obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}