|
|
@@ -0,0 +1,688 @@
|
|
|
+<template>
|
|
|
+ <div class="pb_content" style="background: unset">
|
|
|
+ <div class="pb_content_body" style="
|
|
|
+ background: #fff;
|
|
|
+ padding: 0px 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ ">
|
|
|
+ <div class="reBox">
|
|
|
+ <div class="reTop">
|
|
|
+ <div>分类筛选</div>
|
|
|
+ <div>
|
|
|
+ <!-- @click="getCourse" -->
|
|
|
+ <div class="search">
|
|
|
+ <img src="../../../assets/icon/search.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <input class="sInput" type="text" placeholder="请输入关键字" v-model="sourceName"
|
|
|
+ @keyup.enter="getSource" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="choose">
|
|
|
+ <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
|
|
|
+ :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
|
|
|
+ <span v-if="CourseTypeJson[item.id].length">{{ item.name }}:</span>
|
|
|
+ <div class="typeCss" v-if="CourseTypeJson[item.id].length">
|
|
|
+ <div class="cName" @click="getCourse2(item.name, '', item.id, 1)"
|
|
|
+ :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''">
|
|
|
+ 全部
|
|
|
+ </div>
|
|
|
+ <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1"
|
|
|
+ :label="item1.id" @click="getCourse2(item.name, item.id, item1.id, 2)">
|
|
|
+ <div class="cName" :class="typea == item1.id || typeb == item1.id
|
|
|
+ ? 'isCType'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
+ {{ item1.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pb_content_body">
|
|
|
+ <div class="student_table" v-loading="loading">
|
|
|
+ <div class="source-box" v-for="(item, index) in res" :key="index">
|
|
|
+ <img class="checkImg" src="../../../assets/icon/source/checka.png" @click="checka(item)" v-if="json.id == item.id"/>
|
|
|
+ <img class="checkImg" src="../../../assets/icon/source/check.png" @click="checka(item)" v-else/>
|
|
|
+ <div class="iamge"><img src="../../../assets/icon/source/image.png" alt=""></div>
|
|
|
+ <div class="title"><span>{{ item.name }}</span></div>
|
|
|
+ <div class="detail">{{ item.detail }}</div>
|
|
|
+ <div class="label"><span v-for="(k, ki) in item.label.split(',')" :key="index + '-' + ki">{{ k ? k : "无" }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="button"><span @click="check(item.url)">查看</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!res.length" style="text-align: center; width: 100%;">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="student_page">
|
|
|
+ <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" v-if="page && total"
|
|
|
+ @current-change="handleCurrentChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="添加资源" :visible.sync="dialogVisible" :append-to-body="true" width="800px"
|
|
|
+ :before-close="handleClose" class="dialog_diy">
|
|
|
+ <div class="add-box">
|
|
|
+ <div class="span-box">
|
|
|
+ <span><span style="color: red">*</span>工具名称</span><el-input class="input" v-model="s_title"
|
|
|
+ placeholder="请输入工具名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="type-box">
|
|
|
+ <div class="both">
|
|
|
+ <div class="choose2">
|
|
|
+ <div class="all_choose2" v-for="(item, index) in CourseType[0]" :key="index">
|
|
|
+ <span v-if="CourseTypeJson[item.id].length > 0
|
|
|
+ ">{{ item.name }}</span>
|
|
|
+ <el-checkbox-group v-model="courseTypeId2" v-if="CourseTypeJson[item.id].length > 0
|
|
|
+ ">
|
|
|
+ <el-checkbox v-for="item1 in CourseTypeJson[item.id]" :key="item1.id"
|
|
|
+ :label="item1.id">{{ item1.name }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span><span style="color: red">*</span>网址来源</span><el-input class="input" v-model="s_url"
|
|
|
+ placeholder="请输入网址来源"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span><span style="color: red">*</span>工具描述</span><el-input class="input" type="textarea" resize="none"
|
|
|
+ rows="5" v-model="s_detail" placeholder="请输入工具描述"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span>标签</span><el-select class="input" v-model="s_label" multiple placeholder="请选择标签">
|
|
|
+ <el-option label="无需登录" value="无需登录"></el-option>
|
|
|
+ <el-option label="扫码登录" value="扫码登录"></el-option>
|
|
|
+ <el-option label="注册登录" value="注册登录"></el-option>
|
|
|
+ <el-option label="免费" value="免费"></el-option>
|
|
|
+ <el-option label="付费" value="付费"></el-option>
|
|
|
+ <el-option label="中文" value="中文"></el-option>
|
|
|
+ <el-option label="英文" value="英文"></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="add()">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ total: 0,
|
|
|
+ isLoading: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ title: "",
|
|
|
+ tableData: [],
|
|
|
+ res: [],
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ CourseType: [],
|
|
|
+ CourseTypeJson: {},
|
|
|
+ courseTypeId: {},
|
|
|
+ courseTypeSon: [],
|
|
|
+ isChoose: 0,
|
|
|
+ sourceName: "",
|
|
|
+ typea: "",
|
|
|
+ typeb: "",
|
|
|
+ typeE: [],
|
|
|
+ courseTypeId2: [],
|
|
|
+ s_title: "",
|
|
|
+ s_url: "",
|
|
|
+ s_detail: "",
|
|
|
+ s_label: [],
|
|
|
+ json:{}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.selectAllType();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checka(item){
|
|
|
+ if(this.json.id == item.id){
|
|
|
+ this.json = {}
|
|
|
+ }else{
|
|
|
+ this.json = item
|
|
|
+ }
|
|
|
+ this.$emit("update",this.json)
|
|
|
+ },
|
|
|
+ check(url){
|
|
|
+ window.open(url)
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.getSource();
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ selectAllType() {
|
|
|
+ let params = {
|
|
|
+ org: this.org && this.org != "" ? this.org : "",
|
|
|
+ oid: this.oid && this.oid != "" ? this.oid : "",
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectAllSourceType", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.CourseType = res.data;
|
|
|
+ for (var i = 0; i < res.data[0].length; i++) {
|
|
|
+ if (!this.cid) {
|
|
|
+ this.courseTypeId[res.data[0][i].id] = [];
|
|
|
+ }
|
|
|
+ if (!this.CourseTypeJson[res.data[0][i].id]) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id] = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.data[2].length == 0 && res.data[3].length == 0) {
|
|
|
+ for (var j = 0; j < res.data[1].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[1][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.data[2].length > 0) {
|
|
|
+ for (var j = 0; j < res.data[2].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[2][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (res.data[3].length > 0) {
|
|
|
+ for (var j = 0; j < res.data[3].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[3][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCourse2(typeName, ftypeId, typeid, type) {
|
|
|
+ this.page = 1;
|
|
|
+ if (typeName == "场景") {
|
|
|
+ if (type == 1) {
|
|
|
+ if (this.typeE.indexOf(typeid) != -1) {
|
|
|
+ this.typeE.splice(this.typeE.indexOf(typeid), 1);
|
|
|
+ } else {
|
|
|
+ this.typeE.push(typeid);
|
|
|
+ if (this.typea != "") {
|
|
|
+ this.typea = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.typea == typeid) {
|
|
|
+ this.typea = "";
|
|
|
+ } else {
|
|
|
+ this.typea = typeid;
|
|
|
+ if (this.typeE.indexOf(ftypeId) != -1) {
|
|
|
+ this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (typeName == "类型") {
|
|
|
+ if (type == 1) {
|
|
|
+ if (this.typeE.indexOf(typeid) != -1) {
|
|
|
+ this.typeE.splice(this.typeE.indexOf(typeid), 1);
|
|
|
+ } else {
|
|
|
+ this.typeE.push(typeid);
|
|
|
+ if (this.typeb != "") {
|
|
|
+ this.typeb = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.typeb == typeid) {
|
|
|
+ this.typeb = "";
|
|
|
+ } else {
|
|
|
+ this.typeb = typeid;
|
|
|
+ if (this.typeE.indexOf(ftypeId) != -1) {
|
|
|
+ this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.getSource();
|
|
|
+ },
|
|
|
+ getSource() {
|
|
|
+ this.loading = true
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ oid: this.oid,
|
|
|
+ org: this.org,
|
|
|
+ typea: this.typea != undefined ? this.typea : "",
|
|
|
+ typeb: this.typeb != undefined ? this.typeb : "",
|
|
|
+ typeE: this.typeE.join(","),
|
|
|
+ cn: this.sourceName,
|
|
|
+ page: this.page,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectSource", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ this.res = res.data[0];
|
|
|
+ this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addSource() {
|
|
|
+ this.courseTypeId2 = []
|
|
|
+ this.s_title = ""
|
|
|
+ this.s_url = ""
|
|
|
+ this.s_detail = ""
|
|
|
+ this.s_label = []
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ add() {
|
|
|
+ if (this.s_title == '') {
|
|
|
+ this.$message.error('请填写工具名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.s_url == '') {
|
|
|
+ this.$message.error('请填写网址来源')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.s_detail == '') {
|
|
|
+ this.$message.error('请填写工具描述')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = [{
|
|
|
+ name: this.s_title,
|
|
|
+ url: this.s_url,
|
|
|
+ detail: this.s_detail,
|
|
|
+ label: this.s_label.join(","),
|
|
|
+ userid: this.userid,
|
|
|
+ courseType: JSON.stringify(this.courseTypeId2)
|
|
|
+ }]
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addSource", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "添加成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getSource();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("网络不佳");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getSource();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pb_head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.student_head {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.student_page {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pb_head {
|
|
|
+ margin: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bgColor {
|
|
|
+ background: #466b99;
|
|
|
+}
|
|
|
+
|
|
|
+.reBox {
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.reTop {
|
|
|
+ padding: 0 0 5px;
|
|
|
+ /* padding: 20px 0 0 0; */
|
|
|
+ /* border-bottom: 1px solid #eee; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.reTop>div:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+ /* width: 40px; */
|
|
|
+ /* border-bottom: 1px solid #205cc6; */
|
|
|
+ /* padding-bottom: 20px; */
|
|
|
+ color: #205cc6;
|
|
|
+ /* font-size: 20px; */
|
|
|
+}
|
|
|
+
|
|
|
+.reTop>div:nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #ccced3;
|
|
|
+ width: 300px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 5px 0;
|
|
|
+ /* margin-bottom: 10px; */
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.search {
|
|
|
+ width: 20px;
|
|
|
+ padding: 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.search>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.sInput {
|
|
|
+ border: none;
|
|
|
+ width: 85%;
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.sInput:focus-visible {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.typeCss {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.choose {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ margin: 2px 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose>span {
|
|
|
+ min-width: 80px;
|
|
|
+ display: block;
|
|
|
+ letter-spacing: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose>span:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.cName {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 10px 5px 0;
|
|
|
+ color: #b9b6b9;
|
|
|
+ min-width: 80px;
|
|
|
+ width: 80px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.isCType {
|
|
|
+ color: #6282c2;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog {
|
|
|
+ height: 100% !important;
|
|
|
+ margin: 0 auto !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__header {
|
|
|
+ background: #3c3c3c !important;
|
|
|
+ padding: 15px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn {
|
|
|
+ top: 19px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__body,
|
|
|
+.dialog_diy>>>.el-dialog__footer {
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_diy>>>.el-dialog__body {
|
|
|
+ height: calc(100% - 125px);
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.both {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>span {
|
|
|
+ min-width: 100px;
|
|
|
+ display: block;
|
|
|
+ letter-spacing: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>span:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>>>.el-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>.el-checkbox-group>>>.el-checkbox {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
|
|
|
+ min-width: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 80px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose2>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.choose2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.add-box {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.span-box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.span-box>span {
|
|
|
+ font-weight: bold;
|
|
|
+ min-width: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.span-box>.input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.type-box {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.student_table {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box {
|
|
|
+ width: 300px;
|
|
|
+ background: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.checkImg{
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 10;
|
|
|
+ right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.source-box .iamge {
|
|
|
+ width: 208px;
|
|
|
+ height: 180px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .iamge>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .title {
|
|
|
+ width: 90%;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 5px auto;
|
|
|
+ font-weight: 700;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ height:24px;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .detail {
|
|
|
+ text-align: center;
|
|
|
+ width: 90%;
|
|
|
+ margin: 5px auto;
|
|
|
+ color: #acacac;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ height: 42px;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .label {
|
|
|
+ width: 90%;
|
|
|
+ margin: 10px auto 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .label>span {
|
|
|
+ padding: 5px 10px;
|
|
|
+ background: rgb(98, 180, 238);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 0 5px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .button {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ background: rgb(244, 244, 244);
|
|
|
+}
|
|
|
+
|
|
|
+.source-box .button>span {
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+}</style>
|
|
|
+
|
