vue技术框架下手机端移动上拉实现分页功能

vue技术框架下手机端移动上拉实现分页功能

• 基于手机端项目实战总结而来
• • 1、业务场景
  • 2、前端优化思路
  • 3、具体实现思路
  • 4、把返回的数据首次取N条渲染页面
  • 5、获取滚动条的当前位置
  • 6、获取当前可视范围的高度
  • 7、获取页面文档的完整高度
  • 8、滚动事件触发下拉渲染
  • • 9、页面初始化后加上滚动监听事件
    • 10、经过上述代码，用户下拉触底后，页面滚动条变短，页面内容增加。
  • 11、全部代码：

基于手机端项目实战总结而来

手机端或者说移动端，在具体的项目开发中遇到了比较好的实现方法或者思路，随手记录下来

1、业务场景

最近做的一个前端项目，页面初始化时，页面打开比较慢，用户体验度不好。经过前后端分析确认，造成页面打开慢的原因有2个：

1. 由于请求的数据量比较大，后端接口返回数据慢；
   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>
 
复制