parent
f7f0bf649d
commit
1a4fa39e5b
@ -0,0 +1,62 @@
|
||||
.station-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $rz-text-color-inverse;
|
||||
height: 120px;
|
||||
padding: 0 $rz-spacing-row-xxxl;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 15px 1px rgba(111, 140, 192, 0.3);
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
&__symbol {
|
||||
font-size: $rz-font-size-xl;
|
||||
color: $rz-color-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
&__price {
|
||||
font-size: 42px;
|
||||
color: $rz-color-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
&__btn {
|
||||
// margin-left: $rz-spacing-row-xxxl;
|
||||
@include display-flex-center;
|
||||
// width: 330px;
|
||||
padding: 0 36px;
|
||||
height: 90px;
|
||||
background: $rz-color-primary;
|
||||
// border-radius: 45px;
|
||||
&-txt {
|
||||
color: $rz-text-color-inverse;
|
||||
font-size: $rz-font-size-lg;
|
||||
}
|
||||
.btn-box__txt {
|
||||
color: $rz-color-primary;
|
||||
font-size: $rz-font-size-lg;
|
||||
}
|
||||
}
|
||||
&__btn2 {
|
||||
border-top-left-radius: 45px;
|
||||
border-bottom-left-radius: 45px;
|
||||
background: #ecf6ee;
|
||||
margin-left: $rz-spacing-row-xl;
|
||||
}
|
||||
&__btn1 {
|
||||
border-top-right-radius: 45px;
|
||||
border-bottom-right-radius: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { StandardProps } from '@tarojs/components/types/common';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import './NewFooter.scss';
|
||||
type FooterProps = {
|
||||
btnText?: string;
|
||||
btnText2?: string;
|
||||
onClick?: () => void;
|
||||
onClick2?: () => void;
|
||||
} & StandardProps;
|
||||
export const Footer: Taro.FC<FooterProps> = ({
|
||||
btnText,
|
||||
btnText2,
|
||||
onClick,
|
||||
onClick2,
|
||||
}) => {
|
||||
const handleClick = () => {
|
||||
if (typeof onClick === 'function') {
|
||||
onClick();
|
||||
}
|
||||
};
|
||||
const handleClick2 = () => {
|
||||
if (typeof onClick2 === 'function') {
|
||||
onClick2();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="station-footer">
|
||||
<View className="btn-box">
|
||||
<View
|
||||
className="btn-box__btn btn-box__btn2"
|
||||
hoverClass="btn-hover"
|
||||
onClick={handleClick2}>
|
||||
<Text className="btn-box__txt">{btnText2}</Text>
|
||||
</View>
|
||||
<View
|
||||
className="btn-box__btn btn-box__btn1"
|
||||
hoverClass="btn-hover"
|
||||
onClick={handleClick}>
|
||||
<Text className="btn-box__btn-txt">{btnText}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Footer.defaultProps = {
|
||||
btnText: '确定',
|
||||
btnText2: '手动输入车牌号',
|
||||
};
|
||||
@ -0,0 +1,233 @@
|
||||
// @keyframes flash {
|
||||
// 0% {
|
||||
// left: -150px;
|
||||
// }
|
||||
// 100% {
|
||||
// left: 120%;
|
||||
// }
|
||||
// }
|
||||
.my-car {
|
||||
// padding-top: $rz-spacing-col-xxxl;
|
||||
height: 100vh;
|
||||
background: $rz-bg-color-grey;
|
||||
&__tip {
|
||||
margin: $rz-spacing-col-base $rz-spacing-row-xxxl;
|
||||
color: $rz-text-color;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
margin: 32px auto;
|
||||
// margin-top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 686px;
|
||||
// height: 258px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
}
|
||||
.car-card {
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
padding: 48px;
|
||||
padding-top: 38px;
|
||||
padding-bottom: 20px;
|
||||
background: url('../../assets/images/my-car/img_mycar_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
.top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
&__logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.left-info {
|
||||
margin-left: 12px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
&__palate-no {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 160px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 36px;
|
||||
&.set-default {
|
||||
background: white;
|
||||
color: $rz-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
padding-top: $rz-spacing-col-sm;
|
||||
&__clock {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
&__time {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: -16px;
|
||||
}
|
||||
}
|
||||
.add-card {
|
||||
padding: $rz-spacing-col-base 0;
|
||||
&__img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
&__txt {
|
||||
margin-top: 22px;
|
||||
color: $rz-color-primary;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.station-detail {
|
||||
background: #f9f9f9;
|
||||
padding-bottom: 120px;
|
||||
&__list {
|
||||
margin-top: $rz-spacing-col-base;
|
||||
}
|
||||
&__list2 {
|
||||
border-top: 2px solid #f9f9f9;
|
||||
margin-bottom: $rz-spacing-col-base;
|
||||
}
|
||||
&__phone {
|
||||
font-size: $rz-font-size-xl;
|
||||
color: $rz-color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
&__white {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
&__modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: $zindex-modal;
|
||||
}
|
||||
&--active {
|
||||
display: block;
|
||||
.station-detail__overlay,
|
||||
.station-detail__container {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&__overlay,
|
||||
&__container {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
&__overlay {
|
||||
@include overlay;
|
||||
}
|
||||
&__container {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 30%;
|
||||
width: 686px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 0px 20px 0px rgba(54, 64, 110, 0.16);
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px 50px;
|
||||
}
|
||||
&__title {
|
||||
text-align: center;
|
||||
}
|
||||
&__input {
|
||||
margin-top: 36px;
|
||||
margin-bottom: 50px;
|
||||
height: 120px;
|
||||
background: #ecf6ee;
|
||||
opacity: 0.5;
|
||||
border-radius: 8px;
|
||||
padding-left: 37px;
|
||||
}
|
||||
&__box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.foo {
|
||||
width: 250px;
|
||||
// height: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.station-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $rz-text-color-inverse;
|
||||
height: 120px;
|
||||
padding: 0 $rz-spacing-row-xxxl;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 15px 1px rgba(111, 140, 192, 0.3);
|
||||
}
|
||||
|
||||
.btnCtrl {
|
||||
color: #ffffff;
|
||||
border-radius: 45rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 0 36rpx;
|
||||
height: 90rpx;
|
||||
background: #23bf69;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
background: #ecf6ee;
|
||||
color: #23bf69;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
Loading…
Reference in new issue