上传文件至 'src/pages/meetingRoom'

src/pages/meetingRoom/meetingItem.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="item-content" @click.stop="onClickData">
+    <div class="item-title">
+      <span class="text-color-title item-address">流水号:{{ item.lsh }}</span>
+      <span class="text-color-description" :style="{ color: generateColor() }">{{ generateState() }}</span>
+    </div>
+    <!-- <div class="text-color-title item-description">
+      {{ item.constructionContent }}
+    </div>-->
+    <div class="text-color-description">预订人：{{ item.ydr }}</div>
+    <div class="text-color-description">预定时间：{{ item.ydsj }}</div>
+    <div class="text-color-description">增值服务：{{ item.zzfw }}</div>
+    <div class="text-color-description">跟进事项：{{ item.gjsx }}</div>
+    <div class="btn-group">
+      <van-button
+        type="primary"
+        plain
+        :color="data.color"
+        v-for="(data, index) in item.operate"
+        :key="index"
+        @click.stop="onClickItem(data)"
+      >{{ data.name }}</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "meetingItem",
+  props: {
+    item: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      color: "#ff4433"
+    };
+  },
+  created() {
+    this.processData();
+  },
+  methods: {
+    processData() {
+      if (this.item.operate) {
+        this.item.operate.findIndex((res, index) => {
+          if (this.item.decorationState != 3 && res.name === "复验") {
+            this.item.operate.splice(index);
+          }
+        });
+      }
+    },
+    generateState() {
+      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
+      switch (this.item.examineState + "") {
+        case "0":
+          return "待审核";
+          break;
+        case "1":
+          switch (this.item.decorationState + "") {
+            case "0":
+              return "未开始";
+              break;
+            case "1":
+              return "装修中";
+              break;
+            case "2":
+              return "待整改";
+              break;
+            case "3":
+              return "已初验";
+              break;
+            case "4":
+              return "已复验";
+              break;
+          }
+          break;
+        case "2":
+          return "驳回";
+          break;
+      }
+    },
+    generateColor() {
+      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
+      switch (this.item.examineState + "") {
+        case "0":
+          return "#999";
+          break;
+        case "1":
+          switch (this.item.decorationState + "") {
+            case "0":
+              return "#999";
+              break;
+            case "1":
+              return "#57a2fe";
+              break;
+            case "2":
+              return "#fba908";
+              break;
+            case "3":
+              return "#57a2fe";
+              break;
+            case "4":
+              return "#57a2fe";
+              break;
+          }
+          break;
+        case "2":
+          return "#fc4e50";
+          break;
+      }
+    },
+
+    onClickData() {
+      this.$router.push({
+        path: "breakRulesInfoDetail",
+        query: {
+          decorationId: this.item.decorationId,
+          operate: this.item.operate
+        }
+      });
+    },
+
+    onClickItem(data) {
+      switch (data.name) {
+        case "驳回":
+          this.$router.push({
+            path: "decorateOperate",
+            query: {
+              type: 0,
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+        case "通过":
+          this.$router.push({
+            path: "decorateOperate",
+            query: {
+              type: 1,
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+        // case "新增违规":
+        //   this.$router.push({
+        //     path: "decorateOperate",
+        //     query: {
+        //       type: 2,
+        //       decorationId: this.item.decorationId
+        //     }
+        //   });
+        //   break;
+        case "违规列表":
+          this.$router.push({
+            path: "breakRulesList",
+            query: {
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+        case "整改复查":
+          this.$router.push({
+            path: "breakRulesListCheck",
+            query: {
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+        case "初验":
+          this.$router.push({
+            path: "decorateOperate",
+
+            query: {
+              type: 3,
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+        case "复验":
+          this.$router.push({
+            path: "decorateOperate",
+            query: {
+              type: 4,
+              decorationId: this.item.decorationId
+            }
+          });
+          break;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.item-content {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  font-size: 13px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  padding: 15px 20px 10px 20px;
+}
+
+.item-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 9px;
+}
+
+.item-address {
+  font-size: 15px !important;
+  font-weight: bold;
+}
+
+.item-description {
+  margin-bottom: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-color-title {
+  color: #333;
+}
+
+.text-color-description {
+  color: #999;
+}
+
+.btn-group {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.btn-group button {
+  border-radius: 3px;
+  min-width: 65px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px !important;
+  margin-left: 5px;
+}
+</style>

src/pages/meetingRoom/meetingRoomDetail.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="div_page_bg">
+  </div>
+</template>
+
+<script>
+import {
+} from "../../service/getData";
+export default {
+  name: "meetingRoomDetail",
+  data() {
+    return {
+    }
+  },
+  activated() {
+  },
+  created() {
+  },
+
+  methods: {
+  }
+};
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

src/pages/meetingRoom/meetingRoomList.vue

@@ -0,0 +1,809 @@
+<template>
+  <div class="div_page_bg">
+    <van-tabs
+      v-model="activeName"
+      background="#57A2FE"
+      color="white"
+      line-width="25px"
+      :border="false"
+      width="100%"
+      style="position: relative"
+      title-active-color="white"
+      title-inactive-color="white"
+      @click="onClickTab"
+    >
+      <van-tab
+        title="待跟进"
+        name="0"
+        :title-style="{
+          fontWeight: activeName == 0 ? 'bold' : 'normal',
+          fontSize: activeName == 0 ? '15px' : '14px'
+        }"
+      ></van-tab>
+      <van-tab
+        title="已完成"
+        name="1"
+        :title-style="{
+          fontWeight: activeName == 1 ? 'bold' : 'normal',
+          fontSize: activeName == 1 ? '15px' : '14px'
+        }"
+      ></van-tab>
+    </van-tabs>
+    <div class="div_content" ref="decorateList">
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+          v-if="decorateLists.length != 0"
+        >
+          <meetingItem v-for="(data, index) in decorateLists" :key="index" :item="data"></meetingItem>
+        </van-list>
+        <div class="no-data" v-else>
+          <img src="../../assets/images/crm/nodata.png" alt />
+          <p>暂无任务</p>
+        </div>
+      </van-pull-refresh>
+    </div>
+
+    <!--    <van-button type="primary" size="small" style="position: absolute;top: 0" @click="onClickScreen">筛选</van-button>-->
+    <van-popup position="bottom" get-container="body" v-model="showScreen">
+      <div class="popup">
+        <div class="popup-header">
+          <span @click="onCancelFilter">取消</span>
+          <span @click="onClearFilter" class="filter-clear">清空筛选</span>
+          <span @click="onConfirmFilter">确定</span>
+        </div>
+        <div class="filter-wrap">
+          <div class="filter-nav">
+            <div
+              v-for="(nav, index) in navList"
+              :key="index"
+              class="nav-item"
+              v-if="nav.isShow"
+              :class="{
+                on: currentFilter == nav.id,
+                selected: nav.selected != ''
+              }"
+              @click="onClickFilterCate(nav)"
+            >{{ nav.label }}</div>
+          </div>
+          <div
+            v-for="(nav, index) in navList"
+            :key="index"
+            class="filter-list"
+            v-if="currentFilter == nav.id"
+          >
+            <div
+              @click="selectFilter(nav, btn)"
+              v-for="(btn, index) in nav.children"
+              :key="index"
+              class="filter-btn"
+              :class="isNavSelect(nav.selected, btn.id)"
+            >{{ btn.label }}</div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import meetingItem from "./components/meetingItem";
+import {
+  getDecorateApplyList,
+  selectDecorationOperator
+} from "../../service/getData";
+import util from "../../util/util";
+import store from "@/store";
+export default {
+  name: "meetingRoomList",
+  components: { meetingItem },
+  data() {
+    return {
+      activeName: "",
+      refreshing: false,
+      loading: true,
+      finished: false,
+      decorateLists: [],
+      currentIndex: 1,
+      pageSize: 10,
+      searchForm: {
+        userId: localStorage.getItem("memberId"),
+        examineState: "0", //0-未审核，2-已审核，3-驳回
+        decorationState: "",
+        decorationDate: "",
+        operator: ""
+      },
+      showScreen: false,
+      navList: [
+        // {
+        //   label: '审批类型',
+        //   id: 1,
+        //   selected: '',
+        //   children: [{
+        //     label: '我收到的',
+        //     id: 1
+        //   }, {
+        //     label: '我发起的',
+        //     id: 2
+        //   }]
+        // },
+        {
+          label: "提交人",
+          id: 1,
+          multiSelect: true,
+          isShow: true,
+          selected: "",
+          children: []
+        },
+
+        {
+          label: "提交时间",
+          id: 2,
+          selected: "",
+          isShow: true,
+          children: [
+            {
+              label: "近一季度",
+              id: 1
+            },
+            {
+              label: "近半年",
+              id: 2
+            },
+            {
+              label: "近一年",
+              id: 3
+            }
+          ]
+        },
+        {
+          label: "装修状态",
+          id: 3,
+          multiSelect: true,
+          selected: "",
+          isShow: false,
+          children: [
+            {
+              label: "未开始",
+              id: 0
+            },
+            {
+              label: "装修中",
+              id: 1
+            },
+            {
+              label: "待整改",
+              id: 2
+            },
+            {
+              label: "已初验",
+              id: 3
+            },
+            {
+              label: "已终验",
+              id: 4
+            }
+          ]
+        }
+      ],
+
+      filterBtns: [],
+      currentFilter: 1
+    };
+  },
+  beforeRouteEnter(to, from, next) {
+    // alert('bbb');
+    store.commit("ADD_INCLUDE_COMPONENT", "decorateList");
+    next();
+  },
+  beforeRouteLeave(to, from, next) {
+    try {
+      EbeiPlugins.cleanNavigationRightButton();
+      EbeiPlugins.setBackButtonAction("");
+    } catch (e) {}
+    if (
+      to.path != "/decorateOperate" &&
+      to.path != "/breakRulesList" &&
+      to.path != "/breakRulesListCheck" &&
+      to.path != "/breakRulesInfoDetail"
+    ) {
+      from.meta.savedPosition = 0;
+      store.commit("REMOVE_INCLUDE_COMPONENT", "decorateList");
+      localStorage.setItem(
+        "scrollDecorateList",
+        this.$refs.decorateList.scrollTop + ""
+      );
+      localStorage.setItem("shouldRefresh", "false");
+    }
+    next();
+  },
+  activated() {
+    if (localStorage.getItem("shouldRefresh") == "true") {
+      this.$toast.loading({
+        message: "加载中...",
+        duration: 0,
+        forbidClick: true
+      });
+      localStorage.setItem("shouldRefresh", "false");
+      this.decorateLists = [];
+      this.currentIndex = 1;
+      this.getDecorateApplyListJS();
+    } else {
+      if (!util.isStrEmpty(localStorage.getItem("scrollDecorateList"))) {
+        if (this.$refs.decorateList) {
+          decorateList.scrollTop = parseInt(
+            localStorage.getItem("scrollDecorateList")
+          );
+        }
+      }
+    }
+    try {
+      EbeiPlugins.setNavigationRightButtons([
+        { name: "筛选", script: "screen()" }
+      ]);
+    } catch (e) {}
+    let that = this;
+    window["screen"] = () => {
+      that.showScreen = true;
+    };
+  },
+  created() {
+    console.log(localStorage.getItem("token"));
+    this.$toast.loading({
+      message: "加载中...",
+      duration: 0,
+      forbidClick: true
+    });
+    this.getDecorateApplyListJS();
+    this.selectDecorationOperatorJS();
+    try {
+      EbeiPlugins.setNavigationRightButtons([
+        { name: "筛选", script: "screen()" }
+      ]);
+    } catch (e) {}
+    let that = this;
+    window["screen"] = () => {
+      that.showScreen = true;
+    };
+  },
+
+  methods: {
+    isNavSelect(data, id) {
+      return data.indexOf(id + "") != -1 ? "on" : "";
+    },
+    onClickTab(name) {
+      this.refreshing = false;
+      this.loading = true;
+      this.finished = false;
+      this.searchForm.examineState = name;
+      //重置筛选条件
+      if (this.activeName == 1) {
+        this.navList[2].isShow = true;
+      } else {
+        this.navList[2].isShow = false;
+      }
+      this.filterData();
+
+      this.$toast.loading({
+        message: "加载中...",
+        duration: 0,
+        forbidClick: true
+      });
+      this.onRefresh();
+    },
+    selectDecorationOperatorJS() {
+      let that = this;
+      let params = {
+        userId: localStorage.getItem("memberId")
+      };
+      selectDecorationOperator(params)
+        .then(res => {
+          if (res.status == 200) {
+            res.data.forEach(data => {
+              that.navList[0].children.push({
+                label: data,
+                id: data
+              });
+            });
+          }
+        })
+        .catch(err => {});
+    },
+    getDecorateApplyListJS() {
+      this.loading = false;
+      this.$toast.clear();
+      this.decorateLists.push({
+        lsh: 2020202020200,
+        examineState: 0,
+        ydr:"张三",
+        ydsj: "2020-11-11 11:11",
+        zzfw: "矿泉水 X3 (瓶)",
+        gjsx: "jinjintql"
+      });
+      // let that = this;
+      // let path = [this.pageSize, this.currentIndex];
+      // getDecorateApplyList(path, this.searchForm)
+      //   .then(res => {
+      //     that.$toast.clear();
+      //     that.refreshing = false;
+      //     that.loading = false;
+      //     if (res.status == 200) {
+      //       that.generateDatas(res.data.records);
+      //       if (that.decorateLists.length == res.data.total) {
+      //         that.finished = true;
+      //       } else {
+      //         that.finished = false;
+      //       }
+      //     } else {
+      //       that.finished = true;
+      //     }
+      //   })
+      //   .catch(error => {});
+    },
+    generateDatas(data) {
+      data.forEach((item, index) => {
+        switch (this.searchForm.examineState + "") {
+          case "0":
+            item.operate = [
+              {
+                name: "驳回",
+                color: "#fc4e50"
+              },
+              {
+                name: "通过",
+                color: "#57a2fe"
+              }
+            ];
+            break;
+          case "1":
+            item.operate = [];
+            if (item.decorationBreakRuleNum == 0) {
+              // item.operate.push({
+              //   name: "新增违规",
+              //   color: "#fba908"
+              // });
+            } else {
+              item.operate.push({
+                name: "违规列表",
+                color: "#fba908"
+              });
+              item.operate.push({
+                name: "整改复查",
+                color: "#33ba73"
+              });
+            }
+            if (item.decorationState == 1 || item.decorationState == 2) {
+              item.operate.push({
+                name: "初验",
+                color: "#57a2fe"
+              });
+              item.operate.push({
+                name: "复验",
+                color: "#57a2fe"
+              });
+            } else if (item.decorationState == 3) {
+              item.operate.push({
+                name: "复验",
+                color: "#5B96F9"
+              });
+            }
+            break;
+          case "2":
+            break;
+        }
+        this.decorateLists.push(item);
+      });
+    },
+    onRefresh() {
+      this.currentIndex = 1;
+      this.decorateLists = [];
+      this.getDecorateApplyListJS();
+    },
+    onLoad() {
+      this.currentIndex++;
+      this.getDecorateApplyListJS();
+    },
+    // 取消筛选
+    onCancelFilter() {
+      this.showScreen = false;
+    },
+    // 确定
+    onConfirmFilter() {
+      this.showScreen = false;
+      this.filterData();
+      this.decorateLists = [];
+      this.getDecorateApplyListJS();
+    },
+    // 清空筛选
+    onClearFilter() {
+      this.navList.forEach((item, index) => {
+        item.selected = "";
+      });
+      this.onConfirmFilter();
+    },
+    generateFilterValue(value) {
+      let result = "";
+      let operators = value.split(",");
+      operators.forEach(data => {
+        if (data != "" && data != undefined) result += data + ",";
+      });
+      result = result.substr(0, result.length - 1);
+      return result;
+    },
+    filterData() {
+      if (this.navList[0].selected != "" && this.navList[0].isShow) {
+        this.searchForm.operator = this.generateFilterValue(
+          this.navList[0].selected
+        );
+      } else {
+        this.searchForm.operator = "";
+      }
+
+      if (this.navList[1].selected == 1 && this.navList[1].isShow) {
+        // 近一季度
+        this.searchForm.decorationDate =
+          parseTime(new Date() - 90 * 24 * 3600 * 1000, "{y}-{m}-{d}") +
+          "~" +
+          util.formateDate3(new Date());
+      } else if (this.navList[1].selected == 2 && this.navList[1].isShow) {
+        // 近半年
+        this.searchForm.decorationDate =
+          parseTime(new Date() - 180 * 24 * 3600 * 1000, "{y}-{m}-{d}") +
+          "~" +
+          util.formateDate3(new Date());
+      } else if (this.navList[1].selected == 3 && this.navList[1].isShow) {
+        // 近一年
+        this.searchForm.decorationDate =
+          parseTime(new Date() - 365 * 24 * 3600 * 1000, "{y}-{m}-{d}") +
+          "~" +
+          util.formateDate3(new Date());
+      } else {
+        this.searchForm.decorationDate = "";
+      }
+
+      if (this.navList[2].selected != "" && this.navList[2].isShow) {
+        this.searchForm.decorationState = this.generateFilterValue(
+          this.navList[2].selected
+        );
+      } else {
+        this.searchForm.decorationState = "";
+      }
+    },
+    onClickScreen() {
+      this.showScreen = true;
+      if (this.activeName == 1) {
+        this.navList[2].isShow = true;
+      } else {
+        this.navList[2].isShow = false;
+      }
+    },
+    onClickFilterCate(item) {
+      this.currentFilter = item.id;
+    },
+    selectFilter(cate, btn) {
+      if (cate.multiSelect) {
+        if (cate.selected.indexOf(btn.id + "") != -1) {
+          let first = cate.selected.substr(
+            0,
+            cate.selected.indexOf(btn.id + "") - 1
+          );
+          let last = cate.selected.substr(
+            cate.selected.indexOf(btn.id + "") + (btn.id + "").length,
+            cate.selected.length
+          );
+          cate.selected = first + last;
+        } else {
+          cate.selected += btn.id + ",";
+        }
+      } else {
+        if (cate.selected == btn.id) {
+          cate.selected = "";
+        } else {
+          cate.selected = btn.id + "";
+        }
+      }
+    }
+  }
+};
+</script>
+
+
+
+<style scoped lang="less">
+.div_page_bg {
+  width: 100%;
+  height: 100vh;
+  background-image: linear-gradient(to bottom, #57a2fe 162px, #f7f7f7 0);
+}
+
+.div_header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 162px;
+  background-color: #57a2fe;
+}
+
+.div_header_title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 62px;
+  padding: 0 15px;
+}
+
+.div_header_tab {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  max-width: calc(~"100vw - 40px");
+  height: 20px;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.div_header_arrow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 62px;
+  flex: 1;
+  margin-left: 10px;
+}
+
+.div_content {
+  margin: 10px 15px 0;
+  height: calc(~"100vh - 64px");
+  overflow-y: auto;
+  /*background-color: white;*/
+  /*border-radius: 7px;*/
+}
+
+.div_content_title {
+  display: flex;
+  flex-direction: row;
+  margin: 20px 20px 20px 20px;
+  background-color: white;
+}
+
+.span_content_title {
+  color: #999999;
+  width: 100%;
+  flex: 1;
+  font-size: 14px;
+}
+
+.span_content_choose {
+  display: flex;
+  flex-direction: row;
+  color: #999999;
+  font-size: 14px;
+}
+
+.span_content_choose::before {
+  content: " ";
+  display: block;
+  height: 20px;
+  width: 20px;
+  margin-right: 2px;
+  background: url("../../assets/images/icon_screen.png") no-repeat;
+  background-size: 100%;
+}
+
+.div_content_detail {
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px 20px 20px;
+  height: calc(~"100vh - 97px");
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.span_value {
+  font-size: 14px;
+  color: white;
+}
+
+.line-h {
+  width: calc(~"100% - 40px");
+  margin-left: 20px;
+  height: 1px;
+  background-color: #d9d9d9;
+}
+
+.div_popup {
+  width: 100%;
+  height: 100vh;
+  background-color: #ffffff;
+}
+
+.div_popup_content {
+  width: 100%;
+  height: calc(~"100vh - 85px");
+  padding-bottom: 10px;
+  overflow-y: auto;
+}
+
+.div_popup_button {
+  display: flex;
+  width: 100%;
+  height: 44px;
+}
+
+.span_screen {
+  font-size: 16px;
+  color: #333333;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+}
+
+.span_popup_cancel {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #dbdbdb;
+  color: white;
+}
+
+.span_popup_confirm {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #78aef9;
+  color: white;
+}
+
+.line_h {
+  width: 100%;
+  background-color: #e8e8e8;
+  height: 1px;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
+
+.div_popup_level {
+  display: flex;
+  padding: 0 10px 10px 10px;
+}
+
+.span_button_select {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 21px;
+  width: 53px;
+  border-radius: 10px;
+  background-color: #78aef9;
+  color: white;
+}
+
+.span_button_unselect {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 21px;
+  width: 53px;
+  border-radius: 10px;
+  background-color: #f7f7f7;
+  color: black;
+}
+
+.filter-wrap {
+  height: 345px;
+  background: #fff;
+  display: flex;
+
+  .filter-nav {
+    width: 109px;
+    height: 100%;
+    overflow: auto;
+    background: #f5f5f5;
+    font-size: 15px;
+
+    .nav-item {
+      height: 55px;
+      text-align: center;
+      line-height: 55px;
+      color: #666666;
+
+      &.on {
+        background: #fff;
+        position: relative;
+        color: #333;
+        font-weight: 500;
+
+        &::before {
+          width: 4px;
+          height: 15px;
+          position: absolute;
+          left: 0;
+          top: 20px;
+          content: "";
+          background: #2761ff;
+        }
+      }
+
+      &.selected {
+        position: relative;
+
+        &::before {
+          width: 4px;
+          height: 15px;
+          position: absolute;
+          left: 0;
+          top: 20px;
+          content: "";
+          background: #2761ff;
+        }
+      }
+    }
+  }
+
+  .filter-list {
+    flex: 1;
+    height: 100%;
+    padding: 10px;
+    overflow: auto;
+    font-size: 15px;
+
+    .filter-btn {
+      margin-bottom: 8px;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+      border-radius: 2px;
+      background: #f5f5f5;
+
+      &.on {
+        background: #f2f6ff;
+        color: #2761ff;
+      }
+    }
+  }
+}
+
+.popup-header {
+  height: 48px;
+  display: flex;
+  background: #2761ff;
+
+  span {
+    flex: 1;
+    line-height: 48px;
+    color: #fff;
+    text-align: center;
+    font-size: 16px;
+
+    &.filter-clear {
+      flex: 2;
+    }
+  }
+}
+.no-data {
+  height: calc(~"100vh - 64px");
+  background-color: #fff;
+  border-radius: 8px;
+  text-align: center;
+  color: #999;
+  font-size: 15px;
+  padding-top: 140px;
+}
+.no-data p {
+  position: absolute;
+  top: 55%;
+  right: 0;
+  left: 0;
+}
+.colorff {
+  color: #fff;
+}
+</style>