调整文字协议样式

src/modules/pay/components/Confirm.vue

@@ -21,6 +21,7 @@ const item = ref({
 const orderInfo: any = ref({})
 const payMode = ref(1)
 const isAgree = ref(false)
+const isAgreeText = ref(false)
 const currentCheck = ref('4')
 const orderInfoDetail: any = ref([])
 function getDateTime(dayNum: any) {
@@ -58,6 +59,7 @@ const optionParams = reactive({
 const handlePay = () => {
   if (isAgree.value === false) {
     ElMessage.warning('请先勾选紫荆金保服务协议')
+    isAgreeText.value = true
   } else {
     if (user.isLogin) {
       if (!mobile.value) {
@@ -158,6 +160,13 @@ const handlePrev = () => {
 const changeProtocol = () => {
   dialogVisible.value = false
   isAgree.value = true
+  isAgreeText.value = false
+}
+const handleAgree = (val: any) => {
+  isAgree.value = val
+  if (val === true) {
+    isAgreeText.value = false
+  }
 }
 </script>
 <template>
@@ -209,12 +218,13 @@ const changeProtocol = () => {
         <div class="con_footer">
           <div class="footer_left">
             <div class="left_top">
-              <el-checkbox v-model="isAgree"> <span>同意</span></el-checkbox
+              <el-checkbox v-model="isAgree" @change="handleAgree">
+                <span>同意</span></el-checkbox
               ><a @click="dialogVisible = true">紫荆金保服务协议</a>
             </div>
             <div
               class="left_desc"
-              :class="isAgree === false ? 'left_desc_active' : ''"
+              :class="isAgreeText === true ? 'left_desc_active' : ''"
             >
               请先勾选紫荆金保服务协议
             </div>
@@ -298,14 +308,14 @@ const changeProtocol = () => {
       </div>
       <div class="argreement_con">
         <div class="left_top">
-          <el-checkbox v-model="isAgree">
+          <el-checkbox v-model="isAgree" @change="handleAgree">
             <span>同意</span>
           </el-checkbox>
           <a @click="dialogVisible = true">紫荆金保服务协议</a>
         </div>
         <div
           class="left_desc"
-          :class="isAgree === false ? 'left_desc_active' : ''"
+          :class="isAgreeText === true ? 'left_desc_active' : ''"
         >
           请先勾选紫荆金保服务协议
         </div>
@@ -490,7 +500,6 @@ const changeProtocol = () => {
         color: #999999;
         font-size: 0.24rem;
         margin-left: 0.9rem;
-        cursor: pointer;
       }
       .left_desc_active {
         color: #aa1941;
@@ -635,7 +644,6 @@ const changeProtocol = () => {
           font-weight: 400;
           color: #999999;
           margin: 14px 0 0 21px;
-          cursor: pointer;
         }
         .left_desc_active {
           color: #aa1941;