|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div style="background: #F3F4F8;">
|
|
|
<div class="noticeInfo">
|
|
|
<h2>缴费说明</h2>
|
|
|
1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
|
|
|
2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
|
|
|
- <div class="line_bottom" style="margin: .2rem 0 0;"></div>
|
|
|
+ <div class="line_bottom" style="margin: 20px 0 0;"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="section">
|
|
|
@@ -14,7 +14,7 @@
|
|
|
<div class="o_hd"><i class="check_default" :class="[item.isStatus ? 'check_active' : '']"></i></div>
|
|
|
<div class="o_bd">{{ item.courseType | coursesType }}</div>
|
|
|
<span class="o_ft" style="color: #1a1a1a;">
|
|
|
- 原价:<del style=" font-size: .16rem; color: #1a1a1a">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
|
|
|
+ 原价:<del style=" font-size: 16px; color: #1a1a1a">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -22,7 +22,7 @@
|
|
|
<div class="option">
|
|
|
<div class="o_bd"></div>
|
|
|
<span class="o_ft">
|
|
|
- 现价 ￥<span style="font-size: .2rem">{{ orderInfo.musicClassFee | moneyFormat }}</span>
|
|
|
+ 现价 ￥<span style="font-size: 20px">{{ orderInfo.musicClassFee | moneyFormat }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -52,12 +52,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="options sale" style="margin-bottom: .05rem;" v-if="con.marketPrice">
|
|
|
+ <div class="options sale" style="margin-bottom: 5px;" v-if="con.marketPrice">
|
|
|
<div class="option">
|
|
|
<div class="o_bd"></div>
|
|
|
<template v-if="(con.kitType == 'LEASE')">
|
|
|
<span class="o_ft">
|
|
|
- 押金:￥<span style="font-size: .2rem">{{ Number((con.depositFee - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
+ 押金:￥<span style="font-size: 20px">{{ Number((con.depositFee - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
<template v-if="con.price && con.kitType == 'FREE'">
|
|
|
@@ -66,7 +66,7 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
<span class="o_ft" v-if="con.price && con.kitType == 'GROUP'">
|
|
|
- 现价:￥<span style="font-size: .2rem">{{ Number((con.price - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
+ 现价:￥<span style="font-size: 20px">{{ Number((con.price - con.coupon).toFixed(2)) | moneyFormat }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -80,7 +80,7 @@
|
|
|
<div class="option">
|
|
|
<div class="o_hd"><i class="check_default" :class="[ instr.checked ? 'check_active' : '' ]"></i></div>
|
|
|
<div class="o_bd">{{ instr.name }}</div>
|
|
|
- <span class="o_ft" style="font-size: .14rem;">
|
|
|
+ <span class="o_ft" style="font-size: 14px;">
|
|
|
<!-- <del>原价:￥{{ instr.marketPrice }}</del> -->
|
|
|
<template v-if="instr.price == 0">免费</template>
|
|
|
<template v-else>现价:￥{{ instr.price | moneyFormat }}</template>
|
|
|
@@ -91,8 +91,8 @@
|
|
|
<div class="config config_other">
|
|
|
<div class="title"><span>配置</span></div>
|
|
|
<div class="content" v-for="item in instr.goodsList" :key="item.id">
|
|
|
- <div class="option" style="padding: 0 .05rem;">
|
|
|
- <div class="o_bd" style="font-size: .14rem">{{ item.name }}</div>
|
|
|
+ <div class="option" style="padding: 0 5px;">
|
|
|
+ <div class="o_bd" style="font-size: 14px">{{ item.name }}</div>
|
|
|
<!-- <span class="o_ft">￥{{ item.marketPrice }}</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -120,13 +120,19 @@
|
|
|
<span>￥{{ needPrice | moneyFormat }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- <a class="btn-submit" @click="onCheckSubmit">购买</a>
|
|
|
+ <a class="btn-submit">购买</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { permission } from '@/utils/directivePage'
|
|
|
+import { getSubjectGoodsAndInfoPreview } from '@/api/buildTeam'
|
|
|
|
|
|
+const paymentPatternType = {
|
|
|
+ 0: '按月',
|
|
|
+ 1: '按学期',
|
|
|
+ 2: '一次性'
|
|
|
+}
|
|
|
export default {
|
|
|
props: ["subjectId"],
|
|
|
data() {
|
|
|
@@ -164,11 +170,18 @@ export default {
|
|
|
paymentPattern: null,
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.__init()
|
|
|
+ },
|
|
|
methods: {
|
|
|
async __init() {
|
|
|
// 获取数据
|
|
|
- await getSubjectGoodsAndInfo(params).then(res => {
|
|
|
- let result = res.data
|
|
|
+ let params = {
|
|
|
+ musicGroupId: this.musicGroupId,
|
|
|
+ subjectId: this.subjectId
|
|
|
+ }
|
|
|
+ await getSubjectGoodsAndInfoPreview(params).then(res => {
|
|
|
+ let result = res
|
|
|
if (result.code == 200) {
|
|
|
let tempResult = result.data
|
|
|
this.paymentPattern = tempResult.musicGroupPaymentCalender ? tempResult.musicGroupPaymentCalender.paymentPattern : 2
|
|
|
@@ -274,13 +287,13 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
onCourseChange(item) {
|
|
|
- // 判断用户是否可以选择
|
|
|
- if (item.isStudentOptional) {
|
|
|
- item.isStatus = !item.isStatus
|
|
|
- this.calcPrice()
|
|
|
- }
|
|
|
- },
|
|
|
- onClickCheckbox() { //是否使用余额支付
|
|
|
+ // 判断用户是否可以选择
|
|
|
+ if (item.isStudentOptional) {
|
|
|
+ item.isStatus = !item.isStatus
|
|
|
+ this.calcPrice()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickCheckbox() { //是否使用余额支付
|
|
|
if (!this.payType) {
|
|
|
if (this.orderInfo.amount >= this.balance) {
|
|
|
this.needPrice = Number((this.orderInfo.amount - this.balance).toFixed(2))
|
|
|
@@ -467,394 +480,385 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.musicGroupPayment {
|
|
|
- padding-bottom: 0.7rem;
|
|
|
- min-height: 100vh;
|
|
|
- }
|
|
|
-
|
|
|
- .noticeInfo {
|
|
|
- h2 {
|
|
|
- font-size: 0.18rem;
|
|
|
- color: #1a1a1a;
|
|
|
- padding-bottom: 0.1rem;
|
|
|
- }
|
|
|
-
|
|
|
- position: relative;
|
|
|
- // margin-bottom: .1rem;
|
|
|
- background: #fff;
|
|
|
- padding: 0.15rem 0.16rem 0.1rem;
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #808080;
|
|
|
- }
|
|
|
-
|
|
|
- .protocolbtn {
|
|
|
- margin: 0.35rem 0;
|
|
|
- background: #14928a;
|
|
|
- color: #fff;
|
|
|
- font-size: 0.18rem;
|
|
|
- border-radius: 0.5rem;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .line_bottom {
|
|
|
- border-bottom: 1px solid #ededed;
|
|
|
- }
|
|
|
-
|
|
|
- .line_top {
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- }
|
|
|
-
|
|
|
- .section {
|
|
|
- padding: 0.16rem 0.16rem 0.1rem;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
-
|
|
|
- >.title {
|
|
|
- font-size: 0.2rem;
|
|
|
- line-height: 0.28rem;
|
|
|
- font-weight: bold;
|
|
|
- padding-bottom: 0.05rem;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: " ";
|
|
|
- width: 0.04rem;
|
|
|
- height: 0.15rem;
|
|
|
- background: #14928a;
|
|
|
- display: inline-block;
|
|
|
- margin-right: 0.07rem;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .indate {
|
|
|
- font-size: 0.14rem;
|
|
|
- padding: 0.06rem 0;
|
|
|
- display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #fa101d;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .options {
|
|
|
-
|
|
|
- // padding-top: .08rem;
|
|
|
- .oc {
|
|
|
- border-bottom: 1px solid #ededed;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: 0;
|
|
|
- // margin-top: 0.08rem;
|
|
|
- padding-top: 0.09rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .protocol {
|
|
|
- padding-left: 0.2rem;
|
|
|
- font-size: 0.1rem;
|
|
|
- line-height: 0.14rem;
|
|
|
- }
|
|
|
-
|
|
|
- &.classInfo {
|
|
|
- .option .o_ft {
|
|
|
- color: #1a1a1a;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.lines {
|
|
|
- margin-top: 0.05rem;
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- }
|
|
|
-
|
|
|
- &.sale {
|
|
|
- .option {
|
|
|
-
|
|
|
- .o_bd,
|
|
|
- .o_ft {
|
|
|
- font-size: 0.16rem;
|
|
|
- color: #f85043;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .option {
|
|
|
- line-height: 0.26rem;
|
|
|
- font-size: 0.15rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- padding: 0.1rem 0.05rem 0.05rem;
|
|
|
-
|
|
|
- .o_hd {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .o_bd {
|
|
|
- color: #1a1a1a;
|
|
|
- flex: 1;
|
|
|
- font-size: 0.16rem;
|
|
|
-
|
|
|
- .c {
|
|
|
- font-size: 0.12rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .o_ft {
|
|
|
- font-size: 0.16rem;
|
|
|
- color: #fa101d;
|
|
|
-
|
|
|
- del {
|
|
|
- color: #aaaaaa;
|
|
|
- font-size: 0.12rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .o_ft_price,
|
|
|
- .o_ft_price del {
|
|
|
- font-size: 0.16rem;
|
|
|
- color: #1a1a1a;
|
|
|
- }
|
|
|
-
|
|
|
- .check_default {
|
|
|
- margin-right: 0.08rem;
|
|
|
- display: block;
|
|
|
- width: 0.18rem;
|
|
|
- height: 0.18rem;
|
|
|
- background-color: #e9eaef;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- &.check_active {
|
|
|
- background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .configuration {
|
|
|
- padding-bottom: 0.09rem;
|
|
|
-
|
|
|
- .config_line {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 70%;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #808080;
|
|
|
-
|
|
|
- span {
|
|
|
- padding-left: 0.26rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .config_other {
|
|
|
- .title {
|
|
|
- // background:rgba(246,246,246,1);
|
|
|
- // height: 1px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // margin: .15rem 0;
|
|
|
- span {
|
|
|
- // position: absolute;
|
|
|
- // left: .12rem;
|
|
|
- // top: -.09rem;
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #808080;
|
|
|
- margin-left: 0.17rem;
|
|
|
- display: inline-block;
|
|
|
- background-color: #fff;
|
|
|
- padding: 0 0.04rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- font-size: 0.12rem;
|
|
|
- padding-left: 0.16rem;
|
|
|
- line-height: 0.22rem;
|
|
|
- color: #acacac;
|
|
|
-
|
|
|
- .o_ft {
|
|
|
- color: #aaaaaa;
|
|
|
- font-size: 0.12rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .options {
|
|
|
- padding-top: 0;
|
|
|
- padding-left: 0.16rem;
|
|
|
-
|
|
|
- .option {
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #6f6f6f;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .disabled {
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- .buy {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 0.6rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 0.2rem;
|
|
|
- border-top: 1px solid #ffe9e9e9;
|
|
|
- color: #000000;
|
|
|
- font-size: 0.12rem;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- .price {
|
|
|
- flex: 1;
|
|
|
- font-size: 0.16rem;
|
|
|
- }
|
|
|
-
|
|
|
- font-size: 0.16rem;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #fa101d;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 0.12rem;
|
|
|
- width: 0.6rem;
|
|
|
- display: inline-block;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- del {
|
|
|
- color: #b5b5b5;
|
|
|
-
|
|
|
- &.text {
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-submit {
|
|
|
- display: inline-block;
|
|
|
- font-size: 0.18rem;
|
|
|
- color: #fff;
|
|
|
- background: #f85043;
|
|
|
- border-radius: 1rem;
|
|
|
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
|
|
|
- padding: 0.08rem 0.46rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
- overflow-y: scroll;
|
|
|
- border-top: none !important;
|
|
|
- min-height: calc(100vh - 0.41rem);
|
|
|
- }
|
|
|
-
|
|
|
- .countDownContent {
|
|
|
- line-height: 0.4rem;
|
|
|
- text-align: center;
|
|
|
- font-size: 0.14rem;
|
|
|
- border-bottom: 0.01rem solid #ccc;
|
|
|
-
|
|
|
- .van-count-down {
|
|
|
- display: inline;
|
|
|
- color: #f00;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .loadingOrder {
|
|
|
- width: 90%;
|
|
|
- height: 1.8rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .van-loading__text {
|
|
|
- color: #444;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pay-section {
|
|
|
- margin-bottom: 0.1rem;
|
|
|
- padding: 0.1rem 0.08rem;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-name {
|
|
|
- padding-left: 0.1rem;
|
|
|
- flex: 1 auto;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 0.24rem;
|
|
|
- height: 0.24rem;
|
|
|
- }
|
|
|
-
|
|
|
- .van-checkbox {
|
|
|
- float: right;
|
|
|
-
|
|
|
- /deep/.van-checkbox__icon .van-icon {
|
|
|
- border-color: #e9eaef;
|
|
|
- background-color: #e9eaef;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.van-checkbox__icon--checked .van-icon {
|
|
|
- background-color: #2dc7aa;
|
|
|
- border-color: #2dc7aa;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .needprice {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0.02rem 0;
|
|
|
-
|
|
|
- del {
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #aaa;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 0.18rem;
|
|
|
- color: #f85043;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .couponprice {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .use_price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 0.14rem;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- img {
|
|
|
- padding-right: 0.08rem;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 0.16rem;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+.noticeInfo {
|
|
|
+ h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 16px 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #808080;
|
|
|
+}
|
|
|
+
|
|
|
+.protocolbtn {
|
|
|
+ margin: 35px 0;
|
|
|
+ background: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 50px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.line_bottom {
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+}
|
|
|
+
|
|
|
+.line_top {
|
|
|
+ border-top: 1px solid #ededed;
|
|
|
+}
|
|
|
+
|
|
|
+.section {
|
|
|
+ padding: 16px 16px 10px;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ >.title {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 5px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: " ";
|
|
|
+ width: 4px;
|
|
|
+ height: 15px;
|
|
|
+ background: #14928a;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 7px;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .indate {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 6px 0;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #fa101d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.options {
|
|
|
+
|
|
|
+ // padding-top: .08px;
|
|
|
+ .oc {
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ // margin-top: 0.08px;
|
|
|
+ padding-top: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .protocol {
|
|
|
+ padding-left: 20px;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.classInfo {
|
|
|
+ .option .o_ft {
|
|
|
+ color: #1a1a1a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.lines {
|
|
|
+ margin-top: 5px;
|
|
|
+ border-top: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sale {
|
|
|
+ .option {
|
|
|
+
|
|
|
+ .o_bd,
|
|
|
+ .o_ft {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #f85043;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .option {
|
|
|
+ line-height: 26px;
|
|
|
+ font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 5px 5px;
|
|
|
+
|
|
|
+ .o_hd {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_bd {
|
|
|
+ color: #1a1a1a;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .c {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_ft {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fa101d;
|
|
|
+
|
|
|
+ del {
|
|
|
+ color: #aaaaaa;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .o_ft_price,
|
|
|
+ .o_ft_price del {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check_default {
|
|
|
+ margin-right: 8px;
|
|
|
+ display: block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-color: #e9eaef;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &.check_active {
|
|
|
+ background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.configuration {
|
|
|
+ padding-bottom: 9px;
|
|
|
+
|
|
|
+ .config_line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #808080;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding-left: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .config_other {
|
|
|
+ .title {
|
|
|
+ // background:rgba(246,246,246,1);
|
|
|
+ // height: 1px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // margin: .15px 0;
|
|
|
+ span {
|
|
|
+ // position: absolute;
|
|
|
+ // left: .12px;
|
|
|
+ // top: -.09px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #808080;
|
|
|
+ margin-left: 17px;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-left: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #acacac;
|
|
|
+
|
|
|
+ .o_ft {
|
|
|
+ color: #aaaaaa;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 16px;
|
|
|
+
|
|
|
+ .option {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6f6f6f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.disabled {
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+
|
|
|
+.buy {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-top: 1px solid #ffe9e9e9;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #fa101d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ width: 60px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ del {
|
|
|
+ color: #b5b5b5;
|
|
|
+
|
|
|
+ &.text {
|
|
|
+ color: #b5b5b5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-submit {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ background: #f85043;
|
|
|
+ border-radius: 100px;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
|
|
|
+ padding: 8px 46px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ overflow-y: scroll;
|
|
|
+ border-top: none !important;
|
|
|
+ min-height: calc(100vh - 41px);
|
|
|
+}
|
|
|
+
|
|
|
+.countDownContent {
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+
|
|
|
+ .van-count-down {
|
|
|
+ display: inline;
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.loadingOrder {
|
|
|
+ width: 90%;
|
|
|
+ height: 180px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .van-loading__text {
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pay-section {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.pay-name {
|
|
|
+ padding-left: 10px;
|
|
|
+ flex: 1 auto;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.logo {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.van-checkbox {
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ /deep/.van-checkbox__icon .van-icon {
|
|
|
+ border-color: #e9eaef;
|
|
|
+ background-color: #e9eaef;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.van-checkbox__icon--checked .van-icon {
|
|
|
+ background-color: #2dc7aa;
|
|
|
+ border-color: #2dc7aa;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.needprice {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 2px 0;
|
|
|
+
|
|
|
+ del {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #aaa;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #f85043;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.couponprice {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.use_price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ img {
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
