... ... @@ -144,9 +144,9 @@ export default {
bottom: 0;
.yoho-popup-container {
background-color: #fff;
position: relative;
opacity: 1;
overflow: hidden;
}
&:after {
... ...
... ... @@ -22,8 +22,8 @@
</div>
</div>
</slot>
<div name="footer">
<YohoButton txt="确定" class="footer" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -80,6 +80,8 @@ export default {
position: relative;
display: flex;
flex-direction: column;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -127,6 +129,20 @@ export default {
.footer {
font-size: 32px;
height: 112px;
background-color: white;
border-top: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.btn-wrapper {
width: 640px;
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
... ...
... ... @@ -22,8 +22,8 @@
</div>
</div>
</slot>
<div name="footer" class="footer">
<YohoButton txt="确定支付" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定支付" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -139,6 +139,8 @@ export default {
height: 714px;
background: white;
position: relative;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -198,6 +200,13 @@ export default {
box-sizing: border-box;
}
.btn-wrapper {
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
margin-top: 40px;
margin-bottom: 60px;
... ...
... ... @@ -17,8 +17,8 @@
</div>
</div>
</slot>
<div name="footer">
<YohoButton txt="确定" class="footer" @click="pay"></YohoButton>
<div class="footer">
<YohoButton txt="确定" class="btn-wrapper" @click="pay"></YohoButton>
</div>
</div>
</YohoActionSheet>
... ... @@ -75,6 +75,8 @@ export default {
position: relative;
display: flex;
flex-direction: column;
border-top-left-radius: 32px 32px;
border-top-right-radius: 32px 32px;
}
.header {
... ... @@ -121,6 +123,20 @@ export default {
.footer {
font-size: 32px;
height: 112px;
background-color: white;
border-top: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.btn-wrapper {
width: 640px;
height: 80px;
line-height: 80px;
font-size: 32px;
font-weight: bold;
}
.price-info {
... ...
... ... @@ -25,10 +25,10 @@ import ProductInfo from './components/confirm/buyer-product';
import AddressInfo from './components/confirm/address';
import TitleComp from './components/confirm/title';
import BuyerFeeInfo from './components/confirm/buyer-fee';
import OrderInfo from './components/confirm/order-info';
import OrderInfo from './components/confirm/buyer-order-info';
import OrderFooter from './components/confirm/buyer-order-footer';
import Coupon from './components/confirm/coupon';
import Promotion from './components/confirm/promotion';
import Coupon from './components/confirm/buyer-coupon';
import Promotion from './components/confirm/buyer-promotion';
import { Types, UserType } from 'store/order/order-confirm';
import { get } from 'lodash';
... ...
... ... @@ -51,6 +51,10 @@ export default {
.agree {
font-size: 24px;
color: #999;
height: 76px;
background-color: white;
padding: 0 40px;
line-height: 76px;
}
.link {
... ...
... ... @@ -48,7 +48,7 @@ export default {
.red {
font-size: 36px;
color: red;
color: #d0021b;
font-weight: bold;
}
</style>
... ...
<template>
<div class="agree-wrapper">
<Agree></Agree>
<div class="order-footer-wrapper">
<div class="btn1">
<span>待支付:<span class="red">¥{{amount}}</span></span>
<div>实付金额:<span class="red">¥{{amount}}</span></div>
<div class="desc">本次交易由闲鱼x有货提供服务</div>
</div>
<YohoButton class="btn2" txt="去支付" @click="onClick"></YohoButton>
</div>
</div>
</template>
<script>
import Agree from './agree';
export default {
name: 'BuyerOrderFooter',
props: ['amount'],
components: {
Agree
},
methods: {
onClick() {
this.$emit('click');
... ... @@ -24,25 +33,39 @@ export default {
.order-footer-wrapper {
width: 100%;
border-top: 1px solid #eee;
padding: 0 40px;
height: 120px;
display: flex;
align-items: center;
}
.agree-wrapper {
border-top: 1px solid #eee;
}
.btn1 {
flex: 1;
font-size: 24px;
text-align: center;
line-height: 120px;
text-align: left;
}
.btn2 {
width: 300px;
font-size: 36px;
width: 220px;
height: 80px;
line-height: 80px;
font-size: 24px;
}
.red {
font-size: 36px;
color: red;
font-size: 28px;
color: #d0021b;
font-weight: bolder;
}
.desc {
margin-top: 8px;
font-size: 20px;
color: #999;
}
</style>
... ...
... ... @@ -40,7 +40,8 @@ export default {
.input-wrapper {
display: flex;
position: relative;
height: 100px;
overflow: hidden;
height: 120px;
background: #f5f5f5;
}
... ... @@ -50,18 +51,20 @@ export default {
margin-right: 10px;
font-size: 40px;
font-weight: bolder;
line-height: 100px;
line-height: 120px;
}
.tip {
flex: 1;
font-size: 28px;
line-height: 100px;
font-size: 56px;
font-weight: 500;
line-height: 120px;
background: #f5f5f5;
}
::placeholder {
color: #ccc;
font-size: 28px;
opacity: 1; /* Firefox */
}
... ...
... ... @@ -115,7 +115,7 @@ export default {
.fee {
font-size: 28px;
color: red;
color: #d0021b;
}
.icon-class {
... ...
... ... @@ -32,7 +32,7 @@ export default {
}
.red {
color: red;
color: #d0021b;
}
.tip2 {
... ...
... ... @@ -10,7 +10,9 @@
</div>
<div class="footer">
<OrderAgree :value="agree" @input="changeAgree" class="agree-wrapper" :desc="agreeDesc"></OrderAgree>
<YohoButton :txt="txt" @click="onClick" :disable="!agree"></YohoButton>
<div class="btn-wrapper">
<YohoButton :txt="txt" class="submit-btn" @click="onClick" :disable="!agree"></YohoButton>
</div>
</div>
</LayoutApp>
</template>
... ... @@ -162,13 +164,6 @@ export default {
</script>
<style lang="scss" scoped>
.footer {
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
.body {
height: 100%;
margin: 0 40px;
... ... @@ -185,11 +180,27 @@ export default {
border-top: 1px solid #eee;
}
.agree-wrapper {
height: 60px;
background-color: white;
.footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #eee;
z-index: 1;
}
.btn-wrapper {
margin-bottom: 40px;
padding: 0 40px;
line-height: 60px;
}
.agree-wrapper {
padding: 0 50px;
}
.submit-btn {
height: 80px;
line-height: 80px;
font-size: 28px;
}
</style>
... ...