yizhizan-h5/package/addJob/addJob.vue

<template>
  <view class="page-box">
    <navBar title="发布招聘" color="#000" />
    <view class="page-content">
      <view class="zpType flex justify-center">
        <view class="zpType-box flex align-center" @click="getPostType()">
          <view class="zpType-boxs flex justify-between align-center">
            <text>招聘类型</text>
            <view class="flex align-center">
              <u-input
                v-model="postType"
                disabled
                :clearable="false"
                placeholder="请选择招聘类型"
                @click="getPostType()"
                type="text"
              />
              <u-icon
                name="arrow-right"
                color="#999999"
                @click="getPostType()"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="zpType flex justify-center flex-wrap">
        <view class="zpType-box flex flex-wrap justify-center">
          <view class="zpType-boxs flex justify-between align-center">
            <text>岗位名称</text>
            <view class="flex align-center">
              <u-input v-model="stationName" placeholder="请输入岗位名称" type="text" />
              <!-- <u-icon name="arrow-right" color="#999999"  style="margin-left: 20rpx;" size="28"></u-icon> -->
            </view>
          </view>
          <view class="line"></view>
          <view class="zpType-boxs flex justify-between align-center" @click="goJob">
            <text>岗位类型</text>
            <view class="flex align-center">
              <u-input
                disabled
                v-model="ruleClassifyName"
                :style="type == 'updata' && status != 3 ? 'color:#cccccc' : ''"
                @click="goJob"
                placeholder="请选择岗位类型"
                type="text"
              />
              <u-icon
                name="arrow-right"
                :color="type == 'updata' && status != 3 ? '#cccccc' : '#999999'"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
          <view class="line"></view>
          <view class="zpType-boxs flex justify-between align-center" @click="goMap()">
            <text>工作地址</text>
            <view class="flex align-center" @click="goMap()">
              <u-input
                disabled
                v-model="address"
                @click="goMap()"
                type="text"
                placeholder="请选择工作地址"
              />
              <u-icon
                name="arrow-right"
                color="#999999"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
          <view class="line"></view>
          <view
            class="zpType-boxs flex justify-between align-center"
            @click="IntentionChen()"
          >
            <text>经验要求</text>
            <view class="flex align-center">
              <u-input
                disabled
                v-model="experience"
                @click="IntentionChen()"
                type="text"
                placeholder="请选择经验要求"
              />
              <u-icon
                name="arrow-right"
                color="#999999"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
          <view class="line"></view>
          <view
            class="zpType-boxs flex justify-between align-center"
            @click="getSchoolList()"
          >
            <text>学历要求</text>
            <view class="flex align-center">
              <u-input
                disabled
                v-model="education"
                type="text"
                @click="getSchoolList()"
                placeholder="请选择学历要求"
              />
              <u-icon
                name="arrow-right"
                color="#999999"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
          <view class="line"></view>
          <view
            class="zpType-boxs flex justify-between align-center"
            @click="getPriceList()"
          >
            <text>薪资范围</text>
            <view class="flex align-center">
              <u-input
                disabled
                v-model="salaryRange"
                @click="getPriceList()"
                type="text"
                placeholder="请选择薪资范围"
              />
              <u-icon
                name="arrow-right"
                color="#999999"
                style="margin-left: 20rpx"
                size="28"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="xt flex justify-center">
        <view class="xt-box flex justify-center">
          <view class="xt-box-c">
            <view class="xt-box-c-item">
              <view class="xt-box-c-item-title flex justify-between align-center">
                岗位关键词
                <u-icon
                  class="tagItmIcon"
                  @click="showTag = true"
                  name="plus-circle-fill"
                  color="#cccccc"
                  size="42"
                ></u-icon>
              </view>
              <view class="xt-box-c-item-text flex justify-between align-center">
                <!-- <u-input style="width: 90%;" input-align="left" v-model="tag" type="text"
								placeholder="将优先推荐符合关键词的人才" /> -->
                <view
                  class=""
                  style="
                    margin-top: 20rpx;
                    margin-bottom: 20rpx;
                    color: rgb(192, 196, 207);
                  "
                  v-if="tag.length == 0"
                >
                  将优先推荐符合关键词的人才
                </view>
                <view
                  class="flex flex-wrap"
                  style="margin-top: 20rpx; margin-bottom: 20rpx"
                  v-else
                >
                  <view class="tagItm" v-for="(item, index) in tag" :key="index">
                    {{ item }}
                    <u-icon
                      class="tagItmIcon"
                      @click="deleteTag(item, index)"
                      name="close-circle-fill"
                      color="#cccccc"
                      size="28"
                    ></u-icon>
                  </view>
                </view>
                <!-- <u-icon name="arrow-right" color="#999999" style="margin-left: 20rpx;" size="28"></u-icon> -->
              </view>
              <view class="line margin-top-sm"></view>
            </view>
            <view class="xt-box-c-item" @click="gotoHy">
              <view class="xt-box-c-item-title"> 行业要求 </view>
              <view class="xt-box-c-item-text flex justify-between align-center">
                <u-input
                  @click="gotoHy"
                  disabled
                  style="width: 90%"
                  input-align="left"
                  v-model="industry"
                  type="text"
                  placeholder="对人才行业背景的要求"
                />
                <u-icon
                  name="arrow-right"
                  color="#999999"
                  style="margin-left: 20rpx"
                  size="28"
                ></u-icon>
              </view>
              <view class="line margin-top-sm"></view>
            </view>
            <view class="xt-box-c-item" @click="setFuLi">
              <view class="xt-box-c-item-title"> 岗位福利 </view>
              <view class="xt-box-c-item-text flex justify-between align-center">
                <u-input
                  @click="setFuLi"
                  disabled
                  style="width: 90%"
                  input-align="left"
                  v-model="positionWelfare"
                  type="text"
                  placeholder="请选择岗位福利"
                />
                <u-icon
                  name="arrow-right"
                  color="#999999"
                  style="margin-left: 20rpx"
                  size="28"
                ></u-icon>
              </view>
              <view class="line margin-top-sm"></view>
            </view>
            <view class="xt-box-c-item">
              <view class="xt-box-c-item-title"> 岗位介绍 </view>
              <view class="xt-box-c-item-text flex justify-between align-center">
                <!-- <u-input style="width: 100%;" input-align="left" v-model="positionDetails" type="text"
								placeholder="请输入岗位介绍信息内容" /> -->
                <!-- <textarea placeholder-class="myText"
								style="width: 100%;height: 300rpx;background-color: #f5f5f5;border-radius: 24rpx;padding: 20rpx;margin-top: 20rpx;"
								v-model="positionDetails" placeholder="请输入岗位介绍信息内容"></textarea> -->
                <editor
                  id="editor"
                  style="
                    width: 100%;
                    height: 300rpx;
                    background-color: #f5f5f5;
                    border-radius: 24rpx;
                    padding: 20rpx;
                    margin-top: 20rpx;
                  "
                  placeholder="请输入岗位介绍信息内容"
                  @ready="onEditorReady"
                >
                </editor>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="xieyi flex justify-center align-center">
        <view class="xieyi-box">
          <u-checkbox
            @change="checkboxChange"
            v-model="selectShow"
            shape="circle"
            active-color="#016BF6"
            label-size="24rpx"
          >
            我已同意<text style="color: #016bf6" @click.stop="gotoXieyi()">
              《岗位发布协议》
            </text>
          </u-checkbox>
        </view>
      </view>
      <view class="btn flex justify-center align-center">
        <view class="btn-box flex justify-center align-center" @click="submitJob()">
          确认发布
        </view>
      </view>

      <!-- 工作性质 -->
      <u-select v-model="workShow" :list="workTypes" @confirm="workConfirm"></u-select>
      <!-- 工作经验 -->
      <u-select v-model="workShow2" :list="workList" @confirm="workConfirm2"></u-select>
      <!-- 学历 -->
      <u-select
        v-model="schoolShow"
        :list="schoolList"
        @confirm="workConfirm3"
      ></u-select>
      <!-- 薪资 -->
      <u-select v-model="priceShow" :list="priceList" @confirm="workConfirm4"></u-select>
      <!-- 岗位福利 -->
      <u-popup
        v-model="showFl"
        mode="bottom"
        border-radius="24"
        :mask-close-able="false"
        :closeable="true"
      >
        <view class="fl flex justify-center">
          <view class="fl-box">
            <view class="fl-box-title"> 岗位福利 </view>
            <view class="fl-box-con flex flex-wrap">
              <view
                class="fl-box-con-item"
                :class="item.select == true ? 'flActive' : ''"
                @click="selectFl(item)"
                v-for="(item, index) in flList"
                :key="index"
              >
                {{ item.value }}
              </view>
            </view>
            <view class="fl-box-sub flex justify-center align-center" @click="subFl()">
              确认
            </view>
          </view>
        </view>
      </u-popup>
      <!-- 岗位关键词 -->
      <u-popup
        v-model="showTag"
        mode="center"
        width="600rpx"
        :closeable="true"
        height="400rpx"
        border-radius="24"
      >
        <view class="tagTitle">岗位关键词</view>
        <view class="tagCont flex justify-center">
          <view class="tagCont-box">
            <u-input
              v-model="tagValue"
              type="text"
              placeholder="请输入岗位关键词"
              input-align="left"
              :border="true"
            />
          </view>
        </view>
        <view class="tagCont flex justify-center">
          <view class="tagCont-boxs flex align-center justify-center" @click="addTag">
            确认
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      selectShow: false,
      tagValue: "",
      showTag: false,
      flList: [],
      showFl: false,
      postType: "",
      stationName: "",
      projectName: "",
      experience: "",
      education: "",
      salaryRange: "",
      tag: [],
      industry: "",
      positionWelfare: "",
      positionDetails: "",
      workTypes: [],
      workShow: false,
      lat: "",
      lng: "",
      address: "",
      province: "",
      city: "",
      county: "",
      workList: [],
      workShow2: false,
      schoolList: [],
      schoolShow: false,
      priceList: [],
      priceShow: false,
      ruleClassifyId: "",
      ruleClassifyName: "",
      classifyOneId: "",
      classifyTwoId: "",
      price: 0,
      postPushId: "",
      type: "",
      status: "",
      editorCtx: "", //富文本输入框的上下文
    };
  },
  onLoad(option) {
    if (option.type) {
      this.type = option.type;
    }
    if (option.postPushId) {
      this.postPushId = option.postPushId;
      // this.getJobInfo()
    }
    //项目福利
    this.getFlList();
  },
  components: {
    navBar,
  },
  onShow() {
    let that = this;
    //选择的岗位
    uni.$on("jobs", (info) => {
      that.ruleClassifyId = info.ruleClassifyId;
      that.ruleClassifyName = info.ruleClassifyName;
      that.price = info.price;
      // that.classifyOneId = info.ruleClassifyId1
      // that.classifyTwoId = info.ruleClassifyId2
    });
    //选择的行业
    uni.$on("industry", (info) => {
      that.industry = info.industry;
    });
  },
  methods: {
    //给富文本插入
    insertText(formatDate) {
      this.editorCtx.setContents({
        html: formatDate,
      });
    },
    //editor初始化的时候
    onEditorReady() {
      let that = this;
      console.log(uni.createSelectorQuery().select("#editor").context, "99999999");
      uni
        .createSelectorQuery()
        .select("#editor")
        .context((res) => {
          console.log(res, "88888888");
          this.editorCtx = res.context;
          if (this.postPushId) {
            this.getJobInfo();
          }
        })
        .exec();

      // setTimeout(() => {
      // 	this.insertText(this.positionDetails)
      // }, 500)
    },
    //岗位发布协议
    gotoXieyi() {
      uni.navigateTo({
        url: "/my/setting/jobXy",
      });
    },
    //判断是否可以更改岗位
    goJob() {
      if (this.type == "save" || !this.type || this.status == 3) {
        this.goNav("/package/jobIntention/jobList");
      } else {
        uni.showModal({
          title: "提示",
          content: "当前无法修改为其他岗位，若有需要请重新发布",
          confirmText: "去发布",
          complete(ret) {
            if (ret.confirm) {
              uni.navigateTo({
                url: "/package/addJob/addJob",
              });
            }
          },
        });
      }
    },
    //获取岗位价格
    getJobPrice(ruleClassifyId) {
      this.$Request
        .getT("/app/rule/ruleClassifyId", {
          ruleClassifyId: ruleClassifyId,
        })
        .then((res) => {
          if (res.code == 0) {
            this.price = res.data.price;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
    },
    //获取岗位详情
    getJobInfo() {
      let data = {
        postPushId: this.postPushId,
      };
      this.$Request.getT("/app/postPush/selectPostPushDetails", data).then((res) => {
        if (res.code == 0) {
          let obj = res.data;
          this.postType = obj.postType;
          this.stationName = obj.stationName;
          this.ruleClassifyName = obj.ruleClassifyName;
          this.ruleClassifyId = obj.ruleClassifyId;
          this.address = obj.address;
          this.experience = obj.experience;
          this.education = obj.education;
          this.salaryRange = obj.salaryRange;
          this.tag = obj.tag.split(",");
          this.industry = obj.industry;
          this.positionWelfare = obj.positionWelfare;
          this.positionDetails = obj.positionDetails;
          this.insertText(this.positionDetails);
          this.province = obj.province;
          this.city = obj.city;
          this.county = obj.county;
          this.lng = obj.lng;
          this.lat = obj.lat;
          this.status = obj.status;
          if (this.type == "save") {
            this.getJobPrice(obj.ruleClassifyId);
          } else if (this.status == 3) {
            this.getJobPrice(obj.ruleClassifyId);
          }
        }
      });
    },
    submitJobs() {
      let that = this;
      if (this.postType == "") {
        uni.showToast({
          title: "请选择招聘类型",
          icon: "none",
        });
        return;
      }
      if (this.stationName == "") {
        uni.showToast({
          title: "请输入岗位名称",
          icon: "none",
        });
        return;
      }
      if (this.ruleClassifyName == "") {
        uni.showToast({
          title: "请选择岗位类型",
          icon: "none",
        });
        return;
      }
      if (this.address == "") {
        uni.showToast({
          title: "请选择工作地址",
          icon: "none",
        });
        return;
      }
      if (this.experience == "") {
        uni.showToast({
          title: "请选择经验要求",
          icon: "none",
        });
        return;
      }
      if (this.education == "") {
        uni.showToast({
          title: "请选择学历要求",
          icon: "none",
        });
        return;
      }
      if (this.salaryRange == "") {
        uni.showToast({
          title: "请选择薪资范围",
          icon: "none",
        });
        return;
      }
      if (this.tag.length == 0) {
        uni.showToast({
          title: "请添加岗位关键词",
          icon: "none",
        });
        return;
      }
      if (this.industry == "") {
        uni.showToast({
          title: "请选择行业要求",
          icon: "none",
        });
        return;
      }
      if (this.positionWelfare == "") {
        uni.showToast({
          title: "请选择岗位福利",
          icon: "none",
        });
        return;
      }
      if (this.positionDetails == "" || this.positionDetails == "<p><br></p>") {
        uni.showToast({
          title: "请输入岗位介绍",
          icon: "none",
        });
        return;
      }

      if (this.selectShow == false) {
        uni.showToast({
          title: "请查看并同意《岗位发布协议》",
          icon: "none",
        });
        return;
      }
      if (this.type == "save") {
        if (Number(this.price) == 0) {
          uni.showModal({
            title: "提示",
            content: "该岗位可免费发布，确认发布吗？",
            complete(ret) {
              if (ret.confirm) {
                // console.log(1)
                that.pay();
              }
            },
          });
        } else {
          uni.showModal({
            title: "提示",
            content: "发布该岗位需支付" + this.price + "钻石，确认发布吗？",
            complete(ret) {
              if (ret.confirm) {
                // console.log(1)
                that.pay();
              }
            },
          });
        }
      } else if (this.type == "updata") {
        //修改
        if (this.status == 3) {
          //拒绝重新发布
          if (Number(this.price) == 0) {
            uni.showModal({
              title: "提示",
              content: "该岗位可免费发布，确认发布吗？",
              complete(ret) {
                if (ret.confirm) {
                  // console.log(1)
                  that.pay();
                }
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "发布该岗位为热门岗位，需支付" + this.price + "钻石，确认发布吗？",
              complete(ret) {
                if (ret.confirm) {
                  // console.log(1)
                  that.pay();
                }
              },
            });
          }
        } else {
          //时效期内修改
          uni.showModal({
            title: "提示",
            content: "本次修改岗位信息免费，确认发布吗？",
            complete(ret) {
              if (ret.confirm) {
                // console.log(1)
                that.pay(that.postPushId);
              }
            },
          });
        }
      } else {
        uni.showModal({
          title: "提示",
          content: "发布该岗位为热门岗位，需支付" + this.price + "钻石，确认发布吗？",
          complete(ret) {
            if (ret.confirm) {
              // console.log(1)
              that.pay();
            }
          },
        });
      }
    },
    //发布岗位
    submitJob() {
      let that = this;
      //获取富文本中的内容
      this.editorCtx.getContents({
        success(res) {
          that.positionDetails = res.html;
        },
        complete() {
          //成功/或者失败都调用发布
          that.submitJobs();
        },
      });
    },
    //支付
    pay(postPushId) {
      let data = {
        postType: this.postType,
        stationName: this.stationName,
        ruleClassifyName: this.ruleClassifyName,
        ruleClassifyId: this.ruleClassifyId,
        address: this.address,
        experience: this.experience,
        education: this.education,
        salaryRange: this.salaryRange,
        tag: this.tag.join(","),
        industry: this.industry,
        positionWelfare: this.positionWelfare,
        positionDetails: this.positionDetails,
        province: this.province,
        city: this.city,
        county: this.county,
        lng: this.lng,
        lat: this.lat,
        companyId: uni.getStorageSync("companyId"),
      };
      if (postPushId) {
        data.postPushId = postPushId;
      }
      this.$Request.postJson("/app/postPush/savePostPush", data).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "发布成功",
          });
          this.postType = "";
          this.stationName = "";
          this.ruleClassifyName = "";
          this.ruleClassifyId = "";
          this.address = "";
          this.experience = "";
          this.education = "";
          this.salaryRange = "";
          this.tag = [];
          this.industry = "";
          this.positionWelfare = "";
          this.positionDetails = "";
          this.province = "";
          this.city = "";
          this.county = "";
          this.lng = "";
          this.lat = "";
          this.postPushId = "";
          setTimeout(() => {
            if (this.type) {
              uni.navigateBack();
            } else {
              uni.navigateTo({
                url: "/my/order/index",
              });
            }
          }, 1000);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //新增关键词
    addTag() {
      // this.tag.push('关键词');
      if (this.tagValue == "") {
        uni.showToast({
          title: "请输入关键词",
          icon: "none",
        });
      } else {
        this.tag.push(this.tagValue);
        this.showTag = false;
        this.tagValue = "";
      }
    },
    //删除输入的关键词
    deleteTag(item, index) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除关键词“" + item + "”吗？",
        complete(ret) {
          if (ret.confirm) {
            that.tag.splice(index, 1);
          }
        },
      });
    },
    //行业选择页
    gotoHy() {
      uni.navigateTo({
        url: "/package/jobIntention/industry?type=2",
      });
    },
    //确认选择的福利
    subFl() {
      let arr = [];
      this.flList.map((item) => {
        if (item.select === true) {
          arr.push(item.value);
        }
      });
      this.positionWelfare = arr.join(",");
      this.showFl = false;
    },
    setFuLi() {
      if (this.flList.length > 0) {
        this.showFl = true;
      } else {
        this.showFl = false;
        uni.showToast({
          title: "暂无岗位福利可选择",
          icon: "none",
        });
      }
    },
    //选中/取消选中福利
    selectFl(item) {
      item.select = !item.select;
      console.log(item);
      this.$forceUpdate();
    },
    // 获取项目福利列表
    getFlList() {
      let data = {
        type: "项目福利",
      };
      this.$Request.get("/app/dict/list", data).then((res) => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            res.data.map((item) => {
              item.select = false;
            });
            if (this.postPushId) {
              res.data.map((item) => {
                this.positionWelfare.split(",").map((ite) => {
                  if (item.value === ite) {
                    item.select = true;
                  }
                });
              });
            }
            this.flList = res.data;
          } else {
            this.flList = [];
          }
        }
      });
    },
    goNav(url) {
      uni.navigateTo({
        url: url,
      });
    },
    workConfirm4(e) {
      this.salaryRange = e[0].value;
    },
    //薪资
    getPriceList() {
      this.$Request
        .get("/app/dict/list", {
          type: "薪资",
        })
        .then((res) => {
          if (res.code == 0) {
            let arr = res.data;
            arr = JSON.parse(JSON.stringify(arr).replace(/code/g, "label"));
            this.priceList = arr;
            this.priceShow = true;
          }
        });
    },
    workConfirm3(e) {
      this.education = e[0].value;
    },
    //学历
    getSchoolList() {
      this.$Request
        .get("/app/dict/list", {
          type: "学历",
        })
        .then((res) => {
          if (res.code == 0) {
            let arr = res.data;
            arr = JSON.parse(JSON.stringify(arr).replace(/code/g, "label"));
            this.schoolList = arr;
            this.schoolShow = true;
          }
        });
    },
    // 工作经验
    IntentionChen() {
      this.$Request
        .get("/app/dict/list", {
          type: "工作经验",
        })
        .then((res) => {
          if (res.code == 0) {
            let arr = res.data;
            arr = JSON.parse(JSON.stringify(arr).replace(/code/g, "label"));
            this.workList = arr;
            this.workShow2 = true;
          }
        });
    },
    // 点击调起地图选择位置
    goMap() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          console.log(res);
          that.address = res.name;
          that.lat = res.latitude;
          that.lng = res.longitude;
          that.shengcheng(res.longitude, res.latitude);
        },
      });
    },
    shengcheng(longitude, latitude) {
      this.$Request
        .getT("/app/Login/selectCity?lat=" + latitude + "&lng=" + longitude)
        .then((res) => {
          // console.log(res)
          if (res.code === 0) {
            this.province = res.data.province;
            if (res.data.city) {
              this.city = res.data.city;
            } else {
              this.city = res.data.province;
            }
            this.county = res.data.district;
          }
        });
    },
    workConfirm2(e) {
      this.experience = e[0].value;
    },
    //选择类型
    workConfirm(e) {
      this.postType = e[0].value;
    },
    /**
     * 工作性质
     */
    getPostType() {
      this.$Request
        .get("/app/dict/list", {
          type: "工作性质",
        })
        .then((res) => {
          if (res.code == 0) {
            let arr = res.data;
            arr = JSON.parse(JSON.stringify(arr).replace(/code/g, "label"));
            this.workTypes = arr;
            this.workShow = true;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
  padding-bottom: 100rpx;
}
.page-box {
	  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .page-content{
	width: 100%;
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
	padding-bottom: 40rpx;
	box-sizing: border-box;
  }
}
.myText {
  color: #c0c4cc;
}

.tagTitle {
  width: 100%;
  margin-top: 30rpx;
  text-align: center;
}

.tagCont {
  width: 100%;
  margin-top: 50rpx;

  .tagCont-box {
    width: 80%;
  }

  .tagCont-boxs {
    width: 80%;
    height: 80rpx;
    background-color: #016bf6;
    color: #ffffff;
    border-radius: 14rpx;
  }
}

.flActive {
  color: #016bf6 !important;
  background-color: #ddfff7 !important;
}

.fl {
  width: 100%;
  height: 100%;

  .fl-box {
    width: 686rpx;
    height: 100%;

    .fl-box-title {
      width: 100%;
      text-align: center;
      margin-top: 30rpx;
    }

    .fl-box-con {
      width: 100%;
      margin-top: 20rpx;

      .fl-box-con-item {
        padding: 15rpx;
        background-color: #f2f2f7;
        color: #121212;
        margin-right: 15rpx;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
      }
    }

    .fl-box-sub {
      width: 100%;
      height: 70rpx;
      border-radius: 16rpx;
      background-color: #016bf6;
      color: #ffffff;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
    }
  }
}

.line {
  width: 626rpx;
  border: 1rpx solid #f2f2f2;
}

.zpType {
  width: 100%;
  margin-top: 30rpx;

  .zpType-boxs {
    width: 100%;
    padding: 20rpx 30rpx;

    text {
      color: #333333;
      font-size: 28rpx;
      font-weight: 800;
    }
  }

  .zpType-box {
    width: 686rpx;
    height: 100%;
    background-color: #ffffff;
    border-radius: 24rpx;
  }
}

.xt {
  width: 100%;
  // height: 675rpx;
  margin-top: 20rpx;

  .xt-box {
    width: 686rpx;
    height: 100%;
    background-color: #ffffff;
    border-radius: 24rpx;

    .xt-box-c {
      width: 626rpx;
      height: 100%;
      padding-bottom: 30rpx;
    }

    .xt-box-c-item {
      width: 100%;
      margin-top: 30rpx;

      .xt-box-c-item-title {
        width: 100%;
        color: #333333;
        font-size: 28rpx;
        font-weight: 800;
      }

      .xt-box-c-item-text {
        width: 100%;

        .tagItm {
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          padding: 15rpx;
          border-radius: 8rpx;
          background-color: #ddfff7;
          color: #016bf6;
          position: relative;

          .tagItmIcon {
            position: absolute;
            right: -6rpx;
            top: -6rpx;
          }
        }
      }
    }
  }
}

.xieyi {
  width: 100%;
  margin-top: 30rpx;

  .xieyi-box {
    width: 686rpx;
  }
}

.btn {
  width: 100%;
  height: 88rpx;
  margin-top: 54rpx;

  .btn-box {
    width: 686rpx;
    height: 100%;
    background-color: #016bf6;
    border-radius: 16rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
  }
}
</style>