MakerSpaceWordShow.vue 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885
  1. <template>
  2. <div id="MakerSpaceWord">
  3. <div id="title">
  4. <div class="school">深圳技师学院</div>
  5. <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
  6. <div class="date">申请日期: {{ wordData['applicationDate'] }}</div>
  7. </div>
  8. <div id="table">
  9. <div class="han" id="one">
  10. <div class="label">项目名称</div><div class="value" v-text="wordData['projectName']"></div>
  11. <div class="label">所在学院</div><div class="value" v-text="wordData['college']"></div>
  12. </div>
  13. <div class="status" id="two">
  14. <div class="statusLabel">项目状态</div>
  15. <div class="ValueDescribe">
  16. <div class="statusHan">
  17. <div class="DescribeLabel">
  18. <span v-if="wordData['state']=='已建设'">√</span><span v-else>□</span>已建设
  19. </div><div class="DescribeValue">指二级学院已获得政府或学校资助(例:设计学院、信通学院、珠宝学院),已有双创空间(创客实践室)场地、设备设施并已投入运营,需对空间环境优化、规章制度建设、小型设施设备添置、创客项目物料增补,需拓展创客项目培训、辅导,创客讲座、沙龙、论坛,创客路演、竞赛、集市及成果参评、参展等方面的工作而提出的资助申请。</div>
  20. </div>
  21. <div class="statusHan">
  22. <div class="DescribeLabel">
  23. <span v-if="wordData['state']=='待建设'">√</span><span v-else>□</span>待建设
  24. </div><div class="DescribeValue">指二级学院拟立项开展学院特色创客空间建设项目,需进行项目前期调研论证、场馆规划、空间图纸设计、设备选型等方面的工作而进行的资助申请。</div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="han" id="three">
  29. <div class="label">项目起始时间</div><div class="value" v-text="wordData['begin_at']"></div>
  30. <div class="label">计划完成时间</div><div class="value" v-text="wordData['plannedEnd_at']"></div>
  31. </div>
  32. <div class="han" id="four">
  33. <div class="label">项目负责人</div><div class="value" v-text="wordData['pro_leader']"></div>
  34. <div class="label">学院牵头领导</div><div class="value" v-text="wordData['lead_leader']"></div>
  35. </div>
  36. <div class="han">
  37. <div class="label">项目组人数</div><div class="value">{{ wordData['teacher'].length+wordData['student'].length }}</div>
  38. <div class="label">参与教师人数</div><div class="value">{{wordData['teacher'].length}}</div>
  39. <div class="label">参与学生人数</div><div class="value">{{wordData['student'].length }}</div>
  40. </div>
  41. <div class="member" id="five">
  42. <div class="memberLabel">
  43. <span class="fontBold">项目组</span>
  44. <span class="fontBold">教师团队</span>
  45. <span>(团队3人以上,</span>
  46. <span>至少应包含1名教</span>
  47. <span>研室主任)</span>
  48. </div>
  49. <div class="memberTable" :style="wordData['teacher'].length<4?'border-bottom:solid 1px black':''">
  50. <div class="memberHan">
  51. <div class="memberValue">姓名</div>
  52. <div class="memberValue">专业</div>
  53. <div class="memberValue">职称</div>
  54. <div class="memberValue">学历</div>
  55. <div class="memberValue">所在教研室</div>
  56. <div class="memberValue">项目组角色分工</div>
  57. </div>
  58. <div class="memberHan" v-for="(item,index) in wordData['teacher']" :key="index">
  59. <div class="memberValue" v-text="item['name']"></div>
  60. <div class="memberValue" v-text="item['speciality']"></div>
  61. <div class="memberValue" v-text="item['title']"></div>
  62. <div class="memberValue" v-text="item['education']"></div>
  63. <div class="memberValue" v-text="item['section']"></div>
  64. <div class="memberValue" v-text="item['work']"></div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="member" id="six">
  69. <div class="memberLabel">
  70. <span class="fontBold">项目组</span>
  71. <span class="fontBold">学生团队</span>
  72. <span>(团队5人以上,</span>
  73. <span>学生团队年级结构</span>
  74. <span>安排合理)</span>
  75. </div>
  76. <div class="memberTable" :style="wordData['student'].length<4?'border-bottom:solid 1px black':''">
  77. <div class="memberHan">
  78. <div class="memberValue">姓名</div>
  79. <div class="memberValue">班级</div>
  80. <div class="memberValue">年龄</div>
  81. <div class="memberValue">项目组角色分工</div>
  82. </div>
  83. <div class="memberHan" v-for="(item,index) in wordData['student']" :key="index">
  84. <div class="memberValue" v-text="item['name']"></div>
  85. <div class="memberValue" v-text="item['class']"></div>
  86. <div class="memberValue" v-text="item['age']"></div>
  87. <div class="memberValue" v-text="item['work']"></div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="chapters">
  92. <div class="chaptersLabel">
  93. <span class="fontBold">项目</span>
  94. <span class="fontBold">建设</span>
  95. <span class="fontBold">内容</span>
  96. <span class="fontBold">及</span>
  97. <span class="fontBold">目标</span>
  98. <span>(说明项目建设内</span><span>容、拟解决的关键</span><span>问题、创新之处、</span><span>主要建设指标)</span>
  99. </div>
  100. <div class="chaptersTable">
  101. <div class="chaptersValue" id="seven">
  102. <span>项目简介(200-300字)</span><br/>
  103. <p v-text="wordData['brief']"></p>
  104. <!-- <el-input
  105. type="textarea"
  106. class="noCenter"
  107. :autosize="{minRows: 6}"
  108. resize="none"
  109. show-word-limit
  110. maxlength="300"
  111. v-model="wordData['brief']">
  112. </el-input> -->
  113. </div>
  114. <div class="chaptersValue" id="eight">
  115. <span>建设内容(空间优化/场馆规划方面拟解决的关键问题及主要建设指标)</span><br/>
  116. <p v-text="wordData['Construction']"></p>
  117. <!-- <el-input
  118. type="textarea"
  119. class="noCenter"
  120. :autosize="{minRows: 6}"
  121. resize="none"
  122. v-model="wordData['Construction']">
  123. </el-input> -->
  124. </div>
  125. </div>
  126. </div>
  127. <div class="chapters">
  128. <div class="chaptersLabel fontBold">
  129. <span>项目</span>
  130. <span>建设</span>
  131. <span>论证</span>
  132. <span>报告</span>
  133. </div>
  134. <div class="chaptersTable">
  135. <div class="chaptersValue" id="nine">
  136. <span>立项依据(说明本项目的目的、意义以及国内外高校现状、市场预测和发展趋势,预期达到的目标,研究的预期效果分析,成果受益面)</span><br/>
  137. <p v-text="wordData['ProjectBasis']"></p>
  138. <!-- <el-input
  139. type="textarea"
  140. class="noCenter"
  141. :autosize="{minRows: 6}"
  142. resize="none"
  143. v-model="wordData['ProjectBasis']">
  144. </el-input> -->
  145. </div>
  146. </div>
  147. </div>
  148. <div class="chapters">
  149. <div class="chaptersLabel">
  150. <span class="fontBold">预期</span>
  151. <span class="fontBold">成果</span>
  152. <span>(项目预期成果、</span><span>数量及形式,结题</span><span>时:须附项目研究</span><span>报告)</span>
  153. </div>
  154. <div class="chaptersTable">
  155. <div class="chaptersValue" id="ten">
  156. <span>创客空间物理环境、制度建设及软件设施建设情况(环境优化/制度完善/设施改造)</span><br/>
  157. <p v-text="wordData['development']"></p>
  158. <!-- <el-input
  159. type="textarea"
  160. class="noCenter"
  161. :autosize="{minRows: 6}"
  162. resize="none"
  163. v-model="wordData['development']">
  164. </el-input> -->
  165. </div>
  166. <div class="chaptersValue" id="eleven">
  167. <span>学生创客工作室建设情况(工作室数量及活动开展情况)</span><br/>
  168. <p v-text="wordData['studio']"></p>
  169. <!-- <el-input
  170. type="textarea"
  171. class="noCenter"
  172. :autosize="{minRows: 6}"
  173. resize="none"
  174. v-model="wordData['studio']">
  175. </el-input> -->
  176. </div>
  177. <div class="chaptersValue" id="twelve">
  178. <span>学生创客团队(人才)培养预期成果、数量</span><br/>
  179. <p v-text="wordData['studentTeam']"></p>
  180. <!-- <el-input
  181. type="textarea"
  182. class="noCenter"
  183. :autosize="{minRows: 6}"
  184. resize="none"
  185. v-model="wordData['studentTeam']">
  186. </el-input> -->
  187. </div>
  188. <div class="chaptersValue" id="thirteen">
  189. <span>学生创客活动组织实施情况</span><br/>
  190. <p v-text="wordData['studentActivities']"></p>
  191. <!-- <el-input
  192. type="textarea"
  193. class="noCenter"
  194. :autosize="{minRows: 6}"
  195. resize="none"
  196. v-model="wordData['studentActivities']">
  197. </el-input> -->
  198. </div>
  199. <div class="chaptersValue" id="fourteen">
  200. <span>学生创客团队孵化、转化创业项目情况</span><br/>
  201. <p v-text="wordData['Transforming']"></p>
  202. </div>
  203. </div>
  204. </div>
  205. <div class="chapters">
  206. <div class="chaptersLabel">
  207. <span class="fontBold">立项</span>
  208. <span class="fontBold">基础</span>
  209. <span class="fontBold">及</span>
  210. <span class="fontBold">条件</span>
  211. <span>(说明已开展的相</span>
  212. <span>关研究及基础准备</span>
  213. <span>工作,已具备的设</span>
  214. <span>备场地条件和技术</span>
  215. <span>力量,尚缺少的条</span>
  216. <span>件和拟解决的途</span>
  217. <span>径)</span>
  218. </div>
  219. <div class="chaptersTable">
  220. <div class="chaptersValue" id="fifteen">
  221. <span>基础条件(物理环境/设备设施/项目实施/活动开展/技术力量/社会资源)</span><br/>
  222. <p v-text="wordData['condition']"></p>
  223. <!-- <el-input
  224. type="textarea"
  225. class="noCenter"
  226. :autosize="{minRows: 6}"
  227. resize="none"
  228. v-model="wordData['condition']">
  229. </el-input> -->
  230. </div>
  231. </div>
  232. </div>
  233. <div class="fund">
  234. <div class="fundTitle">
  235. 预算<br/>经费
  236. </div>
  237. <div class="fundTable">
  238. <div class="fundTotal">
  239. <div class="fundLabel">总经费</div>
  240. <div class="fundValue">{{Number(wordData['fund']['device'])+Number(wordData['fund']['Material'])+Number(wordData['fund']['processing'])+Number(wordData['fund']['Collaboration'])+Number(wordData['fund']['APPRAISAL'])+Number(wordData['fund']['entery'])+Number(wordData['fund']['activities'])+Number(wordData['fund']['Transaction'])}}元</div>
  241. </div>
  242. <div class="fundHeader">
  243. <div class="HeaderLabel">支出类别</div>
  244. <div class="HeaderLabel">支出项目</div>
  245. <div class="HeaderLabel">金额(元)</div>
  246. <div class="HeaderLabel">备注</div>
  247. </div>
  248. <div class="fundData">
  249. <div class="fundDataLabel">直接费用</div>
  250. <div class="fundDataHan">
  251. <div class="fundDataLie">
  252. <div class="fundDataValue">小型仪器设备费</div>
  253. <div class="fundDataValue" v-text="wordData['fund']['device']">
  254. <!-- <el-input
  255. type="textarea"
  256. autosize
  257. resize="none"
  258. placeholder="小型仪器设备费"
  259. v-model.number="wordData['fund']['device']"
  260. @change="convertNumber('device',wordData['fund']['device'])"></el-input> -->
  261. </div>
  262. <div class="fundDataValue"><span>项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。</span></div>
  263. </div>
  264. <div class="fundDataLie">
  265. <div class="fundDataValue">材料费</div>
  266. <div class="fundDataValue" v-text="wordData['fund']['Material']">
  267. <!-- <el-input
  268. type="textarea"
  269. autosize
  270. resize="none"
  271. placeholder="材料费"
  272. v-model.number="wordData['fund']['Material']"
  273. @change="convertNumber('Material',wordData['fund']['Material'])"></el-input> -->
  274. </div>
  275. <div class="fundDataValue"><span>项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。</span></div>
  276. </div>
  277. <div class="fundDataLie">
  278. <div class="fundDataValue">测试化验加工费</div>
  279. <div class="fundDataValue" v-text="wordData['fund']['processing']">
  280. <!-- <el-input
  281. type="textarea"
  282. autosize
  283. resize="none"
  284. placeholder="测试化验加工费"
  285. v-model.number="wordData['fund']['processing']"
  286. @change="convertNumber('processing',wordData['fund']['processing'])"></el-input> -->
  287. </div>
  288. <div class="fundDataValue"><span>项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。</span></div>
  289. </div>
  290. <div class="fundDataLie">
  291. <div class="fundDataValue">项目协作费</div>
  292. <div class="fundDataValue" v-text="wordData['fund']['Collaboration']">
  293. <!-- <el-input
  294. type="textarea"
  295. autosize
  296. resize="none"
  297. placeholder="项目协作费"
  298. v-model.number="wordData['fund']['Collaboration']"
  299. @change="convertNumber('Collaboration',wordData['fund']['Collaboration'])"></el-input> -->
  300. </div>
  301. <div class="fundDataValue"><span>按合同规定支付给协作单位的费用</span></div>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="fundData">
  306. <div class="fundDataLabel">间接费用</div>
  307. <div class="fundDataHan">
  308. <div class="fundDataLie">
  309. <div class="fundDataValue">项目成果鉴定费</div>
  310. <div class="fundDataValue" v-text="wordData['fund']['APPRAISAL']">
  311. <!-- <el-input
  312. type="textarea"
  313. autosize
  314. resize="none"
  315. placeholder="项目成果鉴定费"
  316. v-model.number="wordData['fund']['APPRAISAL']"
  317. @change="convertNumber('APPRAISAL',wordData['fund']['APPRAISAL'])"></el-input> -->
  318. </div>
  319. <div class="fundDataValue"><span>学术会务费、评审费、鉴定费、成果集制作费等费用。</span></div>
  320. </div>
  321. <div class="fundDataLie">
  322. <div class="fundDataValue">参展参赛费</div>
  323. <div class="fundDataValue" v-text="wordData['fund']['entery']">
  324. <!-- <el-input
  325. type="textarea"
  326. autosize
  327. resize="none"
  328. placeholder="参展参赛费"
  329. v-model.number="wordData['fund']['entery']"
  330. @change="convertNumber('entery',wordData['fund']['entery'])"></el-input> -->
  331. </div>
  332. <div class="fundDataValue"><span>参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。</span></div>
  333. </div>
  334. <div class="fundDataLie">
  335. <div class="fundDataValue">创客交流活动费</div>
  336. <div class="fundDataValue" v-text="wordData['fund']['activities']">
  337. <!-- <el-input
  338. type="textarea"
  339. autosize
  340. resize="none"
  341. placeholder="创客交流活动费"
  342. v-model.number="wordData['fund']['activities']"
  343. @change="convertNumber('activities',wordData['fund']['activities'])"></el-input> -->
  344. </div>
  345. <div class="fundDataValue"><span>创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。</span></div>
  346. </div>
  347. <div class="fundDataLie">
  348. <div class="fundDataValue">知识产权事务费</div>
  349. <div class="fundDataValue" v-text="wordData['fund']['Transaction']">
  350. <!-- <el-input
  351. type="textarea"
  352. autosize
  353. resize="none"
  354. placeholder="知识产权事务费"
  355. v-model.number="wordData['fund']['Transaction']"
  356. @change="convertNumber('Transaction',wordData['fund']['Transaction'])">
  357. </el-input> -->
  358. </div>
  359. <div class="fundDataValue"><span>论文版面费、专利及其他知识产权事务等费用。</span></div>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="opinion">
  366. <div class="opinionLabel">所在学院/部门<br/> 意 见</div>
  367. <div class="opinionValue">
  368. <div class="opinionImport">
  369. <div class="opinionChapter">负责人签章:</div>
  370. <div class="opinionDate">年 月 日</div>
  371. </div>
  372. </div>
  373. </div>
  374. <div class="opinion">
  375. <div class="opinionLabel">财务部门<br/>意 见</div>
  376. <div class="opinionValue">
  377. <div class="opinionImport">
  378. <div class="opinionChapter">负责人签章:</div>
  379. <div class="opinionDate">年 月 日</div>
  380. </div>
  381. </div>
  382. </div>
  383. <div class="opinion">
  384. <div class="opinionLabel">创新创业学院<br/>审 核 意 见</div>
  385. <div class="opinionValue">
  386. <div class="opinionImport">
  387. <div class="opinionChapter">负责人签章:</div>
  388. <div class="opinionDate">年 月 日</div>
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. <div class="notes">
  394. <span>备注:</span>
  395. <span>1.表格可顺延或另附页。</span>
  396. <span>2.项目申报需附相关佐证材料。</span>
  397. </div>
  398. <el-button type="primary" @click="getWord">下载表格</el-button>
  399. </div>
  400. </template>
  401. <script>
  402. import {getMakerSpaceWord} from '@/components/tool/getWord'
  403. export default {
  404. data() {
  405. return {
  406. wordData:{
  407. applicationDate:'2023年05月30日',//申请日期
  408. projectName:"项目名称",//项目名称
  409. college:"所在学院",//所在学院
  410. begin_at:"2023-05-30",//项目开始时间
  411. state:"已建设",//项目状态
  412. plannedEnd_at:"2023-05-31",//计划完成时间
  413. pro_leader:"项目负责人",//项目负责人
  414. lead_leader:"学院牵头领导",//学院牵头领导
  415. teacher:[
  416. {name:"姓名",speciality:"专业",title:"职称",education:"学历",section:"所在教研室",work:"项目组角色分工"},
  417. {name:"姓名",speciality:"专业",title:"职称",education:"学历",section:"所在教研室",work:"项目组角色分工"},
  418. {name:"姓名",speciality:"专业",title:"职称",education:"学历",section:"所在教研室",work:"项目组角色分工"},
  419. ], //教师组//name:姓名 speciality:专业 title:职称 education:学历 section:所在教研室 work:项目组角色分工
  420. student:[
  421. {name:"姓名",class:"班级",age:"年龄",work:"项目组任务分工"},
  422. {name:"姓名",class:"班级",age:"年龄",work:"项目组任务分工"},
  423. {name:"姓名",class:"班级",age:"年龄",work:"项目组任务分工"},
  424. {name:"姓名",class:"班级",age:"年龄",work:"项目组任务分工"},
  425. {name:"姓名",class:"班级",age:"年龄",work:"项目组任务分工"},
  426. ], //学生组//name:姓名 class:班级 age:年龄 work:项目组任务分工
  427. brief:"项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介",//项目简介
  428. Construction:"建设内容",//建设内容
  429. ProjectBasis:"立项依据",//立项依据
  430. development:"创客空间物理环境、制度建设及软件设施建设情况",//创客空间物理环境、制度建设及软件设施建设情况
  431. studio:"学生创客工作室建设情况",//学生创客工作室建设情况
  432. studentTeam:"学生创客团队(人才)培养预期成果、数量",//学生创客团队(人才)培养预期成果、数量
  433. studentActivities:"学生创客活动组织实施情况",//学生创客活动组织实施情况
  434. Transforming:"学生创客团队孵化、转化创业项目情况",//学生创客团队孵化、转化创业项目情况
  435. condition:"立项基础及条件",//立 项基 础及条 件
  436. fund:{
  437. device:200,
  438. Material:100,
  439. processing:200,
  440. Collaboration:300,
  441. APPRAISAL:400,
  442. entery:1,
  443. activities:0,
  444. Transaction:200,
  445. },//预算经费
  446. //total:总经费
  447. //小型仪器设备费:device deviceRemarks
  448. //材料费:Material MaterialRemarks
  449. //测试化验加工费:processing processingRemarks
  450. //项目协作费:Collaboration CollaborationRemarks
  451. //项目成果鉴定费:APPRAISAL APPRAISALRemarks
  452. //参展参赛费:entery enteryRemarks
  453. //创客交流活动费:activities activitiesRemarks
  454. //知识产权事务费:Transaction TransactionRemarks
  455. },
  456. };
  457. },
  458. methods: {
  459. getData(){
  460. console.log("获取数据")
  461. },
  462. getWord(){
  463. this.$message.info("获取表单")
  464. getMakerSpaceWord(this.wordData)
  465. }
  466. },
  467. mounted(){
  468. this.getData();
  469. }
  470. };
  471. </script>
  472. <style lang="less" scoped>
  473. #MakerSpaceWord{
  474. width: 100%;
  475. display: flex;
  476. flex-direction: column;
  477. align-items: center;
  478. background-color: white;
  479. padding:100px;
  480. box-sizing:border-box;
  481. #title{
  482. width: 100%;
  483. display: flex;
  484. flex-direction: column;
  485. align-items: center;
  486. position: relative;
  487. // margin-top: 40px;
  488. .school{
  489. font-size: 2.5em;
  490. font-weight: bold;
  491. letter-spacing: 20px;
  492. }
  493. .wordTitle{
  494. font-size: 2em;
  495. letter-spacing: .15em;
  496. margin-bottom:40px ;
  497. }
  498. .date{
  499. font-size: 1em;
  500. position: absolute;
  501. bottom: 0;
  502. right: 100px;
  503. font-weight: bold;
  504. margin-bottom:5px;
  505. }
  506. }
  507. #table{
  508. box-sizing: border-box;
  509. border: solid 1px black;
  510. border-bottom: none;
  511. display: flex;
  512. flex-direction: column;
  513. .han{
  514. display: flex;
  515. height: auto;
  516. box-sizing: border-box;
  517. border-bottom:solid 1px black;
  518. .label{
  519. position: relative;
  520. flex:1;
  521. display: flex;
  522. justify-content: center;
  523. align-items: center;
  524. box-sizing: border-box;
  525. min-height: 50px;
  526. border-right: solid 1px black;
  527. font-weight:bold;
  528. }
  529. .value{
  530. flex: 2;
  531. display: flex;
  532. justify-content: center;
  533. align-items: center;
  534. box-sizing: border-box;
  535. min-height: 50px;
  536. &:not(:nth-last-child(1)){
  537. border-right: solid 1px black;
  538. }
  539. }
  540. &:nth-child(5){
  541. .label{
  542. flex: 1;
  543. }
  544. .value{
  545. flex: 1;
  546. }
  547. }
  548. }
  549. .status{
  550. display: flex;
  551. height: auto;
  552. box-sizing: border-box;
  553. .statusLabel{
  554. flex:1;
  555. display: flex;
  556. justify-content: center;
  557. align-items: center;
  558. box-sizing: border-box;
  559. border-right: solid 1px black;
  560. border-bottom: solid 1px black;
  561. font-weight:bold;
  562. }
  563. .ValueDescribe{
  564. flex: 5;
  565. display: flex;
  566. flex-direction: column;
  567. .statusHan{
  568. display: flex;
  569. box-sizing: border-box;
  570. border-bottom: solid 1px black;
  571. .DescribeLabel{
  572. flex: 1;
  573. display: flex;
  574. justify-content: center;
  575. align-items: center;
  576. box-sizing: border-box;
  577. // min-height: 200px;
  578. padding:40px 10px;
  579. border-right: solid 1px black;
  580. }
  581. &:nth-child(2){
  582. .DescribeLabel{
  583. min-height: 100px;
  584. }
  585. }
  586. .DescribeValue{
  587. flex: 5;
  588. box-sizing: border-box;
  589. padding: 15px;
  590. }
  591. }
  592. }
  593. }
  594. .member{
  595. display: flex;
  596. .memberLabel{
  597. flex:1;
  598. display: flex;
  599. flex-direction: column;
  600. align-items: center;
  601. justify-content: center;
  602. box-sizing: border-box;
  603. border-right: solid 1px black;
  604. border-bottom: solid 1px black;
  605. min-height: 200px;
  606. }
  607. .memberTable{
  608. flex: 5;
  609. display: flex;
  610. flex-direction: column;
  611. .memberHan{
  612. display: flex;
  613. box-sizing: border-box;
  614. border-bottom: solid 1px black;
  615. position:relative;
  616. .memberValue{
  617. box-sizing: border-box;
  618. flex: 1;
  619. display: flex;
  620. justify-content: center;
  621. align-items: center;
  622. border-right: solid 1px black;
  623. min-height: 45px;
  624. &:nth-last-child(1){
  625. border-right: none;
  626. flex: 3;
  627. }
  628. }
  629. }
  630. }
  631. }
  632. .chapters{
  633. display: flex;
  634. .chaptersLabel{
  635. flex:1;
  636. display: flex;
  637. flex-direction: column;
  638. align-items: center;
  639. justify-content: center;
  640. box-sizing: border-box;
  641. padding: 20px 0;
  642. border-right: solid 1px black;
  643. border-bottom: solid 1px black;
  644. }
  645. .chaptersTable{
  646. flex: 5;
  647. display: flex;
  648. flex-direction: column;
  649. .chaptersValue{
  650. flex: 1;
  651. min-height:200px;
  652. box-sizing: border-box;
  653. border-bottom: solid 1px black;
  654. padding: 5px;
  655. span{
  656. font-weight: bold;
  657. }
  658. }
  659. }
  660. }
  661. .fund{
  662. display: flex;
  663. .fundTitle{
  664. flex:1;
  665. display: flex;
  666. flex-direction: column;
  667. align-items: center;
  668. justify-content: center;
  669. box-sizing: border-box;
  670. border-right: solid 1px black;
  671. border-bottom: solid 1px black;
  672. font-weight:bold;
  673. }
  674. .fundTable{
  675. flex: 5;
  676. display: flex;
  677. flex-direction: column;
  678. box-sizing: border-box;
  679. .fundTotal{
  680. height: 60px;
  681. box-sizing: border-box;
  682. border-bottom: solid 1px black;
  683. display: flex;
  684. div{
  685. display: flex;
  686. justify-content: center;
  687. align-items: center;
  688. font-weight: bold;
  689. }
  690. .fundLabel{
  691. flex: 1;
  692. box-sizing: border-box;
  693. border-right:solid 1px black;
  694. }
  695. .fundValue{
  696. flex: 4;
  697. }
  698. }
  699. .fundHeader{
  700. min-height: 40px;
  701. box-sizing: border-box;
  702. border-bottom: solid 1px black;
  703. display: flex;
  704. font-weight:bold;
  705. .HeaderLabel{
  706. flex: 1;
  707. display: flex;
  708. box-sizing: border-box;
  709. justify-content: center;
  710. align-items: center;
  711. border-right: solid 1px black;
  712. &:nth-last-child(1){
  713. flex: 2;
  714. border: none;
  715. }
  716. }
  717. }
  718. .fundData{
  719. display: flex;
  720. .fundDataLabel{
  721. flex:1;
  722. box-sizing: border-box;
  723. border-right: solid 1px black;
  724. border-bottom: solid 1px black;
  725. display: flex;
  726. justify-content: center;
  727. align-items: center;
  728. font-weight:bold;
  729. }
  730. .fundDataHan{
  731. flex: 4;
  732. display: flex;
  733. flex-direction: column;
  734. .fundDataLie{
  735. display: flex;
  736. min-height: 40px;
  737. flex: 4;
  738. box-sizing: border-box;
  739. border-bottom: solid 1px black;
  740. .fundDataValue{
  741. flex: 1;
  742. min-height: 40px;
  743. display: flex;
  744. box-sizing: border-box;
  745. justify-content: center;
  746. align-items: center;
  747. border-right: solid 1px black;
  748. &:nth-last-child(1){
  749. flex:2;
  750. border: none;
  751. justify-content: flex-start;
  752. span{
  753. padding: 10px 20px;
  754. }
  755. }
  756. }
  757. }
  758. }
  759. }
  760. }
  761. }
  762. // .fundTable{
  763. // tr{
  764. // td{
  765. // height: 50px;
  766. // }
  767. // &:nth-child(1){
  768. // flex: 1;
  769. // }
  770. // }
  771. // }
  772. .opinion{
  773. display: flex;
  774. .opinionLabel{
  775. flex:1;
  776. display: flex;
  777. flex-direction: column;
  778. align-items: center;
  779. justify-content: center;
  780. box-sizing: border-box;
  781. // padding: 3.5px;
  782. border-right: solid 1px black;
  783. border-bottom: solid 1px black;
  784. font-weight:bold;
  785. }
  786. .opinionValue{
  787. flex: 5;
  788. min-height: 200px;
  789. position: relative;
  790. box-sizing:border-box;
  791. border-bottom: solid 1px black;
  792. .opinionImport{
  793. display: flex;
  794. width: 30%;
  795. height:40%;
  796. flex-direction: column;
  797. position:absolute;
  798. bottom: 0px;
  799. right: 20px;
  800. justify-content: space-between;
  801. .opinionDate{
  802. display: flex;
  803. justify-content: flex-end;
  804. font-size: 18px;
  805. }
  806. }
  807. }
  808. }
  809. }
  810. .notes{
  811. width: 100%;
  812. display: flex;
  813. flex-direction:column;
  814. }
  815. :deep(.el-input__inner){
  816. height: 100%;
  817. border-radius: 0;
  818. width: 100%;
  819. background: none;
  820. color: black;
  821. text-align: center;
  822. font-size: 16px;
  823. box-sizing: border-box;
  824. border: none;
  825. outline: none;
  826. }
  827. :deep(.el-textarea__inner){
  828. height: 100%;
  829. border-radius: 0;
  830. width: 100%;
  831. background: none;
  832. color: black;
  833. text-align: center;
  834. font-size: 16px;
  835. box-sizing: border-box;
  836. border: none;
  837. overflow: hidden;
  838. }
  839. .noCenter{
  840. :deep(.el-textarea__inner ){
  841. text-align:left;
  842. }
  843. }
  844. :deep(.el-date-editor){
  845. width: 100%;
  846. height: 100%;
  847. }
  848. :deep(.el-input__suffix){
  849. display:none;
  850. }
  851. // .InputDiv{
  852. // width: 100%;
  853. // height: 100%;
  854. // word-break: break-all;
  855. // display: flex;
  856. // justify-content: center;
  857. // align-items: center;
  858. // box-sizing: border-box;
  859. // padding: 10px;
  860. // outline: none;
  861. // &:focus{
  862. // border:solid 1px #409eff ;
  863. // }
  864. // }
  865. .fontBold{
  866. font-weight:bold;
  867. }
  868. }
  869. </style>