Commit 0b5f39fe authored by wanli's avatar wanli

新增应用商店前端

parent 7046e1d9
......@@ -26,7 +26,7 @@
"vue": "^2.6.12",
"vue-codemirror": "^4.0.6",
"vue-count-to": "^1.0.13",
"vue-grid-layout": "^2.3.8",
"vue-grid-layout": "^2.3.12",
"vue-plyr": "^7.0.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
......@@ -50,6 +50,7 @@
"script-ext-html-webpack-plugin": "^2.1.3",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-concise-slider": "^3.4.4",
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
......
<svg width="642" height="642" xmlns="http://www.w3.org/2000/svg" class="icon">
<defs>
<style type="text/css"/>
</defs>
<g>
<title>background</title>
<rect x="-1" y="-1" width="644" height="644" id="canvas_background" fill="none"/>
</g>
<g>
<title>Layer 1</title>
<path d="m546.6176,641.32967l-451.23517,0c-52.32527,0 -95.08571,-42.76044 -95.08571,-95.08571l0,-451.23517c0,-52.32527 42.76044,-95.08571 95.08571,-95.08571l451.23517,0c52.32527,0 95.08571,42.76044 95.08571,95.08571l0,451.23517c0,52.32527 -42.76044,95.08571 -95.08571,95.08571z" fill="#2ecccd" id="svg_1"/>
<path d="m321.46431,263.67473c-131.65714,0 -238.55824,-87.2088 -243.05934,-195.79781c0,-3.93846 -3.37582,-7.31428 -7.31429,-7.31428c-3.93846,0 -7.87692,3.37582 -7.31428,7.87692c5.06373,115.34066 118.71648,208.17582 258.25055,208.17583s253.18681,-92.27253 258.25055,-208.17583c0,-3.93846 -3.37583,-7.87692 -7.31429,-7.87692c-3.93846,0 -7.31428,3.37582 -7.31428,7.31428c-5.62638,108.58901 -112.52748,195.79781 -244.18462,195.79781z" fill="#FCFCFC" id="svg_2"/>
<path d="m322,324.43956m-14.06593,0a14.06593,14.06593 0 1 0 28.13186,0a14.06593,14.06593 0 1 0 -28.13186,0z" fill="#FCFCFC" id="svg_3"/>
<text fill="#ffffff" stroke-width="0" x="183.3125" y="488.8" id="svg_4" font-size="128" font-family="Helvetica, Arial, sans-serif" text-anchor="start" xml:space="preserve">EVM</text>
</g>
</svg>
\ No newline at end of file
<template>
<div class="app-container">
<header class="header-nav">
<div class="left">
<img src="../assets/images/evm-store.svg" alt="evue-logo" />
<h3>EVM应用商店</h3>
</div>
<div class="center">
<nav>
<ul>
<li>推荐</li>
<li>应用</li>
<li>游戏</li>
<li>排行</li>
</ul>
</nav>
</div>
<div class="right">
<div class="input-wrapper">
<input
@focus="onSearchFocus"
@blur="onSearchBlur"
type="text"
placeholder="搜索应用、游戏"
/>
<select>
<option>123</option>
<option>123</option>
<option>123</option>
<option>123</option>
<option>123</option>
</select>
</div>
<p class="submit-btn">上传应用</p>
<img class="avatar" src="../assets/images/avatar.png" alt="avatar" />
</div>
</header>
<main>
<router-view></router-view>
</main>
<footer>
<p>Copyright © 武汉市字节码科技有限公司</p>
<p>⭐⭐⭐⭐⭐</p>
</footer>
</div>
</template>
<script>
export default {
name: "StoreLayout",
data() {
return {};
},
computed: {},
methods: {
onSearchFocus() {
console.log(1);
},
onSearchBlur() {
console.log(2);
},
},
mounted() {},
created() {},
};
</script>
<style lang="scss">
@import "../styles/iconfont/iconfont.css";
.app-container {
& > div.page-wrapper {
margin: 10px 0px;
}
& > .header-nav {
display: flex;
justify-content: space-between;
padding: 12px 25px;
border-bottom: 1px solid #f2f2f2;
& > div {
display: inline-flex;
flex-direction: row;
align-items: center;
}
& > div.left {
cursor: pointer;
& > img {
width: 40px;
height: 40px;
display: block;
}
& > h3 {
display: inline-block;
margin: 0px 0px 0px 15px;
}
}
& > div.center {
& > nav {
& > ul {
display: inline-flex;
flex-direction: row;
& > li {
cursor: pointer;
padding: 0px 30px;
}
}
}
}
& > div.right {
& > div.input-wrapper {
margin-right: 15px;
}
& > img.avatar {
width: 32px;
height: 32px;
display: block;
margin-left: 10px;
cursor: pointer;
}
}
}
& > main {
width: 50%;
margin: 0px auto;
@media screen and (max-width: 1170px) {
width: 70%;
}
@media screen and (max-width: 920px) {
width: 85%;
}
@media screen and (max-width: 750px) {
width: 100%;
}
}
& > footer {
font-size: 13px;
padding: 25px 0px;
background-color: #f2f2f2;
& > p {
text-align: center;
}
}
}
</style>
......@@ -4,42 +4,42 @@ import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import { getPageTitle } from "@/utils/index";
const whiteList = ["/login", "/register"];
const whiteList = ["/login", "/register", "/gallery"];
NProgress.configure({ showSpinner: false }); // NProgress Configuration
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start();
// start progress bar
NProgress.start();
// set page title
document.title = getPageTitle(to.meta.title);
// set page title
document.title = getPageTitle(to.meta.title);
// determine whether the user has logged in
const hasToken = store.getters.token;
// determine whether the user has logged in
const hasToken = store.getters.token;
if (hasToken) {
if (to.path === "/login") {
// if is logged in, redirect to the home page
next({ path: "/" });
NProgress.done();
if (hasToken) {
if (to.path === "/login") {
// if is logged in, redirect to the home page
next({ path: "/" });
NProgress.done();
} else {
next();
}
} else {
next();
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(() => {
// finish progress bar
NProgress.done();
// finish progress bar
NProgress.done();
});
......@@ -5,7 +5,8 @@ Vue.use(Router);
/* Layout */
import Layout from "@/layout";
import DevLayot from "@/layout/developer";
import DevLayout from "@/layout/developer";
import StoreLayout from "@/layout/store";
/**
* Note: sub-menu only appear when route children.length >= 1
......@@ -35,34 +36,78 @@ import DevLayot from "@/layout/developer";
export const constantRoutes = [
{
path: "/login",
component: () => import("@/views/login/index"),
component: () => import("@/views/system/index"),
hidden: true,
},
{
path: "/register",
component: () => import("@/views/login/register"),
component: () => import("@/views/system/register"),
hidden: true,
},
{
path: '/',
redirect: '/home',
component: Layout,
redirect: '/dev',
component: DevLayout,
children: [{
path: 'home',
name: 'AppIndex',
component: () => import('@/views/app-store/index.vue'),
meta: { title: '应用管理', icon: 'home' }
path: 'dev',
name: 'Developer',
component: () => import('@/views/developer/index'),
meta: { title: '开发者中心', icon: 'home' }
}]
},
{
path: '/',
redirect: '/dev',
component: DevLayot,
redirect: '/gallery',
component: StoreLayout,
children: [{
path: 'dev',
name: 'Developer',
component: () => import('@/views/developer/index.vue'),
meta: { title: '开发者中心', icon: 'home' }
path: 'gallery',
name: 'Gallery',
component: () => import('@/views/app-store/gallery'),
meta: { title: '商店首页', icon: 'home' }
}]
},
{
path: '/',
redirect: '/application',
component: StoreLayout,
children: [{
path: 'application',
name: 'Application',
component: () => import('@/views/app-store/app'),
meta: { title: '应用详情', icon: 'home' }
}]
},
{
path: '/',
redirect: '/app-list',
component: StoreLayout,
children: [{
path: 'app-list',
name: 'AppList',
component: () => import('@/views/app-store/app-list'),
meta: { title: '更多应用', icon: 'home' }
}]
},
{
path: '/',
redirect: '/my',
component: StoreLayout,
children: [{
path: 'my',
name: 'AppProfile',
component: () => import('@/views/app-store/profile'),
meta: { title: '个人中心', icon: 'shangcheng' }
}]
},
{
path: '/',
redirect: '/home',
component: Layout,
children: [{
path: 'home',
name: 'AppIndex',
component: () => import('@/views/app-store/index'),
meta: { title: '应用管理', icon: 'home' }
}]
},
{
......@@ -72,7 +117,7 @@ export const constantRoutes = [
children: [{
path: 'build',
name: 'AppBuild',
component: () => import('@/views/app-store/build.vue'),
component: () => import('@/views/app-store/build'),
meta: { title: '打包日志', icon: 'home' }
}]
},
......@@ -83,7 +128,7 @@ export const constantRoutes = [
children: [{
path: 'download',
name: 'AppDownload',
component: () => import('@/views/app-store/download.vue'),
component: () => import('@/views/app-store/download'),
meta: { title: '下载记录', icon: 'gongzuotai' }
}]
},
......@@ -94,7 +139,7 @@ export const constantRoutes = [
children: [{
path: 'device',
name: 'Device',
component: () => import('@/views/app-store/device.vue'),
component: () => import('@/views/app-store/device'),
meta: { title: '设备管理', icon: 'gongzuotai' }
}]
},
......@@ -105,7 +150,7 @@ export const constantRoutes = [
children: [{
path: 'profile',
name: 'Profile',
component: () => import('@/views/profile/index.vue'),
component: () => import('@/views/system/profile'),
meta: { title: '个人中心', icon: 'shangcheng' }
}]
},
......@@ -116,7 +161,7 @@ export const constantRoutes = [
children: [{
path: 'docs',
name: 'Document',
component: () => import('@/views/app-store/docs.vue'),
component: () => import('@/views/app-store/docs'),
meta: { title: '开发文档', icon: 'shangcheng' }
}]
},
......@@ -127,7 +172,7 @@ export const constantRoutes = [
children: [{
path: 'user',
name: 'UserIndex',
component: () => import('@/views/system/users.vue'),
component: () => import('@/views/system/users'),
meta: { title: '用户管理', icon: 'shangcheng' }
}]
},
......@@ -158,16 +203,6 @@ export const constantRoutes = [
// 404 page must be placed at the end !!!
export const notFound = { path: '*', redirect: '/404', hidden: true }
export const routerMap = {
Layout: () => import('@/layout'),
Home: () => import('@/views/app-store/index'),
Build: () => import('@/views/app-store/build'),
Profile: () => import('@/views/profile/index'),
Download: () => import('@/views/app-store/download'),
Framework: () => import('@/views/app-store/framework'),
User: () => import('@/views/system/users'),
}
const createRouter = () =>
new Router({
// mode: 'history', // require service support, 后台部署在/static 目录
......
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1617005192789'); /* IE9 */
src: url('iconfont.eot?t=1617005192789#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1617005192789') format('woff'),
url('iconfont.ttf?t=1617005192789') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1617005192789#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xingbienv:before {
content: "\e605";
}
.icon-xingbienan:before {
content: "\e606";
}
.icon-dizhi:before {
content: "\e63e";
}
.icon-fangxiang-copy:before {
content: "\e50d";
}
.icon-sousuo:before {
content: "\e689";
}
.icon-jiantouyou:before {
content: "\e61b";
}
.icon-zanwuxiaoxi:before {
content: "\e615";
}
.icon-tianjia:before {
content: "\e7df";
}
.icon-weixin:before {
content: "\e68f";
}
.icon-youxiang:before {
content: "\e660";
}
.icon-70BasicIcons-all-59:before {
content: "\e654";
}
This diff is collapsed.
<template>
<div class="app-container">
<div class="top">
<label>大家都在用</label>
</div>
<div class="content">
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
</div>
</div>
</template>
<script>
import StarRating from "vue-star-rating";
export default {
name: "AppList",
components: {
StarRating,
},
data() {
return {};
},
computed: {},
methods: {},
beforeMount() {},
};
</script>
<style lang="scss" scoped>
div.app-container {
margin: 20px 0px;
& > div.top {
display: flex;
justify-content: space-between;
& > label {
margin: 0px;
font-size: 20px;
}
& > p {
cursor: pointer;
margin: 0px;
display: inline-flex;
align-items: center;
font-size: 14px;
& > img {
width: 20px;
height: 20px;
}
}
}
& > div.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 0;
& > div.item {
flex: 1;
width: 50%;
max-width: 50%;
min-width: 50%;
cursor: pointer;
display: inline-flex;
flex-direction: row;
box-sizing: border-box;
border: none;
margin: 0px;
padding: 10px 20px;
& > img {
width: 80px;
height: 80px;
}
& > button {
width: 100px;
}
& > button.install {
width: auto;
min-width: 72px;
max-width: 100px;
height: 28px;
margin: 10px auto;
padding: 0 12px;
font-size: 14px;
font-weight: bolder;
border-radius: 14px;
color: #007dff;
background: rgba(0, 0, 0, 0.05);
border: 0;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
outline: none;
}
& > div.text {
flex: 1;
padding: 15px 0px;
margin-left: 20px;
border-bottom: 1px solid #f2f2f2;
& > p {
margin: 1px 0px;
}
& > p.title {
line-height: 18px;
}
& > p.subtitle {
color: grey;
font-size: 12px;
line-height: 18px;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="app-container">
<div class="top">
<label>大家都在用</label>
</div>
<div class="content">
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
<div class="item">
<img src="../../assets/images/evue-logo.png" alt="icon" />
<div class="text">
<p class="title">EVUE</p>
<p class="subtitle">
<star-rating
v-bind:rating="3.5"
v-bind:increment="0.1"
v-bind:max-rating="5"
v-bind:star-size="15"
v-bind:read-only="true"
inactive-color="#9E9E9E"
active-color="#FFC83D"
>
</star-rating>
</p>
<p class="subtitle">八零八零八附带上方</p>
</div>
<button class="install">安装</button>
</div>
</div>
</div>
</template>
<script>
import StarRating from "vue-star-rating";
export default {
name: "AppList",
components: {
StarRating,
},
data() {
return {};
},
computed: {},
methods: {},
beforeMount() {},
};
</script>
<style lang="scss" scoped>
div.app-container {
margin: 20px 0px;
& > div.top {
display: flex;
justify-content: space-between;
& > label {
margin: 0px;
font-size: 20px;
}
& > p {
cursor: pointer;
margin: 0px;
display: inline-flex;
align-items: center;
font-size: 14px;
& > img {
width: 20px;
height: 20px;
}
}
}
& > div.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 0;
& > div.item {
flex: 1;
width: 50%;
max-width: 50%;
min-width: 50%;
cursor: pointer;
display: inline-flex;
flex-direction: row;
box-sizing: border-box;
border: none;
margin: 0px;
padding: 10px 20px;
& > img {
width: 80px;
height: 80px;
}
& > button {
width: 100px;
}
& > button.install {
width: auto;
min-width: 72px;
max-width: 100px;
height: 28px;
margin: 10px auto;
padding: 0 12px;
font-size: 14px;
font-weight: bolder;
border-radius: 14px;
color: #007dff;
background: rgba(0, 0, 0, 0.05);
border: 0;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
outline: none;
}
& > div.text {
flex: 1;
padding: 15px 0px;
margin-left: 20px;
border-bottom: 1px solid #f2f2f2;
& > p {
margin: 1px 0px;
}
& > p.title {
line-height: 18px;
}
& > p.subtitle {
color: grey;
font-size: 12px;
line-height: 18px;
}
}
}
}
}
</style>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -6,8 +6,6 @@
>添加应用</el-button
></el-form-item
>
<!-- <el-form-item><el-button type="success" @click="onAddFramework">添加系统页面</el-button></el-form-item> -->
<!-- <el-form-item><el-button type="success" @click="onAddFramework">上传JSON配置文件</el-button></el-form-item> -->
</el-form>
<el-table
v-loading="isLoading"
......
This diff is collapsed.
......@@ -5,7 +5,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import resize from '../../dashboard/components/mixins/resize'
export default {
mixins: [resize],
......
......@@ -44,8 +44,8 @@ module.exports = {
// 比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
},
},
"/api/": {
target: "http://192.168.31.20:8222/",
"/uowap/": {
target: "https://web-drcn.hispace.dbankcloud.cn/",
changeOrigin: true,
pathRewrite: {},
},
......
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