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 @@ ...@@ -11,75 +11,75 @@
</transition> </transition>
<transition name="trans"> <transition name="trans">
<div v-show="show" class="modal-show-bank"> <div v-show="show" class="modal-show-bank">
<transition name="show"> <div class="down">
<div class="down"> <div class="top">
<div class="top"> <img src="@/assets/payment/back.png" @click="show=false" >
<img src="@/assets/payment/back.png" @click="show=false" > <span>支付方式</span>
<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> </div>
</transition></div> <scroll>
</transition> <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"> <transition name="trans">
<div v-show="confirm" class="modal-show-confirm"> <div v-show="confirm" class="modal-show-confirm">
<div class="down"> <div class="down">
...@@ -361,6 +361,9 @@ export default { ...@@ -361,6 +361,9 @@ export default {
</script> </script>
<style lang='less' > <style lang='less' >
#payment-pay-entry { #payment-pay-entry {
.vue-better-scroll__wrapper{
padding: 0;
}
.trans-enter-active, .trans-enter-active,
.trans-leave-active { .trans-leave-active {
transition: opacity 0.5s; transition: opacity 0.5s;
...@@ -382,19 +385,18 @@ export default { ...@@ -382,19 +385,18 @@ export default {
height: 466px; height: 466px;
width: 100%; width: 100%;
position: relative; position: relative;
bottom: -18%; top:16%;
background: #fff; background: #fff;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
overflow: scroll; overflow: scroll;
display: flex; display: flex;
justify-content: center; align-items: center;
flex-direction: column;
.top { .top {
position: fixed;
padding-left: 24px; padding-left: 24px;
width: 330px; width: 330px;
height: 54px; height: 54px;
display: flex; display: flex;
z-index: 999;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
img { img {
...@@ -410,7 +412,7 @@ export default { ...@@ -410,7 +412,7 @@ export default {
} }
} }
.info { .info {
margin-top: 60px; //margin-top: 60px;
} }
} }
} }
...@@ -427,19 +429,18 @@ export default { ...@@ -427,19 +429,18 @@ export default {
height: 466px; height: 466px;
width: 100%; width: 100%;
position: relative; position: relative;
bottom: -18%; top:16%;
background: #fff; background: #fff;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
overflow: scroll; overflow: scroll;
display: flex; display: flex;
justify-content: center; align-items: center;
flex-direction: column;
.top { .top {
position: fixed;
left: 24px; left: 24px;
width: 330px; width: 330px;
height: 54px; height: 54px;
display: flex; display: flex;
z-index: 999;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
img { img {
...@@ -457,8 +458,8 @@ export default { ...@@ -457,8 +458,8 @@ export default {
.pay-way { .pay-way {
//width: 350px; //width: 350px;
//margin: 0 auto; //margin: 0 auto;
width: 90%; width: 100%;
margin-top: 54px; padding: 0 4% 0 4%;
background: #fff; background: #fff;
.hls-item { .hls-item {
padding-left: 12px; 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