rzcs/src/view/projectTopic.vue

<template>
  <div class="disFlex">
    <NavLeft navIf="projectManagement" />
    <div class="projectManagement">
      <div class="title">编辑题库</div>

      <div class="projectTopicText">
        <p class="tit">项目信息</p>
        <div class="projectTopicCon">
          <div>
            <div class="projectTopicText">
              <p>项目名称：</p>
              <p>{{ projectData.name }}</p>
            </div>
            <div class="projectTopicText">
              <p>发起单位</p>
              <p>{{ projectData.companyName }}</p>
            </div>
            <div class="projectTopicText">
              <p>项目描述：</p>
              <p>{{ projectData.note }}</p>
            </div>
          </div>

          <div class="">
            <p>当前已选择:</p>
            <p>
              题型1：<span>{{ libraryType1CountData.libraryType1Count }}</span
              >题
            </p>
            <p>
              题型2：<span>{{ libraryType1CountData.libraryType2Count }}</span
              >题
            </p>
            <p>
              题型3：<span>{{ libraryType1CountData.libraryType3Count }}</span
              >题
            </p>
            <p>
              题型4：<span>{{ libraryType1CountData.libraryType4Count }}</span
              >题
            </p>

            <button class="buttonCss" type="button" @click="generateTest()">
              生成测试
            </button>
          </div>
        </div>

        <div class="projectTopicA">
          <div class="projectTopicATie">
            <p
              @click="topicTypes(1)"
              :class="[topicType == 1 ? 'topicType' : '']"
            >
              题型一题库
            </p>
            <p
              @click="topicTypes(2)"
              :class="[topicType == 2 ? 'topicType' : '']"
            >
              题型二题库
            </p>
            <p
              @click="topicTypes(3)"
              :class="[topicType == 3 ? 'topicType' : '']"
            >
              题型三题库
            </p>
            <p
              @click="topicTypes(4)"
              :class="[topicType == 4 ? 'topicType' : '']"
            >
              题型四题库
            </p>
          </div>

          <div class="projectTopicAButton">
            <div class="projectTopicAButtonSearch">
              <el-input
                v-model="inputData"
                class="w-50 m-2"
                placeholder="搜索"
                :prefix-icon="Search"
              />
              <button class="buttonCss" @click="inputDataFun()" type="button">
                搜索
              </button>
            </div>
            <button class="buttonCss" type="button" @click="randomlyTopic()">
              随机选题
            </button>
            <button class="buttonCss" @click="cancelTopic()" type="button">
              取消选题
            </button>
            <button class="buttonCss" @click="addProject()" type="button">
              新建
            </button>
            <div class="FlieCss">
                  <button class="buttonCss" type="button">批量导入</button>
                  <input type="file" @change="upLoadFlie($event)" />
            </div>
      
            <button class="buttonCss" @click="downloadImportExcel()" type="button">下载导出模板</button>
          </div>
          <div class="projectTopicTable">
            <el-table :data="tableData" style="width: 100%" max-height="500">
              <el-table-column align="center" prop="id" label="序号" />
              <el-table-column align="center" prop="topic" label="题目" />
              <el-table-column align="center" fixed="right" label="选择状态">
                <template #default="scope">
                  <div v-if="scope.row.isSelect == 0">未选</div>
                  <div v-else>已选用</div>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="open(scope)"
                  >
                    删除
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="editTitle(scope)"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- // 题型1 -->
    <el-drawer
      v-model="drawer"
      title="编辑问题"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUldrawer">
        <div>
          <p class="tit">问题</p>
          <el-input
            v-model="topicData.topic"
            class="w-50 m-2"
            size="large"
            placeholder="请输入问题"
          ></el-input>
        </div>
        <!-- 题目类型 -->
        <div class="selectClass" v-if="topicType == 2 || topicType == 4">
          <p>请选择对应类型</p>

          <select v-model="topicData.topicType" class="selectCss">
            <option
              class="option"
              v-for="item in selectClassData"
              :key="item.dictValue"
              :value="item.dictKey"
            >
              {{ item.dictValue }}
            </option>
          </select>
        </div>

        <div>
          <!-- 问题 -->
          <p class="tit">答案</p>
          <div class="options">
            <p @click="options(1)" :class="[optionsIf == 1 ? 'optionsIf' : '']">
              选项01
            </p>
            <p @click="options(2)" :class="[optionsIf == 2 ? 'optionsIf' : '']">
              选项02
            </p>
            <p @click="options(3)" :class="[optionsIf == 3 ? 'optionsIf' : '']">
              选项03
            </p>
            <p @click="options(4)" :class="[optionsIf == 4 ? 'optionsIf' : '']">
              选项04
            </p>
          </div>
          <el-input
            v-model="topicData.options[0].content"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
            v-if="optionsIf == 1"
          ></el-input>
          <el-input
            v-model="topicData.options[1].content"
            v-else-if="optionsIf == 2"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>
          <el-input
            v-model="topicData.options[2].content"
            v-else-if="optionsIf == 3"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>
          <el-input
            v-model="topicData.options[3].content"
            v-else-if="optionsIf == 4"
            class="w-50 m-2"
            size="large"
            placeholder="请输入选项内容"
          ></el-input>
          <!-- 问题对类型 -->
          <div v-if="topicType == 1 || topicType == 3">
            <div class="selectClass" v-if="optionsIf == 1">
              <p>选择对应类型</p>

              <select
                placeholder="请选择类型"
                v-model="topicData.options[0].topicType"
                class="selectCss"
              >
                <option
                  class="option"
                  v-for="item in selectClassData"
                  :key="item.dictValue"
                  :value="item.dictKey"
                >
                  {{ item.dictValue }}
                </option>
              </select>
            </div>
            <div class="selectClass" v-if="optionsIf == 2">
              <p>选择对应类型</p>
              <select
                placeholder="请选择类型"
                v-model="topicData.options[1].topicType"
                class="selectCss"
              >
                <option
                  class="option"
                  v-for="item in selectClassData"
                  :key="item.dictValue"
                  :value="item.dictKey"
                >
                  {{ item.dictValue }}
                </option>
              </select>
            </div>
            <div class="selectClass" v-if="optionsIf == 3">
              <p>选择对应类型</p>
              <select
                placeholder="请选择类型"
                v-model="topicData.options[2].topicType"
                class="selectCss"
              >
                <option
                  class="option"
                  v-for="item in selectClassData"
                  :key="item.dictValue"
                  :value="item.dictKey"
                >
                  {{ item.dictValue }}
                </option>
              </select>
            </div>
            <div class="selectClass" v-if="optionsIf == 4">
              <p>选择对应类型</p>
              <select
                placeholder="请选择类型"
                v-model="topicData.options[3].topicType"
                class="selectCss"
              >
                <option
                  class="option"
                  v-for="item in selectClassData"
                  :key="item.dictValue"
                  :value="item.dictKey"
                >
                  {{ item.dictValue }}
                </option>
              </select>
            </div>
          </div>
          <div class="selectClass" v-if="topicType == 2 || topicType == 3">
            <p>该选项对应分数</p>
            <div>
              <el-input
                v-model="topicData.score"
                class="w-50 m-2"
                size="large"
                placeholder="请输入分数"
              ></el-input>
            </div>
          </div>
          <div class="drawerButton">
            <el-button
              type="primary"
              v-if="buttonDataIF"
              @click="addprojectTopic()"
              >新建问题</el-button
            >
            <el-button type="primary" v-else @click="updTopic()"
              >编辑问题</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </div>
        </div>
      </div>
    </el-drawer>

    <el-drawer
      v-model="generateTestIf"
      title="编辑问题"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUldrawer">
        <div class="nameProject">
          <p class="tit">项目名称：</p>
          <p>{{ generateTestData.name }}</p>
        </div>
        <div>
          <p class="tit">发起单位</p>
          <el-input
            v-model="generateTestData.companyName"
            class="w-50 m-2"
            size="large"
            placeholder="请输入单位"
          ></el-input>
        </div>
        <div>
          <p class="tit">答题时长</p>
          <el-input
            v-model="generateTestData.testDuration"
            class="w-50 m-2"
            size="large"
            placeholder="请输入问题"
          ></el-input>
        </div>
        <div>
          <p class="tit">测试说明</p>

          <el-input
            v-model="generateTestData.note"
            :autosize="{ minRows: 6, maxRows: 4 }"
            type="textarea"
            placeholder="请输入测试说明"
          >
          </el-input>
        </div>
        <div>
          <p class="tit">测试封面</p>
          <div class="imgFm">
            <input type="file" @change="Flie($event)" />
            <img :src="imgData" alt="" />
          </div>
        </div>
        <div>
          <p class="tit">只允许添加该测试白名单的人参加测试</p>
          <el-switch v-model="generateTestData.isAllowWhiteList" />
        </div>
        <div class="">
          <el-button type="primary" @click="determineGenerateTest()"
            >确定</el-button
          >

          <el-button>取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import * as qiniu from "qiniu-js";

export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      drawer: false,
      generateTestIf: false,
      topicType: 1,
      total: "",
      fileImgData: "",
      generateTestData: {
        name: "",
        companyName: "",
        projectId: "",
        note: "",
        coverImg: "",
        isAllowWhiteList: false,
        testDuration: "",
      },

      inputData: "",
      libraryType1CountData: {
        libraryType1Count: 0,
        libraryType2Count: 0,
        libraryType3Count: 0,
        libraryType4Count: 0,
      },
      buttonDataIF: true,
      TopicPageData: {
        current: 1,
        libraryType: "topic_type_1",
        size: 10,
        projectId: "",
      },
      topicData: {
        createTime: "",
        projectId: "",
        score: "",
        libraryType: "topic_type_1",
        options: [
          {
            content: "",
            createTime: "",

            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "1",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "1",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "1",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "1",
            topicTypeValue: "",
          },
        ],
        topic: "",
        topicType: "",
      },
      imgData: "https://nianhua.test.joymido.com/",
      projectData: {},
      labelPosition: "top",
      tableData: [],
      direction: "rtl",
      projectTopicData: {},
      optionsIf: 1,
      selectClassData: [
    
      ],
    };
  },
  mounted() {
    this.projectData = JSON.parse(localStorage.topicData);
    console.log(this.projectData);
    this.generateTestData.name = this.projectData.name;
    this.generateTestData.companyName = this.projectData.companyName;
    this.getProject();
         this.getRandomTopicCount();
  },
  methods: {
    // 七牛云上传
    Flie(e) {
      let that = this;
      let key = null;
      this.axios

        .get("http://101.200.157.76:12306/ding/file/getQiniuToken", {
          params: { bucketName: "nianhua-test" },
        })
        .then(function (data) {
          var config = {
            useCdnDomain: true,
          };
          //  设置文件的配置
          var putExtra = {
            fname: "",
            params: {},
            mimeType: null,
          };
          console.log(e.target.files[0], data.data.data.token);
          let observable = qiniu.upload(
            e.target.files[0],
            key,
            data.data.data.token,
            putExtra,
            config
          );
          // var observable = qiniu.upload({ file, key, token, putExtra, config })
          //   设置实例的监听对象
          var observer = {
            //   接收上传进度信息
            // 接收上传错误信息
            error(err) {
              console.log(err);
            },
            complete(res) {
              that.imgData += res.key;
            },
          };
          // 上传开始
          observable.subscribe(observer);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 分页
    handleCurrentChange(data) {
      this.TopicPageData.current = data;
      this.getProject();
    },
    // 选项改变
    options(num) {
      this.optionsIf = num;
    },
    upLoadFlie(e){
      
            var formData = new FormData();
            formData.append('libraryType',this.TopicPageData.libraryType);
            formData.append('projectId',this.projectData.id);
            formData.append('file',e.target.files[0]);

      this.axios({
        method: "POST",
        url: `/hysc/library/importExcel`,
        data: formData,
        headers: {
                 'Content-Type': 'multipart/form-data'
        }
    }).then(function(res) {
        console.log(res);
    });


    },
   
    downloadImportExcel(){
       let param = new URLSearchParams();
        console.log(this.TopicPageData.libraryType);
          param.append("libraryType", this.TopicPageData.libraryType);
                
     this.axios
        .get("/hysc/library/downloadImportExcel",{
          params: param,
        })
        .then(function (data) {
          window.location.href=data.data.data
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 搜索
    inputDataFun() {
      this.getProject(this.inputData);
    },
    // 新建测试
    generateTest() {
      this.generateTestIf = true;
    },
    // 确定新增测试
    determineGenerateTest() {
      this.generateTestData.coverImg = this.imgData;
      if (this.generateTestData.isAllowWhiteList) {
        this.generateTestData.isAllowWhiteList = "1";
      } else {
        this.generateTestData.isAllowWhiteList = "0";
      }
         this.generateTestIf=false
      this.axios
        .post("hysc/test/addTest", this.generateTestData)
        .then(function (data) {
          console.log(data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 删除提示
    open(obj) {
      let that = this;
      ElMessageBox.confirm("是否确定删除", {
        confirmButtonText: "取消",
        cancelButtonText: "确定",
        type: "提示",
      })
        .then(() => {
          ElMessage({
            type: "delet",
            message: "已取消",
          });
        })
        .catch(() => {
          that.projectTopicDelete(obj.row.id);
          ElMessage({
            type: "tiyong",
            message: "删除成功",
          });
        });
    },
    // 题库切换
    topicTypes(num) {
      this.topicType = num;
      if (this.topicType == 1) {
        this.TopicPageData.libraryType = "topic_type_1";
        this.topicData.libraryType = "topic_type_1";
      } else if (this.topicType == 2) {
        this.TopicPageData.libraryType = "topic_type_2";
        this.topicData.libraryType = "topic_type_2";
      } else if (this.topicType == 3) {
        this.TopicPageData.libraryType = "topic_type_3";
        this.topicData.libraryType = "topic_type_3";
      } else if (this.topicType == 4) {
        this.TopicPageData.libraryType = "topic_type_4";
        this.topicData.libraryType = "topic_type_4";
      }
      console.log(this.topicData, "as");
      this.getProject();
    },
    projectTopicDelete(id) {
      let that = this;
      this.axios
        .post("/hysc/library/delTopic", {
          id: id,
        })
        .then(function () {
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    editTitle(data) {
      this.addCation();
      this.drawer = true;
      this.buttonDataIF = false;
      this.topicData = { ...data.row };
     

    
    },

    updTopic() {
      let that = this;

      this.axios
        .post("/hysc/library/updTopic", this.topicData)
        .then(function () {
          that.getProject();
          that.drawer = false;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 取消选题
    cancelTopic() {
      let param = new URLSearchParams();
      param.append("libraryType", this.TopicPageData.libraryType);
      param.append("projectId", this.projectData.id);
      let that = this;
      this.axios
        .get("/hysc/library/cancelRandomTopic", {
          params: param,
        })
        .then(function () {
          // that.libraryType1CountData={...response.data.data}
              that.getRandomTopicCount();
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 随机选题
    randomlyTopic() {
      let param = new URLSearchParams();
      param.append("libraryType", this.TopicPageData.libraryType);
      param.append("projectId", this.projectData.id);
      let that = this;
      this.axios
        .get("/hysc/library/randomTopic", {
          params: param,
        })
        .then(function (response) {
          that.libraryType1CountData = { ...response.data.data };
          that.getProject();
          that.getRandomTopicCount();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 新增题目
    addprojectTopic() {
      if (this.topicType == 1 || this.topicType == 3) {
        for (let index = 0; index < this.topicData.options.length; index++) {
          for (
            let key = index + 1;
            key < this.topicData.options.length;
            key++
          ) {
            if (
              this.topicData.options[index].topicType ==
              this.topicData.options[key].topicType
            ) {
              this.$alert("请正确添加选项类型，不能为空或者重复", "类型错误", {
                confirmButtonText: "确定",
              });
              return;
            }
          }
        }
      }
      this.drawer = false;

      let that = this;
      this.axios
        .post("/hysc/library/addTopic", this.topicData)
        .then(function (response) {
          console.log(response);
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //获取随机选题数量
    getRandomTopicCount() {
      let param = new URLSearchParams();
      param.append("projectId", this.projectData.id);
      let that = this;
      this.axios
        .get("/hysc/library/getRandomTopicCount", {
          params: param,
        })
        .then(function (response) {
          console.log(response);
          that.libraryType1CountData = { ...response.data.data };
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 清除
    clearFata() {
      this.topicData = {
        createTime: "",
        projectId: "",
        score: "",
        libraryType: "topic_type_1",
        options: [
          {
            content: "",
            createTime: "",

            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
          {
            content: "",
            createTime: "",
            id: "",
            libraryType: "",
            optionIndex: "",
            optionIndexEn: "",
            score: "",
            topicId: 0,
            topicType: "",
            topicTypeValue: "",
          },
        ],
        topic: "",
        topicType: "",
      };
    },
    addProject() {
      this.drawer = true;
      this.clearFata();
      this.topicData.libraryType = this.TopicPageData.libraryType;
      this.addCation();
      this.topicData.projectId = this.projectData.id;
    },
    handleClose() {
      this.drawer = false;
      this.generateTestIf=false
    },

    addClassification() {
      let param = new URLSearchParams();
      let that = this;
      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data.data,"aaa");
          that.selectClassData = { ...response.data.data };
   
          
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取类型
    addCation() {
      let param = new URLSearchParams();
      let that = this;
      if (this.topicType == 1) {
        param.append("code", "topic_type_1");
      } else if (this.topicType == 2) {
        param.append("code", "topic_type_2");
      } else if (this.topicType == 3) {
        param.append("code", "topic_type_3");
      } else if (this.topicType == 4) {
        param.append("code", "topic_type_4");
      }

      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param,
        })
        .then(function (response) {
   
          that.selectClassData = response.data.data ;
              
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取列表数据
    getProject(input) {
      let param = new URLSearchParams();
      let that = this;
      if (input) {
        param.append("topic", input);
      }
      param.append("current", this.TopicPageData.current);
      param.append("libraryType", this.TopicPageData.libraryType);
      param.append("size", this.TopicPageData.size);
      param.append("projectId", this.projectData.id);

      this.axios
        .get("/hysc/library/getTopicPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data.data);
          that.tableData = response.data.data.records;
          that.total = response.data.data.total;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style >
.drawerButton {
  position: absolute;
  bottom: 30px;
  width: 90%;
  display: flex;
}
.projectManagement {
  height: 100vh;
  box-sizing: border-box;
  overflow-x: auto;
}
.projectTopicTable {
  margin-top: 30px;
}
.options {
  display: flex;
  border-bottom: 1px solid #e4eaee;
  margin-bottom: 24px;
}

.options > p {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #888888;
  line-height: 20px;
  padding-bottom: 8px;

  margin-right: 33px;
}
.optionsIf {
  border-bottom: 2px solid #0544a4;
  color: #515151;
}

.projectTopicText .tit {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-top: 50px;
  line-height: 22px;
  padding-left: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #1b2125;
}
.projectTopicCon {
  width: 100%;
  height: 157px;
  padding-top: 30px;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;

  margin-top: 50px;
}
.projectTopicCon > div {
  display: flex;
}
.projectTopicCon > :nth-child(1) {
  padding-left: 30px;
}
.projectTopicCon > :nth-child(2) {
  padding-left: 30px;
  padding-top: 60px;
}
.projectTopicCon > div > .projectTopicText {
  margin-right: 120px;
}
.projectTopicText > :nth-child(1) {
  width: 80px;
  height: 26px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicText > :nth-child(2) {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicCon > :nth-child(2) > p {
  margin-right: 60px;
}
.projectTopicCon > :nth-child(2) > :nth-child(1) {
  margin-right: 0px;
}
.projectTopicA {
  width: 100%;
  height: auto;
  margin-top: 30px;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;
}
.projectTopicA {
  box-sizing: border-box;
  padding: 30px;
}
.projectTopicATie {
  display: flex;
}
.projectTopicATie > p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-right: 60px;
  line-height: 22px;
}
.buttonCss {
  width: 100px;
  height: 32px;
  color: #fff;
  background: #0544a4;
  box-shadow: 0px 2px 7px 0px rgba(120, 137, 149, 0.25);
  border-radius: 3px;
  border: none;
}
.projectTopicAButton > .buttonCss {
  margin-right: 20px;
}
.projectTopicAButton {
  display: flex;

  margin-top: 30px;
}
.projectTopicAButton > .projectTopicAButtonSearch {
  margin-right: 60px;
}
.projectTopicAButtonSearch {
  display: flex;
}
.projectTopicAButtonSearch button {
  margin-left: 20px;
}
.elementUldrawer > div > .tit {
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  margin-top: 36px;
  margin-bottom: 11px;
  line-height: 20px;
}
.selectClass {
  display: flex;
  margin-top: 36px;
  align-items: center;
}
.selectClass > p {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-right: 20px;
  color: #515151;
  line-height: 20px;
}
.projectTopicATie > .topicType {
  border-bottom: 2px solid #0544a4;
  color: #0544a4;
}
.score {
  display: flex;
}
.score .tit {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  width: 30%;
  line-height: 20px;
}
.nameProject {
  display: flex;
}
.nameProject > :nth-child(2) {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  margin-top: 36px;
  margin-bottom: 11px;
  line-height: 20px;
}
.imgFm {
  width: 200px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
  height: 200px;
}
.imgFm input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.imgFm img {
  width: 100%;
}
.selectCss {
  height: 40px;
  border: 1px solid #ddd;
  width: 200px;
}

.selectCss .option {
  font-size: 14px;
  padding: 5px 6px;
  color: #515151;
  margin-bottom: 5px;
}
.FlieCss{
   position: relative;
   margin-right: 20px;
}
.FlieCss>input{
  position: absolute;
  width: 100px;
  height: 32px;
  opacity: 0;
  left: 0px;
  top: 0px;
}
</style>