🎨 替换图标为 svg
This commit is contained in:
ronger
parent
08ae978670
commit
b9cfc98ef2
@ -7,7 +7,10 @@
|
||||
<el-link :href="article.articleLink" style="margin-bottom: .5rem;">
|
||||
<h4>
|
||||
<span v-if="isPerfect(article.articlePerfect)" style="color: gold;" title="优选">
|
||||
<font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: #FFB71B;"><path
|
||||
d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
|
||||
d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
|
||||
</span>
|
||||
<span v-html="article.articleTitle"></span>
|
||||
</h4>
|
||||
@ -30,7 +33,7 @@
|
||||
</el-col>
|
||||
<el-col :xs="16" :sm="16" :xl="16">
|
||||
<div>
|
||||
<el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
|
||||
<el-link target="_blank" :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
|
||||
{{ article.articleAuthorName }}
|
||||
</el-link>
|
||||
<small class="d-block text-muted">{{ article.timeAgo }}</small>
|
||||
|
||||
@ -37,10 +37,27 @@
|
||||
trigger="click"
|
||||
v-model="showPopover"
|
||||
@show="handleShowPopover">
|
||||
<el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync" placeholder="搜索文章,作品集,用户">
|
||||
<el-button slot="append" icon="el-icon-search" @click="querySearchAsync"></el-button>
|
||||
<el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
|
||||
placeholder="搜索文章,作品集,用户">
|
||||
<el-button slot="append" @click="querySearchAsync">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
|
||||
<path
|
||||
d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
|
||||
</svg>
|
||||
</el-button>
|
||||
</el-input>
|
||||
<el-button slot="reference" icon="el-icon-search" circle size="small"></el-button>
|
||||
<el-button slot="reference" circle size="small">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
|
||||
<path
|
||||
d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
|
||||
</svg>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;"
|
||||
href="/portfolio/post">创建作品集
|
||||
@ -51,7 +68,13 @@
|
||||
<el-link rel="nofollow" :underline="false" style="padding-left: 10px;padding-right: 10px;">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-badge :value="notificationNumbers" class="item">
|
||||
<el-link rel="nofollow" :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
|
||||
<el-link rel="nofollow" :underline="false" style="font-size: 1.4rem;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path>
|
||||
</svg>
|
||||
</el-link>
|
||||
</el-badge>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
|
||||
@ -93,10 +116,27 @@
|
||||
trigger="click"
|
||||
v-model="showPopover"
|
||||
@show="handleShowPopover">
|
||||
<el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync" placeholder="搜索文章,作品集,用户">
|
||||
<el-button slot="append" icon="el-icon-search" @click="querySearchAsync"></el-button>
|
||||
<el-input name="searchInput" v-model="queryString" @keyup.enter.native="querySearchAsync"
|
||||
placeholder="搜索文章,作品集,用户">
|
||||
<el-button slot="append" @click="querySearchAsync">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
|
||||
<path
|
||||
d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
|
||||
</svg>
|
||||
</el-button>
|
||||
</el-input>
|
||||
<el-button slot="reference" icon="el-icon-search" circle size="small"></el-button>
|
||||
<el-button slot="reference" circle size="small">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
|
||||
<path
|
||||
d="M11.412 8.586c.379.38.588.882.588 1.414h2a3.977 3.977 0 0 0-1.174-2.828c-1.514-1.512-4.139-1.512-5.652 0l1.412 1.416c.76-.758 2.07-.756 2.826-.002z"></path>
|
||||
</svg>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<nuxt-link to="/login">
|
||||
<el-link rel="nofollow" :underline="false" style="margin-left: 10px;">登录</el-link>
|
||||
|
||||
@ -47,7 +47,6 @@ export default {
|
||||
*/
|
||||
css: [
|
||||
'element-ui/lib/theme-chalk/index.css',
|
||||
'@fortawesome/fontawesome-svg-core/styles.css'
|
||||
],
|
||||
/*
|
||||
** Plugins to load before mounting the App
|
||||
@ -59,7 +58,6 @@ export default {
|
||||
{src: '~/plugins/axios'},
|
||||
{src: '~/plugins/element-ui'},
|
||||
{src: '~/plugins/vditor', ssr: false},
|
||||
{src: '~/plugins/fontawesome'},
|
||||
// {src: '~/plugins/vue-cropper', ssr: false}
|
||||
],
|
||||
/*
|
||||
|
||||
12955
package-lock.json
generated
12955
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,11 +11,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@chenfengyuan/vue-qrcode": "^1.0.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.2",
|
||||
"@nuxtjs/axios": "^5.13.1",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"cookieparser": "^0.1.0",
|
||||
@ -27,6 +22,7 @@
|
||||
"nuxt": "^2.15.3",
|
||||
"raw-loader": "^4.0.2",
|
||||
"save-svg-as-png": "^1.4.17",
|
||||
"simple-icons": "^5.8.0",
|
||||
"sockjs-client": "^1.5.0",
|
||||
"stompjs": "^2.3.3",
|
||||
"vditor": "^3.8.4",
|
||||
|
||||
@ -6,7 +6,10 @@
|
||||
<div class="article__item">
|
||||
<h1 class="list__title">
|
||||
<span v-if="isPerfect" style="color: gold;" title="优选">
|
||||
<font-awesome-icon :icon="['fas', 'medal']"></font-awesome-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
|
||||
style="fill: #FFB71B;"><path
|
||||
d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
|
||||
d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
|
||||
</span>
|
||||
{{ article.articleTitle }}
|
||||
</h1>
|
||||
@ -17,7 +20,8 @@
|
||||
</el-col>
|
||||
<el-col :xs="9" :sm="11" :xl="11">
|
||||
<div style="margin-left: 1rem;">
|
||||
<el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">{{ article.articleAuthorName }}
|
||||
<el-link :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
|
||||
{{ article.articleAuthorName }}
|
||||
</el-link>
|
||||
<small class="d-block text-muted">{{ article.timeAgo }}</small>
|
||||
</div>
|
||||
@ -73,14 +77,24 @@
|
||||
<portfolios-widget :portfolios="article.portfolios"></portfolios-widget>
|
||||
</el-col>
|
||||
<el-col v-if="user">
|
||||
<el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
|
||||
<el-tooltip class="item" effect="dark" content="酷" placement="top-start">
|
||||
<el-button type="text" style="font-size: 1.2rem;" @click="thumbsUp">
|
||||
<font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);">
|
||||
<path
|
||||
d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858 4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62 5.963 5.963 0 0 0 2.148.903 6.035 6.035 0 0 0 3.542-.35 6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z"></path>
|
||||
<path
|
||||
d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8 0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2 0 4.411-3.589 8-8 8z"></path>
|
||||
</svg>
|
||||
{{ article.articleThumbsUpCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
|
||||
<el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
|
||||
<el-button v-if="user.idUser === article.articleAuthorId" type="text" icon="el-icon-coffee"
|
||||
style="font-size: 1.2rem;">
|
||||
<svg width="24" height="24">
|
||||
<path :d="buymeacoffee.path"></path>
|
||||
</svg>
|
||||
{{ article.articleSponsorCount }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
@ -95,14 +109,23 @@
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col v-else>
|
||||
<el-tooltip class="item" effect="dark" content="点赞" placement="top-start">
|
||||
<el-tooltip class="item" effect="dark" content="酷" placement="top-start">
|
||||
<el-button type="text" style="font-size: 1.2rem;">
|
||||
<font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
|
||||
<path
|
||||
d="M14.683 14.828a4.055 4.055 0 0 1-1.272.858 4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62 5.963 5.963 0 0 0 2.148.903 6.035 6.035 0 0 0 3.542-.35 6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z"></path>
|
||||
<path
|
||||
d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8 0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2 0 4.411-3.589 8-8 8z"></path>
|
||||
</svg>
|
||||
{{ article.articleThumbsUpCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="赞赏" placement="top-start">
|
||||
<el-button type="text" icon="el-icon-coffee" style="font-size: 1.2rem;">
|
||||
<el-button type="text" style="font-size: 1.2rem;">
|
||||
<svg width="24" height="24">
|
||||
<path :d="buymeacoffee.path"></path>
|
||||
</svg>
|
||||
{{ article.articleSponsorCount }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
@ -134,6 +157,7 @@ import ShareBox from '~/components/widget/share';
|
||||
import PortfoliosWidget from '~/components/widget/portfolios';
|
||||
import EditTags from '~/components/widget/tags';
|
||||
import 'vditor/dist/css/content-theme/light.css';
|
||||
import {buymeacoffee} from "simple-icons"
|
||||
|
||||
export default {
|
||||
name: "ArticleDetail",
|
||||
@ -218,6 +242,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buymeacoffee,
|
||||
loading: false,
|
||||
isShare: false,
|
||||
dialogVisible: false,
|
||||
|
||||
@ -14,21 +14,35 @@
|
||||
<div v-if="userExtend" style="margin-bottom: 1rem;">
|
||||
<el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog"
|
||||
target="_blank">
|
||||
<font-awesome-icon :icon="['fas', 'link']"></font-awesome-icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z"></path><path d="m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z"></path></svg>
|
||||
</el-link>
|
||||
<el-link v-if="userExtend.github" class="user-link" title="github" :underline="false"
|
||||
:href="'https://github.com/' + userExtend.github" target="_blank">
|
||||
<font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
|
||||
<svg width="24" height="24">
|
||||
<g :fill="'#' + github.hex">
|
||||
<path :d="github.path"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</el-link>
|
||||
<el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false"
|
||||
:href="'https://weibo.com/n/' + userExtend.weibo" target="_blank">
|
||||
<font-awesome-icon :icon="['fab', 'weibo']"></font-awesome-icon>
|
||||
<svg width="24" height="24">
|
||||
<g :fill="'#' + sinaweibo.hex">
|
||||
<path :d="sinaweibo.path"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</el-link>
|
||||
<el-link v-if="userExtend.weixin" class="user-link" title="微信" :underline="false" :href="userExtend.weixin">
|
||||
<font-awesome-icon :icon="['fab', 'weixin']" target="_blank"></font-awesome-icon>
|
||||
<svg width="24" height="24">
|
||||
<g :fill="'#' + wechat.hex">
|
||||
<path :d="wechat.path"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</el-link>
|
||||
<el-link v-if="userExtend.qq" class="user-link" title="QQ" :underline="false" :href="userExtend.qq">
|
||||
<font-awesome-icon :icon="['fab', 'qq']" target="_blank"></font-awesome-icon>
|
||||
<svg width="24" height="24">
|
||||
<path :d="tencentqq.path"></path>
|
||||
</svg>
|
||||
</el-link>
|
||||
</div>
|
||||
<div v-if="oauth">
|
||||
@ -84,6 +98,7 @@ import isoMetropolis from "~/static/banner/isometropolis.jpg"
|
||||
import naranjas from "~/static/banner/naranjas.png"
|
||||
import retroFurnish from "~/static/banner/retro-furnish.png"
|
||||
import science from "~/static/banner/science.png"
|
||||
import {github, sinaweibo, wechat, tencentqq} from "simple-icons";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
@ -150,6 +165,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
github,
|
||||
sinaweibo,
|
||||
wechat,
|
||||
tencentqq,
|
||||
activeTab: this.$route.query.tab || '0',
|
||||
isFollow: false,
|
||||
backgroundImage: designTools,
|
||||
@ -378,5 +397,7 @@ h3, .h3 {
|
||||
.user-link {
|
||||
font-size: 24px;
|
||||
margin: 0 0.5rem;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { library, config } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
import { far } from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
// This is important, we are going to let Nuxt.js worry about the CSS
|
||||
config.autoAddCss = false
|
||||
|
||||
// You can add your icons directly in this plugin. See other examples for how you
|
||||
// can add other styles or just individual icons.
|
||||
library.add(fas)
|
||||
library.add(fab)
|
||||
library.add(far)
|
||||
|
||||
// Register the component globally
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
Loading…
Reference in New Issue
Block a user