Skip to content

O
office-web-js
Commit fb427545 by qinjianhui
Options

feat: 文章详情

parent f1d1a8be
Showing with 231 additions and 7 deletions
package-lock.json
......@@ -3685,6 +3685,11 @@
"domelementtype": "^2.2.0"
}
},
"dompurify": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
"integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
},
"domutils": {
"version": "2.8.0",
"resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
......
package.json
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.8.3",
"dompurify": "^2.4.3",
"element-ui": "^2.15.12",
"swiper": "^5.2.0",
"vue": "^2.6.14",
......
src/components/ToTopButton.vue
......@@ -3,7 +3,7 @@
<a
v-show="showing"
href="javascript:;"
class="to-top icon-top-gray"
class="to-top icon-top-bg-gray"
@click="toTop"
></a>
</Transition>
......
src/main.js
......@@ -11,9 +11,16 @@ Vue.config.productionTip = false
Vue.use(ElementUI)
const title = document.title
Vue.prototype.$setTitle = (t) => {
if (!title) {
document.title = title
} else {
document.title = `${t} - ${title}`
}
}
router.afterEach((to) => {
if (to.meta?.title) {
document.title = `${to.meta.title} - ${title}`
Vue.prototype.$setTitle(to.meta.title)
}
})
......
src/router/index.js
......@@ -9,11 +9,12 @@ import JoinUsPage from '@/views/Home/JoinUsPage.vue'
import SupplierApplyPage from '@/views/Home/SupplierApplyPage.vue'
import SupplierReportPage from '@/views/Home/SupplierReportPage.vue'
import ContactPage from '@/views/Home/ContactPage.vue'
import ArticlePage from '@/views/Home/ArticlePage.vue'
Vue.use(VueRouter)
/**
* @type {import('vue-router').RouteConfig}
* @type {import('vue-router').RouteConfig[]}
*/
const routes = [
{
......@@ -68,6 +69,13 @@ const routes = [
component: ContactPage,
meta: { title: '联系我们' },
},
{
path: '/article/:id',
name: 'ArticlePage',
component: ArticlePage,
props: true,
meta: { title: '文章' },
},
],
},
]
......
src/styles/icon.scss
......@@ -13,7 +13,17 @@
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAbCAYAAABiFp9rAAAAAXNSR0IArs4c6QAAAexJREFUSA1jZCARPJ9kq/Xnz98p/xkZrIBa3zEyMCySkZauYwxb/QufUSz4JNHlns305fr97e0eBob/kgz/wbKSQKr8ydOnIE4FunpkPhMyhxD77/d3kQz//0uyCSsySEdMZRBxzAdrAVoWR0gvSRYBLQEbyK1qz8DEysnAKaMPMR9oOdUsejbFSh4YZLYMzCwMXPImhMzFkCfaR/9+M8T8/8/AyCmtz8DExoVhECEBoi0CxkMsyDAuJUtCZmKVJ8qixxNszP///6/OxMbNwCmth9UgQoIELXreZ63N8P/vLJBBXMpWDIxMJOUIuP0sj/osgaGCG/xm+AdMAwwMzFyCDHw63jgVopjDyPgcqOkMy3+mbqmio4dBmgj6iImdh4FLwZxBzKOKgZmDD6dFKBKg5P6fwfcvw78DT/qsq0ByjDCXyMbOQ1H7eHESmI8ujqIIB+fvtw8MX+8fY/h4YQMD478//5gZmBwI+giHWXiFmbkEGPi0vRj4DQJAoc70h/FfKU0sgrmCWxFU7oIAowlNLQL5DAyAcUZTiyC2QMhRi5BDgyT2aNCRFFzIimkadKCiCAyAhSxNLQKVdxAALMmhLKpSKIUqA8M/ZmB1AS+9qWoT1DBg4/IfIwNTrUzR0Taa+IgBWvGBfAKr+AAgLYr8RyyZ+gAAAABJRU5ErkJggg==);
}
.icon-top-gray {
.icon-top-bg-gray {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAABB1JREFUeAHtmv1LU2EUx91aIoIrc1NrRpsz86XlmLGZKCKCivoH+kcI/tAviiI6zU0cw60yM6emaTpr64XAci+dM3pEBnL3nG33XuM8IM99Od/nPudzvvd1GiYnJ19WcJMmYJRWsCBHgMERjcDgGByRAFHGjmNwRAJEGTuOwREJEGXsOAZHJECUseMYHJEAUcaOY3BEAkQZO47BEQkQZew4BkckQJSZiDpFWX9//5OWlhanwWDQ1NXZbDazs7MTW15efq84aYmAsiXldDodWkNDDjgHnIsEk4JCywYuFovtYbULmkUZg3AOOJdSH8LAv3LRkJbNcbTp3BwVgyPWisExOCIBoky3jmtvb29obm6+R8yr7LKyPQAXM/ORkZEum832EMewWq1v1tbW9osZrxxa3TnO5/M5BTRMuLOzs6Otra2hHMkXM6auwPX19bUCqPa8hIy9vb3dLpfLlrdd01XdgBsYGOhohXYNDaPX63V7PJ5H1+xXfbMuwA0NDbngfbJZZH9ycnIslhOJxFdchlcng9vtduGpLPZp2WsKzmg0VgwPD3c9goYQ4IU8Gw6HXx8fH38RUPb39492d3djYh1PZfzyIta16jUDB9AMo6OjnqamptzdEwBk19fXIxsbGx/zYSwuLr7b2tq6/Cz0GNrg4ODT/Dg11zUBZzKZjGNjY88bGxsf/Es2EwwGw9Fo9NN1ya+urn6A/W/RlRjjcDjs6FZ0rRZN9aNWVlbeGh8f99bX1+ceMeDalV5ZWQltbm5+VgIQCoX24C8KcTl46FZwbTcUwqCkLfV+VcFVVVWZAJqvrq7OgolkMpn00tLS+vb2drzQxCKRyCG6E+WoAdfeB/d6oSCq5qLawaqrq29PTEz01NbW5l6j0un0xcLCQhAu/Jc3gkLhoTv9fn8IwaPGYrFYoSA9WJhCxyg2ThVweE2DxF6Yzea7OOFUKvVnfn4+eHBwkKQmAL8jxOGmsQYFSOEYWBA8hlqnrSrg4EJuqampMWOCFxcXv+fm5gJHR0ffcb2YBo8qCShAAAuB49yBZrfbrcWMWahWFWsfHh4mkslk7kEWbgTRs7OzX4VOUCkOCzA7OxuAZ7tncKOpgHWyi5WOdXW/KuDOz89T09PTgasHLuXy6enpz6mpqVelHFNpLFVOVaVJ3MT9DI5YNQbH4IgEiDJ2HIMjEiDK2HEMjkiAKGPHMTgiAaKMHcfgiASIMnYcgyMSIMrYcQyOSIAoY8f9T+Di8fg3kc/VZbFND70qn85lE4X/HfkxMzPjRx0uy+rViNclOD0DE0Xha5wgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKSPYOTBCbCGZwgIdkzOElgIpzBCRKS/V/i3SHk3MapJwAAAABJRU5ErkJggg==);
}
.icon-thumb-bg-gray {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAABRVJREFUeAHtm+tOakcUxxUFPSICEqFWj0XjpR9IT9KkVRtNjNHoN308H8IYTR/AWKvGJo2pMa0x3uHoqejRilxEkP6HdvbZEkRYbLYTWZPgXBcz83PNbc1QOzc393MNu5IJWEqWYIEsAQZHVAQGx+CIBIhirHEMjkiAKMYax+CIBIhirHEMjkiAKMYax+CIBIhirHEMjkiAKMYaRwRXT5QzTcxisdQEAoFOn8/nsdvt7+7u7uKXl5fXOzs7wVQqlTGtITkVKQ2uubnZOj09PdTS0uKU7W5tba3p6up639fX519eXv4dEKMyz0xf6aE6OTn5gx6aHozD4WgZGxv7HhpZq083K6wsOL/f73G73a0SRDwej4VCoeA/cDJNQMUw7pBxM31lh+rAwECXBBGLxe7m5+d/wZz2KNJmZ2eHMWQ9ItzW1uaGFxJhM52SGmez2Szt7e0+CeLk5CQkoYk0zGtXMg/zoF2GzfSVBIeJ/yvMXdpo2NvbO9NDeXzMKl42qRZOn2dWWElw3d3d2rx1e3t7c3V1FTMLSLH1KAeuqanJ6vV622QHTk9PP8qwSr5y4Pr7+9sBSLYrs7u7e64SMNkW2UAZf3Uf2xBtmH6Gw1BNvHqj8jRAKXDYlzVim6Ht3Y6Pj5UcpoKjUuCwd/sabZKr5OP+/r6Sw1Q5cFhN34tGCYe9WhgH+of/Yur9VUbjRkZG+rGZdUhE0DbTTwOy7mJ8bZNZTOGXyvT29nphufC+VE6fj/2rxePxuACtRaZD0yLFrqYwNdnHx8cDUvZ/P4OzbfLm5iZycHAQTiaT6Zz8sqOGgsP+y4VV0V9Oq3AqSG1sbGzrTweFvq+hoaGxUJ2Dg4NpwDvc3NzcNxKgMkNVwLm/v4/DxvZbMBi8LgSrlDwc3epwhOubmZn5SazapcgWKmuoxukrSqfTqWg0GtGnyTBGl6Ouri5btzAXiUN7OBwWVt0nh3lZPteHTBz7u2fhZjIZC+x1dv15F3Hn1NTUj0tLS79C874cdnO/vMh4xcAJu9ni4uJGvnbozULC8rG+vr6Xr9xzaVtbW0HxeS5fpANaTWdnp3toaOg7uegI4+fw8PC3KysrfxaSLSZPqaFaTIOLLSPmSJxzrxcWFlbxP/ws5Xp6er4BSJuMU/03C04CEXa81dXVPzB8s8MTq7iY8zRbnyxXqv/mwQkgFxcXUWxNtDkR2x/tWFcqMFm+KsCJzgLcrew0TFcNMkz1qwYctjra8U1sUajApFzVgJMdNspncESSDI7BEQkQxVjjGByRAFGMNY7BEQkQxVjjGByRAFGMNY7BEQkQxapG4+rr67WDPYycZZvOqwacy+XSrh8TicQ9UdE0saoAh7sGG94TiyevWYe3PNo7YplWql8V4EZHRwPyVg2AMoeHh3+XCiq3fMVuuXIreo24uJTBk/4PuCjX7hjOzs4+QuPKfuFZMXDiXnNiYuJDPmAiT6Z3dHT4UO6djBvhw8JbizocTqdTvEXRRhWswIm1tbW/jKijYuCsVmuj+AXMS40U/ROfl8qVm//w8JAQrwQikUjZC4NoS8XAldtRI+U/weHSewcXNoa97jQUHF4ZxTB/aL9BMLLzJX5XBluOJJ5JRI6Ojj6dn5/nfYpR4nc+KW4ouO3t7ZD4PKnhjUa0ifON9q9i3WJwRLQMjsERCRDFWOMYHJEAUYw1jsERCRDFWOMYHJEAUYw1jsERCRDFWOMYHJEAUYw1jgjuX/CCg3LROa+dAAAAAElFTkSuQmCC);
}
.icon-thumb-gold-bg-gray {
background-size: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAYAAACOqiAdAAAAAXNSR0IArs4c6QAABTRJREFUeAHtm3lPG0cUwGdm18dibGNcc5Qj0Cq0TZ2mimhC2kbNF2hV9dPxPdI/qlaqlBApEVLUNqSlIkkDNYcDBd/37kxnnMyyIMD2Y21WeFYyb473dp5/vNmdy3hxcfE+UlfHBEjHFsqgSUCBAwaCAqfAAQkAzVTEKXBAAkAzFXEKHJAA0ExFnAIHJAA0UxGnwAEJAM1UxClwQAJAMxVxQHA60K5nZgQxNGuuTsZoOm7QslFBA5Ws/l5m3ZdMmYywnjlyrCFPgzNQxXe78tPCAMtHpd9htI9G6qmpKfPlzFP/vad5MlySdb2Unu6q89Wfv3BCc4IxaCFys/bgJsEUO8t7lfYsuDFrIx6m2WEJok6M8p4+mSrhcE6WCaizjb8nZL6X0rNddbqxNi1B1MhA8UHwh4cm0qgou1u9fydMD+IiHaG7MYSubYp0Ly9PRpyOTBKnb0YliLQ2vSmhibKsltiXdSFaDMl0L6UnwU2aL8YwsuzekNLntp1QnK9SjJh6xkk449a6/dwqkkg2j2NlWecV6bmIC6CqL0b3EhLQf/qVLZn2kvQcuGlzbRwxJv1i69rVHS8Bk75IB2X+wuWYuWF30wIZPijjcPXCnTrBAU+BG2CFIB9m2GO3tEe7qeDoKXC8m77PfXr3lsR0U5/zZDf1HLhxa2NKOCWunJbYq6Bg423Oe389E3HXG0/m+PwzLBFtaR/0fDYg225H2oPMdpRb6UyYr0ZGrc2RVnrOej7QJVGWHQrySbssr5Bw4V//RzuoOcGSpSfLAC2F+GQ/eaQWY1ZDgXpRixW2ycxeA/utI/UuZFwFF2N7Q2PW+sx5/GJIM//033pG24Am2vGjWvDUNk0+i8XL1pb+4T+r/vmXDeZzDaBnuqqA0MDBym+Bb5Z3yWRG5N24MLO0ycba1a+rP34p3tpu3FPcw9WIczpFkW5WSKjgLJNpg5bCBJnNtsVyUZbE93MkkXmtf3pkMi/1j8saHqyUSPR0uIySAVYOOee7hpWP3q79cmsp+N0jE+ltxvPxlg/zXQNXIpHcUvDbx4dNHaacy0Ji5eO5b2HtsLZ16oWeTInPWZpiyX2EbsU+qT35zGCl5ktHLH5eqz3++Fng7l9n2bZT56mu2o7D7epQPhxM8y6/ZHy/VCSxA2k3QTeuGKjkl3movLTgJBDRLVeCX/3BEG52z+Yzz3xtr/VJvU7lpQcngGRQvMSHJvYzMWru2tO6ToFJ/b4AJ75sEQ/l5ZfmS1cBmYbKvgHXwD57+kaQpUGBSbu+ASe/sFtSgQOSVOAUOCABoJmKOAUOSABopiJOgQMSAJqpiFPggASAZiriFDggAaBZ30ScxvceJCPr3dqczENk34AL0Yy9/WgSowaB5bTpC3AhVPZHaI4feX178fN29jliWdap7Atw1+uPknJXjQNi29rsm05BHdfv2i7X8YYuIi82ZT6vPrwRo7v2HsO+PrGVJ+c/4dk1cNzp0Hz11xsnARN1sjxBd0a5niHzbkhCGDasXDiEimHHIUVUR4Hqim9h1Y02ugZOp7XgCErZp49Oc1ZsFBvo8Jczp+l1VH7CdrNJAtXfA/eWy3jw3C8G4UvXwHX0RbusnNHG0iv+O8+LOOLa6U5XwVXwYJkfP7V/g9BlHmfcnp9Wwv56WRsq8BdB+gAnTjyKccYNWla5Cu6VntwUn5atXgKFvhiOdOP/pMABqSpwChyQANBMRZwCByQANFMRp8ABCQDNVMQpcEACQDMVcQockADQTEWcAgckADRTEQcE9z9gH3lSlhK6vQAAAABJRU5ErkJggg==);
}
\ No newline at end of file
src/views/Home/ArticlePage.vue 0 → 100644
<template>
<article class="article-page">
<a href="javascript:;" class="back-button" @click="$router.back()"
>&lt; 返回{{ fromTitle }}</a
>
<template v-if="article">
<h2 class="article-title">{{ article.title }}</h2>
<div class="article-meta">
<span class="article-time">{{ article.createdAt }}</span>
</div>
<div class="article-content" v-html="content"></div>
<a
class="article-like-button"
:class="
article.liked ? 'icon-thumb-gold-bg-gray' : 'icon-thumb-bg-gray'
"
href="javascript:;"
></a>
</template>
</article>
</template>
<script>
import Img1 from '@/assets/article/1.png'
import Img2 from '@/assets/article/2.png'
import Img3 from '@/assets/article/3.png'
import { sanitize } from 'dompurify'
export default {
name: 'ArticlePage',
props: {
id: {
type: String,
required: true,
},
},
data() {
return {
from: '',
article: {
title: '2023晶闪科技春季校园招聘正式启动',
content: `<p style="text-align: center;"><img src="${Img1}" style="width: 520px"></p><p style="text-align: center;"><img src="${Img2}" style="width: 520px"></p><p style="text-align: center;"><img src="${Img3}" style="width: 520px"></p>`,
createdAt: '2023-01-01 12:34:56',
liked: Math.random() > 0.5,
},
}
},
computed: {
fromTitle() {
if (!this.from) return
const matched = this.$router.resolve({ name: this.from }).route
return matched.meta?.title
},
content() {
return sanitize(this.article?.content || '')
},
},
beforeRouteUpdate(to, from, next) {
this.init()
next()
},
created() {
this.init()
},
methods: {
init() {
this.from = this.$route.query.from
this.loadArticle()
},
async loadArticle() {},
},
}
</script>
<style lang="scss" scoped>
.article-page {
padding: 40px 0;
width: 940px;
margin: 0 auto;
}
.back-button {
color: #000;
text-decoration: none;
cursor: pointer;
font-size: 16px;
}
.article-title {
text-align: center;
font-size: 30px;
color: #323232;
font-weight: normal;
margin: 40px 0 20px;
padding-bottom: 20px;
position: relative;
&::after {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
content: '';
display: block;
width: 50px;
height: 2px;
background-color: #e28e39;
}
}
.article-meta {
text-align: center;
font-size: 14px;
color: #999;
}
.article-like-button {
position: fixed;
bottom: calc(10vh + 70px);
right: 10vw;
z-index: 9999;
display: block;
width: 50px;
height: 50px;
opacity: 0.8;
}
.article-content::v-deep {
margin-top: 40px;
overflow: hidden;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei,
Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
line-height: 1.35;
margin-top: 1.2em;
margin-bottom: 0.6em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
p {
margin: 0;
line-height: 1.5;
margin-bottom: 16px;
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei,
Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
img {
max-width: 100%;
}
}
</style>
src/views/Home/ColorfulPage.vue
......@@ -29,7 +29,11 @@
<h4 class="article-title">{{ a.title }}</h4>
<div class="article-brief">
{{ a.brief }}
<a class="article-link" href="javascript:;">查看全文 +</a>
<router-link
class="article-link"
:to="`/article/${a.id}?from=ColorfulPage`"
>查看全文 +</router-link
>
</div>
<div class="article-meta">
<span class="article-time">{{ a.createdAt }}</span>
......@@ -66,6 +70,7 @@ export default {
articles: [
{
id: 1,
categories: ['big-event'],
img: ImgArticle1,
title: '2023晶闪科技春季校园招聘正式启动',
......@@ -75,6 +80,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 2,
categories: ['big-event'],
img: ImgArticle2,
title: '携手并进·筑梦未来丨2023年晶闪科技供应商大会',
......@@ -85,6 +91,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 3,
categories: ['big-event', 'employee-activity'],
img: ImgArticle3,
title: '万圣节 | 冲刺月前夕的动员狂欢',
......@@ -95,6 +102,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 4,
categories: ['big-event'],
img: ImgArticle4,
title: '速报 | NC荣获2020年BrandZ中国最具潜力全球化品牌15强',
......@@ -104,6 +112,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 5,
categories: ['employee-activity'],
img: ImgArticle5,
title: 'CEO私房话 | 第二期-产研小哥的爱恨情仇',
......@@ -113,6 +122,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 6,
categories: ['employee-activity'],
img: ImgArticle6,
title: '感恩节 | “感谢大声说出口”留言征集活动',
......@@ -122,6 +132,7 @@ export default {
liked: Math.random() > 0.5,
},
{
id: 7,
categories: ['employee-activity'],
img: ImgArticle7,
title: '生日会 | 7月生辰 快哉乐哉',
......
src/views/Home/IndexPage.vue
......@@ -67,8 +67,11 @@
<h4 class="news-title">{{ n.title }}</h4>
<div class="news-brief hover-hl-hidden">{{ n.brief }}</div>
<a class="news-link hover-hl-hidden" href="javascript:;"
>查看全文 +</a
<router-link
class="news-link hover-hl-hidden"
href="javascript:;"
:to="`/article/123?from=IndexPage`"
>查看全文 +</router-link
>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment