11<template >
22 <div class =" content" >
3+ <div id =" top" ></div >
4+ <van-cell
5+ title =" 上篇"
6+ :value =" prevInfo.articleTitle"
7+ :is-link =" true"
8+ :to =" `/detail/${prevInfo.articleId}`"
9+ class =" custome-cell"
10+ />
311 <div class =" detail-box" >
412 <h2 class =" detail-title van-ellipsis" >
513 <van-tag type =" primary" class =" tag" >{{ articleType }}</van-tag
2836 v-html =" handleDetail"
2937 ></div >
3038 </div >
39+ <van-cell
40+ title =" 下篇"
41+ :value =" nextInfo.articleTitle"
42+ :is-link =" true"
43+ :to =" `/detail/${nextInfo.articleId}`"
44+ class =" custome-cell"
45+ />
46+ <a :href =" toTopUrl" class =" to-top" >
47+ <van-icon name =" upgrade" />
48+ </a >
3149 </div >
3250</template >
3351
@@ -100,12 +118,17 @@ export default {
100118 const html = ` <a href="${ element[1 ]} " target="_blank">${ element[2 ]}${ svg} </a>`
101119 res = res .replace (element[0 ], html)
102120 } else {
103- const html = ` <a href="${ process .env .VUE_APP_router_base }${ this .$route .path }${ element[1 ]} ">${ element[2 ]} </a>`
121+ const html = ` <a href="${ process .env .VUE_APP_router_base }${
122+ this .$route .path
123+ } #${ decodeURI (element[1 ].slice (1 ))} ">${ element[2 ]} </a>`
104124 res = res .replace (element[0 ], html)
105125 }
106126 }
107127 }
108128 return res
129+ },
130+ toTopUrl () {
131+ return ` ${ process .env .VUE_APP_router_base }${ this .$route .path } #top`
109132 }
110133 },
111134 mounted () {
@@ -132,11 +155,50 @@ export default {
132155 this .info .articleStart = result .data .articleStart
133156 }
134157 }
158+ },
159+ head () {
160+ return {
161+ title: ` ${ this .info .articleTitle } | ${ process .env .VUE_APP_title } ` ,
162+ meta: [
163+ {
164+ hid: ' keywords' ,
165+ name: ' keywords' ,
166+ content: ` ${ this .info .articleTitle } | ${ process .env .VUE_APP_keywords } `
167+ },
168+ {
169+ hid: ' description' ,
170+ name: ' description' ,
171+ content: ` ${ this .info .articleTitle } | ${ process .env .VUE_APP_description } `
172+ }
173+ ]
174+ }
135175 }
136176}
137177 </script >
138178
139179<style lang="scss" scoped>
180+ .custome-cell {
181+ /deep / {
182+ .van-cell__title {
183+ flex : 0 0 40px ;
184+ span {
185+ display : block ;
186+ white-space : nowrap ;
187+ text-overflow : ellipsis ;
188+ overflow : hidden ;
189+ }
190+ }
191+ .van-cell__value {
192+ flex : auto ;
193+ span {
194+ display : block ;
195+ white-space : nowrap ;
196+ text-overflow : ellipsis ;
197+ overflow : hidden ;
198+ }
199+ }
200+ }
201+ }
140202.detail-box {
141203 margin : 15px 0 ;
142204 padding : 0 15px ;
@@ -163,7 +225,7 @@ export default {
163225 height : 30px ;
164226 font-size : 14px ;
165227 padding : 0 8px ;
166- background-color : #fff ;
228+ background-color : rgba ( 255 , 255 , 255 , 0.8 ) ;
167229 border : 1px solid #dedede ;
168230 border-right : 0 ;
169231 border-radius : 15px 0 0 15px ;
@@ -284,4 +346,18 @@ export default {
284346 }
285347 }
286348}
349+ .to-top {
350+ position : fixed ;
351+ right : 15px ;
352+ bottom : 65px ;
353+ z-index : 1100 ;
354+ width : 40px ;
355+ height : 40px ;
356+ text-align : center ;
357+ line-height : 40px ;
358+ color : #333 ;
359+ background-color : rgba (255 , 255 , 255 , 0.8 );
360+ border : 1px solid #dedede ;
361+ border-radius : 20px ;
362+ }
287363 </style >
0 commit comments