privacy.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="privacy-page">
  3. <!-- 1. 自定义导航栏 -->
  4. <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
  5. <view class="nav-content">
  6. <view class="back-area" @click="goBack">
  7. <text class="back-arrow"></text>
  8. </view>
  9. <view class="nav-title">隐私政策</view>
  10. <view class="right-placeholder"></view>
  11. </view>
  12. </view>
  13. <scroll-view scroll-y class="content-scroll" :style="{ height: scrollHeight }">
  14. <view class="article-body">
  15. <view class="title">ERP 系统隐私政策</view>
  16. <view class="update-time">发布日期:2024年04月28日</view>
  17. <rich-text :nodes="privacyNodes"></rich-text>
  18. <view class="safe-bottom-hint">
  19. <text>加密存储 · 严格保密</text>
  20. </view>
  21. </view>
  22. </scroll-view>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. statusBarHeight: 20,
  30. privacyNodes: `
  31. <div style="line-height: 1.8; color: #444; font-size: 14px;">
  32. <h3 style="color: #000; margin-top: 20px;">1. 我们收集的信息</h3>
  33. <p>我们仅收集实现业务功能所必需的信息。包括您的登录手机号、企业授权名称、操作日志以及必要业务参数。</p>
  34. <h3 style="color: #000; margin-top: 20px;">2. 信息安全保障</h3>
  35. <p>我们采用行业标准的加密技术对您的数据进行存储,并建立了严格的内部访问控制体系。</p>
  36. </div>
  37. `
  38. }
  39. },
  40. computed: {
  41. scrollHeight() {
  42. return `calc(100vh - ${this.statusBarHeight + 44}px)`;
  43. }
  44. },
  45. onLoad() {
  46. const info = uni.getSystemInfoSync();
  47. this.statusBarHeight = info.statusBarHeight;
  48. },
  49. methods: {
  50. goBack() { uni.navigateBack(); }
  51. }
  52. }
  53. </script>
  54. <style scoped>
  55. .privacy-page { width: 100vw; height: 100vh; background: #ffffff; display: flex; flex-direction: column; }
  56. .custom-navbar { background: #fff; flex-shrink: 0; }
  57. .nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
  58. .back-area { width: 60rpx; height: 44px; display: flex; align-items: center; }
  59. .back-arrow { width: 22rpx; height: 22rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
  60. .nav-title { font-size: 34rpx; font-weight: bold; color: #333; }
  61. .right-placeholder { width: 60rpx; }
  62. .content-scroll { width: 100%; }
  63. .article-body { padding: 40rpx; padding-top: 20rpx; }
  64. .title { font-size: 40rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 16rpx; text-align: center; }
  65. .update-time { font-size: 24rpx; color: #999; margin-bottom: 40rpx; text-align: center; }
  66. .safe-bottom-hint { margin-top: 80rpx; text-align: center; color: #52c41a; font-size: 24rpx; opacity: 0.6; }
  67. </style>