ssti-CollegeManage/src/components/MakerSpaceWord.vue

<template>
<div id="MakerSpaceWord">
    <div id="title">
        <div class="school">深圳技师学院</div>
        <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
        <div class="date">申请日期： xxxx年 xx月 xx日</div>
    </div>
    <div id="table">
        <div class="han">
          <div class="label">项目名称</div><div class="value">
            <el-input
              type="textarea"
              autosize
              resize="none"
              placeholder="请输入项目名称"
              v-model="wordData['projectName']">
            </el-input>
        </div>
          <div class="label">所在学院</div><div class="value">
            <el-select v-model="wordData['college']" style="width: 100%;" placeholder="请选择所在学院">
              <el-option
                v-for="item in DepartmentData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </div>
        </div>
        <div class="status">
          <div class="statusLabel">项目状态</div>
          <div class="ValueDescribe">
            <div class="statusHan">
              <div class="DescribeLabel">
                <el-radio v-model="wordData['state']" label="00a3aa2f-f51e-11ed-a3f6-509a4c5b67cf">已建设</el-radio>
            </div><div class="DescribeValue">指二级学院已获得政府或学校资助（例：设计学院、信通学院、珠宝学院），已有双创空间（创客实践室）场地、设备设施并已投入运营，需对空间环境优化、规章制度建设、小型设施设备添置、创客项目物料增补，需拓展创客项目培训、辅导，创客讲座、沙龙、论坛，创客路演、竞赛、集市及成果参评、参展等方面的工作而提出的资助申请。</div>
            </div>
            <div class="statusHan">
              <div class="DescribeLabel">
                <el-radio v-model="wordData['state']" label="04692ef6-f51e-11ed-a3f6-509a4c5b67cf">待建设</el-radio>
            </div><div class="DescribeValue">指二级学院拟立项开展学院特色创客空间建设项目，需进行项目前期调研论证、场馆规划、空间图纸设计、设备选型等方面的工作而进行的资助申请。</div>
            </div>
          </div>
        </div>
        <div class="han">
          <div class="label">项目起始时间</div><div class="value">
            <el-date-picker
              v-model="wordData['begin_at']"
              type="date"
              prefix-icon="none"
              placeholder="请选择项目开始时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
          <div class="label">计划完成时间</div><div class="value">
            <el-date-picker
              v-model="wordData['plannedEnd_at']"
              type="date"
              placeholder="请选择项目计划完成时间"
              prefix-icon="none"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </div>
        <div class="han">
          <div class="label">项目负责人</div><div class="value">
            <el-input
              type="textarea"
              autosize
              resize="none"
              placeholder="请输入项目负责人"
              v-model="wordData['pro_leader']">
            </el-input>
          </div>
          <div class="label">学院牵头领导</div><div class="value">
            <el-input
              type="textarea"
              autosize
              resize="none"
              placeholder="请输入学院牵头领导"
              v-model="wordData['lead_leader']">
            </el-input>
          </div>
        </div>
        <div class="han">
          <div class="label">项目组人数</div><div class="value">{{ wordData['teacher'].length+wordData['student'].length }}</div>
          <div class="label">参与教师人数</div><div class="value">{{wordData['teacher'].length}}</div>
          <div class="label">参与学生人数</div><div class="value">{{wordData['student'].length }}</div>
        </div>
        <div class="member">
          <div class="memberLabel">
            <span>项目组</span>
            <span>教师团队</span>
            <span>（团队3人以上，</span>
            <span>至少应包含1名教</span>
            <span>研室主任）</span>
          </div>
          <div class="memberTable" :style="wordData['teacher'].length<4?'border-bottom:solid 1px black':''">
            <div class="memberHan">
              <div class="memberValue">姓名</div>
              <div class="memberValue">专业</div>
              <div class="memberValue">职称</div>
              <div class="memberValue">学历</div>
              <div class="memberValue">所在教研室</div>
              <div class="memberValue">项目组角色分工</div>
              <div></div>
            </div>
            <div class="memberHan" v-for="(item,index) in wordData['teacher']" :key="index">
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="姓名"
                  v-model="item['name']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="专业"
                  v-model="item['speciality']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="职称"
                  v-model="item['title']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="学历"
                  v-model="item['education']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="教研室"
                  v-model="item['section']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="项目组角色分工"
                  v-model="item['work']">
                </el-input>
              </div>
              <div class="operate">
                <el-button v-if="wordData['teacher'].length!=1" @click="DelTeacher(index)" type="primary" size="mini">-</el-button>
                <el-button @click="addTeacher" v-if="wordData['teacher'].length==index+1" type="primary" size="mini">+</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="member">
          <div class="memberLabel">
            <span>项目组</span>
            <span>学生团队</span>
            <span>（团队5人以上，</span>
            <span>学生团队年级结构</span>
            <span>安排合理）</span>
          </div>
          <div class="memberTable" :style="wordData['student'].length<4?'border-bottom:solid 1px black':''">
            <div class="memberHan">
              <div class="memberValue">姓名</div>
              <div class="memberValue">班级</div>
              <div class="memberValue">年龄</div>
              <div class="memberValue">项目组角色分工</div>
              <div></div>
            </div>
            <div class="memberHan" v-for="(item,index) in wordData['student']" :key="index">
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="姓名"
                  v-model="item['name']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="班级"
                  resize="none"
                  v-model="item['class']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="年龄"
                  v-model="item['age']">
                </el-input>
              </div>
              <div class="memberValue">
                <el-input
                  type="textarea"
                  autosize
                  resize="none"
                  placeholder="项目组角色分工"
                  v-model="item['work']">
                </el-input>
              </div>
              <div class="operate">
                <el-button @click="DelStudent(index)" v-if="wordData['student'].length!=1"  type="primary" size="mini">-</el-button>
                <el-button @click="addStudent" v-if="wordData['student'].length==index+1" type="primary" size="mini">+</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>项目</span><span>建设</span><span>内容</span><span>及</span><span>目标</span><span>（说明项目建设内</span><span>容、拟解决的关键</span><span>问题、创新之处、</span><span>主要建设指标）</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>项目简介(200-300字)</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  show-word-limit
                  maxlength="300"
                  v-model="wordData['brief']">
                </el-input>
              </div>
              <div class="chaptersValue">
                <span>建设内容（空间优化/场馆规划方面拟解决的关键问题及主要建设指标）</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['Construction']">
                </el-input>
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>项目</span><span>建设</span><span>论证</span><span>报告</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>立项依据(说明本项目的目的、意义以及国内外高校现状、市场预测和发展趋势，预期达到的目标，研究的预期效果分析，成果受益面)</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['ProjectBasis']">
                </el-input>
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>预期</span><span>成果</span><span>(项目预期成果、</span><span>数量及形式，结题</span><span>时：须附项目研究</span><span>报告)</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>创客空间物理环境、制度建设及软件设施建设情况（环境优化/制度完善/设施改造）</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['development']">
                </el-input>
              </div>
              <div class="chaptersValue">
                <span>学生创客工作室建设情况（工作室数量及活动开展情况）</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['studio']">
                </el-input>
              </div>
              <div class="chaptersValue">
                <span>学生创客团队（人才）培养预期成果、数量</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['studentTeam']">
                </el-input>
              </div>
              <div class="chaptersValue">
                <span>学生创客活动组织实施情况</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['studentActivities']">
                </el-input>
              </div>
              <div class="chaptersValue">
                <span>学生创客团队孵化、转化创业项目情况</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['Transforming']">
                </el-input>
              </div>
          </div>
        </div>
        <div class="chapters">
          <div class="chaptersLabel">
            <span>立项</span>
            <span>基础</span>
            <span>及</span>
            <span>条件</span>
            <span>(说明已开展的相</span>
            <span>关研究及基础准备</span>
            <span>工作，已具备的设</span>
            <span>备场地条件和技术</span>
            <span>力量，尚缺少的条</span>
            <span>件和拟解决的途</span>
            <span>径)</span>
          </div>
          <div class="chaptersTable">
              <div class="chaptersValue">
                <span>基础条件（物理环境/设备设施/项目实施/活动开展/技术力量/社会资源）</span><br/>
                <el-input
                  type="textarea"
                  class="noCenter"
                  :autosize="{minRows: 6}"
                  resize="none"
                  v-model="wordData['condition']">
                </el-input>
              </div>
          </div>
        </div>

        <div class="fund">
          <div class="fundTitle">
            预算<br/>经费
          </div>
          <div class="fundTable">
            <div class="fundTotal">
              <div class="fundLabel">总经费</div>
              <div class="fundValue">{{wordData['fund']['device']+wordData['fund']['Material']+wordData['fund']['processing']+wordData['fund']['Collaboration']+wordData['fund']['APPRAISAL']+wordData['fund']['entery']+wordData['fund']['activities']+wordData['fund']['Transaction']}}元</div>
            </div>
            <div class="fundHeader">
              <div class="HeaderLabel">支出类别</div>
              <div class="HeaderLabel">支出项目</div>
              <div class="HeaderLabel">金额（元）</div>
              <div class="HeaderLabel">备注</div>
            </div>
            <div class="fundData">
              <div class="fundDataLabel">直接费用</div>
              <div class="fundDataHan">
                <div class="fundDataLie">
                  <div class="fundDataValue">小型仪器设备费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="小型仪器设备费"
                      v-model.number="wordData['fund']['device']"
                      @change="convertNumber('device',wordData['fund']['device'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">材料费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="材料费"
                      v-model.number="wordData['fund']['Material']"
                      @change="convertNumber('Material',wordData['fund']['Material'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">测试化验加工费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="测试化验加工费"
                      v-model.number="wordData['fund']['processing']"
                      @change="convertNumber('processing',wordData['fund']['processing'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">项目协作费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="项目协作费"
                      v-model.number="wordData['fund']['Collaboration']"
                      @change="convertNumber('Collaboration',wordData['fund']['Collaboration'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>按合同规定支付给协作单位的费用</span></div>
                </div>
               
              </div>
            </div>

            <div class="fundData">
              <div class="fundDataLabel">间接费用</div>
              <div class="fundDataHan">
                <div class="fundDataLie">
                  <div class="fundDataValue">项目成果鉴定费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="项目成果鉴定费"
                      v-model.number="wordData['fund']['APPRAISAL']"
                      @change="convertNumber('APPRAISAL',wordData['fund']['APPRAISAL'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>学术会务费、评审费、鉴定费、成果集制作费等费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">参展参赛费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="参展参赛费"
                      v-model.number="wordData['fund']['entery']"
                      @change="convertNumber('entery',wordData['fund']['entery'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">创客交流活动费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="创客交流活动费"
                      v-model.number="wordData['fund']['activities']"
                      @change="convertNumber('activities',wordData['fund']['activities'])"></el-input>
                  </div>
                  <div class="fundDataValue"><span>创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。</span></div>
                </div>

                <div class="fundDataLie">
                  <div class="fundDataValue">知识产权事务费</div>
                  <div class="fundDataValue">
                    <el-input
                      type="textarea"
                      autosize
                      resize="none"
                      placeholder="知识产权事务费"
                      v-model.number="wordData['fund']['Transaction']"
                      @change="convertNumber('Transaction',wordData['fund']['Transaction'])">
                    </el-input>
                  </div>
                  <div class="fundDataValue"><span>论文版面费、专利及其他知识产权事务等费用。</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="opinion">
          <div class="opinionLabel">所在学院/部门<br/> 意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

        <div class="opinion">
          <div class="opinionLabel">财务部门<br/>意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

        <div class="opinion">
          <div class="opinionLabel">创新创业学院<br/>审 核 意 见</div>
          <div class="opinionValue">
            <div class="opinionImport">
              <div class="opinionChapter">负责人签章：</div>
              <div class="opinionDate">年 月 日</div>
            </div>
          </div>
        </div>

      </div>
      <div class="notes">
        <span>备注：</span>
        <span>1.表格可顺延或另附页。</span>
        <span>2.项目申报需附相关佐证材料。</span>
      </div>
      <el-button @click="test">测试</el-button>
</div>
</template>
  
<script>
  export default {
    data() {
      return {
        wordData:{
          year:"",  //申请日期年
          month:"",   //申请日期月
          day:"",     //申请日期日
          ing:false, //待建设
          ed:false,  //已建设
          state:"",
          projectName:"",//项目名称
          college:"",//所在学院
          begin_at:"",//项目开始时间
          plannedEnd_at:"",//计划完成时间
          pro_leader:"",//项目负责人
          lead_leader:"",//学院牵头领导
          people:"",//项目组人数
          teacherNum:"",//参与教师人数
          studentNum:"",//参与学生人数
          teacher:[
              {name:"",speciality:"",title:"",education:"",section:"",work:""},
              {name:"",speciality:"",title:"",education:"",section:"",work:""},
              {name:"",speciality:"",title:"",education:"",section:"",work:""},
              {name:"",speciality:"",title:"",education:"",section:"",work:""},
              // {name:"",speciality:"",title:"",education:"",section:"",work:""},
          ],   //教师组//name：姓名  speciality：专业  title：职称 education：学历    section：所在教研室    work：项目组角色分工
          student:[
              {name:"",class:"",age:"",work:""},
              {name:"",class:"",age:"",work:""},
              {name:"",class:"",age:"",work:""},
              {name:"",class:"",age:"",work:""},
              // {name:"",class:"",age:"",work:""},
          ],   //学生组//name：姓名    class：班级 age：年龄   work：项目组任务分工
          brief:"",//项目简介
          Construction:"",//建设内容
          ProjectBasis:"",//立项依据
          development:"",//创客空间物理环境、制度建设及软件设施建设情况
          studio:"",//学生创客工作室建设情况
          studentTeam:"",//学生创客团队（人才）培养预期成果、数量
          studentActivities:"",//学生创客活动组织实施情况
          Transforming:"",//学生创客团队孵化、转化创业项目情况
          condition:"",//立 项基 础及条 件
          fund:{
            device:"",
            Material:"",
            processing:"",
            Collaboration:"",
            APPRAISAL:"",
            entery:"",
            activities:"",
            Transaction:"",
          },//预算经费
          //total：总经费     
          //小型仪器设备费：device        deviceRemarks
          //材料费：Material             MaterialRemarks
          //测试化验加工费：processing    processingRemarks
          //项目协作费：Collaboration     CollaborationRemarks
          //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
          //参展参赛费：entery            enteryRemarks
          //创客交流活动费：activities    activitiesRemarks
          //知识产权事务费：Transaction   TransactionRemarks
        },
        DepartmentData:[],
      };
    },
    methods: {
      getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
        this.ajax.get(this.$store.state.api+'/SelectAllDepartment',{
          uid:this.$store.state.userInfo.userid
        }).then(res=>{
          this.DepartmentData = res.data[0]
        },err=>{
          console.log(err);
        })
      },
      test(){
        console.log(this.wordData)
      },
      addTeacher(){
        this.wordData['teacher'].push({name:"",speciality:"",title:"",education:"",section:"",work:""});
      },
      DelTeacher(index){
        this.wordData['teacher'].splice(index,1)
      },
      addStudent(){
        this.wordData['student'].push({name:"",class:"",age:"",work:""});
      },
      DelStudent(index){
        this.wordData['student'].splice(index,1)
      },
      convertNumber(type,str){
        if(typeof str=='string'){
          this.wordData['fund'][type] = Number(str.replace(/\D/g,''));
        }
        
      }
    },
    mounted(){
      this.getProjectDepartmentData();
    }
  };
</script>
  
<style lang="less" scoped>
#MakerSpaceWord{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding:100px;
    box-sizing:border-box;
    #title{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        // margin-top: 40px;
        .school{
            font-size: 2.5em;
            font-weight: bold;
            letter-spacing: 20px;
        }
        .wordTitle{
            font-size: 2em;
            letter-spacing: .15em;
            margin-bottom:40px ;
        }
        .date{

            font-size: 1em;
            position: absolute;
            bottom: 0;
            right: 100px;
            font-weight: bold;
        }
    }
    #table{
    box-sizing: border-box;
    border: solid 1px black;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    .han{
      display: flex;
      height: auto;
      box-sizing: border-box;
      border-bottom:solid 1px black;
      .label{
        position: relative;
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-height: 50px;
        border-right: solid 1px black;
      }
      .value{
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-height: 50px;
        &:not(:nth-last-child(1)){
          border-right: solid 1px black;
        }
      }
      &:nth-child(5){
        .label{
          flex: 1;
        }
        .value{
          flex: 1;
        }
      }
    }
    .status{
      display: flex;
      height: auto;
      box-sizing: border-box;
      .statusLabel{
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .ValueDescribe{
        flex: 5;
        display: flex;
        flex-direction: column;
        .statusHan{
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;

          .DescribeLabel{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            // min-height: 200px;
            padding:40px 10px;
            border-right: solid 1px black;
          }
          &:nth-child(2){
            .DescribeLabel{
                min-height: 100px;
            }
          }
          .DescribeValue{
            flex: 5;
            box-sizing: border-box;
            padding: 15px;
          }
        }
      }
    }
    .member{
      display: flex;
      .memberLabel{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
        min-height: 200px;
      }
      .memberTable{
        flex: 5;
        display: flex;
        flex-direction: column;
        .memberHan{
          display: flex;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          position:relative;
          .memberValue{
            box-sizing: border-box;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            min-height: 45px;
            &:nth-last-child(2){
              border-right: none;
              flex: 3;
            }
          }
          .operate{
            right:-100px;
            width:100px;
            height:40px;
            display:flex;
            // justify-content:center;
            align-items:center;
            position:absolute;
            .el-button{
              max-width:10px;
              display:flex;
              justify-content:center;
              align-items:center;
              margin-left:10px;
            }
          }
        }
      }
    }
    .chapters{
      display: flex;
      .chaptersLabel{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 20px 0;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .chaptersTable{
        flex: 5;
        display: flex;
        flex-direction: column;
        .chaptersValue{
          flex: 1;
          min-height:200px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          padding: 5px;
          span{
            font-weight: bold;
          }
        }
      }
    }
    // .fund{
    //   display: flex;
    //   .fundTitle{
    //     flex: 1;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     border-right:solid 1px black ;
    //     border-bottom:solid 1px black ;
    //   }
    //   .fundTable{
    //     flex: 5;
    //     display: flex;
    //     flex-direction: column;
    //     .fundTotal{
    //       min-height: 80px;
    //       box-sizing: border-box;
    //       border-bottom: solid 1px black;
    //       font-weight: bold;
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;
    //       .fundLabel{
    //         flex: 1.5;
    //         box-sizing: border-box;
    //         border-right: solid 1px black;
    //       }
    //       .fundValue{
    //         flex: 7;
    //       }
    //       div{
    //         height: 100%;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //       }
    //     }
    //     .fundHeader{
    //       width: 100%;
    //       display: flex;
    //       min-height: 50px;
    //       box-sizing: border-box;
    //       border-bottom: solid 1px black;
    //       .HeaderLabel{
    //         flex: 2;
    //         box-sizing: border-box;
    //         border-right: solid 1px black;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //         &:nth-of-type(1){
    //           flex: 1.5;
    //         }
    //         &:nth-last-of-type(1){
    //           flex: 3;
    //           border:none;
    //         }
    //       }
    //     }
    //   }
    // }
    .fund{
      display: flex;
      .fundTitle{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .fundTable{
        flex: 5;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .fundTotal{
          height: 60px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
          }
          .fundLabel{
            flex: 1;
            box-sizing: border-box;
            border-right:solid 1px black;
          }
          .fundValue{
            flex: 4;
          }
        }
        .fundHeader{
          min-height: 40px;
          box-sizing: border-box;
          border-bottom: solid 1px black;
          display: flex;
          .HeaderLabel{
            flex: 1;
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            border-right: solid 1px black;
            &:nth-last-child(1){
              flex: 2;
              border: none;
            }
          }
        }
        .fundData{
          display: flex;
          .fundDataLabel{
            flex:1;
            box-sizing: border-box;
            border-right: solid 1px black;
            border-bottom: solid 1px black;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .fundDataHan{
            flex: 4;
            display: flex;
            flex-direction: column;
            .fundDataLie{
              display: flex;
              min-height: 40px;
              flex: 4;
              box-sizing: border-box;
              border-bottom: solid 1px black;
              .fundDataValue{
                flex: 1;
                min-height: 40px;
                display: flex;
                box-sizing: border-box;
                justify-content: center;
                align-items: center;
                border-right: solid 1px black;
                &:nth-last-child(1){
                  flex:2;
                  border: none;
                  justify-content: flex-start;
                  span{
                    padding: 10px 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    // .fundTable{
    //   tr{
    //     td{
    //       height: 50px;
    //     }
    //     &:nth-child(1){
    //       flex: 1;
    //     }
    //   }
    // }
    .opinion{
      display: flex;
      .opinionLabel{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        // padding: 3.5px;
        border-right: solid 1px black;
        border-bottom: solid 1px black;
      }
      .opinionValue{
        flex: 5;
        min-height: 200px;
        position: relative;
        box-sizing:border-box;
        border-bottom: solid 1px black;
        .opinionImport{
          display: flex;
          width: 30%;
          height:40%;
          flex-direction: column;
          position:absolute;
          bottom: 0px;
          right: 20px;
          justify-content: space-between;
          .opinionDate{
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
          }
        }
      }
    }
  }
  .notes{
    width: 100%;
    display: flex;
    flex-direction:column;
  }
  :deep(.el-input__inner){
    height: 100%;
    border-radius: 0;
    width: 100%;
    background: none;
    color: black;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: none;
    outline: none;
  }
  :deep(.el-textarea__inner){
    height: 100%;
    border-radius: 0;
    width: 100%;
    background: none;
    color: black;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: none;
    overflow: hidden;
  }
  .noCenter{
    :deep(.el-textarea__inner ){
      text-align:left;
    }
  }
  :deep(.el-date-editor){
    width: 100%;
    height: 100%;
  }
  // .InputDiv{
  //   width: 100%;
  //   height: 100%;
  //   word-break: break-all;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   box-sizing: border-box;
  //   padding: 10px;
  //   outline: none;
  //   &:focus{
  //     border:solid 1px #409eff ;
  //   }
  // }
}
</style>