mwx816443
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
|
||||
<div class="article-heading">
|
||||
<div class="article-heading-title">
|
||||
<div class="article__heading">
|
||||
<div class="article__heading__title">
|
||||
{{ article.title }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,57 +44,57 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
@mixin clearfix {
|
||||
&::before {
|
||||
clear: both;
|
||||
content: '';
|
||||
&:before {
|
||||
display: table;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
content: '';
|
||||
&:after {
|
||||
display: table;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.main-article {
|
||||
background: #fff;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 740px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.article-heading {
|
||||
overflow: hidden;
|
||||
padding: 0 0 20px;
|
||||
.article__heading {
|
||||
position: relative;
|
||||
padding: 0 0 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-heading-title {
|
||||
-webkit-box-orient: vertical;
|
||||
color: #333;
|
||||
.article__heading__title {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
line-height: 48px;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.node-article-content {
|
||||
margin: 20px 0 0;
|
||||
@include clearfix;
|
||||
color: #333;
|
||||
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 28px;
|
||||
margin: 20px 0 0;
|
||||
margin-bottom: 30px;
|
||||
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
|
||||
&> :last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -107,17 +107,17 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 21px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.003em;
|
||||
font-style: normal;
|
||||
font-size: 21px;
|
||||
line-height: 1.58;
|
||||
letter-spacing: -.003em;
|
||||
|
||||
}
|
||||
|
||||
@@ -128,32 +128,32 @@ export default {
|
||||
li {
|
||||
--x-height-multiplier: 0.375;
|
||||
--baseline-multiplier: 0.17;
|
||||
font-size: 21px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
letter-spacing: 0.01rem;
|
||||
letter-spacing: -0.003em;
|
||||
letter-spacing: .01rem;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 21px;
|
||||
line-height: 1.58;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: -.003em;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0);
|
||||
background-position: 0 calc(1em + 1px);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1px 1px;
|
||||
padding: 0 6px;
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
|
||||
background-size: 1px 1px;
|
||||
background-position: 0 calc(1em + 1px);
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
code {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 0 2px;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
padding: 3px 4px;
|
||||
margin: 0 2px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -168,17 +168,17 @@ export default {
|
||||
blockquote {
|
||||
--x-height-multiplier: 0.375;
|
||||
--baseline-multiplier: 0.17;
|
||||
border-left: 3px solid rgba(0, 0, 0, 0.84);
|
||||
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
font-size: 21px;
|
||||
font-style: italic;
|
||||
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
letter-spacing: .01rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01rem;
|
||||
letter-spacing: -0.003em;
|
||||
font-style: italic;
|
||||
font-size: 21px;
|
||||
line-height: 1.58;
|
||||
letter-spacing: -.003em;
|
||||
border-left: 3px solid rgba(0, 0, 0, .84);
|
||||
padding-left: 20px;
|
||||
margin-left: -23px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -189,8 +189,8 @@ export default {
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 34px;
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -.015em;
|
||||
margin: 53px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<aside style="margin-top: 15px;">
|
||||
<aside style="margin-top:15px;">
|
||||
Here we use window.print() to implement the feature of downloading PDF.
|
||||
</aside>
|
||||
<router-link target="_blank" to="/pdf/download">
|
||||
|
||||
Reference in New Issue
Block a user