zy-wechat/pages/inspectList/inspectList.vue

<template>
  <view class="inspectList">
    <view class="page_tab">
      <view class="page_tab_bar active">
        <view class="tab_dept">
          <text @click="changeDept">{{ currenDept.dept}}</text>
          <text class="newicon newicon-weibiaoti2010104" @click="changeDept"></text>
        </view>
        <text class="moreFilter newicon newicon-shaixuan" @click="moreFilter"></text>
      </view>
    </view>
    <view v-if="zxzData.length == 0" class="zwsj">
      <image class="zwsj-img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
      <view class="zwsj-txt">暂无数据</view>
    </view>
    <view v-if="zxzData.length" class="page_items">
      <scroll-view class="page_items_scroll" scroll-y :refresher-enabled="scroll_refresher_enabled"
        :refresher-triggered="triggered" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
        @scrolltolower="scrolltolower" :scroll-top="scroll_top" @refresherabort="refresherabort" @scroll="scroll"
        refresher-background="transport">
        <view class="page_item_wrap" v-for="(item, index) of zxzData" :key="index">
          <view class="page_item">
            <view class="page_item_top">
              <view class="page_item_top_L">
                <view class="L_time" @click="toPatientDetail(item)">
                  <template v-if="!item.execDept">
                    <!-- 没有标记出行方式 -->
                    <view class="circle"></view>
                    <view class="circle"></view>
                    <view class="circle"></view>
                  </template>
                  <template v-else-if="!item.yyTime">
                    <!-- 没有预约时间 -->
                    <view class="circle"></view>
                    <view class="circle"></view>
                  </template>
                  <template v-else-if="!(item.patientDTO && item.patientDTO.tripTypeDTO)">
                    <!-- 没有检查科室 -->
                    <view class="circle"></view>
                  </template>
                  {{ item.patientName }}({{ item.bedNum }})
                </view>
              </view>
              <view class="page_item_top_R">
                <text>{{item.inspectState?item.inspectState.name:''}}</text>
                <button @click="build(item)" v-if="!item.gdId&&(item.inspectState.value==1||item.inspectState.value==30)&&item.execDept">建单</button>
                <button @click="viewWorkOrder(item)" v-if="item.gdId">查看工单</button>
              </view>
            </view>
            <view class="page_item_cont">
              <view class="page_item_conts">
                <view class="page_item_conts_item">
                  <view class="column">
                    <text class="p_title">住院号：</text>
                    <text class="p_info">{{ item.residenceNo }}</text>
                  </view>
                  <view class="column">
                    <text class="p_title">出行方式：</text>
                    <text class="p_info">{{ (item.patientDTO && item.patientDTO.tripTypeDTO) ? item.patientDTO.tripTypeDTO.inspectMode : '' }}</text>
                  </view>
                </view>
                <view class="page_item_conts_item">
                  <text class="p_title">检查科室：</text>
                  <text class="p_info">{{ item.execDept ? item.execDept.dept : "" }}<text class="newicon newicon-weibiaoti2010104 fz28" @click="changeExecDept(item)" v-if="item.inspectState.value == 1 || item.inspectState.value == 30"></text></text>
                </view>
                <view class="page_item_conts_item">
                  <text class="p_title">检查项目：</text>
                  <text class="p_info">{{ item.inspectName }}</text>
                </view>
                <view class="page_item_conts_item btn">
                  <text class="p_title">预约时间：</text>
                  <text class="p_info">{{ item.yyTime }}<text class="newicon newicon-weibiaoti2010104 fz28" @click="changeYyTime(item)" v-if="item.inspectState.value == 1 || item.inspectState.value == 30"></text></text>
                </view>
                <view class="page_item_conts_item">
                  <view class="column">
                    <text class="p_title">预约叫号：</text>
                    <text class="p_info">{{ item.reservationNumber }}</text>
                  </view>
                  <view class="column">
                    <text class="p_title">是否紧急：</text>
                    <text class="p_info" :class="{red:item.priority==='1'||item.priority===1}">{{(item.priority==='1'||item.priority===1)?'是':'否'}}</text>
                  </view>
                </view>
                <view class="page_item_conts_item">
                  <view class="column">
                    <text class="p_title">护理等级：</text>
                    <text class="p_info" :class="{red:item.careLevel&&(item.careLevel.value==0||item.careLevel.value==1)}">{{item.careLevel?item.careLevel.name:''}}</text>
                  </view>
                  <view class="column">
                    <text class="p_title">病情级别：</text>
                    <text class="p_info"
                      :class="{red:item.illnessState&&(item.illnessState.value==2||item.illnessState.value==3)}">{{item.illnessState?item.illnessState.name:''}}</text>
                  </view>
                </view>
                <view class="page_item_conts_item">
                  <text class="p_title">注意事项：</text>
                  <text class="p_info">{{ item.patientDTO ? item.patientDTO.remark : '' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部扫一扫 -->
    <bigScreen></bigScreen>
    <!-- 筛选 -->
    <fjj-condition @touchmove.stop :list="list" :visibleDrawer="visibleDrawer" @result="resultConditon"
      :keyWordGvie="searchlist.keyWord" :keyWordOld="keyWordOld" :bedNumSortGvie="searchlist.bedNumSort" :noneEndDeptGvie="searchlist.noneEndDept" :noneYytimeGvie="searchlist.noneYytime" :inspectStateList="inspectStateList" />
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @ok="ok" @cancel="cancel" @know="know" :operate="models.operate"></showModel>
		<!-- 弹窗 -->
		<inspectRemoveModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content" @know="know1" :operate="models1.operate" @ok="ok1" @cancel="cancel1" :yy="currentInspect.yyTime"></inspectRemoveModel>
    <!-- 弹窗 -->
    <inspectExecDeptModel :title="models2.title" :icon="models2.icon" :disjunctor="models2.disjunctor" :content="models2.content" @know="know2" :operate="models2.operate" @ok="ok2" @cancel="cancel2" :execDeptList="currentInspect.inspectCheckType && currentInspect.inspectCheckType.deptList" :execDeptId="currentInspect.execDeptId"></inspectExecDeptModel>
  </view>
</template>
<script>
  import bigScreen from "../../components/bigScreen/bigScreen.vue";
  import {
    get,
    post,
    deleteIt,
    webHandle
  } from "../../http/http.js";
  // https://ext.dcloud.net.cn/plugin?id=2849
  import fjjCondition from "@/components/fjj-condition/fjj-condition.vue";
  import showModel from "../../components/showModel/showModel.vue";
  export default {
    data() {
      return {
				keyWordOld: '',
				currentInspect: {},
				// 弹窗model1
				models1: {
				  disjunctor: false,
				},
        // 弹窗model1
        models2: {
          disjunctor: false,
        },
        // 记录当前滚动条的位置
        scrollYY: 0,
        // 建单的对象
        jdItem: {},
        // 弹窗model
        models: {
          disjunctor: false,
        },
        // 面板是否显示
        visibleDrawer: false,
        // 面板数据
        list: [{
            title: "时间",
            type: "single", //single不带时分秒
            key: "yyTime",
          },
          {
            title: "关键词",
            type: "keyWord", //keyWord是input
            key: "keyWord",
          },
          {
            title: "排序",
            type: "bedNumSort", //床号排序
            key: "bedNumSort",
          },
          {
            title: "检查信息状态",
            type: "inspectState", //检查信息状态
            key: "inspectState",
          },
          {
            title: "异常数据筛选",
            type: "abnormal", //异常数据筛选
            key: "abnormal",
          },
        ],
        // 面板搜索数据
        searchlist: {
          yyTime: new Date().Format("yyyy/MM/dd"),
          keyWord: "",
          bedNumSort: false,
          inspectState: "1,30",
          noneEndDept: false,
          noneYytime: false,
        },
        // 检查信息状态列表
        inspectStateList: [],
        //当前登录人所属科室
        currenDept: {},
        // 抢单的id
        qdId: "",
        //列表数据
        zxzData: [],
        //分页页码
        idx: 0,
        // 列表项总数
        totalNum: -1,
        triggered: false, //下拉刷新状态
        freshing: false, //上拉加载开关
        scroll_top: 0, //距离顶部的距离
        scroll_refresher_enabled: true, //是否开启自定义下拉刷新
      };
    },
    components: {
      bigScreen,
      fjjCondition,
    },
    methods: {
      toPatientDetail(data){
        uni.navigateTo({
          url: `/pages/patientInformationInfo/patientInformationInfo?patientCode=${data.patientCode}`,
        });
      },
			// 修改预约时间->返回
			know1() {
			  this.models1.disjunctor = false;
			},
			// 修改预约时间->确定
			ok1(data) {
				console.log(data);
				const { yyTime} = data;
				if (!yyTime) {
				  //没有填写预约时间
				  uni.showModal({
				    title: "提示",
				    content: "请填写预约时间！",
				    showCancel: false,
				    success: function(res) {
				      if (res.confirm) {
				        console.log("用户点击确定");
				      } else if (res.cancel) {
				        console.log("用户点击取消");
				      }
				    },
				  });
				  return;
				}
			  this.models1.disjunctor = false;
			  let postData = {
			    inspectCode: this.currentInspect.inspectCode,
					yyTime
			  };
			  uni.showLoading({
			    title: '加载中',
			    mask: true,
			  })
			  post('/workerOrder/updateInspectYytime', postData).then(res => {
			    uni.hideLoading();
			    if (res.status == 200) {
			      this.idx = 0;
			      this.totalNum = -1;
			      this.waitingOrders(0);
			    } else {
			      uni.showToast({
			        icon: "none",
			        title: "修改失败",
			      });
			    }
			  })
			},
			// 修改预约时间->取消
			cancel1() {
			  this.models1.disjunctor = false;
			},
			// 修改预约时间
			changeYyTime(item) {
			  this.currentInspect = item;
			  this.models1 = {
			    disjunctor: true,
			    content: `您要修改[${item.inspectName||''}]的预约时间`,
			    icon: "warn",
			    operate: {
			      ok: "确定",
			      cancel: "取消",
			    },
			  };
			},
      // 修改检查科室
			changeExecDept(item) {
			  this.currentInspect = item;
        if(this.currentInspect.inspectCheckType){
          this.currentInspect.inspectCheckType.deptList = this.currentInspect.inspectCheckType.deptList || [];
        }
			  this.models2 = {
			    disjunctor: true,
			    content: `请选择[${item.patientName||''}]检查项目的检查科室`,
			    icon: "warn",
			    operate: {
			      ok: "确定",
			      cancel: "取消",
			    },
			  };
			},
      // 修改检查科室->返回
      know2() {
        this.models2.disjunctor = false;
      },
      // 修改检查科室->确定
      ok2(data) {
      	console.log(data);
      	const { execDeptId } = data;
        this.models2.disjunctor = false;
        let postData = {
          "id": this.currentInspect.id,
          "execDeptId": execDeptId
        };
        
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        post('/simple/data/updData/inspect', postData).then(res => {
          uni.hideLoading();
          if (res.status == 200) {
            this.idx = 0;
            this.totalNum = -1;
            this.waitingOrders(0);
          } else {
            uni.showToast({
              icon: "none",
              title: "修改失败",
            });
          }
        })
      },
      // 修改检查科室->取消
      cancel2() {
        this.models2.disjunctor = false;
      },
      // 更多筛选
      moreFilter() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        let postData = {
          "type": "list",
          "key": "inspect_state"
        };
        post("/common/common/getDictionary", postData).then((result) => {
          this.inspectStateList = result.map(item => {
            return {
              label: item.name,
              value: item.value
            }
          });
          this.inspectStateList.unshift({
            label: '全部',
            value: '0'
          });
          uni.hideLoading();
          this.visibleDrawer = true;
        })
      },
      // 查看工单
      viewWorkOrder(data) {
        console.log(data)
        uni.navigateTo({
          url: `../receipt_infopage/receipt_infopage?id=${data.gdId}`,
        });
      },
      // 建单
      build(data) {
        console.log(data);
        this.jdItem = data;
        this.models = {
          disjunctor: true,
          title: "提示",
          content: `您即将创建【${data.patientName || ""}】患者前往【${
          data.execDept ? data.execDept.dept : ""
        }】进行【${data.inspectName || ""}】检查，您确认吗？`,
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      //建单后返回
      know() {
        this.models.disjunctor = false;
        this.idx = 0;
        this.totalNum = -1;
        this.waitingOrders(0);
        // this.scroll_top = Math.random(); //回到顶部
        this.scroll_top = this.scrollYY; //回到当前位置
      },
      //建单确定
      ok() {
        this.models.disjunctor = false;
        let postData = {
          deptId: this.currenDept.id
        };
        let taskId;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/nurse/getDeptTaskType", postData).then((result) => {
          if (result.status == 200) {
            let obj = result.data.allTaskTypes.filter(
              (item) => item.associationType.value == "inspect"
            );
            if (obj.length) {
              taskId = obj[0].id;
              let postData = {
                workOrder: {
                  sourceId: 4,
                  taskType: {
                    id: taskId,
                    isHalfInspect: obj[0].isHalfInspect === 1 ? 1 : 0
                  },
                  createDept: this.currenDept.id,
                  startDept: {
                    id: this.currenDept.id
                  },
                  patient: {
                    patientCode: this.jdItem.patientCode
                  },
                  checkList: [{
                    id: this.jdItem.id
                  }],
                  goods: "",
                  worker: {
                    id: uni.getStorageSync("userData").user.id
                  },
                  workerStartOrderFlag: 1,
                },
              };
              //根据检查的紧急度加急
              if (this.jdItem.priority === 1 || this.jdItem.priority === '1') {
                postData.workOrder["urgentDetails"] = {
                  checkStatus: {
                    id: 329
                  },
                  urgentReason: '系统根据检查信息，自动进行加急',
                };
              }
              post("/api/startOrder", postData).then((res) => {
                uni.hideLoading();
                let msg = res.msg;
                let icon = "error";
                if (res.status == 200) {
                  msg = "建单成功";
                  icon = "success";
                }
                this.models = {
                  disjunctor: true,
                  content: msg,
                  icon: icon,
                  operate: {
                    know: "返回",
                  },
                };
              });
            } else {
              uni.hideLoading();
              this.models = {
                disjunctor: true,
                content: "建单失败,科室未开通！",
                icon: "error",
                operate: {
                  know: "返回",
                },
              };
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
      //建单取消
      cancel() {
        this.models.disjunctor = false;
      },
      //点击确定后返回参数
      resultConditon(obj) {
        console.log(obj);
        this.visibleDrawer = obj.visibleDrawer;
        if (obj.str_result) {
          this.searchlist = {
            yyTime: obj.str_result.yyTime,
            keyWord: obj.str_result.keyWord,
            bedNumSort: obj.str_result.bedNumSort,
            noneEndDept: obj.str_result.noneEndDept,
            noneYytime: obj.str_result.noneYytime,
            inspectState: obj.str_result.inspectState,
          };
          this.idx = 0;
          this.totalNum = -1;
          this.waitingOrders(0);
        }
      },
      // 切换科室
      changeDept() {
        uni.navigateTo({
          url: `../search/search?type=inspectList`,
        });
      },
      //检查列表数据获取
      waitingOrders(idx) {
        if (this.zxzData.length == this.totalNum) {
          uni.showToast({
            icon: "none",
            title: "没有更多数据了！",
          });
          this.freshing = true;
          return;
        }
        console.log(this.searchlist, 222222)
        let postData = {
          idx,
          sum: 99999,
          inspect: {
            queryInspect: 1,
            hosId: uni.getStorageSync("userData").user.currentHospital.id,
            platForm: 2,
            searchDays: 10000,
            applyDept: {
              id: this.currenDept.id,
            },
            clickSort: this.searchlist.bedNumSort,
            noneEndDept: this.searchlist.noneEndDept ? 1 : undefined,
            noneYytime: this.searchlist.noneYytime ? 1 : undefined,
            yyTime: this.searchlist.yyTime.split("/").join("-") + " 00:00:00",
          },
        };
        if (this.searchlist.inspectState) {
          let arr = this.searchlist.inspectState.split(',');
          let flag = arr.includes('0');
          postData.inspect.inspectState = {
            "value": flag ? '0' : arr.join(',')
          };
        }
        // url传递过来的住院号
        if (this.currenDept.patientCode) {
          this.searchlist.keyWord = this.currenDept.patientCode;
          this.currenDept.patientCode = "";
        }
        if (this.searchlist.keyWord) {
          postData.inspect.keyWord = this.searchlist.keyWord;
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
				console.log(44444,postData)
        // 请求列表数据
        post("/nurse/fetchDataList/inspect", postData).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.triggered = false;
            this.freshing = true;
            this.totalNum = res.totalNum;
						console.log(66666,res.list)
						res.list = res.list.map(v => {
							if(v.yyTime){
								let [date, time] = v.yyTime.split(" ");
								v.yyTime = new Date(date).Format('yyyy-MM-dd') + " " + time.slice(0, -3);
							}
							return v;
						})
            if (idx === 0) {
              this.zxzData = res.list;
            } else {
              this.zxzData.push(...res.list);
            }
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        });
      },
      //刷新
      refresherrefresh() {
        if (this.triggered) {
          return;
        }
        console.log("下拉刷新");
        this.triggered = true;
        this.idx = 0;
        this.totalNum = -1;
        this.waitingOrders(0);
      },
      // 下拉刷新复位
      refresherrestore() {
        this.triggered = false;
        console.log("下拉刷新复位");
      },
      //下拉刷新中止
      refresherabort() {
        this.triggered = false;
        console.log("下拉刷新中止");
      },
      //分页,上拉加载
      scrolltolower() {
        if (this.freshing) {
          console.log("上拉加载");
          this.freshing = false;
          this.waitingOrders(++this.idx);
        }
      },
      // 滚动
      scroll(e) {
        this.scrollYY = e.detail.scrollTop;
        if (e.detail.scrollTop < 20) {
          this.scroll_refresher_enabled = true;
        } else {
          this.scroll_refresher_enabled = false;
        }
      },
      // 阻止浏览器滑动
      stop(e) {
        e.preventDefault();
      },
    },
    onLoad(options) {
      console.log(options, 'options');
      let patientCurrentDept = uni.getStorageSync("patientCurrentDept");
      if (Object.keys(options).length) {
        let {
          id,
          dept,
          patientCode
        } = options;
        this.currenDept.id = id;
        this.currenDept.dept = dept;
        this.currenDept.patientCode = patientCode;
				this.keyWordOld = patientCode;
      } else if (patientCurrentDept) {
        this.currenDept.id = patientCurrentDept.id;
        this.currenDept.dept = patientCurrentDept.dept;
      } else {
        this.currenDept = uni.getStorageSync("userData").user.dept;
      }
      this.waitingOrders(0);
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      // #ifdef H5
      document.body.addEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
    onHide() {
      // #ifdef H5
      document.body.removeEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .toolbar {
    position: fixed;
    left: 0;
    bottom: var(--window-bottom);
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4rpx;
    background-color: #E5E8ED;
  
    .toolbar-icon {
      font-size: 52rpx;
      margin-right: 16rpx;
      color: #49B856;
    }
  
    .toolbar-sao {
      font-size: 36rpx;
      color: #333;
    }
  }
  .newicon-weibiaoti2010104 {
    font-size: 32rpx;
    padding-left: 5rpx;
    color: #8A8A8A;
    &.fz28{
      font-size: 28rpx;
    }
  }
  button {
    font-size: 24rpx;
    color: #49b856;
    height: 48rpx;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inspectList {
    width: 100%;
    height: 100%;
    position: relative;

    .page_tab {
      width: 100%;
      height: 90rpx;
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;

      .page_tab_bar {
        flex: 1;
        font-size: 30rpx;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-bottom: 8rpx solid #49B856;

        .tab_dept {
          position: relative;
        }
        
        .moreFilter {
          width: 48rpx;
          position: absolute;
          right: 16rpx;
          top: 50%;
          transform: translateY(-50%);
          color: #8A8A8A;
        }

        &.active {
          color: #49b856;

          &:after {
            background-color: #49b856;
          }
        }
      }
    }

    .zwsj {
      position: absolute;
      left: 50%;
      top: 180rpx;
      transform: translateX(-50%);

      .zwsj-img {
        width: 560rpx;
      }

      .zwsj-txt {
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .page_items {
      height: calc(100vh - 164rpx);
      padding-top: 90rpx;

      .page_items_scroll {
        height: 100%;

        .page_item_wrap {
          position: relative;
          margin-top: 8rpx;
          &:last-of-type{
            padding-bottom: 24rpx;
          }

          .page_item {
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;
            border: 2rpx solid #e5e9ed;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .L {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              left: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .R {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              float: right;
              right: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .page_item_top {
              height: 86rpx;
              border-bottom: 2rpx dashed #e5e9ed;
              padding: 0 16rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .page_item_top_L {
                height: 100%;
                float: left;
                display: flex;
                align-items: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;

                .L_time {
                  font-size: 30rpx;
                  font-weight: bold;
                  position: relative;
                  display: flex;
                  align-items: center;
                  &:after{
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    height: 1px;
                    width: 100%;
                    background: #000;
                  }
                  .circle{
                    display: inline-block;
                    width: 12rpx;
                    height: 12rpx;
                    background-color: red;
                    border-radius: 50%;
                    margin-right: 8rpx;
                  }
                }
              }

              .page_item_top_R {
                float: right;
                display: flex;
                align-items: center;
                justify-content: space-between;

                text {
                  font-size: 30rpx;
                  color: #49b856;
                  margin-right: 16rpx;
                }
              }
            }

            .page_item_cont {
              padding: 0 32rpx;
              text-align: left;
              position: relative;

              .page_item_conts {
                color: rgb(102, 102, 102);
                font-size: 26rpx;

                .page_item_conts_item {
                  margin-bottom: 16rpx;
                  display: flex;
                  justify-content: space-between;
                  &:first-of-type{
                    margin-top: 16rpx;
                  }
                }

                .p_info {
                  flex: 1;

                  &.red {
                    color: red;
                  }

                }

                .num {
                  float: right;
                }
              }
            }

            .page_item_btn {
              height: 88rpx;
              background-image: linear-gradient(to right, #72c172, #3bb197);
              border-radius: 8rpx;
              line-height: 88rpx;
              color: #fff;
              font-size: 36rpx;
              font-weight: 700;
              text-align: center;
            }
          }

          .L-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            left: 20rpx;
            top: 72rpx;
            display: none;
          }

          .R-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            right: 20rpx;
            top: 72rpx;
            display: none;
          }
        }
      }
    }
  }
</style>