🌈 style(UI):修改UI样式
This commit is contained in:
parent
3e0fd03638
commit
fa267fa5a9
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
{
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user