vue技术框架下手机端移动上拉实现分页功能
- 基于手机端项目实战总结而来
- 1、业务场景
- 2、前端优化思路
- 3、具体实现思路
- 4、把返回的数据首次取N条渲染页面
- 5、获取滚动条的当前位置
- 6、获取当前可视范围的高度
- 7、获取页面文档的完整高度
- 8、滚动事件触发下拉渲染
- 9、页面初始化后加上滚动监听事件
- 10、经过上述代码,用户下拉触底后,页面滚动条变短,页面内容增加。
- 11、全部代码:
基于手机端项目实战总结而来
手机端或者说移动端,在具体的项目开发中遇到了比较好的实现方法或者思路,随手记录下来
1、业务场景
最近做的一个前端项目,页面初始化时,页面打开比较慢,用户体验度不好。经过前后端分析确认,造成页面打开慢的原因有2个:
- 由于请求的数据量比较大,后端接口返回数据慢;
2.由于数据量大,后端返给前端的大量数据使得前端页面渲染比较慢。;
2、前端优化思路
可以将后端返回的大量数据,使用类似分页式的功能,每次分页渲染。
3、具体实现思路
页面初始化时,获取后端返回的数据(返回的数据是数组形式的),将数据等分成N份,用户每次上拉到底部时,渲染下一页的数据。即:用户上拉滑动时,会触动scroll事件,当【文档高度(scrollHight)小于滚动条高度(scrollTop)加页面可视高度(clientHeight)】时,触发滚动事件(scroll事件),页面渲染下一页的数据。注意:scrollHight是整个页面文档的高度,scrollTop是文档内容顶部到可视窗口的高度,clientHeight是页面的视口大小,实际测试中需要scrollHight- scrollTop- clientHeight<N(N大于0,例如N可以为20),页面效果比较好。可以规避用户上拉页面到底部了下一页数据不渲染的bug。
4、把返回的数据首次取N条渲染页面
代码如下(每次取20条数据):
_this.total = this.customListTotal.length;// 数据总的条数
// 数据每页展示20条
this.customListTotal.slice(this.startIndex,this.currPageSize).map((val,ind)=>{
res.body.detailsList.map((val,ind)=>{
this.customList.push(val);
this.insuranceList.push({list:[]});
})
if(this.total-1 > this.currPageSize){
this.startIndex = this.currPageSize;
}
5、获取滚动条的当前位置
getScrollTop () {
var scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
}
6、获取当前可视范围的高度
getClientHeight () {
var clientHeight = 0
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight)
} else {
clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight)
}
return clientHeight
}
7、获取页面文档的完整高度
getScrollHeight () {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}
8、滚动事件触发下拉渲染
onScroll () {
if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 20) {
if(this.startIndex>=this.currPageSize && this.total-1>this.startIndex){
this.customListTotal.slice(this.startIndex,this.startIndex+this.currPageSize).map((val,ind)=>{
// res.body.detailsList.map((val,ind)=>{
this.customList.push(val);
this.insuranceList.push({list:[]});
})
this.startIndex = this.startIndex+this.currPageSize;
}
console.log('this.customList==',this.customList,this.customListTotal,this.startIndex,this.total);
}
}
9、页面初始化后加上滚动监听事件
this.$nextTick(function () { // 懒加载 上拉使用
window.addEventListener('scroll', this.onScroll)
})
10、经过上述代码,用户下拉触底后,页面滚动条变短,页面内容增加。
11、全部代码:
<template>
<div class="main" ref="indexMain">
<!--首页-->
<div class="main_top" ref="mainTop" id="mainTop" :style="mainTopStyle">
<div style="display:flex;margin-top: 2.64rem">
<span class="top_span01" :style="index>0?{marginLeft: '.14rem'}:''" v-for="(item,index) in headDetailsList.slice(0,2)">{{item.name}}:{{item.code}}</span>
<!--<span class="top_span01">家庭数量:{{familyNum}}个</span>
<span class="top_span01" style="margin-left: .14rem">客户人数:{{customers}}人</span>-->
</div>
<div style="display:flex;margin-top: .18rem">
<span class="top_span01" :style="index>0?{marginLeft: '.14rem'}:''" v-for="(item,index) in headDetailsList.slice(2)">{{item.name}}:{{item.code}}</span>
<!-- <span class="top_span01">计划书:{{planbooks}}份</span>
<span class="top_span01" style="margin-left: .14rem">客户阅读:{{customerReads}}人</span>
<span class="top_span01" style="margin-left: .14rem">加保人数:{{jiabaoNum}}人</span>-->
</div>
<div style="position:relative;display:flex;margin-top: .32rem;align-items: center">
<input class="top_input01" placeholder="请输入客户姓名" v-model="customerName" @change.self.prevent="" />
<!--<el-button icon="el-icon-search" plain class="search_bth" @click="queryCustomerList"></el-button>-->
<img src="../../static/image/search.png" class="img02" @click.self.prevent="">
<div class="search_bth2" @click.self.prevent="">搜索</div>
<div style="position: relative;margin-left: .15rem;display: flex;justify-content: center;align-items: center">
<img src="../../static/image/shaixuan.png" class="img03" @click="shaixuanCustom">
<span class="top_span02" style="" @click="">筛选</span>
</div>
</div>
</div>
<div class="main_body">
<div class="main_body_item" v-for="(item,index) in customList" :key="'customList'+index">
<div class="body_tag">{{item.type}}</div>
<div style="width:6.48rem;display: flex;justify-content:space-between;margin-top: .15rem;margin-right: .3rem">
<div><span class="body_span01">户主:</span><span style="color:#363636">{{item.name}}</span></div>
<div style="width: 3.02rem;">
<span class="body_span01">手机号:</span>
<a class="body_span02" :href="'tel:'+item.phone">{{item.phone}}</a>
<a class="body_span02" v-if="!item.phone" style="border: 0px solid #628DE1;color: rgb(54, 54, 54);">无</a>
</div>
<!-- <div><span class="body_span01">手机号:</span><a class="body_span02">{{item.phone?item.phone:'无'}}</a></div>-->
</div>
<div style="width:6.5rem;display: flex;justify-content:space-between;margin-top: .1rem;margin-right: .4rem">
<div @click="" style="display: flex;align-items: center;">
<img class="body_img01" src="../../static/image/planbook.png" />
<span class="body_span03">生成家庭计划书</span>
</div>
<div
style="width: 3.02rem;display: flex;align-items: center;"
>
<img class="body_img01" style="height: .55rem" src="../../static/image/zhuanfaurl.png" />
<span class="body_span03" style="border-bottom: .02rem solid #628DE1;" @click.stop="">转发微投链接</span>
</div>
</div>
<div class="family_div">
<div class="family_div_top" @click.prevent="">家庭保障<span style="margin-left: .14rem;"><i class="el-icon-arrow-down" @click.stop=""></i></span></div>
</div>
<div style="width:100%;display: none;flex-direction: column;align-items: center" :ref="'family'+index" :id="'family'+index" v-show="insuranceList[index].list.length>0">
<div class="family_zujian"><span style="margin-left: .15rem">家庭图谱</span></div>
<div style="display: flex;justify-content: center">
<FamilyAtlas ></FamilyAtlas>
</div>
<div class="family_zujian">
<span style="margin-left: .15rem">保单详情</span>
</div>
<div class="insurance_list" >
<div class="baodan_detail" v-for="(item1,index1) in insuranceList[index].list" :key="'list'+index1" :style="index1%2==1?{backgroundColor: '#ffffff'}:''"><!--当前客户家庭成员所有保单信息-->
<div style="width:100%;display: flex;flex-direction: column;align-items:center;margin-top: .2rem;"><!--当前客户某一个家庭成员保单信息-->
<div style="width: 6.5rem;display: flex;justify-content: space-between"><!--单个家庭成员信息-->
<div><span>{{item1.relationship}}:</span><span style="color:#363636">{{item1.name}}</span></div>
<div style="width: 3.02rem;">
<span>手机号:</span>
<a class="body_span02" :href="'tel:'+item1.phone">{{item1.phone}}</a>
<a class="body_span02" v-if="!item1.phone" style="border: 0px solid #628DE1;color: rgb(54, 54, 54);">无</a>
</div>
<!-- <div><span>手机号:</span><a class="body_span02">{{item1.phone?item1.phone:'无'}}</a></div>-->
</div>
<div style="width: 6.5rem;display: flex;justify-content: space-between;margin-top: .2rem;margin-bottom: .2rem"><!--单个家庭成员信息-->
<div><span>已有重疾保额:</span><span style="color:#363636">{{item1.insuredAmount}}</span></div>
<div style="width: 3.02rem"><span>最高购买保额:</span><span style="color:#363636">{{item1.buyInsuredAmount}}</span></div>
</div>
<div class="baodan_info" v-for="(item2,index2) in item1.familyDetailsPolicyList" :key="'insurance'+index2"><!--每张表单信息-->
<div :style="{width:(index2==0 && (item1.type==1 || item1.type==2 || item1.type==3)?'4.9rem':'100%'),display: 'flex',flexDirection: 'column'}"><!--左侧保单信息-->
<div><span>投保人:</span><span class="body_span02" style="font-size: .24rem;" @click="">{{item2.policyHolder}}</span></div>
<div style="margin-top: .1rem"><span>被保人:</span><span style="color:#363636">{{item2.policyInsured}}</span></div>
<div style="margin-top: .1rem"><span>产品名称:</span><span style="color:#363636">{{item2.product}}</span></div>
<!--1重疾:保额:单位万;2年金:保费:正常显示-->
<!--<div style="margin-top: .2rem"><span>保费:</span><span style="color:#363636">{{item2.money}}</span></div>-->
<div style="margin-top: .1rem"><span>{{item2.type1 == '1'?'保额':(item2.type1 == '2'?'保费':'')}}:</span><span style="color:#363636">{{item2.money}}</span></div>
<div style="margin-top: .1rem"><span>投保时间:</span><span style="color:#363636">{{item2.time}}</span></div>
</div>
<div v-if="index2==0 && (item1.type==1 || item1.type==2 || item1.type==3)"><!--右侧戳 已加保 超龄 退保-->
<img :src="require('../../static/image/stamp'+item1.type+'.png')" class="img01" />
</div>
</div>
</div>
</div>
<div class="custom_tag" v-if="item.type != '已加保'"><!--客户标签-->
<span class="custom_tag_span01">客户标签</span>
<span
:familyCode="item.familyCode"
insType="1"
:class="item.type == '待沟通'?'custom_tag_span02 custom_tag_span022':'custom_tag_span02'"
@click.stop=""
>待沟通</span>
<span
:familyCode="item.familyCode"
insType="2"
:class="item.type == '无意愿'?'custom_tag_span02 custom_tag_span022':'custom_tag_span02'"
@click.stop=""
>无意愿</span>
<span
:familyCode="item.familyCode"
insType="3"
:class="item.type == '重点关注'?'custom_tag_span03 custom_tag_span033':'custom_tag_span03'"
@click.stop=""
>重点关注</span>
</div>
</div>
</div>
</div>
</div>
<div class="shaixuan_modal" v-show="mainFlag" @click.self.prevent="">
<div class="shaixuan_div">
<span style="width:6.5rem;margin-top: .36rem">客户状态</span>
<el-checkbox-group v-model="customerSatus" @change="shaixuanCustomStatus" class="shaixuan_01" >
<el-checkbox
v-for="(item,index) in customersInfoList.customerSatusList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}
</el-checkbox>
</el-checkbox-group>
<span style="width:6.5rem;margin-top: .36rem">险种类型</span>
<el-checkbox-group v-model="insType" @change="shaixuanCustomType" class="shaixuan_01" >
<el-checkbox
v-for="(item,index) in customersInfoList.insTypeList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}</el-checkbox>
</el-checkbox-group>
<span style="width:6.5rem;margin-top: .36rem">计划书</span>
<el-radio-group v-model="prospectus" @change="shaixuanCustomBook" class="shaixuan_02" >
<el-radio
v-for="(item,index) in customersInfoList.planBookList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}</el-radio>
</el-radio-group>
<span style="width:6.5rem;margin-top: .36rem">客户阅读状态</span>
<el-radio-group v-model="readingState" @change="shaixuanCustomRead" class="shaixuan_02">
<el-radio
v-for="(item,index) in customersInfoList.readTypeList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}</el-radio>
</el-radio-group>
<span style="width:6.5rem;margin-top: .36rem">客户加保状态</span>
<el-radio-group v-model="additionalState" @change="shaixuanCustomIns" class="shaixuan_02" style="border-bottom: 0px solid #e0e0e0;">
<el-radio
v-for="(item,index) in customersInfoList.statusList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}</el-radio>
</el-radio-group>
<!-- <el-radio-group v-model="additionalState" @change="shaixuanCustomIns" class="shaixuan_021" style="border-bottom: 0px solid #e0e0e0;">
<el-radio
v-for="(item,index) in customersInfoList.statusList"
:label="item.code"
:key="item.code"
:style="index>0?{marginLeft:'1.2rem'}:''"
>{{item.name}}</el-radio>
</el-radio-group>-->
<div class="shaixuan_submit">
<span class="shaixuan_span01" @click.stop="">重置</span>
<span class="shaixuan_span01 shaixuan_span02" @click.stop="">确定</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import FamilyAtlas from './FamilyAtlas';
import Bus from'./Bus.js'
import { Indicator} from 'mint-ui';
export default {
name: "index",
data(){
return{
agentcode:'',// 业务员编码
customerName:'',// 搜索中展示的客户姓名
headDetailsList:[// 头部数据
/* {
name: "家庭数量",
code: "333个",
},
{
name: "客户人数",
code: "333人",
},
{
name: "计划书",
code: "222份",
},
{
name: "客户阅读",
code: "100人",
},
{
name: "加保人数",
code: "50人",
}*/
],
mainFlag:false,// 筛选框弹出与隐藏
mainTopStyle: {background:`url(` + require('../../static/image/top.png')+ `) no-repeat`,backgroundSize: '100% 100%'},// 头部的背景图片url
customList:[// 客户投保信息数组
{
name:'',// 户主姓名
type:'',// 客户标签
phone: '',
familyCode: "",// 家庭编号
customerCode:''// 户主客户号
}
],
customListTotal:[],// 总数据
insuranceList: [
{
name:'李立勇',// 姓名
relationship:'丈夫', // 关系(丈夫)
phone:'15313161006',
insuredAmount:'50万',// 已有重疾保额
buyInsuredAmount:'100万',// 购买最高保额
type:'1', // 红戳 已加保-1 年龄超限-2
list:[
{
policyHolder: "李大明",// 投保人
policyInsured: "李大明", // 被保人
product: "福临门",// 产品名称
money: "30万",// 保费
time: "2012-08-12" // 投保时间
},
{
policyHolder: "李大明",// 投保人
policyInsured: "李大明", // 被保人
product: "福临门",// 产品名称
money: "30万",// 保费
time: "2012-08-12" // 投保时间
}
]
}
],
familyClickObj:[// 家庭保障点击信息统计
/*{
orderNum: 0, // 家庭图谱数组中索引序号
membersCount:5 // 家庭成员数目
}*/
],
customersInfoList:{// 筛选弹框的数据
customerSatusList:[ // 客户状态 多选框
{
code:'3',
name:'重点关注'
},
{
code:'1',
name:'待沟通'
},
{
code:'2',
name:'无意愿'
}
],
insTypeList:[ // 险种类型 多选框
{
code:'1',
name:'重疾险'
},
{
code:'2',
name:'年金险'
}
],
planBookList:[ // 计划书 单选框
{
code:'',
name:'全部'
},
{
code:'1',
name:'已制作'
},
{
code:'2',
name:'未制作'
}
],
readTypeList:[// 客户阅读状态 单选框
{
code:'',
name:'全部'
},
{
code:'1',
name:'已阅读'
},
{
code:'2',
name:'未阅读'
}
],
statusList:[// 客户加保状态 单选框
{
code:'',
name:'全部'
},
{
code:'1',
name:'已加保'
},
{
code:'2',
name:'未加保'
}
]
},
customerSatus:[],// 客户状态
insType:[], // 险种类型
prospectus:'',// 计划书
readingState:'',// 客户阅读状态
additionalState:'',// 客户加保状态
customerSatusBack:[],// 客户状态--最近一次确定勾选的数据
insTypeBack:[], // 险种类型--最近一次确定勾选的数据
prospectusBack:'',// 计划书--最近一次确定勾选的数据
readingStateBack:'',// 客户阅读状态--最近一次确定勾选的数据
additionalStateBack:'',// 客户加保状态--最近一次确定勾选的数据
/* customerSatusDefault:[],// 客户状态-重置为默认状态
insTypeDefault:[], // 险种类型-重置为默认状态
prospectusDefault:'1',// 计划书-重置为默认状态
readingStateDefault:'1',// 客户阅读状态-重置为默认状态
additionalStateDefault:'1',// 客户加保状态-重置为默认状态*/
openid:'',//业务员openid
isInit:true,// 是否是初始化页面,true-是,false-否
isShow: false,// 整个页面是否展示
startIndex:0,// 客户列表customListTotal数组索引
currPageSize:20,// 当前每页的条数
total:0,// customListTotal数组长度
}
},
mounted(){
},
methods:{
/**获取滚动条当前的位置**/
getScrollTop () {
var scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
/**获取当前可视范围的高度**/
getClientHeight () {
var clientHeight = 0
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
}
return clientHeight
},
/**获取文档完整的高度**/
getScrollHeight () {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
},
/**滚动事件触发下拉加载**/
onScroll () {
if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 20) {
if(this.startIndex>=this.currPageSize && this.total-1>this.startIndex){
this.customListTotal.slice(this.startIndex,this.startIndex+this.currPageSize).map((val,ind)=>{
// res.body.detailsList.map((val,ind)=>{
this.customList.push(val);
this.insuranceList.push({list:[]});
})
this.startIndex = this.startIndex+this.currPageSize;
}
console.log('this.customList==',this.customList,this.customListTotal,this.startIndex,this.total);
}
},
/**页面初始化**/
},
}
</script>
<style scoped>
.main{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
/*justify-content: center;*/
background: rgba(243,243,243,1);
font-family:Source Han Sans CN;
/*align-items: center;*/
/* background: url("../../static/image/qrcode-backgroundimage.png") no-repeat;
background-size: 100% 100%;*/
}
.AA{}
.main_top{
position: relative;
width: 100%;
height: 5.21rem;
display: flex;
flex-direction: column;
align-items: center;
/*background: url("../../static/image/top.png") no-repeat;*/
/* background-size: 100% 100%;*/
font-size:.24rem;
font-family:PingFang SC;
font-weight:400;
color:rgba(79,134,96,1);
}
.AAA{}
.top_span01{
height:.37rem;
display: flex;
align-items: center;
padding-left: .11rem;
padding-right: .11rem;
border:1px solid rgba(79,134,96,1);
border-radius:.05rem;
}
.top_span02{
/* width:1.27rem;
height:.62rem;
display: flex;
justify-content: center;
align-items: center;
background:rgba(228,158,38,1);
box-shadow:0rem .05rem .31rem .01rem rgba(63,111,140,0.21);
border-radius:.31rem;*/
position: absolute;
font-size:.26rem;
font-weight:400;
color:rgba(255,255,255,1);
}
.top_input01{
/*width:5.26rem;*/
width:3.29rem;
padding-top: .15rem;
padding-bottom: .15rem;
padding-left: .76rem;
padding-right: 1.1rem;
background:rgba(255,255,255,1);
box-shadow:0rem 0.05rem 0.31rem 0.01rem rgba(63,111,140,0.21);
border-radius:.40rem;
font-size:.26rem;
font-weight:400;
color:rgba(102,102,102,1);
}
.top_input01::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size:.26rem;
font-weight:400;
color:rgba(102,102,102,1);
opacity: 1;
}
.top_input01:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-size:.26rem;
font-weight:400;
color:rgba(102,102,102,1);
opacity: 1;
}
.top_input01::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:.26rem;
font-weight:400;
color:rgba(102,102,102,1);
opacity: 1;
}
.top_input01::-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:.26rem;
font-weight:400;
color:rgba(102,102,102,1);
opacity: 1;
}
.search_bth{
position: absolute;
width: .69rem;
height: .69rem;
margin-left: 1.06rem;
padding: 0;
border: 0px solid #dcdfe6;
}
.search_bth2{
position: absolute;
width:.99rem;
height:.62rem;
display: flex;
justify-content: center;
align-items: center;
font-size:.26rem;
font-weight:400;
color:rgba(255,255,255,1);
border-radius:.31rem;
left: 4.17rem;
bottom: .01rem;
background: url("../../static/image/search2.png") no-repeat;
background-size: 100% 100%;
}
.main_body{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: .3rem;
}
.bb{}
.main_body_item{
position: relative;
width:7.10rem;
display: flex;
margin-top: .3rem;
flex-direction: column;
align-items: flex-end;
background:rgba(255,255,255,1);
border-radius:.10rem;
}
.body_tag{
width:1.37rem;
height:.44rem;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-weight:400;
color:rgba(255,255,255,1);
/* background:rgba(228,158,38,1);*/
background: url("../../static/image/jiabao.png") no-repeat;
background-size: 100% 100%;
border-top-right-radius:.1rem;
border-bottom-left-radius:.1rem;
}
.body_span01{
font-size:.28rem;
font-weight:400;
color:rgba(152,152,152,1);
}
.body_span02{
font-size:.28rem;
font-weight:400;
color:#628DE1;
border-bottom: .02rem solid #628DE1;
}
.body_span03{
font-size:.28rem;
font-weight:400;
color:#628DE1;
border-bottom: .02rem solid #4A90E2;
}
.body_img01{
width: .55rem;
height: .57rem;
}
.family_div{
width: 100%;
display: flex;
flex-direction: column;
margin-top: .38rem;
border-top: 1px solid rgba(224,230,235,1);
}
.family_div_top{
width: 100%;
height: .86rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: .1rem;
font-size:.28rem;
font-weight:400;
color:rgba(152,152,152,1);
}
.a2{}
.family_zujian{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
font-size:.30rem;
font-weight:bold;
color:rgba(54,54,54,1);
}
.family_zujian::before{
content: '';
position: absolute;
width:.05rem;
height:.29rem;
background:rgba(111,194,137,1);
}
.insurance_list{
width: 100%;
display: flex;
flex-direction: column;
font-size:.30rem;
font-weight:bold;
color:rgba(54,54,54,1);
}
.baodan_detail{
width:100%;
display: flex;
justify-content: center;
margin-top: .23rem;
background:rgba(245,255,253,1);
font-size:.28rem;
font-weight:400;
color:rgba(152,152,152,1);
}
.baodan_info{
width:6.50rem;
display: flex;
justify-content: space-between;
margin-bottom: .2rem;
padding-top: .2rem;
font-size:.24rem;
color:rgba(152,152,152,1);
border-top:1px solid rgba(223,229,235,1);
}
.img01{
width: 1.5rem;
height: 1.5rem;
}
.img02{
position: absolute;
width: .3rem;
height: .3rem;
left: .32rem;
}
.img03{
/* position: absolute;*/
width: 1.27rem;
height: .63rem;
}
.custom_tag{
width:100%;
height:.98rem;
display: flex;
align-items: center;
background:rgba(255,255,255,.11);
box-shadow:0rem 0rem .21rem 0rem rgba(0,41,14,.11);
border-radius:0rem 0rem .10rem .10rem;
}
.custom_tag_span01{
margin-left: .39rem;
font-size:.26rem;
font-weight:bold;
color:rgba(152,152,152,1);
}
.custom_tag_span02{
/* width:1.31rem;
height:.52rem;
line-height: .52rem;
text-align: center;*/
/* display: flex;
justify-content: center;
align-items: center;*/
padding: .092rem .3rem .095rem;
font-size: .25rem;
font-weight: 400;
color: #989898;
margin-left: .38rem;
border:1px solid rgba(130,130,130,1);
border-radius:.10rem;
}
.custom_tag_span022{
/* width:1.31rem;
height:.52rem;
line-height: .52rem;
text-align: center;*/
/* display: flex;
justify-content: center;
align-items: center;*/
padding: .112rem .318rem;
border: 0px solid #828282;
color:rgba(255,255,255,1);
background: url("../../static/image/custag.png") no-repeat;
background-size: 100% 100%;
}
.custom_tag_span03{
/*width: 1.33rem;
height: .54rem;*/
margin-left: .38rem;
padding: .094rem .176rem .095rem;
border: 1px solid #828282;
font-size: .25rem;
font-weight: 400;
color: #989898;
border-radius:.10rem;
/* background: url("../../static/image/custag.png") no-repeat;
background-size: 100% 100%;*/
/*background:rgba(228,158,38,1);*/
}
.custom_tag_span033{
/*width: 1.33rem;
height: .54rem;*/
margin-left: .38rem;
padding: .112rem .1933rem .112rem;
border: 0px solid #828282;
color:rgba(255,255,255,1);
background: url("../../static/image/custag.png") no-repeat;
background-size: 100% 100%;
/*background:rgba(228,158,38,1);*/
}
.shaixuan_modal{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top:0;
background:rgba(0,0,0,.5);
}
.shaixuan_div{
position: fixed;
left: 0;
bottom: 0;
width:100%;
/*height:8.74rem;*/
display: flex;
flex-direction: column;
align-items: center;
background:rgba(255,255,255,1);
box-shadow:0rem 0rem .15rem 0rem rgba(0, 0, 0, 0.06);
border-radius:.10rem .10rem 0rem 0rem;
font-size:.28rem;
font-weight:400;
color:rgba(152,152,152,1);
}
.shaixuan_01{
width: 6.5rem;
display: flex;
/*justify-content: space-between;*/
padding-top: .29rem;
padding-bottom: .38rem;
border-bottom: 1px solid rgba(224,224,224,1);
}
.shaixuan_01>>>.el-checkbox__inner{
width:.30rem;
height:.30rem;
background:rgba(255,255,255,1);
border:.02rem solid rgba(224,224,224,1);
border-radius:.06rem;
}
.shaixuan_01>>>.el-checkbox__input.is-checked .el-checkbox__inner{
width:.30rem;
height:.30rem;
background:rgba(97,148,229,1);
border: 0px solid #6194e5;
border-radius:.06rem;
}
.shaixuan_01>>>.el-checkbox__inner:after{
width: 5px;
height: 8px;
left: 5px;
top: 2px;
}
.shaixuan_01>>>.el-checkbox__label{
padding-left: .14rem;
font-size:.28rem;
font-weight:400;
color:rgba(54,54,54,1);
/* color: #6194e5;*/
}
.shaixuan_01>>>.el-checkbox__input.is-checked+.el-checkbox__label{
color: #6194e5;
}
.shaixuan_01>>>.el-checkbox{
margin-right: 0;
}
.shaixuan_02{
position: relative;
width: 6.5rem;
height: .5rem;
display: flex;
align-items: center;
/*justify-content: space-between;*/
padding-top: .29rem;
padding-bottom: .3rem;
border-bottom: 1px solid rgba(224,224,224,1);
}
.shaixuan_02>>>.el-radio__label{
display: inline-table;
padding-left: .14rem;
font-size:.28rem;
font-weight:400;
color:rgba(54,54,54,1);
}
.shaixuan_02>>>.el-radio{
margin-right: 0;
}
.shaixuan_02>>>.el-radio__inner{
/* width:.30rem;
height:.30rem;*/
width:14px;
height:14px;
background:rgba(255,255,255,1);
border:1px solid rgba(224,224,224,1);
}
.shaixuan_02>>>.el-radio__input.is-checked .el-radio__inner{
/* width:.30rem;
height:.30rem;*/
width:14px;
height:14px;
background:rgba(255,255,255,1);
border: 1px solid #6194E5;
}
.shaixuan_02>>>.el-radio__inner:after{
/* width: .2rem;
height: .2rem;*/
width: 9px;
height: 9px;
/* left: 48%;
top: 48%;*/
background-color:#6194E5;
}
.shaixuan_02>>>.el-radio__input.is-checked+.el-radio__label{
color: #6194e5;
}
.shaixuan_submit{
display: flex;
width: 100%;
height: .97rem;
background:rgba(255,255,255,1);
border:1px solid rgba(224,224,224,1);
font-size:.30rem;
font-weight:400;
color:rgba(54,54,54,1);
}
.shaixuan_span01{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background:rgba(255,255,255,1);
/* border:1px solid rgba(224,224,224,1);*/
}
.shaixuan_span02{
font-size:.30rem;
font-weight:400;
color:rgba(255,255,255,1);
background:rgba(97,148,229,1);
}
</style>