Skip to content

H
hls-xcmg-vue-app
Commit fb4171fd authored by linxin's avatar linxin
Browse files
Options

修改scroll样式

parent 26563110
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 217 deletions
src/pages/carConfirm/confirm-list.vue
View file @ fb4171fd
<template> <template>
<h-view id="startList"> <h-view id="confirmList">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
...@@ -7,47 +7,40 @@ ...@@ -7,47 +7,40 @@
</div> </div>
</h-header> </h-header>
<Tab @getTabNum="getTabNum" /> <Tab @getTabNum="getTabNum" />
<div class="search"> <div class="search has-header">
<input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" > <input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" >
</div> </div>
<h-content class="my-content"> <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="getList">
<scroll <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
ref="scroll" <div class="left">
:updateData="[showList]" <span>
:pullUp="true" <img src="@/assets/contractStart/icon.png" >
@pullingUp="getList" </span>
> </div>
<div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)"> <div class="right">
<div class="left"> <div class="right-top">
<span> <span>合同号</span>
<img src="@/assets/contractStart/icon.png" > <span>{{ item.project_number }}</span>
</span>
</div> </div>
<div class="right"> <div class="right-bottom">
<div class="right-top"> <ul>
<span>合同号</span> <li>
<span>{{ item.project_number }}</span> 承租人
</div> <span>{{ item.bp_name }}</span>
<div class="right-bottom"> </li>
<ul> <li>
<li> 产品线
承租人 <span>{{ item.division_n }}</span>
<span>{{ item.bp_name }}</span> </li>
</li> <li>
<li> 合同金额
产品线 <span class="number">{{ item.total_price|currency }}</span>
<span>{{ item.division_n }}</span> </li>
</li> </ul>
<li>
合同金额
<span class="number">{{ item.total_price|currency }}</span>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</scroll> </div>
</h-content> </scroll>
</h-view> </h-view>
</template> </template>
<script> <script>
...@@ -68,7 +61,7 @@ export default { ...@@ -68,7 +61,7 @@ export default {
} }
}, },
watch: { watch: {
'tabNum': { tabNum: {
handler (newVal, oldVal) { handler (newVal, oldVal) {
if (newVal === 0) { if (newVal === 0) {
this.showList = this.undo this.showList = this.undo
...@@ -82,8 +75,7 @@ export default { ...@@ -82,8 +75,7 @@ export default {
this.search() this.search()
}, },
}, },
created () { created () {},
},
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
next(vm => { next(vm => {
vm.pagenum = 1 vm.pagenum = 1
...@@ -95,7 +87,11 @@ export default { ...@@ -95,7 +87,11 @@ export default {
search () { search () {
let vm = this let vm = this
let randomString = Math.floor(Math.random() * 21) let randomString = Math.floor(Math.random() * 21)
let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'` let url =
process.env.basePath +
'car_confirm_list_query' +
'&index' +
`'${randomString}'`
let param = { let param = {
user_phone: window.localStorage.getItem('user_phone'), user_phone: window.localStorage.getItem('user_phone'),
searchInput: vm.keyWord, searchInput: vm.keyWord,
...@@ -138,7 +134,11 @@ export default { ...@@ -138,7 +134,11 @@ export default {
getList () { getList () {
let vm = this let vm = this
let randomString = Math.floor(Math.random() * 21) let randomString = Math.floor(Math.random() * 21)
let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'` let url =
process.env.basePath +
'car_confirm_list_query' +
'&index' +
`'${randomString}'`
let param = { let param = {
user_phone: window.localStorage.getItem('user_phone'), user_phone: window.localStorage.getItem('user_phone'),
pagesize: 10, pagesize: 10,
...@@ -175,14 +175,16 @@ export default { ...@@ -175,14 +175,16 @@ export default {
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
#startList { #confirmList {
.search { .search {
height: 52px;
background-color: #fff; background-color: #fff;
display: flex; padding: 8px 12px;
align-items: center; position: absolute;
justify-content: center; width: 100%;
z-index: 100;
margin-top: 52px;
margin-bottom: 8px;
input { input {
width: 351px; width: 351px;
height: 36px; height: 36px;
...@@ -210,7 +212,6 @@ export default { ...@@ -210,7 +212,6 @@ export default {
border: 2px solid #bcc6ff; border: 2px solid #bcc6ff;
} }
} }
.my-content {
.item { .item {
width: 359px; width: 359px;
height: 148px; height: 148px;
...@@ -260,12 +261,12 @@ export default { ...@@ -260,12 +261,12 @@ export default {
width: 285px; width: 285px;
margin-top: 10px; margin-top: 10px;
.number { .number {
font-family: Verdana-Bold; font-family: Verdana-Bold;
font-size: 14px; font-size: 14px;
color: #4b4a4b; color: #4b4a4b;
letter-spacing: 0; letter-spacing: 0;
font-weight:bold; font-weight: bold;
} }
li { li {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
...@@ -280,6 +281,44 @@ export default { ...@@ -280,6 +281,44 @@ export default {
} }
} }
} }
.content {
position: absolute;
top: 0;
}
.scrollContent {
padding-top: 2.92rem;
padding-bottom: 20px;
}
.tab-style {
width: 100%;
position: absolute;
}
}
.platform-ios {
#confirmList {
.scrollContent {
padding-top: 3.32rem;
}
}
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#confirmList {
.scrollContent {
padding-top: 3.72rem;
}
}
}
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#confirmList {
.scrollContent {
padding-top: 3.72rem;
}
}
} }
} }
</style> </style>
src/pages/contractRepayment/contract-repayment.vue
View file @ fb4171fd
...@@ -6,27 +6,28 @@ ...@@ -6,27 +6,28 @@
<span>合同还款</span> <span>合同还款</span>
</div> </div>
</h-header> </h-header>
<scroll
<h-content v-if="data!==null" class="pay-content"> v-if="data!==null"
<scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getList"> ref="scroll" :updateData="[lists]" :pullUp="true" class="pay-content has-header"
<div v-for="(item,index) in lists" :key="index" class="contract-item"> @pullingUp="getList">
<div class="header"> <div v-for="(item,index) in lists" :key="index" class="contract-item">
<img src="@/assets/contractRepayment/contract.png" alt=""> <div class="header">
<h2>{{ item.project_number }}</h2> <img src="@/assets/contractRepayment/contract.png" alt="">
<!-- 状态用类名控制 待还款orange,待签约blue,还款中green --> <h2>{{ item.project_number }}</h2>
<p :class="{'green':item.repayment_status==='首付还款中','blue':item.repayment_status==='待首付','orange':item.repayment_status==='还款中','grey':item.repayment_status==='已结清'}">{{ item.repayment_status }}</p> <!-- 状态用类名控制 待还款orange,待签约blue,还款中green -->
</div> <p :class="{'green':item.repayment_status==='首付还款中','blue':item.repayment_status==='待首付','orange':item.repayment_status==='还款中','grey':item.repayment_status==='已结清'}">{{ item.repayment_status }}</p>
<div class="center"> </div>
<div><span>合同金额</span><p>{{ item.total_price|currency }}</p></div> <div class="center">
<div><span>已还金额</span><p class="bold">{{ item.recivied_amount|currency }}</p></div> <div><span>合同金额</span><p>{{ item.total_price|currency }}</p></div>
<span v-if="item.overdue_status==='已逾期'" class="red">已逾期</span> <div><span>已还金额</span><p class="bold">{{ item.recivied_amount|currency }}</p></div>
<section @click="toRepayDetails(item)"> <span v-if="item.overdue_status==='已逾期'" class="red">已逾期</span>
<img src="@/assets/contractRepayment/view.png" alt=""> <section @click="toRepayDetails(item)">
<span>查看合同明细</span> <img src="@/assets/contractRepayment/view.png" alt="">
</section> <span>查看合同明细</span>
</div> </section>
</div> </div>
</scroll></h-content> </div>
</scroll>
<h-content v-if="data===null" class="null"> <h-content v-if="data===null" class="null">
<div class="display"> <div class="display">
<img src="@/assets/contractRepayment/null.png" alt=""> <img src="@/assets/contractRepayment/null.png" alt="">
...@@ -325,6 +326,41 @@ export default { ...@@ -325,6 +326,41 @@ export default {
} }
} }
.content {
position: absolute;
top: 0;
}
.scrollContent {
padding-top: 0.8rem;
padding-bottom: 20px;
}
}
.platform-ios {
#contract-repayment {
.scrollContent {
padding-top: 1.2rem;
}
}
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#contract-repayment {
.scrollContent {
padding-top: 1.6rem;
}
}
}
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#contract-repayment {
.scrollContent {
padding-top: 1.6rem;
}
}
}
} }
</style> </style>
src/pages/contractStart/start-list.vue
View file @ fb4171fd
...@@ -6,48 +6,41 @@ ...@@ -6,48 +6,41 @@
<span>合同发车</span> <span>合同发车</span>
</div> </div>
</h-header> </h-header>
<Tab :fatherTabNum = "tabNum" @getTabNum="getTabNum" /> <Tab :fatherTabNum="tabNum" @getTabNum="getTabNum" />
<div class="search"> <div class="search has-header">
<input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" > <input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" >
</div> </div>
<h-content class="my-content"> <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getList">
<scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getList"> <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
<div <div class="left">
v-for="(item,index) in showList" <span>
:key="index" <img src="@/assets/contractStart/icon.png" >
class="item" </span>
@click="changePage(item)" </div>
> <div class="right">
<div class="left"> <div class="right-top">
<span> <span>合同号</span>
<img src="@/assets/contractStart/icon.png" > <span>{{ item.project_number }}</span>
</span>
</div> </div>
<div class="right"> <div class="right-bottom">
<div class="right-top"> <ul>
<span>合同号</span> <li>
<span>{{ item.project_number }}</span> 承租人
</div> <span>{{ item.bp_name }}</span>
<div class="right-bottom"> </li>
<ul> <li>
<li> 产品线
承租人 <span>{{ item.division_n }}</span>
<span>{{ item.bp_name }}</span> </li>
</li> <li>
<li> 合同金额
产品线 <span class="number">{{ item.total_price|currency }}</span>
<span>{{ item.division_n }}</span> </li>
</li> </ul>
<li>
合同金额
<span class="number">{{ item.total_price|currency }}</span>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</scroll> </div>
</h-content> </scroll>
<bottom-tab> <bottom-tab>
<tab-button class="add" @click.native="goAdd">新增发车</tab-button> <tab-button class="add" @click.native="goAdd">新增发车</tab-button>
</bottom-tab> </bottom-tab>
...@@ -94,13 +87,16 @@ export default { ...@@ -94,13 +87,16 @@ export default {
this.search() this.search()
}, },
}, },
created () { created () {},
},
methods: { methods: {
search () { search () {
let vm = this let vm = this
let randomString = Math.floor(Math.random() * 21) let randomString = Math.floor(Math.random() * 21)
let url = process.env.basePath + 'car_apply_list_query' + '&index' + `'${randomString}'` let url =
process.env.basePath +
'car_apply_list_query' +
'&index' +
`'${randomString}'`
let param = { let param = {
user_phone: window.localStorage.getItem('user_phone'), user_phone: window.localStorage.getItem('user_phone'),
searchInput: vm.keyWord, searchInput: vm.keyWord,
...@@ -120,7 +116,9 @@ export default { ...@@ -120,7 +116,9 @@ export default {
vm.done = [] vm.done = []
vm.tabNum = 0 vm.tabNum = 0
vm.undo = vm.lists.filter(i => { vm.undo = vm.lists.filter(i => {
return i.car_start_status === 'REJECTED' || i.car_start_status === 'NEW' return (
i.car_start_status === 'REJECTED' || i.car_start_status === 'NEW'
)
}) })
vm.done = vm.lists.filter(i => { vm.done = vm.lists.filter(i => {
return i.car_start_status === 'APPROVED' return i.car_start_status === 'APPROVED'
...@@ -149,7 +147,11 @@ export default { ...@@ -149,7 +147,11 @@ export default {
getList () { getList () {
let vm = this let vm = this
let randomString = Math.floor(Math.random() * 21) let randomString = Math.floor(Math.random() * 21)
let url = process.env.basePath + 'car_apply_list_query' + '&index' + `'${randomString}'` let url =
process.env.basePath +
'car_apply_list_query' +
'&index' +
`'${randomString}'`
let param = { let param = {
user_phone: window.localStorage.getItem('user_phone'), user_phone: window.localStorage.getItem('user_phone'),
pagesize: 10, pagesize: 10,
...@@ -186,14 +188,16 @@ export default { ...@@ -186,14 +188,16 @@ export default {
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
#startList { #startList {
.search { .search {
height: 52px;
background-color: #fff; background-color: #fff;
display: flex; padding: 8px 12px;
align-items: center; position: absolute;
justify-content: center; width: 100%;
z-index: 100;
margin-top: 52px;
margin-bottom: 8px;
input { input {
width: 351px; width: 351px;
height: 36px; height: 36px;
...@@ -221,72 +225,70 @@ export default { ...@@ -221,72 +225,70 @@ export default {
border: 2px solid #bcc6ff; border: 2px solid #bcc6ff;
} }
} }
.my-content { .item {
.item { width: 359px;
width: 359px; height: 148px;
height: 148px; background-color: #fff;
background-color: #fff; border-radius: 2px;
border-radius: 2px; margin: 0 auto;
margin: 0 auto; margin-top: 9px;
margin-top: 9px; .left {
.left { width: 15%;
width: 15%; height: 100%;
height: 100%; float: left;
float: left; span {
span { display: block;
display: block; width: 30px;
width: 30px; height: 30px;
height: 30px; background-color: #e8e9ed;
background-color: #e8e9ed; border-radius: 8px;
border-radius: 8px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; margin-left: 10px;
margin-left: 10px; margin-top: 8px;
margin-top: 8px; img {
img { width: 11px;
width: 11px; height: 14px;
height: 14px; }
} }
}
.right {
height: 100%;
width: 85%;
float: right;
.right-top {
width: 285px;
height: 45px;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4b4a4b;
letter-spacing: 0;
line-height: 45px;
border-bottom: 1px solid #f3f3f7;
span:last-child {
float: right;
} }
} }
.right { .right-bottom {
height: 100%; width: 285px;
width: 85%; margin-top: 10px;
float: right; .number {
.right-top { font-family: Verdana-Bold;
width: 285px; font-size: 14px;
height: 45px;
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4b4a4b; color: #4b4a4b;
letter-spacing: 0; letter-spacing: 0;
line-height: 45px; font-weight: bold;
border-bottom: 1px solid #f3f3f7;
span:last-child {
float: right;
}
} }
.right-bottom { li {
width: 285px; font-family: PingFangSC-Regular;
margin-top: 10px; font-size: 14px;
.number { color: #4b4a4b;
font-family: Verdana-Bold; letter-spacing: 0;
font-size: 14px; height: 30px;
color: #4b4a4b; width: 100%;
letter-spacing: 0; span {
font-weight: bold; float: right;
}
li {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #4b4a4b;
letter-spacing: 0;
height: 30px;
width: 100%;
span {
float: right;
}
} }
} }
} }
...@@ -296,5 +298,45 @@ export default { ...@@ -296,5 +298,45 @@ export default {
color: #fff; color: #fff;
background-color: #0041c4; background-color: #0041c4;
} }
.content {
position: absolute;
top: 0;
}
.scrollContent {
padding-top: 2.92rem;
padding-bottom: 20px;
}
.tab-style {
width: 100%;
position: absolute;
}
}
.platform-ios {
#startList {
.scrollContent {
padding-top: 3.32rem;
}
}
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#startList {
.scrollContent {
padding-top: 3.72rem;
}
}
}
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#startList {
.scrollContent {
padding-top: 3.72rem;
}
}
}
} }
</style> </style>
src/pages/financingTrial/financing-trial.vue
View file @ fb4171fd
...@@ -59,40 +59,40 @@ ...@@ -59,40 +59,40 @@
</template> </template>
<script> <script>
export default { export default {
name: 'FinancingTrial', name: 'FinancingTrial',
data() { data () {
return { return {
lists: [], lists: [],
plan_price: '', plan_price: '',
price_date_to: '', price_date_to: '',
}
},
computed: {},
watch: {},
beforeRouteEnter (to, from, next) {
next(vm => {
if (from.name === 'ProDetailed') {
vm.price_date_to = vm.$route.params.price_date_to // 有效日期
vm.plan_price = vm.$route.params.plan_price // 参考价
vm.calculationQuery('collect')
} else if (from.name === 'HomePage') {
vm.calculationQuery()
vm.price_date_to = '' // 清除缓存（从收藏带来的数据）
vm.plan_price = ''
} }
}, })
computed: {}, next()
watch: {}, },
beforeRouteEnter(to, from, next) { activated () {
next(vm => {
if (from.name === 'ProDetailed') {
vm.price_date_to = vm.$route.params.price_date_to // 有效日期
vm.plan_price = vm.$route.params.plan_price // 参考价
vm.calculationQuery('collect')
} else if (from.name === 'HomePage') {
vm.calculationQuery()
vm.price_date_to = '' // 清除缓存（从收藏带来的数据）
vm.plan_price = ''
}
})
next()
},
activated() {
}, },
created() { created () {
}, },
methods: methods:
{ {
goDetails(val) { goDetails (val) {
this.$router.push({ this.$router.push({
name: 'FinancingDetails', name: 'FinancingDetails',
params: { params: {
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
}) })
}, },
// 试算查询 // 试算查询
calculationQuery(val) { calculationQuery (val) {
let vm = this let vm = this
if (val) { if (val) {
let url = $config.basePath + 'prd_product_calculation_query' let url = $config.basePath + 'prd_product_calculation_query'
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
} }
}, },
}, },
} }
</script> </script>
<style lang='less'> <style lang='less'>
#trial { #trial {
......
src/pages/videoSign/video-list.vue
View file @ fb4171fd
<template> <template>
<h-view id="startList"> <h-view id="videoList">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
...@@ -171,7 +171,7 @@ export default { ...@@ -171,7 +171,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#startList { #videoList {
.search { .search {
height: 52px; height: 52px;
background-color: #fff; background-color: #fff;
......
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