zy-pda/pages/index/index.vue

<template>
  <view class="index">
    <view class="arc_edge"></view>
    <view class="index_container">
      <!-- 头部搜索 -->
      <view class="search">
        <view class="search_wrap">
          <input :focus="isFocus" @blur="blur" placeholder="请输入标本编码/检查单号/患…" :placeholder-style="placeholderStyle"
            confirm-type="search" v-model="searchText" :adjust-position="false" />
          <view class="searchBtn"> 搜索 </view>
        </view>
        <view class="icon-saoma">
          <text class="pda pda-saoma"></text>
        </view>
      </view>
      <!-- 通告栏 -->
      <uni-notice-bar :speed="20" scrollable single showIcon :text="updateTipsForNurses" background-color="#fff"
        color="#666">
      </uni-notice-bar>
      <!-- 一键收标本 -->
      <view class="collect_specimens" v-if="openSpecimen">
        <view class="collect_icon"> 标 </view>
        <view class="collect_specimensNum">
          <view class="urgent collect_row" @click="gotoSpecimenList('urgent')">
            急标数量<text class="collect_num">{{
              urgentNum | specimenNum
            }}</text>
          </view>
          <view class="ordinary collect_row" @click="gotoSpecimenList('ordinary')">
            普标数量<text class="collect_num">{{
              ordinaryNum | specimenNum
            }}</text>
          </view>
        </view>
        <button class="collect_btn" type="default" @click="collectSpecimens">
          {{ specimenButton }}
        </button>
      </view>
      <!-- 最新工单 -->
      <view class="newOrders">
        <view class="newOrders_header">
          <text class="newOrders_header_title">最新工单</text>
          <text class="newOrders_header_more" @click="goToMore">更多&gt;&gt;</text>
        </view>
        <view class="newOrders_item" v-for="newOrder in newOrderList" :key="newOrder.id" @click="toDetail(newOrder.id)">
          <image class="ji" src="../../static/imgs/icon_ji.png" mode="widthFix"
            v-if="newOrder.emergencyType && newOrder.emergencyType.value == 2"></image>
          <image class="jiaji" src="../../static/imgs/icon_jiaji.png" mode="widthFix"
            v-if="newOrder.emergencyType && newOrder.emergencyType.value == 3"></image>
          <view class="newOrders_item_time" v-if="newOrder.showCreateTime">{{ newOrder.showCreateTime }}</view>
          <view class="newOrders_item_time" v-else-if="newOrder.yyjdTime && newOrder.gdState.value == 11">
            {{newOrder.yyjdTime | formatDate('MM-dd HH:mm')}}
          </view>
          <text class="newOrders_item_taskType">{{
            newOrder.isHalfInspect === 1
              ? "半程陪检"
              : newOrder.taskType && newOrder.taskType.taskName
          }}</text>
          <text class="newOrders_item_patientName">{{
            newOrder.patient && newOrder.patient.patientName
          }}</text>
          <text class="newOrders_item_status"
            :class="newOrder.stateTextClass">{{ newOrder.gdState && newOrder.gdState.name }}</text>
        </view>
      </view>
      <!-- 快捷工单 -->
      <view class="quick_other">
        <view class="quick_other_header">
          <text class="quick_other_header_title">快捷工单</text>
        </view>
        <view class="quick_other_container">
          <view class="quick_other_container_item" v-for="quickOther in quickOtherList" :key="quickOther.id">
            <view class="quick_other_container_item_text" @click="quickOrderOther(quickOther)">
              {{ quickOther.taskName }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
    <seiminPicker ref="sPicker" :title="pickerTitle" titleColor="#808080" titleFontSize="28rpx" confirmColor="#333"
      confirmFontSize="38rpx" confirmFontWeight="500" itemFontSize="32rpx" @onClose="closePicker"
      @onConfirm="confirmPicker" :pickerList="hospitalList">
    </seiminPicker>
    <seiminScan></seiminScan>
  </view>
</template>

<script>
  import config from "../../request/config.js";
  import {
    backPress,
  } from '../../utils/index.js';
  import {
    mapState,
    mapMutations,
    mapActions
  } from "vuex";
  import {
    reqSpecimenWorkOrderMsg,
    reqDeptTaskType,
    reqFetchDataList,
  } from "../../request/api.js";
  import {
    GDSTATE
  } from "../../utils/enum.gdstate.js";
  import {
    ASSOCIATION_TYPES
  } from "../../utils/enum.association_types.js";
  export default {
    onBackPress() {
      backPress();
    },
    onShow() {
      this.flag = true;
      this.searchText = '';
      uni.$off('scancodedate');
      uni.$on('scancodedate', data => {
        let code = data.code || '';
        // 过滤
        code = code.replace(/^2#/, '');
        code = code.replace(/^r2#/, '');
        uni.navigateTo({
          url: `/pages/search/search?txt=${code}`,
        })
      })
    },
    data() {
      return {
        isFocus: false,
        reFresh: '',
        openSpecimen: false, //标本的开通权限
        searchText1: '', //首页搜索内容
        placeholderStyle: "color:#999;font-size:30rpx;line-height:66rpx;",
        urgentNum: 0, //急标数量
        ordinaryNum: 0, //普标数量
        newOrderList: [], //最新工单列表
        quickOtherList: [], //快捷工单列表
        hospitalList: [], //当前用户权限中的院区列表
        pickerTitle: "", //选择院区picker的title
        specimenTaskTypeId: undefined, //标本任务类型id
        flag: true, //是否可以跳转
        updateTipsForNurses: '', //护士端更新提示
      };
    },
    computed: {
      ...mapState("login", ["loginInfo"]),
      ...mapState('other', [
        "isShowSeiminModel",
        "deptDisplay",
        "specimenButton",
      ]),
      searchText: {
        get: function() {
          return this.searchText1;
        },
        set: function(newVal) {
          newVal = newVal.replace(/^2#/, '');
          newVal = newVal.replace(/^r2#/, '');
          this.searchText1 = newVal;
          if (this.searchText1 && this.flag) {
            this.flag = false;
            uni.navigateTo({
              url: `/pages/search/search?txt=${this.searchText1}`,
            })
          }
        },
      },
    },
    methods: {
      ...mapMutations('other', [
        "changeSeiminModel",
        "changeQucikCreateOrderType",
        "changeDeptDisplay",
        "changeSpecimenButton",
        "changeNurseDeptSwitchTip",
        "changeSearchDeptParams",
      ]),
      ...mapActions('system', ["vxSystem"]),
      blur() {
        this.isFocus = false;
      },
      // 前往标本列表
      gotoSpecimenList(type) {
        uni.navigateTo({
          url: `/pages/specimenList/specimenList?urgent=${type==='urgent'?1:0}`
        })
      },
      // 前往工单详情
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/orderDetail/orderDetail?id=${id}`
        })
      },
      // 跳转到工单列表页面
      goToMore() {
        uni.navigateTo({
          url: '/pages/orderList/orderList'
        })
      },
      // 获取页面数据
      init() {
        uni.showLoading({
          title: "加载中",
        });
        Promise.all([
          this.querySpecimenNumRequest(), //查询急标和普标数量
          this.queryWorkOrdersRequest(), //查询最新工单列表
          this.queryDeptTaskTypeRequest(), //查询快捷工单（其他临床服务任务类型）
          this.queryDeptDisplayRequest(), //护士端科室显示选择(名称还是别名)
          this.queryUpdateTipsForNursesRequest(), //护士端更新提示
          this.querySpecimenButtonRequest(), //标本按钮文字
          this.queryNurseDeptSwitchTipRequest(), //护士科室切换提示自动关闭设置
        ]).then((values) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.querySpecimenNumResponse(values[0]);
          this.queryWorkOrdersResponse(values[1]);
          this.queryDeptTaskTypeResponse(values[2]);
          this.queryDeptDisplayResponse(values[3]);
          this.queryUpdateTipsForNursesResponse(values[4]);
          this.querySpecimenButtonResponse(values[5]);
          this.queryNurseDeptSwitchTipResponse(values[6]);
          if (this.isShowSeiminModel) {
            // 检测更新
            this.checkUpdate();
          }
        });
      },
      // 检测更新
      checkUpdate() {
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        let postData = {
          "idx": 0,
          "sum": 1,
          "systemConfiguration": {
            "keyconfig": "pdaVersion"
          }
        };
        reqFetchDataList('simple/data', 'systemConfiguration', postData)
          .then((data) => {
            uni.hideLoading();
            if (data.status == 200) {
              const version = data.list[0].valueconfig;
              // #ifdef APP-PLUS
              plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
                console.log(wgtinfo.version); //应用版本号
                if (wgtinfo.version === version) {
                  this.showDeptModel();
                  this.changeSeiminModel(false);
                } else {
                  this.downloadUrl(`${config.pdaDownloadUrl}/pda-v${version}.apk`);
                }
              })
              // #endif
            } else {
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: data.error || "获取版本失败",
              });
            }
          });
      },
      // 下载更新
      downloadUrl(Url = '') {
        uni.showLoading({
          title: '更新中……',
          mask: true,
        })
        const downloadTask = uni.downloadFile({ //执行下载
          url: Url, //下载地址
          timeout: 1000 * 30, //30秒超时时间
          success: downloadResult => { //下载成功
            console.log(downloadResult)
            uni.hideLoading();
            if (downloadResult.statusCode == 200) {
              plus.runtime.install( //安装软件
                downloadResult.tempFilePath, {
                  force: true
                },
                function(res) {
                  plus.runtime.restart();
                }
              );
            } else {
              this.$refs.seiminModel.show({
                skin: "toast",
                icon: "error",
                content: "下载失败",
              });
            }
          },
          fail: err => {
            uni.hideLoading();
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "更新失败",
            });
            console.log(err)
          },
        });
      },
      // 查询急标和普标数量
      querySpecimenNumRequest() {
        if (this.openSpecimen) {
          return reqSpecimenWorkOrderMsg({
            deptId: this.loginInfo.user.dept.id,
          });
        } else {
          return Promise.resolve();
        }
      },
      // 查询急标和普标数量
      querySpecimenNumResponse(res) {
        if (!this.openSpecimen) {
          return;
        }
        if (res.status == 200) {
          if (res.specimenCount) {
            this.urgentNum = res.specimenCount.urgent;
          }
          if (res.specimenCount) {
            this.ordinaryNum = res.specimenCount.noUrgent;
          }
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
      // 查询最新工单列表
      queryWorkOrdersRequest() {
        return reqFetchDataList("nurse", "workOrder", {
          workOrder: {
            createDept: this.loginInfo.user.dept.id,
            platform: 2,
            searchDays: 2,
          },
          idx: 0,
          sum: 5,
        });
      },
      // 查询最新工单列表
      queryWorkOrdersResponse(res) {
        if (res.status == 200) {
          res.list = res.list || [];
          this.newOrderList = res.list.map((v) => {
            if (v.gdState) {
              if (
                v.gdState.value == GDSTATE["待接单"] ||
                v.gdState.value == GDSTATE["待抢单"]
              ) {
                v.stateTextClass = "red";
              } else if (
                v.gdState.value == GDSTATE["待评价"] ||
                v.gdState.value == GDSTATE["已完成"]
              ) {
                v.stateTextClass = "green";
              } else {
                v.stateTextClass = "yellow";
              }
            }
            return v;
          });
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
      // 查询快捷工单（其他临床服务任务类型）
      queryDeptTaskTypeRequest() {
        return reqDeptTaskType({
          deptId: this.loginInfo.user.dept.id,
        });
      },
      // 查询快捷工单（其他临床服务,标本）
      queryDeptTaskTypeResponse(res) {
        if (res.status == 200) {
          res.data = res.data || {};
          res.data.allTaskTypes = res.data.allTaskTypes || [];
          this.openSpecimen = res.data.openSpecimen;
          this.quickOtherList = res.data.allTaskTypes.filter(
            (v) => v.associationType ? v.associationType.value == ASSOCIATION_TYPES["其他临床服务"] : false
          );
          let specimenTaskType = res.data.allTaskTypes.find(
            (v) => v.associationType ? v.associationType.value == ASSOCIATION_TYPES["临时标本业务"] : false
          );
          this.specimenTaskTypeId = specimenTaskType && specimenTaskType.id;
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
      // 护士端科室显示选择(名称还是别名)
      queryDeptDisplayRequest() {
        return this.vxSystem({
          idx: 0,
          sum: 1,
          systemConfiguration: {
            keyconfig: "deptDisplay",
          },
        });
      },
      // 护士端科室显示选择(名称还是别名)
      queryDeptDisplayResponse(res) {
        if (res.status == 200) {
          res.list = res.list || [];
          res.list[0] = res.list[0] || {};
          if (!res.list[0].id) {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "无法获取到【护士端科室显示选择】配置,请前往配置",
            });
            throw new Error('无法获取到【护士端科室显示选择】配置,请前往配置');
          }
          this.changeDeptDisplay(res.list[0].valueconfig);
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "无法获取到【护士端科室显示选择】配置,请前往配置",
          });
          throw new Error(res.msg || '无法获取到【护士端科室显示选择】配置,请前往配置');
        }
      },
      // 护士端更新提示
      queryUpdateTipsForNursesRequest() {
        return this.vxSystem({
          idx: 0,
          sum: 1,
          systemConfiguration: {
            keyconfig: "updateTipsForNurses",
          },
        });
      },
      // 护士端更新提示
      queryUpdateTipsForNursesResponse(res) {
        if (res.status == 200) {
          res.list = res.list || [];
          res.list[0] = res.list[0] || {};
          if (!res.list[0].id) {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "无法获取到【护士端更新提示】配置,请前往配置",
            });
            throw new Error('无法获取到【护士端更新提示】配置,请前往配置');
          }
          this.updateTipsForNurses = res.list[0].valueconfig;
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "无法获取到【护士端更新提示】配置,请前往配置",
          });
          throw new Error(res.msg || '无法获取到【护士端更新提示】配置,请前往配置');
        }
      },
      // 标本按钮文字
      querySpecimenButtonRequest() {
        return this.vxSystem({
          idx: 0,
          sum: 1,
          systemConfiguration: {
            keyconfig: "specimenButton",
          },
        });
      },
      // 标本按钮文字
      querySpecimenButtonResponse(res) {
        if (res.status == 200) {
          res.list = res.list || [];
          res.list[0] = res.list[0] || {};
          if (!res.list[0].id) {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "无法获取到【标本按钮文字】配置,请前往配置",
            });
            throw new Error('无法获取到【标本按钮文字】配置,请前往配置');
          }
          this.changeSpecimenButton(res.list[0].valueconfig);
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "无法获取到【标本按钮文字】配置,请前往配置",
          });
          throw new Error(res.msg || '无法获取到【标本按钮文字】配置,请前往配置');
        }
      },
      // 护士科室切换提示自动关闭设置
      queryNurseDeptSwitchTipRequest() {
        return this.vxSystem({
          idx: 0,
          sum: 1,
          systemConfiguration: {
            keyconfig: "nurseDeptSwitchTip",
          },
        });
      },
      // 护士科室切换提示自动关闭设置
      queryNurseDeptSwitchTipResponse(res) {
        if (res.status == 200) {
          res.list = res.list || [];
          res.list[0] = res.list[0] || {};
          if (!res.list[0].id) {
            this.$refs.seiminModel.show({
              skin: "toast",
              icon: "error",
              content: "无法获取到【护士科室切换提示自动关闭设置】配置,请前往配置",
            });
            throw new Error('无法获取到【护士科室切换提示自动关闭设置】配置,请前往配置');
          }
          this.changeNurseDeptSwitchTip(res.list[0].valueconfig);
        } else {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: res.msg || "无法获取到【护士科室切换提示自动关闭设置】配置,请前往配置",
          });
          throw new Error(res.msg || '无法获取到【护士科室切换提示自动关闭设置】配置,请前往配置');
        }
      },
      // 一键收取标本
      collectSpecimens() {
        if (!this.specimenTaskTypeId) {
          this.$refs.seiminModel.show({
            skin: "toast",
            icon: "error",
            content: "无法获取到临时标本业务",
          });
          throw new Error('无法获取到标本任务类型id');
        }
        this.changeQucikCreateOrderType({
          type: "specimen",
          taskTypeId: this.specimenTaskTypeId,
        });
        uni.navigateTo({
          url: "/pages/quickCreateOrder/quickCreateOrder",
        });
      },
      //其他临床服务快捷建单
      quickOrderOther(quickOther) {
        this.changeQucikCreateOrderType({
          type: "other",
          taskTypeId: quickOther.id,
        });
        uni.navigateTo({
          url: "/pages/quickCreateOrder/quickCreateOrder",
        });
      },
      // 切换科室弹窗
      showDeptModel() {
        const {
          user, //当前登录用户
        } = this.loginInfo;
        const userDept =
          user && user.dept ?
          this.deptDisplay == 1 ?
          user.dept.dept :
          user.dept.deptalias :
          "";
        this.$refs.seiminModel.showChangeDept({
          content: `您当前所属科室为<text class="green">${userDept}</text>，如与您实际科室不符点击<text class="red">切换科室</text>。`,
          btns: [{
              name: "知道了",
              textColor: "#49B856",
              flex: 2,
              click: () => {
                this.$refs.seiminModel.close();
              }
            },
            {
              name: "前往切换科室",
              textColor: "#666",
              flex: 3,
              click: (e) => {
                this.$refs.seiminModel.close();
                this.openPicker();
              },
            },
          ],
        });
      },
      //关闭
      closePicker() {
        this.$refs.sPicker._close();
      },
      //打开
      openPicker() {
        this.$refs.sPicker._open();
        let index = this.hospitalList.findIndex(v => v.value == this.loginInfo.user.currentHospital.id);
        this.$refs.sPicker._changeValue(index);
      },
      //确定：接收子组件传来的参数
      confirmPicker(checkedObj) {
        this.changeSearchDeptParams({
          backUrl: "/pages/index/index", //返回的url
          type: "changeDept_index", //首页切换科室
          hospital: checkedObj, //先选择院区
        });
        uni.navigateTo({
          url: "/pages/searchDept/searchDept",
        });
      },
    },
    mounted() {
      //选择院区picker的title
      this.pickerTitle = `您当前所属科室为<b class="green">${this.loginInfo.user.dept.dept}</b>，请您先选择院区`;
      //权限中的院区修改数据结构
      this.hospitalList = this.loginInfo.infoPermission.hospitals.map((v) => ({
        value: v.id,
        label: v.hosName,
      }));
      this.init();
    },
    onPullDownRefresh() {
      this.init();
    },
  };
</script>

<style lang="scss" scoped>
  .index {
    padding-bottom: 108rpx;

    // 弧形背景
    .arc_edge {
      @include arc_edge(220rpx);
    }

    .index_container {
      padding: 0 24rpx;
      position: relative;
      z-index: 2;

      // 搜素框
      .search {
        height: 66rpx;
        margin-top: -200rpx;
        @include flex(space-between, center);

        .search_wrap {
          width: 600rpx;
          height: 100%;
          border-radius: 33rpx;
          background-color: #fff;
          position: relative;

          input {
            height: 100%;
            padding-left: 33rpx;
            padding-right: 147rpx;
          }

          .searchBtn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            line-height: 1em;
            color: #666;
            font-size: 32rpx;
            width: 110rpx;
            text-align: center;
            padding: 6rpx 0;
            @include border(left);
          }
        }

        .icon-saoma {
          width: 66rpx;
          height: 66rpx;
          background-color: #bee1a7;
          border-radius: 50%;
          color: $defaultColor;
          @include flex(center, center);
        }
      }

      // 通告栏
      .uni-noticebar {
        height: 88rpx;
        margin-top: 24rpx;
        margin-bottom: 0;
        @include border;
      }

      // 一键收标本
      .collect_specimens {
        width: 702rpx;
        height: 176rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        position: relative;
        @include border;
        @include flex(center, center);
        @include semicircle(#f9fafb);

        .collect_icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: rgba(57, 177, 153, 0.3);
          font-size: 24rpx;
          color: #39b199;
          @include border($color:#39b199);
          @include flex(center, center);
        }

        .collect_specimensNum {
          margin: 0 35rpx;
          width: 277rpx;
          font-size: 34rpx;
          color: #666;

          .collect_num {
            font-size: 46rpx;
            font-weight: 600;
            color: #333;
            margin-left: 16rpx;
          }

          .collect_row {
            height: 88rpx;
            @include border($directive:bottom, $style:dashed);
            @include flex(flex-start, center);

            &:last-of-type {
              border-bottom: none;
            }
          }
        }

        .collect_btn {
          margin: 0;
          width: 224rpx;
          height: 88rpx;
          background: linear-gradient(90deg, #74c271 0%, #39b199 100%);
          border-radius: 56rpx;
          color: #fff;
          font-size: 32rpx;
          line-height: 88rpx;
          @include clamp;

          &::after {
            border: none;
          }
        }
      }

      // 最新工单
      .newOrders {
        width: 702rpx;
        min-height: 530rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 70rpx);

        .newOrders_header {
          height: 87rpx;
          padding: 0 27rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .newOrders_header_title {
            color: #333;
          }

          .newOrders_header_more {
            color: #666;
          }
        }

        .newOrders_item {
          height: 88rpx;
          padding: 0 27rpx;
          color: #333;
          font-size: 30rpx;
          position: relative;
          @include border(bottom);
          @include flex(center, center);

          .ji,
          .jiaji {
            width: 60rpx;
            position: absolute;
            right: 0;
            top: 0;
          }

          &:last-of-type {
            border-bottom: none;
          }

          .newOrders_item_time {
            width: 88rpx;
            text-align: center;
          }

          .newOrders_item_taskType {
            flex: 1;
            margin-left: 16rpx;
            @include clamp(1);
          }

          .newOrders_item_patientName {
            margin-left: 16rpx;
            margin-right: 16rpx;
            width: 148rpx;
            @include clamp(1);
          }

          .newOrders_item_status {
            width: 4em;
          }
        }
      }

      // 快捷工单
      .quick_other {
        width: 702rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        // box-shadow: 0 0 7rpx 0 rgba(73, 184, 86, 0.09);
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include border;
        @include semicircle(#f9fafb, 70rpx);

        .quick_other_header {
          height: 87rpx;
          padding: 0 27rpx;
          @include border($directive:bottom, $style:dashed);
          @include flex(space-between, center);

          .quick_other_header_title {
            color: #333;
          }
        }

        .quick_other_container {
          min-height: 288rpx;
          @include flex(flex-start, center);
          flex-wrap: wrap;
          font-size: 28rpx;

          .quick_other_container_item {
            width: 96rpx;
            height: 96rpx;
            border-radius: 8rpx;
            margin: 16rpx 35rpx;
            color: #fff;
            text-align: center;

            @include flex(center, center);

            .quick_other_container_item_text {
              @include clamp(2);
            }

            &:nth-of-type(8n + 1) {
              background-color: #a4c4c1;
            }

            &:nth-of-type(8n + 2) {
              background-color: #56bab6;
            }

            &:nth-of-type(8n + 3) {
              background-color: #39b199;
            }

            &:nth-of-type(8n + 4) {
              background-color: #48717f;
            }

            &:nth-of-type(8n + 5) {
              background-color: #56bab6;
            }

            &:nth-of-type(8n + 6) {
              background-color: #a4c4c1;
            }

            &:nth-of-type(8n + 7) {
              background-color: #48717f;
            }

            &:nth-of-type(8n + 8) {
              background-color: #8e9d9e;
            }
          }
        }
      }
    }
  }
</style>