<template>
  <div class="handling">
    <div class="step">
      <van-steps :active="active" active-icon="success" active-color="#EB4E3F">
        <van-step>申报</van-step>
        <van-step>项目初审</van-step>
        <van-step>窗口复审</van-step>
        <!-- <van-step>银行卡确认</van-step> -->
        <van-step>退税办理</van-step>
        <van-step>完成</van-step>
      </van-steps>
    </div>
    <div class="buttonList" v-if="state == 1 || state == 4">
      <van-button class="button" v-if="state == 4" @click="jump"
        >重新申报</van-button
      >
      <van-button class="button" v-if="state == 1" @click="downLoad"
        >下载委托书</van-button
      >
      <!-- <van-button class="button" v-if="state == 1" @click="bankSure">银行卡确认</van-button> -->
    </div>
    <div class="tab">
      <van-tabs v-model="active1" @click="init()" color="#EB4E3F">
        <van-tab title="审核意见"></van-tab>
        <van-tab title="申报信息"></van-tab>
      </van-tabs>
    </div>
    <div
      v-if="active1 == 0"
      :class="[
        'content',
        state == 1 ? 'content1' : state == 4 ? 'content1' : 'content2',
      ]"
    >
      <div class="card" v-if="reason && (reason[0] || reason[1] || reason[2])">
        <div class="title">
          <div class="icon"></div>
          <div class="name">部门初审</div>
        </div>
        <div class="bottom" v-if="reason[0]">
          <div class="smallTop">
            <van-tag type="success" size="medium" v-if="reason[0].state == 8"
              >已通过</van-tag
            >
            <van-tag type="danger" size="medium" v-if="reason[0].state == 9"
              >已拒绝</van-tag
            >
            <van-tag size="medium" v-if="reason[0].state == 0">待审批</van-tag>
            <div class="depart">{{ reason[0].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div :class="['idea', reason[0].state == 9 ? 'idea1' : 'idea2']">
            {{ reason[0].reason }}
          </div>
        </div>
        <div class="bottom" v-if="reason[1]">
          <div class="smallTop">
            <van-tag type="success" size="medium" v-if="reason[1].state == 8"
              >已通过</van-tag
            >
            <van-tag type="danger" size="medium" v-if="reason[1].state == 9"
              >已拒绝</van-tag
            >
            <van-tag size="medium" v-if="reason[1].state == 0">待审批</van-tag>
            <div class="depart">{{ reason[1].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div :class="['idea', reason[1].state == 9 ? 'idea1' : 'idea2']">
            {{ reason[1].reason }}
          </div>
        </div>
        <div class="bottom" v-if="reason[2]">
          <div class="smallTop">
            <van-tag type="success" size="medium" v-if="reason[2].state == 8"
              >已通过</van-tag
            >
            <van-tag type="danger" size="medium" v-if="reason[2].state == 9"
              >已拒绝</van-tag
            >
            <van-tag size="medium" v-if="reason[2].state == 0">待审批</van-tag>
            <div class="depart">{{ reason[2].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div :class="['idea', reason[2].state == 9 ? 'idea1' : 'idea2']">
            {{ reason[2].reason }}
          </div>
        </div>
      </div>
      <div
        class="card"
        v-if="reason1 && (reason1[0] || reason1[1] || reason1[2])"
      >
        <div class="title">
          <div class="icon"></div>
          <div class="name">复审结果</div>
        </div>
        <div class="bottom" v-if="reason1[0]">
          <div class="smallTop">
            <van-tag
              type="success"
              size="medium"
              v-if="reason1[0].state == 2 || reason1[0].state == 3"
              >已通过
            </van-tag>
            <van-tag type="danger" size="medium" v-if="reason1[0].state == 4"
              >已拒绝</van-tag
            >
            <div class="depart">{{ reason1[0].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div class="idea">{{ reason1[0].reason }}</div>
        </div>
        <div class="bottom" v-if="reason1[1]">
          <div class="smallTop">
            <van-tag
              type="success"
              size="medium"
              v-if="
                reason1[1].state == 2 ||
                  reason1[1].state == 3 ||
                  reason1[1].state == 6
              "
              >已通过
            </van-tag>
            <van-tag type="danger" size="medium" v-if="reason1[1].state == 4"
              >已拒绝</van-tag
            >
            <div class="depart">{{ reason1[1].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div class="idea">{{ reason1[1].reason }}</div>
        </div>
        <div class="bottom" v-if="reason1[2]">
          <div class="smallTop">
            <van-tag
              type="success"
              size="medium"
              v-if="
                reason1[2].state == 2 ||
                  reason1[2].state == 3 ||
                  reason1[2].state == 6
              "
              >已通过</van-tag
            >
            <van-tag type="danger" size="medium" v-if="reason1[2].state == 4"
              >已拒绝</van-tag
            >
            <div class="depart">{{ reason1[2].departmentName }}审核</div>
          </div>
          <div class="subtitle">审核意见：</div>
          <div class="idea">{{ reason1[2].reason }}</div>
        </div>
      </div>
      <div
        class="card"
        v-if="state == 0"
        style="font-size: 14px;text-align: center;margin: 0; color: #999;"
      >
        审核中，请耐心等待...
      </div>
    </div>
    <div
      v-if="active1 == 1"
      :class="[
        'content',
        state == 1 ? 'content1' : state == 4 ? 'content1' : 'content2',
      ]"
    >
      <div class="card1">
        <div class="top">
          <div class="icon"></div>
          <div class="name">申报人信息</div>
        </div>
        <div class="bottom">
          <van-cell-group>
            <van-field
              v-model="form.name"
              name="姓名"
              label="姓名"
              disabled
              clearable
              required
              placeholder="输入您的姓名"
            >
            </van-field>
            <van-field
              v-model="form.phone"
              name="手机号码"
              label="手机号码"
              disabled
              clearable
              required
              placeholder="输入您的手机号码"
            >
            </van-field>
            <van-field
              v-model="form.idCard"
              name="身份证号"
              label="身份证号"
              disabled
              clearable
              required
              placeholder="输入您的身份证号"
            >
            </van-field>
            <van-field
              v-model="form.userArea"
              name="辖市区"
              label="辖市区"
              disabled
              readonly
              clearable
              required
              placeholder="选择辖市区"
            >
            </van-field>
            <van-field
              v-model="form.address"
              name="详细地址"
              label="详细地址"
              disabled
              clearable
              required
              placeholder="输入详细地址"
            >
            </van-field>
            <van-field label="个人身份证(正、反)照" disabled required>
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="form.idimg"
                  max-count="2"
                />
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
      <div class="card1">
        <div class="top">
          <div class="icon"></div>
          <div class="name">银行卡</div>
        </div>
        <div class="bottom">
          <van-cell-group>
            <van-field
              v-model="form.bank"
              name="开户银行"
              label="开户银行"
              disabled
              clearable
              required
              placeholder="输入开户银行"
            >
            </van-field>
            <van-field
              v-model="form.bankCard"
              name="银行卡号"
              label="银行卡号"
              disabled
              clearable
              required
              placeholder="输入银行卡号"
            >
            </van-field>
            <van-field label="银行卡(正、反)照" disabled required>
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="form.bankimg"
                  max-count="2"
                />
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
      <div class="card1">
        <div class="top">
          <div class="icon"></div>
          <div class="name">不动产信息</div>
        </div>
        <div class="bottom">
          <van-cell-group>
            <van-field
              label="契税发票号码-1"
              disabled
              required
              v-if="form.deedBillCode"
            >
              <template #input>
                <div class="box_megic">
                  <div style="display: flex">
                    <div>NO.</div>
                    <van-field
                      v-model="form.deedBillCode"
                      placeholder="输入契税发票号码"
                      input-align="center"
                      disabled
                      type="digit"
                      :rules="[{ required: true, message: '' }]"
                      class="megic megic3"
                    >
                    </van-field>
                  </div>
                </div>
              </template>
            </van-field>
            <van-field
              label="契税发票号码-2"
              disabled
              required
              v-if="form.secondDeedBillCode"
            >
              <template #input>
                <div class="box_megic">
                  <div style="display: flex">
                    <div>NO.</div>
                    <van-field
                      v-model="form.secondDeedBillCode"
                      placeholder="输入契税发票号码"
                      input-align="center"
                      disabled
                      type="digit"
                      :rules="[{ required: true, message: '' }]"
                      class="megic megic3"
                    >
                    </van-field>
                  </div>
                </div>
              </template>
            </van-field>
            <van-field
              v-model="form.paymentDeedTaxAmount"
              name="缴纳契税金额(元)"
              label="缴纳契税金额(元)"
              disabled
              clearable
              required
              placeholder="输入缴纳契税金额(元)"
            >
            </van-field>
            <van-field
              v-model="form.square"
              name="房屋面积(㎡)"
              label="房屋面积(㎡)"
              disabled
              clearable
              required
              placeholder="输入房屋面积"
            >
            </van-field>
            <van-field
              v-model="form.realEstateArea"
              name="不动产权坐落辖市区"
              label="不动产权坐落辖市区"
              disabled
              readonly
              clearable
              required
              placeholder="选择辖市区"
            >
            </van-field>
            <van-field
              v-model="form.realEstateAddress"
              name="不动产权坐落地址"
              label="不动产权坐落地址"
              disabled
              clearable
              required
              placeholder="输入详细地址"
            >
            </van-field>
            <van-field
              v-model="form.netSignTime"
              name="网签时间"
              label="网签时间"
              disabled
              clearable
              required
              placeholder="输入网签时间"
            >
            </van-field>
            <van-field label="不动产权证号" disabled required>
              <template #input>
                <div class="box_megic">
                  <div style="display: flex">
                    <div>苏(</div>
                    <van-field
                      v-model="front"
                      placeholder="例:2021"
                      input-align="center"
                      disabled
                      type="digit"
                      :rules="[{ required: true, message: '' }]"
                      class="megic"
                    >
                    </van-field>
                    <div>)</div>
                  </div>
                  <div style="display: flex">
                    <div>镇江市不动产权第</div>
                    <van-field
                      v-model="after"
                      placeholder="例:31515"
                      input-align="center"
                      disabled
                      type="digit"
                      :rules="[{ required: true, message: '' }]"
                      class="megic megic2"
                    ></van-field>
                    <div>号</div>
                  </div>
                </div>
              </template>
            </van-field>
            <van-field label="房屋属性" required>
              <template #input>
                <van-radio-group
                  disabled
                  v-model="form.houseType"
                  direction="horizontal"
                >
                  <van-radio :name="1">商品房</van-radio>
                  <van-radio :name="2">二手房</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="不动产权证书" disabled required>
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="form.certificate"
                  max-count="1"
                />
              </template>
            </van-field>
            <van-field label="网签房屋买卖合同" disabled required>
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  multiple
                  v-model="form.contract"
                  max-count="3"
                />
              </template>
            </van-field>
            <van-field
              label="契税完税凭证-1"
              disabled
              required
              v-if="form.deedBillCode"
            >
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="form.voucher"
                  max-count="1"
                />
              </template>
            </van-field>
            <van-field
              label="契税完税凭证-2"
              disabled
              required
              v-if="form.secondDeedBillCode"
            >
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="form.voucher1"
                  max-count="1"
                />
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="show"
      title="银行卡信息确认"
      show-cancel-button
      @confirm="onConfirm"
    >
      <van-cell-group>
        <van-field
          v-model="form1.bank"
          name="开户银行"
          label="开户银行"
          clearable
          required
          placeholder="输入开户银行"
        >
        </van-field>
        <van-field
          v-model="form1.bankCard"
          name="银行卡号"
          label="银行卡号"
          type="digit"
          clearable
          required
          placeholder="输入银行卡号"
        >
        </van-field>
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Button,
  Tab,
  Tabs,
  Step,
  Steps,
  Tag,
  Dialog,
  CellGroup,
  Field,
  Uploader,
  RadioGroup,
  Radio,
} from "vant";
import {
  queryReviewerDeedTaxRecord,
  queryDeedTaxRecord,
  queryDeedTaxInfoByCode,
  updateDeedTaxState,
  queryUserApplyForRecord,
  queryApplyingDeedTaxInfo,
  // idCardVerification
} from "@/api/deedtax.js";
// import { decryptByDES } from "@/utils/utils";

Vue.use(Button)
  .use(Tab)
  .use(Tabs)
  .use(Step)
  .use(Steps)
  .use(Tag)
  .use(Dialog)
  .use(CellGroup)
  .use(Field)
  .use(Uploader)
  .use(Radio)
  .use(RadioGroup);
export default {
  data() {
    return {
      active: 1,
      state: null,
      active1: 0,
      show: false,
      form1: {
        bank: "",
        bankCard: "",
      },
      form: {
        name: "",
        phone: "",
        idCard: "",
        userArea: "",
        address: "",
        idimg: [], //身份证照片
        bank: "",
        bankCard: "",
        bankimg: [], //银行卡照片
        deedBillCode: "",
        secondDeedBillCode: "",
        paymentDeedTaxAmount: "",
        square: "",
        realEstateArea: "",
        netSignTime: "",
        realEstateAddress: "",
        houseType: null,
        certificate: [], //不动产证书
        contract: [], //房屋买卖合同
        voucher: [], //契税完税凭证
        voucher1: [],
      },
      reason: [],
      reason1: [],
      front: "",
      after: "",
      code: "",
      userInfo: {},
      url: "",
    };
  },
  methods: {
    bankSure() {
      this.show = true;
    },
    onConfirm() {
      console.log(this.form1);
      Dialog.confirm({
        title: "提交",
        message: "确认提交吗？",
      }).then(() => {
        console.log(111);
        let params = {
          bank: this.form1.bank,
          bankCard: this.form1.bankCard,
          code: this.code,
          name: this.userInfo.realName ? this.userInfo.realName : "孙辉",
          reason: "用户已完成卡号确认",
          state: 3,
        };
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "提交中...",
        });
        updateDeedTaxState(params)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.init();
              this.$toast.clear();
              this.$toast("确认成功");
            }
          })
          .catch(() => {
            this.$toast.clear();
          });
      });
    },
    downLoad() {
      // alert(JSON.stringify(this.url))
      // this.url = 'http://81.69.44.115:9000/img/examFile/deed-text1654740205991'
      // window.location.href = this.url
      if (window.android !== undefined) {
        this.url =
          "https://www.smart-zj.cn:55901/image/uploadFile/android-weituoshu";
        console.log(this.url);
        window.android.downLoadFile(this.url);
      } else {
        this.url =
          "https://www.smart-zj.cn:55901/imagems/a36ebf95-f580-45d3-82a2-5f0754a12749.doc";
        window.webkit &&
          window.webkit.messageHandlers.downLoadFile.postMessage(
            `${this.url}|showNav`
          );
      }
    },
    init() {
      let params = {
        code: this.code,
      };
      queryReviewerDeedTaxRecord(params).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.reason = res.data;
          queryDeedTaxRecord(params).then((res) => {
            // console.log(res)
            if (res.code == 200) {
              this.reason1 = res.data;
              queryDeedTaxInfoByCode(params).then((res) => {
                console.log(res);
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                  this.state = res.data.state;
                  switch (res.data.state) {
                    case 0:
                      this.active = 1;
                      break;
                    case 1:
                      this.active = 2;
                      break;
                    case 2:
                      this.active = 3;
                      break;
                    case 3:
                      this.active = 4;
                      break;
                    case 4:
                      this.active = -1;
                      break;
                    case 6:
                      this.active = 5;
                      break;
                    default:
                      break;
                  }
                  this.form1.bank = res.data.bank;
                  this.form1.bankCard = res.data.bankCard;
                  this.form.name = res.data.name;
                  this.form.phone = res.data.phone;
                  this.form.idCard = res.data.idCard;
                  this.form.userArea = res.data.userArea;
                  this.form.address = res.data.address;
                  this.form.bank = res.data.bank;
                  this.form.bankCard = res.data.bankCard;
                  this.form.deedBillCode = res.data.deedBillCode
                    ? res.data.deedBillCode
                    : "";
                  this.form.secondDeedBillCode = res.data.secondDeedBillCode
                    ? res.data.secondDeedBillCode
                    : "";
                  this.form.paymentDeedTaxAmount =
                    res.data.paymentDeedTaxAmount;
                  this.form.square = res.data.square;
                  this.form.realEstateArea = res.data.realEstateArea;
                  this.form.realEstateAddress = res.data.realEstateAddress;
                  this.form.netSignTime = res.data.netSignTime;
                  this.form.houseType = res.data.houseType;
                  this.front = res.data.realEstateCard.substr(
                    res.data.realEstateCard.indexOf("("),
                    res.data.realEstateCard.indexOf(")")
                  );
                  this.after = res.data.realEstateCard.substr(
                    res.data.realEstateCard.indexOf("第"),
                    res.data.realEstateCard.indexOf("号")
                  );
                  this.form.idimg = [];
                  this.form.bankimg = [];
                  this.form.contract = [];
                  this.form.certificate = [];
                  this.form.voucher = [];
                  this.form.voucher1 = [];
                  res.data.pictures.forEach((item) => {
                    if (item.pictureType == 1) {
                      this.form.idimg.push({ url: item.picture });
                    } else if (item.pictureType == 2) {
                      this.form.contract.push({ url: item.picture });
                    } else if (item.pictureType == 3) {
                      this.form.certificate.push({ url: item.picture });
                    } else if (item.pictureType == 4) {
                      this.form.voucher.push({ url: item.picture });
                    } else if (item.pictureType == 5) {
                      this.form.bankimg.push({ url: item.picture });
                    } else if (item.pictureType == 6) {
                      this.form.voucher1.push({ url: item.picture });
                    }
                  });
                }
              });
            }
          });
        }
      });
    },
    jump() {
      // idCardVerification({idCard: this.userInfo.idCardNo}).then((res) => {
        // if (res.data) {
          // let params = {
          //   idCard: decryptByDES(this.userInfo.idCardNo, "MnuYbhGv"),
          // };
          queryUserApplyForRecord({idCard: this.userInfo.idCardNo}).then((res) => {
            console.log(res);
            // alert(JSON.stringify(res))
            if (res.code == 200) {
              if (res.data.state == 0) {
                this.$router.replace({
                  name: "DeedtaxDeclare",
                  query: { code: this.code },
                });
              } else if (res.data.state == 2) {
                Dialog.confirm({
                  confirmButtonText: "申报",
                  message: res.data.msg || "您已享受契税补贴，是否再次申报?",
                }).then(() => {
                  this.$router.push({ name: "DeedtaxDeclare" });
                });
              } else if (res.data.state == 1) {
                Dialog.confirm({
                  confirmButtonText: "查看",
                  message: res.data.msg || "您的申请已提交",
                }).then(() => {
                  queryApplyingDeedTaxInfo({
                    code: "",
                    idCard: this.userInfo.idCardNo,
                    name: "",
                    pageNum: 1,
                    pageSize: 10,
                    state: 0,
                    // userId: "",
                  }).then((res) => {
                    // alert(JSON.stringify(res))
                    console.log(res);
                    // this.$router.push({ name: 'DeedtaxHandling', query: { code: res.data.code } })
                    this.code = res.data.code;
                    this.init();
                  });
                });
              } else if (res.data.state == 11) {
                console.log(111);
                Dialog.confirm({
                  confirmButtonText: "查看",
                  message: res.data.msg || "您的申请已提交",
                }).then(() => {
                  this.$router.push({
                    name: "PolicyReportTwo",
                    query: { code: res.data.code },
                  });
                });
              }
            }
          });
        // } 
        // else {
        //   Dialog.confirm({
        //     title: '提示',
        //     messageAlign: 'left',
        //     message: "经系统查询，您已享受过相关政策补贴 ，不能再次申报契税补贴政策。如有异议请联系市财政窗口，地址：镇江市政务服务中心（冠城路8号工人大厦）二楼市财政局窗口，联系电话：0511-89881850",
        //   })
        // }
      // })
      // this.$router.replace({ name: 'DeedtaxDeclare', query: { code: this.code } })
    },
    // 初始化获取userInfo
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.userInfo = JSON.parse(sessionStorage.getItem("ZJCD-UserInfo"));
        console.log(this.userInfo);
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    },
  },
  created() {
    this.code = this.$route.query.code;
    console.log(this.code);
    this.JSBgetUserInfo();
    this.init();
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.box_megic {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .megic {
        width: 100px;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #888;
    }
    .megic2 {
        width: 150px;
    }
    .megic3 {
        width: 300px;
    }
}
.handling{
    display: flex;
    flex-direction: column;
    align-items: center;
    .step{
        margin-top: 1px;
        width 100%;
    }
    .buttonList{
        width 100%;
        padding: 20px 40px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        background #fff;
        .button{
            width 80%;
            height: 88px;
            background: linear-gradient(311deg, #EB4E3F 0%, #FF8138 100%);
            box-shadow: 0px 15px 18px -2px rgba(235, 78, 63, 0.2);
            border-radius: 49px;
            color: #fff;
        }
    }
    .tab{
        width 100%;
    }
    .content1{
      max-height: 76.5vh;
    }
    .content2{
      max-height: 85vh;
    }
    .content{
        background #fff;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        width 100%;
        overflow: scroll;

        margin-top: 20px;
        .card{
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
            width 100%;
            .title{
                display: flex;
                align-items: center;
                .icon{
                    width: 5px;
                    height: 30px;
                    background: #EB4E3F;
                    border-radius: 2px;
                }
                .name{
                    font-size: 30px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    margin-left: 15px;
                }
            }
            .bottom{
                display: flex;
                flex-direction: column;
                background: #FFFFFF;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 4px;
                margin-top: 20px;
                padding: 20px;
                box-sizing: border-box;
                .smallTop{
                    display: flex;
                    align-items: center;
                    .depart{
                        font-size: 30px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                        margin-left: 20px;
                    }
                }
                .subtitle{
                    font-size: 28px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                    margin: 20px 0 15px 0;
                }
                .idea{
                    font-size: 28px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    line-height: 1.5;
                    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                    text-indent:56px
                }
                idea1{
                    color: #EB4E3F;
                }
                idea2{
                    color: #333333;
                }
            }
        }
        .card1{
            display: flex;
            flex-direction: column;
            width 100%;
            background: #FFFFFF;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            margin-bottom: 20px;
            padding: 20px;
            box-sizing: border-box;

            .top{
                display: flex;
                align-items: center;
                margin: 15px 0;
                .icon{
                    width: 4px;
                    height: 24px;
                    background: #EB4E3F;
                    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                    border-radius: 2px;
                }
                .name{
                    font-size: 28px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                    margin-left: 15px;
                }
            }
        }
    }
}
</style>
