|
|
@ -27,7 +27,7 @@ |
|
|
|
max-height="calc(100vh - 320px)" |
|
|
|
max-height="calc(100vh - 320px)" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-table-column type="index" width="55" align="center" /> |
|
|
|
<el-table-column type="index" width="55" align="center" /> |
|
|
|
<el-table-column label="章节序号" align="left" prop="chapterIndex" width="80" /> |
|
|
|
<el-table-column label="章节序号" align="left" prop="chapterIndex" width="140" /> |
|
|
|
<el-table-column label="章节名" align="left" prop="chapterName" min-width="140" /> |
|
|
|
<el-table-column label="章节名" align="left" prop="chapterName" min-width="140" /> |
|
|
|
<el-table-column label="作者" align="center" prop="author" min-width="100" /> |
|
|
|
<el-table-column label="作者" align="center" prop="author" min-width="100" /> |
|
|
|
<el-table-column label="是否付费" align="center" width="100"> |
|
|
|
<el-table-column label="是否付费" align="center" width="100"> |
|
|
@ -38,11 +38,34 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="章节内容" :width="90"> |
|
|
|
<el-table-column label="章节内容" :width="90"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<el-popover placement="right" width="500px" trigger="click" v-if="row.content"> |
|
|
|
<el-popover placement="right" width="300px" trigger="click" v-if="row.content"> |
|
|
|
<template #reference> |
|
|
|
<template #reference> |
|
|
|
<el-button type="primary" style="padding: 0" text>点击查看</el-button> |
|
|
|
<el-button type="primary" style="padding: 0" text>预览</el-button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<div v-dompurify-html="row.content" style="max-height: 800px; overflow-y: auto"></div> |
|
|
|
<!-- --> |
|
|
|
|
|
|
|
<div class="iphone-frame"> |
|
|
|
|
|
|
|
<!-- 屏幕边框(无内容) --> |
|
|
|
|
|
|
|
<div class="iphone-screen-border"> |
|
|
|
|
|
|
|
<div v-dompurify-html="row.content"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 顶部摄像头/听筒区域 --> |
|
|
|
|
|
|
|
<div class="iphone-camera-bar"> |
|
|
|
|
|
|
|
<div class="camera-dot"></div> |
|
|
|
|
|
|
|
<div class="earpiece"></div> |
|
|
|
|
|
|
|
<div class="camera-dot"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 左侧电源键 --> |
|
|
|
|
|
|
|
<div class="iphone-power-btn"></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 右侧音量键 --> |
|
|
|
|
|
|
|
<div class="iphone-volume-btn volume-up"></div> |
|
|
|
|
|
|
|
<div class="iphone-volume-btn volume-down"></div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部Home键 --> |
|
|
|
|
|
|
|
<div class="iphone-home-btn"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</el-popover> |
|
|
|
</el-popover> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
@ -50,7 +73,7 @@ |
|
|
|
<el-table-column label="发布时间" align="center" prop="publicTime" min-width="100" /> |
|
|
|
<el-table-column label="发布时间" align="center" prop="publicTime" min-width="100" /> |
|
|
|
<el-table-column label="浏览数" align="center" prop="browseCount" width="100" /> |
|
|
|
<el-table-column label="浏览数" align="center" prop="browseCount" width="100" /> |
|
|
|
<el-table-column label="点赞数" align="center" prop="goodCount" width="100" /> |
|
|
|
<el-table-column label="点赞数" align="center" prop="goodCount" width="100" /> |
|
|
|
<el-table-column label="收藏数" align="center" prop="likeCount" width="100" /> |
|
|
|
<el-table-column label="收藏数" align="center" prop="collectCount" width="100" /> |
|
|
|
<el-table-column label="操作" align="center" width="140"> |
|
|
|
<el-table-column label="操作" align="center" width="140"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<el-button type="primary" link @click.stop="handleEdit(row)"> 修改 </el-button> |
|
|
|
<el-button type="primary" link @click.stop="handleEdit(row)"> 修改 </el-button> |
|
|
@ -84,10 +107,16 @@ |
|
|
|
<el-form-item label="作者"> |
|
|
|
<el-form-item label="作者"> |
|
|
|
<el-input v-model="form.author" placeholder="请输入" /> |
|
|
|
<el-input v-model="form.author" placeholder="请输入" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="是否付费"> |
|
|
|
|
|
|
|
<el-radio-group v-model="form.isFree"> |
|
|
|
|
|
|
|
<el-radio :label="true" :value="true">免费</el-radio> |
|
|
|
|
|
|
|
<el-radio :label="false" :value="false">付费</el-radio> |
|
|
|
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="发布状态"> |
|
|
|
<el-form-item label="发布状态"> |
|
|
|
<el-radio-group v-model="form.status"> |
|
|
|
<el-radio-group v-model="form.status"> |
|
|
|
<el-radio :label="1">发布</el-radio> |
|
|
|
<el-radio :label="1" :vlaue="1">发布</el-radio> |
|
|
|
<el-radio :label="2">不发布</el-radio> |
|
|
|
<el-radio :label="2" :value="2">不发布</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="章节内容" prop="content"> |
|
|
|
<el-form-item label="章节内容" prop="content"> |
|
|
@ -166,6 +195,7 @@ function resetForm() { |
|
|
|
form.value = { |
|
|
|
form.value = { |
|
|
|
lessonName: '', |
|
|
|
lessonName: '', |
|
|
|
image: '', |
|
|
|
image: '', |
|
|
|
|
|
|
|
isFree: false, |
|
|
|
introduction: '', |
|
|
|
introduction: '', |
|
|
|
author: '', |
|
|
|
author: '', |
|
|
|
status: 2 |
|
|
|
status: 2 |
|
|
@ -208,4 +238,108 @@ onMounted(() => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
/* 手机框主体 - 核心样式 */ |
|
|
|
|
|
|
|
.iphone-frame { |
|
|
|
|
|
|
|
/* 机身比例(参考iPhone 14) */ |
|
|
|
|
|
|
|
width: 280px; |
|
|
|
|
|
|
|
height: 580px; |
|
|
|
|
|
|
|
/* 机身样式 */ |
|
|
|
|
|
|
|
background-color: #1c1c1e; /* 默认黑色 */ |
|
|
|
|
|
|
|
border-radius: 42px; /* 机身大圆角 */ |
|
|
|
|
|
|
|
border: 8px solid #1c1c1e; /* 边框厚度,增强立体感 */ |
|
|
|
|
|
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* 外阴影+内阴影增强质感 */ |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 屏幕区域(仅边框,无内容) */ |
|
|
|
|
|
|
|
.iphone-screen-border { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 0; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
padding: 20px 10px; |
|
|
|
|
|
|
|
margin: 6px; /* 屏幕与机身边框间距 */ |
|
|
|
|
|
|
|
border-radius: 36px; /* 屏幕圆角(比机身小) */ |
|
|
|
|
|
|
|
background-color: #fff; /* 模拟屏幕黑边 */ |
|
|
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
scrollbar-width: none; /* 隐藏滚动条,保留功能 */ |
|
|
|
|
|
|
|
-ms-overflow-style: none; /* 针对 IE 和 Edge */ |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 顶部摄像头区域(刘海简化版) */ |
|
|
|
|
|
|
|
.iphone-camera-bar { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: -8px; /* 与机身边框对齐 */ |
|
|
|
|
|
|
|
left: 50%; |
|
|
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
|
|
width: 110px; |
|
|
|
|
|
|
|
height: 26px; |
|
|
|
|
|
|
|
background-color: #1c1c1e; /* 与机身同色,隐藏接缝 */ |
|
|
|
|
|
|
|
border-bottom-left-radius: 16px; |
|
|
|
|
|
|
|
border-bottom-right-radius: 16px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
gap: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* 摄像头/听筒细节 */ |
|
|
|
|
|
|
|
.camera-dot { |
|
|
|
|
|
|
|
width: 8px; |
|
|
|
|
|
|
|
height: 8px; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
background-color: gray; /* 深灰,模拟摄像头 */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.earpiece { |
|
|
|
|
|
|
|
width: 30px; |
|
|
|
|
|
|
|
height: 6px; |
|
|
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
|
|
background-color: gray; /* 模拟听筒 */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 侧边按键 - 电源键(左侧) */ |
|
|
|
|
|
|
|
.iphone-power-btn { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
left: -8px; /* 与机身边框对齐 */ |
|
|
|
|
|
|
|
top: 120px; |
|
|
|
|
|
|
|
width: 8px; |
|
|
|
|
|
|
|
height: 40px; |
|
|
|
|
|
|
|
background-color: gray; /* 按键颜色(比机身浅) */ |
|
|
|
|
|
|
|
border-top-left-radius: 4px; |
|
|
|
|
|
|
|
border-bottom-left-radius: 4px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 侧边按键 - 音量键(右侧) */ |
|
|
|
|
|
|
|
.iphone-volume-btn { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
right: -8px; /* 与机身边框对齐 */ |
|
|
|
|
|
|
|
width: 8px; |
|
|
|
|
|
|
|
height: 32px; |
|
|
|
|
|
|
|
background-color: gray; |
|
|
|
|
|
|
|
border-top-right-radius: 4px; |
|
|
|
|
|
|
|
border-bottom-right-radius: 4px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.volume-up { |
|
|
|
|
|
|
|
top: 100px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.volume-down { |
|
|
|
|
|
|
|
top: 150px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 底部Home键(圆形) */ |
|
|
|
|
|
|
|
.iphone-home-btn { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
bottom: 20px; |
|
|
|
|
|
|
|
left: 50%; |
|
|
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
|
|
width: 40px; |
|
|
|
|
|
|
|
height: 40px; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
border: 2px solid #3a3a3c; /* 按键边框 */ |
|
|
|
|
|
|
|
background-color: #1c1c1e; /* 与机身同色 */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|