🌈 style(UI):修改UI样式
This commit is contained in:
Haiyi
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;
|
||||
@ -73,6 +73,6 @@
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
}
|
||||
.customRightSlot{
|
||||
.customRightSlot {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,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;
|
||||
}
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 37px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #337fff;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
.flex_right {
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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