<template>
  <div class="g-cnt-wrap">
    <div class="m-box m-search">
      <div class="wrap">
        <div class="title">
          <span>社区查询</span>
        </div>

        <div class="tabs">
          <div
            :class="{ 'z-on': searchData.type == 'jumin' }"
            @click="searchData.type = 'jumin'"
          >
            查居民
          </div>
          <div
            :class="{ 'z-on': searchData.type == 'fangwu' }"
            @click="searchData.type = 'fangwu'"
          >
            查房屋
          </div>
        </div>

        <div class="search">
          <div class="search-input">
            <div class="input">
              <input
                type="text"
                :placeholder="typePlaceholder[searchData.type]"
                v-model="searchData.keyword"
                @keyup.enter="handleClickSearchBtn"
              />

              <div
                class="close-btn"
                v-if="searchData.keyword != ''"
                @click="searchData.keyword = ''"
              >
                <img src="@/assets/img/shequ/close.png" />
              </div>
            </div>
            <div class="btn" @click="handleClickSearchBtn">查一下</div>
          </div>
          <div class="btn2" @click="handleClickSearchBtn">
            <img src="@/assets/images/index/i-search.png" />
            智能搜索
          </div>
        </div>
      </div>
    </div>

    <div class="m-box">
      <div
        class="m-tb"
        v-if="
          searchData.type == 'jumin' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb">
          <el-table
            :data="searchJumin.list"
            border
            style="width: 100%"
            class="resi-table"
            :max-height="1000"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />
            <el-table-column
              v-for="item in searchJumin.header"
              :key="item.columnName"
              :prop="item.columnName"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
              :width="
                item.itemType === 'radio' ? computedWidth(item.label) : 180
              "
            >
              <template slot-scope="scope">
                <span>{{ handleFilterSpan(scope.row, item) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleWatchSearchJumin(scope.$index)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <div>
            <el-pagination
              @size-change="handleSizeChangeSearchJumin"
              @current-change="handleCurrentChangeSearchJumin"
              :current-page.sync="searchJumin.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(searchJumin.pageSize)"
              layout="sizes, prev, pager, next, total"
              :total="searchJumin.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div
        class="m-tb"
        v-if="
          searchData.type == 'fangwu' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb">
          <el-table
            :data="searchFangwu.list"
            v-loading="searchFangwu.loading"
            border
            :max-height="1000"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />
            <el-table-column prop="houseName" label="房屋名称" width="120">
            </el-table-column>
            <el-table-column
              prop="neighborHoodName"
              label="所属小区"
              width="160"
            >
            </el-table-column>
            <el-table-column prop="buildingName" label="所属楼栋">
            </el-table-column>
            <el-table-column prop="unitNum" label="单元号"> </el-table-column>
            <el-table-column prop="doorName" label="门牌号"> </el-table-column>
            <el-table-column prop="houseType" label="类型"> </el-table-column>
            <el-table-column prop="purpose" label="用途"> </el-table-column>
            <el-table-column prop="rentFlag" label="房屋状态">
            </el-table-column>
            <el-table-column prop="ownerName" label="房主姓名">
            </el-table-column>
            <el-table-column prop="ownerPhone" label="房主电话" width="110">
            </el-table-column>
            <el-table-column prop="ownerIdCard" label="身份证" width="170">
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              header-align="center"
              align="center"
              class="operate"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #1c6afd; text-decoration: underline"
                  size="small"
                  @click="handleWatchSearchFangwu(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChangeSearchFangwu"
              @current-change="handleCurrentChangeSearchFangwu"
              :current-page.sync="searchFangwu.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(searchFangwu.pageSize)"
              layout="sizes, prev, pager, next"
              :total="searchFangwu.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div
        class="m-tb"
        v-if="
          searchData.type == 'xuqiu' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb">
          <el-table
            :data="searchXuqiu.list"
            v-loading="searchXuqiu.loading"
            border
            :max-height="1000"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />

            <el-table-column
              v-for="item in searchXuqiu.header"
              :key="item.columnName"
              :prop="item.columnName"
              :label="item.label"
              :align="item.align"
              :width="item.width"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ handleFilterSpan(scope.row, item) }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              fixed="right"
              header-align="center"
              align="center"
              class="operate"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #1c6afd; text-decoration: underline"
                  size="small"
                  @click="handleWatchSearchXuqiu(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChangeSearchXuqiu"
              @current-change="handleCurrentChangeSearchXuqiu"
              :current-page.sync="searchXuqiu.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(searchXuqiu.pageSize)"
              layout="sizes, prev, pager, next"
              :total="searchXuqiu.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div
        class="m-tb"
        v-if="
          searchData.type == 'xuqiu' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb"></div>
      </div>
    </div>

    <people-more
      v-if="showedPeopleMoreInfo && currentPepeleId"
      :userId="currentPepeleId"
      :gridName="currentPepeleGridName"
      @close="showedPeopleMoreInfo = false"
    />

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="showedFangwuInfo"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="房屋详情"
      width="900px"
      @closed="showedFangwuInfo = false"
    >
      <fangwu-info
        ref="fangwu_info"
        @dialogCancle="showedFangwuInfo = false"
      ></fangwu-info>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="showedXuqiuInfo"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="需求详情"
      width="900px"
      @closed="showedXuqiuInfo = false"
    >
      <xuqiu-info
        ref="xuqiu_info"
        @dialogCancle="showedXuqiuInfo = false"
      ></xuqiu-info>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import barChart from "@/views/modules/shequ/cpts/bar-chart";
import warningList from "@/views/modules/warning/index";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import fangwuInfo from "@/views/modules/shequ/cpts/fangwu-info";
import xuqiuInfo from "@/views/modules/shequ/cpts/xuqiu-info";
import scrollNotice from "@/views/modules/shequ/cpts/scroll-notice";

export default {
  components: {
    barChart,
    peopleMore,
    fangwuInfo,
    xuqiuInfo,
    warningList,
    scrollNotice,
  },

  data() {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "jumin",
        keyword: "",
      },

      typePlaceholder: {
        jumin: "请输入姓名或电话或身份证号",
        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

      selectedFuncIdList: [],

      funcList: [
        // {
        //   url: '',
        //   menuId: '',
        //   menuName: '',
        //   icon: '',
        // }
      ],

      showedFuncPanel: false,

      warningChart: {
        loading: false,
        total: "",
        list: [],
      },

      warningTb: {
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchJumin: {
        header: [],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchFangwu: {
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchXuqiu: {
        header: [
          {
            label: "状态",
            align: "center",
            columnName: "statusName",
            width: "120",
            options: [
              {
                label: "待处理",
                value: "pending",
              },
              {
                label: "已取消",
                value: "canceled",
              },
              {
                label: "已派单",
                value: "assigned",
              },
              {
                label: "已接单",
                value: "have_order",
              },
              {
                label: "已完成",
                value: "finished",
              },
            ],
          },
          {
            label: "所属网格",
            columnName: "gridName",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "需求类型",
            columnName: "categoryName",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "需求内容",
            columnName: "content",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "上报类型",
            columnName: "reportTypeName",
            align: "center",
            width: "120",
            options: [
              {
                label: "社区帮办",
                value: "community",
              },
              {
                label: "楼长帮办",
                value: "building_caption",
              },
              {
                label: "党员帮办",
                value: "party",
              },
              {
                label: "自身上报",
                value: "self_help",
              },
            ],
          },
          {
            label: "上报人",
            columnName: "reportUserName",
            align: "center",
            width: "120",
            options: [],
          },
          {
            label: "上报时间",
            columnName: "reportTime",
            align: "center",
            width: "180",
            options: [],
          },
          {
            label: "需求人",
            columnName: "demandUserName",
            align: "center",
            width: "80",
            options: [],
          },
          {
            label: "服务方",
            columnName: "serviceShowName",
            align: "center",
            width: "120",
            options: [],
          },
          {
            label: "服务时间",
            columnName: "wantServiceTime",
            align: "center",
            width: "180",
            options: [],
          },
        ],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      // 显示人员详情
      showedPeopleMoreInfo: false,

      currentPepeleId: "",
      currentPepeleGridName: "",

      // 显示人员详情
      showedFangwuInfo: false,
      showedXuqiuInfo: false,

      noticeList: [
        // {
        //   configId: "20211210153859_f070ac2dd01129da5d9a9f2329fbd9ea1",
        //   noticeContent: "市北区-抚顺第二网格中南国际2号楼低保人员超出预警!",
        // },
      ],

      currentCategoryCode: "",

      currentPage: "chaxun", //查询 预警
      currentNoticeBuildingId: "",
      currentNoticeConfigId: "",
    };
  },
  computed: {
    selectedFuncList() {
      const {
        selectedFuncIdList,
        $store: {
          state: { sidebarMenuList },
        },
      } = this;
      let obj = {};
      sidebarMenuList.forEach((menu) => {
        if (selectedFuncIdList.indexOf(menu.id) !== -1) {
          obj[menu.id] = {
            menuId: menu.id,
            menuName: menu.name,
            icon: menu.icon,
            url: menu.url,
          };
        }
        if (menu.children && menu.children.length > 0) {
          menu.children.forEach((item) => {
            if (selectedFuncIdList.indexOf(item.id) !== -1) {
              obj[item.id] = {
                menuId: item.id,
                menuName: item.name,
                icon: item.icon,
                url: item.url,
              };
            }
          });
        }
      });
      return selectedFuncIdList.map((id) => obj[id]);
    },
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.keyword": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
  },
  mounted() {
    this.getApiData();
    console.log(
      "dynamicMenuRoutes----------------------------",
      this.$store.state.sidebarMenuList
    );
  },
  methods: {
    changeCategoryCode({ code }) {
      this.currentCategoryCode = code || "";

      this.warningTb.pageNo = 1;
      this.getWarningTb();
    },

    computedWidth(label) {
      const wd = 20 * label.length;
      return wd > 80 ? wd : 80;
    },
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },

    handleClickSearchBtn() {
      const {
        searchData: { type, keyword },
      } = this;
      if (!keyword) return this.$message.error("请输入搜索条件");
      if (type == "jumin") {
        this.searchJumin.pageNo = 1;
        this.searchJumin.total = 0;
        this.getSearchJumin();
      } else if (type == "fangwu") {
        this.searchFangwu.pageNo = 1;
        this.searchFangwu.total = 0;
        this.getSearchFangwu();
      } else if (type == "xuqiu") {
        this.searchXuqiu.pageNo = 1;
        this.searchXuqiu.total = 0;
        this.getSearchXuqiu();
      }
      this.searchStatus = "ing";
    },

    handleSizeChangeWarning(val) {
      console.log(`每页 ${val} 条`);
      this.warningTb.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getWarningTb();
    },
    handleCurrentChangeWarning(val) {
      console.log(`当前页: ${val}`);
      this.warningTb.pageNo = val;
      this.getWarningTb();
    },
    async handleWatchWarning(rowIndex) {
      let item = this.warningTb.list[rowIndex];
      this.currentPepeleId = item.userId;
      this.currentPepeleGridName = item.gridName;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleSizeChangeSearchJumin(val) {
      console.log(`每页 ${val} 条`);
      this.searchJumin.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchJumin();
    },
    handleCurrentChangeSearchJumin(val) {
      console.log(`当前页: ${val}`);
      this.searchJumin.pageNo = val;
      this.getSearchJumin();
    },
    async handleWatchSearchJumin(rowIndex) {
      let item = this.searchJumin.list[rowIndex];
      this.currentPepeleId = item.icResiUserId;
      this.currentPepeleGridName = item.GRID_ID;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleSizeChangeSearchFangwu(val) {
      console.log(`每页 ${val} 条`);
      this.searchFangwu.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchFangwu();
    },
    handleCurrentChangeSearchFangwu(val) {
      console.log(`当前页: ${val}`);
      this.searchFangwu.pageNo = val;
      this.getSearchFangwu();
    },
    async handleWatchSearchFangwu(row) {
      this.showedFangwuInfo = true;
      await nextTick();
      this.$refs.fangwu_info.initForm("detail", row);
    },

    handleSizeChangeSearchXuqiu(val) {
      console.log(`每页 ${val} 条`);
      this.searchXuqiu.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchXuqiu();
    },
    handleCurrentChangeSearchXuqiu(val) {
      console.log(`当前页: ${val}`);
      this.searchXuqiu.pageNo = val;
      this.getSearchXuqiu();
    },
    async handleWatchSearchXuqiu(row) {
      this.showedXuqiuInfo = true;
      await nextTick();
      this.$refs.xuqiu_info.initForm("detail", row);
    },

    handleClickFunc(menu) {
      const menuId = menu.menuId;
      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
        if (route.meta.iframeURL.endsWith("【跳转新页面】")) {
          window.open(route.meta.iframeURL.slice(0, -7));
        } else {
          this.$router.push({ name: route.name });
        }
      }
    },

    getApiData() {
      this.getFuncList();
      this.getWarningList();
      this.getWarningTb();
      this.getSearchJuminHeader();
      this.getNoticeList();
    },

    selectFuncItem(id) {
      let index = this.selectedFuncIdList.indexOf(id);
      if (index === -1) {
        this.selectedFuncIdList.push(id);
      } else {
        this.selectedFuncIdList.splice(index, 1);
      }
    },

    toNoticeInfo(item) {
      console.log(item);
      this.currentPage = "yujing";
      if (item) {
        this.currentNoticeBuildingId = item.buildingId;
        this.currentNoticeConfigId = item.configId;
      } else {
        this.currentNoticeBuildingId = "";
        this.currentNoticeConfigId = "";
      }
    },

    async getNoticeList() {
      const url = "/epmetuser/statsresiwarn/queryuserwarnnotice";
      const { data, code, msg } = await requestPost(url, {
        agencyId: this.$store.state.user.agencyId,
      });
      if (code === 0) {
        this.noticeList = data || [];
      } else {
        // return this.$message.error("网络错误");
      }
    },

    async getSearchJuminHeader() {
      const url = "/oper/customize/icform/tableheaders";
      const { data, code, msg } = await requestPost(url, {
        formCode: "resi_base_info",
      });
      if (code === 0) {
        console.log("居民表格header请求成功！！！！！！！！！！！！！！");
        this.searchJumin.header = data;
      } else {
        return this.$message.error("网络错误");
      }
    },

    async getSearchXuqiu() {
      const url = "/heart/userdemand/search";
      const {
        searchData: { keyword },
        searchXuqiu: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchXuqiu.total = data.total || 0;
        this.searchXuqiu.list = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },

    async getSearchJumin() {
      const url = "/epmetuser/icresiuser/search";
      const {
        searchData: { keyword },
        searchJumin: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchJumin.total = data.total || 0;
        this.searchJumin.list = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },

    async getSearchFangwu() {
      const url = "/gov/org/house/search";
      const {
        searchData: { keyword },
        searchFangwu: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchFangwu.total = data.total || 0;
        this.searchFangwu.list = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },

    async getWarningTb() {
      const url = "/epmetuser/icresiuser/personwarn/rightlist";
      const {
        warningTb: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        categoryCode: this.currentCategoryCode,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.warningTb.total = data.total || 0;
        this.warningTb.list = data.list
          ? data.list.map((item) => {
              item.typeName = item.type.join("、");
              return item;
            })
          : [];
      } else {
      }
    },

    //加载组织数据
    async getWarningList() {
      const url = "/epmetuser/icstatsresiwarn/personwarn/leftpie";
      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.warningChart.loading = true;
        this.warningChart.total = data.total;
        this.warningChart.list = data.list.map((item) => {
          return {
            code: item.typeCode,
            name: item.typeName,
            count: item.typeCount,
            const: "const",
          };
        });
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getFuncList() {
      const url = "/gov/access/icoftenusefunction/oftenusefunctionlist";
      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.funcList = data || [];
        this.selectedFuncIdList = this.funcList.map((item) => item.menuId);
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async editFuncList() {
      const url = "/gov/access/icoftenusefunction/addoftenusefunction";
      const { selectedFuncIdList } = this;
      let params = selectedFuncIdList.map((menuId, sort) => {
        return { menuId, sort };
      });

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("修改成功");
        this.showedFuncPanel = false;
        this.getFuncList();
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-box {
  position: relative;
  padding: 24px 16px;
  background: #ffffff;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.m-search {
  box-sizing: border-box;
  padding: 40px 80px;
  margin-bottom: 16px;
  background-size: 100%;

  .title {
    height: 47px;
    font-size: 32px;
    font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    font-weight: 500;
    color: #0056d6;
    line-height: 47px;
    text-align: center;
  }

  .tabs {
    width: 692px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    > div {
      position: relative;
      margin-right: 30px;
      width: 56px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
      border-radius: 2px;
      color: #0056d6;
      text-align: center;
      cursor: pointer;
      &.z-on {
        color: #ffffff;
        background: #0056d6;
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-top: 5px solid #0056d6;
        }
      }
    }
  }

  .search {
    width: 692px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;

    .search-input {
      position: relative;
      width: 560px;
      height: 48px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #0056d6;
      display: flex;

      .input {
        position: relative;
        width: calc(100% - 100px);

        input {
          margin-left: 20px;
          width: calc(100% - 10px);
          border: none;
          height: 44px;
          line-height: 44px;
          font-family: "思源宋体";
          font-size: 16px;
          font-weight: 400;
          color: #333;
        }

        .close-btn {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto 0;
          width: 18px;
          height: 18px;
          background-color: #eee;
          border-radius: 100%;
          cursor: pointer;

          img {
            display: block;
            margin: 4px auto;
            width: 10px;
            height: 10px;
            opacity: 0.3;
          }
        }
      }

      .btn {
        margin: 7px 9px 0 auto;
        line-height: 32px;
        width: 66px;
        height: 32px;
        background: #0056d6;
        border-radius: 2px;
        text-align: center;
        font-size: 15px;
        font-family: Source Han Serif CN;
        font-weight: 500;
        color: #ffffff;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .btn2 {
      margin-left: 35px;
      width: 100px;
      height: 39px;
      line-height: 39px;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      font-family: Source Han Serif CN;
      font-weight: 500;
      color: #0056d6;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
  }
}
.m-list {
}
</style>
