|
@@ -0,0 +1,756 @@
|
|
|
+<template>
|
|
|
+ <div class="tree-main">
|
|
|
+
|
|
|
+ <Tree :data="treeData" :render="renderContent" ref="tree"></Tree>
|
|
|
+ <Modal v-model="modalFlag" title="添加新节点" ok-text="确认" cancel-text="取消" @on-ok="handleAddNode">
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>
|
|
|
+ 当前章节:
|
|
|
+ <span style="margin-left:10px;">{{currentNode.title}}</span>
|
|
|
+ </span>
|
|
|
+ </Row>
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>章节类型:</span>
|
|
|
+ <RadioGroup v-model="nodeType" type="button">
|
|
|
+ <Radio label="章节"></Radio>
|
|
|
+ <Radio label="课件"></Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </Row>
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>章节名称:</span>
|
|
|
+ <Input v-model="inputValue" placeholder="输入新节点名称" style="width: 100%" />
|
|
|
+ </Row>
|
|
|
+ </Modal>
|
|
|
+ <Modal v-model="editFlag" title="修改节点" ok-text="确认" cancel-text="取消" @on-ok="handleUpdateNode">
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>
|
|
|
+ 当前名称:
|
|
|
+ <span style="margin-left:10px;">{{currentNode.title}}</span>
|
|
|
+ </span>
|
|
|
+ </Row>
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>章节类型:</span>
|
|
|
+ <RadioGroup v-model="nodeType" type="button">
|
|
|
+ <Radio label="章节"></Radio>
|
|
|
+ <Radio label="课件"></Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </Row>
|
|
|
+ <Row class="modelRow">
|
|
|
+ <span>章节名称:</span>
|
|
|
+ <Input v-model="editValue" placeholder="输入节点新名称" style="width: 100%" />
|
|
|
+ </Row>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bookSelect: "语文人教课标版四年级上册",
|
|
|
+ periodList: [],
|
|
|
+ subjectList: [],
|
|
|
+ versionList: [],
|
|
|
+ gradeList: [],
|
|
|
+ slideGradeList: [
|
|
|
+ {
|
|
|
+ value: "语文人教课标版四年级上册",
|
|
|
+ label: "语文人教课标版四年级上册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "语文人教课标版五年级上册",
|
|
|
+ label: "语文人教课标版五年级上册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "语文人教课标版六年级上册",
|
|
|
+ label: "语文人教课标版六年级上册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "语文人教课标版七年级上册",
|
|
|
+ label: "语文人教课标版七年级上册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "语文人教课标版八年级上册",
|
|
|
+ label: "语文人教课标版八年级上册"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "语文人教课标版九年级上册",
|
|
|
+ label: "语文人教课标版九年级上册"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ treeData: [
|
|
|
+ {
|
|
|
+ title: "语文人教课标版四年级上册",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ render: (h, { root, node, data }) => {
|
|
|
+ return h(
|
|
|
+ "span",
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ display: "inline-block",
|
|
|
+ position: "relative",
|
|
|
+ width: "94%",
|
|
|
+ textAlign: "left",
|
|
|
+ paddingLeft: "10px",
|
|
|
+ cursor: "pointer",
|
|
|
+ height: "50px",
|
|
|
+ lineHeight: "50px"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.rootClick(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h("span", [
|
|
|
+ h("Icon", {
|
|
|
+ props: {
|
|
|
+ type: "md-filing"
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ marginRight: "5px",
|
|
|
+ display: "none"
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ h("span", { on: { click: () => { } } }, data.title)
|
|
|
+ ]),
|
|
|
+
|
|
|
+ h("Button", {
|
|
|
+ props: {
|
|
|
+ icon: "ios-add"
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ position: "absolute",
|
|
|
+ right: "30px",
|
|
|
+ top: "15px",
|
|
|
+ padding: "0 10px"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.appendClick(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "第一组",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "文言文两则",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "匆匆",
|
|
|
+ order: 1,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "桃花心木",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "顶碗少年",
|
|
|
+ order: 1,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "手指",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "北京的春节",
|
|
|
+ order: 1,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "各具特色的民居",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "和田的维吾尔",
|
|
|
+ order: 1,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "第二组",
|
|
|
+ expand: true,
|
|
|
+ order: 1,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ title: "十六年前的回忆",
|
|
|
+ order: 0,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "灯光",
|
|
|
+ order: 1,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "为人民服务",
|
|
|
+ order: 2,
|
|
|
+ expand: true,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "第三组",
|
|
|
+ expand: true,
|
|
|
+ order: 1,
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ inputValue: "",
|
|
|
+ editValue: "",
|
|
|
+ modalFlag: false,
|
|
|
+ editFlag: false,
|
|
|
+ addBookFlag: false,
|
|
|
+ nodeType: "章节",
|
|
|
+ currentNode: "",
|
|
|
+ currentLiNode: "",
|
|
|
+ buttonProps: {
|
|
|
+ type: "default",
|
|
|
+ size: "small"
|
|
|
+ },
|
|
|
+ periodSelect: "",
|
|
|
+ subjectSelect: "",
|
|
|
+ versionSelect: "",
|
|
|
+ gradeSelect: "",
|
|
|
+ periodName: "",
|
|
|
+ subjectName: "",
|
|
|
+ versionName: "",
|
|
|
+ gradeName: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ renderContent(h, { root, node, data }) {
|
|
|
+ let that = this;
|
|
|
+ return h(
|
|
|
+ "span",
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ display: "inline-block",
|
|
|
+ width: "95%",
|
|
|
+ textAlign: "left",
|
|
|
+ paddingLeft: "2%",
|
|
|
+ cursor: "pointer",
|
|
|
+ position: "relative",
|
|
|
+ boxSizing: "border-box"
|
|
|
+ },
|
|
|
+ domProps: {
|
|
|
+ className: "singleClass"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.titleClick(root, node, data, event);
|
|
|
+ },
|
|
|
+ mouseover: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.handleLiOver(event);
|
|
|
+ },
|
|
|
+ mouseleave: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.handleLiLeave(node, event);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h("span", [
|
|
|
+ h("Icon", {
|
|
|
+ props: {
|
|
|
+ type:
|
|
|
+ data.children && data.children.length > 0
|
|
|
+ ? "md-albums"
|
|
|
+ : "ios-paper-outline"
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ marginRight: "5px",
|
|
|
+ display: "none"
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ h("span", data.nodeKey + '. ' + data.title)
|
|
|
+ ]),
|
|
|
+ h(
|
|
|
+ "span",
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ float: "right",
|
|
|
+ top: "10px",
|
|
|
+ display: "none"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ mouseleave: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ //this.hideTools(event);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ domProps: {
|
|
|
+ className: "tools"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h(
|
|
|
+ "Icon",
|
|
|
+ {
|
|
|
+ props: {
|
|
|
+ type: "md-add",
|
|
|
+ title: "添加"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.appendClick(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ "Icon",
|
|
|
+ {
|
|
|
+ props: {
|
|
|
+ type: "md-remove"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.remove(root, node, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ "Icon",
|
|
|
+ {
|
|
|
+ props: {
|
|
|
+ type: "md-arrow-round-up"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.moveUp(root, node, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ "Icon",
|
|
|
+ {
|
|
|
+ props: {
|
|
|
+ type: "md-arrow-round-down"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.moveDown(root, node, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ "Icon",
|
|
|
+ {
|
|
|
+ props: {
|
|
|
+ type: "md-create"
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: e => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.editClick(node, data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ )
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ ]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 添加节点
|
|
|
+ append(data, value) {
|
|
|
+ const children = data.children || [];
|
|
|
+ children.push({
|
|
|
+ title: value,
|
|
|
+ order: children.length,
|
|
|
+ children: [],
|
|
|
+ expand: true
|
|
|
+ });
|
|
|
+ this.$set(data, "children", children);
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ // 删除节点
|
|
|
+ remove(root, node, data) {
|
|
|
+ const parentKey = root.find(el => el === node).parent;
|
|
|
+ const parent = root.find(el => el.nodeKey === parentKey).node;
|
|
|
+ const index = parent.children.indexOf(data);
|
|
|
+ parent.children.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 点击编辑
|
|
|
+ editClick(node, data) {
|
|
|
+ this.currentNode = data;
|
|
|
+ this.editFlag = true;
|
|
|
+ this.editValue = "";
|
|
|
+ },
|
|
|
+ //添加节点 弹出输入框
|
|
|
+ appendClick(data) {
|
|
|
+ this.currentNode = data;
|
|
|
+ this.modalFlag = true;
|
|
|
+ this.inputValue = "";
|
|
|
+ console.log(this.common.guid());
|
|
|
+ },
|
|
|
+ // 确认添加节点
|
|
|
+ handleAddNode() {
|
|
|
+ if (this.inputValue != "") {
|
|
|
+ this.append(this.currentNode, this.inputValue);
|
|
|
+ } else {
|
|
|
+ this.modalFlag = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改节点
|
|
|
+ handleUpdateNode() {
|
|
|
+ if (this.editValue != "") {
|
|
|
+ this.currentNode.title = this.editValue;
|
|
|
+ } else {
|
|
|
+ this.editFlag = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 标题点击收缩展开
|
|
|
+ titleClick(root, node, data, event) {
|
|
|
+ //const parentKey = root.find(el => el === node).parent;
|
|
|
+ //const parent = root.find(el => el.nodeKey === parentKey).node;
|
|
|
+ //const index = parent.children.indexOf(data);
|
|
|
+ //let list = document.getElementsByClassName('singleClass');
|
|
|
+ ////for(let i=0;i<list.length;i++){
|
|
|
+ //// list[i].style.backgroundColor="transparent";
|
|
|
+ ////}
|
|
|
+ // this.currentLiNode = node;
|
|
|
+ // //event.currentTarget.style.backgroundColor = "rgba(225, 224, 224, 0.18)";
|
|
|
+ data.expand = !data.expand;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 根目录点击事件
|
|
|
+ rootClick(data) {
|
|
|
+ data.expand = !data.expand;
|
|
|
+ },
|
|
|
+ // 上移章节操作
|
|
|
+ moveUp(root, node, data) {
|
|
|
+ const parentKey = root.find(el => el === node).parent;
|
|
|
+ const parent = root.find(el => el.nodeKey === parentKey).node;
|
|
|
+ const index = parent.children.indexOf(data);
|
|
|
+ const nodeIndex = root.indexOf(node);
|
|
|
+ let currentTitle = data.title;
|
|
|
+ let currentExpand = data.expand;
|
|
|
+ let currentChildren = data.children || [];
|
|
|
+ let preChildren = (parent.children[index - 1]) ? (parent.children[index - 1]).children : [];
|
|
|
+ if (index != 0) {
|
|
|
+ data.title = parent.children[index - 1].title;
|
|
|
+ parent.children[index - 1].title = currentTitle;
|
|
|
+ parent.children[index - 1].expand = currentExpand;
|
|
|
+ data.children = preChildren;
|
|
|
+ data.expand = parent.children[index - 1].expand;
|
|
|
+ parent.children[index - 1].children = currentChildren;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 下移章节操作
|
|
|
+ moveDown(root, node, data) {
|
|
|
+ const parentKey = root.find(el => el === node).parent;
|
|
|
+ const parent = root.find(el => el.nodeKey === parentKey).node;
|
|
|
+ const index = parent.children.indexOf(data);
|
|
|
+ let currentTitle = data.title;
|
|
|
+ let currentChildren = data.children || [];
|
|
|
+ let nextChildren = (parent.children[index + 1]) ? (parent.children[index + 1]).children : [];
|
|
|
+ if (index != parent.children.length - 1) {
|
|
|
+ data.title = parent.children[index + 1].title;
|
|
|
+ data.children = nextChildren;
|
|
|
+ parent.children[index + 1].title = currentTitle;
|
|
|
+ parent.children[index + 1].children = currentChildren;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 更多操作
|
|
|
+ handleTools(root, node, data, event) {
|
|
|
+ let toolsDom = event.currentTarget.nextElementSibling;
|
|
|
+ const parentKey = root.find(el => el === node).parent;
|
|
|
+ const parent = root.find(el => el.nodeKey === parentKey).node;
|
|
|
+ const index = parent.children.indexOf(data);
|
|
|
+ let list = document.getElementsByClassName("tools");
|
|
|
+ let cFlag = toolsDom.style.display;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ list[i].style.display = "none";
|
|
|
+ }
|
|
|
+ // 判断TOOL显示与隐藏
|
|
|
+ if (cFlag == "none") {
|
|
|
+ toolsDom.style.display = "inline-flex";
|
|
|
+ toolsDom.classList.add("animated");
|
|
|
+ toolsDom.classList.add("slideInDown");
|
|
|
+ } else {
|
|
|
+ toolsDom.style.display = "none";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 鼠标从工具条移开的时候隐藏
|
|
|
+ hideTools(event) {
|
|
|
+ event.currentTarget.style.display = "none";
|
|
|
+ },
|
|
|
+ handleLiOver(event) {
|
|
|
+ event.currentTarget.lastElementChild.style.display = "block";
|
|
|
+ event.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.68)";
|
|
|
+ event.currentTarget.style.border = "1px solid #000";
|
|
|
+ },
|
|
|
+ handleLiLeave(node, event) {
|
|
|
+ event.currentTarget.lastElementChild.style.display = "none";
|
|
|
+ if (this.currentLiNode.nodeKey != node.nodeKey) {
|
|
|
+ event.currentTarget.style.backgroundColor = "transparent";
|
|
|
+ event.currentTarget.style.border = "0";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加教材
|
|
|
+ handleAddBook() {
|
|
|
+ this.$api.FindPeriods({}).then(res => {
|
|
|
+ this.periodList = res.result.data;
|
|
|
+ this.periodSelect = this.periodList[0].rowKey;
|
|
|
+ this.periodName = this.periodList[0].name;
|
|
|
+ let Pcode = {
|
|
|
+ value: this.periodList[0].rowKey,
|
|
|
+ label: this.periodList[0].name
|
|
|
+ }
|
|
|
+ this.periodChange(Pcode);
|
|
|
+ })
|
|
|
+ this.addBookFlag = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 学段选择变化
|
|
|
+ periodChange(val) {
|
|
|
+ this.$api.FindSubjects({ Pcode: val.value }).then(res => {
|
|
|
+ if (res.result.data.length > 0) {
|
|
|
+ this.subjectList = res.result.data;
|
|
|
+ this.subjectSelect = this.subjectList[0].rowKey;
|
|
|
+ this.periodName = val.label;
|
|
|
+ let Pcode = {
|
|
|
+ value: this.subjectList[0].rowKey,
|
|
|
+ label: this.subjectList[0].name
|
|
|
+ }
|
|
|
+ this.subjectChange(Pcode);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 学科选择变化
|
|
|
+ subjectChange(val) {
|
|
|
+ this.$api.FindEditions({ Pscode: val.value }).then(res => {
|
|
|
+ if (res.result.data.length > 0) {
|
|
|
+ this.versionList = res.result.data;
|
|
|
+ this.versionSelect = this.versionList[0].rowKey;
|
|
|
+ this.subjectName = val.label;
|
|
|
+ let Pcode = {
|
|
|
+ value: this.versionList[0].rowKey,
|
|
|
+ label: this.versionList[0].name
|
|
|
+ }
|
|
|
+ this.versionChange(Pcode);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 版本选择变化
|
|
|
+ versionChange(val) {
|
|
|
+ this.$api.FindTerms({ Psecode: val.value }).then(res => {
|
|
|
+ this.gradeList = res.result.data;
|
|
|
+ this.gradeSelect = this.gradeList.length > 0 ? this.gradeList[0].rowKey : "无";
|
|
|
+ this.versionName = val.label;
|
|
|
+ let Pcode = {
|
|
|
+ value: this.gradeList.length > 0 ? this.gradeList[0].rowKey : "",
|
|
|
+ label: this.gradeList.length > 0 ? this.gradeList[0].name : ""
|
|
|
+ }
|
|
|
+ if (this.gradeList.length > 0) {
|
|
|
+ this.gradeChange(Pcode);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //册别选择变化
|
|
|
+ gradeChange(val) {
|
|
|
+ this.gradeName = val.label ? val.label : "";
|
|
|
+ },
|
|
|
+ // 确认添加教材返回教材名称
|
|
|
+ handleAddConfirm() {
|
|
|
+ let periodRowKeys = [];
|
|
|
+ let perioArr = this.periodList;
|
|
|
+ for (let item of perioArr) {
|
|
|
+ periodRowKeys.push(item.rowKey);
|
|
|
+ }
|
|
|
+ let bookName = this.periodName + this.subjectName + this.versionName + this.gradeName;
|
|
|
+ this.treeData[0].title = bookName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .tree-main {
|
|
|
+ margin-left: 5%;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-icon-ios-paper-outline {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-select {
|
|
|
+ width: 80% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slideSelect .ivu-select-selection {
|
|
|
+ height: 40px;
|
|
|
+ background: #d8d8d870;
|
|
|
+ border: 1px solid #808080;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slideSelect, .slideSelect .ivu-icon {
|
|
|
+ color: rgba(255,255,255,.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ /* .ivu-tree ul li {
|
|
|
+ margin: 18px 0;
|
|
|
+ } */
|
|
|
+ .ivu-tree ul {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-tree ul li {
|
|
|
+ margin:8px 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-tree .ivu-tree-arrow {
|
|
|
+ width: 2%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-input-wrapper {
|
|
|
+ width: 80% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modelRow {
|
|
|
+ margin: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tools {
|
|
|
+ position: absolute;
|
|
|
+ right: 60px;
|
|
|
+ display: inline-flex;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tools .ivu-icon {
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight:200;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn_more {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid rgb(248,248,248);
|
|
|
+ }
|
|
|
+
|
|
|
+ .animated {
|
|
|
+ animation-duration: 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes slideInDown {
|
|
|
+ from {
|
|
|
+ -webkit-transform: translate3d(0,-10%, 0);
|
|
|
+ transform: translate3d(0, -10%, 0) !important;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ -webkit-transform: translate3d(0, 0%, 0);
|
|
|
+ transform: translate3d(0, 0%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes slideInDown {
|
|
|
+ from {
|
|
|
+ -webkit-transform: translate3d(0, -10%, 0);
|
|
|
+ transform: translate3d(0, -10%, 0) !important;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ -webkit-transform: translate3d(0, 0%, 0);
|
|
|
+ transform: translate3d(0, 0%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .slideInDown {
|
|
|
+ -webkit-animation-name: slideInDown;
|
|
|
+ animation-name: slideInDown;
|
|
|
+ }
|
|
|
+
|
|
|
+ .singleClass {
|
|
|
+ display: inline-flex !important;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-addClass {
|
|
|
+ width: 16%;
|
|
|
+ padding: 10px 6px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-tabs-nav-scroll {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addBookArea .ivu-select {
|
|
|
+ width: 80% !important;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addBookArea .ivu-select-single .ivu-select-selection {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addBookArea .ivu-row {
|
|
|
+ margin: 30px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addBookArea .ivu-select-selected-value {
|
|
|
+ height: 32px !important;
|
|
|
+ line-height: 32px !important;
|
|
|
+ font-size: 12px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-tabs {
|
|
|
+ overflow: unset;
|
|
|
+ }
|
|
|
+</style>
|