安全验证-静态

pages.json

@@ -33,6 +33,13 @@
         "navigationBarTitleText": "设置"
 	
       }
+    },
+    {
+    	"path" : "pages/securityVerification/securityVerification",
+    	"style" : 
+    	{
+    		  "navigationBarTitleText": "安全验证"
+    	}
     }
   ],
   "tabBar": {

pages/securityVerification/securityVerification.vue

@@ -0,0 +1,83 @@
+<template>
+  <view class="page">
+    <text>为了保证您的账号安全，须先验证您的身份，</text>
+    <text>验证成功后可以进行下一步操作。</text>
+    <view class="phone">{{ phone }}</view>
+    <view class="verification-code">获取验证码</view>
+    <view class="no-use">该手机号已无法使用？</view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      phone: '+86 158****1232',
+      userInfoSettings: [
+        {
+          label: '头像',
+          value: '', // 实际项目中这里可能是图片URL
+          icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
+          type: 'avatar',
+        },
+        {
+          label: '昵称',
+          value: '昵称', // 默认占位文字，实际应为用户昵称
+          type: 'nickname',
+        },
+        {
+          label: '手机号',
+          value: '158****5964', // 脱敏后的手机号
+          type: 'phone',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  padding-top: 68rpx;
+  background: #ffffff;
+
+  text {
+    text-align: center;
+    font-weight: 400;
+    font-size: 15px;
+  }
+
+  .phone {
+    margin-top: 38rpx;
+    font-size: 18px;
+    font-weight: 500;
+    color: #3d3d3d;
+  }
+
+  .verification-code {
+    margin-top: 64rpx;
+    text-align: center;
+    line-height: 98rpx;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 500;
+    width: 650rpx;
+    height: 98rpx;
+    background: #f15a04;
+    border-radius: 7px;
+  }
+
+  .no-use {
+    margin-top: 64rpx;
+    text-align: center;
+    font-weight: 400;
+    font-size: 15px;
+    color: #f15a04;
+    border-bottom: #f15a04 1px solid;
+  }
+}
+</style>