123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <template>
- <view class="notice-container">
- <!-- 标题 -->
- <view class="notice-title">面试注意事项</view>
- <view class="notice-subtitle">为了保障面试顺利进行,请注意以下事项</view>
-
- <!-- 注意事项列表 -->
- <view class="notice-grid">
- <!-- 第一行 -->
- <view class="notice-item light">
- <view class="icon-container">
- <text class="iconfont">☀</text>
- </view>
- <text class="item-text">保持光线良好、干净背景、安静不受打扰</text>
- </view>
-
- <view class="notice-item smile">
- <view class="icon-container">
- <text class="iconfont">☺</text>
- </view>
- <text class="item-text">保持微笑、声音洪亮、正面直视摄像头</text>
- </view>
-
- <!-- 第二行 -->
- <view class="notice-item headphone">
- <view class="icon-container">
- <text class="iconfont">🎧</text>
- </view>
- <text class="item-text">保持声音回音接收正常、建议使用耳机</text>
- </view>
-
- <view class="notice-item wifi">
- <view class="icon-container">
- <text class="iconfont">📶</text>
- </view>
- <text class="item-text">保持网络通畅、面试期间勿断出</text>
- </view>
-
- <!-- 第三行 -->
- <view class="notice-item forbidden">
- <view class="icon-container">
- <text class="iconfont">✖</text>
- </view>
- <text class="item-text">请勿人脸离开屏幕</text>
- </view>
-
- <view class="notice-item forbidden">
- <view class="icon-container">
- <text class="iconfont">✖</text>
- </view>
- <text class="item-text">请勿录屏、截屏</text>
- </view>
- </view>
-
- <!-- 警告提示 -->
- <view class="warning-tip">
- * 建议开启免提模式,避免采用\短信等打断面试
- </view>
-
- <!-- 免责声明 -->
- <!-- <view class="disclaimer">
- 本公司保障您的隐私,根据法律法规和监管要求收集必要的面试信息,下载、存储、使用您的面试视频,仅用于面试评估,过程中不会泄露您的个人信息。
- </view> -->
-
- <!-- 同意选项 -->
- <view class="agreement">
- <radio :checked="isAgreed" @tap="toggleAgreement" />
- <text class="agreement-text">我同意并知晓</text>
- </view>
-
- <!-- 添加语音检测组件 -->
- <voice-check-modal
- :visible="showVoiceCheck"
- @complete="onVoiceCheckComplete"
- />
-
- <!-- 底部按钮 -->
- <button class="next-btn" :disabled="!isAgreed" @click="startInterview">下一步</button>
- </view>
- </template>
- <script>
- import VoiceCheckModal from '../components/voice-check-modal.vue'
- export default {
- components: {
- VoiceCheckModal
- },
- data() {
- return {
- isAgreed: false,
- showVoiceCheck: false
- }
- },
- methods: {
- toggleAgreement() {
- this.isAgreed = !this.isAgreed;
- },
- startInterview() {
- if (!this.isAgreed) {
- uni.showToast({
- title: '请先同意面试须知',
- icon: 'none'
- });
- return;
- }
-
- // 显示语音检测弹窗
- this.showVoiceCheck = true;
- },
-
- onVoiceCheckComplete() {
- // 关闭语音检测弹窗
- this.showVoiceCheck = false;
-
- // 跳转到下一个页面
- uni.navigateTo({
- url: '/pages/preview/preview',
- fail: (err) => {
- console.error('页面跳转失败:', err);
- uni.showToast({
- title: '页面跳转失败',
- icon: 'none'
- });
- }
- });
- }
- }
- }
- </script>
- <style>
- .notice-container {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- background-color: #ffffff;
- padding: 30rpx;
- }
- .notice-title {
- font-size: 36rpx;
- font-weight: bold;
- margin-top: 20rpx;
- margin-bottom: 10rpx;
- color: #333;
- }
- .notice-subtitle {
- font-size: 26rpx;
- color: #999;
- margin-bottom: 30rpx;
- }
- .notice-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-bottom: 30rpx;
- }
- .notice-item {
- width: 47%;
- height: 180rpx;
- border-radius: 8rpx;
- padding: 20rpx;
- margin-bottom: 20rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- box-sizing: border-box;
- }
- .light {
- background-color: #f0f9eb;
- }
- .smile {
- background-color: #f0f9eb;
- }
- .headphone {
- background-color: #f0f9eb;
- }
- .wifi {
- background-color: #f0f9eb;
- }
- .forbidden {
- background-color: #fff8e6;
- }
- .icon-container {
- width: 40rpx;
- height: 40rpx;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: 15rpx;
- }
- .iconfont {
- font-size: 40rpx;
- color: #333;
- }
- .item-text {
- font-size: 24rpx;
- color: #333;
- line-height: 1.4;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- .warning-tip {
- color: #ff9800;
- font-size: 24rpx;
- margin-bottom: 60rpx;
- }
- .disclaimer {
- font-size: 24rpx;
- color: #999;
- line-height: 1.5;
- margin-bottom: 30rpx;
- }
- .agreement {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 40rpx;
- }
- .agreement-text {
- font-size: 28rpx;
- color: #333;
- margin-left: 10rpx;
- }
- .next-btn {
- width: 100%;
- height: 90rpx;
- line-height: 90rpx;
- background-color: #0039b3;
- color: #fff;
- border-radius: 8rpx;
- font-size: 32rpx;
- text-align: center;
- }
- .next-btn[disabled] {
- background-color: #0039b3;
- color: #fff;
- }
- </style>
|