|
|
@@ -1,69 +1,240 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div style="font-weight: bold; text-align: center;">未来蓝豚居家训练设备租赁协议</div>
|
|
|
- 医院: <br />
|
|
|
- 出租方(甲方): 邯郸鹰扬科技有限公司 <br />
|
|
|
- 联系人： <br />
|
|
|
- 联系电话： <br />
|
|
|
- 承租方(乙方或经办人): <br />
|
|
|
- 身份证号： <br />
|
|
|
- 联系电话： <br />
|
|
|
- 紧急联系人： <br />
|
|
|
- 与乙方的关系： <br />
|
|
|
- 联系电话： <br />
|
|
|
-
|
|
|
- 根据《中华人民共和国民法典》及有关规定，为明确甲乙双方权利义务关系，甲乙双方在平等自愿的前提下，经协商-致签订本协议。如乙方在18周岁以下，请在监护人陪同且同意的情况下签署本协议。具体条款如下:
|
|
|
+ <div style="font-weight: bold; text-align: center;"><h2>未来蓝豚强脑训练设备租赁服务协议</h2></div>
|
|
|
+ <h3>医院:</h3> <br />
|
|
|
+ <div class="row">
|
|
|
+ <!-- 出租方 -->
|
|
|
+ <div class="col">
|
|
|
+ <div class="content-block">
|
|
|
+ <p class="info-item">出租方(甲方):北京耀荣康健医疗科技发展有限公司</p>
|
|
|
+ <p class="info-item">联系人:________</p>
|
|
|
+ <p class="info-item">联系电话:________</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 承租方 -->
|
|
|
+ <div class="col">
|
|
|
+ <div class="content-block">
|
|
|
+ <p class="info-item">承租方(乙方或经办人):________</p>
|
|
|
+ <p class="info-item">身份证号:________</p>
|
|
|
+ <p class="info-item">联系电话:________</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 紧急联系人 -->
|
|
|
+ <div class="col">
|
|
|
+ <div class="content-block">
|
|
|
+ <p class="info-item">紧急联系人________</p>
|
|
|
+ <p class="info-item">与乙方关系:________</p>
|
|
|
+ <p class="info-item">联系电话:________</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> <br />
|
|
|
+
|
|
|
+ 根据《中华人民共和国民法典》及有关规定，为明确甲乙双方权利义务关系，甲乙双方在平等自愿的前提下，经协商-致签订本协议。如乙方在18周岁以下，请在监护人陪同且同意的情况下签署本协议。具体条款如下:
|
|
|
<br /> <span style="font-weight: bold;">第一条租赁标的及期限</span> <br />
|
|
|
- 1.1甲方将未来蓝豚居家训练设备提供给乙方使用，从____年____月____日起到____年___月___ 日止交付给乙方使，租期为_天。 <br />
|
|
|
+ 1.1甲方将未来蓝豚强脑训练设备提供给乙方使用，从____年____月____日起到____年___月___ 日止交付给乙方使，租期为____天。 <br />
|
|
|
|
|
|
租金:_____元(大写_______元整) ;押金:______元(大写_______元整)。 <br />
|
|
|
- <span style="font-weight: bold;">第二条支付方式、发票 </span><br />
|
|
|
- 2.1甲方提供支付宝、微信、银行卡、信用卡等支付方式，乙方应于本合同签订之日一次性支付全额租金和押金。 <br />
|
|
|
- 2.2租赁期限届满，乙方应及时将设备归还甲方，甲方收到设备后经检测确认无损坏后的3个工作日内无息退还押金，如遇节假日则顺延。 <br />
|
|
|
- <span style="font-weight: bold;"> 第三条租赁期限、续租</span> <br />
|
|
|
- 3.1租赁期内，乙方提前终止协议需与甲方达成致，若未经允许擅自终止协议、归还设备，乙方需要按原租期计算租金，不退已交租金，如发生经甲方认可的不可抗力因素导致乙方不能继续租赁，本协议租期自乙方、乙方委托人、紧急联系人或合法继承人归还设备之日终止。
|
|
|
+ <span style="font-weight: bold;">第二条支付方式及发票 </span><br />
|
|
|
+ 2.1甲方提供微信支付方式，乙方应于本合同签订之日一次性支付全额租金和押金。 <br />
|
|
|
+ 2.2租赁期限届满，乙方应及时将设备归还甲方，甲方收到设备后经检测确认无损坏后的3个工作日内无息退还押金，如遇节假日则顺延。 <br />
|
|
|
+ <span style="font-weight: bold;"> 第三条租赁期限及续租</span> <br />
|
|
|
+ 3.1租赁期内，乙方提前终止协议需与甲方达成一致，若未经允许擅自终止协议、归还设备，乙方需要按原租期计算租金，不退已交租金，如发生经甲方认可的不可抗力因素导致乙方不能继续租赁，本协议租期自乙方、乙方委托人、紧急联系人或合法继承人归还设备之日终止。
|
|
|
|
|
|
- <br />3.2租赁期满后，乙方归还设备，经甲方检测并结清费用后，本协议终止。 <br />
|
|
|
+ <br /> 3.2租赁期满后，乙方应将设备归还甲方。甲方在收到设备后将进行检测，确认设备状态符合归还标准。在乙方结清所有相关费用（包括但不限于租金、押金、违约金及其他可能产生的费用）后，本协议终止。 <br />
|
|
|
|
|
|
- 3.3如乙方需续租，可在租赁期满前10个工作日向甲方申请，甲方同意后，甲乙双方另行签订合同，支付租金;或乙方通过租赁设备自行进行续费操作。在续租的情况下，原合同已支付押金直接转为新租赁合同的押金，无需另行支付。续租收费标准如附件1，甲方可能会对续租收费进行调整，如调整，届时还请以续租时展示为准。
|
|
|
+ 3.3如乙方需续租，可在租赁期满前10个工作日向甲方申请，甲方同意后，甲乙双方另行签订合同，支付租金；或乙方通过租赁设备进行续费操作。在续租的情况下，原合同已支付设备押金直接转为新租赁合同的设备押金，无需另行支付。续租收费标准见附件1。甲方保留对续租收费进行调整的权利。如遇调整，续租时的具体收费标准将以甲方在续租时公布的最新标准为准。
|
|
|
<br /><span style="font-weight: bold;">第四条甲乙双方权利与义务 </span><br />
|
|
|
- 4.1甲方在租赁期间拥有租赁设备的所有权，乙方在租赁期间拥有租赁设备的合法使用权。 <br />
|
|
|
+ 4.1甲方在租赁期间拥有租赁设备的所有权，乙方在租赁期间拥有租赁设备的合法使用权。 <br />
|
|
|
|
|
|
- 4.2乙方全额支付租金和押金后，甲方应当向乙方提供运行正常的设备、自然故障的维修及更换，保证设备配置与清单一致。 <br />
|
|
|
+ 4.2乙方全额支付租金和押金后，甲方应当向乙方提供运行正常的设备、自然故障的维修及更换，保证设备配置与清单一致。 <br />
|
|
|
|
|
|
- 4.3租赁期间因设备正常折旧而导致设备无法正常使用或使用故障、设备自然产生的硬件故障由甲方免费更换，因软件问题导致的使用问题由甲方协助解决。
|
|
|
- <br />4.4乙方因不当使用造成租赁设备损坏导致维修的，甲方有权按照陪偿标准价目表(见附件2)从押金中划扣相应费用，乙方应于划扣后3个自然日内补足押金，3日后乙方未补足足押金的，每逾期1日，甲方在结算租金时有权加收乙方未补足押金部分的百分之一。设备维修期间计入乙方租赁期间并正常计费。
|
|
|
- <br />4.5因乙方原因导致租赁设备失去维修价值或无法维修的，甲方有权直接扣除乙方全部押金作为抵扣。全部押金不足以抵扣租赁设备的，乙方应在甲方提出补偿请求后3个工作日内足额补偿。
|
|
|
- <br />4.6乙方在租赁期限届满后未归还设备，甲方有权维续按协议约定标准收取相应相金，并有权扣除押金、要求乙方归还相资设备、支付逾期使用设备的租金。
|
|
|
+ 4.3租赁期间因设备正常折旧而导致设备无法正常使用或使用故障、设备自然产生的硬件故障由甲方免费更换，因软件问题导致的使用问题由甲方协助解决。
|
|
|
+ <br /> 4.4乙方因不当使用造成租赁设备损坏导致维修的，甲方有权按照赔偿标准价目表(见附件2)从押金中划扣相应费用，乙方应于划扣后3个自然日内补足押金，3日后乙方未补足押金的，每逾期1日，甲方在结算租金时有权加收乙方未补足押金部分的1%。设备维修期间仍视为租赁期的一部分，乙方需按照合同约定的租赁费用标准继续支付费用。
|
|
|
+ <br /> 4.5因乙方原因导致租赁设备失去维修价值或无法维修的，甲方有权直接扣除乙方全部押金作为抵扣。全部押金不足以抵扣租赁设备的，乙方应在甲方提出补偿请求后3个工作日内足额补偿。
|
|
|
+ <br /> 4.6乙方在租赁期限届满后未归还设备，甲方有权继续按协议约定标准收取相应租金，并有权扣除押金，要求乙方归还相应设备，支付逾期使用设备的租金。
|
|
|
<br /> <span style="font-weight: bold;"> 第五条安全权利与义务</span>
|
|
|
- <br />5.1在乙方使用甲方产品与服务的过程中，甲方将采取技术措施和其他必要措施(数据安全技术措施等)尽力保证网络安全、稳定运行，并防范网络违法犯罪活动。同时，乙方应遵守相关法律法规，不应从事违反法律法规的规定或影响网站安全的行为，包括但不限于:违反网络安全规定和危害计算机信息网络安全的活动:如破坏或企图破坏智安全保护措施，对服务及相关软硬件设施进行破解、破坏、删除、修改或者增加的;对计算机信息网络中存储或者传输的数据和应用程序进行删除、修改或者增加的;使用软件或硬件等方式窃取信息数据、非法入侵系统，包括接触未经许可的数据或进入未经许可的服务器、帐户等;故意制作、传播计算机病毒等破坏性程序的;其他危害计算机信息网络安全的活动。
|
|
|
+ <br /> 5.1在乙方使用甲方产品与服务的过程中，甲方将采取技术措施和其他必要措施(数据安全技术措施等)尽力保证网络安全、稳定运行，并防范网络违法犯罪活动。同时，乙方应遵守相关法律法规，不应从事违反法律法规或影响网站安全的行为，包括但不限于：违反网络安全规定和危害计算机信息网络安全的活动:如破坏或企图破坏安全保护措施，对服务及相关软硬件设施进行破解、破坏、删除、修改或者增加的；对计算机信息网络中存储或者传输的数据和应用程序进行删除、修改或者增加的；使用软件或硬件等方式窃取信息数据、非法入侵系统，包括接触未经许可的数据或进入未经许可的服务器账户等；故意制作、传播计算机病毒等破坏性程序的；其他危害计算机信息网络安全的活动。
|
|
|
|
|
|
- <br />5.2依据《网络安全法》、《数据安全法》、《个人信息保护法》等法律法规，甲方依法保障您对个人信息的权益，包含用户知情权、 用户访问权、用户纠正权、用户被遗忘权、用户可携带权、用户拒绝权、用户限制处理权等。
|
|
|
+ <br /> 5.2依据《网络安全法》、《数据安全法》、《个人信息保护法》等法律法规，甲方依法保障您对个人信息的权益，包含用户知情权、 用户访问权、用户纠正权、用户被遗忘权、用户可携带权、用户拒绝权、用户限制处理权等。
|
|
|
|
|
|
- <br />5.3未经乙方事先书面同意，甲方不得与甲方以外的任何公司、组织、个人共享、协作、委托处理、转让、公开披露乙方的个人信息。
|
|
|
- <br />5.4为了向乙方提供更完善、优质的产品和服务，某些服务将由合作方提供，基于乙方的单独同意，甲方仅会出于合法、正当、必要、特 定明确的目的，对乙方的个人信息进行共享或协作，井且只会共享、协作为提供服务所必要的个人信息。
|
|
|
+ <br /> 5.3未经乙方事先书面同意，甲方不得与甲方以外的任何公司、个织、个人共享、协作、委托处理、转让、公开披露乙方的个人信息。
|
|
|
+ <br /> 5.4为了向乙方提供更完善、优质的产品和服务，某些服务将由合作方提供，基于乙方的单独同意，甲方仅会出于合法、正当、必要、特 定明确的目的，对乙方的个人信息进行共享或协作，井且只会共享、协作为提供服务所必要的个人信息。
|
|
|
甲方不会共享可以识别身份的个人信息，除非法律法规另有规定。 <br />
|
|
|
- 5.5因法律法规、行业要求或其他涉及重大、实质性变更，导致本协议的更新或删减，甲方将依据具体情况以合适的方式通知乙方。 <br />
|
|
|
+ 5.5因法律法规、行业要求或其他涉及重大、实质性变更，导致本协议的更新或删减，甲方将依据具体情况以合适的方式通知乙方。 <br />
|
|
|
<span style="font-weight: bold;">第六条隐私政策</span> <br />
|
|
|
- 6.1本协议所指的“隐私“包括《电信和互联网用户个人信息保护规定》第4条规定的用户个人信息内容以及未来不时制定或修订的法律法规中明确规定的隐私应包括的内容。
|
|
|
- <br />6.2当乙方接受并使用租赁服务时，甲方即认为乙方已仔细阅读并理解、接受本协议，在服务开始后，乙方应提供不小于甲方服务开展所必要的个人信息，在此过程中，甲方承诺不会泄露乙方个人信息，并将履行安全义务，采用有效的安全技术措施保护个人信息和数据。
|
|
|
- <br />6.3当服务结束时，为保障乙方隐私及信息安全，乙方需自行清理或处理保存在租赁设备中的相关数据、信息。服务期结束后，甲方将抹除设备上所有信息和数据，甲方不对设备中的相关信息进行保存，因乙方原因导致的信息丢失等风险由乙方自行承担。
|
|
|
+ 6.1本协议所指的“隐私“包括《电信和互联网用户个人信息保护规定》第4条规定的用户个人信息内容以及未来不时制定或修订的法律法规中明确规定的隐私应包括的内容。
|
|
|
+ <br /> 6.2当乙方接受并使用租赁服务时，甲方即认为乙方已仔细阅读并理解、接受本协议，在服务开始后，乙方应提供不小于甲方服务开展所必要的个人信息，在此过程中，甲方承诺不会泄露乙方个人信息，并将履行安全义务，采用有效的安全技术措施保护个人信息和数据。
|
|
|
+ <br /> 6.3当服务结束时，为保障乙方隐私及信息安全，乙方需自行清理或处理保存在租赁设备中的相关数据、信息。服务期结束后，甲方将抹除设备上所有信息和数据，甲方不对设备中的相关信息进行保存，因乙方原因导致的信息丢失等风险由乙方自行承担。
|
|
|
<br /><span style="font-weight: bold;">第七条违约责任及争议处理 </span><br />
|
|
|
- 7.1任何- -方违反本协议约定，均视为违约，违约方应赔偿由此给守约方造成的全部损失，包括但不限于直接损失、诉讼费、律师费、差旅费、公证费、保全费等。
|
|
|
+ 7.1任何- -方违反本协议约定，均视为违约，违约方应赔偿由此给守约方造成的全部损失，包括但不限于直接损失、诉讼费、律师费、差旅费、公证费、保全费等。
|
|
|
<br />
|
|
|
- 7.2因本协议引起的或与本协议有关的任何争议或素赔，双方应首先争取通过友好协商解决该等争议。如果双方未能通过友好协商解决争议，任何-方均有权向甲方住所地有管辖权的人民法院起诉，通过诉讼方式解决。
|
|
|
+ 7.2因本协议引起的或与本协议有关的任何争议或素赔，双方应首先争取通过友好协商解决该等争议。如果双方未能通过友好协商解决争议，任何-方均有权向甲方住所地有管辖权的人民法院起诉，通过诉讼方式解决。
|
|
|
<br />
|
|
|
- 乙方需提供本人或监护人的身份证复印件和准确的联系方式(包括但不限于手机号码)，租赁期内，乙方联系方式发生变更时应及时通知 甲方，否则，由此导致电话信息失联、租赁设备丢失等损失均由乙方承担。本协议式二份，协议双方各执份，
|
|
|
- 自甲方盖章且乙方签字之日起生效。 <br />
|
|
|
+ 乙方需提供本人或监护人的身份证复印件和准确的联系方式(包括但不限于手机号码)，租赁期内，乙方联系方式发生变更时应及时通知 甲方，否则，由此导致电话信息失联、租赁设备丢失等损失均由乙方承担。本协议式二份，协议双方各执份，
|
|
|
+ 自甲方盖章且乙方签字之日起生效。 <br /><br />
|
|
|
+
|
|
|
+ 承租人（乙方或经办人）确认签字：
|
|
|
+ <br /><br />
|
|
|
+ <!-- 方案2：间距固定布局 -->
|
|
|
+ <div class="attachment-container-fixed">
|
|
|
+ <span class="attachment-item" @click="attachmentOne=true">附件一</span>
|
|
|
+ <span class="attachment-item" @click="attachmentTwo=true">附件二</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog title="附件一" :visible.sync="attachmentOne" width="40%" append-to-body>
|
|
|
+ <div style="height: 68vh; overflow-x: hidden;">
|
|
|
+ <span style="font-weight: bold;">一、租赁期限与收费标准</span><br/>
|
|
|
+ 我们为医疗器械产品提供灵活的租赁期限选择，包括月度、季度、半年度和年度租赁。<br/>
|
|
|
+ 以下是不同租赁期限的收费标准：<br/>
|
|
|
+ 1.月度租赁<br/>
|
|
|
+ 1)租金：人民币460元/月。<br/>
|
|
|
+ 2)押金：根据设备价值，在合同签订时一次性支付人民币1200元。<br/>
|
|
|
+ 3)其他费用：如有特殊需求，将根据实际情况另行协商确定。<br/>
|
|
|
+
|
|
|
+ 2.季度租赁<br/>
|
|
|
+ 1)租金：人民币1380元/月。<br/>
|
|
|
+ 2)押金：同月度租赁押金（人民币1200元）。<br/>
|
|
|
+ 3)其他费用：如有特殊需求，将根据实际情况另行协商确定。<br/>
|
|
|
+
|
|
|
+ 3.半年度租赁<br/>
|
|
|
+ 1)租金：人民币2760元/月。<br/>
|
|
|
+ 2)押金：同月度租赁押金（人民币1200元）。<br/>
|
|
|
+ 3)其他费用：如有特殊需求，将根据实际情况另行协商确定。<br/>
|
|
|
|
|
|
- 承租人（乙方或经办人）确认签字：
|
|
|
+ 4.年度租赁<br/>
|
|
|
+ 1)租金：人民币5520元/月。<br/>
|
|
|
+ 2)押金：同月度租赁押金（人民币1200元）。<br/>
|
|
|
+ 3)其他费用：如有特殊需求，将根据实际情况另行协商确定。<br/>
|
|
|
+ <span style="font-weight: bold;">二、费用支付方式</span><br/>
|
|
|
+ 1.租金支付：根据租赁期限的不同，租金可以按月度、季度、半年度或年度支付。<br/>
|
|
|
+ 2.押金支付：在合同签订时一次性支付人民币1200元。<br/>
|
|
|
+ 3.其他费用支付：如有特殊需求，将根据实际情况协商确定支付方式和时间。<br/>
|
|
|
+ <span style="font-weight: bold;">三、续租条件与流程</span><br/>
|
|
|
+ 1.续租条件：<br/>
|
|
|
+ 1) 如乙方需续租，可在租赁期满前10个工作日向甲方申请，甲方同意后，甲乙双方另行签订合同，支付 租金；或乙方通过租赁设备进行续费操作。<br/>
|
|
|
+ 2) 在续租的情况下，原合同已支付设备押金直接转为新租赁合同的设备押金，无需另行支付。<br/>
|
|
|
+ 3) 续租收费标准如本标准，甲方保留对续租收费进行调整的权利。如遇调整，续租时的具体收费标准将 以甲方在续租时公布的最新标准为准。<br/>
|
|
|
+ <span style="font-weight: bold;">四、违约责任</span><br/>
|
|
|
+ 1.如客户未按时支付租金或押金，我们有权解除合同并要求客户承担相应责任。<br/>
|
|
|
+ 2.如因客户原因导致设备损坏或丢失，客户需按设备价值进行赔偿。<br/>
|
|
|
+ <span style="font-weight: bold;">五、其他条框</span><br/>
|
|
|
+ 1.本收费标准自合同签订之日起生效，如有变更，我司将提前通知客户。<br/>
|
|
|
+ 2.本收费标准最终解释权归我司所有。
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="attachmentOne = false">关 闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
+ <el-dialog title="附件二" :visible.sync="attachmentTwo" width="40%" append-to-body>
|
|
|
+ <div>
|
|
|
+ <span style="font-weight: bold;">租赁设备包括以下物料及价格：</span><br/>
|
|
|
+ <el-table :data="attachmentTwoList">
|
|
|
+ <el-table-column prop="id" label="序号"/>
|
|
|
+ <el-table-column prop="itemName" label="物料名称"/>
|
|
|
+ <el-table-column prop="Specifications" label="规格型号"/>
|
|
|
+ <el-table-column prop="unit" label="单位"/>
|
|
|
+ <el-table-column prop="unitPrice" label="单价(人民币)"/>
|
|
|
+ </el-table><br/>
|
|
|
+ 总金额：人民币 1200 元<br/>
|
|
|
+ 以上价格为租赁设备的初始购买成本，用于计算押金及相关费用。
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="attachmentTwo = false">关 闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ attachmentOne: false,
|
|
|
+ attachmentTwo: false,
|
|
|
+ attachmentTwoList:[
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ itemName: "主板",
|
|
|
+ Specifications: "T616 6+128G",
|
|
|
+ unit: "块",
|
|
|
+ unitPrice: 388
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ itemName: "屏幕",
|
|
|
+ Specifications: "11.97寸（触摸+显示）一体",
|
|
|
+ unit: "块",
|
|
|
+ unitPrice: 363
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ itemName: "摄像头",
|
|
|
+ Specifications: "5+13MP",
|
|
|
+ unit: "组",
|
|
|
+ unitPrice: 67
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ itemName: "后壳",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 88
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ itemName: "电池",
|
|
|
+ Specifications: "8000毫安",
|
|
|
+ unit: "块",
|
|
|
+ unitPrice: 86
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ itemName: "喇叭",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 36
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ itemName: "麦克风",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 26
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ itemName: "卡槽",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 24
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ itemName: "充电器",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 40
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ itemName: "平板包",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 42
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ itemName: "平板保护壳",
|
|
|
+ Specifications: "-",
|
|
|
+ unit: "个",
|
|
|
+ unitPrice: 40
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -72,4 +243,79 @@ div{
|
|
|
line-height: 26px;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px; /* 列间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.col {
|
|
|
+ flex: 1; /* 三列等宽 */
|
|
|
+ min-width: 0; /* 防止内容溢出 */
|
|
|
+}
|
|
|
+
|
|
|
+.content-block {
|
|
|
+ background: #f8f9fa;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+h3 {
|
|
|
+ margin-top: 0;
|
|
|
+ color: #2c3e50;
|
|
|
+ border-bottom: 1px solid #dee2e6;
|
|
|
+ padding-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ margin: 8px 0;
|
|
|
+ color: #6c757d;
|
|
|
+ font-size: 0.9em;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+/* 公共样式 */
|
|
|
+.attachment-item {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4px 8px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #495057;
|
|
|
+ margin: 4px 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 方案2：固定间距布局 */
|
|
|
+.attachment-container-fixed {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px; /* 固定间距 */
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加悬停效果 */
|
|
|
+.attachment-item:hover {
|
|
|
+ background: #e9ecef;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加下划线动画 */
|
|
|
+.attachment-item {
|
|
|
+ position: relative;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.attachment-item::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 0%;
|
|
|
+ height: 2px;
|
|
|
+ background: #0d6efd;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+}
|
|
|
+.attachment-item:hover::after {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
hurixing