21 changed files with 892 additions and 121 deletions
-
22src/components/reservation_order/reservation_order.vue
-
36src/components/site/order_modal/order_modal.vue
-
11src/pages.json
-
176src/pages/site/confirm/confirm.vue
-
52src/pages/site/manage/manage.vue
-
2src/pages/turnover/turnover.vue
-
1src/store/index.js
-
215src/subpackage/common/components/card_search.vue
-
10src/subpackage/common/js/api.js
-
10src/subpackage/common/js/server.js
-
402src/subpackage/common/pages/pay_type_select.vue
-
BINsrc/subpackage/common/static/images/choose.png
-
BINsrc/subpackage/common/static/images/ic_0.png
-
BINsrc/subpackage/common/static/images/ic_1.png
-
BINsrc/subpackage/common/static/images/ic_2.png
-
BINsrc/subpackage/common/static/images/ic_3.png
-
BINsrc/subpackage/common/static/images/ic_4.png
-
BINsrc/subpackage/common/static/images/x_close.png
-
69src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
1src/subpackage/retail/components/store_card_select/store_card_select.vue
-
6src/subpackage/retail/pages/confirm_order/confirm_order.vue
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<view class="card-search-modal" v-show="isShow"> |
|||
<view class="csm-container"> |
|||
<view class="cc-tit">请选择储值卡</view> |
|||
<image |
|||
class="cc-close" |
|||
mode="aspectFit" |
|||
src="/subpackage/common/static/images/x_close.png" |
|||
@click="hide" |
|||
></image> |
|||
<view class="cc-search"> |
|||
<input |
|||
type="text" |
|||
class="cs-input" |
|||
placeholder="请输入微信昵称/手机号码/储值卡号搜索" |
|||
confirm-type="search" |
|||
v-model="searchKey" |
|||
@confirm="getCanUseValueCardList" |
|||
/> |
|||
</view> |
|||
<scroll-view class="cc-list" scroll-y> |
|||
<view class="cl-item" v-for="(e, i) in cardLs" :key="i" @click="selectedCard = e"> |
|||
<view class="ci-content"> |
|||
<view class="cc-line"><text class="cc-txt">储值卡卡号：</text>NO.{{ e.card_no || '-' }}</view> |
|||
<view class="cc-line green"><text class="cc-txt">微信昵称：</text>{{ e.nickname || '-' }}</view> |
|||
<view class="cc-line"><text class="cc-txt">手机号码：</text>{{ e.mobile || '-' }}</view> |
|||
<view class="cc-line"><text class="cc-txt">卡名称：</text>{{ e.card_name || '-' }}</view> |
|||
<view class="cc-line"><text class="cc-txt">卡余额：</text>￥{{ e.balance || '0' }}</view> |
|||
</view> |
|||
<view class="ci-icon" :class="[selectedCard.card_no==e.card_no?'active':'']"> |
|||
<image class="ci-img" mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="cc-btn" hover-class="hover-active" @click="confirmBtn">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../utils/util.js'; |
|||
import server from '../js/server.js'; |
|||
import API from '../js/api.js'; |
|||
export default { |
|||
props: { |
|||
sid: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
amount: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
data(){ |
|||
return { |
|||
isShow: false, |
|||
searchKey: '', |
|||
cardLs: [], |
|||
selectedCard: {}, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 关闭 |
|||
hide(){ |
|||
this.isShow = false; |
|||
this.$emit('hide'); |
|||
}, |
|||
show(){ |
|||
this.isShow = true; |
|||
this.$emit('show'); |
|||
}, |
|||
confirmBtn(){ |
|||
let { selectedCard } = this; |
|||
if(!selectedCard?.card_no)return util.showNone('请选择储值卡'); |
|||
this.hide(); |
|||
this.$emit('confirm', selectedCard); |
|||
}, |
|||
getCanUseValueCardList(){ |
|||
let { sid, amount, searchKey } = this; |
|||
this.cardLs = []; |
|||
this.selectedCard = {}; |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: API.canUseValueCardList, |
|||
data: { |
|||
stadium_id: sid, |
|||
amount: amount, |
|||
key: searchKey, |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
if(res.data.code == 0){ |
|||
let _ls = res?.data?.data?.list || []; |
|||
if(!_ls.length)return util.showNone('暂无可用储值卡'); |
|||
this.cardLs = _ls; |
|||
}else{ |
|||
util.showNone(res.data.message || '获取储值卡列表失败'); |
|||
} |
|||
console.log(res); |
|||
}) |
|||
.catch(util.hideLoad); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
.card-search-modal{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0,0,0,0.5); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 999; |
|||
} |
|||
.csm-container{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
padding: 46upx 24upx 0upx; |
|||
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
width: 100%; |
|||
background-color: #fff; |
|||
.cc-tit{ |
|||
line-height: 44upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
} |
|||
.cc-close{ |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
.cc-search{ |
|||
margin-top: 54upx; |
|||
padding: 0 20upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
.cs-input{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
} |
|||
} |
|||
.cc-list{ |
|||
height: 548upx; |
|||
width: 100%; |
|||
margin-top: 30upx; |
|||
.cl-item{ |
|||
padding: 20upx; |
|||
border: 2upx solid #979797; |
|||
border-radius: 10upx; |
|||
@include centerFlex(space-between); |
|||
&:not(:first-child){ |
|||
margin-top: 24upx; |
|||
} |
|||
.ci-content{ |
|||
flex-grow: 1; |
|||
.cc-line{ |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
.cc-txt{ |
|||
color: #9C9C9F; |
|||
} |
|||
&.green{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.ci-icon{ |
|||
flex-grow: 0; |
|||
margin-left: 10upx; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
overflow: hidden; |
|||
border-radius: 50%; |
|||
border: 2upx solid #979797; |
|||
&.active{ |
|||
border-color: transparent; |
|||
.ci-img{ |
|||
visibility: visible; |
|||
} |
|||
} |
|||
.ci-img{ |
|||
visibility: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cc-btn{ |
|||
margin-top: 14upx; |
|||
line-height: 112upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
border-radius: 10upx; |
|||
background-color: $themeColor; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,10 @@ |
|||
import { ORIGIN } from '../../../js/api'; |
|||
|
|||
export const COMMON_API = { |
|||
assistantGetValueCardList:`${ORIGIN}/admin/assistant/getValueCardList`, // 搜索储蓄卡
|
|||
takeUpBbocPay:`${ORIGIN}/admin/stadium/venue/takeUpBbocPay`, // 挂账收款的接口
|
|||
venueTakeUp: `${ORIGIN}/admin/stadium/venue/takeUp`, // 商家助手-占用场地提交
|
|||
canUseValueCardList: `${ORIGIN}/admin/stadium/canUseValueCard/list`, // 商家助手-占用场地可用储值卡列表
|
|||
} |
|||
|
|||
export default COMMON_API; |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '../../../js/server'; |
|||
|
|||
class CommonServer extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new CommonServer(); |
|||
@ -0,0 +1,402 @@ |
|||
<template> |
|||
<view class="pay-type-select"> |
|||
<view class="pts-header"> |
|||
<view class="ph-stadium-info"> |
|||
<image mode="aspectFill" :src="stadiumInfo.logo"></image> |
|||
<view>{{ stadiumInfo.name || '-' }}</view> |
|||
</view> |
|||
<view class="ph-type-text">订场支付金额</view> |
|||
<view class="ph-price"><text>¥</text>{{ payAmount || 0 }}</view> |
|||
<view class="ph-discount-tip"> |
|||
<block v-if="payMethodsID == 3&&selectedCard&&selectedCard.discount&&selectedCard.discount<10"> |
|||
<text>原价：¥{{ optionsQuery.amount || 0 }}，</text>折扣金额¥{{ discountAmount || 0 }} |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<view class="pts-container"> |
|||
<view class="pc-tit-bar">支付方式</view> |
|||
<view class="pc-ls"> |
|||
<view class="pl-item" v-for="(e, i) in payMethodsLs" :key="i"> |
|||
<image mode="aspectFit" :src="'/subpackage/common/static/images/ic_'+e.id+'.png'"></image> |
|||
<view class="pi-right" @click="payMethodsChange(e)"> |
|||
<view class="pr-top"> |
|||
<view class="pr-txt">{{ e.name || '-' }}</view> |
|||
<view class="pr-ipt" v-if="e.id == 4"> |
|||
<input v-model="otherTypeRemark" /> |
|||
</view> |
|||
<view :class="['pr-icon', e.id == payMethodsID? 'active': '']"> |
|||
<image mode="aspectFit" src="/subpackage/common/static/images/choose.png"></image> |
|||
</view> |
|||
</view> |
|||
<view class="pr-content" v-if="e.id == 3&&selectedCard&&selectedCard.card_no"> |
|||
<view class="pc-line"> |
|||
<view class="pl-txt">储值卡卡号：{{ selectedCard.card_no || '-' }}</view> |
|||
<view class="pl-tag" v-if="selectedCard.discount&&selectedCard.discount<10">使用会员卡支付{{ selectedCard.discount || '-' }}折</view> |
|||
</view> |
|||
<view class="pc-line"> |
|||
<view class="pl-txt">微信昵称：{{ selectedCard.nickname || '-' }}</view> |
|||
</view> |
|||
<view class="pc-line"> |
|||
<view class="pl-txt">手机号码：{{ selectedCard.mobile || '-' }}</view> |
|||
</view> |
|||
<view class="pc-line"> |
|||
<view class="pl-txt">卡名称：{{ selectedCard.card_name || '-' }}</view> |
|||
</view> |
|||
<view class="pc-line"> |
|||
<view class="pl-txt">卡余额：￥{{ selectedCard.balance || '0' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<cover-view class="sc-fixed-bot" v-if="!isCardSelectModal"> |
|||
<cover-view |
|||
class="sfb-view" |
|||
hover-class="hover-active" |
|||
@click="submitBtn" |
|||
>立即支付</cover-view> |
|||
</cover-view> |
|||
<card-search |
|||
ref="cardSearch" |
|||
:sid="stadiumInfo.id" |
|||
:amount="optionsQuery.amount" |
|||
@confirm="cardSelectConfirm" |
|||
@hide="isCardSelectModal = false" |
|||
@show="isCardSelectModal = true" |
|||
> </card-search> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import server from '../js/server.js'; |
|||
import API from '../js/api.js'; |
|||
import util from '../../../utils/util.js'; |
|||
import cardSearch from '../components/card_search'; |
|||
export default { |
|||
components: { |
|||
'card-search': cardSearch |
|||
}, |
|||
computed: { |
|||
stadiumInfo(){ |
|||
return this?.optionsQuery?.stadiumInfo || {}; |
|||
}, |
|||
exQuery(){ |
|||
return this?.optionsQuery?.exQuery || {}; |
|||
}, |
|||
discountAmount(){ |
|||
let { selectedCard, optionsQuery, payAmount, payMethodsID } = this; |
|||
if(selectedCard?.discount && payMethodsID == 3){ |
|||
return Math.floor((optionsQuery?.amount * 100) - (payAmount * 100))/100; |
|||
} |
|||
return 0; |
|||
}, |
|||
payAmount(){ |
|||
let { selectedCard, optionsQuery, payMethodsID } = this; |
|||
if(selectedCard?.discount && payMethodsID == 3){ |
|||
return Math.floor((optionsQuery?.amount * 100) * (selectedCard?.discount / 10))/100; |
|||
} |
|||
return optionsQuery?.amount; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isCardSelectModal: false, |
|||
payMethodsLs: this.getPayMethodsLs(), |
|||
payMethodsID: 0, |
|||
optionsQuery: {}, |
|||
otherTypeRemark: '', |
|||
selectedCard: {} |
|||
} |
|||
}, |
|||
/** |
|||
* @param {Object} _options = JSON.parse(decodeURIComponent(option.query)) |
|||
* @param {String} _options.type 1 -> 客户订场， 2-> 散客， 3-> 锁场, 4 -> 挂账 |
|||
* @param {String} _options.brand_id |
|||
* @param {String} _options.amount |
|||
* @param {Object} _options.stadiumInfo |
|||
* @param {String} _options.stadiumInfo.id |
|||
* @param {String} _options.stadiumInfo.name |
|||
* @param {String} _options.stadiumInfo.logo |
|||
* |
|||
* @param {Object} _options.exQuery // 拓展参数 |
|||
* |
|||
* |
|||
*/ |
|||
onLoad(option){ |
|||
let optionsQuery = util.jsonPar(decodeURIComponent(option.query)); |
|||
this.optionsQuery = optionsQuery; |
|||
}, |
|||
methods: { |
|||
cardSelectConfirm(e){ |
|||
if(!e?.card_no)return this.payMethodsID = 0; |
|||
this.selectedCard = e; |
|||
this.payMethodsID = 3; |
|||
}, |
|||
submitBtn: util.debounce(function(){ |
|||
let _type = this.optionsQuery?.type; |
|||
if(+_type === 4)return this.takeUpBbocPay(); |
|||
if(_type !== 4)return this.takeUpSubmit(); |
|||
|
|||
}, 300, true), |
|||
payMethodsChange(e){ |
|||
if(e.id == 3)return this.$refs.cardSearch.show(); |
|||
this.payMethodsID = e.id; |
|||
}, |
|||
getPayMethodsLs(){ |
|||
return [ |
|||
{ name: '微信支付', id: 0 }, |
|||
{ name: '支付宝支付', id: 1 }, |
|||
{ name: '现金支付', id: 2 }, |
|||
{ name: '储值卡支付', id: 3 }, |
|||
{ name: '其它', id: 4 }, |
|||
] |
|||
}, |
|||
|
|||
// 挂账订单支付提交 |
|||
takeUpBbocPay(){ |
|||
let { optionsQuery, payMethodsID, otherTypeRemark, selectedCard } = this; |
|||
let _data = { |
|||
brand_id: optionsQuery.brand_id || '', |
|||
amount: +optionsQuery.amount || '', |
|||
reason: optionsQuery?.exQuery?.reason || '', |
|||
order_no: optionsQuery?.exQuery?.order_no || '', |
|||
take_up_pay_type: this.getPayMethodsName(payMethodsID) |
|||
} |
|||
if(payMethodsID === 4)_data['take_up_pay_type'] = otherTypeRemark || '其它'; |
|||
if(payMethodsID === 3&&selectedCard?.card_no)_data['card_no'] = selectedCard.card_no || ''; |
|||
server.post({ |
|||
url: API.takeUpBbocPay, |
|||
data: _data, |
|||
failMsg: '操作失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.showNone('操作成功！'); |
|||
setTimeout(_=>{ |
|||
util.routeTo(); |
|||
}, 1200); |
|||
}) |
|||
}, |
|||
|
|||
// 1 -> 客户订场， 2-> 散客， 3-> 锁场, 提交 |
|||
takeUpSubmit(){ |
|||
let { exQuery, payMethodsID, otherTypeRemark, selectedCard } = this; |
|||
let _data = { |
|||
...exQuery, |
|||
take_up_pay_type: this.getPayMethodsName(payMethodsID) || '' |
|||
} |
|||
if(payMethodsID === 4)_data['take_up_pay_type'] = otherTypeRemark || '其它'; |
|||
if(payMethodsID === 3&&selectedCard?.card_no)_data['card_no'] = selectedCard.card_no || ''; |
|||
util.showLoad(); |
|||
server.post({ |
|||
url: API.venueTakeUp, |
|||
data: _data, |
|||
isDefaultGet: false |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
if(res.data.code == 0){ |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
let _res = res.data.data || {}; |
|||
let _qrStr = `?brand_id=${_res.brand_id}&order_no=${_res.order_no}` |
|||
util.routeTo(`/pages/site/occupy_success/occupy_success${_qrStr}`, 'rT'); |
|||
}else{ |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(util.hideLoad) |
|||
}, |
|||
getPayMethodsName(payMethodsID){ |
|||
return this.getPayMethodsLs().find(item=>item.id == payMethodsID)?.name || ''; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '~style/public.scss'; |
|||
.pay-type-select{ |
|||
padding-bottom: 120rpx; |
|||
padding-bottom: calc( 120rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
} |
|||
.pts-header{ |
|||
margin-bottom: 24upx; |
|||
padding: 26upx 36upx 110upx; |
|||
background-color: #fff; |
|||
.ph-stadium-info{ |
|||
padding-bottom: 34upx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 10upx; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
} |
|||
>view{ |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.ph-type-text{ |
|||
margin-top: 76upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
@include textHide(1); |
|||
} |
|||
.ph-price{ |
|||
margin-top: 84upx; |
|||
text-align: center; |
|||
font-size: 80upx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-size: 60upx; |
|||
} |
|||
} |
|||
.ph-discount-tip{ |
|||
margin-top: 16upx; |
|||
text-align: center; |
|||
line-height: 44upx; |
|||
min-height: 44upx; |
|||
font-size: 28upx; |
|||
color: #FF873D; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #181818; |
|||
} |
|||
} |
|||
} |
|||
.pts-container{ |
|||
|
|||
background-color: #fff; |
|||
.pc-tit-bar{ |
|||
padding-left: 24upx; |
|||
line-height: 72upx; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
} |
|||
.pc-ls{ |
|||
padding: 16upx 30upx 0; |
|||
.pl-item{ |
|||
display: flex; |
|||
&:not(:last-child){ |
|||
.pi-right{ |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 16upx; |
|||
width: 54upx; |
|||
height: 54upx; |
|||
transform: translateY(24upx); |
|||
} |
|||
.pi-right{ |
|||
flex-grow: 1; |
|||
.pr-top{ |
|||
width: 100%; |
|||
height: 102upx; |
|||
@include centerFlex(space-between); |
|||
.pr-txt{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
color: #181818; |
|||
} |
|||
.pr-ipt{ |
|||
margin-left: 40upx; |
|||
margin-right: auto; |
|||
padding: 0 16upx; |
|||
width: 340upx; |
|||
height: 64upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
>input{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #181818; |
|||
} |
|||
} |
|||
.pr-icon{ |
|||
flex-shrink: 0; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50%; |
|||
border: 2upx solid #aaaaaa; |
|||
overflow: hidden; |
|||
@include centerFlex(center); |
|||
&.active{ |
|||
border-color: transparent; |
|||
>image{ |
|||
visibility: visible; |
|||
|
|||
} |
|||
} |
|||
>image{ |
|||
visibility: hidden; |
|||
display: block; |
|||
border: none; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.pr-content{ |
|||
padding-top: 4upx; |
|||
padding-bottom: 30upx; |
|||
.pc-line{ |
|||
@include centerFlex(flex-start); |
|||
.pl-txt{ |
|||
line-height: 44upx; |
|||
font-size: 24upx; |
|||
color: #181818; |
|||
@include textHide(1); |
|||
} |
|||
.pl-tag{ |
|||
flex-shrink: 0; |
|||
margin-left: 10upx; |
|||
padding: 0 6upx; |
|||
line-height: 28upx; |
|||
font-size: 24upx; |
|||
color: #FF873D; |
|||
border: 1px solid #FF873D; |
|||
border-radius: 4upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sc-fixed-bot{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding-top: 10upx; |
|||
padding-bottom: 10upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
background-color: #fff; |
|||
.sfb-view{ |
|||
margin: 0 auto; |
|||
width: 702upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
background-color: #FF873D; |
|||
color: #fff; |
|||
border-radius: 44upx; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 36 | Height: 36 | Size: 392 B |
|
After Width: 54 | Height: 54 | Size: 659 B |
|
After Width: 54 | Height: 54 | Size: 627 B |
|
After Width: 52 | Height: 52 | Size: 1.3 KiB |
|
After Width: 52 | Height: 52 | Size: 764 B |
|
After Width: 54 | Height: 54 | Size: 1.3 KiB |
|
After Width: 34 | Height: 34 | Size: 233 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue