unissued.vue 50 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379
  1. <template>
  2. <div class="SignAcontract">
  3. <div class="SignAcontract-content" v-if="itemtype!='打印房票'">
  4. <div class="SignAcontract-content-right">
  5. <div class="button-background" @click="control(0)"><el-button :disabled='PlacementMode==1'>上一步</el-button></div>
  6. <el-steps :active="index" align-center style="width: calc(100% - 212px);">
  7. <el-step title="打印申请书" ></el-step>
  8. <el-step title="上传申请书" ></el-step>
  9. <el-step title="完成" ></el-step>
  10. </el-steps>
  11. <div class="button-background" @click="control(1)"><el-button>下一步</el-button></div>
  12. </div>
  13. <div class="SignAcontract-content-lent">
  14. <div class="SignAcontract-content-lent-data" v-if="index==1">
  15. <div class="button-background">
  16. <el-button @click="RoomC()">打印</el-button>
  17. <el-button @click="query=true">参数</el-button>
  18. </div>
  19. <div class="contractA" id="RoomC">
  20. <div class="contractA-title" style="color: #000;">
  21. 房票转让申请书(集体)
  22. </div>
  23. <div class="contractA-name">
  24. <div style="text-indent: 0;">
  25. 慈溪市房屋征收所:
  26. </div>
  27. <div>
  28. 本人 <span>{{Roomdata.householderName}}</span> ,已知悉慈溪市房票相关政策,愿意将房票编号: <span>{{Roomdata.roomTicketNum}}</span> 的房票转让给 <span>{{assigneeName}}</span> 。转让双方及房票信息如下:
  29. </div>
  30. <div>
  31. 转让人(房票使用人):<span>{{Roomdata.endUser}}</span> ,身份证号码:<span>{{Roomdata.endUserIdCard}}</span> ;
  32. </div>
  33. <div>
  34. 受让人: <span>{{assigneeName}}</span> ,身份证号码: <span>{{assigneeIdCard}}</span> ;
  35. </div>
  36. <div>
  37. 房票信息:房票编号: <span>{{Roomdata.roomTicketNum}}</span> ,使用期限:自{{Roomdata.roomTicketStartDate}}至{{Roomdata.roomTicketEndDate}} ,房票金额: <span>{{Roomdata.roomTicketAmount}}</span> 元。
  38. </div>
  39. <div>
  40. 自即日起,该房票及房票购房补贴归受让人所有。受让人清楚、明白并严格遵守慈溪市房票的相关规定。
  41. </div>
  42. <div>
  43. 特此申请。
  44. </div>
  45. </div>
  46. <div class="contractA-bottom">
  47. <div class="contractA-bottom-a">
  48. <div>
  49. <p>转让人(签章): </p>
  50. <p>联系电话: </p>
  51. <p>年 月 日 </p>
  52. </div>
  53. <div>
  54. <p>受让人(签章):</p>
  55. <p>联系电话: </p>
  56. <p>年 月 日 </p>
  57. </div>
  58. </div>
  59. <div class="contractA-bottom-b" style="text-align: inherit;font-size: 16px;">
  60. 注:转让人或受让人为未成年人或其他限制民事行为、无民事行为能力的人,有其法定(指定)监护人签章。
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="Upload" v-if="index==2">
  66. <div class="Upload-butom">
  67. <!-- <div class="Upload-butom-tow">
  68. <h3>补偿款领款日期:</h3>
  69. <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
  70. v-model="payDate" style="width: 250px;"></el-date-picker>
  71. </div> -->
  72. <div class="Upload-butom-ont" v-for="(item,index) in fileListindex" :key="index">
  73. <div class="tc-middle-add">
  74. <h3>转让申请书:</h3>
  75. </div>
  76. <div class="tc-middle-name">
  77. <ul>
  78. <li v-for="itemid in item.tree" @click="nodeClic(itemid)">
  79. <i class="el-icon-error" @click.stop="deleteFile(itemid)"></i>
  80. <img v-if="itemid.name.split('.').pop().toLowerCase()=='pdf'" src="../../../../assets/file-pdf.png" alt="">
  81. <img v-else-if="itemid.name.split('.').pop().toLowerCase()=='png'||itemid.name.split('.').pop().toLowerCase()=='jpg'"
  82. src="../../../../assets/file-img.png" alt="">
  83. <img v-else-if="itemid.name.split('.').pop().toLowerCase()=='text'" src="../../../../assets/file-excel.png" alt="">
  84. <img v-else src="../../../../assets/file-other.png">
  85. <div><Tooltip :text="itemid.name"></Tooltip></div>
  86. </li>
  87. <el-upload action='' :auto-upload="false" :headers="tokenData" :on-change="handleChang" :show-file-list="false">
  88. <li @click="selectFile()">
  89. <div class="add">
  90. <div class="add-top">
  91. <span class="el-icon-plus"></span>
  92. </div>
  93. <div class="add-buttom">
  94. 添加文件
  95. </div>
  96. </div>
  97. </li>
  98. </el-upload>
  99. </ul>
  100. </div>
  101. </div>
  102. <div class="Upload-butom-ont">
  103. <div class="tc-middle-add">
  104. <h4>情况说明:</h4>
  105. </div>
  106. <div class="tc-middle-name">
  107. <div class="form" style="padding: 0;">
  108. <el-form>
  109. <el-form-item label="情况说明" label-width="130px" style="width: 100%;">
  110. <el-input v-model='Reremar' type="textarea" :rows="4" placeholder="请输入情况说明"
  111. style="width: 100%;"></el-input>
  112. </el-form-item>
  113. </el-form>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <!-- =========房票========= -->
  122. <div class="SignAcontract-ont" v-if="itemtype=='打印房票'">
  123. <div class="button-background"><el-button @click="RoomA()">打印</el-button></div>
  124. <div id="RoomA" class="Room">
  125. <ul class="room-data" style="margin: 0;padding: 0 2%;">
  126. <li>
  127. <div class="title">
  128. <div class="title-top">
  129. <h3>存根联</h3>
  130. <p style="margin: 0;">房票编号:{{Roomdata.roomTicketNum}}</p>
  131. </div>
  132. <div class="title-name">
  133. 慈溪市征收集体所有土地住宅房屋<br>
  134. 拆迁调产安置购房证明书
  135. </div>
  136. </div>
  137. <div class="dataname">
  138. <div class="dataname-neck">
  139. <p>拆迁人(签章):<span>慈溪市房屋征收所</span></p>
  140. <p>项目名称:<span>{{Roomdata.projectName}}</span></p>
  141. <p>被拆迁人<span>{{Roomdata.householderName}}</span></p>
  142. <p>身份证号码:<span>{{Roomdata.householderIdCard}}</span></p>
  143. </div>
  144. <table width="100%" height="530px" border='0' cellspacing='0'>
  145. <colgroup>
  146. <col span="1" style="width:5%" v-for="i in 20" :key="i">
  147. </col>
  148. </colgroup>
  149. <tr align='center'>
  150. <td height="5%" rowspan="1" colspan="3">房票使用人</td>
  151. <td rowspan="1" colspan="7">{{Roomdata.endUser}} </td>
  152. <td rowspan="1" colspan="4">身份证号码</td>
  153. <td rowspan="1" colspan="6">{{Roomdata.endUserIdCard}} </td>
  154. </tr>
  155. <tr align='center'>
  156. <td height="5%" rowspan="1" colspan="3">住址</td>
  157. <td rowspan="1" colspan="9">{{Roomdata.endUserAddr}} </td>
  158. <td rowspan="1" colspan="3">联系电话</td>
  159. <td rowspan="1" colspan="5">{{Roomdata.endUserPhone}}</td>
  160. </tr>
  161. <tr align='center'>
  162. <td rowspan="4" colspan="2">被拆迁房屋概况</td>
  163. <td height="5%" rowspan="1" colspan="3">原房屋坐落</td>
  164. <td rowspan="1" colspan="15">{{Roomdata.oldHouseAddr}}</td>
  165. </tr>
  166. <tr align='center'>
  167. <td rowspan="2" colspan="3">建筑面积</td>
  168. <td rowspan="2" colspan="5">{{Roomdata.oldHouseBuiltUpArea}}</td>
  169. <td height="5%" rowspan="1" colspan="4">土地面积</td>
  170. <td rowspan="1" colspan="6">{{Roomdata.oldHouseLandArea}}</td>
  171. </tr>
  172. <tr align='center'>
  173. <td height="5%" rowspan="1" colspan="4">可安置面积</td>
  174. <td rowspan="1" colspan="6">{{Roomdata.oldHouseResettlementArea}}</td>
  175. </tr>
  176. <tr align='center'>
  177. <td height="5%" rowspan="1" colspan="3">协议编号</td>
  178. <td rowspan="1" colspan="5">{{Roomdata.agreementNo}}</td>
  179. <td rowspan="1" colspan="4">签约时间</td>
  180. <td rowspan="1" colspan="6">{{Roomdata.agreementSigningTime}}</td>
  181. </tr>
  182. <tr align='center'>
  183. <td rowspan="3" colspan="2">货币和房票</td>
  184. <td rowspan="1" colspan="3">货币补偿和房票安置金额</td>
  185. <td align='left' rowspan="1" colspan="9">大写:{{transformation(Roomdata.roomTicketAmount)}}</td>
  186. <td align='left' rowspan="1" colspan="6">¥:{{Roomdata.roomTicketAmount}}元</td>
  187. </tr>
  188. <tr align='center'>
  189. <td rowspan="2" colspan="3">房票使用截止时间</td>
  190. <td height="5%" align='left' rowspan="1" colspan="15">自{{Roomdata.roomTicketStartDate}}至{{Roomdata.roomTicketEndDate}}</td>
  191. </tr>
  192. <tr align='center'>
  193. <td height="5%" rowspan="1" colspan="15"> .</td>
  194. </tr>
  195. <tr>
  196. <td rowspan="1" colspan="20">
  197. <div class="table-top">
  198. <p>
  199. 同意上述内容,已按规定领取房票消费联和回执联,将严格按房票相关政策结算房票金额及购房补贴。
  200. </p>
  201. <div class="table-top-right">
  202. <p>房票使用人签字:</p>
  203. <div> 年 月 日</div>
  204. </div>
  205. </div>
  206. </td>
  207. </tr>
  208. <tr>
  209. <td rowspan="1" colspan="20">
  210. <div class="table-buttom-right">
  211. <ul>
  212. <li>经办人:</li>
  213. <li>审核人:</li>
  214. <li>审批人:</li>
  215. </ul>
  216. <div> 年 月 日</div>
  217. </div>
  218. </td>
  219. </tr>
  220. </table>
  221. </div>
  222. <div class="remarks">
  223. <div>
  224. 注意事项:
  225. </div>
  226. <div>
  227. (一)房票持有人购买本市行政区域内新建商品住宅房屋(不含原杭州湾新区和崇寿镇)的给予购房补贴,购买二手住宅房屋的不再给予购房补贴。
  228. </div>
  229. <div>
  230. (二)房票初始持有人在房票载明的使用截止时间前购买新建商品住宅房屋的,全额享受购房补贴;在房票使用延长期限内购买新建商品住宅房屋的,减半享受购房补贴。
  231. </div>
  232. <div>
  233. (三)房票允许转让,但必须同时符合以下条件:
  234. </div>
  235. <p>1.房票只允许转让一次,受让所得的房票仅限于购买本市行政区域内(不含原杭州湾新区和崇寿镇)新建商品住宅房屋,购房补贴全额由受让人享受;</p>
  236. <p>2.房票须实名转让,由转让人和受让人共同向房屋征收部门提出书面申请并办理房票转让登记,且受让人购房须在办理房票转让登记之后;</p>
  237. <p>3.房票转让及受让人购房须在房票开具之日起6个月内完成。受让人未在房票开具之日起6个月内购房的,不享受购房补贴。这里的“购房”是指取得备案的商品房买卖合同。</p>
  238. <p>4.单张房票须全额转让,不得部分转让。</p>
  239. <div>
  240. (四)房票使用人凭已备案的商品房买卖合同(已办理商品房不动产权证的凭不动产权证)、购房发票、房票回执联、本人身份证等相关材料,领取购房补贴。凭已备案的商品房买卖合同领取购房补贴的,以商品房买卖合同记载的商品房购房总金额为基准;凭商品房不动产权证领取购房补贴的,以购房发票总金额为基准。
  241. </div>
  242. <div>
  243. (五)房票使用人购买一手商品住宅房屋的,须与房地产开发企业、慈溪市房屋征收所签订三方协议。领取购房补贴后与房地产开发企业解除商品房买卖合同的,须全额退还已领取的购房补贴。
  244. </div>
  245. <div>
  246. (六)商品房申领购房补贴后,其配套车位(车库)、储藏间再来申领购房补贴的,不再受理。
  247. </div>
  248. </div>
  249. </li>
  250. <li>
  251. <div class="title">
  252. <div class="title-top">
  253. <h3>消费联</h3>
  254. <p style="margin: 0;">房票编号:{{Roomdata.roomTicketNum}}</p>
  255. </div>
  256. <div class="title-name">
  257. 慈溪市征收集体所有土地住宅房屋<br>
  258. 拆迁调产安置购房结算单
  259. </div>
  260. </div>
  261. <div class="dataname">
  262. <div class="dataname-neck">
  263. <p>拆迁人(签章):<span>慈溪市房屋征收所</span></p>
  264. <p>项目名称:<span>{{Roomdata.projectName}}</span></p>
  265. <p>被拆迁人:<span>{{Roomdata.householderName}}</span></p>
  266. <p>身份证号码:<span>{{Roomdata.householderIdCard}}</span></p>
  267. </div>
  268. <table width="100%" height="480px" border='0' cellspacing='0'>
  269. <colgroup>
  270. <col span="1" style="width:5%" v-for="i in 20" :key="i">
  271. </col>
  272. </colgroup>
  273. <tr align='center'>
  274. <td height="8%" rowspan="1" colspan="3">房票使用人</td>
  275. <td rowspan="1" colspan="7">{{Roomdata.endUser}} </td>
  276. <td rowspan="1" colspan="4">身份证号码</td>
  277. <td rowspan="1" colspan="6">{{Roomdata.endUserIdCard}} </td>
  278. </tr>
  279. <tr align='center'>
  280. <td height="8%" rowspan="1" colspan="3">住址</td>
  281. <td rowspan="1" colspan="9">{{Roomdata.endUserAddr}} </td>
  282. <td rowspan="1" colspan="3">联系电话</td>
  283. <td rowspan="1" colspan="5">{{Roomdata.endUserPhone}} </td>
  284. </tr>
  285. <tr align='center'>
  286. <td height="10%" rowspan="1" colspan="3">货币补偿和房票安置金额</td>
  287. <td align='left' rowspan="1" colspan="13">大写:{{transformation(Roomdata.roomTicketAmount)}} </td>
  288. <td align='left' rowspan="1" colspan="4">¥:{{Roomdata.roomTicketAmount}}元</td>
  289. </tr>
  290. <tr align='center'>
  291. <td height="8%" rowspan="1" colspan="3">房票使用截止时间</td>
  292. <td align='left' rowspan="1" colspan="17">自{{Roomdata.roomTicketStartDate}}至{{Roomdata.roomTicketEndDate}}</td>
  293. </tr>
  294. <tr>
  295. <td rowspan="2" colspan="1" align='center'>结算记录</td>
  296. <td rowspan="2" colspan="2" align='center'>支付确认</td>
  297. <td rowspan="1" colspan="17">
  298. <div class="table-top">
  299. <p>
  300. 本人确认领取上述货币补偿和房票安置金额,其中部分用于购买安置用房
  301. </p>
  302. <div class="table-top-right" style="margin-top: 5rem;">
  303. <p>房票使用人签字:</p>
  304. <div> 年 月 日</div>
  305. </div>
  306. </div>
  307. </td>
  308. </tr>
  309. <tr>
  310. <td rowspan="1" colspan="17">
  311. <div class="table-buttom-right" style="margin: 0;">
  312. <p>
  313. 支付单位签章
  314. </p>
  315. <ul style="margin-top: 5rem;">
  316. <li>经办人:</li>
  317. <li>审批人:</li>
  318. </ul>
  319. <div> 年 月 日</div>
  320. </div>
  321. </td>
  322. </tr>
  323. </table>
  324. </div>
  325. <div class="remarks" style="margin-top: 3rem;">
  326. <div>
  327. 注意事项:
  328. </div>
  329. <div>
  330. (一)房票持有人购买本市行政区域内新建商品住宅房屋(不含原杭州湾新区和崇寿镇)的给予购房补贴,购买二手住宅房屋的不再给予购房补贴。
  331. </div>
  332. <div>
  333. (二)房票初始持有人在房票载明的使用截止时间前购买新建商品住宅房屋的,全额享受购房补贴;在房票使用延长期限内购买新建商品住宅房屋的,减半享受购房补贴。
  334. </div>
  335. <div>
  336. (三)房票允许转让,但必须同时符合以下条件:
  337. </div>
  338. <p>1.房票只允许转让一次,受让所得的房票仅限于购买本市行政区域内(不含原杭州湾新区和崇寿镇)新建商品住宅房屋,购房补贴全额由受让人享受;</p>
  339. <p>2.房票须实名转让,由转让人和受让人共同向房屋征收部门提出书面申请并办理房票转让登记,且受让人购房须在办理房票转让登记之后;</p>
  340. <p>3.房票转让及受让人购房须在房票开具之日起6个月内完成。受让人未在房票开具之日起6个月内购房的,不享受购房补贴。这里的“购房”是指取得备案的商品房买卖合同。</p>
  341. <p>4.单张房票须全额转让,不得部分转让。</p>
  342. <div>
  343. (四)房票使用人凭已备案的商品房买卖合同(已办理商品房不动产权证的凭不动产权证)、购房发票、房票回执联、本人身份证等相关材料,领取购房补贴。凭已备案的商品房买卖合同领取购房补贴的,以商品房买卖合同记载的商品房购房总金额为基准;凭商品房不动产权证领取购房补贴的,以购房发票总金额为基准。
  344. </div>
  345. <div>
  346. (五)房票使用人购买一手商品住宅房屋的,须与房地产开发企业、慈溪市房屋征收所签订三方协议。领取购房补贴后与房地产开发企业解除商品房买卖合同的,须全额退还已领取的购房补贴。
  347. </div>
  348. <div>
  349. (六)商品房申领购房补贴后,其配套车位(车库)、储藏间再来申领购房补贴的,不再受理。
  350. </div>
  351. </div>
  352. </li>
  353. <li>
  354. <div class="title">
  355. <div class="title-top">
  356. <h3>回执联</h3>
  357. <p style="margin: 0;">房票编号:{{Roomdata.roomTicketNum}}</p>
  358. </div>
  359. <div class="title-name">
  360. 慈溪市征收集体所有土地住宅房屋<br>
  361. 拆迁调产安置购房回执
  362. </div>
  363. </div>
  364. <div class="dataname">
  365. <div class="dataname-neck">
  366. <p>拆迁人(签章):<span>慈溪市房屋征收所</span></p>
  367. <p>项目名称:<span>{{Roomdata.projectName}}</span></p>
  368. <p>被拆迁人<span>{{Roomdata.householderName}}</span></p>
  369. <p>身份证号码:<span>{{Roomdata.householderIdCard}}</span></p>
  370. </div>
  371. <table width="100%" height="450px" border='0' cellspacing='0'>
  372. <colgroup>
  373. <col span="1" style="width:5%" v-for="i in 20" :key="i">
  374. </col>
  375. </colgroup>
  376. <tr align='center'>
  377. <td height="5%" rowspan="1" colspan="4">房票使用人</td>
  378. <td rowspan="1" colspan="6"> {{Roomdata.endUser}}</td>
  379. <td rowspan="1" colspan="4">身份证号码</td>
  380. <td rowspan="1" colspan="6"> {{Roomdata.endUserIdCard}}</td>
  381. </tr>
  382. <tr align='center'>
  383. <td rowspan="4" colspan="1">被拆迁房屋概况</td>
  384. <td height="5%" rowspan="1" colspan="4">原房屋坐落</td>
  385. <td rowspan="1" colspan="15"> {{Roomdata.oldHouseAddr}}</td>
  386. </tr>
  387. <tr align='center'>
  388. <td rowspan="2" colspan="4">建筑面积</td>
  389. <td rowspan="2" colspan="5"> {{Roomdata.oldHouseBuiltUpArea}}</td>
  390. <td height="5%" rowspan="1" colspan="4">土地面积</td>
  391. <td rowspan="1" colspan="6"> {{Roomdata.oldHouseLandArea}}</td>
  392. </tr>
  393. <tr align='center'>
  394. <td height="5%" rowspan="1" colspan="4">可安置面积</td>
  395. <td rowspan="1" colspan="6"> {{Roomdata.oldHouseResettlementArea}}</td>
  396. </tr>
  397. <tr align='center'>
  398. <td height="5%" rowspan="1" colspan="4">协议编号</td>
  399. <td rowspan="1" colspan="5"> {{Roomdata.agreementNo}}</td>
  400. <td height="5%" rowspan="1" colspan="4">签约时间</td>
  401. <td rowspan="1" colspan="6"> {{Roomdata.agreementSigningTime}}</td>
  402. </tr>
  403. <tr align='center'>
  404. <td height="5%" rowspan="1" colspan="5">货币补偿和房票安置金额</td>
  405. <td align='left' rowspan="1" colspan="9"> 大写:{{transformation(Roomdata.roomTicketAmount)}}</td>
  406. <td align='left' rowspan="1" colspan="6">¥:{{Roomdata.roomTicketAmount}}元</td>
  407. </tr>
  408. <tr align='center'>
  409. <td rowspan="2" colspan="5">房票使用截止时间</td>
  410. <td height="5%" align='left' rowspan="1" colspan="15">自{{Roomdata.roomTicketStartDate}}至{{Roomdata.roomTicketEndDate}}</td>
  411. </tr>
  412. <tr align='center'>
  413. <td height="5%" align='left' rowspan="1" colspan="15"> </td>
  414. </tr>
  415. <tr align='center'>
  416. <td rowspan="3" colspan="1">交易记录</td>
  417. <td height="5%" rowspan="1" colspan="4">购房金额</td>
  418. <td align='left' rowspan="1" colspan="9"> 大写:</td>
  419. <td align='left' rowspan="1" colspan="6">¥:</td>
  420. </tr>
  421. <tr align='center'>
  422. <td height="5%" rowspan="1" colspan="4">所购房屋信息</td>
  423. <td align='left' rowspan="1" colspan="15"> </td>
  424. </tr>
  425. <tr align='center'>
  426. <td height="5%" rowspan="1" colspan="4">房票金额</td>
  427. <td align='left' rowspan="1" colspan="9"> 大写:</td>
  428. <td align='left' rowspan="1" colspan="6">¥:</td>
  429. </tr>
  430. <tr>
  431. <td rowspan="1" colspan="9">
  432. <div class="table-top">
  433. <div class="table-top-right" style="width: 100%;margin-left:0;margin-top: 0;">
  434. <p style="margin-bottom: 6.5rem;">房票使用人签字:</p>
  435. <div style="margin-left: 0%;"> 年 月 日</div>
  436. </div>
  437. </div>
  438. </td>
  439. <td rowspan="1" colspan="11">
  440. <div class="table-buttom-right" style="margin: 0;">
  441. <p>
  442. 售卖方(签章):
  443. </p>
  444. <ul style="margin-top: 4.5rem;display: block;width: 35%;">
  445. <li style="width: 100%;text-align: end;margin-bottom: 0.5rem;">经办人:</li>
  446. <li style="width: 100%;text-align: end;">审批人:</li>
  447. </ul>
  448. <div style="width: 55%;margin-left: 40%;"> 年 月 日</div>
  449. </div>
  450. </td>
  451. </tr>
  452. </table>
  453. <div class="dataname-neck">
  454. <p>受让人:<span></span></p>
  455. <p>身份证号码:<span></span></p>
  456. <p>转让日期:<span></span></p>
  457. </div>
  458. </div>
  459. <div class="remarks">
  460. <div>
  461. 注意事项:
  462. </div>
  463. <div>
  464. (一)房票持有人购买本市行政区域内新建商品住宅房屋(不含原杭州湾新区和崇寿镇)的给予购房补贴,购买二手住宅房屋的不再给予购房补贴。
  465. </div>
  466. <div>
  467. (二)房票初始持有人在房票载明的使用截止时间前购买新建商品住宅房屋的,全额享受购房补贴;在房票使用延长期限内购买新建商品住宅房屋的,减半享受购房补贴。
  468. </div>
  469. <div>
  470. (三)房票允许转让,但必须同时符合以下条件:
  471. </div>
  472. <p>1.房票只允许转让一次,受让所得的房票仅限于购买本市行政区域内(不含原杭州湾新区和崇寿镇)新建商品住宅房屋,购房补贴全额由受让人享受;</p>
  473. <p>2.房票须实名转让,由转让人和受让人共同向房屋征收部门提出书面申请并办理房票转让登记,且受让人购房须在办理房票转让登记之后;</p>
  474. <p>3.房票转让及受让人购房须在房票开具之日起6个月内完成。受让人未在房票开具之日起6个月内购房的,不享受购房补贴。这里的“购房”是指取得备案的商品房买卖合同。</p>
  475. <p>4.单张房票须全额转让,不得部分转让。</p>
  476. <div>
  477. (四)房票使用人凭已备案的商品房买卖合同(已办理商品房不动产权证的凭不动产权证)、购房发票、房票回执联、本人身份证等相关材料,领取购房补贴。凭已备案的商品房买卖合同领取购房补贴的,以商品房买卖合同记载的商品房购房总金额为基准;凭商品房不动产权证领取购房补贴的,以购房发票总金额为基准。
  478. </div>
  479. <div>
  480. (五)房票使用人购买一手商品住宅房屋的,须与房地产开发企业、慈溪市房屋征收所签订三方协议。领取购房补贴后与房地产开发企业解除商品房买卖合同的,须全额退还已领取的购房补贴。
  481. </div>
  482. <div>
  483. (六)商品房申领购房补贴后,其配套车位(车库)、储藏间再来申领购房补贴的,不再受理。
  484. </div>
  485. </div>
  486. </li>
  487. </ul>
  488. </div>
  489. </div>
  490. <!-- 转让房票参数 -->
  491. <div class="tk">
  492. <el-dialog title="更多筛选" :visible.sync="query" width="500px" :modal-append-to-body="false">
  493. <div class="form">
  494. <el-form>
  495. <el-form-item label="受让人" label-width="130px" style="width: 100%;">
  496. <el-input v-model="assigneeName" placeholder="请输入受让人姓名" clearable></el-input>
  497. </el-form-item>
  498. <el-form-item label="身份证" label-width="130px" style="width: 100%;">
  499. <el-input v-model="assigneeIdCard" placeholder="请输入受让人身份证" clearable></el-input>
  500. </el-form-item>
  501. <el-form-item label="转让日期" label-width="130px" style="width: 100%;">
  502. <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
  503. v-model="assigneeDate" style="width: 100%;"></el-date-picker>
  504. </el-form-item>
  505. </el-form>
  506. </div>
  507. <span slot="footer" class="dialog-footer">
  508. <el-button type="primary" @click="postupdateRoomTicket()">确 定</el-button>
  509. <el-button @click="query = false">取 消</el-button>
  510. </span>
  511. </el-dialog>
  512. </div>
  513. </div>
  514. </template>
  515. <script>
  516. import Tooltip from '../../../assembly/tooltip.vue'
  517. export default {
  518. name: "survey",
  519. //===========户信息=======项目信息============房票信息=====类型
  520. props: ['Roomdata','itemtype'],
  521. components:{
  522. Tooltip
  523. },
  524. data() {
  525. return {
  526. index:1,
  527. PlacementMode:0,
  528. uuid:'',
  529. payDate:'',
  530. fileListindex:[],
  531. defaultOpen: require("../../../../assets/file-plus.png"),
  532. defaultClose: require("../../../../assets/file-reduce.png"),
  533. Reremar:'',
  534. tokenData: {
  535. token: window.sessionStorage.getItem('token')
  536. },
  537. datahousehold:{},
  538. query:false,
  539. assigneeName:'',
  540. assigneeIdCard:'',
  541. assigneeDate:'',
  542. }
  543. },
  544. computed: {},
  545. mounted() {
  546. if(this.itemtype=='打印房票'){
  547. this.RoomA()
  548. }else if(this.itemtype=='转让'){
  549. this.assigneeName=this.Roomdata.assigneeName,
  550. this.assigneeIdCard=this.Roomdata.assigneeIdCard,
  551. this.assigneeDate=this.Roomdata.assigneeDate
  552. if(this.Roomdata.updateLock=='上传资料'){
  553. this.index=2
  554. // this.getUid()
  555. this.getgetexaminefile()
  556. }else{
  557. this.index=1
  558. }
  559. }
  560. },
  561. methods: {
  562. //保存
  563. postupdateRoomTicket(){
  564. var type=false
  565. var data=[]
  566. if(!this.assigneeName){
  567. type=true
  568. data.push('受让人')
  569. }
  570. if(!this.assigneeIdCard){
  571. type=true
  572. data.push('身份证')
  573. }
  574. if(!this.assigneeDate){
  575. type=true
  576. data.push('转让日期')
  577. }
  578. if(type==true){
  579. this.$message.error("请填写【"+data+"】!");
  580. return
  581. }
  582. var data={
  583. id:this.Roomdata.id,
  584. assigneeName:this.assigneeName,
  585. assigneeIdCard:this.assigneeIdCard,
  586. assigneeDate:this.assigneeDate,
  587. updateLock:'变更申请',
  588. }
  589. this.$http.post('api/auth/roomticket/updateState',data).then((res) => {
  590. if (res.status == 200 && res.data.code == 0) {
  591. this.query = false
  592. } else {
  593. this.$message.error("失败!");
  594. }
  595. })
  596. },
  597. //打印房房票
  598. RoomA(){
  599. this.$nextTick(function() {
  600. //判断iframe是否存在,不存在则创建iframe
  601. var iframe = document.getElementById("print-iframe");
  602. var el = document.getElementById("RoomA");
  603. iframe = document.createElement('IFRAME');
  604. var doc = null;
  605. iframe.setAttribute("id", "print-iframe");
  606. iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
  607. document.body.appendChild(iframe);
  608. doc = iframe.contentWindow.document;
  609. //这里可以自定义样式
  610. doc.write(
  611. '<style media="print">@page {size: auto;margin: 0mm;}.Room{padding: 0 2%;width: 100%;height: 100%;font-size: 15px;box-sizing: border-box;}td{border-bottom: 1px solid #000;border-right: 1px solid #000;}span {word-break: break-all;border-bottom: 1px solid #000;min-width: 50px;display: inline-block;line-height: 18px;text-align: center;text-indent: 0em;}.room-data{width: 100%;height: 100%;display: flex;}.room-data li{list-style: none; width: 31.8%;height: 100%;border-right: 2px #000 dashed;padding: 2.5% 1% 1% 1%;box-sizing: border-box;}.room-data li:last-child{border-right: none;}.title{width: 100%;align-items: center;}.title .title-top{width: 100%;display: flex;align-items: baseline;justify-content: space-between;margin: 0;}.title-top h3{font-size: 16px;font-weight: 700;width: 45%;text-align: right;line-height: 1rem;margin: 0}.title-top p{font-size: 12px;width: 45%;text-align: left;margin: 0}.title-name{text-align: center;font-size: 20px;color: #000;font-weight: 500;margin-bottom: 2rem;}table{font-size: 12px;border-top: 1PX solid #000;border-left: 1PX solid #000;}.table-top p{text-indent: 2em;}.table-top-right{width: 40%;margin-top: 3rem;margin-left: 50%;}.table-top-right p{text-align: inherit;margin-bottom: 1rem;}.table-top-right div{text-align: end;letter-spacing: 3mm;}.table-buttom-right{width: 100%;margin-top: 6rem;}.table-buttom-right ul{display: flex;width: 80%;}.table-buttom-right ul li{list-style: none;width: 33.33%;margin: 0;border: none;}.table-buttom-right p{text-indent: 2em;} .table-buttom-right div{text-align: end;letter-spacing: 3mm;width: 40%;margin-left: 50%;}.dataname-neck{width: 100%;font-size: 14px;line-height: 1.5rem;}.dataname-neck p{margin: 0;width: 100%;}.remarks{font-size: 12px;color: #000;font-weight: 600;width: 159%;transform: scale(0.63) translate(-29.5%,-29.5%);}.remarks p{text-indent: 2em;margin:0;}</style>'
  612. ); //解决出现页眉页脚和路径的问题
  613. doc.write('<div>' + el.innerHTML + '</div>');
  614. doc.close();
  615. iframe.contentWindow.focus();
  616. setTimeout(function() {
  617. iframe.contentWindow.print();
  618. }, 50) //解决第一次样式不生效的问题
  619. if (navigator.userAgent.indexOf("MSIE") > 0) {
  620. document.body.removeChild(iframe);
  621. }
  622. this.$emit('detaoperate')
  623. this.addprintt()
  624. })
  625. },
  626. control(row){
  627. var Positive =0
  628. var Staging=this.index
  629. if(row){
  630. Staging++
  631. Positive =0
  632. }else{
  633. Staging--
  634. Positive =1
  635. }
  636. if(Staging<=1){
  637. this.index=1
  638. this.addagreement(0,Positive)
  639. }else if(Staging==2){
  640. this.addagreement(1,Positive)
  641. // this.getUid()
  642. this.getgetexaminefile()
  643. }else if(Staging>=3){
  644. var zt=false
  645. this.fileListindex.forEach((item)=>{
  646. if(item.tree.length==0){zt=true}
  647. })
  648. if(zt){
  649. this.$message.error('请上传【转让申请书】')
  650. return
  651. }
  652. this.addagreement(2,Positive)
  653. this.$emit('detaoperate');
  654. this.index=2
  655. }
  656. },
  657. addprintt(row){
  658. this.$http.get('api/auth/roomticket/print?id='+this.Roomdata.id,null).then((res) => {
  659. if (res.status == 200 && res.data.code == 0) {
  660. // this.agreementControl = false
  661. // this.$message.success('成功!');
  662. } else {
  663. this.$message.error("失败!");
  664. }
  665. })
  666. },
  667. //转让房票
  668. addagreement(row,type){
  669. var datl=['变更申请','上传资料','已变更']
  670. var data={
  671. id:this.Roomdata.id,
  672. assigneeName:this.assigneeName,
  673. assigneeIdCard:this.assigneeIdCard,
  674. assigneeDate:this.assigneeDate,
  675. updateLock:datl[row]
  676. }
  677. this.$http.post('api/auth/roomticket/updateState',data).then((res) => {
  678. if (res.status == 200 && res.data.code == 0) {
  679. if(type){if(this.index!=1){this.index--}}else{this.index++}
  680. this.$message.success('成功!');
  681. } else {
  682. this.$message.error("失败!");
  683. }
  684. })
  685. },
  686. // 数字转大写(不带单位)
  687. transformation(n){
  688. if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
  689. return ""; //判断数据是否大于0
  690. }
  691. var unit = "千百拾亿千百拾万千百拾元角分", str = "";
  692. n += "00";
  693. var indexpoint = n.indexOf('.'); // 如果是小数,截取小数点前面的位数
  694. if (indexpoint >= 0){
  695. n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2); // 若为小数,截取需要使用的unit单位
  696. }
  697. unit = unit.substr(unit.length - n.length); // 若为整数,截取需要使用的unit单位
  698. for (var i=0; i < n.length; i++){
  699. str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i); //遍历转化为大写的数字
  700. }
  701. return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符,得到结果
  702. },
  703. // // 获取uuid
  704. // getUid(){
  705. // var s = [];
  706. // var hexDigits = "0123456789abcdef";
  707. // for (var i = 0; i < 30; i++) {
  708. // s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  709. // }
  710. // s[14] = "4";
  711. // s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  712. // var uuid = s.join("");
  713. // this.uuid = uuid;
  714. // return uuid;
  715. // },
  716. // 上传文件按钮
  717. selectFile() {
  718. this.selectFileName = '3、审批后资料/6、房票发放凭证'+'/房票转让申请书/'+this.Roomdata.roomTicketNum;
  719. },
  720. // 上传文件
  721. handleChang(file) {
  722. let that = this;
  723. let formData = new FormData();
  724. formData.append('file', file.raw);
  725. formData.append('type', 2);
  726. formData.append('id', this.Roomdata.householdId);
  727. formData.append('destfolder', this.selectFileName);
  728. that.$http.post('api/auth/file/upload', formData).then((res) => {
  729. if (res.status == 200 && res.data.code == 0) {
  730. that.$message.success("上传文件成功!");
  731. this.getgetexaminefile();
  732. } else {
  733. that.$message.error("上传文件失败!");
  734. }
  735. });
  736. },
  737. //获取文件
  738. getgetexaminefile(){
  739. this.$http.get('api/auth/file/fileList?type=' + 2 + '&id=' + this.Roomdata.householdId, null).then((res) => {
  740. if (res.status == 200 && res.data.code == 0) {
  741. this.fileListindex = res.data.list
  742. var data=[
  743. {name:'房票转让申请书',empty:false,type: "folder",url:'房票转让申请书',tree:[]},
  744. ]
  745. if(this.fileListindex){
  746. this.fileListindex.forEach((item,index)=>{
  747. if(item.empty==false){
  748. if(item.name=='3、审批后资料'){
  749. item.tree.forEach((nale,ixde)=>{
  750. if(nale.name=='6、房票发放凭证'){
  751. if(nale.tree!=null&&nale.tree.length!=0){
  752. nale.tree.forEach((nana,ixde)=>{
  753. if(nana.name=='房票转让申请书'){
  754. console.log(nale)
  755. if(nale.tree!=null&&nale.tree.length!=0){
  756. nana.tree.forEach((nass)=>{
  757. if(nass.tree&&nass.tree.length!=0){
  758. if(nass.name==this.Roomdata.roomTicketNum){
  759. data[0]=nass
  760. }
  761. }
  762. })
  763. }
  764. }
  765. })
  766. }
  767. }
  768. })
  769. }
  770. }
  771. })
  772. }
  773. this.fileListindex=data
  774. } else {
  775. this.$message.error("查找文件列表失败!");
  776. }
  777. });
  778. },
  779. //删除文件
  780. deleteFile(item) {
  781. var data = new FormData;
  782. data.append("delFileUri", item.url);
  783. data.append("id", this.Roomdata.householdId);
  784. data.append("type", 2);
  785. this.$confirm('确定要删除该文件吗?').then(_ => {
  786. this.$http.post('api/auth/file/removeFile', data).then((res) => {
  787. if (res.status == 200 && res.data.code == 0) {
  788. this.$message.success('删除该文件成功!');
  789. this.getgetexaminefile();
  790. } else {
  791. this.$message.error('删除该文件失败!');
  792. }
  793. })
  794. })
  795. },
  796. nodeClic(val) {
  797. this.dataurl=''
  798. var data = new FormData;
  799. data.append("downloadFileUri", val.url);
  800. data.append("id",this.Roomdata.householdId);
  801. data.append("type",2);
  802. this.$http.post('api/auth/file/download', data, {responseType: 'blob'}).then((res) => {
  803. if (res.headers['content-type'] == "application/octet-stream;charset=utf-8"||res.headers['content-type'] == "application/octet-stream;charset=UTF-8") {
  804. //此处有个坑。这里用content保存文件流,最初是content=res,
  805. //检查了下才发现,后端对文件流做了一层封装,所以将content指向res.data即可
  806. //另外,流的转储属于浅拷贝,所以此处的content转储仅仅是便于理解,并没有实际作用=_=
  807. const content = res.data
  808. const type = {
  809. xml: 'text/xml',
  810. zip: 'application/zip',
  811. doc: 'application/msword',
  812. bin: 'application/octet-stream',
  813. exe: 'application/octet-stream',
  814. so: 'application/octet-stream',
  815. dll: 'application/octet-stream',
  816. pdf: 'application/pdf',
  817. ai: 'application/postscript',
  818. xls: 'application/vnd.ms-excel',
  819. ppt: 'application/vnd.ms-powerpoint',
  820. dir: 'application/x-director',
  821. js: 'application/x-javascript',
  822. swf: 'application/x-shockwave-flash',
  823. xhtml: 'application/xhtml+xml',
  824. xht: 'application/xhtml+xml',
  825. mid: 'audio/midi',
  826. midi: 'audio/midi',
  827. mp3: 'audio/mpeg',
  828. rm: 'audio/x-pn-realaudio',
  829. rpm: 'audio/x-pn-realaudio-plugin',
  830. wav: 'audio/x-wav',
  831. bmp: 'image/bmp',
  832. gif: 'image/gif',
  833. jpeg: 'image/jpeg',
  834. jpg: 'image/jpeg',
  835. png: 'image/png',
  836. css: 'text/css',
  837. html: 'text/html',
  838. htm: 'text/html',
  839. txt: 'text/plain',
  840. xsl: 'text/xml',
  841. mpeg: 'video/mpeg',
  842. mpg: 'video/mpeg',
  843. avi: 'video/x-msvideo',
  844. movie: 'video/x-sgi-movie',
  845. xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  846. }
  847. const blob = new Blob([content], { // 关键代码
  848. type: type[val.url.split('.').pop().toLowerCase()]
  849. }) //构造一个blob对象来处理数据
  850. this.dataurl = window.URL.createObjectURL(blob)
  851. this.Examine=true
  852. }
  853. });
  854. },
  855. RoomC(){
  856. this.$nextTick(function() {
  857. //判断iframe是否存在,不存在则创建iframe
  858. var iframe = document.getElementById("print-iframe");
  859. var el = document.getElementById("RoomC");
  860. iframe = document.createElement('IFRAME');
  861. var doc = null;
  862. iframe.setAttribute("id", "print-iframe");
  863. iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
  864. document.body.appendChild(iframe);
  865. doc = iframe.contentWindow.document;
  866. //这里可以自定义样式
  867. doc.write(
  868. '<style media="print">@page {size: auto;margin: 30mm;}.contractA{width: 100%;height: 100%;color: #000000;}span {word-break: break-all;border-bottom: 1px solid #000;min-width: 50px;display: inline-block;line-height: 3rem;text-align: center;text-indent: 0em;margin:0;line-height: 1.5rem}.contractA-title{width: 100%;text-align: center;font-size: 20px;font-weight: bolder;margin-bottom: 5mm;}.contractA-name{text-indent: 2em;line-height: 2rem;font-size: 18px;}.contractA-bottom{font-size: 18px;margin-top: 7mm;}.contractA-bottom-a{display: flex;}.contractA-bottom-a div{width: 50%;text-align: center;}.contractA-bottom-b{text-align: center;margin-bottom: 7mm;}.contractA-bottom-c{text-align: right;letter-spacing: 3rem;}</style>'
  869. ); //解决出现页眉页脚和路径的问题
  870. doc.write('<div>' + el.innerHTML + '</div>');
  871. doc.close();
  872. iframe.contentWindow.focus();
  873. setTimeout(function() {
  874. iframe.contentWindow.print();
  875. }, 50) //解决第一次样式不生效的问题
  876. if (navigator.userAgent.indexOf("MSIE") > 0) {
  877. document.body.removeChild(iframe);
  878. }
  879. })
  880. },
  881. }
  882. }
  883. </script>
  884. <style scoped lang="less">
  885. .Room{
  886. width: 100%;
  887. height: 100%;
  888. padding: 0 2%;
  889. font-size: 15px;
  890. box-sizing: border-box;
  891. span {
  892. word-break: break-all;
  893. border-bottom: 1px solid #000;
  894. min-width: 50px;
  895. display: inline-block;
  896. line-height: 18px;
  897. text-align: center;
  898. text-indent: 0em;
  899. }
  900. .room-data{
  901. width: 100%;
  902. height: 100%;
  903. display: flex;
  904. li{
  905. width: 33.33%;
  906. height: 100%;
  907. border-right: 2px #000 dashed;
  908. padding: 1%;
  909. box-sizing: border-box;
  910. &:last-child{
  911. border-right: none;
  912. }
  913. .title{
  914. width: 100%;
  915. align-items: center;
  916. .title-top{
  917. width: 100%;
  918. display: flex;
  919. align-items: baseline;
  920. justify-content: space-between;
  921. h3{
  922. font-size: 16px;
  923. font-weight: 600;
  924. width: 45%;
  925. text-align: right;
  926. line-height: 1rem;
  927. }
  928. p{
  929. font-size: 12px;
  930. width: 45%;
  931. text-align: left;
  932. }
  933. }
  934. .title-name{
  935. text-align: center;
  936. font-size: 20px;
  937. color: #000;
  938. font-weight: 500;
  939. margin-bottom: 2rem;
  940. }
  941. }
  942. .dataname{
  943. td{
  944. border-bottom: 1px solid #000;
  945. border-right: 1px solid #000;
  946. }
  947. table{
  948. font-size: 12px;
  949. border-top: 1PX solid #000;
  950. border-left: 1PX solid #000;
  951. }
  952. .table-top{
  953. p{
  954. text-indent: 2em;
  955. }
  956. .table-top-right{
  957. width: 40%;
  958. margin-top: 3rem;
  959. margin-left: 50%;
  960. p{
  961. text-align: inherit;
  962. margin-bottom: 1rem;
  963. }
  964. div{
  965. text-align: end;
  966. letter-spacing: 5mm;
  967. }
  968. }
  969. }
  970. .table-buttom-right{
  971. width: 100%;
  972. margin-top: 6rem;
  973. p{
  974. text-indent: 2em;
  975. }
  976. ul{
  977. display: flex;
  978. width: 80%;
  979. li{
  980. width: 33.33%;
  981. margin: 0;
  982. border: none;
  983. }
  984. }
  985. div{
  986. text-align: end;
  987. letter-spacing: 5mm;
  988. width: 40%;
  989. margin-left: 50%;
  990. }
  991. }
  992. .dataname-neck{
  993. width: 100%;
  994. font-size: 14px;
  995. line-height: 1.5rem;
  996. p{
  997. margin: 0;
  998. width: 100%;
  999. }
  1000. }
  1001. }
  1002. .remarks{
  1003. font-size:12px;
  1004. color: #000;
  1005. font-weight: 600;
  1006. width: 159%;
  1007. // translate: -20% -20%;
  1008. transform: scale(0.63) translate(-29.5%,-29.5%);
  1009. p{
  1010. text-indent: 2em;
  1011. }
  1012. }
  1013. }
  1014. }
  1015. }
  1016. .button-background .el-button{
  1017. border-radius: 5px;
  1018. }
  1019. .SignAcontract{
  1020. position: absolute;
  1021. top: 0;
  1022. right: 0;
  1023. width: 100%;
  1024. height: 100%;
  1025. .indexbutton{
  1026. position: absolute;
  1027. top: 0;
  1028. right: 0;
  1029. width: 100%;
  1030. height: 100%;
  1031. background-color: #00000050;
  1032. ul{
  1033. position: fixed;
  1034. z-index: 11;
  1035. top: 40%;
  1036. left: 25%;
  1037. width: 50%;
  1038. display: flex;
  1039. justify-content: space-evenly;
  1040. li{
  1041. width: 100px;
  1042. height: 150px;
  1043. // background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
  1044. background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  1045. border-radius: 20px;
  1046. line-height: 150px;
  1047. color: #fff;
  1048. font-size: 18px;
  1049. text-align: center;
  1050. cursor: pointer;
  1051. &:nth-child(2){
  1052. // background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
  1053. background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%); background-blend-mode: normal, lighten, soft-light;
  1054. }
  1055. &:nth-child(3){
  1056. // background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
  1057. background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
  1058. }
  1059. }
  1060. }
  1061. }
  1062. .SignAcontract-content{
  1063. position: fixed;
  1064. top: 20%;
  1065. right: 25%;
  1066. z-index: 11;
  1067. display: flex;
  1068. justify-content: space-between;
  1069. flex-wrap: wrap;
  1070. width: 50%;
  1071. height: 60%;
  1072. .SignAcontract-content-right{
  1073. border-radius: 5px;
  1074. width: 100%;
  1075. height: 100px;
  1076. background-color: #fff;
  1077. display: flex;
  1078. justify-content: space-between;
  1079. padding: 20px;
  1080. box-sizing: border-box;
  1081. /deep/.is-finish{
  1082. color: #439dc1;
  1083. border-color: #439dc1;
  1084. }
  1085. /deep/.is-process{
  1086. color: #c0c4cc;
  1087. border-color: #c0c4cc;
  1088. }
  1089. /deep/.el-step{
  1090. // &:nth-child(1){
  1091. // flex-basis: 25% !important;
  1092. // .el-step__line{
  1093. // right: -100%;
  1094. // }
  1095. // }
  1096. // &:nth-child(2){
  1097. // flex-basis: 50% !important;
  1098. // .el-step__line{
  1099. // right: -25%;
  1100. // }
  1101. // }
  1102. // &:nth-child(3){
  1103. // flex-basis: 25% !important;
  1104. // }
  1105. }
  1106. }
  1107. .SignAcontract-content-lent{
  1108. width: 100%;
  1109. height: calc(100% - 125px);
  1110. background-color: #fff;
  1111. border-radius: 5px;
  1112. padding: 20px;
  1113. box-sizing: border-box;
  1114. overflow: auto;
  1115. & {
  1116. scrollbar-width: thin;
  1117. scrollbar-color: #c1c1c1 #eee;
  1118. }
  1119. &::-webkit-scrollbar {
  1120. width: 6px;
  1121. background-color: #eee;
  1122. }
  1123. &::-webkit-scrollbar-thumb {
  1124. background-color: #c1c1c1;
  1125. &:hover {
  1126. background-color: #a8a8a8;
  1127. }
  1128. &:active {
  1129. background-color: #787878;
  1130. }
  1131. }
  1132. .Upload{
  1133. width: 100%;
  1134. height: 100%;
  1135. .Upload-top{
  1136. height: 38px;
  1137. display: flex;
  1138. justify-content: space-between;
  1139. .button-background {
  1140. margin-right: 10px;
  1141. }
  1142. }
  1143. .Upload-butom{
  1144. width: 100%;
  1145. height: 100%;
  1146. // height: calc(100% - 38px);
  1147. .Upload-butom-tow{
  1148. width: 100%;
  1149. height: 40px;
  1150. display: flex;
  1151. h3{
  1152. font-size: 18px;
  1153. color: #439dc1;
  1154. line-height: 40px;
  1155. &::before{
  1156. content: "*";
  1157. color: #f56c6c;
  1158. margin-right: 5px;
  1159. }
  1160. }
  1161. }
  1162. .Upload-butom-ont{
  1163. width: 100%;
  1164. height: calc(50% -20px);
  1165. .tc-middle-add {
  1166. display: flex;
  1167. h3{
  1168. font-size: 18px;
  1169. color: #439dc1;
  1170. margin: 15px 0;
  1171. &::before{
  1172. content: "*";
  1173. color: #f56c6c;
  1174. margin-right: 5px;
  1175. }
  1176. }
  1177. h4{
  1178. font-size: 18px;
  1179. color: #439dc1;
  1180. margin: 15px 0;
  1181. }
  1182. }
  1183. .tc-middle-empty{
  1184. width: 100%;
  1185. img{
  1186. margin: 0 auto;
  1187. display: block;
  1188. }
  1189. }
  1190. .tc-middle-name{
  1191. width: 100%;
  1192. ul{
  1193. width: 100%;
  1194. display: flex;
  1195. li{
  1196. width: 100px;
  1197. height: 110px;
  1198. cursor: pointer;
  1199. margin: 0 10px;
  1200. position: relative;
  1201. border: 1px solid #dedede;
  1202. border-radius: 10px;
  1203. padding: 10px;
  1204. box-sizing: border-box;
  1205. &:hover{
  1206. i{
  1207. display: block;
  1208. }
  1209. }
  1210. i{
  1211. position: absolute;
  1212. top: -9px;
  1213. right: -9px;
  1214. color: #FF4500;
  1215. font-size: 25px;
  1216. display: none;
  1217. }
  1218. img{
  1219. width: 55px;
  1220. margin: 0 auto;
  1221. display: block;
  1222. }
  1223. div{
  1224. width: 100%;
  1225. display: block;
  1226. text-align: center;
  1227. color: #5e5e5e;
  1228. margin: 2px;
  1229. margin-top: 8px;
  1230. overflow: hidden;
  1231. text-overflow: ellipsis;
  1232. word-break: break-all;
  1233. font-size: 14px;
  1234. display: inline-block;
  1235. display: -webkit-box !important;
  1236. -webkit-line-clamp: 1;
  1237. -webkit-box-orient: vertical;
  1238. span {
  1239. display: initial;
  1240. white-space: break-spaces;
  1241. }
  1242. }
  1243. .add{
  1244. width: 100%;
  1245. height: 100%;
  1246. .add-top{
  1247. margin: 0 auto;
  1248. width: 80%;
  1249. height: 60%;
  1250. border: 2px dotted #c6c6c6;
  1251. border-radius: 5px;
  1252. position: relative;
  1253. span{
  1254. display: inline;
  1255. position: absolute;
  1256. top: calc(50% - 15px);
  1257. left: calc(50% - 15px);
  1258. font-size: 30px;
  1259. color: #bbb;
  1260. }
  1261. }
  1262. .add-buttom{
  1263. color: #5e5e5e;
  1264. }
  1265. }
  1266. }
  1267. }
  1268. }
  1269. }
  1270. }
  1271. }
  1272. .SignAcontract-content-lent-data{
  1273. width: 100%;
  1274. height: 1000px;
  1275. span {
  1276. word-break: break-all;
  1277. border-bottom: 1px solid #000;
  1278. min-width: 50px;
  1279. display: inline-block;
  1280. line-height: 18px;
  1281. text-align: center;
  1282. text-indent: 0em;
  1283. }
  1284. td{
  1285. border-bottom: 1px solid #000;
  1286. border-right: 1px solid #000;
  1287. }
  1288. .contractA {
  1289. width: 100%;
  1290. height: calc(100% - 40px);
  1291. padding: 3%;
  1292. font-size: 15px;
  1293. box-sizing: border-box;
  1294. .contractA-title {
  1295. width: 100%;
  1296. text-align: center;
  1297. font-size: 20px;
  1298. font-weight: bolder;
  1299. margin-bottom: 1%;
  1300. }
  1301. .contractA-name {
  1302. text-indent: 2em;
  1303. line-height: 2em;
  1304. font-size: 18px;
  1305. }
  1306. .contractA-bottom {
  1307. margin-top: 2rem;
  1308. font-size: 18px;
  1309. .contractA-bottom-a {
  1310. display: flex;
  1311. line-height: 2rem;
  1312. div {
  1313. width: 50%;
  1314. text-align: center;
  1315. }
  1316. }
  1317. .contractA-bottom-b {
  1318. text-align: center;
  1319. line-height: 2rem;
  1320. margin-bottom: 2rem;
  1321. }
  1322. .contractA-bottom-c {
  1323. text-align: right;
  1324. letter-spacing: 2rem;
  1325. }
  1326. }
  1327. }
  1328. }
  1329. .toexamine{
  1330. height: 500px;
  1331. }
  1332. }
  1333. }
  1334. }
  1335. .FarmerPreferenceCss{
  1336. width: 100%;
  1337. p{
  1338. font-size: 16px;
  1339. color: #439dc1;
  1340. }
  1341. .FarmerPreferenceCss-top{
  1342. width: 100%;
  1343. }
  1344. .FarmerPreferenceCss-buttom{
  1345. ul{
  1346. li{
  1347. display: flex;
  1348. margin: 5px 0;
  1349. span{
  1350. padding: 5px;
  1351. }
  1352. .name{
  1353. padding: 5px;
  1354. border-radius: 5px;
  1355. background-color: #e6a23c;
  1356. color: #fff;
  1357. }
  1358. .ont{
  1359. color: #f56c6c;
  1360. }
  1361. .tow{
  1362. color: #78c951;
  1363. }
  1364. }
  1365. }
  1366. }
  1367. }
  1368. </style>