Skip to content

H
hls-xcmg-vue-app
Commit 5e3cd36d authored by 李晓兵's avatar 李晓兵
Browse files
Options

'样式'

parent d6f1c52d
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 79 deletions
src/pages/pay/payment/pay-entry.vue
View file @ 5e3cd36d
......@@ -11,75 +11,75 @@
</transition>
<transition name="trans">
<div v-show="show" class="modal-show-bank">
<transition name="show">
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>支付方式</span>
</div>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="item.bank_account_num"
@click.native="isSelect(`nong${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
<div class="down">
<div class="top">
<img src="@/assets/payment/back.png" @click="show=false" >
<span>支付方式</span>
</div>
</transition></div>
</transition>
<scroll>
<list-item :item-height="56" class="pay-way">
<item
v-for="(item,index) in nongBank"
:proportion="[7,1,1]"
:key="item.bank_account_num"
@click.native="isSelect(`nong${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')">
<div slot="name">
<img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝
</div>
<section slot="content">
<img v-show="select === 'one'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')">
<div slot="name">
<img src="@/assets/payment/wx.png" alt class="icon2" > 微信
</div>
<section slot="content">
<img v-show="select === 'two'" src="@/assets/payment/select.png" alt >
<img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt >
</section>
</item>
<item
v-for="(item,index) in newList"
:proportion="[7,1,1]"
:key="index"
@click.native="isSelect(`three${index}`);ischeck(item)"
>
<div slot="name" style="flex=3">
<img :src="selectImg(item)" alt class="icon" >
{{ item.bank_full_name }}({{ selectLast(item) }})
<img
v-show="item.recommand"
class="push"
src="@/assets/payment/push.png"
>
</div>
<section slot="content">
<img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt >
<img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt >
</section>
</item>
</list-item>
</scroll>
</div>
</div></transition>
<transition name="trans">
<div v-show="confirm" class="modal-show-confirm">
<div class="down">
......@@ -361,6 +361,9 @@ export default {
</script>
<style lang='less' >
#payment-pay-entry {
.vue-better-scroll__wrapper{
padding: 0;
}
.trans-enter-active,
.trans-leave-active {
transition: opacity 0.5s;
......@@ -382,19 +385,18 @@ export default {
height: 466px;
width: 100%;
position: relative;
bottom: -18%;
top:16%;
background: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.top {
position: fixed;
padding-left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
......@@ -410,7 +412,7 @@ export default {
}
}
.info {
margin-top: 60px;
//margin-top: 60px;
}
}
}
......@@ -427,19 +429,18 @@ export default {
height: 466px;
width: 100%;
position: relative;
bottom: -18%;
top:16%;
background: #fff;
border-radius: 12px 12px 0 0;
overflow: scroll;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.top {
position: fixed;
left: 24px;
width: 330px;
height: 54px;
display: flex;
z-index: 999;
align-items: center;
background-color: #fff;
img {
......@@ -457,8 +458,8 @@ export default {
.pay-way {
//width: 350px;
//margin: 0 auto;
width: 90%;
margin-top: 54px;
width: 100%;
padding: 0 4% 0 4%;
background: #fff;
.hls-item {
padding-left: 12px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment