proginn-frontend/components/works/editor.vue

<template>
  <div class="editor">
    <!-- title -->
    <div class="work-title">{{ this.wid ? "编辑" : "添加" }}项目作品</div>
    <div class="work-title-tips">
      项目信息是最重要的信息，切勿填写“123456”等无关信息；<br />为了给有诚意的开发者更多接单机会，因此导致的审核不通过，可能<span
        >不再二次审核</span
      >
    </div>
    <!--项目类型-->
    <div class="work-field" style="margin-top: 30px;">
      <div class="work-label">项目类型（可加1-3个标签）</div>
      <div class="work-tag-container">
        <div class="work-tag-list">
          <div class="work-tag-input1">
            <el-input
              style="width:560px"
              ref="tag-input"
              placeholder="比如直播APP；电商商城；可视化大屏；网站爬虫程序；按回车确认"
              v-model.trim.lazy="tagValue"
              @keyup.enter.native="tagSubmit"
            >
            </el-input>
            <!-- 比如直播APP；电商商城；可视化大屏；网站爬虫程序；RPA软件；AI图像识别 -->
            <!-- <div class="work-tag-placeholder" @click="inputFocus">

            </div> -->
          </div>
        </div>
        <div class="work-tag-input">
          <div
            id="work-tag-input-placeholder"
            class="work-tag-input-placeholder"
            @click.stop="isShowTagList = !isShowTagList"
          >
            添加标签
            <i
              id="work-tag-input-icon"
              :class="isShowTagList ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </div>
        </div>
        <div
          class="work-tag-select-container"
          @click.stop=""
          v-show="isShowTagList"
        >
          <div
            v-for="(rowsItem, index) in tagArr"
            :key="index"
            class="work-tag-select-row"
          >
            <span
              v-for="(item, index2) in rowsItem"
              :key="index2"
              class="work-tag-item"
              :class="{
                cur: dynamicTags.indexOf(item) > -1
              }"
              @click.stop="addTags(item)"
              >{{ item }}</span
            >
          </div>
        </div>
      </div>
      <div class="work-tag-ul" v-show="dynamicTags.length > 0">
        <el-tag
          :key="tag"
          v-for="(tag, index) in dynamicTags"
          closable
          :disable-transitions="false"
          @close="delTags(index)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!--作品名称-->
    <div class="work-field" style="margin-top: 30px;">
      <div class="work-label">项目名称</div>
      <el-input
        type="textarea"
        :rows="1"
        resize="none"
        show-word-limit
        v-model="workName"
        class=""
        placeholder="比如抖音；微信；QQ；淘宝"
        :maxlength="50"
        @blur="workNameBlur"
      />
    </div>
    <!--作品描述-->
    <div class="work-field" style="align-items:flex-start">
      <div class="work-label">详细信息（重点）</div>
      <el-input
        type="textarea"
        v-model="content"
        :placeholder="textareaPlaceholder"
        :maxlength="10000"
        :minlength="80"
        :show-word-limit="true"
        class="work-el-textarea"
        :rows="8"
      />
    </div>
    <!--作品链接-->
    <!-- <div class="work-field">
      <div class="work-label">作品链接</div>
      <el-input
        v-model="workUrl"
        class="title _title"
        placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图"
      ></el-input>
    </div> -->
    <!--作品封面图 -->
    <div class="work-field">
      <div class="work-label" style="margin-bottom: 10px;">
        项目图片(至少2张)
      </div>
      <multi-uploader v-model="workImages"></multi-uploader>
    </div>
    <!-- 所属分类 & 作品类型 -->
    <div class="work-field">
      <div class="work-label">所属分类</div>
      <div class="work-cate-type">
        <el-cascader
          class="work-cate-cascader"
          v-model="selectedWorkCate"
          :options="workCate"
          :props="{ expandTrigger: 'hover' }"
          placeholder="请选择作品分类"
        ></el-cascader>
      </div>
    </div>
    <!-- 作品资源 -->
    <div v-if="from!='sign'" class="work-field">
      <div class="work-label" style="margin-bottom: 10px;">
        作品资源<span class="upload-tips"
          >文件小于1GB，请勿上传侵权内容作品</span
        >
      </div>
      <div class="">
        <el-upload
          style="display:inline-block"
          action="#"
          ref="upload"
          :on-success="handleSuccess"
          :on-change="uploadFileChange"
          :on-remove="uploadFileDelete"
          :on-err="uploadFileError"
          :multiple="false"
          :show-file-list="false"
          :file-list="uploadFileList"
        >
          <div class=" app__f_r app__al_c">
            <button
              slot="trigger"
              class="upload-btn"
              v-if="uploadFileList.length === 0"
            >
              点击添加
            </button>
          </div>
        </el-upload>
        <div v-if="uploadFileList.length > 0" class="app__mw_40_p">
          <div class="app__f_r app__al_c">
            <p class="app__fs_15 app__txt_ellipsis">
              {{ uploadFileList.length > 0 ? uploadFileList[0].name : "" }}
            </p>
            <button
              class="app__fc_999 app__fs_18 app__ml_20"
              @click="uploadFileDelete"
            >
              x
            </button>
          </div>
          <el-progress
            :percentage="uploadPercentage"
            status="success"
            :stroke-width="8"
            class="app__mt_10"
          />
        </div>
      </div>
    </div>
    <!-- 资源价格 -->
    <div class="work-field" v-if="uploadFileList.length > 0">
      <div class="work-label">资源价格</div>
      <div class="work-price-wrapper">
        <el-input
          class="work-price-input"
          type="number"
          placeholder="请输入资源价格"
          @input="priceChange"
          v-model="price"
        ></el-input>
        <span>元</span>
      </div>
    </div>
    <!-- btn group -->
    <footer class="editor-footer">
      <el-button
        type="primary"
        @click="publish"
        class="btn-save"
        v-bind:disabled="isPublishing || !canNext"
        >{{ submitText }}</el-button
      >
      <!--      <el-button @click="cancel">取消</el-button>-->
    </footer>
  </div>
</template>

<script>
import editor from "@/components/editor";
import multiUploader from "@/components/multi-uploader";
import axios from "axios";
import oos from "../../mixins/oos";
import { Toast, Overlay } from "vant";

function creatMockTag() {
  let result = [
    [
      "区块链",
      "棋牌",
      "企业服务",
      "直播",
      "招聘",
      "云计算",
      "人工智能",
      "社交",
      "音视频",
      "电商",
      "教育",
      "安全",
      "即时通讯"
    ],
    [
      "外卖",
      "旅游",
      "团购",
      "医疗",
      "金融",
      "出行",
      "可视化",
      "AR",
      "VR",
      "硬件",
      "本地生活",
      "地图"
    ],
    ["app", "小程序", "网站", "管理后台", "游戏", "工业程序"]
  ];

  return result;
}

export default {
  head() {
    return {
      script: []
    };
  },
  components: {
    editor,
    multiUploader
  },
  data() {
    return {
      topicId: "", // 编辑
      hashID: null,
      workName: "",
      title: "",
      subTitle: "",
      content: "",
      cover_url: "",
      dialogVisible: false,
      disabled: false,
      collectionId: "",
      collectionList: [],
      categoryList: [
        {
          value: "default",
          label: "推荐"
        }
      ],
      fileList: [],
      uploading: false,
      workUrl: "",
      isPublishing: false,
      workImages: [],
      wid: "",
      work_up_url: "",
      workList: [],
      // 所属分类
      workCate: [],
      selectedWorkCate: [],
      // 资源类型: 1 免费，2 付费
      workType: 1,
      // 资源价格
      price: 1,
      from:"",
      // 标签
      isFocus: false,
      tagValue: "",
      isShowTagList: false,
      dynamicTags: [],
      tagArr: creatMockTag(),

      textareaPlaceholder:
        "可以参考以下内容：\n1.【60%】项目分为哪些功能模块，对使用者来说能实现哪些功能 \n2.【40%】我负责哪些任务，使用了什么技术栈，最终达到了什么成果 \n3.【选填】有哪些难点，怎么解决的"
    };
  },
  mixins: [oos],
  computed: {
    /**
     * 提交保存时的文字：
     * 1. 没有作品资源时，文案为“保存”
     * 2. 有作品资源时，文案为“保存并提交审核”
     */
    submitText() {
      let res = "保存";

      if (this.uploadFileList && this.uploadFileList.length) {
        res = "保存并提交审核";
      }

      return res;
    },
    canNext() {
      const condition = this.dynamicTags.length > 0;
      const condition2 = this.workName !== "";
      const condition3 = this.content !== "";
      const condition4 = this.workImages.length > 1;
      return condition && condition2 && condition3 && condition4;
    }
  },
  created() {},
  mounted() {
    let from=this.$route.query.from;
    this.from=from;
    this.needLogin();
    this.getWorkCate();
    // this.needVerify();
    // this.getHejiList();
    this.wid = this.$route.query.wid || "";
    if (this.wid) {
      this.getWorkDetail();
      this.getWorkFile();
    }
    console.log("url", this.$route.query.wid);
    this.$nextTick(() => {
      this.createSelectMask();
    });
  },
  methods: {
    createSelectMask() {
      let body = document.querySelector("body");
      body.addEventListener(
        "click",
        e => {
          let id = e.target.id;
          if (
            id == "work-tag-input-placeholder" ||
            id == "work-tag-input-icon"
          ) {
            this.isShowTagList = true;
          } else {
            this.isShowTagList = false;
          }
        },
        false
      );
    },
    getWorkDetail(data) {
      this.$axios
        .$post(`/api/user_works/get_detail`, { wid: this.$route.query.wid })
        .then(res => {
          console.log(res);
          if (res.status == 1) {
            this.workName = res.data.name || "";
            this.content = res.data.description || "";
            this.setWorkImages(res.data);
            this.workUrl = res.data.url || "";
            this.dynamicTags =
              res.data.tag === "" ? [] : res.data.tag.split(",");
            if (res.data.cate_id_one && res.data.cate_id_two) {
              this.selectedWorkCate = [
                res.data.cate_id_one,
                res.data.cate_id_two
              ];
            }
            this.workType = res.data.price > 0 ? 2 : 1;
            this.price = res.data.price || 0;
          }
        });
    },
    getWorkFile() {
      this.$axios
        .$post(`/api/UserWorks/getWorkFile`, { wid: this.$route.query.wid })
        .then(res => {
          console.log(res);
          if (res.status === 1) {
            this.uploadFileList.push({
              name: res.data.file_name,
              url: res.data.file_url_abs,
              path: res.data.file_url
            });
            console.log(this.uploadFileList);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
     * 获取作品分类
     */
    getWorkCate() {
      this.$axios
        .$post("/api/user_works/cate")
        .then(res => {
          if (res.status === 1) {
            let workCate = res.data || [];
            this.workCate = workCate.map(item => {
              let children = item.child.map(child => {
                return {
                  value: child.category_id,
                  label: child.name
                };
              });
              return {
                value: item.category_id,
                label: item.name,
                children: children
              };
            });
          }
        })
        .catch(err => {
          console.log("get work cate error: ", err);
        });
    },
    setWorkImages(data) {
      let images = data.images;
      if (images && images.length > 0) {
        images.forEach((image, index) => {
          let imageName = this.getImageName(image.url);
          console.log("imageName", imageName);
          this.workImages.push({ name: imageName + index, url: image.url });
        });
      }
      console.log(this.workImages);
    },
    getImageName(imageName) {
      if (imageName) {
        try {
          const lastquotaIndex = imageName.lastIndexOf("/");
          const lastDotIndex = imageName.lastIndexOf(".");
          return imageName.substring(lastquotaIndex + 1, lastDotIndex);
        } catch (e) {
          console.log(e);
        }
      }
      return "";
    },
    getHejiList() {
      this.$axios
        .post("/api/jishuquan/get_collections", {
          uid: this.$store.state.userinfo.uid,
          page: 1,
          size: 200
        })
        .then(res => {
          if (res.data.status === 1) {
            this.collectionList = res.data.data;
          }
        });
    },
    /**
     * 发布项目作品
     */
    publish() {
      const self = this;
      this.cnzz("资源下载", "工作台+保存", "");
      //防止快速连点
      if (this.isPublishing) {
        return;
      }
      this.isPublishing = true;

      const validCheckResult = this.publishValidCheck();
      if (!validCheckResult.success) {
        this.$message.error(validCheckResult.msg);
        this.isPublishing = false;
        return;
      }

      let workFile =
        this.uploadFileList.length > 0 ? this.uploadFileList[0].url : "";
      const data = {
        name: this.workName,
        description: this.content,
        url: this.workUrl,
        image_list: this.workImages.map(it => it.url).join(","),
        work_file: workFile,
        type: this.workType,
        cate_id_one: this.selectedWorkCate[0],
        cate_id_two: this.selectedWorkCate[1],
        price: this.price,
        tag: this.dynamicTags.join(",")
      };

      if (this.wid) {
        data.wid = this.wid;
        this.$axios.$post(`/api/user_works/update`, data).then(res => {
          console.log(res);
          if (res.status === -99) {
            this.goHome();
          }
          if (res.status === 1) {
            if (this.uploadFileList && this.uploadFileList.length) {
              // 有作品资源时
              this.$message.success("提交成功，系统将在1-3个工作日完成审核");
            } else {
              // 无作品资源时
              this.$message.success("编辑作品成功！");
            }
            setTimeout(() => {
              //window.location.href = `/wo/${self.$store.state.userinfo.uid}/works`;
              if (this.$route.query.from === "sign") {
                this.$router.back();
              } else {
                window.location.href = res.data.work_url;
              }
            }, 800);
            // window.location.href = res.data.work_url;
          } else {
            this.$message.error("编辑作品失败，请重试");
          }
          this.isPublishing = false;
        });
      } else {
        this.$axios.$post(`/api/user_works/add`, data).then(res => {
          console.log(res);
          if (res.status === -99) {
            this.goHome();
          }
          if (res.status === 1) {
            if (this.uploadFileList && this.uploadFileList.length) {
              // 有作品资源时
              this.$message.success("提交成功，系统将在1-3个工作日完成审核");
            } else {
              // 无作品资源时
              this.$message.success("添加作品成功！");
            }
            this.wid = res.data.wid || "";
            setTimeout(() => {
              if(this.from=="sign")
              {
                location.href = "/sign/new_v2?step=3";
              }
              else
              {
                window.location.href = res.data.work_url;
              }
            }, 800);
          } else {
            this.$message.error("添加作品失败，请重试");
          }
          this.isPublishing = false;
        });
      }
    },
    /**
     * 输入合法性检查
     * @return {{msg: string, success: boolean}}
     */
    publishValidCheck() {
      if (this.dynamicTags.length === 0) {
        return { success: false, msg: "请请输入（项目类型、标签）" };
      }
      if (!this.workName) {
        return { success: false, msg: "请输入作品名称" };
      }
      if (this.workName.length < 2) {
        return { success: false, msg: "作品名称不可少于2字符" };
      }
      if (this.workName.length > 50) {
        return { success: false, msg: "作品名称不可超过50字符，请删减" };
      }

      if (!this.content) {
        return { success: false, msg: "请输入作品描述" };
      }
      if (this.content.length < 80) {
        return { success: false, msg: "作品描述不可少于80字符" };
      }
      if (this.content.length > 10000) {
        return { success: false, msg: "作品描述不可大于10000字符，请删减" };
      }
      if (this.workImages.length < 2) {
        return { success: false, msg: "至少上传2张作品截图" };
      }
      // 上传文件后，才需要填写分类及价格
      if (this.uploadFileList.length) {
        if (
          this.selectedWorkCate.length !== 2 ||
          !this.selectedWorkCate[0] ||
          !this.selectedWorkCate[1]
        ) {
          return { success: false, msg: "请选择作品分类" };
        }
        if (this.price <= 0) {
          //return {success: false, msg: "请输入大于0的资源价格"};
        }
        if (
          String(this.price).indexOf(".") > -1 &&
          String(this.price).length - String(this.price).indexOf(".") - 1 > 2
        ) {
          return { success: false, msg: "资源价格最多保留两位小数" };
        }
      }

      return { success: true, msg: "" };
    },
    cancel() {
      this.$router.back();
    },
    handleChange(val) {
      this.content = val;
    },
    handleDeleteFile() {
      this.cover_url = "";
    },
    handleFileChange(file) {
      console.log(file);
      if (file.size / 1024 > 2048) {
        this.$message.error("图片大小不得超过2M，请重新选择");
        return false;
      }
      const formData = new FormData();
      formData.append("target", '{ "type": 3 }');
      formData.append("id", "WU_FILE_0");
      formData.append("name", file.name);
      formData.append("type", file.type);
      formData.append("lastModifiedDate", file.lastModifiedDate);
      formData.append("size", file.size);
      formData.append("file", file);
      this.$axios
        .$post(`/file/proxyUpload`, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          this.cover_url = (res.data && res.data.url) || "";
          this.fileList = [
            {
              name: "file.name",
              url: this.cover_url
            }
          ];
        });
    },
    workNameBlur(e) {
      this.workName = this.workName.replace(/[&|\*|#|\\]/g, "");
    },
    handleSuccess(response, file, fileList) {},
    showUploadTips() {
      this.$message.info("先保存项目作品，才能上传作品资源");
    },
    priceChange(e) {
      if (e > 10000) {
        this.price = 10000;
        this.$toast("最高金额10000元");
      }
    },
    tagSubmit() {
      let verifyResult = this.verifyTag(this.tagValue);
      if (this.tagValue !== "" && verifyResult) {
        this.dynamicTags.push(this.tagValue);
        this.tagValue = "";
        return;
      }
    },
    addTags(tagItem) {
      const text = tagItem;
      let verifyResult = this.verifyTag(text);
      if (verifyResult) {
        this.dynamicTags.push(text);
        return;
      }
    },
    verifyTag(value) {
      if (value === "") {
        this.$message.error("不能为空");
        return false;
      }
      if (this.dynamicTags.includes(value)) {
        this.$message.error("已存在相同标签");
        return false;
      }
      if (this.dynamicTags.length === 3) {
        this.$message.error("最多3个标签");
        return false;
      }
      return true;
    },
    inputFocus() {
      // 维持input focus态
      this.$refs["tag-input"].focus();
    },
    tagInputFocus() {
      this.isShowTagList = true;
      this.isFocus = true;
    },
    hideTags() {
      this.isFocus = false;
      setTimeout(() => {
        if (!this.isFocus) {
          this.isShowTagList = false;
        }
      }, 100);
    },
    delTags(index) {
      this.dynamicTags.splice(index, 1);
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/css/common.css";
@import "../../assets/css/public.css";

.work-title {
  line-height: 37px;
  padding: 5px 0px 0;
  font-size: 26px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #1d2a3a;
}
.work-title-tips {
  margin-top: 10px;
  white-space: nowrap;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0b121a;
  line-height: 22px;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  span {
    color: #ff361b;
  }
}
.editor {
  position: relative;
  padding: 30px 0 80px;
  width: 1100px;
  background: #fff;

  .title,
  .sub-title {
    .el-input__inner {
      padding: 0;
      border: 0;
      border-radius: 0;
    }
  }

  .title {
    margin: 10px auto 20px;
    font-size: 28px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(29, 42, 58, 1);
    line-height: 40px;
  }

  ._title {
    font-size: 15px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ddd;
  }

  .sub-title {
    margin-bottom: 28px;
    min-height: 18px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(145, 154, 167, 1);
    line-height: 18px;
    border: 0;

    .el-textarea__inner {
      height: 18px;
      line-height: 18px;
      border: 0;
      padding-left: 0;
    }
  }

  .label {
    margin: 20px auto 10px;
    font-size: 13px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(25, 34, 46, 1);
    line-height: 18px;
  }

  .ql-toolbar {
    border-width: 1px 0 0 0 !important;
  }

  .quill-editor {
    height: 450px;
    border-left: 0 !important;
    border-right: 0 !important;
    font-size: 14px;
    line-height: 25px;
  }

  .ql-snow.ql-toolbar::after {
    display: inline-block;
  }

  .class {
    width: 320px;
  }

  .tags {
    width: 560px;
  }

  footer {
    margin: 40px 0;

    /*button {*/
    /*  width: 100px;*/
    /*  height: 40px;*/
    /*  border-radius: 0;*/
    /*}*/
  }

  strong {
    font-weight: 800 !important;
  }

  em {
    font-style: italic !important;
  }
}
.uploadInfo {
  display: flex;
  padding-left: 30px;
  align-items: center;

  .left {
    width: 150px;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #fff;

    .el-icon-delete {
      display: none;
    }

    .avatar-uploader .el-upload {
      width: 150px;
      height: 150px;
      border: 1px dashed #dce1e8;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top left;
      }
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;

      .el-icon-plus {
        color: #409eff;
      }

      .el-p-upload {
        color: #409eff;
      }

      .el-icon-delete {
        display: block;
      }
    }

    .avatar-uploader-icon {
      /*position: absolute;*/
      /*top: 0;*/
      /*left: 0;*/
      font-size: 44px;
      color: #dce1e8;
      /*width: 150px;*/
      /*height: 150px;*/
      /*line-height: 140px;*/
      text-align: center;
    }

    .el-p-upload {
      color: #dce1e8;
    }

    .avatar {
      width: 180px;
      height: 140px;
      display: block;
    }

    .title {
      position: absolute;
      left: 50%;
      bottom: 40px;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 500;
      color: #dce1e8;
      line-height: 18px;
      text-decoration: underline;
    }
  }

  .right {
    margin-left: 18px;
    height: 34px;

    p {
      font-size: 12px;
      font-weight: 400;
      color: rgba(145, 154, 167, 1);
      line-height: 17px;
    }
  }
}
.editor-footer {
  text-align: center;
}
.btn-save {
  width: 140px;
  height: 48px;
  // background: #96c6ff;
  border-radius: 24px;
  outline: none;
  border: none;
  // margin: 0 auto;
}
.work-field {
  // width: 100%;
  margin: 20px 140px;
  display: flex;
  flex-direction: column;
  .work-label {
    margin-bottom: 18px;
    height: 21px;
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 21px;
    position: relative;
    padding-left: 13px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 14px;
      background: #308eff;
      border-radius: 1px;
      font-size: 0;
    }
    &::after {
      content: "*";
      color: #ff4e33;
      margin-left: 10px;
      line-height: 21px;
    }
  }
  .upload-tips {
    line-height: 20px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
  .upload-btn {
    width: 160px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #308eff;
    border-radius: 6px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #308eff;
  }
  .work-cate-type {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    .work-cate-cascader {
      width: 315px;
      margin-right: 30px;
    }
    .service-cate {
      width: 220px;
      margin-right: 10px;
    }
  }
  .work-price-wrapper {
    display: flex;
    align-items: center;
    .work-price-input {
      width: 315px;
    }
    span {
      margin-left: 8px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #19222e;
    }
  }
}
.custom-radio {
  .el-radio__inner {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 0;
    background: url("~@/assets/img/common/custom-radio.png") no-repeat !important;
    &:after {
      content: none;
    }
  }
  .is-checked {
    .el-radio__inner {
      background: url("~@/assets/img/common/custom-radio-checked.png") no-repeat !important;
    }
  }
}

.work-tag-container {
  display: flex;
  align-items: center;
  position: relative;
  position: 3;
}

.work-tag-select-container {
  position: absolute;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  // height: 300px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(95, 109, 141, 0.16);
  border: 1px solid #ebeced;
  padding: 0 10px;
  box-sizing: border-box;

  .work-tag-select-row {
    padding: 12px 0;
    border-bottom: 1px solid #e9eaeb;
    line-height: 2;
  }
  .work-tag-item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0b121a;
    margin: 0 10px;
    // word-break: normal;
    display: inline-block;
    cursor: pointer;
    &.cur {
      color: #308eff;
    }
  }
}
.work-tag-list {
  flex: 1;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  // border: 1px solid #dcdfe6;
  // display: flex;
  // align-items: center;
  // padding-left: 14px;
  .el-tag + .el-tag {
    margin-left: 10px;
  }
}
.work-tag-placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #c0c4cc;
  user-select: none;
}
.work-tag-input {
  width: 244px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  // border: 1px solid #dcdfe6;
  margin-left: 16px;
}
.work-tag-ul {
  margin-top: 16px;
  .el-tag {
    margin-right: 10px;
    padding: 0 5px;
    height: 22px;
    border: 1px solid #308eff;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #308eff;
    line-height: 22px;
    background: #fff;
  }
}

.work-tag-input-placeholder {
  width: 244px;
  height: 40px;
  background: #308eff;
  border-radius: 4px;
  text-align: center;

  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 40px;
  text-indent: 14px;
  cursor: pointer;
  user-select: none;
}
.work-el-textarea {
  position: relative;
  .el-textarea__inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  &::before {
    content: "最少80字符哦～";
    color: #909399;
    background: #fff;
    position: absolute;
    font-size: 12px;
    bottom: 5px;
    left: 10px;
  }
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>