qinqing_dev #268
|
|
@ -67,7 +67,7 @@ const title = reactive([
|
|||
},
|
||||
{
|
||||
name: '教材分析',
|
||||
url: '/teaching/chatwithtextbook',
|
||||
url: '/textbookAnalysis',
|
||||
img: 'iconfont icon-yanjiushi',
|
||||
child1: []
|
||||
},
|
||||
|
|
|
|||
|
|
@ -54,7 +54,13 @@ export const constantRoutes = [
|
|||
path: '/standardanalysis',
|
||||
component: () => import('@/views/teach/standardAnalysis/index.vue'),
|
||||
name: 'standardanalysis',
|
||||
meta: {title: '课标分析'},
|
||||
meta: {title: '课标分析'}
|
||||
},
|
||||
{
|
||||
path: '/textbookAnalysis',
|
||||
component: () => import('@/views/textbookAnalysis/index.vue'),
|
||||
name: 'textbookAnalysis',
|
||||
meta: {title: '教材分析'}
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
|
|
|
|||
|
|
@ -66,8 +66,7 @@ const menuList = [{
|
|||
{
|
||||
name: '教材分析',
|
||||
icon: 'icon-jiaocaixuanze',
|
||||
isOuter: true,
|
||||
path: '/teaching/chatwithtextbook',
|
||||
path: '/textbookAnalysis',
|
||||
id: '1-2'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -70,7 +70,10 @@
|
|||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="切换教材" append-to-body width="550">
|
||||
<div class="booklist">
|
||||
<div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item)">{{item.edustage + item.edusubject}}</div>
|
||||
<div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item,idx)">
|
||||
<el-image class="bookimg" :src="item.avartar" />
|
||||
<div class="bookname">{{item.fileurl.replace('.txt', '')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -237,8 +240,6 @@ const getData = (data) => {
|
|||
}
|
||||
sourceStore.handleQuery()
|
||||
getlistEvaluationclue(levelFirstId, levelSecondId)
|
||||
// 头部 教材分析打开外部链接需要当前章节ID
|
||||
localStorage.setItem('unitId', JSON.stringify({ levelFirstId, levelSecondId}))
|
||||
}
|
||||
// 获取学科
|
||||
const getAllSubject = async () => {
|
||||
|
|
@ -252,12 +253,16 @@ const getAllSubject = async () => {
|
|||
bookList.value.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar})
|
||||
}
|
||||
})
|
||||
booksel.value = bookList.value.findIndex(item => item.edustage === edustage && item.edusubject === edusubject)
|
||||
const textselidx = bookList.value.findIndex(item => item.edustage === edustage && item.edusubject === edusubject)
|
||||
booksel.value = textselidx
|
||||
booktitle.value = bookList.value[textselidx].fileurl.replace('.txt','')
|
||||
const filePath = import.meta.env.VITE_APP_RES_FILE_PATH + bookList.value[textselidx].fileurl.replace('.txt','.pdf')
|
||||
await loadPdfAnimation(filePath)
|
||||
}
|
||||
const bookChange = async (item, idx) => {
|
||||
booksel.value = idx
|
||||
bookInfo.value = {...item}
|
||||
booktitle.value = `${item.edustage + item.edusubject}课程标准`
|
||||
booktitle.value = item.fileurl.replace('.txt','')
|
||||
pdfUrl.value = '';
|
||||
const filepath = import.meta.env.VITE_APP_RES_FILE_PATH + item.fileurl.replace('.txt','.pdf')
|
||||
await loadPdfAnimation(filepath)
|
||||
|
|
@ -271,10 +276,6 @@ const loadPdfAnimation = (path) => {
|
|||
}
|
||||
onMounted(async () => {
|
||||
await getAllSubject();
|
||||
const { edustage, edusubject } = userStore.user;
|
||||
booktitle.value = `${edustage + edusubject}课程标准`
|
||||
const filePath = `${import.meta.env.VITE_APP_RES_FILE_PATH}${edustage}-${edusubject}-课标.pdf`
|
||||
await loadPdfAnimation(filePath)
|
||||
if(cardref.value && headref.value){
|
||||
const cardH = cardref.value.offsetHeight;
|
||||
const headh = headref.value.offsetHeight;
|
||||
|
|
@ -529,14 +530,23 @@ onMounted(async () => {
|
|||
padding-top: 1px;
|
||||
overflow: auto;
|
||||
.item{
|
||||
width: 100%;
|
||||
width: 162px;
|
||||
height: auto;
|
||||
padding: 8px 16px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
float: left;
|
||||
.bookimg{
|
||||
width: 130px;
|
||||
height: 180px;
|
||||
}
|
||||
.name{
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
}
|
||||
.item:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
background-color: #409eff;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,555 @@
|
|||
<template>
|
||||
<div class="page-con flex" ref="cardref">
|
||||
<!-- <el-button @click="saveJSON">测试保存</el-button> -->
|
||||
<div class="page-con-left">
|
||||
<div class="stand-head" ref="headref">
|
||||
<div class="stand-head-left">
|
||||
<el-image class="imges" :src="bookInfo ? bookInfo.avartar : ''" />
|
||||
</div>
|
||||
<div class="stand-head-right">
|
||||
<div class="stand-head-right-tit">{{booktitle}}</div>
|
||||
<i class="iconfont icon-yidongdaozu stand-head-right-icon" @click="dialogVisible = true"></i>
|
||||
<div class="stand-head-right-row">
|
||||
<div class="stand-head-right-row-time">更新2024.9.10</div>
|
||||
<!-- <el-switch class="stand-head-right-row-switch" v-model="isOpenClass" inline-prompt active-text="公开" inactive-text="非公" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stand-down">
|
||||
<div class="stand-down-search" ref="searchref">
|
||||
<el-input
|
||||
v-model="searchInp"
|
||||
placeholder="搜索课标、学校和老师"
|
||||
clearable
|
||||
@input="searchHandel"
|
||||
/>
|
||||
<el-select v-model="searchSel" placeholder="请选择" style="width: 140px;padding-left:6px" @change="selectHandel">
|
||||
<el-option
|
||||
v-for="item in searchOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="stand-down-con" :style="{overflow: 'auto',height: listHeight + 'px'}">
|
||||
<div class="stand-down-con-list" v-for="item,idx in showData" :key="idx">
|
||||
<div class="stand-down-con-list-icon">
|
||||
<el-image class="imges" :src="item.userheadimgurl" />
|
||||
</div>
|
||||
<div class="stand-down-con-list-txt">
|
||||
<div class="stand-down-con-list-txt-top">
|
||||
<div class="stand-down-con-list-txt-top-name">{{item.username}}</div>
|
||||
<div class="stand-down-con-list-txt-top-tip">{{item.childcount}}条</div>
|
||||
</div>
|
||||
<div class="stand-down-con-list-txt-down">
|
||||
<div class="stand-down-con-list-txt-down-tip">{{ item.userentpname }}</div>
|
||||
<div class="stand-down-con-list-txt-down-tip">{{ item.timeStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">~没有更多了~</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-con-right">
|
||||
<PDF :url="pdfUrl" v-if="pdfUrl" />
|
||||
<div class="loading" v-else>
|
||||
<div class="setup">
|
||||
<span style="--i:1">文</span>
|
||||
<span style="--i:2">档</span>
|
||||
<span style="--i:3">加</span>
|
||||
<span style="--i:4">载</span>
|
||||
<span style="--i:5">中</span>
|
||||
<span style="--i:6">.</span>
|
||||
<span style="--i:7">.</span>
|
||||
<span style="--i:8">.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="切换教材" append-to-body width="550">
|
||||
<div class="booklist">
|
||||
<div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item,idx)">
|
||||
<el-image class="bookimg" :src="item.avartar" />
|
||||
<div class="bookname">{{item.fileurl.replace('.txt', '')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import PDF from '@/components/PdfJs/index.vue'
|
||||
import { useRoute } from 'vue-router';
|
||||
import useResoureStore from '../resource/store'
|
||||
import { listEvaluationclue } from '@/api/teaching/classwork'
|
||||
import { uploadServer, getJSONFile } from '@/utils/common'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import ChooseTextbook from "@/components/choose-textbook/index.vue";
|
||||
import { listEvaluation } from '@/api/classManage/index'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
const sourceStore = useResoureStore()
|
||||
// import { getStaticUrl } from '@/utils/tool'
|
||||
|
||||
const route = useRoute();
|
||||
const pdfUrl = ref('');
|
||||
const isOpenClass = ref(true);
|
||||
const searchInp = ref('');
|
||||
const searchSel = ref('0');
|
||||
const loading = ref(false);
|
||||
const noMore = ref(false);
|
||||
const cardref = ref(null);
|
||||
const headref = ref(null);
|
||||
const searchref = ref(null);
|
||||
const listHeight = ref(0);
|
||||
const dialogVisible = ref(false);
|
||||
const booktitle = ref('');
|
||||
const bookInfo = ref(null);
|
||||
const booksel = ref(0);
|
||||
const bookList = ref([])
|
||||
|
||||
|
||||
const searchOptions = [{
|
||||
value: '0',
|
||||
label: '按时间',
|
||||
},{
|
||||
value: '1',
|
||||
label: '按内容量',
|
||||
}];
|
||||
const standList = ref([]);
|
||||
const showData = ref([]);
|
||||
|
||||
//查询课标分析列表
|
||||
const getlistEvaluationclue = (firstid, levelid) => {
|
||||
const newid = firstid ? firstid : levelid;
|
||||
listEvaluationclue({evalid: newid, parentid: 0, cluegroup: 'teachresource', orderby: "timestamp desc", pageSize: 100}).then((res) => {
|
||||
if(res.code === 200){
|
||||
const newData = formaterTime(res.rows)
|
||||
standList.value = newData
|
||||
showData.value = filterList(newData)
|
||||
}
|
||||
})
|
||||
}
|
||||
const formaterTime = (data) => {
|
||||
return data.map(item => {
|
||||
return {
|
||||
...item,
|
||||
timeStr: item.timestamp.split(' ')[0].replace('-', '.').replace('-', '.')
|
||||
}
|
||||
})
|
||||
}
|
||||
//筛选分析列表
|
||||
const filterList = (data) => {
|
||||
let standData = JSON.parse(JSON.stringify(data));
|
||||
let arr = [];
|
||||
if (searchSel.value === '0') {
|
||||
arr = standData.sort((a, b)=>{
|
||||
return new Date(b.timestamp) - new Date(a.timestamp);
|
||||
})
|
||||
}
|
||||
else {
|
||||
arr = standData.sort((a, b)=>{
|
||||
return b.childcount - a.childcount;
|
||||
})
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
//文本框文字搜索
|
||||
const searchHandel = (value) => {
|
||||
const newData = [];
|
||||
standList.value.map(item => {
|
||||
const str = JSON.stringify(item)
|
||||
if(str.indexOf(value) !== -1){
|
||||
newData.push(item);
|
||||
}
|
||||
})
|
||||
showData.value = newData
|
||||
}
|
||||
//下拉框条件筛选
|
||||
const selectHandel = (value) => {
|
||||
const filterData = searchInp.value !== '' ? showData.value : standList.value
|
||||
showData.value = filterList(filterData);
|
||||
}
|
||||
//保存json文件
|
||||
const saveJSON = (data) => {
|
||||
|
||||
let filename = ''
|
||||
// const data = {
|
||||
// name: 'txt',
|
||||
// class: '五年级2班',
|
||||
// school: '重庆市酉阳二中',
|
||||
// time: '2024-08-09'
|
||||
// }
|
||||
// saveJSON(jsonStr);
|
||||
if (!data) {
|
||||
console.log('传入的data数据为null');
|
||||
return;
|
||||
}
|
||||
if (!filename) {
|
||||
filename = `json${Date.now()}.json`
|
||||
console.log('未传入文件名,采用默认文件名' + filename);
|
||||
}
|
||||
let newdata = null;
|
||||
if (typeof data === 'object') {
|
||||
newdata = JSON.stringify(data, undefined, 4)
|
||||
}
|
||||
// 创建json文件blob流
|
||||
const blob = new Blob([newdata], { type: 'text/json' });
|
||||
// 创建file文件
|
||||
// const file = new File([blob],filename, {type: blob.type})
|
||||
// 创建上传文件流
|
||||
// const formdata = new FormData();
|
||||
// formdata.append('file', file);
|
||||
//其他参数待添加
|
||||
|
||||
//上传
|
||||
// uploadServer(formdata).then(res => {
|
||||
// console.log('+++++++++++++');
|
||||
// console.log(res.data);
|
||||
// })
|
||||
|
||||
let e = document.createEvent('MouseEvents');
|
||||
let a = document.createElement('a');
|
||||
a.download = filename;
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
|
||||
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||
a.dispatchEvent(e);
|
||||
}
|
||||
// 查询
|
||||
const getData = (data) => {
|
||||
const { textBook, node } = data
|
||||
let textbookId = textBook.curBookId
|
||||
let levelSecondId = node.id
|
||||
let levelFirstId
|
||||
if (node.parentNode) {
|
||||
levelFirstId = node.parentNode.id
|
||||
} else {
|
||||
levelFirstId = node.id
|
||||
levelSecondId = ''
|
||||
}
|
||||
sourceStore.query.levelFirstId = levelFirstId
|
||||
sourceStore.query.levelSecondId = levelSecondId
|
||||
sourceStore.query.textbookId = textbookId
|
||||
sourceStore.nodeData = {
|
||||
textbookId, //版本
|
||||
levelFirstId, //单元
|
||||
levelSecondId //单元课程
|
||||
}
|
||||
sourceStore.handleQuery()
|
||||
getlistEvaluationclue(levelFirstId, levelSecondId)
|
||||
}
|
||||
// 获取学科
|
||||
const getAllSubject = async () => {
|
||||
const { edustage, edusubject } = userStore.user;
|
||||
const { rows } = await listEvaluation({ itemkey: "version", edustage, edusubject, pageSize: 500 })
|
||||
rows && rows.map(item => {
|
||||
if(item.edustage === edustage && item.edusubject === edusubject){
|
||||
bookInfo.value = {...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar}
|
||||
}
|
||||
if(item.fileurl !== ''){
|
||||
bookList.value.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar})
|
||||
}
|
||||
})
|
||||
const textselidx = bookList.value.findIndex(item => item.edustage === edustage && item.edusubject === edusubject)
|
||||
booksel.value = textselidx
|
||||
booktitle.value = bookList.value[textselidx].fileurl.replace('.txt','')
|
||||
const filePath = import.meta.env.VITE_APP_RES_FILE_PATH + bookList.value[textselidx].fileurl.replace('.txt','.pdf')
|
||||
await loadPdfAnimation(filePath)
|
||||
}
|
||||
const bookChange = async (item, idx) => {
|
||||
booksel.value = idx
|
||||
bookInfo.value = {...item}
|
||||
booktitle.value = item.fileurl.replace('.txt','')
|
||||
pdfUrl.value = '';
|
||||
const filepath = import.meta.env.VITE_APP_RES_FILE_PATH + item.fileurl.replace('.txt','.pdf')
|
||||
await loadPdfAnimation(filepath)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const loadPdfAnimation = (path) => {
|
||||
const timer = setTimeout(() => {
|
||||
pdfUrl.value = path
|
||||
clearTimeout(timer);
|
||||
},2000)
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getAllSubject();
|
||||
if(cardref.value && headref.value){
|
||||
const cardH = cardref.value.offsetHeight;
|
||||
const headh = headref.value.offsetHeight;
|
||||
const searchh = searchref.value.offsetHeight;
|
||||
listHeight.value = Math.floor(cardH) - Math.floor(headh) - Math.floor(searchh) - 60;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if(cardref.value && headref.value){
|
||||
const cardH = cardref.value.offsetHeight;
|
||||
const headh = headref.value.offsetHeight;
|
||||
const searchh = searchref.value.offsetHeight;
|
||||
listHeight.value = Math.floor(cardH) - Math.floor(headh) - Math.floor(searchh) - 60;
|
||||
}
|
||||
})
|
||||
window.addEventListener('message',(event) => {
|
||||
// console.log('------------');
|
||||
const iframeMes = event.data;
|
||||
if(iframeMes.storageInfo){
|
||||
// saveJSON(iframeMes.storageInfo);
|
||||
// console.log(JSON.stringify(iframeMes.storageInfo));
|
||||
}
|
||||
if(iframeMes.quoteInfo){
|
||||
console.log(iframeMes.quoteInfo);
|
||||
const { textStr, StartStr, EndStr } = iframeMes.quoteInfo;
|
||||
if(textStr === StartStr || textStr === EndStr){
|
||||
ElNotification({
|
||||
title: '引用内容',
|
||||
message: textStr,
|
||||
duration: 0,
|
||||
type: 'info',
|
||||
offset: 120
|
||||
})
|
||||
//如果开头和结尾的文字跟内容相同，那么它要么是开头，要么是整段，不需要替换操作
|
||||
console.log('无需替换------',textStr);
|
||||
return
|
||||
}
|
||||
let midStr = ''
|
||||
if(StartStr === '' && EndStr === '' && textStr === '') return
|
||||
if(StartStr === '' && EndStr !== '') {
|
||||
midStr = textStr.replace(EndStr,'eeeeee').split('eeeeee')[0]
|
||||
}else if(StartStr !== '' && EndStr === ''){
|
||||
midStr = textStr.replace(StartStr,'ssssss').split('ssssss')[1]
|
||||
}else{
|
||||
midStr = textStr.replace(StartStr, 'ssssss').replace(EndStr,'eeeeee').split('ssssss')[1].split('eeeeee')[0];
|
||||
}
|
||||
ElNotification({
|
||||
title: '引用内容',
|
||||
message: StartStr + midStr + EndStr,
|
||||
duration: 0,
|
||||
type: 'info',
|
||||
offset: 120
|
||||
})
|
||||
console.log('中间文字------',midStr);
|
||||
console.log('转换后整体文字------',StartStr + midStr + EndStr);
|
||||
}
|
||||
})
|
||||
|
||||
// const isDev = process.env.NODE_ENV == 'development'
|
||||
// if (isDev)
|
||||
// pdfUrl.value = '/'+getStaticUrl('aaa.pdf', 'user', 'selfFile', true)
|
||||
// else
|
||||
// pdfUrl.value = getStaticUrl(route.query.path, 'user', 'selfFile', true)
|
||||
|
||||
// console.log('页面',pdfUrl.value);
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-con {
|
||||
padding-top: 20px;
|
||||
height: 100%;
|
||||
&-left{
|
||||
width: 300px;
|
||||
height: auto;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(99, 99, 99, 0.06);
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
min-height: 100vh;
|
||||
.setup {
|
||||
position: relative;
|
||||
-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2))
|
||||
}
|
||||
|
||||
.setup span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #409eff;
|
||||
font-size: 26px;
|
||||
animation: animate 1s ease-in-out infinite;
|
||||
animation-delay: calc(.1s*var(--i))
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
0% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateY(-24px)
|
||||
}
|
||||
|
||||
40%,
|
||||
100% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
}
|
||||
}
|
||||
.stand-head{
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
&-left{
|
||||
width: 48px;
|
||||
height: 66px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
.imges{
|
||||
width: 48px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-left: 60px;
|
||||
padding-right: 6px;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
z-index: 2;
|
||||
&-tit{
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #3b3b3b;
|
||||
text-align: left;
|
||||
}
|
||||
&-icon{
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 0px;
|
||||
z-index: 3;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
&-row{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
&-time{
|
||||
font-size: var(--el-font-size-extra-small);
|
||||
color: var(--el-color-info-rgb);
|
||||
line-height: 32px;
|
||||
}
|
||||
&-switch{
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.stand-down{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-top: 20px;
|
||||
padding-right: 6px;
|
||||
&-search{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
&-con{
|
||||
width: 100%;
|
||||
&-list{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding: 8px 0;
|
||||
border-top: 1px dashed #e1e1e1;
|
||||
&-icon{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
.imges{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
&-txt{
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding-left: 56px;
|
||||
padding-right: 12px;
|
||||
&-top,&-down{
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&-name{
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
font-weight: 600;
|
||||
}
|
||||
&-tip{
|
||||
font-size: 12px;
|
||||
color: #787878;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&-down{
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-list:first-of-type{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.booklist{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
padding-top: 1px;
|
||||
overflow: auto;
|
||||
.item{
|
||||
width: 162px;
|
||||
height: auto;
|
||||
padding: 8px 16px;
|
||||
background-color: #ffffff;
|
||||
float: left;
|
||||
.bookimg{
|
||||
width: 130px;
|
||||
height: 180px;
|
||||
}
|
||||
.name{
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
}
|
||||
}
|
||||
.item:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
background-color: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue