图片

src/views/account/Login.vue

@@ -37,6 +37,9 @@
 
             <div class="xieyi">
                 <van-checkbox v-model="checked">
+                    <template #icon="props">
+                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+                    </template>
                     点击同意
                     <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
                     <!-- 和
@@ -98,6 +101,9 @@
             </van-field>
             <div class="xieyi">
                 <van-checkbox v-model="checked">
+                    <template #icon="props">
+                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+                    </template>
                     点击同意
                     <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
                     <!-- 和
@@ -132,6 +138,8 @@ export default {
                 password: '',
                 code: ''
             },
+            activeIcon: require('@assets/icon_gouxuan_pre.png'),
+            inactiveIcon: require('@assets/icon_gouxuan_huise.png'),
             checked: localStorage.getItem('agreeTerm') === 'true'
         };
     },
@@ -395,8 +403,13 @@ export default {
     // padding: 5px 10px;
     border-radius: 12px;
 }
+/deep/.van-checkbox__icon {
+    height: 24px;
+    line-height: 24px;
+}
 /deep/.van-checkbox__label {
     color: #6a6d83;
+    margin-left: 4px;
 }
 /deep/.van-checkbox__icon .van-icon {
     border: 1px solid #6a6d83;
@@ -409,4 +422,8 @@ export default {
     background: linear-gradient(135deg, @prim 0%, @prim2 100%);
     border-width: 0;
 }
+.img-icon {
+    width: 24px;
+    height: 24px;
+}
 </style>

src/views/account/Register.vue

@@ -113,6 +113,9 @@
 
             <div class="xieyi">
                 <van-checkbox v-model="checked">
+                    <template #icon="props">
+                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
+                    </template>
                     点击同意
                     <span @click.stop="$router.push('/agreement?page=service')">用户协议</span>
                     <!-- 和
@@ -147,7 +150,9 @@ export default {
             },
             checked: false,
             showInvite: true,
-            codeImg: ''
+            codeImg: '',
+            activeIcon: require('@assets/icon_gouxuan_pre.png'),
+            inactiveIcon: require('@assets/icon_gouxuan_huise.png')
         };
     },
     beforeRouteEnter(to, from) {
@@ -326,6 +331,11 @@ export default {
 }
 /deep/.van-checkbox__label {
     color: #fff;
+    margin-left: 4px;
+}
+/deep/.van-checkbox__icon {
+    height: 24px;
+    line-height: 24px;
 }
 /deep/.van-checkbox__icon--checked .van-icon {
     background: linear-gradient(135deg, @prim 0%, @warn 100%);
@@ -345,4 +355,8 @@ export default {
     display: block;
     margin: 0 auto 2px;
 }
+.img-icon {
+    width: 24px;
+    height: 24px;
+}
 </style>