system-copyright-react/src/components/ContractText/ContractText.tsx

import './ContractText.css'
export default function ContractText(props: any) {
    const height = window.innerHeight - 200;
    // 乙方姓名
    const name = import.meta.env.VITE_NAME?import.meta.env.VITE_NAME:'河北雄安秒著科技有限公司（以下简称“AI喵著网”）';
    // 乙方地址
    const address = import.meta.env.VITE_ADRESS?import.meta.env.VITE_ADRESS:'中国（河北）自由贸易试验区雄安片区容东明朗南街131号';
    // 乙方电话;
    const phone = import.meta.env.VITE_PHONE?import.meta.env.VITE_PHONE:'400-086-1633';
    // 乙方签字公司
    const subName = import.meta.env.VITE_SUBNAME?import.meta.env.VITE_SUBNAME:'河北雄安秒著科技有限公司';
    return (
        <div className='contract' style={{ height: height, overflow: 'auto', padding: '20px 90px' }}>
            <div className='contractTitle contractTextCenter contractTextBold'>AI喵著网用户服务协议</div>
            <div className='contractNum contractText'>合同编号：</div>
            <div className='contractBox'>
                <div>甲方名称：<span className='contractLine'>{props.name}</span></div>
                <div>联系地址：<span className='contractLine'>{props.address}</span></div>
                <div>联系电话：<span className='contractLine'>{props.phone}</span></div>
            </div>

            <div className='contractBox'>
                <div>乙方名称：<span className='contractLine'>{name}</span></div>
                <div>联系地址：<span className='contractLine'>{address}</span></div>
                <div>联系电话：<span className='contractLine'>{phone}</span></div>
            </div>
            <div className='contractBox'>
                <div className='contractText'>甲乙双方在平等互利基础上一致同意建立友好合作关系，根据《中华人民共和国民法典》之规定，由乙方向甲方有偿提供AI喵著网在线服务，并达成本协议。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>一、服务内容</div>
                <div className='contractText'>1.1 根据甲乙双方约定，甲方同意由乙方负责实施甲方通过乙方AI喵著网（网址：https://www.aimzhu.com/）所下单的相关业务，甲方在AI喵著网上注册账户，其注册的下单账号为：***********。</div>
                <div className='contractText'>1.2 根据甲乙双方约定，乙方为甲方通过AI喵著网提供相关服务，服务内容以甲方通过AI喵著网具体下单选择的服务类型为准。平台提供的服务类型有全托管与写材料两类，服务清单如下所示：</div>
                <table border={1} style={{ borderCollapse: 'collapse', width: '100%' ,marginTop:10}}>
                   
                    <tbody>
                        <tr>
                            <td colSpan={2} style={{ textAlign: 'center',width: '50%',fontWeight:'700',background:'rgb(218, 218, 218)' }}>全托管</td>
                            <td colSpan={2} style={{ textAlign: 'center',width: '50%',fontWeight:'700',background:'rgb(218, 218, 218)' }}>写材料</td>
                        </tr>
                        <tr>
                            <td colSpan={2} style={{fontWeight:'700'}}>提供服务</td>
                            <td colSpan={2} style={{fontWeight:'700'}}>提供服务</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center', width: '8%'}}>1</td>
                            <td >包可运行软件开发与搭建</td>
                            <td style={{ textAlign: 'center', width: '8%' }}>1</td>
                            <td >通过平台自己搭建可运行软件</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>2</td>
                            <td>包软著鉴别材料撰写</td>
                            <td style={{ textAlign: 'center' }}>2</td>
                            <td>包软著鉴别材料撰写</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>3</td>
                            <td>包软著国内登记</td>
                            <td style={{ textAlign: 'center' }}>3</td>
                            <td>包软著补正材料撰写</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>4</td>
                            <td>包软著下证</td>
                            <td style={{ textAlign: 'center' }}>4</td>
                            <td>第一次申请不通过可全额退款</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>5</td>
                            <td>包开发票</td>
                            <td style={{ textAlign: 'center' }}>5</td>
                            <td>第一次补正退订单金额的30%，并提供补正材料撰写</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>6</td>
                            <td>提供可运行软件安装包</td>
                            <td style={{ textAlign: 'center' }}>6</td>
                            <td>第二次补正退订单金额的70%，并提供补正材料撰写（注：两次补正后订单结束）</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>7</td>
                            <td>提供可运行软件云服务900天</td>
                            <td style={{ textAlign: 'center' }}>7</td>
                            <td>包开发票</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>8</td>
                            <td>提供可运行软件演示视频</td>
                            <td style={{ textAlign: 'center' }}>8</td>
                            <td>提供可运行软件云服务300天</td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'center' }}>9</td>
                            <td >客服一对一服务</td>
                            <td style={{ textAlign: 'center' }}>9</td>
                            <td >客服一对一服务</td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>二、服务价格以及付款方式</div>
                <div className='contractText'>2.1 金额：以平台在线充值为准。</div>
                <div className='contractText'>2.2 付款方式：详细操作按乙方网站（https://www.aimzhu.com/）上付款页面进行。付款后甲方可在线登记发票信息，登记后3个工作日内乙方开具数电发票通过平台发送给甲方注册的账号，甲方可自行下载。</div>
                <div className='contractText'>2.3服务价格：服务价格以通过AI喵著网下单时显示价格为准。乙方有权调整价格，乙方保证价格不会高于甲方注册账号后第一次下单的价格。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>三、双方权利义务</div>
                <div>（一）甲方权利义务</div>
                <div className='contractText'>3.1 甲方在使用乙方提供的服务时应遵守乙方网站上的操作流程和使用方法。</div>
                <div className='contractText'>3.2 甲方不可将乙方提供的服务用于非法用途，发布非法信息。</div>
                <div className='contractText'>3.3 甲方不可将乙方提供的服务转租借于任何第三方使用，甲方对甲方注册账户名下的一切活动承担责任。</div>
                <div className='contractText'>3.4 甲方应在约定的时间内履行相应费用的支付义务。</div>
                <div className='contractText'>3.5 甲方应及时提供乙方需要其提供必要的资料和配合乙方完成服务所需要的工作。</div>
                <div>（二）乙方权利义务</div>
                <div className='contractText'>3.6 数据安全：乙方应采取必要的技术手段以保证甲方存储在乙方服务器上的数据安全性。</div>
                <div className='contractText'>3.7 数据保密：甲方存储在乙方服务器上的数据的公开级别完全由甲方自己设置，乙方在未经甲方允许的情况下不得擅自更改其设置，对于甲方设置为不公开的信息，乙方不得有意或者无意泄漏给任何第三方。甲方购买的服务有效期过期后，乙方仍须履行数据保密义务，直至甲方保存在乙方服务器上的数据被完全销毁。</div>
                <div className='contractText'>3.8 服务质量：乙方应竭力为甲方提供稳定而高效的服务，并不断改进（改进服务不另向甲方收费）。乙方应保证服务器可用性在99％以上，在工作时间内应有专人为甲方提供电话技术支持（客户服务热线：400-086-1633）。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>四、知识产权及保密条款</div>
                <div className='contractText'>4.1 甲方在本协议履行过程中向乙方提供的信息以及由此而产生的相关结果，其知识产权归甲方所有；乙方应对以上信息保密，乙方不得向任何其他第三方公开以上信息。</div>
                <div className='contractText'>4.2 保密义务不适用于以下几种信息情况：</div>
                <div className='contractText'>4.2.1 信息在收到或发出时已经处于公共领域或之后被公众广泛获知；</div>
                <div className='contractText'>4.2.2 信息接收方在收到信息时已经拥有了该信息，且并非从信息披露方直接或间接的获得的；</div>
                <div className='contractText'>4.2.3 从第三方获得或正当接收，且信息披露方没有对信息接收方设置任何保密限制的信息；</div>
                <div className='contractText'>4.2.4 信息接收方在未违背协议的情况下独立研发而得到的信息；</div>
                <div className='contractText'>4.2.5 依照法院或政府机构命令或所适用法律、法规的要求而透露的信息。</div>
                <div className='contractText'>4.3 保密期限：乙方对以上保密信息负有永久保密义务，并且甲方可随时登录乙方平台删除数据，对于已删除的数据，乙方将不再保存。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>五、保证条款</div>
                <div className='contractText'>5.1 甲方承诺在乙方AI喵著网上注册账户所提供的相关信息均真实、准确、完整，且注册账户名称不违反法律法规规定或公序良俗。</div>
                <div className='contractText'>5.2 甲方承诺遵守所适用的有关法律、法规和其他规范性文件的规定，不得要求乙方从事违反法律规范的服务。如涉及相关违反法律规范的信息，乙方有权拒绝提供服务，或在发现后停止服务，删除不符合要求的信息，如涉嫌违法，乙方有权保存有关记录并向国家有关机关报告。</div>
                <div className='contractText'>5.3 甲方承诺使用AI喵著网搭建的可运行系统用于合法的目的和用途，在可运行系统上不得发布涉密与违反法律规范的信息，乙方有权查看甲方在可运行系统上发布的相关信息，并有权对违规信息进行删除。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>六、违约责任</div>
                <div className='contractText'>6.1 甲方未能履行本协议约定的义务，乙方有权单方解除本协议，并停止给甲方提供本协议约定的服务，也无需向甲方退还任何款项，且因甲方违约而给乙方造成损失的，乙方有权向甲方追偿。</div>
                <div className='contractText'>6.2 乙方未能履行本协议约定的义务，甲方有权单方解除本协议，且因乙方违约而给甲方造成损失的，甲方有权向乙方追偿。</div>
                <div className='contractText'>6.3 违约方应赔偿守约方的损失，赔偿金额为违约定单的金额。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>七、免责条款</div>
                <div className='contractText'>因下列情形之一不能为甲方提供服务或者造成甲方数据丢失，乙方无须承担任何责任：</div>
                <div className='contractText'>7.1 由于地震、战争、洪水、国家政策等不可抗力；</div>
                <div className='contractText'>7.2 由于服务器网络接入服务提供商（电信、网通、IDC机房等）原因造成的网络中断；</div>
                <div className='contractText'>7.3 由于操作系统软件漏洞、病毒、黑客等因素乙方免责，但乙方应尽防范义务，包括但不限于服务器专人管理、及时安装系统更新、安装防火墙、定期数据备份等；</div>
                <div className='contractText'>7.4 由于国家、地方政府政策、法律因素暂停AI喵著网等；</div>
                <div className='contractText'>7.5 因相关政府职能部门审查需要暂停相关服务。</div>
            </div>


            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>八、争议的解决</div>
                <div className='contractText'>本协议适用中华人民共和国法律。所有涉及本协议的争议，先友好协商，如协商不成，双方共同约定由原告方所在地人民法院管辖。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold'>九、其他</div>
                <div className='contractText'>9.1 本协议未约定的事宜，以AI喵著网《用户服务协议》（网址：https://www.aimzhu.com/UserAgreement.html）的约定为准。</div>
                <div className='contractText' >9.2 本协议自双方签字或盖章后成立。本协议壹式贰份，甲、乙双方各执壹份，经双方签章后生效，双方约定传真件与扫描件与原件拥有同等法律效力。</div>
                <div className='contractText'>9.3本协议自甲方向乙方支付本协议2.1条的服务费用时或使用乙方所提供的有尝服务时生效。</div>
                <div className='contractText'>9.4 本协议未尽事宜，双方经友好协商可达成补充协议，补充协议与本协议不一致的，以补充协议为准。</div>
            </div>

            <div className='contractBox'>
                <div className='contractTitleTwo contractTextBold contractTextCenter'>签字页</div>
                <div className='contractBox'>
                    <div className='contractBox'>
                        <div className='contractText'>甲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：<span className='contractLine'>{props.name}</span></div>
                        <div className='contractText signBox'>
                            <div>甲方授权代表签字：</div>
                            <div className='sign'></div>
                        </div>
                        <div className='contractText'>日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：  </div>
                    </div>
                    <div className='contractBox'>
                        <div className='contractText' >乙&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：<span className='contractLine'>{subName}</span></div>
                        <div className='contractText signBox'>
                            <div>乙方授权代表签字：</div>
                            <div className='sign'></div>
                        </div>
                        <div className='contractText'>日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</div>
                    </div>
                </div>
            </div>

        </div>
    )
}