<template>
  <div>
    <div style="margin-bottom: 4px">
      <span class="left-title">历史数据:</span>
      <el-radio-group v-model="tabUrl" size="small" @change="onToUrl">
        <el-radio-button label="gongmao">工猫提现记录</el-radio-button>
        <el-radio-button label="qingtuanbao">青团宝提现记录</el-radio-button>
      </el-radio-group>
    </div>
    <div>
      <span class="left-title">领薪宝配置:</span>
      <el-radio-group v-model="tab" size="small" @change="getList">
        <el-radio-button label="service">领薪宝服务配置</el-radio-button>
        <el-radio-button label="salary">领薪宝结薪订单</el-radio-button>
        <el-radio-button label="withdrawal">领薪宝提现订单</el-radio-button>
        <el-radio-button label="verify">发票审核</el-radio-button>
      </el-radio-group>
    </div>

    <div class="t-content">
      <template v-if="tab ==='service'">
        <div class="t-title">
          <span class="left-title">基本服务配置</span>
        </div>
        <el-table border :data="basicConfigData" style="width: 100%">
          <el-table-column prop="config_key" label="键" width="180"></el-table-column>
          <el-table-column prop="description" label="描述" width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.description?scope.row.description.substring(0,9):''"></span>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="值">
            <template slot-scope="scope">
              <span v-html="scope.row.value?scope.row.value.substring(0,20):''"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link icon="el-icon-edit" @click="onBasicEdit(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="t-title">
          <span class="left-title">
            扣费方式配置
            <el-button size="medium" @click="onAddService">添加扣税方式</el-button>
          </span>
        </div>
        <el-table border :data="serviceData" style="width: 100%">
          <el-table-column prop="config_key" label="扣税方式" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.config_key }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.status =='1'">支持</div>
              <div v-else>不支持</div>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="服务协议">
            <template slot-scope="scope">
              <span v-html="scope.row.value?scope.row.value.substring(0,20):''"></span>
            </template>
          </el-table-column>
          <el-table-column prop="original_rate" label="服务商原始费率">
            <template slot-scope="scope">
              <span>{{ scope.row.original_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="kaifabao_rate" label="领薪宝费率">
            <template slot-scope="scope">
              <span>{{ scope.row.kaifabao_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link icon="el-icon-edit" @click="onServiceEdit(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tab ==='salary'">
        <div class="t-title">
          <span>选择子账户</span>
        </div>
        <div class="account-type">
          <el-radio-group v-model="accountType" size="small">
            <el-radio-button label="1">程序员客栈</el-radio-button>
            <!--            <el-radio-button label="2" disabled>阿里妈妈</el-radio-button>-->
          </el-radio-group>
        </div>
        <div class="t-title">
          <span>项目结算记录</span>
        </div>
        <div class="title">
          <el-form label-width="180px" label-position="left">
            <el-form-item label="已结算总金额（税前）：">{{ serviceCountData.totalSuccessPay }}元</el-form-item>
            <el-form-item label="已提现总金额（税前）：">{{ serviceCountData.totalDraw }}元</el-form-item>
            <el-form-item label="待提现总额（税前）：">{{ serviceCountData.totalWaitDraw }}元</el-form-item>
          </el-form>
        </div>
        <el-table border :data="salaryData" style="width: 100%">
          <el-table-column prop="pro_name" label="项目名称">
            <template slot-scope="scope">
              <span class="lblue point" @click="projectLink(scope.row)">{{ scope.row.pro_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pay_type" label="付款类型" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.pay_type == '1'">首付款</span>
              <span v-else>解冻款</span>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="用户昵称">
            <template slot-scope="scope">
              <span class="lblue point" @click="goRooterUser(scope.row)">{{ scope.row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="结算金额">
            <template slot-scope="scope">
              <span>{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pay_time" label="结算时间">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.pay_time, 'Y-m-d H:i') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order_no" label="订单号">
            <span class="lblue point" slot-scope="scope">
              <nuxt-link
                :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
              >{{ scope.row.order_no }}</nuxt-link>
            </span>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tab ==='withdrawal'">
        <div class="t-title">
          <span>选择子账户</span>
        </div>
        <div class="account-type">
          <el-radio-group v-model="accountType" size="small">
            <el-radio-button label="1">程序员客栈</el-radio-button>
            <!--            <el-radio-button label="2" disabled>天猫兼职</el-radio-button>-->
          </el-radio-group>
        </div>
        <div class="t-title">
          <span>项目结算记录</span>
        </div>
        <div class="title">
          <el-form label-width="250px" label-position="left">
            <el-form-item label="领薪宝账户可用余额：">
              <span
              >{{ withdrawalCountData.accountBalance.balance / 100 }}元</span>
            </el-form-item>
            <el-form-item
              label="待管理员确认付款金额（应充值金额）："
            >{{ withdrawalCountData.totalWaitConfirmTax / 100 }}元
            </el-form-item>
            <el-form-item
              label="待管理员确认付款金额（开发者实得）："
            >{{ withdrawalCountData.totalWaitConfirmDeveloperMayGet / 100 }}元
            </el-form-item>
            <el-form-item label="领薪宝正在支付中金额（应充值金额）：">{{ withdrawalCountData.totalPayingTax / 100 }}元</el-form-item>
            <el-form-item label="用户成功提现金额（税后）：">{{ withdrawalCountData.totalSuccess / 100 }}元</el-form-item>
            <el-form-item
              label="用户成功提现金额（应充值金额）："
            >{{ withdrawalCountData.totalSuccessTax / 100 }}元
            </el-form-item>
            <el-form-item
              label="用户成功提现金额（开发者实得）："
            >{{ withdrawalCountData.totalSuccessDeveloperMayGet / 100 }}元
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="downFinanceList" class="export-excel" type="primary">导出报表</el-button>
          <el-button @click="downWithdrawalList" style="display: none" class="export-excel" type="primary">导出提现报表</el-button>
        </div>
        <el-table border :data="withdrawalData">
          <el-table-column prop="order_no" label="订单号" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="lblue point">
                <nuxt-link
                  target="_blank"
                  :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                >{{ scope.row.order_no }}</nuxt-link>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="用户ID" width="66">
            <template slot-scope="scope">
              <span class="lblue point" @click="clickDev(scope.row.uid)">{{ scope.row.uid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="真实姓名" width="70">
            <template slot-scope="scope">
              <span
                class="lblue point"
                @click="clickDev(scope.row.uid)"
              >{{ scope.row.userInfo.realname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order_type_name" label="支付方式">
            <template slot-scope="scope">
              <span>{{ scope.row.order_type_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="original_rate" label="服务商税率">
            <template slot-scope="scope">
              <span>{{ scope.row.original_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="kaifabao_rate" label="领薪宝费率">
            <template slot-scope="scope">
              <span>{{ scope.row.kaifabao_rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="origin_amount" label="应充值金额" width="70"></el-table-column>
          <el-table-column prop="tax" label="综合扣税"></el-table-column>
          <el-table-column prop="real_amount" label="提现金额" width="70"></el-table-column>
          <el-table-column prop="true_amount" label="应到实得金额" width="70"></el-table-column>
          <el-table-column prop="after_amount" label="薪资余额（不含冻结）"></el-table-column>
          <el-table-column prop="account" label="到账账户" show-overflow-tooltip></el-table-column>
          <el-table-column label="提现时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.taken_at }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到账时间" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.paid_at }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="extra" label="系统备注" show-overflow-tooltip></el-table-column>
          <el-table-column label="内部提现状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">待确认</span>
              <span v-else-if="scope.row.status==2">支付中</span>
              <span v-else-if="scope.row.status==4">支付中</span>
              <span v-else-if="scope.row.status==8">支付成功</span>
              <span v-else-if="scope.row.status==16">支付失败</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1" @click="confirmPay(scope.row)">
                <el-button type="primary" size="mini">确认付款</el-button>
              </span>
              <span v-else-if="scope.row.status==16" @click="confirmPay(scope.row)">
                <el-button type="primary" size="mini">失败重试</el-button>
              </span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="外部备注" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.orderInfo.public_comment }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="tab ==='verify'">
        <div class="t-title">
          <span>发票审核列表</span>
        </div>
        <div class="t-head">
          <span>全部：{{ verifyCountData.totalNum }}</span>
          <span>审核通过：{{ verifyCountData.auditAdoptNum }}</span>
          <span>审核中：{{ verifyCountData.auditInNum }}</span>
          <span>审核失败：{{ verifyCountData.auditFailNum }}</span>
        </div>
        <el-table border :data="verifyData" style="width: 100%">
          <el-table-column label="用户ID" width="100">
            <template slot-scope="scope">
              <span class="lblue point" @click="clickDev(scope.row.uid)">{{ scope.row.uid }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="申请提现金额">
            <template slot-scope="scope">
              <span>{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="申请时间">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.create_time, 'Y-m-d H:i') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发票图片审核">
            <template slot-scope="scope">
              <span v-if="scope.row.picture_verify_status ==  '0'">待审核</span>
              <span v-else-if="scope.row.picture_verify_status ==  '1'">审核通过</span>
              <span v-else-if="scope.row.picture_verify_status ==  '2'">审核失败</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="纸质发票审核">
            <template slot-scope="scope">
              <span v-if="scope.row.paper_verify_status ==  '0'">待审核</span>
              <span v-else-if="scope.row.paper_verify_status ==  '1'">审核通过</span>
              <span v-else-if="scope.row.paper_verify_status ==  '2'">审核失败</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span class="lblue point">
                <nuxt-link target="_blank" :to="{path:'/main/invoice_audit?id='+scope.row.id}">去审核</nuxt-link>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="page" v-if="tab === 'salary' || tab === 'withdrawal' || tab === 'verify'">
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="pageInfo.total"
        @current-change="onPage"
      />
    </div>

    <el-dialog
      title="编辑配置"
      :visible.sync="basicFormVisible"
      :closeOnClickModal="false"
      :closeOnPressEscape="false"
    >
      <div>
        <quill-editor ref="myTextEditor" v-model="basicForm.content" :config="editorOption"></quill-editor>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="basicFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onBasicSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="扣税方式"
      :visible.sync="serviceFormVisible"
      width="60%"
      :closeOnClickModal="false"
      :closeOnPressEscape="false"
    >
      <el-form
        :model="serviceForm"
        :rules="serviceRules"
        ref="serviceForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="扣税方式" prop="config_key">
          <el-input v-model="serviceForm.config_key"></el-input>
        </el-form-item>
        <el-form-item label="服务商原始费率" prop="original_rate">
          <el-input
            min="1"
            max="100"
            minlength="1"
            maxlength="100"
            type="number"
            style="width: 50%"
            v-model="serviceForm.original_rate"
          ></el-input>
          %
        </el-form-item>
        <el-form-item label="领薪宝费率" prop="kaifabao_rate">
          <el-input
            type="number"
            min="1"
            max="100"
            minlength="1"
            maxlength="100"
            style="width: 50%"
            v-model="serviceForm.kaifabao_rate"
          ></el-input>
          %
        </el-form-item>
        <el-form-item label="服务协议" prop="content">
          <quill-editor
            v-model="serviceForm.content"
            ref="myTextEditor"
            class="editer"
            :options="editorOption"
            @ready="onEditorReady($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="serviceForm.status">
            <el-radio :label="1">支持</el-radio>
            <el-radio :label="0">不支持</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="serviceFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onServiceSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {quillEditor} from "vue-quill-editor";

export default {
  name: "kaifabao",
  components: {
    quillEditor,
  },
  data() {
    return {
      tab: "service",
      tabUrl: "",
      accountType: "1",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],
            [{header: 1}, {header: 2}], // custom button values
            [{list: "ordered"}, {list: "bullet"}],
            [{script: "sub"}, {script: "super"}], // superscript/subscript
            [{indent: "-1"}, {indent: "+1"}], // outdent/indent
            [{direction: "rtl"}], // text direction
            [{size: ["small", false, "large", "huge"]}], // custom dropdown
            [{header: [1, 2, 3, 4, 5, 6, false]}],
            [{font: []}],
            ["clean"], // remove formatting button
            ["link", "image"],
          ],
          imageResize: {},
        },
      },
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      serviceRules: {},
      basicFormVisible: false,
      serviceFormVisible: false,
      basicForm: {id: 0, content: ""},
      serviceForm: {id: 0, status: 1},
      basicConfigData: [],
      serviceData: [], //服务配置
      salaryData: [], //结薪订单
      withdrawalData: [], //提现订单
      verifyData: [], //发票审核
      serviceCountData: {}, //接薪头部统计
      withdrawalCountData: {accountBalance: {}}, //提现头部统计
      verifyCountData: {}, //发票审核头部统计
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const page = this.pageInfo.page;
      const size = this.pageInfo.size;
      const data = {
        page,
        size,
      };
      let res;
      switch (this.tab) {
        case "service":
          res = await this.$post("/api/admin/kaifabao/getConfigList");
          if (res && res.status === 1) {
            this.serviceData = res.data.buckleList || [];
            this.basicConfigData = res.data.basicList || [];
          }

          break;
        case "salary":
          res = await this.$post(
            "/api/admin/kaifabao/getKaifabaoOrderList",
            data
          );
          if (res && res.status === 1) {
            this.salaryData = res.data.list || [];
            this.serviceCountData.totalDraw = this.formatPrice(
              res.data.totalDraw
            );
            this.serviceCountData.totalWaitDraw = this.formatPrice(
              res.data.totalWaitDraw
            );
            this.serviceCountData.totalSuccessPay = this.formatPrice(
              res.data.totalSuccessPay
            );
            this.pageInfo.page = res.data.page * 1;
            this.pageInfo.total = res.data.total * 1;
          }
          break;
        case "withdrawal":
          res = await this.$post(
            "/api/admin/kaifabao/getKaifabaoSalaryList",
            data
          );
          if (res && res.status === 1) {
            this.withdrawalData = res.data.list || [];
            this.withdrawalCountData.accountBalance =
              res.data.accountBalance || {};
            this.withdrawalCountData.totalWaitConfirmTax =
              res.data.totalWaitConfirmTax || 0;
            this.withdrawalCountData.totalPayingTax =
              res.data.totalPayingTax || 0;
            this.withdrawalCountData.totalSuccessTax =
              res.data.totalSuccessTax || 0;
            this.withdrawalCountData.totalSuccess = res.data.totalSuccess || 0;
            this.withdrawalCountData.totalSuccessMayRecharge =
              res.data.totalSuccessMayRecharge || 0;
            this.withdrawalCountData.totalSuccessDeveloperMayGet =
              res.data.totalSuccessDeveloperMayGet || 0;
            this.withdrawalCountData.totalWaitConfirmMayRecharge =
              res.data.totalWaitConfirmMayRecharge || 0;
            this.withdrawalCountData.totalWaitConfirmDeveloperMayGet =
              res.data.totalWaitConfirmDeveloperMayGet || 0;
            this.pageInfo.page = res.data.page * 1;
            this.pageInfo.total = res.data.total * 1;
          }
          break;
        case "verify":
          res = await this.$post(
            "/api/admin/kaifabao/invoiceWithdrawalApplyList",
            data
          );
          if (res && res.status === 1) {
            this.verifyData = res.data.list || [];
            this.pageInfo.page = res.data.page * 1;
            this.pageInfo.total = res.data.total * 1;
            this.verifyCountData.totalNum = res.data.totalNum || 0;
            this.verifyCountData.auditAdoptNum = res.data.auditAdoptNum || 0;
            this.verifyCountData.auditInNum = res.data.auditInNum || 0;
            this.verifyCountData.auditFailNum = res.data.auditFailNum || 0;
            this.pageInfo.page = res.data.page * 1;
            this.pageInfo.total = res.data.total * 1;
          }
          break;
      }
    },
    onAddService() {
      this.serviceForm = {id: 0, status: 1};
      this.serviceFormVisible = true;
    },
    onServiceEdit(row) {
      this.serviceForm = row;
      this.serviceForm.content = row.value;
      this.serviceForm.status = row.status * 1;
      this.serviceFormVisible = true;
    },
    async onServiceSave() {
      let data = this.serviceForm;
      data.content = data.content.replace(/&nbsp;/gi, "");
      let res = await this.$post("/api/admin/kaifabao/saveBuckleConfig", data);
      if (res && res.status === 1) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.clear();
      }
    },
    onBasicEdit(row) {
      this.basicForm.id = row.id;
      this.basicForm.content = row.value;
      this.basicFormVisible = true;
    },
    async onBasicSave() {
      let data = this.basicForm;
      let res = await this.$post("/api/admin/kaifabao/editBasicConfig", data);
      if (res && res.status === 1) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.clear();
      }
    },
    onPage(val) {
      this.pageInfo.page = val;
      this.getList();
    },
    clear() {
      this.basicFormVisible = false;
      this.serviceFormVisible = false;
      this.serviceForm = {id: 0, status: 1};
      this.getList();
    },
    goTopic(topic) {
      console.log(topic);
      window.open(
        this.$store.state.domainConfig.jishuinUrl + "/p/" + topic.id + ".html"
      );
    },
    goRooterUser(row) {
      window.open(
        this.$store.state.domainConfig.siteUrl + "/rooter/user/" + row.uid
      );
    },
    // 点击开发者
    clickDev(uid) {
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
      );
    },
    formatPrice(price) {
      return price ? price / 100 : 0;
    },
    confirmPay(i) {
      this.rePay(i);
    },
    // 重新支付
    async rePay(i) {
      const res = await this.$post("/api/admin/kaifabao/redoSalaryDraw", {
        id: i.id,
      });
      if (res) {
        this.getList();
      }
    },
    onToUrl(){
      let la = this.tabUrl;
      let url = '';
      switch (la) {
        case "gongmao":
          url = '/main/gongmall';
          break;
        case "qingtuanbao":
          url = '/main/qingtuanbao';
          break;
      }
      if(url === '') return;
      this.$router.push({ path:url});
      // window.location.href = url;
    },
    projectLink(row) {
      const type = row.entity_type;
      if (type === "2") {
        window.open(
          this.$store.state.domainConfig.siteUrl +
          `/rooter/outsourceitem/${row.entity_id}`
        );
      } else if (type === "3") {
        window.open(
          this.$store.state.domainConfig.siteUrl +
          `/rooter/wagedetails?job_id=${row.entity_id}`
        );
      } else if (type === "9") {
        window.open(
          this.$store.state.domainConfig.siteUrl +
          `/rooter/cloudjobitem/${row.entity_id}`
        );
      } else {
        return false;
      }
    },
    onEditorReady(editor) {
    },
    async downFinanceList() {
      if (this.tab !== "withdrawal") {
        return false;
      }
      let url = window.location.host + "/api/admin/kaifabao/export";
      window.location.href = "https://" + url;
    },
    async downWithdrawalList() {
      if (this.tab !== "withdrawal") {
        return false;
      }
      let url = window.location.host + "/api/admin/kaifabao/exportWithdrawal";
      window.location.href = "https://" + url;
    },
    formatDate(time, format = "") {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return format == ""
        ? year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
        : year + "-" + month + "-" + date + " " + hour + ":" + minute;
    },
  },
};
</script>

<style>
.t-content {
  width: 98%;
  margin-top: 5px;
}

.t-title {
  font-size: 20px;
  font-weight: 500;
  margin: 10px 0 5px 0;
}

.account-type {
  margin: 10px;
}

.page {
  margin: 10px;
}

.title .el-form-item {
  margin-bottom: 0;
}

.t-head {
  margin-bottom: 10px;
}

.t-head span {
  margin-right: 40px;
}

.edit_container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.ql-editor {
  height: 200px;
}
  .left-title{
    font-size: 22px;
    font-weight: 500;
  }
</style>
