💄 优化手机端体验
This commit is contained in:
x ronger
parent
f27757d677
commit
f5f1175079
@ -23,7 +23,7 @@
|
||||
<el-avatar v-else size="medium"
|
||||
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
|
||||
</el-col>
|
||||
<el-col :xs="20" :sm="20" :xl="20">
|
||||
<el-col :xs="16" :sm="16" :xl="16">
|
||||
<div>
|
||||
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default">
|
||||
{{ article.articleAuthorName }}
|
||||
|
||||
@ -6,18 +6,7 @@
|
||||
<el-col :xs="9" :sm="11" :xl="11">
|
||||
<el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
|
||||
v-html="notification.dataSummary"></el-link>
|
||||
<el-col>{{ notification.createdTime }}</el-col>
|
||||
</el-col>
|
||||
<el-col :xs="3" :sm="1" :xl="1" class="mr-3">
|
||||
<el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
|
||||
<i class="el-icon-check"></i>
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-else-if="notification.dataType == 1">
|
||||
<el-col :xs="9" :sm="11" :xl="11">
|
||||
<el-link :underline="false" style="font-size: 1.1em;" v-html="notification.dataSummary"></el-link>
|
||||
<el-col>{{ notification.createdTime }}</el-col>
|
||||
<el-col style="font-size: 12px;color: #7f828b;">{{ notification.createdTime }}</el-col>
|
||||
</el-col>
|
||||
<el-col :xs="3" :sm="1" :xl="1" class="mr-3">
|
||||
<el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
|
||||
@ -26,14 +15,26 @@
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-else>
|
||||
<el-col :xs="20" :sm="20" :xl="20">
|
||||
<el-link :underline="false" style="font-size: 1.1em;" v-html="notification.dataSummary"></el-link>
|
||||
<el-col>{{ notification.createdTime }}</el-col>
|
||||
<el-col :xs="4" :xl="2">
|
||||
<el-avatar :src="notification.author.userAvatarURL"></el-avatar>
|
||||
</el-col>
|
||||
<el-col :xs="4" :sm="4" :xl="4" class="text-right" style="padding-right: 1rem;">
|
||||
<el-link v-if="notification.hasRead === '0'" :underline="false" @click="read(notification.idNotification)">
|
||||
<i class="el-icon-check" style="font-weight: bold;"></i> 标记已读
|
||||
</el-link>
|
||||
<el-col :xs="20" :xl="22">
|
||||
<el-col :xs="16" :sm="20" :xl="20">
|
||||
<el-link :underline="false" @click="onRouter(notification)" style="font-size: 1.1em;"
|
||||
v-html="notification.dataTitle"></el-link>
|
||||
<el-col style="font-size: 12px;color: #7f828b;">
|
||||
{{ notification.createdTime }}
|
||||
</el-col>
|
||||
<el-col>
|
||||
{{ notification.dataSummary }}
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="4" :xl="4" class="text-right" style="padding-right: 1rem;">
|
||||
<el-link v-if="notification.hasRead === '0'" :underline="false"
|
||||
@click="read(notification.idNotification)">
|
||||
<i class="el-icon-check" style="font-weight: bold;"></i> 标记已读
|
||||
</el-link>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col>
|
||||
@ -68,19 +69,15 @@
|
||||
},
|
||||
read(id) {
|
||||
let _ts = this;
|
||||
this.$axios.$put('/api/notification/read/' + id).then(function (res) {
|
||||
this.$axios.$put('/api/notification/read/' + id).then(function () {
|
||||
_ts.currentChange(1);
|
||||
}).catch(error => console.log(error));
|
||||
},
|
||||
onRouter(notification) {
|
||||
if ('0' === notification.dataType) {
|
||||
if (notification.hasRead === '0') {
|
||||
this.read(notification.idNotification);
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/article/' + notification.dataId
|
||||
})
|
||||
if (notification.hasRead === '0') {
|
||||
this.read(notification.idNotification);
|
||||
}
|
||||
window.location.href = notification.dataUrl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,12 @@
|
||||
<template>
|
||||
<el-row justify="space-between" type="flex">
|
||||
<el-col>
|
||||
<el-col :span="24">
|
||||
<el-col :xs="8" :sm="4" :md="4" :xl="3" style="padding-top: 1rem;">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="@/assets/rymcu.png" alt="RYMCU" class="navbar-brand-img">
|
||||
<span>RYMCU</span>
|
||||
</a>
|
||||
</el-col>
|
||||
<el-col :xs="0" :sm="12" :md="14" :xl="18" style="text-align: center;">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col>
|
||||
<el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
|
||||
@select="handleSelectMenu">
|
||||
<el-menu-item index="index">首页</el-menu-item>
|
||||
<el-menu-item index="topic">专题</el-menu-item>
|
||||
<el-menu-item index="github">开源代码</el-menu-item>
|
||||
<el-menu-item index="open-source">资料下载</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="16" :sm="8" :md="6" :xl="3" style="padding-top: 1rem;">
|
||||
<!--<el-col :xs="24" :sm="16" :xl="12">-->
|
||||
<el-col :xs="0" :sm="0" :xl="0">
|
||||
@ -32,52 +19,53 @@
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</el-col>
|
||||
<!--<el-col v-if="isLogin" :xs="0" :sm="8" :xl="6">-->
|
||||
<el-col v-if="isLogin">
|
||||
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-portfolio">创建作品集
|
||||
</el-link>
|
||||
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/post-article">发帖</el-link>
|
||||
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-badge :value="notificationNumbers" class="item">
|
||||
<el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
|
||||
</el-badge>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
|
||||
command="notification">{{ notification.dataSummary }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-link>
|
||||
<el-link :underline="false" style="margin-left: 10px;">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
|
||||
<el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="user" style="align-items: center;">
|
||||
<el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
|
||||
:src="avatarURL"></el-avatar>
|
||||
<el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
|
||||
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
|
||||
<el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-show="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
|
||||
<el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
|
||||
<el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-link>
|
||||
</el-col>
|
||||
<el-col v-else>
|
||||
<nuxt-link to="/login">
|
||||
<el-link :underline="false" style="margin-left: 10px;">登录</el-link>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/register">
|
||||
<el-link :underline="false" style="margin-left: 10px;">注册</el-link>
|
||||
</nuxt-link>
|
||||
</el-col>
|
||||
<!--<el-col v-if="user" :xs="0" :sm="8" :xl="6">-->
|
||||
<client-only>
|
||||
<el-col v-if="user" style="text-align: right;">
|
||||
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;" href="/article/post">发帖
|
||||
</el-link>
|
||||
<el-link :underline="false" style="padding-left: 10px;padding-right: 10px;">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-badge :value="notificationNumbers" class="item">
|
||||
<el-link :underline="false" style="font-size: 1.4rem;" class="el-icon-bell"></el-link>
|
||||
</el-badge>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="notification in notifications" :key="notification.idNotification"
|
||||
command="notification">{{ notification.dataSummary }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="notification">查看所有消息</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-link>
|
||||
<el-link :underline="false" style="margin-left: 10px;">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
|
||||
<el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="user" style="align-items: center;">
|
||||
<el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
|
||||
:src="avatarURL"></el-avatar>
|
||||
<el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
|
||||
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
|
||||
<el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
|
||||
<el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
|
||||
<el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-link>
|
||||
</el-col>
|
||||
<el-col v-else style="text-align: right;">
|
||||
<nuxt-link to="/login">
|
||||
<el-link :underline="false" style="margin-left: 10px;">登录</el-link>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/register">
|
||||
<el-link :underline="false" style="margin-left: 10px;">注册</el-link>
|
||||
</nuxt-link>
|
||||
</el-col>
|
||||
</client-only>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -91,7 +79,7 @@
|
||||
getActiveMenu() {
|
||||
return this.$store.state.activeMenu;
|
||||
},
|
||||
isLogin() {
|
||||
user() {
|
||||
return this.$store.state.oauth;
|
||||
},
|
||||
avatarURL() {
|
||||
@ -115,7 +103,7 @@
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
isLogin: function () {
|
||||
user: function () {
|
||||
this.getUnreadNotifications();
|
||||
}
|
||||
},
|
||||
@ -145,25 +133,23 @@
|
||||
let _ts = this;
|
||||
let activeMenu = _ts.$store.state.activeMenu;
|
||||
if (activeMenu !== item) {
|
||||
if (item === 'topic') {
|
||||
_ts.$router.push(
|
||||
{
|
||||
name: item,
|
||||
params: {
|
||||
name: '51mcu'
|
||||
switch (item) {
|
||||
case 'topic':
|
||||
_ts.$router.push({
|
||||
path: '/topic/news'
|
||||
})
|
||||
break;
|
||||
case 'github':
|
||||
window.open("https://github.com/rymcu");
|
||||
return false;
|
||||
break;
|
||||
default:
|
||||
_ts.$router.push(
|
||||
{
|
||||
name: item
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
if (item === 'github') {
|
||||
window.open("https://github.com/Hugh-rymcu");
|
||||
return false;
|
||||
}
|
||||
_ts.$router.push(
|
||||
{
|
||||
name: item
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
handleSelect(item) {
|
||||
@ -171,48 +157,44 @@
|
||||
},
|
||||
handleCommand(item) {
|
||||
let _ts = this;
|
||||
if (item === 'user') {
|
||||
_ts.$router.push({
|
||||
path: '/user/' + _ts.$store.state.nickname
|
||||
})
|
||||
switch (item) {
|
||||
case 'user':
|
||||
_ts.$router.push({
|
||||
path: '/user/' + _ts.nickname
|
||||
})
|
||||
break;
|
||||
case 'user-info':
|
||||
_ts.$router.push({
|
||||
path: '/user/settings/account'
|
||||
})
|
||||
break;
|
||||
case 'logout':
|
||||
Cookie.remove('auth')
|
||||
_ts.$store.commit('setAuth', null)
|
||||
item = 'login';
|
||||
break;
|
||||
default:
|
||||
_ts.$router.push({
|
||||
name: item
|
||||
})
|
||||
}
|
||||
if (item === 'user-info') {
|
||||
_ts.$router.push({
|
||||
name: 'account',
|
||||
params: {
|
||||
id: _ts.$store.state.idUser
|
||||
}
|
||||
})
|
||||
}
|
||||
if (item === 'logout') {
|
||||
Cookie.remove('auth')
|
||||
_ts.$store.commit('setAuth', null)
|
||||
item = 'login';
|
||||
}
|
||||
_ts.$router.push({
|
||||
name: item
|
||||
})
|
||||
},
|
||||
getUnreadNotifications() {
|
||||
let _ts = this;
|
||||
if (_ts.isLogin) {
|
||||
_ts.$axios.$get('/api/notification/unread', {
|
||||
headers: {
|
||||
Authorization: _ts.$store.state.oauth?.accessToken
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (_ts.user) {
|
||||
_ts.$axios.$get('/api/notification/unread').then(function (res) {
|
||||
if (res) {
|
||||
_ts.$set(_ts, 'notifications', res.data.notifications);
|
||||
_ts.$set(_ts, 'notificationNumbers', res.data.notifications.length == 0 ? "" : res.data.notifications.length);
|
||||
_ts.$set(_ts, 'notifications', res.notifications);
|
||||
_ts.$set(_ts, 'notificationNumbers', res.notifications.length == 0 ? "" : res.notifications.length);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll();
|
||||
let isLogin = this.isLogin;
|
||||
if (isLogin) {
|
||||
// this.restaurants = this.loadAll();
|
||||
let user = this.user;
|
||||
if (user) {
|
||||
this.getUnreadNotifications();
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<el-main>
|
||||
<nuxt :nuxt-child-key="$route.name" />
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<el-footer style="height: 6rem;">
|
||||
<footer-view/>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
@ -41,7 +41,7 @@
|
||||
padding: 20px 0;
|
||||
background-attachment: fixed;
|
||||
min-height: 280px;
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 6rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -46,8 +46,8 @@
|
||||
<h4>所属作品集</h4>
|
||||
</el-col>
|
||||
<el-col style="padding: 1rem">
|
||||
<el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
|
||||
<el-col :xs="3" :sm="3" :xl="3">
|
||||
<el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :xs="16" :xl="8">
|
||||
<el-col :xs="4" :sm="4" :xl="4">
|
||||
<el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
|
||||
</el-col>
|
||||
<el-col :xs="20" :sm="20" :xl="20">
|
||||
|
||||
@ -24,13 +24,13 @@
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-col v-if="isAuthor" style="text-align: right;">
|
||||
<el-col>
|
||||
<el-col :xs="0" :xl="24">
|
||||
<el-link @click="managerPortfolio(portfolio.idPortfolio)" :underline="false" class="text-default">管理</el-link>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-divider><i class="el-icon-loading"></i></el-divider>
|
||||
<el-col>
|
||||
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
|
||||
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -13,7 +13,10 @@ export const getters = {
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
|
||||
// 设置是否移动端状态
|
||||
updateMobileState(state, action) {
|
||||
state.isMobile = action
|
||||
}
|
||||
}
|
||||
|
||||
export const actions ={
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { isServer } from '~/environment'
|
||||
|
||||
const cookieparser = process.server ? require('cookieparser') : undefined
|
||||
|
||||
export const state = () => {
|
||||
@ -28,6 +30,27 @@ export const mutations = {
|
||||
export const actions = {
|
||||
nuxtServerInit(store, {req}) {
|
||||
// 初始化时的全局任务
|
||||
const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
|
||||
const browser = {
|
||||
versions: function() {
|
||||
return { //移动终端浏览器版本信息
|
||||
trident: userAgent.indexOf('Trident') > -1, //IE内核
|
||||
presto: userAgent.indexOf('Presto') > -1, //opera内核
|
||||
webKit: userAgent.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
|
||||
gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1, //火狐内核
|
||||
mobile: !!userAgent.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
|
||||
ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
|
||||
android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1, //android终端或uc浏览器
|
||||
iPhone: userAgent.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
|
||||
iPad: userAgent.indexOf('iPad') > -1, //是否iPad
|
||||
webApp: userAgent.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
|
||||
};
|
||||
} ()
|
||||
}
|
||||
if (browser.versions.mobile) {
|
||||
// 移动端
|
||||
store.commit('global/updateMobileState', true)
|
||||
}
|
||||
let auth = null
|
||||
if (req.headers.cookie) {
|
||||
const parsed = cookieparser.parse(req.headers.cookie)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user