|
|
@@ -1,7 +1,7 @@
|
|
|
<script setup>
|
|
|
import apiReport from '@/api/modules/report'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
-import { Message,Toast } from 'tdesign-mobile-vue';
|
|
|
+import { Message, Toast } from 'tdesign-mobile-vue';
|
|
|
import apiUser from '@/api/modules/user'
|
|
|
import { useThrottleFn } from '@vueuse/core'
|
|
|
|
|
|
@@ -12,73 +12,58 @@ const route = useRoute()
|
|
|
let userInfo = null
|
|
|
async function getUserInfo() {
|
|
|
const res = await apiUser.userInfo()
|
|
|
- if (res.Ret === 200&&res.ErrCode===0) {
|
|
|
+ if (res.Ret === 200 && res.ErrCode === 0) {
|
|
|
userInfo = res.data
|
|
|
}
|
|
|
}
|
|
|
getUserInfo()
|
|
|
-const defaultImg = new URL(`@/assets/imgs/default-author.png`,import.meta.url).href
|
|
|
+const defaultImg = new URL(`@/assets/imgs/default-author.png`, import.meta.url).href
|
|
|
|
|
|
const reportId = route.query.reportid
|
|
|
const reportInfo = ref(null)
|
|
|
const reportContent = ref('')
|
|
|
-const reportStatus = ref(4)//1已过期，2没有该品种权限，3没有权限，4有权限，5未绑定
|
|
|
-const headImgStyle=ref([])
|
|
|
-const endImgStyle=ref([])
|
|
|
-const layoutBaseInfo=ref({
|
|
|
- '研报标题':'',
|
|
|
- '研报作者':'',
|
|
|
- '创建时间':''
|
|
|
+const isFollowed = ref(false)
|
|
|
+const authorInfo=ref(null)
|
|
|
+const isLogin=ref(false)
|
|
|
+const headImgStyle = ref([])
|
|
|
+const endImgStyle = ref([])
|
|
|
+const layoutBaseInfo = ref({
|
|
|
+ '研报标题': '',
|
|
|
+ '研报作者': '',
|
|
|
+ '创建时间': ''
|
|
|
})
|
|
|
|
|
|
// 报告内容分页
|
|
|
-const pageSize=20
|
|
|
-let page=0
|
|
|
-let endPageNum=0
|
|
|
-let contentTotals=[]
|
|
|
-const renderContentList=ref([])
|
|
|
-function splitReportContent(data){
|
|
|
- const arr=data.split('</p>');
|
|
|
- contentTotals=arr.map(_ => _+'</p>')
|
|
|
- renderContentList.value=contentTotals.slice(0,pageSize)
|
|
|
- endPageNum=parseInt(contentTotals.length / pageSize) + 1;
|
|
|
+const pageSize = 20
|
|
|
+let page = 0
|
|
|
+let endPageNum = 0
|
|
|
+let contentTotals = []
|
|
|
+const renderContentList = ref([])
|
|
|
+function splitReportContent(data) {
|
|
|
+ const arr = data.split('</p>');
|
|
|
+ contentTotals = arr.map(_ => _ + '</p>')
|
|
|
+ renderContentList.value = contentTotals.slice(0, pageSize)
|
|
|
+ endPageNum = parseInt(contentTotals.length / pageSize) + 1;
|
|
|
}
|
|
|
-function handleLoadContent(){
|
|
|
- renderContentList.value=renderContentList.value.concat(contentTotals.slice(page*pageSize,(page+1)*pageSize))
|
|
|
+function handleLoadContent() {
|
|
|
+ renderContentList.value = renderContentList.value.concat(contentTotals.slice(page * pageSize, (page + 1) * pageSize))
|
|
|
}
|
|
|
async function getReportInfo() {
|
|
|
- //获取研报详情
|
|
|
+ //获取研报详情
|
|
|
if (!reportId) return
|
|
|
const res = await apiReport.getReportDetail({
|
|
|
reportId: reportId
|
|
|
})
|
|
|
- if (res.Ret === 200&&res.ErrCode===0) {
|
|
|
- const {detail,authorInfo} = res.data
|
|
|
- reportInfo.value = {
|
|
|
- Author:detail.author,
|
|
|
- AuthorId:1,
|
|
|
- AuthorImg:authorInfo?.length>1?'':authorInfo[0].headImgUrl,
|
|
|
- IsFollowed:false,
|
|
|
- PublishTime:detail.publishTime,
|
|
|
- Abstract:detail.abstract,
|
|
|
- Title:detail.title,
|
|
|
- Content:detail.content,
|
|
|
- HasChapter:Boolean(detail.hasChapter),
|
|
|
- ChapterContent:detail.chapters,
|
|
|
- HeadResource:{
|
|
|
- ImgUrl:detail.headResource?.imgURL||'',
|
|
|
- Style:detail.headResource?.style||''
|
|
|
- },
|
|
|
- EndResource:{
|
|
|
- ImgUrl:detail.endResource?.imgURL||'',
|
|
|
- Style:detail.endResource?.style||''
|
|
|
- }
|
|
|
- }
|
|
|
- headImgStyle.value=reportInfo.value.HeadResource.Style?JSON.parse(reportInfo.value.HeadResource.Style):[]
|
|
|
- endImgStyle.value=reportInfo.value.EndResource.Style?JSON.parse(reportInfo.value.EndResource.Style):[]
|
|
|
- layoutBaseInfo.value['研报标题']=reportInfo.value.Title
|
|
|
- layoutBaseInfo.value['研报作者']=reportInfo.value.Author
|
|
|
- layoutBaseInfo.value['创建时间']= reportInfo.value.PublishTime
|
|
|
+ if (res.Ret === 200 && res.ErrCode === 0) {
|
|
|
+ const { detail, authorInfo } = res.data
|
|
|
+ authorInfo.value=authorInfo
|
|
|
+ reportInfo.value = detail
|
|
|
+ isLogin.value=res.data.login
|
|
|
+ headImgStyle.value = reportInfo.value.headResource.style ? JSON.parse(reportInfo.value.headResource.style) : []
|
|
|
+ endImgStyle.value = reportInfo.value.endResource.style ? JSON.parse(reportInfo.value.endResource.style) : []
|
|
|
+ layoutBaseInfo.value['研报标题'] = reportInfo.value.title
|
|
|
+ layoutBaseInfo.value['研报作者'] = reportInfo.value.author
|
|
|
+ layoutBaseInfo.value['创建时间'] = reportInfo.value.publishTime
|
|
|
|
|
|
getAuthorFollowState()
|
|
|
nextTick(() => {
|
|
|
@@ -89,52 +74,39 @@ async function getReportInfo() {
|
|
|
// 设置分享文案
|
|
|
wx.miniProgram.postMessage({
|
|
|
data: {
|
|
|
- title: reportInfo.value.Title
|
|
|
+ title: reportInfo.value.title
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- //await getUserInfo()
|
|
|
- reportContent.value = modifyReportContentIframeData(reportInfo.value.Content)
|
|
|
+ reportContent.value = reportInfo.value.content
|
|
|
splitReportContent(reportContent.value)
|
|
|
}
|
|
|
}
|
|
|
getReportInfo()
|
|
|
-function getAuthorFollowState(){
|
|
|
- apiUser.getFollowState({
|
|
|
- names:reportInfo.value.Author
|
|
|
- }).then(res=>{
|
|
|
- if(res.Ret === 200&&res.ErrCode===0){
|
|
|
- reportInfo.value.IsFollowed = res.data.followStatus==='following'
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-function changeFollowState(){
|
|
|
- apiUser.followAuthor({
|
|
|
- analystNames:reportInfo.value.Author,
|
|
|
- followType:reportInfo.value.IsFollowed?'unfollowed':'following',
|
|
|
- mobile:userInfo?.mobile||''
|
|
|
- }).then(res=>{
|
|
|
- if(res.Ret === 200&&res.ErrCode===0){
|
|
|
- reportInfo.value.IsFollowed = !reportInfo.value.IsFollowed
|
|
|
- Toast({
|
|
|
- theme: 'success',
|
|
|
- direction: 'row',
|
|
|
- message: reportInfo.value.IsFollowed?'关注成功':'取消关注成功',
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 修改报告中嵌入的图表地址
|
|
|
-function modifyReportContentIframeData(str){
|
|
|
- let temStr=str.replace(/http:\/\/eta.dwfutures.com:8001/g,'https://dwresearch.dwfutures.com')
|
|
|
- return temStr.replace(/http:\/\/58.210.74.21:9100\/etastatic/g,'https://dwresearch.dwfutures.com/etastatic')
|
|
|
+function getAuthorFollowState() {
|
|
|
+ apiUser.getFollowState({
|
|
|
+ names: reportInfo.value.author
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret === 200 && res.ErrCode === 0) {
|
|
|
+ isFollowed.value = res.data.followStatus === 'following'
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
-// 给报告详情中图表加参数
|
|
|
-function formatIframeData() {
|
|
|
- reportContent.value = reportInfo.value.Content.replace(/\/chartshow\?code=/g, `/chartshow?source=etamini&token=${localStorage.getItem('token')}&reportId=${reportId}&code=`)
|
|
|
- splitReportContent(reportContent.value)
|
|
|
+function changeFollowState() {
|
|
|
+ apiUser.followAuthor({
|
|
|
+ analystNames: reportInfo.value.author,
|
|
|
+ followType: isFollowed.value ? 'unfollowed' : 'following',
|
|
|
+ mobile: userInfo?.mobile || ''
|
|
|
+ }).then(res => {
|
|
|
+ if (res.Ret === 200 && res.ErrCode === 0) {
|
|
|
+ isFollowed.value = !isFollowed.value
|
|
|
+ Toast({
|
|
|
+ theme: 'success',
|
|
|
+ direction: 'row',
|
|
|
+ message: isFollowed.value ? '关注成功' : '取消关注成功',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 显示免责声明
|
|
|
@@ -142,7 +114,7 @@ const isShowMZSM = ref(false)
|
|
|
|
|
|
// 显示返回顶部
|
|
|
const showToTop = ref(false)
|
|
|
-const handlePageScroll=useThrottleFn(()=>{
|
|
|
+const handlePageScroll = useThrottleFn(() => {
|
|
|
const top = document.documentElement.scrollTop || document.body.scrollTop
|
|
|
if (top > window.outerHeight) {
|
|
|
showToTop.value = true
|
|
|
@@ -150,16 +122,16 @@ const handlePageScroll=useThrottleFn(()=>{
|
|
|
showToTop.value = false
|
|
|
}
|
|
|
|
|
|
- if(page >= endPageNum) return
|
|
|
+ if (page >= endPageNum) return
|
|
|
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
|
|
|
const scrollHeight = document.body.scrollHeight; // 总高度
|
|
|
const bufferHeight = 400;
|
|
|
- if((scrollHeight - top - clientHeight) < bufferHeight+100) {
|
|
|
+ if ((scrollHeight - top - clientHeight) < bufferHeight + 100) {
|
|
|
console.log('触底')
|
|
|
page++
|
|
|
handleLoadContent();
|
|
|
}
|
|
|
-},300)
|
|
|
+}, 300)
|
|
|
|
|
|
function handleBackTop() {
|
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0
|
|
|
@@ -189,115 +161,142 @@ onUnmounted(() => {
|
|
|
window.removeEventListener('scroll', handlePageScroll)
|
|
|
})
|
|
|
|
|
|
+function handleGoLogin() {
|
|
|
+ const redirectUrl = encodeURIComponent(`/pages-report/reportDetail/index?id=${route.query.reportid}`)
|
|
|
+ wx.miniProgram.reLaunch({
|
|
|
+ url: `/pages/login/index?redirectUrl=${redirectUrl}`
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="report-detail-page" v-if="reportInfo">
|
|
|
<!-- 智能研报有版头版尾 -->
|
|
|
- <div class="html-head-img-box" v-if="reportInfo.HeadResource.ImgUrl">
|
|
|
- <img :src="reportInfo.HeadResource.ImgUrl" alt="" style="display:block;width:100%">
|
|
|
- <div
|
|
|
- class="head-layout-item"
|
|
|
- v-for="item in headImgStyle"
|
|
|
+ <div class="html-head-img-box" v-if="reportInfo.headResource.imgUrl">
|
|
|
+ <img
|
|
|
+ :src="reportInfo.headResource.imgUrl"
|
|
|
+ alt=""
|
|
|
+ style="display: block; width: 100%"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="head-layout-item"
|
|
|
+ v-for="item in headImgStyle"
|
|
|
:key="item.value"
|
|
|
:style="{
|
|
|
- fontFamily:item.family,
|
|
|
- fontSize:item.size,
|
|
|
- fontWeight:item.weight,
|
|
|
- textAlign:item.align,
|
|
|
- color:item.color,
|
|
|
- width:item.width,
|
|
|
- height:item.height,
|
|
|
- left:item.left,
|
|
|
- top:item.top
|
|
|
+ fontFamily: item.family,
|
|
|
+ fontSize: item.size,
|
|
|
+ fontWeight: item.weight,
|
|
|
+ textAlign: item.align,
|
|
|
+ color: item.color,
|
|
|
+ width: item.width,
|
|
|
+ height: item.height,
|
|
|
+ left: item.left,
|
|
|
+ top: item.top,
|
|
|
}"
|
|
|
>
|
|
|
{{ layoutBaseInfo[item.value] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="time-box" style="text-align:right;" v-if="reportInfo.HeadResource.ImgUrl">
|
|
|
+ <div
|
|
|
+ class="time-box"
|
|
|
+ style="text-align: right"
|
|
|
+ v-if="reportInfo.headResource.imgUrl"
|
|
|
+ >
|
|
|
<span>如有内容疑问 请查看 </span>
|
|
|
<span class="btn" @click="isShowMZSM = true">免责声明</span>
|
|
|
</div>
|
|
|
|
|
|
- <template v-if="!reportInfo.HeadResource.ImgUrl&&!reportInfo.EndResource.ImgUrl">
|
|
|
- <div class="title-box">{{ reportInfo.Title }}</div>
|
|
|
- <div class="author-box">
|
|
|
- <div class="img-box">
|
|
|
- <img :src="reportInfo.AuthorImg?reportInfo.AuthorImg:defaultImg">
|
|
|
- </div>
|
|
|
- <div class="author-info">
|
|
|
- <span class="name">{{ reportInfo.Author.split(',').join('、') }}</span>
|
|
|
- <span class="time">{{ reportInfo.PublishTime }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- @click="changeFollowState"
|
|
|
- :class="['opt-btn',reportInfo.IsFollowed?'followed':'']">
|
|
|
- {{ reportInfo.IsFollowed?'取消关注':'关注' }}
|
|
|
- </div>
|
|
|
+ <template
|
|
|
+ v-if="!reportInfo.headResource.imgUrl && !reportInfo.endResource.imgUrl"
|
|
|
+ >
|
|
|
+ <div class="title-box">{{ reportInfo.title }}</div>
|
|
|
+ <div class="author-box">
|
|
|
+ <div class="img-box">
|
|
|
+ <img
|
|
|
+ :src="authorInfo?.[0].headImgUrl|| defaultImg"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="time-box">
|
|
|
- <span class="btn" @click="isShowMZSM = true">免责声明</span>
|
|
|
+ <div class="author-info">
|
|
|
+ <span class="name">{{
|
|
|
+ reportInfo.author.split(",").join("、")
|
|
|
+ }}</span>
|
|
|
+ <span class="time">{{ reportInfo.publishTime }}</span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ <div
|
|
|
+ @click="changeFollowState"
|
|
|
+ :class="['opt-btn', isFollowed ? 'followed' : '']"
|
|
|
+ v-if="isLogin"
|
|
|
+ >
|
|
|
+ {{ isFollowed ? "取消关注" : "关注" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time-box">
|
|
|
+ <span class="btn" @click="isShowMZSM = true">免责声明</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <div class="des-box" v-if="reportInfo.Abstract">
|
|
|
- <svg-icon name="icon01"></svg-icon>
|
|
|
- <div>{{ reportInfo.Abstract }}</div>
|
|
|
+ <div class="des-box" v-if="reportInfo.abstract">
|
|
|
+ <svg-icon name="icon01"></svg-icon>
|
|
|
+ <div>{{ reportInfo.abstract }}</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- id="rich-content"
|
|
|
- class="report-content-box rich-content"
|
|
|
- v-html="reportContent"
|
|
|
- v-if="reportStatus !== 4"
|
|
|
+ id="rich-content"
|
|
|
+ class="report-content-box rich-content"
|
|
|
+ v-html="reportContent"
|
|
|
+ v-if="false"
|
|
|
/>
|
|
|
<template v-else>
|
|
|
+ <div
|
|
|
+ id="rich-content"
|
|
|
+ class="report-content-box rich-content"
|
|
|
+ v-if="!reportInfo.hasChapter"
|
|
|
+ >
|
|
|
+ <div v-for="item in renderContentList" :key="item" v-html="item"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 章节报告 -->
|
|
|
+ <div
|
|
|
+ id="rich-content"
|
|
|
+ class="report-content-box rich-content"
|
|
|
+ v-if="reportInfo.hasChapter"
|
|
|
+ >
|
|
|
<div
|
|
|
- id="rich-content"
|
|
|
- class="report-content-box rich-content"
|
|
|
- v-if="!reportInfo.HasChapter"
|
|
|
- >
|
|
|
- <div v-for="item in renderContentList" :key="item" v-html="item"></div>
|
|
|
- </div>
|
|
|
- <!-- 章节报告 -->
|
|
|
- <div
|
|
|
- id="rich-content"
|
|
|
- class="report-content-box rich-content"
|
|
|
- v-if="reportInfo.HasChapter"
|
|
|
+ class="chapter-item-wrap"
|
|
|
+ v-for="(chapter, index) in reportInfo.chapters"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
- <div
|
|
|
- class="chapter-item-wrap"
|
|
|
- v-for="chapter,index in reportInfo.ChapterContent"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <div class="chapter-title">
|
|
|
- <h3 class="chapter-title-text">{{chapter.title}}</h3>
|
|
|
- </div>
|
|
|
- <div v-html="chapter.content"></div>
|
|
|
- </div>
|
|
|
+ <div class="chapter-title">
|
|
|
+ <h3 class="chapter-title-text">{{ chapter.title }}</h3>
|
|
|
+ </div>
|
|
|
+ <div v-html="chapter.content"></div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
|
|
|
<!-- 拼接版尾 -->
|
|
|
- <div class="html-end-img-box" v-if="reportInfo.EndResource.ImgUrl">
|
|
|
- <img :src="reportInfo.EndResource.ImgUrl" alt="" style="display:block;width:100%">
|
|
|
- <div
|
|
|
- class="head-layout-item"
|
|
|
- v-for="item in endImgStyle"
|
|
|
+ <div class="html-end-img-box" v-if="reportInfo.endResource.imgUrl">
|
|
|
+ <img
|
|
|
+ :src="reportInfo.endResource.imgUrl"
|
|
|
+ alt=""
|
|
|
+ style="display: block; width: 100%"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="head-layout-item"
|
|
|
+ v-for="item in endImgStyle"
|
|
|
:key="item.value"
|
|
|
:style="{
|
|
|
- fontFamily:item.family,
|
|
|
- fontSize:(item.size*2)+'px',
|
|
|
- fontWeight:item.weight,
|
|
|
- textAlign:item.align,
|
|
|
- color:item.color,
|
|
|
- width:item.width,
|
|
|
- height:item.height,
|
|
|
- left:item.left,
|
|
|
- top:item.top
|
|
|
+ fontFamily: item.family,
|
|
|
+ fontSize: item.size * 2 + 'px',
|
|
|
+ fontWeight: item.weight,
|
|
|
+ textAlign: item.align,
|
|
|
+ color: item.color,
|
|
|
+ width: item.width,
|
|
|
+ height: item.height,
|
|
|
+ left: item.left,
|
|
|
+ top: item.top,
|
|
|
}"
|
|
|
- >{{ layoutBaseInfo[item.value] }}
|
|
|
+ >
|
|
|
+ {{ layoutBaseInfo[item.value] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧悬浮操作栏 -->
|
|
|
@@ -313,6 +312,23 @@ onUnmounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 无权限\未登录 -->
|
|
|
+ <div class="no-auth-wrap">
|
|
|
+ <div class="opcity-box"></div>
|
|
|
+ <div class="content-box">
|
|
|
+ <img class="icon" src="@/assets/imgs/lock-img.png" alt="" />
|
|
|
+ <template v-if="!isLogin">
|
|
|
+ <div class="text">您尚未登录，请登录后查看</div>
|
|
|
+ <t-button
|
|
|
+ theme="primary"
|
|
|
+ block
|
|
|
+ style="width: 300px; margin: 30px auto"
|
|
|
+ @click="handleGoLogin"
|
|
|
+ >去登陆</t-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 免责声明 -->
|
|
|
<disclaimers-wrap v-model:show="isShowMZSM" />
|
|
|
</template>
|
|
|
@@ -326,51 +342,51 @@ onUnmounted(() => {
|
|
|
line-height: 44px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
- .author-box{
|
|
|
+ .author-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .img-box{
|
|
|
- width:78px;
|
|
|
- height:78px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .img-box {
|
|
|
+ width: 78px;
|
|
|
+ height: 78px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- .author-info{
|
|
|
- margin-left: 30px;
|
|
|
- flex: 1;
|
|
|
- .name{
|
|
|
- /* display: block; */
|
|
|
- display: -webkit-box;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-break: anywhere;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .time{
|
|
|
- margin-top: 10px;
|
|
|
- font-size: var(--font-size-small);
|
|
|
- color: var(--text-color-grey);
|
|
|
- }
|
|
|
+ .author-info {
|
|
|
+ margin-left: 30px;
|
|
|
+ flex: 1;
|
|
|
+ .name {
|
|
|
+ /* display: block; */
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-break: anywhere;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: var(--font-size-small);
|
|
|
+ color: var(--text-color-grey);
|
|
|
+ }
|
|
|
}
|
|
|
- .opt-btn{
|
|
|
- margin-left: auto;
|
|
|
- align-self: flex-start;
|
|
|
- min-width: 140px;
|
|
|
- height: 40px;
|
|
|
- padding:5px 10px;
|
|
|
- border-radius: 8px;
|
|
|
- background-color: var(--primary-color);
|
|
|
- color:var(--text-color-inverse);
|
|
|
- text-align: center;
|
|
|
- &.followed{
|
|
|
- background-color:var(--bg-disabled-color);
|
|
|
- color:var(--text-color-grey);
|
|
|
- }
|
|
|
+ .opt-btn {
|
|
|
+ margin-left: auto;
|
|
|
+ align-self: flex-start;
|
|
|
+ min-width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: var(--text-color-inverse);
|
|
|
+ text-align: center;
|
|
|
+ &.followed {
|
|
|
+ background-color: var(--bg-disabled-color);
|
|
|
+ color: var(--text-color-grey);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.time-box {
|
|
|
@@ -435,25 +451,25 @@ onUnmounted(() => {
|
|
|
display: inline-block !important;
|
|
|
vertical-align: middle !important;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.chapter-item-wrap {
|
|
|
padding: 20px 0;
|
|
|
.chapter-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30px;
|
|
|
+ .type {
|
|
|
+ height: fit-content;
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background-color: #e6a23c;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .chapter-title-text {
|
|
|
font-size: 30px;
|
|
|
- .type {
|
|
|
- height: fit-content;
|
|
|
- display: inline-block;
|
|
|
- color: #fff;
|
|
|
- padding: 10px 20px;
|
|
|
- background-color: #E6A23C;
|
|
|
- border-radius: 8px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .chapter-title-text {
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -463,8 +479,8 @@ onUnmounted(() => {
|
|
|
right: 34px;
|
|
|
bottom: 130px;
|
|
|
//加上这个保证back-top-img不会重复渲染
|
|
|
- transform: translateZ(0);//不知道什么原理
|
|
|
-
|
|
|
+ transform: translateZ(0); //不知道什么原理
|
|
|
+
|
|
|
.item {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
@@ -474,14 +490,15 @@ onUnmounted(() => {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
- .html-head-img-box,.html-end-img-box{
|
|
|
+ .html-head-img-box,
|
|
|
+ .html-end-img-box {
|
|
|
margin-bottom: 10px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- .head-layout-item{
|
|
|
- position: absolute;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box
|
|
|
+ .head-layout-item {
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
