123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <view class="preview-container">
- <!-- 标题 -->
- <view class="title">
- <text>下面我们将拍摄证件照片</text>
- </view>
- <!-- 拍照提示信息 -->
- <view class="guide-text">
- <text>请您在白色的背景前拍照</text>
- </view>
- <!-- 拍照指引图示 -->
- <view class="guide-image">
- <image src="http://121.36.251.245:9000/minlong/%E5%9B%BE%E7%89%87%201%401x%20%281%29.png" mode="aspectFit"></image>
- </view>
-
- <!-- 拍照要求列表 -->
- <view class="requirements-list">
- <view class="requirement-item">
- <text>· 请摘掉耳饰、发饰、项链等影响拍摄效果的饰品</text>
- </view>
- <view class="requirement-item">
- <text>· 请勿化妆、头发不要遮挡耳朵、眉毛</text>
- </view>
- <view class="requirement-item">
- <text>· 拍照时,请您露出锁骨或衣领</text>
- </view>
- <view class="requirement-item">
- <text>· 在光线充足的环境下拍摄</text>
- </view>
- </view>
-
- <!-- 开始拍摄按钮 -->
- <view class="action-button">
- <button @click="startCapture">准备好了</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- // 可以添加需要的数据
- }
- },
- methods: {
- // 开始拍摄方法
- startCapture() {
- // 跳转到拍照页面
- uni.navigateTo({
- url: '/pages/face-photo/face-photo'
- });
- }
- }
- }
- </script>
- <style>
- .preview-container {
- display: flex;
- flex-direction: column;
- padding: 30rpx;
- height: 90vh;
- margin-left: 5%;
- background-color: #ffffff;
- }
- .title {
- font-size: 40rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 40rpx;
-
- text-align: left;
- }
- .guide-image {
- width: 100%;
- display: flex;
- justify-content: center;
- margin-bottom: 30rpx;
- }
- .guide-image image {
- width: 570rpx;
- height: 660rpx;
- }
- .guide-text {
- font-size: 32rpx;
- color: #2a3bab;
- margin-bottom: 40rpx;
- text-align: left;
- }
- .requirements-list {
- width: 90%;
- margin-bottom: 60rpx;
- }
- .requirement-item {
- font-size: 28rpx;
- color: #999;
- margin-bottom: 20rpx;
- line-height: 1.5;
- }
- .action-button {
- width: 90%;
- margin-top: auto;
- margin-bottom: 40rpx;
- }
- .action-button button {
- background-color: #0039b3;
- color: white;
- border-radius: 50rpx;
- font-size: 32rpx;
- height: 90rpx;
- line-height: 90rpx;
- }
- </style>
|