注册页优化服务协议

pages/start/Registration/Registration.vue

@@ -154,12 +154,22 @@
        <!-- 同意弹窗 -->
     <uniPopup ref="agreementPopup" type="dialog">
       <view class="popup-content">
-        <text class="popup-title">同意并继续</text>
-        <text class="popup-message">请阅读并同意服务协议和隐私权限</text>
+        <text class="popup-message"
+          >请阅读并同意<text @click="openAgreement" class="popup-message-link"
+            >服务协议</text
+          >和<text @click="openPrivacy" class="popup-message-link"
+            >隐私权限</text
+          >
+        </text>
+        <view class="button-group">
+          <button class="cancel-button" @click="handleCancel">
+            <text class="cancel-text">取消</text>
+          </button>
           <button class="agree-button" @click="handleAgree">
             <text class="agree-text">同意</text>
           </button>
         </view>
+      </view>
     </uniPopup>
     <footerBar class="static-footer" :type="type"></footerBar>
   </view>
@@ -511,6 +521,13 @@ function handleAgree() {
   checkboxUrl.value = "../../../static/icons/Check-one-true.png";
   // 继续登录流程
 }
+
+
+// 处理同意按钮点击
+function handleCancel() {
+  // 关闭弹窗
+  agreementPopup.value.close();
+}
 </script>
 
 <style scoped>
@@ -866,30 +883,29 @@ function handleAgree() {
   width: 550rpx;
 }
 
-.popup-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 80rpx;
-  text-align: center; /* 水平居中 */
-  display: flex; /* 使用flex布局 */
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-}
+
 
 .popup-message {
   font-size: 28rpx;
   color: #000000;
-  margin-bottom: 80rpx;
+  margin-bottom: 60rpx;
+  margin-top: 20rpx;
   text-align: center; /* 水平居中 */
   display: flex; /* 使用flex布局 */
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
+  font-weight: 300;
+}
+.popup-message-link{
+  font-weight: 700;
+}
+.button-group {
+  display: flex;
+  justify-content: space-around;
 }
-
 .agree-button {
-  width: 300rpx;
-  height: 80rpx;
+  width: 160rpx;
+  height: 56rpx;
   background-color: #000000;
   border-radius: 40rpx;
   display: flex; /* 添加flex布局 */
@@ -905,4 +921,23 @@ function handleAgree() {
   justify-content: center;
   line-height: 1; /* 确保文字垂直居中 */
 }
+
+.cancel-button {
+  width: 160rpx;
+  height: 56rpx;
+  background-color: #e5e5e5;
+  border-radius: 40rpx;
+  display: flex; /* 添加flex布局 */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+}
+.cancel-text {
+  color: #333333;
+  font-size: 34rpx;
+  /* 添加垂直居中相关样式 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1; /* 确保文字垂直居中 */
+}
 </style>