ok

src/views/changeTag.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, toRefs, onMounted, ref, unref } from "vue";
+import { reactive, toRefs, onMounted, ref, unref, watch } from "vue";
 import { getUserChoose, getUser, postChooseSubmit } from "@/api/api.js";
 import { Toast } from "vant";
 import { wxconfig } from "@/util/wxLogin";
@@ -56,8 +56,8 @@ const handleCheckedCitiesChange = (item) => {
 const objective = ref(false);
 const subjectivity = ref(false);
 
-const statusHandel = () => {
-  isSelectedClick.value = false;
+const statusHandel = (val) => {
+  isSelectedClick.value = !val;
 };
 
 //获取用户的选择
@@ -118,7 +118,14 @@ const chooseSubmit = async () => {
     getChooseList();
   }
 };
-
+const isSelected = ref(!isSelectedClick.value);
+// watch(
+//   () => isSelectedClick.value,
+//   (newValue) => {
+//     isSelected.value = !newValue;
+//     console.log(isSelected.value, newValue);
+//   }
+// );
 onMounted(() => {
   document.title = "推送规则";
   getChooseList();
@@ -155,7 +162,7 @@ onMounted(() => {
     </div>
     <template v-if="userInfo.HasPermission == 1">
       <div :class="['select-content', isSelectedClick ? 'is-active' : 'is-not']">
-        <p class="slogan">请向我推送以下行业/赛道的研究更新和活动提醒：</p>
+        <p class="slogan" style="color: #cfc09f">请向我推送以下行业/赛道的研究更新和活动提醒：</p>
         <div class="checkbox-content">
           <div class="checkbox-item">
             <div :class="['item', activeTag == item.ChartPermissionId ? 'active' : '']" v-for="item in chooseList" :key="item.ChartPermissionId" @click="tagHandel(item)">
@@ -173,7 +180,7 @@ onMounted(() => {
             </div>
           </template>
           <div class="distinguish">
-            <p>以上赛道</p>
+            <p style="color: #fff">以上赛道</p>
             <el-checkbox @change="isSelectedClick = true" v-model="objective" label="Option 1" size="large">请向我推送【客观类】内容</el-checkbox>
             <p class="check-explain">（线上/线下调研及调研纪要、产业跟踪、季度跟踪）</p>
             <el-checkbox @change="isSelectedClick = true" v-model="subjectivity" label="Option 2" size="large">请向我推送【主观类】内容</el-checkbox>
@@ -181,7 +188,9 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <div :class="['no-push', isSelectedClick ? 'is-not' : 'is-active']" @click="statusHandel">我不希望接收最新报告和活动更新的推送</div>
+      <div :class="['no-push', isSelectedClick ? 'is-not' : 'is-active']">
+        <el-checkbox v-model="isSelected" @change="statusHandel"> 我不希望接收最新报告和活动更新的推送</el-checkbox>
+      </div>
       <div class="confirm" @click="chooseSubmit">保存</div>
     </template>
     <template v-else>
@@ -201,10 +210,16 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .container-tag {
-  padding: 34px;
-  background: #ffffff;
+  padding: 30px 25px;
+  background: url("@/assets/img/bg_icon.png") no-repeat;
+  background-size: 100% 100%;
   .top-content {
-    padding: 15px;
+    width: 100%;
+    height: 438px;
+    background: url("@/assets/img/tag_bg.png") no-repeat;
+    background-size: 100% 100%;
+    padding: 68px 25px;
+    box-sizing: border-box;
   }
   .personal-details {
     display: flex;
@@ -221,11 +236,11 @@ onMounted(() => {
     .details-item {
       margin-left: 30px;
       font-size: 28px;
-      color: #666666;
+      color: #fff;
       .name {
         font-size: 34px;
         font-weight: 500;
-        color: #333333;
+        color: #fff;
       }
       .phone {
         padding: 10px 0 5px;
@@ -233,7 +248,6 @@ onMounted(() => {
     }
   }
   .authority {
-    // height: 138px;
     width: 105%;
     overflow: hidden;
     padding-top: 10px;
@@ -242,14 +256,14 @@ onMounted(() => {
       height: 50px;
       font-size: 24px;
       border-radius: 4px;
-      background-color: #edf4ff;
+      background-color: #403f3e;
       display: inline-block;
       margin: 20px 20px 0 0;
       text-align: center;
       line-height: 48px;
-      border: 1px solid #3385ff;
+      border: 1px solid #e5cfb1;
       font-weight: 400;
-      color: #3385ff;
+      color: #e5cfb1;
     }
   }
   .no-info {
@@ -266,19 +280,20 @@ onMounted(() => {
   }
   .select-content {
     padding: 20px;
-    border: 1px dashed #dadfe5;
+    background-color: #2b2a2a;
+    border-radius: 16px;
+    margin-top: 10px;
     .checkbox-content {
       width: 100%;
       overflow: hidden;
       .slogan {
         font-size: 28px;
-        color: #666666;
+        color: #cfc09f;
         font-weight: 400;
       }
       .checkbox-item {
         width: 105%;
         padding-bottom: 25px;
-        border-bottom: 1px dashed #dadfe5;
         .item {
           width: 124px;
           height: 50px;
@@ -288,12 +303,12 @@ onMounted(() => {
           margin: 20px 35px 0 0;
           text-align: center;
           line-height: 48px;
-          border: 1px solid #3385ff;
           font-weight: 400;
-          color: #3385ff;
+          color: #666666;
+          background-color: #fff;
         }
         .active {
-          background: #3385ff;
+          background: #e2c586;
           color: #ffffff;
         }
       }
@@ -318,22 +333,19 @@ onMounted(() => {
       padding: 40px 10px;
       .check-explain {
         font-size: 24px;
-        color: #999;
+        color: #fff;
         text-indent: 1em;
       }
     }
   }
-  .is-active {
-    background-color: #e9effe;
-    border: 1px dashed #3385ff !important;
-  }
-  .is-not {
-    background-color: #f9f9f9;
-  }
+  // .is-active {
+  //   // background-color: #e9effe;
+  //   // border: 1px dashed #3385ff !important;
+  // }
   .confirm {
     width: 368px;
     height: 80px;
-    background: #3385ff;
+    background: #e0bc7f;
     font-size: 34px;
     color: #fff;
     margin: 0 auto;
@@ -341,16 +353,6 @@ onMounted(() => {
     line-height: 80px;
     border-radius: 8px;
   }
-  .no-push {
-    font-size: 28px;
-    color: #333;
-    width: 100%;
-    height: 99px;
-    line-height: 99px;
-    border: 1px dashed #dadfe5;
-    margin: 30px 0 40px;
-    text-indent: 1em;
-  }
   .el-checkbox-group {
     display: flex;
     flex-wrap: wrap;
@@ -363,6 +365,80 @@ onMounted(() => {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .el-checkbox {
+    color: #fff;
+  }
+  :deep(.el-checkbox__inner:hover) {
+    border-color: #e2c586;
+    font-size: 28px;
+    font-weight: 400;
+    font-family: PingFang SC-Regular, PingFang SC;
+  }
+  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+    color: #e2c586;
+  }
+  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
+    background-color: #e2c586;
+    border-color: #e2c586;
+  }
+  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    background-color: #e2c586;
+    border-color: #e2c586;
+  }
+  .no-push {
+    display: flex;
+    align-items: center;
+    font-size: 28px;
+    color: #aba8a0;
+    width: 100%;
+    height: 99px;
+    background: linear-gradient(269deg, #403f3e 0%, #242424 100%);
+    border-radius: 16px;
+    margin: 30px 0 40px;
+    text-indent: 0.5em;
+    padding-left: 30px;
+    :deep(.el-checkbox__label) {
+      color: #aba8a0;
+    }
+  }
+  .is-not {
+    // background-color: #f9f9f9;
+    color: #aba8a0;
+    .slogan {
+      color: #aba8a0 !important;
+    }
+    .item {
+      background-color: #aba8a0 !important;
+      color: #666666 !important;
+    }
+    .el-checkbox {
+      color: #aba8a0 !important;
+    }
+    .check-explain {
+      color: #aba8a0 !important;
+    }
+    :deep(.el-checkbox__inner:hover) {
+      border-color: #aba8a0 !important;
+      font-size: 28px;
+      font-weight: 400;
+      font-family: PingFang SC-Regular, PingFang SC;
+    }
+    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+      color: #aba8a0 !important;
+    }
+    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+      background-color: #aba8a0 !important;
+      border-color: #aba8a0 !important;
+    }
+    :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
+      background-color: #aba8a0 !important;
+      border-color: #aba8a0 !important;
+    }
+    :deep(.el-checkbox__inner) {
+      background-color: #aba8a0 !important;
+      border-color: #aba8a0 !important;
+    }
+  }
   .bottom-btn {
     position: relative; // 相对定位
     z-index: 0;