Browse Source
refactor(personalInformation): 提取样式到单独文件并添加字体调整按钮
refactor(personalInformation): 提取样式到单独文件并添加字体调整按钮
将personalInformation.vue中的样式提取到personallInformation.scss文件 添加加大和减小字体的按钮组件master
2 changed files with 802 additions and 796 deletions
-
803pages/personalInformation/personalInformation.vue
-
795pages/personalInformation/personallInformation.scss
@ -0,0 +1,795 @@ |
|||
.info-container { |
|||
padding: 20rpx; |
|||
background: #ffffff; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.header-app { |
|||
float: left; |
|||
|
|||
image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border: 8rpx solid rgba(240, 240, 240, 1); |
|||
border-radius: 50%; |
|||
margin-right: 20rpx; |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
|
|||
.info { |
|||
font-size: 24rpx; |
|||
float: left; |
|||
|
|||
view { |
|||
padding: 6rpx 0; |
|||
} |
|||
|
|||
.username { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.company { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.set { |
|||
position: absolute; |
|||
right: 20rpx; |
|||
top: 20rpx; |
|||
font-size: 52rpx; |
|||
} |
|||
|
|||
.nearby { |
|||
position: absolute; |
|||
right: 92rpx; |
|||
top: 20rpx; |
|||
|
|||
image { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
} |
|||
} |
|||
|
|||
.mys-list { |
|||
background: #ffffff; |
|||
overflow: hidden; |
|||
padding: 20rpx; |
|||
margin-top: 10rpx; |
|||
clear: both; |
|||
position: relative; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.mys-mask { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.list-label { |
|||
// padding-bottom: 20rpx; |
|||
border-bottom: solid 1px #f8f8f8; |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.weui-grids { |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
&:before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2rpx; |
|||
color: #d9d9d9; |
|||
-webkit-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
&:after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 2rpx; |
|||
bottom: 0; |
|||
color: #d9d9d9; |
|||
-webkit-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
-webkit-transform: scaleX(0.5); |
|||
transform: scaleX(0.5); |
|||
} |
|||
} |
|||
|
|||
.weui-grid { |
|||
position: relative; |
|||
float: left; |
|||
padding: 40rpx 4rpx 0 4rpx; |
|||
width: 25%; |
|||
height: 130rpx; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
|
|||
&:before { |
|||
content: " "; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 2rpx; |
|||
bottom: 0; |
|||
color: #d9d9d9; |
|||
-webkit-transform-origin: 100% 0; |
|||
transform-origin: 100% 0; |
|||
-webkit-transform: scaleX(0.5); |
|||
transform: scaleX(0.5); |
|||
} |
|||
|
|||
&:after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 2rpx; |
|||
color: #d9d9d9; |
|||
-webkit-transform-origin: 0 100%; |
|||
transform-origin: 0 100%; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #ECECEC; |
|||
} |
|||
|
|||
button { |
|||
background: none; |
|||
|
|||
&::after { |
|||
border: none; |
|||
color: unset; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.weui-grid-two { |
|||
position: relative; |
|||
float: left; |
|||
padding: 40rpx 4rpx 0 4rpx; |
|||
width: 40%; |
|||
height: 130rpx; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.weui-grid__bg { |
|||
position: relative; |
|||
float: left; |
|||
padding: 0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.weui-grid__icon { |
|||
width: 40rpx; |
|||
margin: 0 auto; |
|||
|
|||
image { |
|||
display: block; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.weui-grid__icon + .weui-grid__label { |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.weui-grid__label { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hot-line { |
|||
background: #eeeeee; |
|||
border-radius: 30rpx; |
|||
padding: 12rpx 30rpx; |
|||
margin-bottom: 10rpx; |
|||
font-size: 24rpx; |
|||
|
|||
image { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
float: left; |
|||
margin-right: 10rpx; |
|||
margin-top: 6rpx; |
|||
} |
|||
} |
|||
|
|||
.header { |
|||
margin: 90rpx 0 90rpx 50rpx; |
|||
border-bottom: 1px solid #ccc; |
|||
text-align: center; |
|||
width: 650rpx; |
|||
height: 300rpx; |
|||
line-height: 450rpx; |
|||
|
|||
image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 50rpx; |
|||
margin-bottom: 90rpx; |
|||
|
|||
text { |
|||
display: block; |
|||
color: #9d9d9d; |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
border-radius: 80rpx; |
|||
margin: 70rpx 50rpx; |
|||
font-size: 35rpx; |
|||
} |
|||
|
|||
.order-tag { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
box-sizing: border-box; |
|||
min-width: 32rpx; |
|||
padding: 0 6rpx; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; |
|||
line-height: 28rpx; |
|||
text-align: center; |
|||
background-color: #ee0a24; |
|||
border: 1px solid #fff; |
|||
border-radius: 32rpx; |
|||
-webkit-transform: translate(50%, -50%); |
|||
transform: translate(50%, -50%); |
|||
-webkit-transform-origin: 100%; |
|||
transform-origin: 100%; |
|||
} |
|||
|
|||
.date_box { |
|||
height: 68rpx; |
|||
display: block; |
|||
width: calc(50% - 92rpx); |
|||
float: right; |
|||
padding: 0 10rpx; |
|||
text-align: center; |
|||
background: #f6f6f6; |
|||
border-radius: 10rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.wareHouse { |
|||
padding: 12rpx 0 8rpx 0; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
float: left; |
|||
} |
|||
|
|||
.select_box { |
|||
line-height: 68rpx; |
|||
float: right; |
|||
color: #999999; |
|||
} |
|||
} |
|||
|
|||
.select_box { |
|||
width: calc(100% - 80rpx); |
|||
height: 68rpx; |
|||
position: relative; |
|||
font-size: 32rpx; |
|||
|
|||
.select { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 10rpx 0 20rpx; |
|||
background: #f6f6f6; |
|||
border-radius: 10rpx; |
|||
|
|||
.select_text { |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
line-height: 68rpx; |
|||
flex: 1; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.select_img { |
|||
display: block; |
|||
transition: transform 0s; |
|||
|
|||
&_rotate { |
|||
transform: rotate(180deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.option_box { |
|||
position: fixed; |
|||
top: 290rpx; |
|||
left: 0; |
|||
width: 100%; |
|||
height: calc(100% - 290rpx); |
|||
background: rgba(0, 0, 0, 0.6); |
|||
z-index: 999; |
|||
float: left; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.option_team { |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
background: #fff; |
|||
height: 0; |
|||
transition: height 0.3s; |
|||
border-right: 1px solid #efefef; |
|||
|
|||
.option { |
|||
display: block; |
|||
line-height: 80rpx; |
|||
font-size: 24rpx; |
|||
color: #777777; |
|||
border-top: 1px solid #efefef; |
|||
border-bottom: 1px solid #efefef; |
|||
padding: 0 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Email_error { |
|||
color: #ff5d55; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.email_input { |
|||
font-size: 24rpx; |
|||
padding: 8rpx 20rpx; |
|||
color: #999999; |
|||
background: #f6f6f6; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.map { |
|||
position: relative; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
|
|||
.icon { |
|||
position: absolute; |
|||
right: 10rpx; |
|||
bottom: 10rpx; |
|||
z-index: 9999; |
|||
} |
|||
} |
|||
|
|||
#map { |
|||
position: relative; |
|||
} |
|||
|
|||
.station { |
|||
position: absolute; |
|||
left: 10rpx; |
|||
bottom: 10rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
z-index: 9999; |
|||
} |
|||
|
|||
/* 新版样式 */ |
|||
.main { |
|||
padding-bottom: 200rpx; |
|||
} |
|||
.header-box { |
|||
width: 100%; |
|||
|
|||
.back-img { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 449rpx; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.box { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
font-weight: bold; |
|||
font-size: 33rpx; |
|||
color: #FFFFFF; |
|||
margin-left: 28rpx; |
|||
} |
|||
} |
|||
|
|||
.userinfo { |
|||
margin: 42rpx 28rpx 0 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.avatar { |
|||
width: 104rpx; |
|||
height: 104rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.information { |
|||
margin-left: 24rpx; |
|||
|
|||
.name, |
|||
.company, |
|||
.add-company { |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 400; |
|||
font-size: $text-base; |
|||
// font-size: 26rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.company { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.btns { |
|||
.add-company { |
|||
color: #FFFFFF; |
|||
margin-left: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: $text-xl; |
|||
} |
|||
color: #FFFFFF; |
|||
.login-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: $text-xl; |
|||
// font-size: 33rpx; |
|||
color: #FFFFFF; |
|||
margin-left: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.icon-one { |
|||
width: 51rpx; |
|||
height: 44rpx; |
|||
} |
|||
|
|||
.icon-two { |
|||
width: 49rpx; |
|||
height: 44rpx; |
|||
margin-left: 35rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order-cart-box { |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin: 34rpx 14rpx 0 14rpx; |
|||
padding: 41rpx 35rpx 49rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: $text-xl; |
|||
// font-size: 29rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.order-list-box { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
.order-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
.icon { |
|||
width: 54rpx; |
|||
height: 44rpx; |
|||
} |
|||
|
|||
.name { |
|||
font-weight: 400; |
|||
font-size: $text-base; |
|||
// font-size: 26rpx; |
|||
color: #666666; |
|||
margin-top: 22rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order-list-box-position { |
|||
background-color: #fff4e9; |
|||
margin-top: 25rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 10rpx 15rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 14rpx; |
|||
|
|||
.text { |
|||
color: #ff9126; |
|||
font-size: 26rpx; |
|||
font-weight: 400; |
|||
padding: 15rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.icon { |
|||
width: 13rpx; |
|||
height: 23rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tool-box { |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin: 20rpx 14rpx 0; |
|||
padding: 42rpx 35rpx 56rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: $text-xl; |
|||
// font-size: 29rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.tool-list-box { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
position: relative; |
|||
|
|||
.tool-list { |
|||
width: 25%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 0; |
|||
margin-bottom: 48rpx; |
|||
line-height: 1; |
|||
padding: 0; |
|||
background: none; |
|||
border: none !important; |
|||
border-radius: none !important; |
|||
|
|||
&::after { |
|||
border: none; |
|||
} |
|||
|
|||
.icon { |
|||
width: 54rpx; |
|||
height: 44rpx; |
|||
} |
|||
|
|||
.name { |
|||
font-weight: 400; |
|||
font-size: $text-base; |
|||
// font-size: 26rpx; |
|||
color: #666666; |
|||
margin-top: 22rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.customer { |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin: 20rpx 14rpx 0rpx; |
|||
padding: 42rpx 35rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.customer-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
padding-bottom: 28rpx; |
|||
border-bottom: 1px solid #E6E6E6; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.icon { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
|
|||
.text { |
|||
font-weight: 500; |
|||
font-size: 26rpx; |
|||
color: #333333; |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
.icon { |
|||
width: 15rpx; |
|||
height: 29rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.customer-list-box { |
|||
margin-top: 28rpx; |
|||
|
|||
.customer-list { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-bottom: 14rpx; |
|||
border-bottom: 1px solid #E6E6E6; |
|||
margin-bottom: 22rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0rpx; |
|||
} |
|||
|
|||
.left { |
|||
font-weight: 400; |
|||
font-size: 26rpx; |
|||
color: #4D4D4D; |
|||
} |
|||
|
|||
.right { |
|||
.icon { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.map-box { |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin: 20rpx 14rpx 0; |
|||
padding: 40rpx 35rpx 38rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.map { |
|||
position: relative; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin-top: 26rpx; |
|||
|
|||
.icon { |
|||
position: absolute; |
|||
right: 10rpx; |
|||
bottom: 10rpx; |
|||
z-index: 9999; |
|||
} |
|||
} |
|||
|
|||
#map { |
|||
position: relative; |
|||
} |
|||
|
|||
.station { |
|||
position: absolute; |
|||
left: 10rpx; |
|||
bottom: 10rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
z-index: 9999; |
|||
} |
|||
} |
|||
|
|||
.company-information-box { |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1); |
|||
border-radius: 14rpx; |
|||
margin: 20rpx 14rpx 0; |
|||
padding: 40rpx 35rpx 42rpx; |
|||
margin-bottom: 100rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 29rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.box { |
|||
margin-top: 34rpx; |
|||
display: flex; |
|||
|
|||
.image { |
|||
width: 50%; |
|||
height: 225rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-comparison-one { |
|||
display: block; |
|||
font-weight: 400; |
|||
font-size: 29rpx; |
|||
color: #333333; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.price-comparison-two { |
|||
display: block; |
|||
font-weight: 400; |
|||
font-size: 29rpx; |
|||
color: #06CA64; |
|||
margin-top: 20rpx; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue