<template>
  <div class="app-container">
    <div class="box">
      <div class="exponential" ref="container">
        <div ref="exponential_head">
          <div class="nav_text">指数/板块</div>
          <div class="serch_box">
            <el-input
              v-model="exponentialValue"
              placeholder="请输入个股代码或名称"
              class="iptSerch"
            >
              <div slot="suffix" class="serch_text" @click="submitSerch">
                搜索
              </div>
            </el-input>
            <!-- <div class="head_date">
              <i
                class="el-icon-arrow-left"
                @click="exponentialBeforeDay(exponentialDate)"
              ></i>
              <div style="padding: 0 10px">{{ exponentialDate }}</div>
              <i
                class="el-icon-arrow-right"
                @click="exponentialAfterDay(exponentialDate)"
              ></i>
            </div> -->
          </div>
        </div>
        <div class="list">
          <el-table
            :data="exponentialList"
            style="width: 100%"
            @row-click="exponentialRowClick"
            :height="exponentialTableHeight"
          >
            <el-table-column prop="securityCode" label="股票代码">
            </el-table-column>
            <el-table-column prop="securityName" label="股票名称">
            </el-table-column>
            <el-table-column prop="openingPrice" label="开盘价">
            </el-table-column>
            <el-table-column prop="closingPrice" label="收盘价">
            </el-table-column>
            <el-table-column prop="highestPrice" label="最高价">
            </el-table-column>
            <el-table-column prop="lowestPrice" label="最低价">
            </el-table-column>
            <el-table-column prop="collectDate" label="关注日期">
            </el-table-column>
          </el-table>
          <div
            class="pagination"
            v-if="exponentialTotal > 20"
            ref="exponential_footer"
          >
            <el-pagination
              layout="prev, pager, next"
              :total="exponentialTotal"
              background
              :page-size="20"
              @current-change="exponentialCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="private">
        <div ref="private_head">
          <div class="nav_text">个股</div>
          <div class="private_sift">
            <el-select
              v-model="privateMarket"
              @change="privateMarketChange"
              placeholder="请选择"
              class="profit_sift_ipt"
            >
              <el-option
                v-for="item in privateMarketList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-select
              v-model="privatePlate"
              @change="privatePlateChange"
              placeholder="请选择"
              class="profit_sift_ipt"
            >
              <el-option
                v-for="item in privatePlateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
            <!-- <div class="head_date">
              <i
                class="el-icon-arrow-left"
                @click="privateBeforeDay(privateDate)"
              ></i>
              <div style="padding: 0 10px">{{ privateDate }}</div>
              <i
                class="el-icon-arrow-right"
                @click="privateAfterDay(privateDate)"
              ></i>
            </div> -->
          </div>
        </div>
        <div class="list">
          <el-table
            :data="privateList"
            style="width: 100%"
            @row-click="privateRowClick"
            :height="privateHeight"
          >
            <el-table-column prop="securityCode" label="股票代码">
            </el-table-column>
            <el-table-column prop="securityName" label="股票名称">
            </el-table-column>
            <el-table-column prop="openingPrice" label="开盘价">
            </el-table-column>
            <el-table-column prop="closingPrice" label="收盘价">
            </el-table-column>
            <el-table-column prop="highestPrice" label="最高价">
            </el-table-column>
            <el-table-column prop="lowestPrice" label="最低价">
            </el-table-column>
            <el-table-column prop="collectDate" label="关注日期">
            </el-table-column>
            <el-table-column prop="dayAndPlate" width="150">
              <template slot="header" slot-scope="scope">
                <div class="plate_sift" @click="selectPlateSift">
                  <div>几天几板</div>
                  <div class="module_head_icon" v-if="plateSift">
                    <img
                      src="../../static/shengxu_true.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                    <img
                      src="../../static/jiangxu_false.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                  </div>
                  <div class="module_head_icon" v-else>
                    <img
                      src="../../static/shengxu_false.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                    <img
                      src="../../static/jiangxu_true.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" v-if="privateTotal > 20" ref="private_footer">
            <el-pagination
              layout="prev, pager, next"
              :total="privateTotal"
              background
              :page-size="20"
              @current-change="privateCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="privateDialogVisible" width="85%" @open="open()">
      <div slot="title" class="show_head">
        <div @click="isCollection">{{ listDetail.securityName }}</div>
        <div @click="isCollection">
          <img
            src="../../static/shoucang_true.png"
            v-if="listDetail.isCollect == 1"
            class="show_head_icon"
          />
          <img
            src="../../static/shoucang_false.png"
            v-else
            class="show_head_icon"
          />
        </div>
      </div>
      <div>
        <div id="myChart" :style="{ width: '100%', height: '550px' }"></div>
      </div>
      <div class="show_footer">
        <div class="footer_info_text">基本信息</div>
        <div class="show_footer_info">
          <div>可交易数：</div>
          <div>{{ listDetail.numberDaysAvailable }}</div>
        </div>
        <div class="show_footer_info">
          <div>首发上市日期：</div>
          <div>{{ listDetail.initialListingDate }}</div>
        </div>
        <div class="show_footer_info">
          <div>机构持仓合计：</div>
          <div>{{ listDetail.totalInstitutionalPositions }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数2级：</div>
          <div>{{ listDetail.dongCaiIndustryIndexLevel2 }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数3级：</div>
          <div>{{ listDetail.dongCaiIndustryIndexLevel3 }}</div>
        </div>
        <div class="show_footer_info">
          <div>所属东财行业指数代码：</div>
          <div>{{ listDetail.dongCaiIndustryIndexCode2 }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { query, getByCode, kLine, delQuery, addQuery } from "@/api/user";
const upColor = "#00da3c";
const downColor = "#ec0000";
export default {
  data() {
    return {
      // 指数/板块日期
      exponentialDate: "",
      // 个股日期
      privateDate: "",
      // 指数/板块搜索
      exponentialValue: "",
      // 指数/板块列表
      exponentialList: [
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
        },
      ],
      exponentialTotal: 20,
      exponentialTableHeight: null,
      // 个股大盘筛选
      privateMarket: "",
      privateMarketList: [
        {
          value: "",
          label: "全部大盘",
        },
        {
          value: "SH",
          label: "上证指数",
        },
        {
          value: "SZ",
          label: "深证指数",
        },
        {
          value: "30",
          label: "创业板",
        },
        {
          value: "688",
          label: "科创板",
        },
      ],
      // 个股筛选板块
      privatePlate: "全部板块",
      privatePlateList: [
        {
          value: "全部板块",
          label: "全部板块",
        },
        {
          value: "半导体",
          label: "半导体",
        },
      ],
      // 个股数据
      privateList: [
        {
          name: "上证指数",
          code: "301157.SZ",
          kai: "76.9",
          shou: "72.22",
          zuigao: "80.27",
          zuidi: "72.01",
          date: "2022-3-14",
          ban: "5天2板",
        },
      ],
      // 个股几天几板升序or降序
      plateSift: true,
      privateTotal: 20,
      privateHeight: null,
      privateDialogVisible: false,
      collection: true,
      // 个股详情数据
      listDetail: {},
      // 个股点击code
      clickrCode: "",
    };
  },
  created() {
    document.title = "收藏";
    this.exponentialDate = this.getTime(Date.parse(new Date()));
    this.privateDate = this.getTime(Date.parse(new Date()));
    this.rending();
  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$refs.container.getBoundingClientRect();
      const head = this.$refs.exponential_head.getBoundingClientRect();
      const privateHead = this.$refs.private_head.getBoundingClientRect();
      if (this.exponentialTotal > 20) {
        const footer = this.$refs.exponential_footer.getBoundingClientRect();
        this.exponentialTableHeight =
          rect.height - head.height - footer.height - 20;
      } else {
        this.exponentialTableHeight = rect.height - head.height - 20;
      }
      if (this.privateTotal > 20) {
        const footer = this.$refs.private_footer.getBoundingClientRect();
        this.privateHeight =
          rect.height - privateHead.height - footer.height - 20;
      } else {
        this.privateHeight = rect.height - privateHead.height - 20;
      }
      console.log(this.exponentialTableHeight, this.privateHeight);
    });
  },
  methods: {
    submitSerch() {
      query({
        businessDate: "",
        keyWord: this.exponentialValue,
        market: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plateOrA: 1,
      })
        .then((res) => {
          console.log(res);
          this.exponentialList = res.data.list;
          this.exponentialTotal = res.data.totalCount;
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    rending() {
      query({
        businessDate: "",
        keyWord: "",
        market: "",
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plateOrA: 1,
      })
        .then((res) => {
          console.log(res);
          this.exponentialList = res.data.list;
          this.exponentialTotal = res.data.totalCount;
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      query({
        businessDate: "",
        keyWord: "",
        market: this.privateMarket,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plateOrA: 2,
      })
        .then((res) => {
          this.privateList = res.data.list;
          this.privateTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 初始化个股echarts
    // 初始化echarts
    initEcharts(id) {
      kLine({
        securityCode: id,
        securityType: "",
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          console.log(res);
          var option;
          this.myChart = this.$echarts.init(document.getElementById("myChart"));
          var data = this.splitData(res.data);
          // console.log(data);
          this.myChart.setOption(
            (option = {
              animation: false,
              legend: {
                top: 10,
                left: "center",
                data: ["日K", "MA5", "MA10", "MA20", "MA30"],
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                },
                formatter: function (param) {
                  // let param1 = param[1];
                  if (param[0].data.length < 6) {
                    param = param[1];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  } else {
                    param = param[0];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  }
                },
                borderWidth: 1,
                borderColor: "#ccc",
                padding: 10,
                textStyle: {
                  color: "#000",
                },
                position: function (pos, params, el, elRect, size) {
                  const obj = {
                    top: 10,
                  };
                  obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                  return obj;
                },
                // extraCssText: 'width: 170px'
              },
              axisPointer: {
                link: [
                  {
                    xAxisIndex: "all",
                  },
                ],
                label: {
                  backgroundColor: "#777",
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: false,
                  },
                  brush: {
                    type: ["lineX", "clear"],
                  },
                },
              },
              brush: {
                xAxisIndex: "all",
                brushLink: "all",
                outOfBrush: {
                  colorAlpha: 0.1,
                },
              },
              visualMap: {
                show: false,
                seriesIndex: 5,
                dimension: 2,
                pieces: [
                  {
                    value: 1,
                    color: upColor,
                  },
                  {
                    value: -1,
                    color: downColor,
                  },
                ],
              },
              grid: [
                {
                  left: "10%",
                  right: "8%",
                  height: "50%",
                },
                {
                  left: "10%",
                  right: "8%",
                  top: "63%",
                  height: "16%",
                },
              ],
              xAxis: [
                {
                  type: "category",
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  splitLine: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                  axisPointer: {
                    z: 100,
                  },
                },
                {
                  type: "category",
                  gridIndex: 1,
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                  axisLabel: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                },
              ],
              yAxis: [
                {
                  scale: true,
                  splitArea: {
                    show: true,
                  },
                },
                {
                  scale: true,
                  gridIndex: 1,
                  splitNumber: 2,
                  axisLabel: { show: false },
                  axisLine: { show: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                },
              ],
              dataZoom: [
                {
                  type: "inside",
                  xAxisIndex: [0, 1],
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  xAxisIndex: [0, 1],
                  type: "slider",
                  top: "85%",
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "日K",
                  type: "candlestick",
                  data: data.values,
                  itemStyle: {
                    color: downColor,
                    color0: upColor,
                    borderColor: undefined,
                    borderColor0: undefined,
                  },
                  tooltip: {
                    formatter: function (param) {
                      console.log(param);
                      param = param[0];
                      return [
                        "Date: " +
                          param.name +
                          '<hr size=1 style="margin: 3px 0">',
                        "开盘: " + param.data[0] + "<br/>",
                        "Close: " + param.data[1] + "<br/>",
                        "Lowest: " + param.data[2] + "<br/>",
                        "Highest: " + param.data[3] + "<br/>",
                      ].join("");
                    },
                  },
                },
                {
                  name: "MA5",
                  type: "line",
                  data: this.calculateMA(5, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA10",
                  type: "line",
                  data: this.calculateMA(10, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA20",
                  type: "line",
                  data: this.calculateMA(20, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA30",
                  type: "line",
                  data: this.calculateMA(30, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "Volume",
                  type: "bar",
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  itemStyle: {
                    // normal: {
                    //   color: function (param) {
                    //     return downColor;
                    //   },
                    // },
                  },
                  data: data.volumes,
                },
              ],
            }),
            true
          );
          this.myChart.dispatchAction({
            type: "brush",
            areas: [
              {
                brushType: "lineX",
                coordRange: ["2000-01-24", "2013-03-26"],
                xAxisIndex: 0,
              },
            ],
          });
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 格式化时间戳
    getTime(date) {
      let time = new Date(date);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      if (s < 10) {
        s = "0" + s;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      return `${y}-${m}-${d}`;
    },
    // 指数/板块前一日
    exponentialBeforeDay(date) {
      this.exponentialDate = this.getTime(
        new Date(date).getTime() - 24 * 60 * 60 * 1000
      );
    },
    // 指数/板块后一日
    exponentialAfterDay(date) {
      this.exponentialDate = this.getTime(
        new Date(date).getTime() + 24 * 60 * 60 * 1000
      );
    },
    // 指数/板块分页
    exponentialCurrentChange(e) {
      console.log(e);
    },
    // 指数/板块点击行
    exponentialRowClick(e) {
      console.log(e);
    },
    // 个股大盘选择
    privateMarketChange(e) {
      query({
        businessDate: "",
        keyWord: "",
        market: this.privateMarket,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plateOrA: 2,
      })
        .then((res) => {
          this.privateList = res.data.list;
          this.privateTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      console.log(e);
    },
    // 个股板块选择
    privatePlateChange(e) {
      console.log(e);
    },
    // 个股前一日
    privateBeforeDay(date) {
      this.privateDate = this.getTime(
        new Date(date).getTime() - 24 * 60 * 60 * 1000
      );
    },
    // 个股后一日
    privateAfterDay(date) {
      this.privateDate = this.getTime(
        new Date(date).getTime() + 24 * 60 * 60 * 1000
      );
    },
    // 个股分页
    privateCurrentChange(e) {
      console.log(e);
    },
    // 个股几天几板排序
    selectPlateSift() {
      this.plateSift = !this.plateSift;
      query({
        businessDate: "",
        keyWord: "",
        market: this.privateMarket,
        pageModel: {
          pageNo: 1,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        plateOrA: 2,
        dayAndPlateSort: this.plateSift ? 1 : 0,
      })
        .then((res) => {
          this.privateList = res.data.list;
          this.privateTotal = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 个股点击行
    privateRowClick(e) {
      console.log(e);
      this.clickrCode = e.securityCode;
      getByCode({
        businessDate: "",
        securityCode: e.securityCode,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          this.listDetail = res.data;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
      this.privateDialogVisible = true;
    },
    // 是否收藏
    isCollection() {
      // this.collection = !this.collection;
      if (this.listDetail.isCollect == 1) {
        delQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "none",
                message: "已取消收藏!",
              });
            }
            this.listDetail.isCollect = null;
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      } else {
        addQuery({
          securityCode: this.listDetail.securityCode,
          securityType: this.listDetail.securityType,
        })
          .then((res) => {
            console.log(res);
            this.listDetail.isCollect = 1;
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "收藏成功!",
              });
            }
          })
          .catch(() => {
            // this.shareLoading = false;
          });
      }
    },
    // 个股弹层
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.initEcharts(this.clickrCode);
      });
    },
    // K线图
    splitData(rawData) {
      let categoryData = [];
      let values = [];
      let volumes = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumes.push([
          i,
          rawData[i][4],
          rawData[i][0] > rawData[i][1] ? 1 : -1,
        ]);
      }
      // volumes.push();
      return {
        categoryData: categoryData,
        values: values,
        volumes: volumes,
      };
    },
    calculateMA(dayCount, data) {
      var result = [];
      for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
      }
      // console.log(result);
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 100%;
}
.box {
  width: 100%;
  height: calc(100vh - 90px);
  // background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box > div {
  width: 49%;
  background-color: white;
  height: 100%;
  border-radius: 8px;
}
.exponential {
  .serch_box {
    padding: 0 20px;
    display: flex;
    align-items: center;
    .iptSerch {
      width: 400px;
      height: 40px;
      border-radius: 4px;
      .serch_text {
        line-height: 40px;
        padding-right: 15px;
        color: #ec7c00;
        cursor: pointer;
      }
    }
  }
}
.nav_text {
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
}
.head_date {
  margin-left: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 40px;
  background-color: white;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #dedede;
}
.list {
  margin-top: 20px;
  ::v-deep .el-table td {
    text-align: center;
    border: 0;
  }
  ::v-deep .el-table th.is-leaf {
    text-align: center;
    background-color: #fff9f3;
    color: #333333;
    padding: 13px 0;
  }
  .pagination {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .plate_sift {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .module_head_icon {
      margin-left: 4px;
      display: flex;
      flex-direction: column;
      margin-top: 3px;
      .head_icon {
        width: 9px;
        height: 5px;
        margin-top: 2px;
      }
    }
  }
}
.private_sift {
  display: flex;
  padding: 0 20px;
  .profit_sift_ipt {
    width: 200px;
    margin-right: 20px;
  }
}
.show_head {
  font-size: 20px;
  display: flex;
  font-weight: bold;
  align-items: center;
  color: #333333;
  cursor: pointer;
}
.footer_info_text {
  font-weight: bold;
  color: #333333;
  font-size: 18px;
}
.show_footer_info {
  margin-top: 16px;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 5vh !important;
}
.show_head_icon {
  margin-left: 10px;
  width: 18px;
  height: 18px;
}
</style>
