🌈 style(UI):修改UI样式

This commit is contained in:
Haiyi 2022-12-09 11:13:20 +08:00
parent 3e0fd03638
commit fa267fa5a9
10 changed files with 627 additions and 653 deletions

View File

@ -19,7 +19,7 @@
height: 60px; height: 60px;
flex: 1 1 auto; flex: 1 1 auto;
padding-left: 60px; padding-left: 60px;
background: #eee; background: #f7f7f7;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
@ -73,6 +73,6 @@
padding-left: 20px !important; padding-left: 20px !important;
} }
} }
.customRightSlot{ .customRightSlot {
margin-right: 20px; margin-right: 20px;
} }

View File

@ -1,10 +1,9 @@
.main { .main {
background: #FFFFFF; background: #ffffff;
border-radius: 16px; border-radius: 16px;
margin: 24px; margin: 24px;
padding: 40px 32px 50px 32px; padding: 40px 32px 50px 32px;
.itemBox { .itemBox {
display: flex; display: flex;
align-items: center; align-items: center;
@ -12,12 +11,10 @@
border-bottom: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7;
margin-bottom: 40px; margin-bottom: 40px;
.leftBox { .leftBox {
width: 176px; width: 176px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
display: flex; display: flex;
@ -33,16 +30,11 @@
.inputClass { .inputClass {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
} }
} }
} }
.itemBox:first-child { .itemBox:first-child {
@ -55,7 +47,7 @@
.leftBox { .leftBox {
width: 176px; width: 176px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
display: flex; display: flex;
@ -71,7 +63,7 @@
.inputClass { .inputClass {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
} }
@ -84,10 +76,9 @@
margin-bottom: 40px; margin-bottom: 40px;
border-bottom: none; border-bottom: none;
.leftBox { .leftBox {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
display: flex; display: flex;
@ -98,11 +89,10 @@
.inputClass { .inputClass {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
} }
} }
.checkBox { .checkBox {
@ -110,20 +100,20 @@
margin-top: 24px; margin-top: 24px;
width: 702px; width: 702px;
height: 120px; height: 120px;
background: #FFFFFF; background: #ffffff;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 15px;
.leftCheck { .leftCheck {
margin-left: 32px; margin-left: 32px;
.topFont { .topFont {
margin-top: 24px; margin-top: 24px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
} }
@ -131,20 +121,17 @@
.bottomFont { .bottomFont {
margin-top: 8px; margin-top: 8px;
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #777777;
} }
} }
} }
.bottomBox { .bottomBox {
width: 750px; width: 750px;
height: 160px; height: 160px;
background: #FFFFFF; background: #ffffff;
bottom: 0; bottom: 0;
padding-top: 14px; padding-top: 14px;
position: fixed; position: fixed;
@ -154,13 +141,13 @@
margin-left: 32px; margin-left: 32px;
width: 702px; width: 702px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
opacity: 0.5; opacity: 0.5;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
} }
@ -169,12 +156,12 @@
margin-left: 32px; margin-left: 32px;
width: 702px; width: 702px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
} }
@ -183,12 +170,12 @@
width: 311px; width: 311px;
height: 80px; height: 80px;
border-radius: 44px; border-radius: 44px;
border: 1px solid #087EFF; border: 1px solid #f4536b;
margin-left: 48px; margin-left: 48px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #337FFF; color: #f4536b;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
background-color: #fff; background-color: #fff;
@ -197,25 +184,25 @@
.nobtn { .nobtn {
width: 311px; width: 311px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
opacity: 0.5; opacity: 0.5;
margin-left: 32px; margin-left: 32px;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
font-size: 28px; font-size: 28px;
color: FFFFFF; color: #ffffff;
} }
.sureBox { .sureBox {
width: 311px; width: 311px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
margin-left: 32px; margin-left: 32px;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;

View File

@ -310,7 +310,7 @@ const AddAddress = () => {
<View className={styles.topFont}></View> <View className={styles.topFont}></View>
<View className={styles.bottomFont}>使</View> <View className={styles.bottomFont}>使</View>
</View> </View>
<Switch checked={ischecked} color="#337fff" onChange={(e) => { onChange(e) }} /> <Switch checked={ischecked} color="#337fff" onChange={(e) => { onChange(e) }} style={{ marginRight: '20rpx' }} />
</View> </View>
{ {

View File

@ -1,5 +1,5 @@
.scrollView { .scrollView {
height: 600px; height: 400px;
.thirdBox { .thirdBox {
padding-left: 48px; padding-left: 48px;
@ -18,51 +18,46 @@
flex-shrink: 0; flex-shrink: 0;
.activemodeBox { .activemodeBox {
padding: 10px 20px;
min-width: 200px;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 16px; margin-right: 16px;
padding: 17px 48px 17px 48px; // padding: 17px 48px 17px 48px;
// width: 152px;
// height: 68px;
background: rgba(51, 127, 255, 0.1); background: rgba(51, 127, 255, 0.1);
border-radius: 8px; border-radius: 8px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #337FFF; color: #337fff;
text-align: center; text-align: center;
line-height: 68px; line-height: 68px;
border: 1px solid #337FFF; border: 1px solid #337fff;
box-sizing: border-box; box-sizing: border-box;
} }
.modeBox { .modeBox {
min-width: 200px;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 16px; margin-right: 16px;
padding: 17px 48px 17px 48px; padding: 10px 20px;
// width: 152px;
// height: 68px;
background: #f6f6f6; background: #f6f6f6;
border-radius: 8px; border-radius: 8px;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #777777;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
text-align: center; text-align: center;
line-height: 68px; line-height: 68px;
box-sizing: border-box; box-sizing: border-box;
// opacity: 0.4;
} }
} }
} }
} }
.bottomBox { .bottomBox {
width: 100%; width: 100%;
// width: 750px; // width: 750px;
height: 160px; height: 160px;
background: #FFFFFF; background: #ffffff;
// position: fixed; // position: fixed;
// bottom: calc($customTabBarHeight + env(safe-area-inset-bottom)); // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
z-index: 99; z-index: 99;
@ -76,11 +71,11 @@
width: 311px; width: 311px;
height: 80px; height: 80px;
border-radius: 44px; border-radius: 44px;
border: 1px solid #087EFF; border: 1px solid #087eff;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #337FFF; color: #337fff;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
background-color: #fff; background-color: #fff;
@ -95,7 +90,7 @@
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
letter-spacing: 4px; letter-spacing: 4px;
@ -105,7 +100,7 @@
margin-right: 32px; margin-right: 32px;
width: 311px; width: 311px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -123,5 +118,5 @@
top: 37px; top: 37px;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #337FFF; color: #337fff;
} }

View File

@ -15,14 +15,14 @@
.itemLeft { .itemLeft {
margin-left: 24px; margin-left: 24px;
display: flex; display: flex;
align-items: center;
.itemCile { .itemCile {
width: 78px; width: 78px;
height: 78px; height: 78px;
background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%); background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%);
font-size: 32px; font-size: 32px;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 78px; line-height: 78px;
border-radius: 50%; border-radius: 50%;
@ -61,7 +61,7 @@
padding: 6px 16px 6px 16px; padding: 6px 16px 6px 16px;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: #4581FF; color: #4581ff;
background: #ecf2ff; background: #ecf2ff;
border-radius: 8px; border-radius: 8px;
} }
@ -77,7 +77,7 @@
margin-left: 16px; margin-left: 16px;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
color: #4581FF; color: #4581ff;
width: 100rpx; width: 100rpx;
} }
} }
@ -115,5 +115,4 @@
font-size: 24px; font-size: 24px;
} }
} }
} }

View File

@ -4,27 +4,27 @@
padding-left: 40px; padding-left: 40px;
.itemFlex { .itemFlex {
padding: 23px 11px 23px 11px; padding: 23px 18px 23px 18px;
background: #f6f6f6; background: #f6f6f6;
// box-sizing: border-box; // box-sizing: border-box;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #000000; color: #777777;
margin-right: 24px; margin-right: 24px;
margin-bottom: 24px; margin-bottom: 24px;
border-radius: 16px; border-radius: 16px;
} }
.itemactiveFlex { .itemactiveFlex {
padding: 23px 11px 23px 11px; padding: 23px 18px 23px 18px;
background: rgba(51, 127, 255, 0.1); background: rgba(51, 127, 255, 0.1);
border-radius: 16px; border-radius: 16px;
border: 1px solid #337FFF; border: 1px solid #337fff;
// box-sizing: border-box; // box-sizing: border-box;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #337FFF; color: #337fff;
margin-right: 24px; margin-right: 24px;
margin-bottom: 24px; margin-bottom: 24px;
} }

View File

@ -13,30 +13,31 @@
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 40px; padding-left: 40px;
.itemFlex { .itemFlex {
padding: 23px 47px 23px 47px; min-width: 80px;
padding: 23px 60px 23px 60px;
background: #f6f6f6; background: #f6f6f6;
// box-sizing: border-box; // box-sizing: border-box;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #000000; color: #777777;
margin-right: 24px; margin-right: 24px;
margin-bottom: 24px; margin-bottom: 24px;
border-radius: 16px; border-radius: 16px;
text-align: center;
} }
.itemactiveFlex { .itemactiveFlex {
padding: 23px 47px 23px 47px; min-width: 80px;
padding: 23px 60px 23px 60px;
background: rgba(51, 127, 255, 0.1); background: rgba(51, 127, 255, 0.1);
border-radius: 16px; border-radius: 16px;
border: 1px solid #337FFF; border: 1px solid #337fff;
// box-sizing: border-box; // box-sizing: border-box;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #337FFF; color: #337fff;
margin-right: 24px; margin-right: 24px;
margin-bottom: 24px; margin-bottom: 24px;
} }

View File

@ -1,5 +1,4 @@
.mainBox { .mainBox {
.topBox { .topBox {
width: 100%; width: 100%;
position: sticky; position: sticky;
@ -20,10 +19,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex: 1; flex: 1;
} }
} }
.totalFont { .totalFont {
@ -31,7 +27,7 @@
margin-left: 24px; margin-left: 24px;
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: #000000; color: #aeaeae;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -42,7 +38,7 @@
.bottom_box { .bottom_box {
height: 160px; height: 160px;
background: #FFFFFF; background: #ffffff;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 1; z-index: 1;
@ -53,13 +49,13 @@
margin-right: 24px; margin-right: 24px;
width: 702px; width: 702px;
height: 80px; height: 80px;
background: #337FFF; background: #337fff;
border-radius: 44px; border-radius: 44px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
} }
} }
} }

View File

@ -2,7 +2,7 @@
margin-right: 24px; margin-right: 24px;
// width: 702px; // width: 702px;
height: 223px; height: 223px;
background: #FFFFFF; background: #ffffff;
border-radius: 16px; border-radius: 16px;
margin-top: 24px; margin-top: 24px;
margin-left: 24px; margin-left: 24px;
@ -17,13 +17,13 @@
margin-left: 32px; margin-left: 32px;
width: 64px; width: 64px;
height: 64px; height: 64px;
background: #4A7FFF; background: #4a7fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.dingwei { .dingwei {
color: #FFFFFF; color: #ffffff;
font-size: 26px; font-size: 26px;
} }
} }
@ -92,12 +92,11 @@
margin-right: 32px; margin-right: 32px;
.updateBtn { .updateBtn {
width: 200px; width: 200px;
font-size: $font_size_min; font-size: $font_size_min;
background-color: #F0F0F0; background-color: #f0f0f0;
height: 64px; height: 64px;
border-radius: 24px; border-radius: 16px;
color: $color_font_two; color: $color_font_two;
// position: absolute; // position: absolute;
bottom: 10px; bottom: 10px;
@ -125,17 +124,14 @@
.updateBtn_select { .updateBtn_select {
color: #fff; color: #fff;
background-color: $color_main; background-color: $color_main;
border-radius: 24px; border-radius: 16px;
position: absolute; position: absolute;
width: 100px; width: 100px;
height: 61px; height: 61px;
z-index: 1; z-index: 1;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
} }
} }
} }
} }

View File

@ -23,7 +23,7 @@ const AddressDetailBox = (props: propsObj) => {
<View className={styles.addressBox}> <View className={styles.addressBox}>
<View className={styles.topBox} onClick={() => navSelect?.(obj)}> <View className={styles.topBox} onClick={() => navSelect?.(obj)}>
<View className={styles.cirle}> <View className={styles.cirle}>
<IconFont name="icon-dingwei" size={26} color="#ffffff"></IconFont> <IconFont name="icon-cangku1" size={60}></IconFont>
</View> </View>
{ {
receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}</View> receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}</View>