🌈 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;
flex: 1 1 auto;
padding-left: 60px;
background: #eee;
background: #f7f7f7;
box-sizing: border-box;
display: flex;
align-items: center;

View File

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

View File

@ -310,7 +310,7 @@ const AddAddress = () => {
<View className={styles.topFont}></View>
<View className={styles.bottomFont}>使</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 File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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