Web_TracerMethodology/pages/mainPointsDetail/mainPointsDetail.vue

<template>
  <view class="mainPointsDetailPage">
	<tm-modal v-if="showSelectModal" @click="clickModalhandle">
		<view class="checkItemResultModal">
			 <view class="modalContent">
			 	  <view class="modalBar">请选择查核结果</view>
				  <scroll-view class="scroll" scroll-y="true" >
				  	<view v-for="item in checkItemResultList" class="list" :key="item.id" @click="selectResultHandle(item.resultName)" >{{item.resultName}}</view>
				  </scroll-view>
			 </view>
		</view>
	</tm-modal>
    <scroll-view scroll-y="true" class="scroll-y">
      <view class="checkItem">
        <view class="chBg">
          <image
            src="../../static/chahexiang-bg.png"
            mode=""
            class="img"
          ></image>
          <text class="title">查核项</text>
        </view>
        <image
          src="../../static/tuli.png"
          mode=""
          class="tlImg"
          @click="toTuLi"
        ></image>
        <view class="chContent">
          <view class="checkItemName">{{ data.checkItemName ? data.checkItemName : "" }}</view>
          <view class="checkPointName">{{ data.checkPointName ? data.checkPointName : "" }}</view>
          <view class="cont">
            <view class="floatLeft other">
              <view class="letterTitle2">{{ data.deptName ? data.deptName : "" }}</view>
              <view class="letterTitle">查核单位</view>
            </view>
            <view class="floatLeft borderLine"></view>
            <view class="floatLeft other">
              <view class="letterTitle2">{{ data.checkModelName ? data.checkModelName : "" }}</view>
              <view class="letterTitle">查核方式</view>
            </view>
            <view class="floatLeft borderLine"></view>
            <view class="floatLeft other">
              <view class="letterTitle2">{{ data.lastResult ? data.lastResult : "" }}</view>
              <view class="letterTitle">上次结果</view>
            </view>
            <view class="floatLeft borderLine"></view>
            <view class="floatLeft other">
              <view class="letterTitle2">{{ data.checkResult ? data.checkResult : "" }}</view>
              <view class="letterTitle">本次结果</view>
            </view>
          </view>
          <view class="checked">
            <view
              class="checked-checkItem"
			  v-for="item in checkConfiglist"
			  :key="item.attr"
              @click="checkedOne(item)"
              :style="
                Index == item.attr
                  ? { backgroundColor: '#3377FF', color: '#fff' }
                  : { backgroundColor: '#EBEFF7' }
              "
              >{{item.attr}}
              <view v-if="lastIndex == item.attr"
                ><image
                  src="../../static/shangci.png"
                  mode=""
                  class="img"
                ></image>
                <text class="lastName">上次</text></view
              >
            </view>
			
          </view>
          <view class="more" @click="toHistory">
            <text>查看改善历史</text>
            <view class="moreImg">
              <image
                src="../../static/blue-arrow.png"
                mode=""
                class="moreImg2"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view v-if="data.checkModelName == '访谈'" class="talk">
        <view v-for="(item, i) in talkList">
          <view class="talkTitle">
            <text
              >访谈内容{{ i + 1 }}{{ i == 0 ? "" : "（访谈人员：护士、医生）" }}</text
            >
            <text v-if="i != 0" class="del" @click="del(i)">删除</text>
          </view>
          <view>
            <view class="talkResult">
			  <view class="seeResultFloorOne">
                   <text class="seeName">查核结果</text>
				   <text v-if="checkItemResultList.length>0" class="threePoint" @click="openSelectModal(i)">⋮</text>
			  </view>
              <textarea
                maxlength="300"
                class="seeTextarea"
                value=""
                placeholder="请输入"
                :value="item.talkResult"
                @blur="changeTextarea($event, i)"
              ></textarea>
            </view>
            <view class="talkImg" @click="imgClick(i)">
              <tm-upload-img
                label="上传图片"
                :filePaths="item.filePath"
                :isMultiple="true"
                @changeFilePaths="changeFilePaths2"
              />
            </view>
          </view>
        </view>
      </view>
      <view v-else class="see">
        <view class="seeResult">
		  <view class="seeResultFloorOne">
		  	  <text class="seeName">查核结果</text>
			  <text class="threePoint" v-if="checkItemResultList.length>0" @click="openSelectModal">⋮</text>
		  	  <!-- <dropdown :list="checkItemResultList" :current="currentSelect" @onClick="dropDownChange"></dropdown> -->
		  </view>
          <textarea
            maxlength="300"
            class="seeTextarea"
            placeholder="请输入"
            :value="recordList[0].seeResult"
            @blur="changeTextarea2"
          ></textarea>
        </view>
        <view class="seeImg">
          <tm-upload-img
            label="上传图片"
            :filePaths="filePath"
            :isMultiple="true"
            @changeFilePaths="changeFilePaths"
          />
        </view>
      </view>

      <button
        class="insert"
        @click="insert"
        v-if="data.checkModelName == '访谈'"
      >
        + 增加一条记录
      </button>
    </scroll-view>
    <!-- <button type="primary" class="sureDetail" @click="sureDetail" v-if="data.display?data.display:false">完成</button> -->
	<view class="bottomMenuGroup">
		<view class="menuBtn" @click="goToPrevPage">
			<image class="threeLineMenuIcon" src="/static/threeLineMenu.png" ></image>
		</view>
		<view class="prevBtn" @click="switchItem(1)">下一项</view>
		<view class="nextBtn" @click="sureDetail" v-if="data.display?data.display:false">完成</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  value:'',
	  showSelectModal:false,
      data: {}, //详情数据
      lastIndex: null, //上次选中的结果
      Index: null, //点击修改本次选中样式
      filePath: [],
      recordList: [{ seeResult: "", filePath: [] }],
      talkLength: 1,
      talkList: [{ talkResult: "", filePath: [] }],
      editIndex: null,
      resultConfigList: [],
      id: "",
      checkPointId: "",
	  itemBelongGroup:[],
	  itemId:'',
	  currentEditTextAreaIndex:'',
	  checkItemResultList:[],//查核结果说明下拉列表
	  currentSelect:'',
	  checkItemScore:null,//查核选中的分数
	  checkItemValue:null,//查核选中的分数占比
	  checkConfiglist:[],//查核情况可配置列表
    };
  },
  mounted() {
    this.checkTaskDetail(this.id);
    this.getPeizhiList();
	// this.$refs.pop.open();
  },
  methods: {
	clickModalhandle(){
		this.showSelectModal = false;
	},
	openSelectModal(index){
		console.log({index});
		if(index>=0){
			 this.currentEditTextAreaIndex = index;
		}
		this.showSelectModal = true;
	},
    selectResultHandle(val){
		// console.log({val});
		// console.log('currentEditTextAreaIndex',this.currentEditTextAreaIndex);
		if(this.data.checkModelName == '访谈'){
			this.talkList[this.currentEditTextAreaIndex].talkResult = val;
		}else {
			this.recordList[0].seeResult = val;
		}
	    this.showSelectModal = false;
	},
    checkTaskDetail(id) {
      this.$store.dispatch({
          type: "mainPointsDetail/commActions",
          payload: {
            key: "checkTaskDetail",
            data: {
              id: id,
            },
          },
        }).then((res) => {
		  this.id = id;
          if (res) {
            this.data = res;			
            if (res && res.lastResult == "不适用") {
              // this.lastIndex = 1;
			  this.lastIndex = res.lastResult;
            } else if (res && res.lastResult == "无缺失") {
              this.lastIndex = res.lastResult;
            } else if (res && res.lastResult == "主要缺失") {
              this.lastIndex = res.lastResult;
            } else if (res && res.lastResult == "次要缺失") {
              this.lastIndex = res.lastResult;
            } else if (res && res.lastResult == "观察事项") {
              this.lastIndex = res.lastResult;
            } else {
              this.lastIndex = 0;
            }
          }
        });
    },
    getPeizhiList() {
      this.$store.dispatch({
          type: "configure/commActions",
          payload: {
            key: "getResultConfig",
          },
        }).then((res) => {
          this.resultConfigList = res ? res : [];
        });
    },
	//查核点击回调
    checkedOne(data) {
		const parsedData = JSON.parse(JSON.stringify(data));
		console.log({parsedData})
		this.Index = parsedData.attr;
		this.data.checkResult = parsedData.attr;
		this.checkItemScore = parsedData.score;
		this.checkItemValue = parsedData.value;
		
   //    this.Index = data;
	  // this.data.checkResult = data;
      // if (data == 1) {
      //   this.data.checkResult = "不适用";
      // } else if (data == 2) {
      //   this.data.checkResult = "无缺失";
      // } else if (data == 3) {
      //   this.data.checkResult = "主要缺失";
      // } else if (data == 4) {
      //   this.data.checkResult = "次要缺失";
      // } else if (data == 5) {
      //   this.data.checkResult = "观察事项";
      // } else {
      //   this.data.checkResult = "";
      // }
    },
    changeFilePaths(filePaths, index) {
      let _recordList = [...this.recordList];
      _recordList[index].filePath = filePaths;
      this.filePath = _recordList[0].filePath;
    },
    insert() {
      let list = [...this.talkList];
      if (list.length < 10) {
        list.push({ talkResult: "", filePath: [] });
        this.talkList = list;
      }
    },
    del(index) {
      let list = [...this.talkList];
      let list2 = [];
      for (let i = 0; i < list.length; i++) {
        if (i != index) {
          list2.push(list[i]);
        }
      }
      this.talkList = list2;
    },
    changeFilePaths2(filePaths, index) {
      for (let j = 0; j < this.talkList.length; j++) {
        this.talkList[this.editIndex].filePath = filePaths;
      }
    },
    changeTextarea(e, i) {
      for (let j = 0; j < this.talkList.length; j++) {
        this.talkList[i].talkResult = e.detail.value;
      }
    },
    changeTextarea2(e) {
      this.recordList[0].seeResult = e.target.value;
    },
    imgClick(i) {
      this.editIndex = i;
    },
    sureDetail(e) {
      if (this.Index) {
        let params = {
          id: this.data.id,
          checkResult: this.data.checkResult,
          checkResultRequestList: [],
		  checkItemScore:this.checkItemScore,
		  value:this.checkItemValue
        };
        if (this.data.checkModelName == "访谈") {
          let list = [];
          for (let i = 0; i < this.talkList.length; i++) {
            let path = "";
            for (let j = 0; j < this.talkList[i].filePath.length; j++) {
              if (j == 0) {
                path += `${this.talkList[i].filePath[j]}`;
              } else {
                path += `,${this.talkList[i].filePath[j]}`;
              }
            }
            let item = {
              checkResultId: i,
              checkResultDescribe: this.talkList[i].talkResult,
              checkResultUrl: path,
            };
			
			// console.log({'访谈':item});
			// return;
            list.push(item);
          }
          params.checkResultRequestList = list;
        } else {
          let list = [];
          let path = "";
          for (let j = 0; j < this.recordList[0].filePath.length; j++) {
            if (j == 0) {
              path += `${this.recordList[0].filePath[j]}`;
            } else {
              path += `,${this.recordList[0].filePath[j]}`;
            }
          }
          let item = {
            checkResultId: 1,
            checkResultDescribe: this.recordList[0].seeResult,
            checkResultUrl: path,
          };
		  // console.log({item});
		  // return;
          list.push(item);
          params.checkResultRequestList = list;
        }
		const checkConfiglist = JSON.parse(JSON.stringify(this.checkConfiglist));
		
  //     	console.log({params});
		// return;
        this.$store.dispatch({
            type: "mainPointsDetail/commActions",
            payload: {
              key: "saveCheckTaskDetail",
              data: {
                ...params,
              },
            },
          }).then((res) => {
			// console.log({'res':res,'checkConfiglist':this.checkConfiglist});
            if (res) {
              for (let i = 0; i < checkConfiglist.length; i++) {
                if (
                   checkConfiglist[i].attr == params.checkResult &&
                  (checkConfiglist[i].resultType == 2 ||
                    checkConfiglist[i].resultType == 3)
                ) {
				console.log('开始提交改善前准备');
				 
                  let param = {
                    situationId: this.data.situationId,
                    situationName: this.data.situationName,
                    checkGroupId: this.data.checkGroupId,
                    checkGroupName: this.data.checkGroupName,
                    checkItemId: this.data.checkItemId,
                    checkItemName: this.data.checkItemName,
                    checkPointId: this.data.checkPointId,
                    checkPointName: this.data.checkPointName,
                    deptName: this.data.deptName,
                    deptId: this.data.deptId,
                    appointFlag: false,
                    desicion: 0,
                    taskType: "1",
                    checkId: this.data.checkId,
					checkResult:0,
					newResultType:checkConfiglist[i].resultType,
                    // checkResult: this.resultConfigList[i].id,
                    receiveEmpId: this.data.receiveEmpId,
                    receiveEmpName: this.data.receiveEmpName,
                    checkDetailId: this.data.id,
                  };
                  this.$store.dispatch({
                      type: "mission/commActions",
                      payload: {
                        key: "comTaskCirculation",
                        data: {
                          ...param,
                        },
                      },
					}).then(() => {
					  
					});
                }
              }
			  uni.navigateTo({
			    url: `/pages/auditItemDetails/auditItemDetails?id=${this.data.id}&checkPointId=${this.checkPointId}`,
			  });
            }
          });
      } else {
        uni.showModal({
          title: "检查选项未选择",
          showCancel: false,
        });
      }
    },
    toTuLi() {
      uni.navigateTo({
        url: `/pages/legendDetails/legendDetails?checkItemId=${this.data.checkItemId}&checkPointId=${this.checkPointId}`,
      });
    },
    toHistory() {
	  const situationId = this.data.situationId;
	  this.$store.dispatch({
	  	type: 'mission/commActions',
	  	payload: {
	  		key: "getMissionList",
	  		data:{situationId}
	  	}
	  }).then(data => {
	  	if(data) {
	  		if(data.improvingTaskResponses.length>0){
				uni.navigateTo({
				  url: `/pages/improve-mission-list/improve-mission-list?situationId=${this.data.situationId}`,
				});
			}else {
				uni.showModal({
				    content: '暂无改善历史',
					showCancel:false
				});
			}
	  		// this.improvingTaskList = data.improvingTaskResponses || [];
	  		// this.completeTaskList = data.improveCompleteResponses || [];
	  	}
	  });
	  /** 请求参数 data
	   * situationId: 情境id 当管路员或者查核者通过情境进入任务列表时 必传
	   * checkItemId 单位负责人通过 查核要点进入改善任务列表时 必传
	   */
      
    },
	clearForm(){
		 this.Index = '';
		 if(this.data.checkModelName == '访谈'){
		 	this.talkList[this.currentEditTextAreaIndex].talkResult = '';
		 }else {
		 	this.recordList[0].talkResult ='';
		 }
	},
	goToPrevPage(){
		// window.history.back();
		// const pages = getCurrentPages();
		// console.log({pages});
		uni.navigateBack({
		    delta: 1
		});
	},
	switchItem(num){
		let current = this.itemBelongGroup.filter(item=>{
			  return item.id == this.id;
		});
		if(num<0){
			if(current[0].index==0){
				 uni.showToast({
				     title: '已经没有上一项',
				     duration: 2000,
					 icon:'none'
				 });
				 return;
			}
		}
		if(num>0){
			if(current[0].index==this.itemBelongGroup.length-1){
				 uni.showToast({
				     title: '已经没有下一项',
				     duration: 2000,
					 icon:'none'
				 });
				 return;
			}
		}
		let needItemIndex = num>0?current[0].index+1:current[0].index-1;
		let needItemId = this.itemBelongGroup[needItemIndex].id;
		// console.log({needItemIndex,needItemId});
		this.clearForm();
		this.checkTaskDetail(needItemId);	
	},
	// 获取查核项可配置列表
	getCheckConfigList(checkItemId) {
		this.$store.dispatch({
			type: 'mainPointsDetail/commActions',
			payload: {
				key:'getCheckItemAttr',
				data:checkItemId
			}
		}).then(data=>{
			this.checkConfiglist = data
		})
	},
	// 获取查核项结果说明下拉列表
	getCheckItemResultList(checkItemId) {
		this.$store.dispatch({
			type: 'mainPointsDetail/commActions',
			payload: {
				key:'getCheckItemResultList',
				data:checkItemId
			}
		}).then(data=>{
			// console.log({data});
			this.checkItemResultList = data;
		})
	},
  },
  onLoad({ id, checkPointId,checkItemId }) {
    this.id = id;
    this.checkPointId = checkPointId;
	
	this.getCheckConfigList(checkItemId);
	this.getCheckItemResultList(checkItemId);
	
	//接收来自上个页面所传过来的数据
	const eventChannel = this.getOpenerEventChannel();
	eventChannel.on('acceptDataFromOpenerPage', (data)=>{
	    // console.log({data});
		this.itemBelongGroup =data.data[0].responseList.map((item,index)=>{
			    return({
					index:index,
					id:item['id'],
				})
		});
		//重新导航进页面，删除缓存并设置最新数据
		uni.removeStorageSync('itemBelongGroup');
	    uni.setStorageSync('itemBelongGroup',this.itemBelongGroup);
	});
	//手动刷新页面，获取本地缓存
	const itemBelongGroup = uni.getStorageSync('itemBelongGroup');
	this.itemBelongGroup = itemBelongGroup;
  },
};
</script>

<style lang="less">
.mainPointsDetailPage {
  position: relative;
  // min-height: 75rpx;
  // overflow-y: auto;
  height: 100%;
  
  .checkItemResultModal {
	  display: flex;
	  height: 100%;
	  justify-content: center;
	  align-items: center;
	  .modalContent {
		   width: 90%;
		   height:500rpx;
		   border-radius: 20rpx;
		   background-color: #FFFFFF;
		   .modalBar{
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   height: 80rpx;
			   color: #4E78FF;
			   font-size: 22.5rpx;
			   border-bottom: 0.1rpx solid #E5E5E5;
		   }
		   .scroll {
			   height: calc(100% - 80rpx);
			   .list {
				   display: flex;
				   height: 80rpx;
				   justify-content: center;
				   align-items: center;
				   border-bottom: 0.1rpx solid #E5E5E5;
			   }
		   }
	  }
  }
  .scroll-y {
    height: calc(100% - 75rpx);
  }
  .checkItem {
    padding-top: 47.5rpx;
    width: 100%;
    min-height: 450rpx;
    background-color: #fff;
    position: relative;
    .chBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 125rpx;
      height: 37.5rpx;
      .img {
        width: 125rpx;
        height: 37.5rpx;
      }
      .title {
        position: absolute;
        top: 8.75rpx;
        left: 25rpx;
        font-size: 20rpx;
        color: #fff;
        font-weight: 500;
        line-height: 20rpx;
      }
    }
    .tlImg {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 25rpx;
      top: 25rpx;
    }
    .chContent {
      width: 100%;
      .checkItemName {
        margin-left: 31.25rpx;
        font-size: 25rpx;
        line-height: 55rpx;
        color: #292c33;
      }
      .checkPointName {
        margin-left: 31.25rpx;
        font-size: 17.5rpx;
        line-height: 17.5rpx;
        color: #7a8599;
      }
      .cont {
        height: 135rpx;
        .floatLeft {
          float: left;
        }
        .borderLine {
          margin-top: 56.25rpx;
          width: 0.62rpx;
          height: 25rpx;
          background-color: #dadee6;
        }
        .other {
          padding: 40rpx 0rpx;
          height: 95rpx;
          width: 187.18rpx;
          text-align: center;
          .letterTitle {
            font-size: 17.5rpx;
            color: #7a8599;
            line-height: 17.5rpx;
          }
          .letterTitle2 {
            height: 22.5rpx;
            font-size: 22.5rpx;
            line-height: 22.5rpx;
            color: #292c33;
            margin-bottom: 15rpx;
            font-weight: 500;
          }
        }
      }
      .checked {
        margin-bottom: 40rpx;
        padding: 0rpx 15.62rpx;
        height: 75rpx;
        .checked-checkItem {
          margin: 0rpx 9.37rpx;
          padding: 0;
          width: 125rpx;
          height: 75rpx;
          background: #ebeff7;
          float: left;
          line-height: 75rpx;
          text-align: center;
          color: #292c33;
          border-radius: 20rpx;
          position: relative;
          .img {
            width: 51.25rpx;
            height: 25rpx;
            position: absolute;
            right: -6.25rpx;
            top: -6.25rpx;
          }
          .lastName {
            color: #fff;
            font-size: 13.75rpx;
            line-height: 13.75rpx;
            position: absolute;
            right: 5rpx;
            top: -1.87rpx;
          }
        }
      }
      .more {
        margin: 0rpx 25rpx 0rpx 25rpx;
        text-align: center;
        border-top: 0.62rpx solid #dadee6;
        text {
          padding: 29.37rpx 0rpx 27.5rpx;
          margin-right: 10rpx;
          line-height: 22.5rpx;
          font-size: 22.5rpx;
          color: #3377ff;
          display: inline-block;
          vertical-align: top;
        }
        .moreImg {
          margin-top: 28.75rpx;
          width: 12.37rpx;
          height: 21.21rpx;
          display: inline-block;
        }
        .moreImg2 {
          width: 12.37rpx;
          height: 21.21rpx;
        }
      }
    }
  }
  .see {
    margin-top: 15rpx;
    height: 287.5rpx;
    background-color: #fff;
    // padding-left: 25rpx;
    .seeResult {
      margin-left: 25rpx;
      padding-top: 32.5rpx;
      // height: 200rpx;
      border-bottom: 1px solid #dadee6;
	  .seeResultFloorOne {
		  display: flex;
		  flex-direction: row;
		  justify-content:space-between;
		  align-items: center;
		  margin-bottom: 25rpx;
		  padding-right: 25rpx;
		  .threePoint {
			  padding-left: 12.5rpx;
			  font-size: 20rpx;
			  font-weight:700;
		  }
	  }
      .seeName {
        width: 175rpx;
        font-size: 22.5rpx;
        color: #525866;
        line-height: 22.5rpx;
        display: inline-block;
      }
      .seeTextarea {
        width: 531.25rpx;
        height: 155rpx;
        display: inline-block;
        font-size: 22.5rpx;
        line-height: 27.5rpx;
      }
    }
    .seeImg {
      min-height: 87.5rpx;
      .seeName2 {
        width: 175rpx;
        font-size: 22.5rpx;
        color: #525866;
        line-height: 87.5rpx;
        display: inline-block;
      }
    }
  }
  .talk {
    .talkTitle {
      padding: 25rpx 25rpx 15rpx;
      font-size: 22.5rpx;
      line-height: 22.5rpx;
      color: #666f80;
      .del {
        float: right;
        color: #3377ff;
      }
    }
    .talkResult {
      padding-left: 25rpx;
      padding-top: 32.5rpx;
      border-bottom: 1px solid #dadee6;
      background-color: #fff;
	  .seeResultFloorOne {
	  		  display: flex;
	  		  flex-direction: row;
	  		  justify-content:space-between;
	  		  align-items: center;
	  		  margin-bottom: 25rpx;
	  		  padding-right: 25rpx;
	  		  .threePoint {
	  			  padding-left: 12.5rpx;
	  			  font-size: 20rpx;
	  			  font-weight:700;
	  		  }
	  }
      .seeName {
        width: 175rpx;
        font-size: 22.5rpx;
        color: #525866;
        line-height: 22.5rpx;
        display: inline-block;
      }
      .seeTextarea {
        width: 531.25rpx;
        height: 155rpx;
        display: inline-block;
        font-size: 22.5rpx;
        line-height: 27.5rpx;
      }
    }
    .talkImg {
      min-height: 87.5rpx;
      .seeName2 {
        width: 175rpx;
        font-size: 22.5rpx;
        color: #525866;
        line-height: 87.5rpx;
        display: inline-block;
      }
    }
  }
  .insert {
    background-color: #fff;
    font-size: 22.5rpx;
    line-height: 22.5rpx;
    color: #3377ff;
    padding: 26.25rpx;
  }
  .sureDetail {
    width: 100%;
    height: 75rpx;
    font-size: 22.5rpx;
    background-color: #3377ff;
    line-height: 75rpx;
    position: absolute;
    bottom: 0rpx;
  }
  .bottomMenuGroup {
  	position: fixed;
  	bottom: 0;
  	width: 100%;
  	height: 75rpx;
  	display: flex;
  	flex-direction: row;
  	background: #FFFFFF;
  	border-top:0.62rpx solid #DADEE6;
  	.menuBtn {
  		display: flex;
  		width: 75rpx;
  		height: 75rpx;
  		justify-content: center;
  		align-items: center;
  		border-right: 0.62rpx solid #DADEE6;
  		.threeLineMenuIcon {
  			width: 26.25rpx;
  			height: 21.25rpx;
  		}
  		
  	}
	.prevBtn,.nextBtn {
		display: flex;
		flex: 1;
	    justify-content: center;
		height:75rpx;
		line-height:75rpx;
		font-size: 22.5rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #3377FF;
	}
  	.prevBtn {
  		border-right: 0.62rpx solid #DADEE6;
  	}
	.nextBtn{
		color: #FFFFFF;
		background: #3377FF;
	}
  }
}
</style>