16.2.2 修复复选框

src/views/custom_manage/customList/components/raiPermissionbox.vue

@@ -1,59 +1,90 @@
 <template>
   <div class="rai-checkbox-content" id="rai-checkbox-content">
     <div class="rai-checkbox-bigS-box">
-      <el-checkbox v-model="itB.Checked" v-for="itB in data.ItemsBig" :key="itB.PermissionName"
-      @change="(e)=>bigServeCheck(e,itB,data)"
-      :indeterminate="itB.isIndeterminate && !itB.disabled" class="bigS-item" 
-      :disabled="itB.disabled || (formData.qyBigServeCheck!=getQyBigServeCheckNumber(itB.PermissionName) && formData.qyBigServeCheck!=0)"
-      >{{itB.PermissionName}}</el-checkbox>
+      <el-checkbox
+        v-model="itB.Checked"
+        v-for="itB in data.ItemsBig"
+        :key="itB.PermissionName"
+        @change="(e) => bigServeCheck(e, itB, data)"
+        :indeterminate="itB.isIndeterminate && !itB.disabled"
+        class="bigS-item"
+        :disabled="itB.disabled || (formData.qyBigServeCheck != getQyBigServeCheckNumber(itB.PermissionName) && formData.qyBigServeCheck != 0)"
+        >{{ itB.PermissionName }}</el-checkbox
+      >
     </div>
     <div class="rai-checkbox-box">
       <div class="rai-checkbox-main-container">
         <div class="rai-checkbox-main-row">
-          <div class="rai-checkbox-item" v-for="it in data.Items" :key="it.ChartPermissionId" 
-          :style="{'width':[23,148,62].includes(it.ChartPermissionId) ?'84px':it.ChartPermissionId==30?'110px':'168px'}">
+          <div
+            class="rai-checkbox-item"
+            v-for="it in data.Items"
+            :key="it.ChartPermissionId"
+            :style="{ width: [23, 148, 62].includes(it.ChartPermissionId) ? '84px' : it.ChartPermissionId == 30 ? '110px' : '168px' }"
+          >
             <template v-if="it.Child">
-              <el-checkbox :label="it.PermissionName" style="margin-right: 8px;" v-model="it.Checked"
-              @change="handleItemCheck(it,data)" :indeterminate="it.isIndeterminate" :disabled="it.disabled"></el-checkbox>
-              <el-checkbox-group v-model="data.CheckList" style="height: unset;" @change="handleQYChecked(it,data)" 
-              :disabled="it.disabled">
-                <div class="rai-checkbox-serve-box" >
-                  <el-checkbox :label="itChild.ChartPermissionId" v-for="itChild in it.Child" :key="itChild.ChartPermissionId"
-                  class="small-item" >{{ itChild.PermissionName }}</el-checkbox>
+              <el-checkbox
+                :label="it.PermissionName"
+                style="margin-right: 8px"
+                v-model="it.Checked"
+                @change="handleItemCheck(it, data)"
+                :indeterminate="it.isIndeterminate"
+                :disabled="it.disabled"
+              ></el-checkbox>
+              <el-checkbox-group v-model="data.CheckList" style="height: unset" @change="handleQYChecked(it, data)" :disabled="it.disabled">
+                <div class="rai-checkbox-serve-box">
+                  <el-checkbox :label="itChild.ChartPermissionId" v-for="itChild in it.Child" :key="itChild.ChartPermissionId" class="small-item">{{ itChild.PermissionName }}</el-checkbox>
                 </div>
               </el-checkbox-group>
             </template>
             <template v-else>
-              <el-checkbox-group v-model="data.CheckList" style="height: unset;margin-right: 8px;" @change="handleQYChecked(it,data)">
+              <el-checkbox-group v-model="data.CheckList" style="height: unset; margin-right: 8px" @change="handleQYChecked(it, data)">
                 <el-checkbox :label="it.ChartPermissionId" :disabled="it.disabled">{{ it.PermissionName }}</el-checkbox>
               </el-checkbox-group>
             </template>
           </div>
         </div>
-        <el-checkbox-group v-model="data.CheckList" style="height: unset;">
-          <div class="rai-checkbox-upS-box" >
-            <el-checkbox :label="itU.ChartPermissionId" v-for="itU in data.ItemsUp" :key="itU.ChartPermissionId"
-            class="rai-checkbox-item upS-item" :disabled="itU.disabled" 
-            @change="(e) => handleUpdateChecked(e,itU.PermissionName,data)">{{ itU.PermissionName }}</el-checkbox>
+        <el-checkbox-group v-model="data.CheckList" style="height: unset">
+          <div class="rai-checkbox-upS-box">
+            <el-checkbox
+              :label="itU.ChartPermissionId"
+              v-for="itU in data.ItemsUp"
+              :key="itU.ChartPermissionId"
+              class="rai-checkbox-item upS-item"
+              :disabled="itU.disabled"
+              @change="(e) => handleUpdateChecked(e, itU.PermissionName, data)"
+              >{{ itU.PermissionName }}</el-checkbox
+            >
           </div>
         </el-checkbox-group>
       </div>
       <div class="rai-checkbox-private-container">
-        <el-checkbox-group v-model="data.CheckList" style="height: unset;">
-          <div class="rai-checkbox-upS-box" >
-            <el-checkbox :label="itP.ChartPermissionId" v-for="(itP,inP) in data.ItemsPrivate" 
-            :key="itP.ChartPermissionId" :disabled="itP.disabled" :style="{'height':hasNoChild?'48px':'95px','width':itP.ChartPermissionId == 52 && data.CheckList.includes(52)? '220px' : itP.PermissionName.includes('研选')?'130px':'84px'}"
-            class="rai-checkbox-item upS-item" @change="e => handlePrivateChecked(e,itP,data)">
-            {{ itP.PermissionName }}
-            <p v-if="itP.ChartPermissionId == 31" class="checkbox-text">(30000元/年)</p>
-            <p v-if="itP.ChartPermissionId == 52" class="checkbox-text">(点/2000元)</p>
-            <input @click.stop @input="validateInteger" placeholder="请输入点数" style="margin-left:10px" v-if="itP.ChartPermissionId == 52 && data.CheckList.includes(52)" v-model="minus_sign_val" />
+        <el-checkbox-group v-model="data.CheckList" style="height: unset">
+          <div class="rai-checkbox-upS-box">
+            <el-checkbox
+              :label="itP.ChartPermissionId"
+              v-for="(itP, inP) in data.ItemsPrivate"
+              :key="itP.ChartPermissionId"
+              :disabled="itP.disabled"
+              :style="{ height: hasNoChild ? '48px' : '95px', width: itP.ChartPermissionId == 52 && data.CheckList.includes(52) ? '220px' : itP.PermissionName.includes('研选') ? '130px' : '84px' }"
+              class="rai-checkbox-item upS-item"
+              @change="(e) => handlePrivateChecked(e, itP, data)"
+            >
+              {{ itP.PermissionName }}
+              <p v-if="itP.ChartPermissionId == 31" class="checkbox-text">(30000元/年)</p>
+              <p v-if="itP.ChartPermissionId == 52" class="checkbox-text">(点/2000元)</p>
+              <input
+                @click.stop
+                @input="validateInteger"
+                placeholder="请输入点数"
+                style="margin-left: 10px"
+                v-if="itP.ChartPermissionId == 52 && data.CheckList.includes(52)"
+                v-model="minus_sign_val"
+              />
             </el-checkbox>
           </div>
         </el-checkbox-group>
-        <div class="rai-checkbox-notice-box" v-if="data.ItemsUp.length>0">
-          <span class="rai-checkbox-notice" v-if="formData.qyBigServeCheck">
-            同时包含{{formData.qyBigServeCheck==2?"12":"16"}}次专项调研</span>
+        <div class="rai-checkbox-notice-box" v-if="data.ItemsUp.length > 0">
+          <span class="rai-checkbox-notice" v-if="formData.qyBigServeCheck"> 同时包含{{ formData.qyBigServeCheck == 2 ? "12" : "16" }}次专项调研</span>
           <p class="rai-checkbox-notice" v-if="equityGroupDisabled(data.CheckList)">同时包含升级行业各5次专项调研</p>
         </div>
       </div>
@@ -62,268 +93,283 @@
 </template>
 
 <script>
-  export default {
-    name:'raiPermissionbox',
-    data() {
-      return {
-        minus_sign_val:''
+export default {
+  name: "raiPermissionbox",
+  data() {
+    return {
+      minus_sign_val: "",
+    };
+  },
+  props: {
+    data: {
+      required: true,
+      type: Object,
+    },
+    formData: {
+      //formData.qyBigServeCheck  0-无 1- 70万 2- 45万
+      required: true,
+      type: Object,
+    },
+    hasNoChild: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {
+    // 回显
+    if (this.data.CheckList && this.data.CheckList.length > 0) {
+      this.data.Items.map((item) => {
+        if (item.Child) {
+          item.Child.map((t) => {
+            this.handleQYChecked(item, this.data);
+          });
+        } else {
+          this.handleQYChecked(item, this.data);
+        }
+      });
+      this.data.ItemsPrivate.map((itP) => {
+        let flag = this.data.CheckList.includes(itP.ChartPermissionId);
+        this.handlePrivateChecked(flag, itP, this.data);
+      });
+      this.data.ItemsUp.map((itU) => {
+        let flag = this.data.CheckList.includes(itU.ChartPermissionId);
+        this.handleUpdateChecked(flag, itU.PermissionName, this.data);
+      });
+    }
+  },
+  methods: {
+    // 套餐选中逻辑修复
+    bigServeCheck(value, itB, item) {
+      this.formData.qyBigServeCheck = value ? this.getQyBigServeCheckNumber(itB.PermissionName) : 0;
+
+      // 更新 `indeterminate` 状态
+      item.ItemsBig.forEach((itB) => (itB.isIndeterminate = false));
+
+      const bigServeItems = this.hasNoChild
+        ? [22, 21, 20, 19, 23, 30]
+        : process.env.NODE_ENV === "production"
+        ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 30, 148, 62]
+        : [22, 37, 21, 36, 20, 35, 19, 34, 23, 30, 148, 62];
+
+      if (value) {
+        item.CheckList = [...new Set([...item.CheckList, ...bigServeItems])];
+      } else {
+        item.CheckList = item.CheckList.filter((t) => !bigServeItems.includes(t));
+      }
+
+      if (!this.hasNoChild) {
+        // 更新子级状态
+        item.Items.forEach((ele) => {
+          if (ele.Child) {
+            ele.Checked = value;
+            this.handleItemCheck(ele, item);
+          }
+        });
+      }
+    },
+    // 医药、消费、科技、智造（有主客观）选中
+    // 父子选中逻辑修复
+    handleItemCheck(it, item) {
+      const childIds = it.Child.map((t) => t.ChartPermissionId);
+
+      if (it.Checked) {
+        item.CheckList = [...new Set([...item.CheckList, ...childIds])];
+      } else {
+        item.CheckList = item.CheckList.filter((t) => !childIds.includes(t));
       }
+
+      this.updateParentStatus(it, item);
     },
-    props:{
-      data:{
-        required:true,
-        type:Object
-      },
-      formData:{ //formData.qyBigServeCheck  0-无 1- 70万 2- 45万
-        required:true,
-        type:Object
-      },
-      hasNoChild:{
-        type:Boolean,
-        default:false
+    // 更新父级状态
+    updateParentStatus(it, item) {
+      let count = 0;
+
+      if (it.Child) {
+        it.Child.forEach((child) => {
+          if (item.CheckList.includes(child.ChartPermissionId)) count++;
+        });
+        it.Checked = count === it.Child.length;
+        it.isIndeterminate = count > 0 && count < it.Child.length;
+      }
+
+      // 更新禁用状态
+      const relatedItem = item.ItemsUp.find((up) => up.PermissionName.includes(it.PermissionName));
+      if (relatedItem) {
+        relatedItem.disabled = count !== 0;
       }
     },
-    created(){
-      // 回显
-      if(this.data.CheckList && this.data.CheckList.length>0){
-        this.data.Items.map(item =>{
-          if(item.Child){
-            item.Child.map(t =>{
-              this.handleQYChecked(item,this.data)
-            })
-          }else{
-            this.handleQYChecked(item,this.data)
-          }
-        })
-        this.data.ItemsPrivate.map(itP =>{
-          let flag = this.data.CheckList.includes(itP.ChartPermissionId)
-          this.handlePrivateChecked(flag,itP,this.data)
-        })
-        this.data.ItemsUp.map(itU =>{
-          let flag = this.data.CheckList.includes(itU.ChartPermissionId)
-          this.handleUpdateChecked(flag,itU.PermissionName,this.data)
-        })
+    handleQYChecked(it, item) {
+      // console.log(it,item);
+      let count = 0;
+      if (it.Child) {
+        // 有主客观
+        it.Child.map((t) => {
+          if (item.CheckList.includes(t.ChartPermissionId)) count++;
+        });
+        it.Checked = count == 2;
+        it.isIndeterminate = count == 1;
+      }
+      if (this.hasNoChild) {
+        if (item.CheckList.includes(it.ChartPermissionId)) count++;
       }
+      // 设置升级套餐的禁用
+      let changeItem = item.ItemsUp.find((itUp) => itUp.PermissionName.includes(it.PermissionName));
+      if (changeItem) changeItem.disabled = count != 0;
+      // 设置大套餐的状态
+      let bigServeCheckNum;
+      if (this.formData.qyBigServeCheck) {
+        //qyBigServeCheck有值就作用在对应的大套餐
+        bigServeCheckNum = this.formData.qyBigServeCheck == 1 ? 1 : 0;
+      } else {
+        // 默认作用在45万上 原本有状态的话，就作用在有状态的大套餐
+        bigServeCheckNum = item.ItemsBig[1].isIndeterminate || item.ItemsBig[1].Checked ? 1 : 0;
+      }
+      // 正式服 各行业的客观的chartPermissionId和测试服的不一样
+      let allChartPermissionIds = process.env.NODE_ENV === "production" ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 30, 148, 62] : [22, 37, 21, 36, 20, 35, 19, 34, 23, 30, 148, 62];
+
+      let bigServeItems = this.hasNoChild ? [22, 21, 20, 19, 23, 30] : allChartPermissionIds;
+      if (bigServeItems.every((t) => item.CheckList.includes(t))) {
+        item.ItemsBig[bigServeCheckNum].Checked = true;
+        this.formData.qyBigServeCheck = this.getQyBigServeCheckNumber(item.ItemsBig[bigServeCheckNum].PermissionName);
+      } else {
+        item.ItemsBig[bigServeCheckNum].Checked = false;
+        this.formData.qyBigServeCheck = 0;
+      }
+      item.ItemsBig[bigServeCheckNum].isIndeterminate = bigServeItems.some((t) => item.CheckList.includes(t)) && !item.ItemsBig[bigServeCheckNum].Checked;
     },
-    methods:{
-      // 套餐选中
-      bigServeCheck(value,itB,item){
-        // console.log(value,item);
-        this.formData.qyBigServeCheck = value?this.getQyBigServeCheckNumber(itB.PermissionName):0
-        item.ItemsBig.map(itB => itB.isIndeterminate=false)
-        if(value){
-          // 策略
-          item.CheckList= [...new Set([...item.CheckList,23,30,148,62])]
-        }else{
-          item.CheckList = item.CheckList.filter(t => ![23,30,148,62].includes(t))
+    handleUpdateChecked(value, name, item) {
+      let isDisabled = item.ItemsUp.some((itU) => item.CheckList.includes(itU.ChartPermissionId));
+      // 设置大套餐禁用
+      item.ItemsBig.map((itb) => (itb.disabled = isDisabled));
+      // 设置基础套餐禁用
+      item.Items.find((its) => name.includes(its.PermissionName)).disabled = value;
+    },
+    handlePrivateChecked(value, itP, item) {
+      if (![20032, 20031, 31].includes(itP.ChartPermissionId)) return;
+      // 买方严选的互斥
+      item.ItemsPrivate.forEach((itPri) => {
+        if ([20032, 20031, 31].includes(itPri.ChartPermissionId) && itP.ChartPermissionId != itPri.ChartPermissionId && value) {
+          itPri.disabled = true;
+        } else {
+          itPri.disabled = false;
         }
-        if(this.hasNoChild){
-          // 没有主客观
-          if(value){
-            item.CheckList= [...new Set([...item.CheckList,22, 21, 20, 19])]
-          }else{
-            item.CheckList = item.CheckList.filter(t => ![22, 21, 20, 19].includes(t))
+      });
+    },
+    equityGroupDisabled(item) {
+      return item.some((key) => key > 100000);
+    },
+    getQyBigServeCheckNumber(permissionName) {
+      return permissionName.includes("70") ? 1 : 2;
+    },
+    // 数字输入校验
+    validateInteger() {
+      this.minus_sign_val = this.minus_sign_val.replace(/[^0-9]/g, "");
+      if (this.minus_sign_val !== "") {
+        this.minus_sign_val = parseInt(this.minus_sign_val, 10);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.rai-checkbox-content {
+  // width: 100%;
+  // height: 160px;
+  padding: 20px 0 20px 20px;
+  border: 1px dashed #aab4cc;
+  // display: flex;
+  .rai-checkbox-bigS-box {
+    display: flex;
+    .bigS-item {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 8px;
+      height: 22px;
+      margin: 0 20px 20px 0;
+    }
+  }
+  .rai-checkbox-box {
+    display: flex;
+    // flex-wrap: wrap;
+    .rai-checkbox-main-container {
+      .rai-checkbox-main-row {
+        display: flex;
+        .small-item {
+          display: inline-flex;
+          align-items: center;
+          border: solid 1px #dcdfe6;
+          padding: 4px 12px;
+          height: 48px;
+          width: 84px;
+          margin-right: -1px;
+          margin-bottom: -1px;
+          &:first-child {
+            margin-top: -1px;
           }
-          // 设置升级禁用状态
-          item.ItemsUp.map(u =>{
-            u.disabled=value
-          })
-        }else{
-          item.Items.map(ele =>{
-            if(ele.Child){
-              ele.Checked=value
-              this.handleItemCheck(ele,item)
-            }
-          })
-        }
-      },
-      // 医药、消费、科技、智造（有主客观）选中
-      handleItemCheck(it,item){
-        // console.log(it,item);
-        it.isIndeterminate=false
-        let childIds=it.Child.map(t => t.ChartPermissionId)
-        if(it.Checked){
-          item.CheckList= [...new Set([...item.CheckList,...childIds])]
-        }else{
-          item.CheckList = item.CheckList.filter(t => !childIds.includes(t))
-        }
-        this.handleQYChecked(it,item)
-      },
-      handleQYChecked(it,item){
-        // console.log(it,item);
-        let count=0
-        if(it.Child){
-          // 有主客观
-          it.Child.map(t => {
-            if(item.CheckList.includes(t.ChartPermissionId)) count++
-          })
-          it.Checked=count==2
-          it.isIndeterminate=count==1
         }
-        if(this.hasNoChild){
-          if(item.CheckList.includes(it.ChartPermissionId)) count++
-        }
-        // 设置升级套餐的禁用
-        let changeItem=item.ItemsUp.find(itUp => itUp.PermissionName.includes(it.PermissionName))
-        if(changeItem) changeItem.disabled=count!=0
-        // 设置大套餐的状态
-        let bigServeCheckNum
-        if(this.formData.qyBigServeCheck){
-          //qyBigServeCheck有值就作用在对应的大套餐
-          bigServeCheckNum=this.formData.qyBigServeCheck==1?1:0
-        }else{
-          // 默认作用在45万上 原本有状态的话，就作用在有状态的大套餐
-          bigServeCheckNum= item.ItemsBig[1].isIndeterminate || item.ItemsBig[1].Checked?1:0
+      }
+    }
+    .rai-checkbox-private-container {
+      .rai-checkbox-notice-box {
+        display: flex;
+        align-items: center;
+        border: solid 1px #dcdfe6;
+        border-left: none;
+        height: 48px;
+        margin-right: -1px;
+        margin-left: -276px;
+        padding-left: 200px;
+        .rai-checkbox-notice {
+          color: #f00;
         }
-        // 正式服 各行业的客观的chartPermissionId和测试服的不一样
-        let allChartPermissionIds=process.env.NODE_ENV === 'production'?[22,39,21,38,20,37,19,36,23,30,148,62]:[22,37,21,36,20,35,19,34,23,30,148,62]
-        
-        let bigServeItems=this.hasNoChild?[22,21,20,19,23,30]:allChartPermissionIds
-        if(bigServeItems.every(t => item.CheckList.includes(t))){
-          item.ItemsBig[bigServeCheckNum].Checked=true
-          this.formData.qyBigServeCheck=this.getQyBigServeCheckNumber(item.ItemsBig[bigServeCheckNum].PermissionName)
-        }else{
-          item.ItemsBig[bigServeCheckNum].Checked=false
-          this.formData.qyBigServeCheck=0
+      }
+    }
+    .rai-checkbox-upS-box {
+      display: flex;
+      .upS-item {
+        position: relative;
+        justify-content: flex-start;
+        .checkbox-text {
+          position: absolute;
+          font-size: 12px;
+          color: #999;
+          bottom: 15px;
+          left: 20px;
         }
-        item.ItemsBig[bigServeCheckNum].isIndeterminate=
-        bigServeItems.some(t =>item.CheckList.includes(t)) && (!item.ItemsBig[bigServeCheckNum].Checked)
-      },
-      handleUpdateChecked(value,name,item){
-        let isDisabled = item.ItemsUp.some(itU => item.CheckList.includes(itU.ChartPermissionId))
-        // 设置大套餐禁用
-        item.ItemsBig.map(itb => itb.disabled=isDisabled)
-        // 设置基础套餐禁用
-        item.Items.find(its => name.includes(its.PermissionName)).disabled=value
-      },
-      handlePrivateChecked(value,itP,item){
-        if(![20032,20031,31].includes(itP.ChartPermissionId)) return 
-        // 买方严选的互斥
-        item.ItemsPrivate.forEach(itPri => {
-         if([20032,20031,31].includes(itPri.ChartPermissionId)&&itP.ChartPermissionId!=itPri.ChartPermissionId && value){
-             itPri.disabled =true
-          }else {
-             itPri.disabled =false
-          }
-        })
-      },
-      equityGroupDisabled(item){
-        return item.some(key=> key>100000);
-      },
-      getQyBigServeCheckNumber(permissionName){
-        return permissionName.includes('70')?1:2
-      },
-      // 只允许输入数字和删除键
-      validateInteger() {
-        this.minus_sign_val = this.minus_sign_val.replace(/[^0-9]/g, '');
-
-        // 如果输入不为空，则转换为整数
-        if (this.minus_sign_val !== '') {
-          this.minus_sign_val = parseInt(this.minus_sign_val, 10);
+        input {
+          width: 90px;
+          height: 30px;
+          border-radius: 4px;
+          padding-left: 10px;
+          border: 1px solid #dcdfe6;
         }
       }
     }
+    .rai-checkbox-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: solid 1px #dcdfe6;
+      margin-bottom: -1px;
+      margin-right: -1px;
+      padding-left: 12px;
+      min-height: 48px;
+      width: 168px;
+      .rai-checkbox-serve-box {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        height: unset;
+      }
+    }
   }
-</script>
-
-<style lang="scss" scoped>
-	.rai-checkbox-content {
-		// width: 100%;
-		// height: 160px;
-		padding: 20px 0 20px 20px;
-		border:1px dashed #aab4cc;
-		// display: flex;
-		.rai-checkbox-bigS-box{
-			display: flex;
-			.bigS-item{
-				display: inline-flex;
-				align-items: center;
-				padding: 4px 8px;
-				height: 22px;
-				margin:0 20px 20px 0;
-			}
-		}
-		.rai-checkbox-box{
-			display: flex;
-			// flex-wrap: wrap;
-			.rai-checkbox-main-container{
-				.rai-checkbox-main-row{
-					display: flex;
-					.small-item{
-						display: inline-flex;
-						align-items: center;
-						border: solid 1px #DCDFE6;
-						padding: 4px 12px;
-						height: 48px;
-						width: 84px;
-						margin-right: -1px;
-						margin-bottom:-1px;
-						&:first-child{
-							margin-top:-1px;
-						}
-					}
-				}
-			}
-			.rai-checkbox-private-container{
-				.rai-checkbox-notice-box{
-					display: flex;
-					align-items: center;
-					border: solid 1px #DCDFE6;
-          border-left: none;
-					height: 48px;
-					margin-right: -1px;
-					margin-left: -276px;
-					padding-left: 200px;
-					.rai-checkbox-notice {
-						color: #f00;
-					}
-				}
-			}
-			.rai-checkbox-upS-box{
-				display: flex;
-				.upS-item{
-          position: relative;
-					justify-content: flex-start;
-          .checkbox-text {
-            position: absolute;
-            font-size: 12px;
-            color: #999;
-            bottom: 15px;
-            left: 20px;
-          }
-          input {
-            width: 90px;
-            height: 30px;
-            border-radius: 4px;
-            padding-left: 10px;
-            border: 1px solid #dcdfe6;
-          }
-				}
-			}
-			.rai-checkbox-item{
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				border: solid 1px #DCDFE6;
-				margin-bottom:-1px;
-				margin-right: -1px;
-				padding-left: 12px;
-				min-height: 48px;
-				width: 168px;
-				.rai-checkbox-serve-box{
-					display: flex;
-					flex-direction: column;
-					align-items: flex-start;
-					height: unset;
-				}
-			}
-		}
-	}
+}
 </style>
 <style lang="scss">
-	#rai-checkbox-content{
-		.el-checkbox{
-			color: #333333;
-		}
-	}
-</style>
+#rai-checkbox-content {
+  .el-checkbox {
+    color: #333333;
+  }
+}
+</style>