| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <view class="agreement-page">
- <!-- 1. 自定义导航栏：解决蓝线 -->
- <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
- <view class="nav-content">
- <view class="back-area" @click="goBack">
- <text class="back-arrow"></text>
- </view>
- <view class="nav-title">用户协议</view>
- <view class="right-placeholder"></view>
- </view>
- </view>
- <scroll-view scroll-y class="content-scroll" :style="{ height: scrollHeight }">
- <view class="article-body">
- <view class="title">ERP 系统用户服务协议</view>
- <view class="update-time">最近更新日期：2024年04月28日</view>
- <rich-text :nodes="agreementNodes"></rich-text>
- <view class="footer-tip">本协议由广东粤铝材实业有限公司负责解释。</view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- statusBarHeight: 20,
- agreementNodes: `
- <div style="line-height: 1.8; color: #444; font-size: 14px;">
- <h3 style="color: #000; margin-top: 20px;">1. 账户注册与安全</h3>
- <p>您必须使用真实手机号进行授权登录。您应对账号下的所有活动负责，严禁将账号转借或转让他人使用。</p>
- <h3 style="color: #000; margin-top: 20px;">2. 订购规范</h3>
- <p>用户在提交订单前应核实型号、规格及数量。订单一旦系统确认进入生产环节，不可随意撤回。</p>
- <h3 style="color: #000; margin-top: 20px;">3. 知识产权</h3>
- <p>本平台所有技术文档、图纸及界面设计均受法律保护，未经许可不得擅自抓取或仿造。</p>
- </div>
- `
- }
- },
- computed: {
- scrollHeight() {
- return `calc(100vh - ${this.statusBarHeight + 44}px)`;
- }
- },
- onLoad() {
- const info = uni.getSystemInfoSync();
- this.statusBarHeight = info.statusBarHeight;
- },
- methods: {
- goBack() { uni.navigateBack(); }
- }
- }
- </script>
- <style scoped>
- .agreement-page { width: 100vw; height: 100vh; background: #ffffff; display: flex; flex-direction: column; }
-
- /* 自定义导航栏样式 */
- .custom-navbar { background: #fff; flex-shrink: 0; }
- .nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
- .back-area { width: 60rpx; height: 44px; display: flex; align-items: center; }
- .back-arrow { width: 22rpx; height: 22rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
- .nav-title { font-size: 34rpx; font-weight: bold; color: #333; }
- .right-placeholder { width: 60rpx; }
- .content-scroll { width: 100%; }
- .article-body { padding: 40rpx; padding-top: 20rpx; }
- .title { font-size: 40rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 16rpx; text-align: center; }
- .update-time { font-size: 24rpx; color: #999; margin-bottom: 40rpx; text-align: center; }
- .footer-tip { margin-top: 60rpx; padding: 30rpx; background: #f8fafc; font-size: 24rpx; color: #888; text-align: center; }
- </style>
|
