|
|
@@ -0,0 +1,410 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :center="true" :visible.sync="dialogVisible" width="1200px" class="addTemplateDialog">
|
|
|
+ <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
|
|
|
+ <div class="a-d-top">
|
|
|
+ <div class="a-d-topTit"><div style="width: 136px">模板库</div></div>
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="input2"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-t-right">
|
|
|
+ <span @click.stop="dialogVisible = false">×</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; height: 100%">
|
|
|
+ <div class="a-d-t-left">
|
|
|
+ <div class="itemTit">我的模块</div>
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ tagIndex == index
|
|
|
+ ? 'background: rgba(226, 238, 255, 1);color: rgba(54, 129, 252, 1)'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ class="a-d-t-l-item"
|
|
|
+ v-for="(item, index) in dialogTagList"
|
|
|
+ :key="item.id"
|
|
|
+ @click.stop="tagIndex = index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-box">
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 推荐
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-subject">
|
|
|
+ <span :class="['a_d_b_s_btn',tagSubject==item?'a_d_b_s_ActiveBtn':'']" v-for="(item,index) in tagSubjectList" :key="index+'-'+tagIndex" @click.stop="tagSubject=item">{{ item }}</span>
|
|
|
+ <!-- <el-button :type="tagSubject==item?'primary':'default'" v-for="(item,index) in tagSubjectList" :key="index+'-'+tagIndex" @click.stop="tagSubject=item">{{ item }}</el-button> -->
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-wrap: wrap">
|
|
|
+ <div
|
|
|
+ class="a-d-b-item"
|
|
|
+ v-for="(item, index) in searchDataList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="a-d-b-i-top">
|
|
|
+ <img
|
|
|
+ style="height: 22px; width: 22px"
|
|
|
+ :src="
|
|
|
+ require('../../../../assets/icon/classroomObservation/digImg.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div class="a-d-b-i-t-title">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottom">{{ item.brief }}</div>
|
|
|
+ <div class="a-d-b-i-bottomPer" style="display: block">
|
|
|
+ {{item.sum}}人已使用
|
|
|
+ </div>
|
|
|
+ <div class="a-d-b-i-bottomBtn" style="display: none">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-around;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- <div class="a-d-b-i-t-btn">详情</div> -->
|
|
|
+ <div
|
|
|
+ class="a-d-b-i-t-btn1"
|
|
|
+ @click="addAnalysisItem(item.title)"
|
|
|
+ >
|
|
|
+ 添加
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ dialogVisibleAiD: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogTagList: [
|
|
|
+ { id: 0, name: "社区模板" },
|
|
|
+ { id: 1, name: "我的模板" },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ dialogVisibleAiD(newValue, oldValue) {
|
|
|
+ if(newValue){
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose(done) {
|
|
|
+ this.close()
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('update:dialogVisibleAiD', false)
|
|
|
+ },
|
|
|
+ confirm(){
|
|
|
+ this.$emit('update:dialogVisibleAiD', false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.addTemplateDialog >>> .el-dialog {
|
|
|
+ min-width: 1200px;
|
|
|
+
|
|
|
+ height: 700px;
|
|
|
+ box-shadow: 0px 0 8px 0px #555555;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ /* top: 0px; */
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.addTemplateDialog >>> .el-dialog__body {
|
|
|
+ height: 100%;
|
|
|
+ min-width: 1200px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+.addTemplateDialog >>> .el-dialog__header {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.a-d-top {
|
|
|
+ /* background: #adadad; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ user-select: none;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.a-d-top >>> .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
+.a-d-topTit {
|
|
|
+ width: 171px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 22px;
|
|
|
+ justify-content: center;
|
|
|
+ /* text-align: left; */
|
|
|
+}
|
|
|
+.a-d-t-left {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item {
|
|
|
+ /* width: auto;
|
|
|
+ height: 90%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #d4d9da;
|
|
|
+ margin-right: 3px;
|
|
|
+ cursor: pointer; */
|
|
|
+ cursor: pointer;
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-l-item:hover {
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: black !important;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-t-right > span {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ border-radius: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ /* align-items: center; */
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+ /* background-color: #adadad; */
|
|
|
+ cursor: pointer;
|
|
|
+ /* background-color: #e6e6e6; */
|
|
|
+ color: #adadad;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ overflow: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-item {
|
|
|
+ width: 22%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+ /* position: relative; */
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomBtn {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+.a-d-b-item:hover .a-d-b-i-bottomPer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.a-d-b-i-top {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 50%; */
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+}
|
|
|
+.a-d-b-i-top > img {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+/* .a-d-b-i-top>div{ */
|
|
|
+/* width: auto;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px; */
|
|
|
+/* } */
|
|
|
+
|
|
|
+.a-d-b-i-t-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ display: block;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 35px;
|
|
|
+ /* display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden; */
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-bottom {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ /* max-height: 186px; */
|
|
|
+ font-size: 14px;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ line-height: 20px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-t-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.a-d-b-i-t-btn1 {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 98%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 25px;
|
|
|
+ border: 1px solid rgba(54, 129, 252, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.itemTit {
|
|
|
+ width: 136px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 5px 8px 5px 8px;
|
|
|
+ gap: 8px;
|
|
|
+ opacity: 0px;
|
|
|
+ margin: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-subject{
|
|
|
+ margin: 20px 0 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.a_d_b_s_btn{
|
|
|
+ /* box-sizing: border-box; */
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: solid 1px #3681FC;
|
|
|
+ color: #3681FC;
|
|
|
+ background-color: white;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: .3s;
|
|
|
+}
|
|
|
+
|
|
|
+.a_d_b_s_ActiveBtn{
|
|
|
+ background-color: #3681FC;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.a-d-b-i-t-btn:hover {
|
|
|
+ background-color: rgba(54, 129, 252, 1);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
SanHQin