preview.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view class="preview-container">
  3. <!-- 标题 -->
  4. <view class="title">
  5. <text>下面我们将拍摄证件照片</text>
  6. </view>
  7. <!-- 拍照提示信息 -->
  8. <view class="guide-text">
  9. <text>请您在白色的背景前拍照</text>
  10. </view>
  11. <!-- 拍照指引图示 -->
  12. <view class="guide-image">
  13. <image src="http://121.36.251.245:9000/minlong/%E5%9B%BE%E7%89%87%201%401x%20%281%29.png" mode="aspectFit"></image>
  14. </view>
  15. <!-- 拍照要求列表 -->
  16. <view class="requirements-list">
  17. <view class="requirement-item">
  18. <text>· 请摘掉耳饰、发饰、项链等影响拍摄效果的饰品</text>
  19. </view>
  20. <view class="requirement-item">
  21. <text>· 请勿化妆、头发不要遮挡耳朵、眉毛</text>
  22. </view>
  23. <view class="requirement-item">
  24. <text>· 拍照时,请您露出锁骨或衣领</text>
  25. </view>
  26. <view class="requirement-item">
  27. <text>· 在光线充足的环境下拍摄</text>
  28. </view>
  29. </view>
  30. <!-- 开始拍摄按钮 -->
  31. <view class="action-button">
  32. <button @click="startCapture">准备好了</button>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. data() {
  39. return {
  40. // 可以添加需要的数据
  41. }
  42. },
  43. methods: {
  44. // 开始拍摄方法
  45. startCapture() {
  46. // 跳转到拍照页面
  47. uni.navigateTo({
  48. url: '/pages/face-photo/face-photo'
  49. });
  50. }
  51. }
  52. }
  53. </script>
  54. <style>
  55. .preview-container {
  56. display: flex;
  57. flex-direction: column;
  58. padding: 30rpx;
  59. height: 90vh;
  60. margin-left: 5%;
  61. background-color: #ffffff;
  62. }
  63. .title {
  64. font-size: 40rpx;
  65. font-weight: bold;
  66. color: #333;
  67. margin-bottom: 40rpx;
  68. text-align: left;
  69. }
  70. .guide-image {
  71. width: 100%;
  72. display: flex;
  73. justify-content: center;
  74. margin-bottom: 30rpx;
  75. }
  76. .guide-image image {
  77. width: 570rpx;
  78. height: 660rpx;
  79. }
  80. .guide-text {
  81. font-size: 32rpx;
  82. color: #2a3bab;
  83. margin-bottom: 40rpx;
  84. text-align: left;
  85. }
  86. .requirements-list {
  87. width: 90%;
  88. margin-bottom: 60rpx;
  89. }
  90. .requirement-item {
  91. font-size: 28rpx;
  92. color: #999;
  93. margin-bottom: 20rpx;
  94. line-height: 1.5;
  95. }
  96. .action-button {
  97. width: 90%;
  98. margin-top: auto;
  99. margin-bottom: 40rpx;
  100. }
  101. .action-button button {
  102. background-color: #0039b3;
  103. color: white;
  104. border-radius: 50rpx;
  105. font-size: 32rpx;
  106. height: 90rpx;
  107. line-height: 90rpx;
  108. }
  109. </style>