|
|
@@ -2,11 +2,10 @@
|
|
|
<view class="container all-type-list-wrapper">
|
|
|
<product-list ref="productList" @operationConfim="hanldOperationConfim"></product-list>
|
|
|
<!--底部选择模态层弹窗组件 -->
|
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
|
|
|
+ <view class="popup spec" :class="specClass" @tap="hideSpec">
|
|
|
<!-- 遮罩层 -->
|
|
|
<view class="mask"></view>
|
|
|
- <!-- :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-460rpx' : '-400rpx'}" -->
|
|
|
- <view class="layer" @tap.stop="discard">
|
|
|
+ <view class="layer">
|
|
|
<view class="content">
|
|
|
<view class="layer-smimg">
|
|
|
<image :src="handleData.mainImage" mode=""></image>
|
|
|
@@ -15,21 +14,34 @@
|
|
|
<view class="layer-nunbox-b">
|
|
|
<view class="text">
|
|
|
<text class="p sm">￥</text>
|
|
|
- <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
|
|
|
+ <text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="layer-nunbox-t">
|
|
|
<view class="layer-nunbox-text">数量:</view>
|
|
|
<view class="number-box">
|
|
|
- <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
|
|
|
- <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
|
|
|
- <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
|
|
|
+ <view
|
|
|
+ class="iconfont icon-jianhao"
|
|
|
+ :class="[isQuantity == true ? 'disabled' : '']"
|
|
|
+ @click="changeCountSub()"
|
|
|
+ ></view>
|
|
|
+ <input
|
|
|
+ class="btn-input"
|
|
|
+ type="number"
|
|
|
+ v-model="number"
|
|
|
+ maxlength="4"
|
|
|
+ @blur="changeNumber($event)"
|
|
|
+ />
|
|
|
+ <view
|
|
|
+ class="iconfont icon-jiahao"
|
|
|
+ :class="[isStock == true ? 'disabled' : '']"
|
|
|
+ @click="changeCountAdd()"
|
|
|
+ ></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn">
|
|
|
- <!-- <view class="button buy" @click="toConfirmation">立即购买</view> -->
|
|
|
<view class="button add" @click="getAddProductCart">加入购物车</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -38,384 +50,373 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import productList from '@/components/cm-module/listTemplate/productList'
|
|
|
- export default{
|
|
|
- components:{
|
|
|
- productList
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- userId: '',
|
|
|
- serverUrl: '',
|
|
|
- emptyText: '',
|
|
|
- lastPageType: '',
|
|
|
- lastPageVal: '',
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
- specClass: '',//规格弹窗css类，控制开关动画
|
|
|
- handleData:{},
|
|
|
- isQuantity:false,
|
|
|
- isStock:false,
|
|
|
- minBuyNumber:0,
|
|
|
- number:0,
|
|
|
- buyRetailPrice:0,
|
|
|
- buyRetailPriceStep:1,
|
|
|
+import productList from '@/components/cm-module/listTemplate/productList'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ productList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userId: '',
|
|
|
+ specClass: '', //规格弹窗css类，控制开关动画
|
|
|
+ handleData: {},
|
|
|
+ isQuantity: false,
|
|
|
+ isStock: false,
|
|
|
+ minBuyNumber: 0,
|
|
|
+ number: 0,
|
|
|
+ buyRetailPrice: 0,
|
|
|
+ buyRetailPriceStep: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取机构id
|
|
|
+ const clubInfo = uni.getStorageSync('clubInfo')
|
|
|
+ this.userId = clubInfo.userId
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //显示选择数量确认弹窗
|
|
|
+ hanldOperationConfim(data) {
|
|
|
+ this.specClass = 'show'
|
|
|
+ this.handleData = data
|
|
|
+ this.minBuyNumber = data.minBuyNumber
|
|
|
+ this.buyRetailPrice = data.retailPrice
|
|
|
+ this.buyRetailPriceStep = data.step
|
|
|
+ if (this.handleData.ladderPriceFlag == '1') {
|
|
|
+ this.number = data.maxBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number = data.minBuyNumber
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- const clubInfo = uni.getStorageSync('clubInfo')
|
|
|
- this.userId = clubInfo.userId
|
|
|
+ //关闭选择数量确认弹窗
|
|
|
+ hideSpec() {
|
|
|
+ this.specClass = 'hide'
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
},
|
|
|
- methods:{
|
|
|
- //显示选择数量确认弹窗
|
|
|
- hanldOperationConfim(data){
|
|
|
- this.specClass = 'show'
|
|
|
- this.handleData = data
|
|
|
- this.minBuyNumber = data.minBuyNumber
|
|
|
- this.buyRetailPrice = data.retailPrice
|
|
|
- this.buyRetailPriceStep = data.step
|
|
|
- if(this.handleData.ladderPriceFlag == '1'){
|
|
|
- this.number = data.maxBuyNumber
|
|
|
- }else{
|
|
|
- this.number = data.minBuyNumber
|
|
|
- }
|
|
|
- },
|
|
|
- //关闭选择数量确认弹窗
|
|
|
- hideSpec() {
|
|
|
- this.specClass = 'hide';
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- changeCountAdd(){//popup弹窗数量增加按钮
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number += this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number++
|
|
|
+ changeCountAdd() {
|
|
|
+ //popup弹窗数量增加按钮
|
|
|
+ if (this.buyRetailPriceStep == 2) {
|
|
|
+ this.number += this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number++
|
|
|
+ }
|
|
|
+ this.calculatPerice()
|
|
|
+ },
|
|
|
+ changeCountSub() {
|
|
|
+ //popup弹窗数量减按钮
|
|
|
+ if (this.number <= this.minBuyNumber) {
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ this.isQuantity = true
|
|
|
+ this.$util.msg(`该商品起订量为${this.minBuyNumber}`, 2000)
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ if (this.buyRetailPriceStep == 2) {
|
|
|
+ this.number -= this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number--
|
|
|
}
|
|
|
this.calculatPerice()
|
|
|
- },
|
|
|
- changeCountSub(){//popup弹窗数量减按钮
|
|
|
- if(this.number<=this.minBuyNumber){
|
|
|
- this.number= this.minBuyNumber
|
|
|
- this.isQuantity =true
|
|
|
- this.$util.msg(`该商品起订量为${this.minBuyNumber}`,2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number-=this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number--
|
|
|
+ this.isQuantity = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeNumber(e) {
|
|
|
+ let _value = e.detail.value
|
|
|
+ if (!this.$api.isNumber(_value)) {
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else if (_value < this.minBuyNumber) {
|
|
|
+ this.$util.msg(`该商品起订量为${this.minBuyNumber}`, 2000)
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else if (_value % this.minBuyNumber != 0) {
|
|
|
+ this.$util.msg(`购买量必须为起订量的整数倍`, 2000)
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number = e.detail.value
|
|
|
+ this.calculatPerice()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //判断是否为阶梯价然后做计算价格处理
|
|
|
+ calculatPerice() {
|
|
|
+ if (this.handleData.ladderPriceFlag == '1') {
|
|
|
+ this.handleData.ladderPriceList.forEach((item, index) => {
|
|
|
+ if (this.number >= item.buyNum) {
|
|
|
+ this.buyRetailPrice = item.buyPrice
|
|
|
}
|
|
|
- this.calculatPerice()
|
|
|
- this.isQuantity =false
|
|
|
- }
|
|
|
- },
|
|
|
- changeNumber(e){
|
|
|
- let _value = e.detail.value;
|
|
|
- if(!this.$api.isNumber(_value)){
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if(_value < this.minBuyNumber){
|
|
|
- this.$util.msg(`该商品起订量为${this.minBuyNumber}`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if( _value % this.minBuyNumber !=0 ){
|
|
|
- this.$util.msg(`购买量必须为起订量的整数倍`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number = e.detail.value
|
|
|
- this.calculatPerice()
|
|
|
- }
|
|
|
- },
|
|
|
- //判断是否为阶梯价然后做计算价格处理
|
|
|
- calculatPerice(){
|
|
|
- if(this.handleData.ladderPriceFlag == '1'){
|
|
|
- this.handleData.ladderPriceList.forEach((item,index)=>{
|
|
|
- if(this.number>=item.buyNum){
|
|
|
- this.buyRetailPrice = item.buyPrice
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- //跳转确认订单页面
|
|
|
- toConfirmation(){
|
|
|
- this.specClass = 'hide';
|
|
|
- let productStp ={
|
|
|
- allPrice:this.number*this.buyRetailPrice,
|
|
|
- allCount:this.number,
|
|
|
- productID:this.handleData.productID,
|
|
|
- productCount:this.number
|
|
|
- }
|
|
|
- this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- //增加购物车成功和toast弹窗提示成功
|
|
|
- getAddProductCart(){
|
|
|
- this.ProductService.shoppingAddCart({productId:this.handleData.productId,userId:this.userId,productCount:this.number}).then(response => {
|
|
|
- this.specClass = 'hide';
|
|
|
- this.$util.msg(response.msg,1500,true,'success')
|
|
|
- setTimeout(() => {this.specClass = 'none'}, 200)
|
|
|
- this.$refs.productList.cartQuantity = response.data
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
})
|
|
|
- },
|
|
|
- discard(){
|
|
|
- //丢弃
|
|
|
}
|
|
|
+ },
|
|
|
+ //增加购物车成功和toast弹窗提示成功
|
|
|
+ getAddProductCart() {
|
|
|
+ this.ProductService.shoppingAddCart({
|
|
|
+ productId: this.handleData.productId,
|
|
|
+ userId: this.userId,
|
|
|
+ productCount: this.number
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.specClass = 'hide'
|
|
|
+ this.$util.msg(response.msg, 1500, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none'
|
|
|
+ }, 200)
|
|
|
+ this.$refs.productList.cartQuantity = response.data
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page {
|
|
|
- background: $sub-bg-color;
|
|
|
- .all-type-list-wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+page {
|
|
|
+ background: $sub-bg-color;
|
|
|
+ .all-type-list-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
- /* 加入购物模态层*/
|
|
|
- @keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+}
|
|
|
+/* 加入购物模态层*/
|
|
|
+@keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- @keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
+}
|
|
|
+@keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
- @keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- @keyframes showAmnation {
|
|
|
- 0% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- top: -60rpx;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+}
|
|
|
+@keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
|
- @keyframes hideAmnation {
|
|
|
- 0% {
|
|
|
- top: -100rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: -12rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes showAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- .popup {
|
|
|
+ 50% {
|
|
|
+ top: -60rpx;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes hideAmnation {
|
|
|
+ 0% {
|
|
|
+ top: -100rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ top: -12rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.popup {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ display: none;
|
|
|
+ .mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- z-index: 999;
|
|
|
- display: none;
|
|
|
- .mask{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
+ z-index: 21;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ .layer {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 22;
|
|
|
+ bottom: -420rpx;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 24rpx 24rpx 36rpx 24rpx;
|
|
|
+ height: 360rpx;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: space-between;
|
|
|
+ .content {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 21;
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ margin-top: 40rpx;
|
|
|
}
|
|
|
- .layer {
|
|
|
- position: fixed;
|
|
|
- z-index: 22;
|
|
|
- bottom: -420rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx 24rpx 36rpx 24rpx;
|
|
|
- height: 360rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- background-color: #fff;
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-content: space-between;
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
+ justify-content: center;
|
|
|
+ .button {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ color: #fff;
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
justify-content: center;
|
|
|
- .button {
|
|
|
- width: 600rpx;
|
|
|
- height: 90rpx;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-radius: 45rpx;
|
|
|
- &.buy{
|
|
|
- background: $btn-confirm;
|
|
|
- }
|
|
|
- &.add{
|
|
|
- background: rgba(0, 0, 0, 1.0);
|
|
|
- }
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ &.buy {
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ &.add {
|
|
|
+ background: rgba(0, 0, 0, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
- .mask{
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+ .mask {
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
}
|
|
|
- &.hide {
|
|
|
- display: block;
|
|
|
- .mask{
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
-
|
|
|
- .layer {
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
- }
|
|
|
+ .layer {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
}
|
|
|
- &.none {
|
|
|
- display: none;
|
|
|
+ }
|
|
|
+ &.hide {
|
|
|
+ display: block;
|
|
|
+ .mask {
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
}
|
|
|
- &.service {
|
|
|
- .row {
|
|
|
- margin: 30upx 0;
|
|
|
- .title {
|
|
|
- font-size: 30upx;
|
|
|
- margin: 10upx 0;
|
|
|
- }
|
|
|
- .description {
|
|
|
- font-size: 28upx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.service {
|
|
|
+ .row {
|
|
|
+ margin: 30upx 0;
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ margin: 10upx 0;
|
|
|
+ }
|
|
|
+ .description {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
- .layer-smimg{
|
|
|
- border: 1px solid #eee;
|
|
|
+ }
|
|
|
+ .layer-smimg {
|
|
|
+ border: 1px solid #eee;
|
|
|
+ width: 136rpx;
|
|
|
+ height: 136rpx;
|
|
|
+ float: left;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ image {
|
|
|
width: 136rpx;
|
|
|
height: 136rpx;
|
|
|
- float: left;
|
|
|
border-radius: 10rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
- image{
|
|
|
- width: 136rpx;
|
|
|
- height: 136rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
}
|
|
|
- .layer-nunbox{
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 536rpx;
|
|
|
- height: 88rpx;
|
|
|
- padding: 13rpx 0 0 0;
|
|
|
- float: left;
|
|
|
- .layer-nunbox-t{
|
|
|
- width: 100%;
|
|
|
- height:44rpx;
|
|
|
- position:relative;
|
|
|
+ }
|
|
|
+ .layer-nunbox {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 536rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 13rpx 0 0 0;
|
|
|
+ float: left;
|
|
|
+ .layer-nunbox-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ .layer-nunbox-text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .number-box {
|
|
|
display: flex;
|
|
|
- .layer-nunbox-text{
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- .number-box{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 2rpx solid #e1e1e1;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- .iconfont{
|
|
|
- font-size: $font-size-24;
|
|
|
- padding:0 18rpx;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- background: #FFFFFF;
|
|
|
- &.icon-jianhao{
|
|
|
- border-radius: 30rpx 0 0 30rpx;
|
|
|
- }
|
|
|
- &.icon-jiahao{
|
|
|
- border-radius: 0 30rpx 30rpx 0;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #e1e1e1;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #ffffff;
|
|
|
+ &.icon-jianhao {
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
}
|
|
|
- .btn-input{
|
|
|
- width: 62rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- border-bottom: 2rpx solid #e1e1e1;
|
|
|
- border-top: 2rpx solid #e1e1e1;
|
|
|
- color: #333333;
|
|
|
- background-color: #f7f7f7;
|
|
|
+ &.icon-jiahao {
|
|
|
+ border-radius: 0 30rpx 30rpx 0;
|
|
|
}
|
|
|
}
|
|
|
- .product-step{
|
|
|
- position: absolute;
|
|
|
- left: 45rpx;
|
|
|
- bottom: 0;
|
|
|
+ .btn-input {
|
|
|
+ width: 62rpx;
|
|
|
height: 44rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+ line-height: 44rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ border-bottom: 2rpx solid #e1e1e1;
|
|
|
+ border-top: 2rpx solid #e1e1e1;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #f7f7f7;
|
|
|
}
|
|
|
}
|
|
|
- .layer-nunbox-b{
|
|
|
- width: 100%;
|
|
|
- height:44rpx;
|
|
|
- padding: 8rpx 0 16rpx;
|
|
|
- .text{
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .product-step {
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
- .text{
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: $font-size-32;
|
|
|
- .p{
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- // .p:first-child{
|
|
|
- // margin-left: 30rpx;
|
|
|
- // }
|
|
|
- .p.sm{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .layer-nunbox-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ padding: 8rpx 0 16rpx;
|
|
|
+ .text {
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ .p {
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ // .p:first-child{
|
|
|
+ // margin-left: 30rpx;
|
|
|
+ // }
|
|
|
+ .p.sm {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
yuwenjun