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,d09GMgABAAAAAAl0AAsAAAAAESAAAAklAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCERAqTGI80ATYCJAMwCxoABCAFhG0HgTMbWQ4RlazZIvs54G5u20jKymScsPLy6H8/A+vkUGbmjof/9nv2+8zMlaeYa9REiPjqoqF5FE1iIZEJGSreaPb/G8JNuxBqSfBQUaXu1A1mWpmSzWHC+uAzQWYiCawTf/au7cA51+kbSJW2cKQl6IwPcjv/dgzOxTUbgzARZihn8d+i7/dSoBzw0FyrYpZcQoNabq93kxffMJWkiQShkojbMNMQLYWIwnD7wIpXhe5NoGs2WAniYFFFPXBUsHigzrnJ4h7gaFErAc6hldUea+bxkAM7bVpLuw8AN5S/j59APOQIJFUG7L6OnSjsBzmfGZ9fsGTiuva8ERDZ0bhwkbESUC7UW0/FcwAiXq5ZtzHdVcBkMJZsv/7M2jCbavOwZdnqbd22tbaNn99OjECSaHcsHSZziU2lKfSfvKRRy3q6Kh0tUQNC9GF+F+91tUiIpPDFLpLgi30kiS/8SBq+eOCCyCwoZZD1UOqB7IZSF+Ra4LIlNyKSDl/fCiespEprTAVsBdJfIP/G2h1SudaqJI4OA6liT5YDIwoGhi1wODjGYAQyMcwJ4/EwLsqGL8+DT6+JYbkhnpATty02zMYwTzFG3Rus1iaLpZEkBwhmYA6Ao7ReJ313UIW3rAE7Le17TRBMmGVGN5rG0IRdARQoA6NIDAlvTGoJtxBNZquMekJJyMdkq/R26HlJpvGO7N6lY8TRi3cbpCbCpQm5tg1BZXu0GrxeYUZ70iqul5ogqAgjMAgxMT3SD5XiQWVKrQInSbcteVr56KuoVHo1ilY2713j3hcV53weii8kyXpqrObZy5JdV/NNi/8ua/ENym872Xj8seSJ7BnxtI36ssH6ucliayQ/9TUo+eBuRS4oVeldmhpVhFq2sEEpMUidG8kPjZaXTdb3DdTz7kby1FNUj1RFuIhFkaz4A7vD+xULNeQ6i7veup5yq8ekJndY3UIz8OkKA47tvWhtrDFMkSoA7brxdAVqyI5QIf1KqoSAGmRNahe1Wq9zVjljDVKkEXLet23rhc1FjTKUfO1mXKHga+I42XsDlYUDwPXP7yu3uCpaUdA10KegaQJ+tvOUwL4ejAkS9xeDsKV9V7hQ5+58aVgrxR/NOmtJlrdqsUhJMpYEEioT17gqgETLV6L7QrjGIRQqC1Hyj1BKYTl/z4kTBRpBLHMOAzdE2qjaHUiQRyUAKuucL1oIq7XvY2deoLzwxESBgHtAoeEr+W7Be/fit5GWU7q7tyAKGp5NNpOhvYjEKDMTJqmhQbMUufcgWrSwvIWQ3YASbexFxHSJQSTiJLCPPwb060+SOKee+dhtfbqQ/FQ/lAOHJ3BmGwLpEvO4gu4zg8QYhILsMj0gdF+qDcaXXqJf+PffCyKkn4fRLxgsZ3SmJYuhTqgLQBMS5y6ok2XykaoqD/eq6sOHBQWCYnvpBvYgN4s7GCiCsiDRui1ZbFGg2GYkHheYyHipnp8O1X7jOQVHcvInqn1bea9xX2ELHHe508hJnnjCyMwF8bgAH4wTxA3hfYmcNf7nVKoI9mDgIFvOyFQXr339+t6D13KKwLsaouIOceUlmCKHxFwTwJHm3Yytdqhyyr+VV+IAO72ULm5ahs9MofH+KKZoHJCOx+POTlmOyy9xXzrBpQ53Eqd8h8oYocW47XcB+9Z8LzBLaAQNQLwq9tXf0+UTJvhNo8nltGmI7gJzzooLLEQNT5PLp618Iqzx9BIKnygGoZenUZz5o0RUyzUAAQT9Bm5/nToj9vbwxhkAWL6Eg73ca2ys0RFyEj2/N8h7QxPdOnfrlpj3mgfWzlpz547Jq8Hb9OiRpqsqY9pGkSJaKJuzcVqt7/DKOTJundmsgx/cYDjrHzyAMMUAdY6GIMsd+UERz5rJKcS4ahgkCBmKxbkHQYp8RPDMJ5f0EaSA61vWXNcJh3990L8lHH8ig2OZuz3A6b9hImsTK5GJg4MPapAH1H+T7vPnoj/QuPGV2z7ko5XJwC8LLtB2rvTbv8p7c/POJw9mZmYMA/uJd/47DY9nQ+Rl8lVecPnFONVRsCBqMbC25VQbjZjvpxfwPQ+mzL5Tlt830/Vv7WItrw/vi6kIqeAlcKun2Xi2Zad4p8D7iYHpYEAafm+L6Sh2CuFaIjAosANC5s3ZF10bbC1Z8XBqz9oELQ/kr/fQO6ckJ3re29a9g1Uo50jec46v3e3z5FKvGi47JKW3qXpmWFbO3t9L28GpvMNsp3RP4bx0Fq80x+P4rZGW4pXTU0PoXrP890X0zY4WtdbMjSDwerd7oxq75F9OPnK/Z99pQfwsT3qQKkSg2h0kaAZEB14qcIM6pAsn0WK7HReP0Jqd/ComHD9qDI4Hp3/M0Nf7wSMWN4eZQ01hJkdeLMw8CUjrzqhggMHBA5vXYLOu1xu3FDPAO/oXy/ynVgj9gyuC/YWVQj/7Cj4XzIUlY3RfX/oYgISJQoMVHdN9Gcu1h+Cv3zDgIYpBSnfhcnF0K90UbqJvHc0xh5lyRkevRqOrmsLMYOkjABhdyRfhbMX0kp8sj+dhv0P5DtzgtxR+BW/k/pRewp4A+QLtytv/Q94Ce6eVgP8x5/JhEW2oi5XxuyP6Kzrp02rzGqocLY1GbDzeiXRNoQn+H9uVHqNRiauE1fTLUyqMkr9ZO4NM2VXV9xIDK3CgLpfOiKaP9yyCmhRZ9GdMTTKCksYslL3MF6IC85VBlZ6NqIb5nqCuFcr1eyZY9UXpYLkDQWGsU1Ay9B5lmF9RgfkjqDLZH9awj35Q1/HYb7FncejZPUWWYwR1AxOnIHhdPlPrfqEsHEuJ5LTQH6aZpgC2YX3L3hgwzWKZrZTXPRfQp+ShYJZA5wjmlAzy/DiiNL6ZZn9b9tiQ78wckEJMLoWNgFqTcMKRQEycmzl+/wuSCg6TBnT5SvgHpTJ6+sBmsCIYv4kQqcuqNN6UpKud0AIIrVPEAwWhkeOKCZi9ZzMQlzsaExTGbkwyVB+VOBZP+TFOGH3dsg/TjxQ5SlRRRxNtdKIbvejHQOe8DvJfYyhnGgsLw0i3Sq8EQ8tai8scGoqbUUZFVtDMODJyKhq+0rxloSoCIQnKce6GuWeOKtSpoJmfMB7X2ZZDK2GZ5p89zpMdKucOfgwAAAA=') 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";
}
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="xingbienv" unicode="&#58885;" d="M510.887666 384m-446.708971 0a446.708971 446.708971 0 1 1 893.417942 0 446.708971 446.708971 0 1 1-893.417942 0ZM510.87948 317.097264c-123.673717 0-224.282113 100.607372-224.282113 224.282113s100.607372 224.282113 224.282113 224.282113 224.282113-100.607372 224.282112-224.282113-100.608396-224.282113-224.282112-224.282113z m0 364.80559c-77.486792 0-140.523477-63.036685-140.523477-140.523477s63.036685-140.523477 140.523477-140.523477 140.523477 63.036685 140.523477 140.523477-63.036685 140.523477-140.523477 140.523477zM510.87948-0.635217c-23.12058 0-41.878806 18.744923-41.878806 41.878806V358.97607c0 23.133883 18.758226 41.878806 41.878806 41.878806s41.878806-18.744923 41.878806-41.878806v-317.732481c0-23.133883-18.758226-41.878806-41.878806-41.878806zM669.752884 158.237163H352.033705c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878807h317.719179c23.12058 0 41.878806-18.744923 41.878806-41.878807s-18.758226-41.878806-41.878806-41.878806z" horiz-adv-x="1024" />
<glyph glyph-name="xingbienan" unicode="&#58886;" d="M511.843434 384m-446.708971 0a446.708971 446.708971 0 1 1 893.417942 0 446.708971 446.708971 0 1 1-893.417942 0ZM424.111301 77.174939c-59.328223 0-115.140367 23.107277-157.101038 65.081251-86.620823 86.620823-86.620823 227.581252 0 314.215378 41.960671 41.973974 97.771791 65.081251 157.101038 65.081251 59.355853 0 115.140367-23.12058 157.101037-65.081251 41.960671-41.973974 65.081251-97.771791 65.081251-157.11434s-23.12058-115.140367-65.081251-157.101038-97.745185-65.081251-157.101037-65.081251z m0 360.620268c-36.97103 0-71.733765-14.409175-97.881285-40.543392-53.957913-53.984518-53.957913-141.804656 0-195.775872 26.14752-26.14752 60.910255-40.543392 97.881285-40.543391s71.733765 14.395872 97.881284 40.543391c26.14752 26.14752 40.543392 60.910255 40.543392 97.881285s-14.395872 71.733765-40.543392 97.894587c-26.146497 26.14752-60.909232 40.543392-97.881284 40.543392zM551.602973 384.983397c-10.715039 0-21.430078 4.090155-29.609365 12.269442-16.358573 16.358573-16.358573 42.874483 0 59.219753L672.577209 607.056192h-42.833551c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878806h143.958716c16.931624 0 32.200376-10.210549 38.689161-25.847691 6.488785-15.650445 2.889817-33.67189-9.078773-45.641503L581.212338 397.252839c-8.179286-8.179286-18.894326-12.269441-29.609365-12.269442zM773.703397 607.056192h-143.958716c-23.12058 0-41.878806 18.744923-41.878806 41.878806s18.758226 41.878806 41.878806 41.878806h143.958716c23.12058 0 41.878806-18.744923 41.878806-41.878806s-18.758226-41.878806-41.878806-41.878806zM779.864724 456.949452c-23.12058 0-41.878806 18.744923-41.878806 41.878806V642.773671c0 23.133883 18.758226 41.878806 41.878806 41.878807s41.878806-18.744923 41.878806-41.878807v-143.945413c0-23.133883-18.758226-41.878806-41.878806-41.878806zM779.864724 456.949452c-23.12058 0-41.878806 18.744923-41.878806 41.878806V642.773671c0 23.133883 18.758226 41.878806 41.878806 41.878807s41.878806-18.744923 41.878806-41.878807v-143.945413c0-23.133883-18.758226-41.878806-41.878806-41.878806z" horiz-adv-x="1024" />
<glyph glyph-name="dizhi" unicode="&#58942;" d="M512-116.8c-253.6 0-511.2 54.4-511.2 158.4 0 92.8 198.4 131.2 283.2 143.2h3.2c12 0 22.4-8.8 24-20.8 0.8-6.4-0.8-12.8-4.8-17.6-4-4.8-9.6-8.8-16-9.6-176.8-25.6-242.4-72-242.4-96 0-44.8 180.8-110.4 463.2-110.4s463.2 65.6 463.2 110.4c0 24-66.4 70.4-244.8 96-6.4 0.8-12 4-16 9.6-4 4.8-5.6 11.2-4.8 17.6 1.6 12 12 20.8 24 20.8h3.2c85.6-12 285.6-50.4 285.6-143.2 0.8-103.2-256-158.4-509.6-158.4z m-16.8 169.6c-12 11.2-288.8 272.8-288.8 529.6 0 168 136.8 304.8 304.8 304.8S816 750.4 816 582.4c0-249.6-276.8-517.6-288.8-528.8l-16-16-16 15.2zM512 839.2c-141.6 0-256.8-115.2-256.8-256.8 0-200.8 196-416 256.8-477.6 61.6 63.2 257.6 282.4 257.6 477.6C768.8 723.2 653.6 839.2 512 839.2z m0-392.8c-80 0-144.8 64.8-144.8 144.8S432 736 512 736c80 0 144.8-64.8 144.8-144.8 0-80-64.8-144.8-144.8-144.8zM512 688c-53.6 0-96.8-43.2-96.8-96.8S458.4 494.4 512 494.4c53.6 0 96.8 43.2 96.8 96.8S564.8 688 512 688z" horiz-adv-x="1024" />
<glyph glyph-name="fangxiang-copy" unicode="&#58637;" d="M36.324 386.035c0-257.014 209.096-466.103 466.084-466.103 256.992 0 466.087 209.089 466.087 466.103 0 257.011-209.095 466.1-466.087 466.10000001-256.987 0-466.085-209.09-466.084-466.10000001zM442.05 613.991l217.55-217.524c4.444-4.444 6.944-10.477 6.945-16.757 0-0.124 0-0.23100001 0-0.354-0.094-6.403-2.778-12.498-7.438-16.896l-217.551-204.877c-9.535-8.981-24.532-8.532-33.513 1.003-9.012 9.534-8.517 24.51800001 0.988 33.498l199.777 188.135-200.271 200.261c-9.258 9.257-9.258 24.252 0 33.511 9.255 9.259 24.254 9.259 33.513 0.00099999z" horiz-adv-x="1000" />
<glyph glyph-name="sousuo" unicode="&#59017;" d="M774.991188 136.307469l201.863039-201.863039a36.569391 36.569391 0 0 0-51.782258-51.70912L717.138411 90.742007a438.832694 438.832694 0 1 0 57.779638 45.565462zM475.561014 91.473395A365.693911 365.693911 0 1 1 475.561014 822.861218a365.693911 365.693911 0 0 1 0-731.387823z" horiz-adv-x="1024" />
<glyph glyph-name="jiantouyou" unicode="&#58907;" d="M319-27c-6.4 0-12.8 2.4-17.7 7.3-9.8 9.8-9.8 25.6 0 35.4L669.6 384 301.3 752.3c-9.8 9.8-9.8 25.6 0 35.4 9.8 9.8 25.6 9.8 35.4 0l386-386c9.8-9.8 9.8-25.6 0-35.4l-386-386c-4.9-4.9-11.3-7.3-17.7-7.3z" horiz-adv-x="1024" />
<glyph glyph-name="zanwuxiaoxi" unicode="&#58901;" d="M888.7 120.5c0-32-167.4-56.7-376.7-56.7-207.4 0-376.7 24.6-376.7 56.7s167.4 56.7 376.7 56.7c207.4-0.1 376.7-24.7 376.7-56.7M653.4 103.5H282.2c-31.4 0-56.8 25.4-56.8 56.8V668.1c0 16.5 13.4 29.9 29.9 29.9h400.4c16.5 0 29.9-13.4 29.9-29.9v-532.4c0-17.8-14.4-32.2-32.2-32.2zM653.4 97.3H282.2c-34.8 0-63 28.3-63 63V668.1c0 19.9 16.2 36.1 36.1 36.1h400.4c19.9 0 36.1-16.2 36.1-36.1v-532.4c0-21.2-17.2-38.4-38.4-38.4zM255.3 691.8c-13.1 0-23.7-10.6-23.7-23.7v-507.7c0-27.9 22.7-50.6 50.6-50.6h371.2c14.3 0 25.9 11.6 25.9 25.9V668.1c0 13.1-10.6 23.7-23.7 23.7H255.3zM308 209s40.5-80.1-35-105.5c0 0-0.4 0 0 0 162.2 0 324.4-2 486.5 2 7.4 2 14.7 5.9 20.3 9.8 3.7 2 12.9 11.7 18.4 25.4 5.5 15.6 7.4 39.1-7.4 56.6-3.7 5.9-9.2 9.8-16.6 11.7H308.5M515 97.1c-40.5 0-80.8 0.1-120.6 0.2-40.5 0.1-81 0.2-121.5 0.2l-0.1 6.3-1.8 5.4c19 6.4 31.7 17 37.7 31.6 11.9 29.2-5.9 65.1-6.1 65.5-1.5 3-0.3 6.6 2.6 8.1 1 0.5 2 0.7 3 0.6H775l0.8-0.2c8.8-2.4 15.6-7.2 20.1-14.3 19.4-23.1 11-53.2 7.9-61.9-6.2-15.2-16.3-26.1-21.3-28.7-6.2-4.5-14.3-8.3-21.5-10.3l-1.4-0.2c-81.2-1.9-163.4-2.3-244.6-2.3z m-216.6 12.4c32.1 0 64.1-0.1 96.1-0.2 119.3-0.4 242.8-0.7 364.2 2.2 5.7 1.6 12.1 4.8 17.7 8.7 3 1.6 11.3 10.4 16.3 22.7 2.4 6.9 9.4 31.6-6.4 50.5-3.2 5-7.3 7.9-12.8 9.6H317.1c5.2-13.8 13-41.7 2.8-66.7-4.5-10.8-11.7-19.7-21.5-26.8zM287.7 626.1h153.4v-38.4H287.7zM287.7 568.6h354.8v-19.2H287.7zM287.7 501.5h76.7v-38.4h-76.7zM287.7 443.9h306.8v-19.2H287.7zM287.7 367.2h230.1V348H287.7zM297.3 328.9h182.2v-19.2H297.3z" horiz-adv-x="1024" />
<glyph glyph-name="tianjia" unicode="&#59359;" d="M482 768c0 16.569 13.431 30 30 30 16.569 0 30-13.431 30-30v-768c0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30V768zM895 414c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30H127c-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30h768z" horiz-adv-x="1024" />
<glyph glyph-name="weixin" unicode="&#59023;" d="M965.2 2.5c-4 12.2-10.1 25.6-15.6 37.3-0.7 1.6-1.5 3.3-2.3 5 46.7 51.1 72.2 115.2 72.2 182.6 0 38.8-8.4 76.4-24.8 111.8-15.8 33.9-38.4 64.4-67.1 90.4-45.4 41.3-102.4 68.1-164.1 78-3.1 38.2-13 75.2-29.4 110.5-19.5 41.8-47.2 79.2-82.6 111.3C579.5 795 483.8 831 382.3 831s-197.2-36-269.2-101.5c-35.3-32.1-63.1-69.6-82.6-111.3C10.2 574.6 0 528.4 0 480.8c0-84.6 32.7-165 92.5-228.5-1.7-3.8-3.6-7.9-5.2-11.4-6.7-14.6-14.4-31.2-19.2-46.2-3.3-10-5-18.4-5.3-25.8-1-22.2 10.5-33.4 17.5-38.1 9.2-6.2 19.7-8.5 30.3-8.5 12.6 0 25.5 3.2 36.6 6.6 18.8 5.7 38.9 14.3 56.6 21.9 7.6 3.3 17.3 7.4 23.6 9.8 48.9-19.9 100.9-30 155-30 11.8 0 23.5 0.5 35.2 1.5 2.1-5.5 4.4-11 7-16.4 15.8-33.9 38.4-64.4 67.1-90.4 58.4-53.1 135.8-82.3 218-82.3 42.8 0 84.2 7.8 123 23.3 4.7-1.9 11-4.5 16.1-6.7 27.6-11.8 54.1-23.1 76.6-23.1 10.1 0 19.5 2.3 27.7 7.9 5.4 3.6 17.8 14.4 16.8 36-0.4 6.4-1.9 13.4-4.7 22.1zM424.3 339.2c-16.5-35.4-24.8-73-24.8-111.8 0-2.2 0-4.3 0.1-6.5v-1.2c0.1-1.9 0.1-3.7 0.2-5.6 0-0.8 0.1-1.6 0.1-2.3 0.1-1.6 0.2-3.1 0.3-4.7l0.3-3.6c0-0.4 0.1-0.7 0.1-1.1 0.2-2.5 0.5-4.9 0.8-7.4-6.2-0.3-12.6-0.5-19.1-0.5-48.6 0-95.2 9.6-138.6 28.5-16.7 7.3-31.9 0.8-65.2-13.5-13.6-5.8-29-12.4-42.8-17.1 3.5 8.1 7.2 16.1 9.7 21.6 4.1 9 8 17.5 10.7 24.4 1.9 5 3.2 9 3.9 12.6 3.8 18.4-5.4 29.5-9.5 33.5-55.9 53.3-86.6 123-86.6 196.2 0 75.9 32.7 147.4 92.1 201.3 60.3 54.7 140.6 84.9 226.2 84.9s165.9-30.2 226.2-84.9c51.2-46.6 82.6-106.2 90.3-170.4-0.8 0-1.6-0.1-2.4-0.1-1.1 0-2.3-0.1-3.4-0.1-1.4-0.1-2.7-0.1-4.1-0.2-1.1-0.1-2.3-0.1-3.4-0.2-1.3-0.1-2.7-0.2-4-0.3-1.1-0.1-2.3-0.2-3.4-0.3-1.3-0.1-2.7-0.3-4-0.4-1.1-0.1-2.2-0.2-3.4-0.4-1.4-0.2-2.7-0.3-4.1-0.5-1.1-0.1-2.2-0.3-3.3-0.4-1.4-0.2-2.7-0.4-4.1-0.6-1.1-0.2-2.1-0.3-3.2-0.5-1.4-0.2-2.8-0.5-4.2-0.7-1-0.2-2-0.3-3-0.5l-4.5-0.9c-0.9-0.2-1.8-0.3-2.7-0.5-1.8-0.4-3.7-0.8-5.5-1.2-0.6-0.1-1.1-0.2-1.7-0.4-2.4-0.5-4.7-1.1-7.1-1.7l-2.4-0.6c-1.6-0.4-3.1-0.8-4.7-1.2-1-0.3-1.9-0.5-2.9-0.8-1.4-0.4-2.8-0.8-4.1-1.2l-3-0.9-3.9-1.2c-1-0.3-2.1-0.7-3.1-1-1.3-0.4-2.5-0.8-3.8-1.3-1.1-0.4-2.1-0.7-3.1-1.1-1.2-0.4-2.5-0.9-3.7-1.3-1.1-0.4-2.1-0.8-3.1-1.2-1.2-0.5-2.4-0.9-3.6-1.4-1-0.4-2.1-0.9-3.1-1.3l-3.6-1.5c-1-0.4-2.1-0.9-3.1-1.4-1.2-0.5-2.3-1-3.5-1.6-1-0.5-2.1-0.9-3.1-1.4-1.2-0.5-2.3-1.1-3.5-1.6-1-0.5-2-1-3.1-1.5-1.1-0.6-2.3-1.1-3.4-1.7-1-0.5-2-1-3-1.6-1.1-0.6-2.3-1.2-3.4-1.8-1-0.5-2-1.1-3-1.6-1.1-0.6-2.2-1.2-3.3-1.9-1-0.6-1.9-1.1-2.9-1.7-1.1-0.6-2.2-1.3-3.3-2-1-0.6-1.9-1.1-2.9-1.7l-3.3-2.1c-0.9-0.6-1.9-1.2-2.8-1.8l-3.3-2.1-2.7-1.8c-1.1-0.7-2.2-1.5-3.3-2.3-0.9-0.6-1.8-1.2-2.7-1.9l-3.3-2.4c-0.9-0.6-1.7-1.2-2.6-1.9-1.1-0.8-2.2-1.7-3.3-2.5-0.8-0.6-1.6-1.2-2.4-1.9-1.1-0.9-2.3-1.8-3.4-2.7-0.7-0.6-1.5-1.2-2.2-1.8-1.2-1-2.5-2.1-3.7-3.1l-1.8-1.5-5.4-4.8c-28.7-26.1-51.3-56.5-67.1-90.4z m464.6-262.7c-4.1-3.9-13.1-14.8-9.5-32.7 0.7-3.3 1.8-6.8 3.4-11.1 2.2-5.7 5.4-12.5 8.7-19.8 0.4-0.8 0.8-1.6 1.2-2.6-7.3 2.9-14.2 5.9-18.8 7.9-27.3 11.7-41.1 17.6-56.9 10.7-33.6-14.6-69.7-22.1-107.3-22.1-116.1 0-213.6 72.5-239.3 169.6-0.3 1.1-0.6 2.2-0.9 3.4l-0.6 2.4c-0.4 1.7-0.7 3.3-1.1 5-0.1 0.3-0.1 0.6-0.2 0.9-0.4 2.1-0.8 4.2-1.2 6.2 0 0.3-0.1 0.5-0.1 0.8-0.3 1.8-0.6 3.6-0.8 5.4-0.1 0.5-0.1 1-0.2 1.6-0.2 1.5-0.4 3.1-0.5 4.6-0.1 0.6-0.1 1.2-0.2 1.8-0.1 1.5-0.3 2.9-0.4 4.4 0 0.6-0.1 1.3-0.1 1.9-0.1 1.5-0.2 3-0.2 4.5 0 0.6-0.1 1.2-0.1 1.8-0.1 2.1-0.1 4.1-0.1 6.2 0 121.6 110.3 220.5 245.9 220.5 1.9 0 3.8 0 5.6-0.1 0.9 0 1.9-0.1 2.8-0.1 0.9 0 1.7-0.1 2.6-0.1 1.2 0 2.4-0.1 3.6-0.2 0.6 0 1.1-0.1 1.7-0.1 1.3-0.1 2.7-0.2 4-0.3 126.1-9.3 225.6-104.3 225.6-219.7 0-56.1-23.6-109.7-66.6-150.7zM623.6 296.4m-32 0a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM800.6 296.4m-32 0a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM273.7 593.9m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM491.2 593.9m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0Z" horiz-adv-x="1024" />
<glyph glyph-name="youxiang01" unicode="&#58976;" d="M934.4 59.903999999999996h-844.8c-16.384 0-29.696 13.312-29.696 29.696V669.696l430.08-412.672c5.632-5.632 13.312-8.704 21.504-8.704 5.12 0 9.728 1.536 13.824 3.584 4.608 1.024 9.216 3.584 12.8 7.168l425.984 414.208v-583.68c0.512-16.384-12.8-29.696-29.696-29.696z m-421.376 260.608l-404.48 387.584H911.36l-398.336-387.584zM934.4 768h-844.8C40.448 768 0.512 727.552 0.512 678.4v-588.8c0-49.152 39.936-89.6 89.6-89.6h844.8c49.152 0 89.6 39.936 89.6 89.6v588.8c-0.512 49.152-40.448 89.6-90.112 89.6z" horiz-adv-x="1024" />
<glyph glyph-name="70BasicIcons-all-59" unicode="&#58964;" d="M512 896C229.180952 896 0 666.819048 0 384s229.180952-512 512-512 512 229.180952 512 512S792.380952 896 512 896z m0-926.47619c-229.180952 0-414.47619 185.295238-414.47619 414.47619S282.819048 798.47619 512 798.47619s414.47619-185.295238 414.47619-414.47619-185.295238-414.47619-414.47619-414.47619zM711.92381 420.571429h-146.285715V579.047619c0 26.819048-21.942857 48.761905-48.761905 48.761905s-48.761905-21.942857-48.761904-48.761905v-158.47619h-146.285715c-26.819048 0-48.761905-21.942857-48.761904-48.761905s21.942857-48.761905 48.761904-48.761905h146.285715v-146.285714c0-26.819048 21.942857-48.761905 48.761904-48.761905s48.761905 21.942857 48.761905 48.761905v146.285714h146.285715c26.819048 0 48.761905 21.942857 48.761904 48.761905s-21.942857 48.761905-48.761904 48.761905z" horiz-adv-x="1026" />
</font>
</defs></svg>
<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
<template>
<div class="app-container">
<div class="app-info">
<img class="icon" src="../../assets/images/evue-logo.png" />
<div class="text">
<h2>EVUE</h2>
<p>广告检测-病毒检测-人工复检</p>
<p>
<span>3.7</span>
<span>⭐⭐⭐⭐⭐</span>
<span>6.7亿此安装</span>
<span>年满三周岁</span>
</p>
</div>
<button>安装</button>
</div>
<div class="app-screenshot">
<div style="width: 100%; margin: 20px auto; height: 410px">
<!-- Using the slider component -->
<slider ref="slider" :options="options" @tap="onTap">
<!-- slideritem wrapped package with the components you need -->
<slideritem
v-for="(item, index) in someList"
:key="index"
style="width: 230px; height: 410px; margin-right: 20px"
>
<img style="width: 230px; height: 410px" :src="item.html" />
</slideritem>
<!-- Customizable loading -->
<div slot="loading">loading...</div>
</slider>
</div>
</div>
<div class="app-slogan">生活好,支付宝</div>
<div class="comment-wrap">
<div class="top">
<h3>评论</h3>
<p>查看全部<i class="iconfont icon-jiantouyou"></i></p>
</div>
<div class="content">
<div class="score">
<h1>3.3</h1>
<p>6102人评分</p>
</div>
<ul class="score-summary">
<li>
<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>
<progress value="30" max="100"></progress>
</li>
<li>
<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>
<progress value="30" max="100"></progress>
</li>
<li>
<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>
<progress value="30" max="100"></progress>
</li>
<li>
<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>
<progress value="30" max="100"></progress>
</li>
<li>
<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>
<progress value="30" max="100"></progress>
</li>
</ul>
</div>
<div class="comment-text">
<textarea maxlength="500" placeholder="请输入评论内容"></textarea>
<p>
<button>发表评论</button>
</p>
</div>
<ul class="comment-list">
<li>
<div>
<label>EVUE</label>
<span>2020-02-02 02:02:02</span>
</div>
<p>
八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉
</p>
</li>
<li>
<div>
<label>EVUE</label>
<span>2020-02-02 02:02:02</span>
</div>
<p>
八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉
</p>
</li>
<li>
<div>
<label>EVUE</label>
<span>2020-02-02 02:02:02</span>
</div>
<p>
八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉八零芭芭拉
</p>
</li>
<li>
<a href="#">加载更多</a>
</li>
</ul>
</div>
<div class="app-update">
<div><h3>更新</h3></div>
<div>
<p>
【点评】发布后可以“补充点评”,针对性地补充完善<br />
【车型】车款列表新增款间差异配置<br />
【首页】本地频道增加联系销售,优惠活动随时聊
</p>
</div>
</div>
<div class="app-description">
<div><h3>应用介绍</h3></div>
<div>
<p>
易车手机客户端<br />
集汽车新闻、汽车报价、车友社区、汽车服务于一体的综合汽车服务平台。<br />
每天新增600多条汽车新闻和视频,共有1800多位自媒体人和机构签约。专为你推荐的个性化新闻,帮你全方位了解汽车。
</p>
</div>
</div>
<div class="app-basic">
<div><h3>应用信息</h3></div>
<div>
<div>
<p><label>资费</label><span>免费</span></p>
<p><label>大小</label><span>63.17MB</span></p>
<p><label>版本</label><span>10.48.0</span></p>
<p><label>更新时间</label><span>2021/3/17</span></p>
</div>
<div>
<p><label>应用分级</label><span>年满12周岁</span></p>
<p><label>开发者</label><span>北京字节跳动科技有限公司</span></p>
<p>
<label>隐私政策</label
><span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
</p>
<p>
<label>应用权限</label
><span>权限<i class="iconfont icon-jiantouyou"></i></span>
</p>
</div>
</div>
</div>
<div class="app-recommend">
<div class="top">
<h3>相关推荐</h3>
<p @click="seeMore">查看全部<i class="iconfont icon-jiantouyou"></i></p>
</div>
<div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
</div>
</div>
<div class="app-related">
<div class="top">
<h3>开发者的其他应用</h3>
<p @click="seeMore">查看全部<i class="iconfont icon-jiantouyou"></i></p>
</div>
<div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
</div>
</div>
</div>
</template>
<script>
import StarRating from "vue-star-rating";
import { slider, slideritem } from "vue-concise-slider";
export default {
name: "Application",
components: {
slider,
slideritem,
StarRating,
},
data() {
return {
//data list [array]
someList: [
{
html:
"https://appimg.dbankcdn.com/application/screenshut1/9f81c6a01fec445a930fccb829b7f53a.jpg",
},
{
html:
"https://appimg.dbankcdn.com/application/screenshut2/9f81c6a01fec445a930fccb829b7f53a.jpg",
},
{
html:
"https://appimg.dbankcdn.com/application/screenshut3/9f81c6a01fec445a930fccb829b7f53a.jpg",
},
{
html:
"https://appimg.dbankcdn.com/application/screenshut4/9f81c6a01fec445a930fccb829b7f53a.jpg",
},
{
html:
"https://appimg.dbankcdn.com/application/screenshut5/9f81c6a01fec445a930fccb829b7f53a.jpg",
},
],
//Slider configuration [obj]
options: {
currentPage: 0,
},
};
},
computed: {},
methods: {
seeMore() {
this.$router.push({ path: "/app-list" });
},
onTap(data) {
console.log(data);
},
},
beforeMount() {},
};
</script>
<style lang="scss" scoped>
@import "../../styles/iconfont/iconfont.css";
.app-container {
display: block;
margin: 20px 0px;
& > div.app-info {
display: flex;
align-items: center;
flex-direction: row;
& > img {
width: 112px;
height: 112px;
display: block;
}
& > div.text {
flex: 1;
margin-left: 20px;
& > h2 {
margin: 0px;
}
& > p {
margin: 0px;
}
& > p:nth-child(2) {
color: grey;
line-height: 30px;
font-size: 12px;
}
& > p:nth-child(3) {
font-size: 14px;
}
}
& > button {
min-width: 112px;
max-width: 112px;
width: 112px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 36px;
line-height: 36px;
border-radius: 18px;
background-color: #007dff;
font-size: 14px;
font-weight: 500;
color: #fff;
text-align: center;
display: block;
padding: 0 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
}
}
& > div.app-slogan {
padding: 20px 0px;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
}
& > div.comment-wrap {
& > div.top {
display: flex;
margin: 20px 0px;
flex-direction: row;
justify-content: space-between;
align-items: center;
& > h3 {
margin: 0px;
font-size: 20px;
color: #000;
}
& > p {
cursor: pointer;
margin: 0px;
& > img {
vertical-align: top;
width: 20px;
height: 20px;
}
}
}
& > div.content {
display: flex;
flex-direction: row;
margin-bottom: 20px;
& > div.score {
margin-right: 40px;
& > h1 {
font-size: 60px;
margin: 0px;
text-align: center;
}
& > p {
margin: 0px 10px;
}
}
& > ul.score-summary {
& > li {
display: flex;
flex-direction: row;
& > progress {
margin-left: 15px;
}
}
}
}
& > div.comment-text {
& > textarea {
width: 100%;
height: 100px;
font-size: 14px;
resize: none;
}
& > p {
margin: 0px;
text-align: right;
& > button {
font-size: 13px;
}
}
}
& > ul.comment-list {
margin-top: 20px;
& > li {
margin-bottom: 15px;
border-bottom: 1px solid #f2f2f2;
& > div {
& > label {
margin-right: 15px;
}
}
& > p {
font-size: 14px;
text-indent: 2em;
}
& > a {
display: block;
text-align: center;
font-size: 14px;
padding: 10px 0px;
color: #27C3C5;
border: 1px solid #27C3C5;
&:link {
color: #FFFFFF;
text-decoration: none;
background-color: none;
}
&:visited {
color: #27C3C5;
text-decoration: none;
background-color: none;
}
&:hover {
color: #FFFFFF;
text-decoration: underline;
background-color: #27C3C5;
}
&:active {
color: #FFFFFF;
text-decoration: underline;
background-color: #27C3C5;
}
}
&:last-child {
border-bottom: none;
}
}
}
}
& > div.app-basic {
font-size: 14px;
& > div {
display: flex;
flex-direction: row;
& > div {
width: 50%;
min-width: 50%;
max-width: 50%;
padding: 0px 20px;
box-sizing: border-box;
& > p {
display: flex;
margin: 0px;
padding: 10px 0px;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #f2f2f2;
}
& > p:hover {
background: #efefef;
}
}
}
}
& > div.app-description {
& > div {
& > p {
font-size: 14px;
}
}
}
& > div.app-recommend,
div.app-related {
& > div.top {
display: flex;
flex-direction: row;
justify-content: space-between;
}
& > div {
display: flex;
flex-wrap: wrap;
flex-direction: row;
& > div {
width: 12.5%;
max-width: 12.5%;
min-width: 12.5%;
& > img {
width: 72px;
height: 72px;
display: block;
margin: 10px auto;
}
& > h3 {
text-align: center;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="app-container">
<el-form :inline="true" :model="form" size="mini">
<el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
<el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
<el-form-item><el-button type="warning" @click="onAdd">添加</el-button></el-form-item>
</el-form>
<el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
<el-table-column prop="name" label="页面名称" align="center" width="150"></el-table-column>
<el-table-column prop="url" label="页面路径" align="center" width="150"></el-table-column>
<el-table-column prop="type" label="页面类型" align="center" width="150"></el-table-column>
<el-table-column prop="desc" label="页面描述" align="center" width="200"></el-table-column>
<el-table-column prop="create_at" label="创建时间" width="150"></el-table-column>
<el-table-column prop="create_by.username" label="创建者" width="150"></el-table-column>
<el-table-column prop="update_at" label="更新时间" width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="update_by.username" label="更新者" width="150"></el-table-column>
<el-table-column label="操作" align="center" min-width="180" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-wrapper">
<el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
</div>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%">
<el-form :model="form" ref="post" :rules="rules" label-width="100px">
<el-form-item label="页面名称">
<el-input v-model="post.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="页面路径">
<el-input v-model="post.url" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动描述">
<el-input v-model="post.desc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动类型">
<el-input v-model="post.type" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="资源文件" prop="app_icon">
<el-upload
drag
multiple
name="binfile"
:action="`${window.location.protocol}//${window.location.host}/api/v1/evm_store/upload`"
:on-remove="handleRemove"
:on-success="handleSuccess"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" plain @click="submitForm('post')">提交</el-button>
<el-button type="success" size="mini" plain @click="onReset('post')">重置</el-button>
<el-button size="mini" @click="dialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getFrameworkList, deleteFramework, addFramework, updateFramework } from '@/api/app-store'
import { mapTrim, compareObjectDiff, checkURL } from '@/utils/index'
import { formatUTCDateTime } from '@/utils/utils'
export default {
name: "Framework",
data() {
return {
total: 0,
list: [],
form: {
uuid: null,
name: null,
pagesize: 15,
pagenum: 1
},
isLoading: false,
dialogTitle: "",
dialogVisible: false,
currentValue: null,
currentIndex: null,
fileList: [],
post: {
name: null,
url: null,
desc: null,
type: null,
assets: {
files: []
}
},
rules: {
permission: [{ type: 'string', required: true, message: '权限名称不能为空', trigger: 'blur' }],
name: [
{ type: 'string', required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 1, max: 20, message: '字符串长度在 1 到 20 之间', trigger: 'blur' }
]
}
}
},
computed: {
window: () => window
},
methods: {
fetchData(params) {
this.isLoading = true
getFrameworkList(Object.assign({
pagenum: this.form.pagenum,
pagesize: this.form.pagesize,
}, params)).then(res => {
if (res.code == 200) {
this.total = res.count
this.list = res.data.map(item => {
item.create_at = formatUTCDateTime(item.create_at)
item.update_at = formatUTCDateTime(item.update_at)
return item
})
}
}).catch(err => {
// this.$message.error(err.message)
console.log(err.message)
}).finally(() => {
this.isLoading = false
})
},
fetchSelectData() {
getFrameworkList({ "scope_type": "list" }).then(res => {
if (res.code == 200) this.roles = res.data
}).catch(err => {
// this.$message.error(err.message)
console.log(err.message)
})
},
handleSizeChange(e) {
this.form.pagesize = e
this.fetchData(mapTrim(this.form))
},
handleCurrentChange(e) {
this.form.pagenum = e
this.fetchData(mapTrim(this.form))
},
handleEdit(index, row) {
this.post.name = row.name
this.post.url = row.url
this.post.desc = row.desc
this.post.type = row.type
this.currentValue = row
this.currentIndex = index
this.dialogTitle = "编辑"
this.dialogVisible = true
},
handleDelete(index, row) {
this.$alert('您确定要删除么?删除操作将不可恢复。如需取消操作,请点击右上角关闭按钮。', '删除提醒', {
confirmButtonText: '确定',
callback: action => {
if (action == 'confirm') deleteFramework(row.uuid).then(res => {
console.log(res)
// this.total -= 1
// this.$delete(this.list, index)
this.fetchData(mapTrim(this.form))
this.$message({ type: 'success', message: `成功删除第${ index }行` })
}).catch(err => {
this.$message.error(err.message)
})
}
})
},
handleRemove() {},
handleSuccess(res) {
if (res.code == 200) {
if (!checkURL(res.data.filepath))
res.data.filepath = `${window.location.origin}/${res.data.filepath}`
this.post.assets.files.push(res.data.filepath)
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
let result = true
if (valid) {
if (this.dialogTitle === '添加') addFramework(this.post).then(res => {
this.$message({ type: 'success', message: res.message })
this.fetchData(mapTrim(this.form))
}).catch(err => {
this.$message.error(err.message)
})
else if (this.dialogTitle === '编辑') updateFramework(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
// this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
this.$message({ type: 'success', message: res.message })
this.fetchData(mapTrim(this.form))
}).catch(err => {
this.$message.error(err.message)
})
} else {
result = false
}
this.dialogVisible = false
return result
})
},
onAdd() {
this.dialogTitle = "添加"
this.dialogVisible = true
},
onSubmit() {
this.form.pagenum = 1
this.form.pagesize = 15
this.fetchData(mapTrim(this.form))
},
onReset(formName) {
this.form.name = null
this.form.pagesize = 15,
this.form.pagenum = 1
this.$refs[formName].resetFields()
this.fetchData()
}
},
mounted() {},
created() {
if (this.$store.getters.role !== "ADMIN") this.$router.push({ path: "/403" })
this.fetchData()
this.fetchSelectData()
}
}
</script>
<style lang="scss" scoped>
.app-container {
& > div.page-wrapper {
margin: 10px 0px;
}
}
</style>
<template>
<div class="app-container">
<div style="width: 100%; margin: 20px auto; height: 200px">
<!-- Using the slider component -->
<slider ref="slider" :options="options">
<!-- slideritem wrapped package with the components you need -->
<slideritem
v-for="(item, index) in someList"
:key="index"
:style="item.style"
>{{ item.html }}</slideritem
>
<!-- Customizable loading -->
<div slot="loading">loading...</div>
</slider>
</div>
<div class="category-content">
<div class="top">
<label>精品应用</label>
<p><span>查看更多</span><i class="iconfont icon-jiantouyou"></i></p>
</div>
<div class="content">
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
<div class="item" @click="toApp">
<img src="../../assets/images/evue-logo.png" />
<span>EVUE</span>
<button>安装</button>
</div>
</div>
</div>
<div class="list-content">
<div class="top">
<label>大家都在用</label>
<p><span>查看更多</span><i class="iconfont icon-jiantouyou"></i></p>
</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>
</div>
</template>
<script>
import { slider, slideritem } from "vue-concise-slider";
import StarRating from "vue-star-rating";
export default {
name: "Gallery",
data() {
return {
//data list [array]
someList: [
{
html: "slide1",
style: {
background: "#1bbc9b",
},
},
{
html: "slide2",
style: {
background: "#4bbfc3",
},
},
{
html: "slide3",
style: {
background: "#7baabe",
},
},
],
//Slider configuration [obj]
options: {
loop: true,
speed: 300,
autoplay: "1000",
currentPage: 0,
},
};
},
components: {
slider,
slideritem,
StarRating,
},
computed: {},
methods: {
toApp() {
this.$router.push({ path: "/application" })
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
mounted() {},
created() {},
};
</script>
<style lang="scss" scoped>
div.category-content,
div.list-content {
& > 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-grow: 1;
margin: 20px 0px;
& > div.item {
flex: 1;
cursor: pointer;
margin: 15px 0px;
display: inline-flex;
flex-direction: column;
border-bottom: 1px solid #f2f2f2;
& > img {
width: 80px;
height: 80px;
margin: 0px auto;
display: inline-block;
transition: all 0.6s;
}
& > img:hover {
transform: scale(1.3);
}
& > span {
font-size: 15px;
text-align: center;
margin: 10px 0px;
}
& > button {
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.list-content {
& > 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>
......@@ -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"
......
<template>
<div class="app-container">
<div class="left">
<div>
<img src="../../assets/images/evue-logo.png" />
<h3>EVUE</h3>
</div>
<ul>
<li
v-for="(item, index) in navList"
:key="index"
@click="updateNav(index)"
:class="navIndex == index ? 'active' : ''"
>
{{ item }}
</li>
</ul>
</div>
<div v-show="navIndex === 0" class="right">
<p class="title">个人中心</p>
<div class="content">
<div>
<img src="../../assets/images/evue-logo.png" />
<input type="button" value="更换头像" />
<p>昵称:<input type="text" placeholder="请输入昵称" /></p>
<p>
性别:<input
type="radio"
name="gender"
value="男"
id="male"
/><label for="male"></label>
<span
style="width: 20px; height: 10px; display: inline-block"
></span>
<input type="radio" name="gender" value="女" id="female" /><label
for="female"
></label
>
</p>
<p>
<button>修改</button>
</p>
</div>
</div>
</div>
<div v-show="navIndex === 1" class="right">
<p class="title">消息中心</p>
<div class="content">
<img src="../../assets/images/no-message.png" />
<h3 class="tip-text">暂无消息</h3>
<ul class="message-list">
<li>
<p>
<span>EVUE</span><span>2020-02-02 20:20:20</span
><span>审核消息</span>
</p>
<p>
法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
</p>
</li>
<li>
<p>
<span>EVUE</span><span>2020-02-02 20:20:20</span
><span>留言消息</span>
</p>
<p>
法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
</p>
</li>
</ul>
</div>
</div>
<div v-show="navIndex === 2" class="right">
<p class="title">上传应用</p>
<div class="content">
<form @submit.prevent="false">
<h4>小程序 名称</h4>
<p>
<input type="text" placeholder="请输入小程序名称" />
</p>
<h4>小程序 作者</h4>
<p>
<input type="text" placeholder="请输入小程序作者" />
</p>
<h4>小程序 ICON/二维码</h4>
<div class="icon-list">
<div>
<input type="file" />
<span>上传ICON</span>
</div>
<div>
<input type="file" />
<span>上传小程序码</span>
</div>
<div>
<input type="file" />
<span>上传公众号二维码</span>
</div>
</div>
<h4>小程序 介绍</h4>
<textarea placeholder="请输入小程序介绍"></textarea>
<h4>小程序 分类</h4>
<div>
<select>
<option>一一一一一</option>
<option>二二二二二</option>
<option>三三三三三</option>
</select>
</div>
<h4>小程序 截图</h4>
<div class="app-screenshot">
<input type="file" />
</div>
<h4>联系微信</h4>
<p>
<input type="text" placeholder="请输入联系微信" />
</p>
<h4>联系手机号</h4>
<p>
<input type="number" placeholder="请输入手机号" />
</p>
<h4>运营者</h4>
<p>
<input type="text" placeholder="请输入运营者姓名" />
</p>
<p class="btn">
<button>提交申请</button>
</p>
</form>
</div>
</div>
<div v-show="navIndex === 3" class="right">
<p class="title">应用中心</p>
<div class="content">
<ul class="app-list">
<li>
<img src="../../assets/images/evue-logo.png" />
<div>
<p>
<span>应用程序名称</span>
<span>应用版本号</span>
<span>提交时间</span>
<span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
</p>
<p>应用描述</p>
</div>
</li>
<li>
<img src="../../assets/images/evue-logo.png" />
<div>
<p>
<span>应用程序名称</span>
<span>应用版本号</span>
<span>提交时间</span>
<span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
</p>
<p>应用描述</p>
</div>
</li>
<li>
<img src="../../assets/images/evue-logo.png" />
<div>
<p>
<span>应用程序名称</span>
<span>应用版本号</span>
<span>提交时间</span>
<span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
</p>
<p>应用描述</p>
</div>
</li>
</ul>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<div v-show="navIndex === 4" class="right">
<p class="title">联系我们</p>
<div class="content">
<p class="company">武汉市字节码科技有限公司</p>
<div class="company-desc">
武汉市字节码科技有限公司是一家专业从事物联网底层核心技术及解决方案研发的创新企业,团队核心成员来自国内顶尖的操作系统团队deepin,深耕物联网和操作系统等底层核心技术,具有十余年丰富的产品研发经验。
</div>
<ul class="company-basic">
<li>
<!-- <img src="../../assets/images/evue-logo.png" /> -->
<p><i class="iconfont icon-dizhi"></i></p>
<h4>联系地址</h4>
<p>武汉市洪山区民族大道紫菘枫尚国际大厦1109室</p>
</li>
<li>
<!-- <img src="../../assets/images/evue-logo.png" /> -->
<p><i class="iconfont icon-weixin"></i></p>
<h4>微信:丁总</h4>
<p>dragondjf</p>
</li>
<li>
<!-- <img src="../../assets/images/evue-logo.png" /> -->
<p><i class="iconfont icon-youxiang"></i></p>
<h4>联系邮箱</h4>
<p>scriptiot@aliyun.com</p>
</li>
</ul>
</div>
</div>
<div v-show="navIndex === 5" class="right">
<p class="title">我的账号</p>
<div class="content">
<div class="update-password">
<p>旧密码:<input type="password" placeholder="请输入旧密码" /></p>
<p>新密码:<input type="password" placeholder="请输入新密码" /></p>
<button>修改密码</button>
</div>
<div class="logout">
<button>退出账号</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AppProfile",
components: {},
data() {
return {
navList: [
"个人资料",
"消息中心",
"发布应用",
"我的发布",
"联系我们",
"我的账号",
],
navIndex: 0,
};
},
computed: {},
methods: {
updateNav(index) {
this.navIndex = index;
},
},
beforeMount() {},
};
</script>
<style lang="scss" scoped>
.app-container {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: row;
margin: 20px 0px;
& > div.left {
width: 250px;
box-shadow: 0px 0px 1px #cccccc;
& > div {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #f0f0f0;
& > img {
width: 100px;
height: 100px;
display: block;
border-radius: 50%;
}
}
& > ul {
& > li {
cursor: pointer;
padding: 15px 0px;
text-align: center;
font-size: 15px;
border-bottom: 1px solid #f0f0f0;
transition: all 0.5s;
&.active {
border-left: 3px solid #4cd1e0;
}
&:hover {
color: #4cd1e0;
}
}
}
}
& > div.right {
flex: 1;
margin-left: 20px;
box-shadow: 0px 0px 1px #cccccc;
transition: all 0.5s;
& > p.title {
margin: 0px;
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
& > div.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
& > div {
& > img {
width: 120px;
height: 120px;
display: block;
margin: 20px auto;
}
& > input[type="button"] {
display: block;
cursor: pointer;
width: 150px;
height: auto;
margin: 20px auto;
font-size: 14px;
background: none;
padding: 5px 15px;
border: 1px solid #f0f0f0;
}
& > p {
margin: 15px;
& > button {
cursor: pointer;
width: 100%;
padding: 5px 15px;
font-size: 14px;
}
}
}
& > h3.tip-text {
margin: 0px;
color: #cccccc;
}
& > ul.message-list {
flex: 1;
width: 100%;
& > li {
margin: 10px;
& > p {
font-size: 14px;
}
& > p:first-child {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span:nth-child(2) {
color: grey;
}
& > span:nth-child(3) {
color: #4cd1e0;
font-size: 13px;
}
}
}
}
& > ul.app-list {
width: 100%;
height: auto;
& > li {
display: flex;
flex-direction: row;
padding: 10px 0px;
border-bottom: 1px solid #f0f0f0;
& > img {
width: 80px;
height: 80px;
display: block;
}
& > div {
flex: 1;
margin-left: 10px;
& > p:first-child {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span:last-child {
color: #4cd1e0;
cursor: pointer;
font-size: 14px;
}
}
& > p:last-child {
color: grey;
font-size: 14px;
}
}
}
}
& > ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
& > li {
display: inline;
& > a {
color: black;
font-size: 13px;
float: left;
padding: 8px 16px;
text-decoration: none;
&:hover {
color: #ffffff;
background: #4cd1e0;
}
}
}
}
& > p.company {
font-size: 20px;
text-align: center;
}
& > div.company-desc {
font-size: 14px;
text-indent: 2em;
color: #808080;
line-height: 24px;
}
& > ul.company-basic {
display: flex;
flex-direction: row;
& > li {
width: 33.3333%;
margin: 10px;
& > img {
display: block;
width: 100px;
height: 100px;
margin: 20px auto;
}
& > h4 {
text-align: center;
}
& > p {
font-size: 14px;
color: #808080;
text-align: center;
& > i {
color: #4cd1e0;
font-size: 60px;
}
}
}
}
& > form {
flex: 1;
width: 100%;
& > h4 {
font-size: 16px;
color: #303030;
margin-top: 30px;
margin-bottom: 18px;
}
& > p {
input {
width: 100%;
height: 34px;
margin: 0px;
padding: 0 10px;
font-size: 14px;
border: 1px solid #e5e5e5;
box-sizing: border-box;
}
}
& > p.btn {
text-align: center;
& > button {
cursor: pointer;
color: #ffffff;
font-size: 14px;
padding: 10px 45px;
min-width: 100px;
border: none;
background: #4cd1e0;
}
}
& > div.app-screenshot {
& > input[type="file"] {
width: 210px;
height: 100px;
padding: 10px;
font-size: 14px;
color: #cccccc;
text-align: center;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed #4cd1e0;
}
}
& > div.icon-list {
display: flex;
flex-direction: row;
justify-content: space-between;
& > div {
display: flex;
flex-direction: column;
align-items: center;
& > span {
color: #4cd1e0;
margin: 10px 0px 0px 0px;
font-size: 13px;
}
& > input[type="file"] {
width: 210px;
height: 100px;
padding: 10px;
font-size: 14px;
color: #cccccc;
text-align: center;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px dashed #4cd1e0;
}
}
}
& > textarea {
width: 100%;
height: 100px;
resize: none;
padding: 10px;
font-size: 14px;
}
}
& > div.update-password {
width: 100%;
margin: 20px 0px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
& > p {
margin: 5px 0px;
font-size: 14px;
}
& > button {
cursor: pointer;
color: #ffffff;
font-size: 14px;
padding: 6px 25px;
min-width: 100px;
border: none;
background: #4cd1e0;
}
}
& > div.logout {
width: 100%;
margin: 20px 0px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
& > button {
cursor: pointer;
color: #ffffff;
font-size: 14px;
padding: 6px 25px;
min-width: 100px;
border: none;
background: #4cd1e0;
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -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