mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 01:06:45 +08:00
接口联调完成
This commit is contained in:
liyuetong
@@ -1,86 +1,73 @@
|
||||
<template>
|
||||
<div class="sale-list-container box">
|
||||
<!-- <div class="div100"> -->
|
||||
<img class="backImg" src="@/assets/images/laurelClub/background.png" alt="">
|
||||
<!-- <van-sticky>
|
||||
<van-tabs type="card" v-model="active" @change="tabChange" sticky>
|
||||
<van-tab name="GGrade" :title="prevDate+'月桂冠名单'"></van-tab>
|
||||
<van-tab name="SGrade" :title="prevDate+'月双冠名单'"></van-tab>
|
||||
<van-tab name="Team" title="我的团队"></van-tab>
|
||||
</van-tabs>
|
||||
</van-sticky> -->
|
||||
<!-- 内勤 1 外勤 0 -->
|
||||
<div class="fs12 bntTab" v-if="branchType == '1'">
|
||||
<span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
|
||||
<span :class="[active=='SGrade'?'tabMiddle mr2':'unTabMiddle mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
|
||||
<span :class="[active=='Team'?'tabRight':'unTabRight']" @click="tabChange('Team')">我的团队</span>
|
||||
</div>
|
||||
<div class="fs12 bntTab" v-else-if="branchType == '0'">
|
||||
<span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
|
||||
<span :class="[active=='SGrade'?'tabRight mr2':'unTabRight mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
|
||||
</div>
|
||||
<div class="fs12 mt20 mr20 bntCheck" v-if="active == 'Team'">
|
||||
<span :class="[plainStatus=='1'?'unCheckedLeft mr2':'checkedLeft mr2']" @click="approvalRecordSwitch('1')">桂冠</span>
|
||||
<span :class="[plainStatus=='0'?'unCheckedRight':'checkedRight']" @click="approvalRecordSwitch('0')">双冠</span>
|
||||
</div>
|
||||
<div class="section" v-if="isSuccess">
|
||||
<div v-if="claimApprovalList.length > 0">
|
||||
<div>
|
||||
<div class="pv15 pr15 pl15 mt15">
|
||||
<van-collapse v-model="activeNames" :border='false'>
|
||||
<van-collapse-item :name="index" v-for="(item, index) in claimApprovalList" :key="index" :border='false'>
|
||||
<template #title>
|
||||
<!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
|
||||
<img v-if="item.grade == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="">
|
||||
<img v-else-if="item.grade == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="">
|
||||
<img v-else-if="item.grade == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="">
|
||||
<img v-else-if="item.grade == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="">
|
||||
<img v-else-if="item.grade == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="">
|
||||
<img v-else-if="item.grade == '06'" class="iconGrade" src="@/assets/images/laurelClub/grade06.png" alt="">
|
||||
<span class="ml20 mr10 fwb w80 inline-b v-middle" style="word-break: break-all;">{{item.grade | statusFormat}}</span>
|
||||
<span class="ml100 fwb">{{item.number}}人</span>
|
||||
</template>
|
||||
<div class="pb10 pt10 border-t border-gb">
|
||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
||||
</div>
|
||||
<div class="pb10 pt10 border-gb">
|
||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
||||
</div>
|
||||
<div class="pb10 pt10 border-gb">
|
||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
||||
</div>
|
||||
<div @click="putAwayFunc(index)" class="m-bottom white">收起<img class="w20 h20" src="@/assets/images/laurelClub/putAway.png" alt=""></div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
<img class="backImg" src="@/assets/images/laurelClub/background.png" alt="" />
|
||||
<!-- 内勤 1 外勤 0（区部组） -->
|
||||
<div class="fs12 bntTab" v-if="branchType == '0'">
|
||||
<span :class="[active == 'GGrade' ? 'tabLeft mr2' : 'unTabLeft mr2']" @click="tabChange('GGrade')">{{ prevDate }}月桂冠名单</span>
|
||||
<span :class="[active == 'SGrade' ? 'tabMiddle mr2' : 'unTabMiddle mr2']" @click="tabChange('SGrade')">{{ prevDate }}月双冠名单</span>
|
||||
<span :class="[active == 'Team' ? 'tabRight' : 'unTabRight']" @click="tabChange('Team')">我的团队</span>
|
||||
</div>
|
||||
<div class="fs12 bntTab" v-else-if="branchType == '1'">
|
||||
<span :class="[active == 'GGrade' ? 'tabLeft mr2' : 'unTabLeft mr2']" @click="tabChange('GGrade')">{{ prevDate }}月桂冠名单</span>
|
||||
<span :class="[active == 'SGrade' ? 'tabRight mr2' : 'unTabRight mr2']" @click="tabChange('SGrade')">{{ prevDate }}月双冠名单</span>
|
||||
</div>
|
||||
<div class="fs12 mt20 mr20 bntCheck" v-if="active == 'Team'">
|
||||
<span :class="[plainStatus == 'GGrade' ? 'checkedLeft mr2' : 'unCheckedLeft mr2']" @click="approvalRecordSwitch('GGrade')">桂冠</span>
|
||||
<span :class="[plainStatus == 'SGrade' ? 'checkedRight' : 'unCheckedRight']" @click="approvalRecordSwitch('SGrade')">双冠</span>
|
||||
</div>
|
||||
<div class="section" v-if="isSuccess">
|
||||
<div v-if="list.length > 0">
|
||||
<div>
|
||||
<div class="pv15 pr15 pl15 mt15">
|
||||
<van-collapse v-model="activeNames" :border="false" @change="collapseChange">
|
||||
<van-collapse-item :class="[item.status == '0' ? 'mb20' : 'mb45']" :name="index" v-for="(item, index) in list" :key="index" :border="false">
|
||||
<template #title>
|
||||
<!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
|
||||
<img v-if="item.level == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="" />
|
||||
<img v-else-if="item.level == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="" />
|
||||
<img v-else-if="item.level == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="" />
|
||||
<img v-else-if="item.level == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="" />
|
||||
<img v-else-if="item.level == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="" />
|
||||
<img v-else-if="item.level == '06'" class="iconGrade" src="@/assets/images/laurelClub/grade06.png" alt="" />
|
||||
<span class="ml20 mr10 fwb w80 inline-b v-middle" style="word-break: break-all">{{ item.level | statusFormat }}</span>
|
||||
<span class="ml100 fwb">{{ item.count }}人</span>
|
||||
</template>
|
||||
<div class="pb10 pt10 border-tb" v-for="(item01, index01) in item.queryLaureMemberList" :key="index01">
|
||||
<img class="iconGrade mr30" :src="item01.agentHeadImgUrl" alt="" />
|
||||
<div class="w100 inline-b v-middle">
|
||||
{{ item01.managerComName }}<br />
|
||||
{{ item01.name }}
|
||||
</div>
|
||||
<span class="fs14 c-gray-dark ml80">{{ item01.crownLevel }}冠</span>
|
||||
</div>
|
||||
<div v-if="item.status == '1'" @click="putAwayFunc(index)" class="m-bottom white">
|
||||
收起<img class="w20 h20" src="@/assets/images/laurelClub/putAway.png" alt="" />
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center bg-white m20 borderYellow p20">
|
||||
<img class="w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
|
||||
</div>
|
||||
<van-popup v-model="show">
|
||||
<img class="w12 h12 inline-b btnClose" @click="closeFunc" src="@/assets/images/laurelClub/close.png" />
|
||||
<img src="@/assets/images/laurelClub/ruleBack.png" alt="">
|
||||
</van-popup>
|
||||
</div>
|
||||
<div v-else class="text-center bg-white m20 borderYellow p20">
|
||||
<img class="w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
|
||||
</div>
|
||||
<van-popup v-model="show">
|
||||
<img class="w12 h12 inline-b btnClose" @click="closeFunc" src="@/assets/images/laurelClub/close.png" />
|
||||
<img src="@/assets/images/laurelClub/ruleBack.png" alt="" />
|
||||
</van-popup>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup,Dialog,Popup } from 'vant'
|
||||
import { getAgentInfo } from '@/api/ebiz/my/my'
|
||||
import { queryLaureList,queryLaureMemberList,getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
|
||||
import { Tab, Tabs, Collapse, CollapseItem, Checkbox, CheckboxGroup, Dialog, Popup } from 'vant'
|
||||
// import { getAgentInfo } from '@/api/ebiz/my/my'
|
||||
import { queryLaureList, queryLaureMemberList, getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
|
||||
|
||||
export default {
|
||||
name: 'claimApprovalList',
|
||||
name: 'list',
|
||||
components: {
|
||||
[Tab.name]: Tab,
|
||||
[Tabs.name]: Tabs,
|
||||
@@ -93,86 +80,120 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prevDate:new Date().getMonth(), //上月月份
|
||||
prevDate: new Date().getMonth(), //上月月份
|
||||
branchType: null, // 1内勤 0外勤
|
||||
show: false, //弹框是否显示
|
||||
active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
|
||||
claimApprovalList: [
|
||||
{
|
||||
grade: '01',
|
||||
number:33
|
||||
},
|
||||
{
|
||||
grade: '02',
|
||||
number:34
|
||||
},
|
||||
{
|
||||
grade: '03',
|
||||
number:35
|
||||
},
|
||||
{
|
||||
grade: '04',
|
||||
number:34
|
||||
},
|
||||
{
|
||||
grade: '05',
|
||||
number:35
|
||||
},
|
||||
{
|
||||
grade: '06',
|
||||
number:36
|
||||
},
|
||||
], //接口数据
|
||||
list: [], //接口数据
|
||||
isSuccess: false, //有无数据显示
|
||||
plainStatus:'1', //审批记录--1已通过，0未通过按钮状态
|
||||
activeNames:[],//控制展开的面板列表
|
||||
plainStatus: 'GGrade', //我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||
activeNames: [], //控制展开的面板列表
|
||||
qubranchattr: '', //总监区的编码
|
||||
bubranchattr: '', //营业部的编码
|
||||
zubranchattr: '' //营业组的编码
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.checkBtn() // 初始化显示按钮
|
||||
window.appCallBack = this.appCallBack
|
||||
this.initThisPage()
|
||||
// this.initThisPage()
|
||||
this.getBranchByUserFunc()
|
||||
},
|
||||
methods: {
|
||||
//获取当前人是否内外勤接口
|
||||
async initThisPage() {
|
||||
const res = await getAgentInfo({})
|
||||
//获取当前登录人机构信息
|
||||
async getBranchByUserFunc() {
|
||||
const res = await getBranchByUser({})
|
||||
if (res.result == 0) {
|
||||
// res.branchType 以N打头的是内勤 其他是外勤
|
||||
this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
||||
// 机构等级(06-区 07-部 08-组 只有这三个显示'我的团队' )
|
||||
let level = res.content.level
|
||||
if (level == '06') {
|
||||
this.qubranchattr = res.content.code
|
||||
} else if (level == '07') {
|
||||
this.bubranchattr = res.content.code
|
||||
} else if (level == '08') {
|
||||
this.zubranchattr = res.content.code
|
||||
}
|
||||
if (level == '06' || level == '07' || level == '08') {
|
||||
this.branchType = 0
|
||||
} else {
|
||||
this.branchType = 1
|
||||
}
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
//tab按钮切换
|
||||
tabChange(active) {
|
||||
//获取当前人是否内外勤接口
|
||||
// async initThisPage() {
|
||||
// const res = await getAgentInfo({})
|
||||
// if (res.result == 0) {
|
||||
// // res.branchType 以N打头的是内勤 其他是外勤
|
||||
// this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
||||
// }
|
||||
// },
|
||||
//折叠面板
|
||||
collapseChange(activeNames) {
|
||||
let that = this
|
||||
this.active = active
|
||||
if(active == 'GGrade'){
|
||||
|
||||
//0 收起 1 展开
|
||||
//重置每条数据为收起状态
|
||||
this.list.forEach(function (item) {
|
||||
item.status = '0'
|
||||
})
|
||||
//数据展开
|
||||
if (activeNames.length) {
|
||||
activeNames.forEach(function (item) {
|
||||
that.list[item].status = '1'
|
||||
})
|
||||
}
|
||||
//切换tab时，需要重置右上角的按钮状态--全部展开
|
||||
that.activeNames = []
|
||||
|
||||
|
||||
// this.claimApprovalList = []
|
||||
// if(this.active == 'approvalRecord'){
|
||||
// //当为审批记录时，重置状态为1已通过
|
||||
// this.plainStatus = 1
|
||||
// this.getList(1)
|
||||
// }else{
|
||||
// this.getList()
|
||||
// }
|
||||
//展开状态的数据，会员名单取值
|
||||
this.list.forEach(function (item) {
|
||||
if (item.queryLaureMemberList.length == 0 && item.status == '1') {
|
||||
//返回值从Promise中取值PromiseValue
|
||||
var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
|
||||
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}
|
||||
a.then(function (result) {
|
||||
item.queryLaureMemberList = result
|
||||
})
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$forceUpdate()
|
||||
}, 1000)
|
||||
},
|
||||
//获取会员名单列表接口
|
||||
async getQueryLaureMemberListFunc(item) {
|
||||
let data = {
|
||||
type: '',
|
||||
monthStr: item.monthStr,
|
||||
level: item.level,
|
||||
qubranchattr: '',
|
||||
bubranchattr: '',
|
||||
zubranchattr: ''
|
||||
}
|
||||
if (this.active == 'Team') {
|
||||
data.type = this.plainStatus
|
||||
data.qubranchattr = this.qubranchattr
|
||||
data.bubranchattr = this.bubranchattr
|
||||
data.zubranchattr = this.zubranchattr
|
||||
} else {
|
||||
data.type = this.active
|
||||
}
|
||||
let content = []
|
||||
const res = await queryLaureMemberList(data)
|
||||
if (res.result == 0) {
|
||||
content = res.content
|
||||
}
|
||||
return content
|
||||
},
|
||||
//底部收起按钮
|
||||
putAwayFunc(id){
|
||||
var index = this.activeNames.findIndex(item =>{
|
||||
if(item == id){
|
||||
return true
|
||||
}
|
||||
})
|
||||
this.activeNames.splice(index,1)
|
||||
putAwayFunc(id) {
|
||||
var index = this.activeNames.findIndex((item) => {
|
||||
if (item == id) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
this.activeNames.splice(index, 1)
|
||||
//控制展开的面板列表数据变化时，重新定义展开收起时的margin-bottom值
|
||||
this.collapseChange(this.activeNames)
|
||||
},
|
||||
// 右上角按钮
|
||||
checkBtn() {
|
||||
@@ -193,33 +214,51 @@ export default {
|
||||
},
|
||||
appCallBack(data) {
|
||||
if (data.trigger == 'right_button_click') {
|
||||
this.show = true
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
//关闭方法会员规则弹层
|
||||
closeFunc(){
|
||||
closeFunc() {
|
||||
this.show = false
|
||||
},
|
||||
//审批记录--切换1已通过，0未通过按钮状态
|
||||
approvalRecordSwitch(plainStatus){
|
||||
this.getList(plainStatus)
|
||||
this.plainStatus = plainStatus
|
||||
//我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||
approvalRecordSwitch(plainStatus) {
|
||||
if (this.plainStatus != plainStatus) {
|
||||
this.plainStatus = plainStatus
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
//tab按钮切换
|
||||
tabChange(active) {
|
||||
let that = this
|
||||
if (this.active != active) {
|
||||
this.active = active
|
||||
this.getList()
|
||||
//切换tab时，需要重置右上角的按钮状态--全部展开
|
||||
that.activeNames = []
|
||||
}
|
||||
},
|
||||
//初始化列表
|
||||
async getList(plainStatus) {
|
||||
async getList() {
|
||||
let that = this
|
||||
that.total = 0
|
||||
let status
|
||||
that.claimApprovalIds = []
|
||||
//审批记录切换按钮时，1已通过，0未通过按钮状态
|
||||
if(plainStatus){
|
||||
status = plainStatus
|
||||
}else{
|
||||
status = this.active == 'notApproved'?'2':'1'
|
||||
let data = {
|
||||
type: '',
|
||||
qubranchattr: '',
|
||||
bubranchattr: '',
|
||||
zubranchattr: ''
|
||||
}
|
||||
// let data = {
|
||||
// status: status
|
||||
// }
|
||||
that.activeNames = []
|
||||
//我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||
if (this.active == 'Team') {
|
||||
data.type = this.plainStatus
|
||||
data.qubranchattr = this.qubranchattr
|
||||
data.bubranchattr = this.bubranchattr
|
||||
data.zubranchattr = this.zubranchattr
|
||||
} else {
|
||||
data.type = this.active
|
||||
}
|
||||
|
||||
this.$toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
@@ -227,31 +266,35 @@ export default {
|
||||
message: '加载中……'
|
||||
})
|
||||
|
||||
// let res = await queryClaimData(data)
|
||||
let res = await queryLaureList(data)
|
||||
this.$toast.clear()
|
||||
// if (res.result == '0') {
|
||||
if (res.result == '0') {
|
||||
this.list = []
|
||||
this.isSuccess = true
|
||||
// if (res.content.length) {
|
||||
// this.claimApprovalList = res.content
|
||||
// this.claimApprovalList.forEach(function(item) {
|
||||
// item.claimApprovalSearchLst.forEach(function(item01) {
|
||||
// that.total++ //统计list中有多少条子数据
|
||||
// that.claimApprovalIds.push(item01.id)
|
||||
// item01.isChecked = '0'
|
||||
// })
|
||||
// })
|
||||
// that.$forceUpdate();
|
||||
// }
|
||||
// if (this.claimApprovalList.length == 0) {
|
||||
// this.isSuccess = false
|
||||
// }
|
||||
// } else {
|
||||
// this.$toast(res.resultMessage)
|
||||
// }
|
||||
}
|
||||
if (res.content.length) {
|
||||
this.list = res.content
|
||||
this.list.forEach(function (item) {
|
||||
item.status = '0' //0 收起 1 展开
|
||||
item.queryLaureMemberList = []
|
||||
//返回值从Promise中取值PromiseValue
|
||||
//用async/await来发送异步请求，从服务端获取数据，它的调用会返回一个promise对象
|
||||
var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
|
||||
a.then(function (result) {
|
||||
item.queryLaureMemberList = result
|
||||
})
|
||||
})
|
||||
that.$forceUpdate()
|
||||
}
|
||||
if (this.list.length == 0) {
|
||||
this.isSuccess = false
|
||||
}
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFormat: function(status) {
|
||||
statusFormat: function (status) {
|
||||
let text
|
||||
switch (status) {
|
||||
case '01':
|
||||
@@ -279,230 +322,197 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
min-height: 100vh;
|
||||
background-color:#142162
|
||||
.box {
|
||||
min-height: 100vh;
|
||||
background-color: #142162;
|
||||
}
|
||||
// 顶部背景图
|
||||
.backImg{
|
||||
width: 100%;
|
||||
height: 317px;
|
||||
.backImg {
|
||||
width: 100%;
|
||||
height: 317px;
|
||||
}
|
||||
// 顶部tab按钮
|
||||
.bntTab{
|
||||
.bntTab {
|
||||
margin-top: -25px;
|
||||
text-align: center;
|
||||
.unTabLeft{
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.unTabLeft {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.tabLeft{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.tabLeft {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unTabMiddle{
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
// border-radius: 8px 0 0 8px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.unTabMiddle {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.tabMiddle{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
// border-radius: 8px 0 0 8px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.tabMiddle {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unTabRight{
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.unTabRight {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.tabRight{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
.tabRight {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.van-tabs{
|
||||
padding-top:0;
|
||||
.van-tabs__nav--card{
|
||||
box-shadow: 0 0 0 1px rgba(222, 144, 34, 1);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
height:40px;
|
||||
background-color: transparent;
|
||||
.van-tab{
|
||||
color: #333333;
|
||||
border-right: 1px solid rgba(222, 144, 34, 1);
|
||||
line-height: 10.66667vw;
|
||||
// margin-right: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.van-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.van-tab--active{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B !important;
|
||||
}
|
||||
}
|
||||
//桂冠，双冠按钮
|
||||
.bntCheck{
|
||||
text-align: right;
|
||||
.unCheckedLeft{
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.checkedLeft{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unCheckedRight{
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.checkedRight{
|
||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
||||
color: #FFCB6B;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.bntCheck {
|
||||
text-align: right;
|
||||
.unCheckedLeft {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.checkedLeft {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unCheckedRight {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.checkedRight {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.borderYellow{
|
||||
.borderYellow {
|
||||
border: 2px solid rgba(222, 144, 34, 1);
|
||||
border-radius:4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
//折叠面板样式
|
||||
/deep/.van-collapse{
|
||||
.van-collapse-item{
|
||||
/deep/.van-collapse {
|
||||
.van-collapse-item {
|
||||
border: 2px solid rgba(222, 144, 34, 1);
|
||||
border-radius:10px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 10px;
|
||||
// margin-bottom: 30px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.van-cell{
|
||||
.van-cell {
|
||||
background-color: transparent;
|
||||
padding: 13px 15px;
|
||||
}
|
||||
.van-collapse-item__content{
|
||||
.van-collapse-item__content {
|
||||
padding-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.m-bottom{
|
||||
.m-bottom {
|
||||
position: absolute;
|
||||
bottom: -23px;
|
||||
bottom: -30px;
|
||||
left: 150px;
|
||||
img{
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//隐藏顶部线条
|
||||
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after,.van-hairline--top::after{
|
||||
.van-hairline--top-bottom::after,
|
||||
.van-hairline-unset--top-bottom::after,
|
||||
.van-hairline--top::after {
|
||||
border-width: 0;
|
||||
}
|
||||
.border-t{
|
||||
.border-tb {
|
||||
border-top: 1px solid #dadada;
|
||||
}
|
||||
|
||||
/deep/#app .van-cell:not(:last-child)::after {
|
||||
border-bottom: 1px solid red !important;
|
||||
border-bottom: 1px solid red !important;
|
||||
}
|
||||
|
||||
.iconGrade{
|
||||
.iconGrade {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
//会员规则弹层
|
||||
/deep/.van-popup--center{
|
||||
/deep/.van-popup--center {
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 8px;
|
||||
background-color: #142162;
|
||||
border: 2px solid rgba(222, 144, 34, 1);
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.btnClose{
|
||||
.btnClose {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
// .div100{
|
||||
// height: 100%;
|
||||
// }
|
||||
// .section{
|
||||
// height: 100%;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: scroll;
|
||||
// -webkit-overflow-scrolling: touch;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user