Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>ISeeAdmin 【首页】 </title>
<!-- <link rel="stylesheet" href="/static/element/index.css">-->
<!-- <link href="https://cdn.staticfile.org/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">-->
<link href="https://cdn.staticfile.org/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
<link rel="stylesheet" href="/static/iconfont/iconfont.css">
<link rel="stylesheet" href="/static/css/common.css">
<!-- 开发环境-->
<!-- <script src="/static/js/iseeadmin.js"></script>-->
<!-- 正式环境-->
<script src="/static/js/iseeadmin.min.js"></script>
<script src="/static/js/menu.js"></script>
<!-- 开发环境-->
<!-- <script src="/static/js/vue.js"></script>-->
<!-- 正式环境-->
<!-- <script src="/static/js/vue.min.js"></script>-->
<!-- <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>-->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<!-- <script src="/static/element/index.js"></script>-->
<!-- <script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>-->
<script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<!-- <script src="/static/js/axios.min.js"></script>-->
</head>
<body>
<div id="app" v-cloak>
<el-container style="height: 100%;min-height:100vh;">
<el-aside v-show="iseeData.asideShow" width="210px">
<!-- 左侧logo 开始-->
<div class="aside-logo">
<img class="aside-logo-img" src="/static/images/logo.png"
alt=""> ISeeAdmin
</div>
<!-- 左侧logo 结束-->
<!-- 左侧菜单 开始-->
<el-menu @select="iseeMenuOpen" style="width: 210px;"
unique-opened
:default-active="iseeData.defaultActive"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409eff">
<iseemenu :menu="iseeData.menu"></iseemenu>
</el-menu>
<!-- 左侧菜单 结束-->
</el-aside>
<el-container>
<el-header height="83px">
<div class="isee-header-div">
<!-- 面包屑 开始-->
<div style="width: 100%;display: inherit;">
<span class="aside-show" @click="iseeAsideShow">
<i :class="iseeData.asideShowIcon"></i>
</span>
<el-breadcrumb style="line-height: 50px" separator="/">
<el-breadcrumb-item v-for="(item,index) in iseeData.breadcrumb" :key="index">{{item.title}}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 面包屑 结束-->
<!-- icon功能列表，可根据需要修改 开始-->
<div>
<ul class="isee-ul">
<li class="isee-li">
<i style="font-size: 20px" class="el-icon-bell"></i>
</li>
<li @click="iseeFullScreen" class="isee-li">
<span class="iconfont" style="font-size: 20px" v-html="iseeData.fullscreenIcon"></span>
</li>
<li class="isee-li" @click="iseeData.drawer = true">
<span class="iconfont" style="font-size: 20px"></span>
</li>
</ul>
</div>
<!-- icon功能列表，可根据需要修改 结束-->
<!-- avatar显示 开始-->
<div>
<el-dropdown @command="iseeOpenUrl">
<span class="el-dropdown-link">
<el-avatar style="margin-top: 9px" :size="iseeData.avatar.size"
:src="iseeData.avatar.url"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in iseeData.avatar.list" :icon="item.icon"
:key="index" :command="index">{{item.title}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- avatar显示 结束-->
</div>
<div style="display: flex">
<!-- 标签页列表 开始-->
<span @click="iseeTagDivMove(1)" class="isee-tag-span">
<i class="el-icon-d-arrow-left"></i>
</span>
<div ref="iseeTagDiv" class="isee-tag-div">
<el-tag style="cursor:pointer;margin-right: 5px;" v-for="(item,index) in iseeData.tagList"
:key="index"
@click="iseeTagSwitch(item.url,item.index,item.breadcrumb)"
:effect="item.effect"
:type="item.type"
@close="iseeTagClose(item.url,index)"
size="medium"
:closable="item.closable"><i v-show="item.show" class="el-icon-view"></i> {{item.title}}
</el-tag>
</div>
<span @click="iseeTagDivMove(2)" class="isee-tag-span">
<i class="el-icon-d-arrow-right"></i>
</span>
<!-- 标签页列表 结束-->
<!-- 标签页集中操作 开始-->
<div style="float: right;margin-left: 10px">
<el-dropdown @command="iseeTagCommandClose">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down isee-el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">关闭当前标签页</el-dropdown-item>
<el-dropdown-item command="2">关闭其它标签页</el-dropdown-item>
<el-dropdown-item command="3">关闭全部标签页</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 标签页集中操作 结束-->
</div>
<!--抽屉式展示-->
<el-drawer
title="iseeAdmin"
:visible.sync="iseeData.drawer"
:direction="iseeData.direction"
:show-close="iseeData.showClose"
custom-class="isee-drawer-info"
>
<el-divider></el-divider>
<div style="font-size: 14px">
<p class="isee-title">版本信息</p>
<ul class="isee-drawer-ul">
<li>
当前版本：iseeAdmin-v{{iseeData.version}}
</li>
<li>
基于框架：vue v2.6.10，element v2.12.0
</li>
<li>
下载地址：
<el-link type="primary" :underline="false" href="https://gitee.com/youge/iseeadmin"
target="_blank">码云
</el-link>
|
<el-link type="primary" :underline="false" href="https://github.com/fukedi/iseeadmin"
target="_blank">github
</el-link>
</li>
</ul>
</div>
<el-divider></el-divider>
<div style="font-size: 14px">
<p class="isee-title">关于版权</p>
<ul class="isee-drawer-ul">
<li>
iseeAdmin完全开源，可免费使用
</li>
<li>
QQ交流群：927049524
</li>
</ul>
</div>
</el-drawer>
<!--抽屉式展示 结束-->
</el-header>
<el-main>
<!-- 主内容展示-->
<el-card class="box-card" style="margin-bottom: 10px">
<div slot="header" class="clearfix">
<span>简介</span>
</div>
<div style="padding-left: 40px">
iseeAdmin是一个基于vue和element UI实现的后台前端解决方案，特别针对后端人员设计的一款后台前端产品，让后端人员更注重业务逻辑开发，项目开发更快。本项目免费开源，欢迎使用！
</div>
</el-card>
<el-card class="box-card" style="margin-bottom: 10px">
<div slot="header" class="clearfix">
<span>基本情况</span>
</div>
<ul class="isee-drawer-ul">
<li>
1. iseeAdmin基于vue和element UI开发
</li>
<li>
2. 使用对象：主要是后端人员，要求掌握vue基本技能和了解element ui
</li>
<li>
3. iseeAdmin参考了
<el-link type="primary" :underline="false"
href="https://panjiachen.github.io/vue-element-admin" target="_blank">
vue-element-admin
</el-link>
和
<el-link type="primary" :underline="false" href="https://www.layui.com/admin/std/dist/views"
target="_blank">layuiAdmin
</el-link>
页面布局
</li>
<li>
4. 下载地址：
<el-link type="primary" :underline="false" href="https://gitee.com/youge/iseeadmin"
target="_blank">码云
</el-link>
|
<el-link type="primary" :underline="false" href="https://github.com/fukedi/iseeadmin"
target="_blank">github
</el-link>
</li>
<li>
5. demo：
<el-link type="primary" :underline="false" href="http://56c.net.cn"
target="_blank">56c.net.cn
</el-link>
</li>
<li>
6.
<el-link type="primary" :underline="false" href="https://www.kancloud.cn/ghzz789/iseeadmin"
target="_blank">使用文档
</el-link>
</li>
<li>
7. 交流QQ群：927049524
</li>
</ul>
</el-card>
<el-card class="box-card" style="margin-bottom: 10px">
<div slot="header" class="clearfix">
<span>特点对比</span>
</div>
<div style="padding-left: 40px">
<p>上手难度 vue-element-admin > iseeAdmin > layuiAdmin</p>
<p>vue-element-admin和iseeAdmin都是基于vue和element
UI开发，但vue-element-admin是用vue-cli脚手架（采用脚手架开发是主流）开发的，这要求使用者需要比较专业的前端技能知识，但很多后端人员并不具备。iseeAdmin是直接引入式开发，使用者只需要掌握vue或MVVM模式的基本知识，就能快速开发，相对来说，难度低很多。
</p>
<p>
layuiAdmin和iseeAdmin都是采用直接引入式开发的，layuiAdmin只需要使用者掌握传统的javascript知识就能开发，但iseeAdmin除此之外，还要求掌握vue或MVVM模式的知识，所以难度增加。</p>
<p>那么问题来了！既然layuiAdmin上手难度是最低的，为什么还要使用vue-element-admin和iseeAdmin？</p>
<p>1. 使用MVVM模式进行前端开发的快乐是传统前端开发无法比拟的<br>
2. layuiAdmin是收费的，vue-element-admin和iseeAdmin都开源，可免费使用</p>
</div>
</el-card>
<!-- 主内容展示 结束-->
</el-main>
</el-container>
</el-container>
</div>
<script>
const iseeAvatar = {
url: '/static/images/avatar01.gif',
size: 32,
list: [
{
index: '',
indexPath: [],
icon: 'el-icon-user-solid',
url: '',
target: '_self',
title: 'admin',
}, {
index: '6-1-0',
indexPath: ["6", "6-1", "6-1-0"],
icon: 'el-icon-tickets',
url: '/pages/sets/myset/profile.html',
target: '_self',
title: '基本资料',
}, {
index: '6-1-1',
indexPath: ["6", "6-1", "6-1-1"],
icon: 'el-icon-edit-outline',
url: '/pages/sets/myset/password.html',
target: '_self',
title: '修改密码',
}, {
index: '',
indexPath: [],
icon: 'el-icon-switch-button',
url: '',
target: '_self',
title: '安全退出',
},
]
}
var iseemenu = {
props: ['menu'],
name: 'iseemenu',
template: `
<div>
<template v-for="item in menu">
<el-submenu :index="item.index" v-if="item.children.length">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{item.title}}</span>
</template>
<iseemenu :menu="item.children"></iseemenu>
</el-submenu>
<el-menu-item :index="item.index" v-else>
<i :class="item.icon"></i>
<span slot="title">{{item.title}}</span>
</el-menu-item>
</template>
</div>`,
}
var app = new Vue({
el: '#app',
components: {
iseemenu
},
data: {
iseeData: {
version: iseeAdmin.version,
drawer: false,
direction: 'rtl',
showClose: false,
status: false,
show: true,
asideShow: iseeAdmin.asideShow,
asideShowIcon: iseeAdmin.asideShowIcon,
fullscreen: false,
fullscreenIcon: '',
defaultActive: iseeAdmin.defaultActive,
tagList: iseeAdmin.tagList,
breadcrumb: iseeAdmin.breadcrumb,
menu: iseeMenu,
avatar: iseeAvatar
},
/*your data*/
},
methods: {
iseeTagSwitch(url, index, breadcrumb) {
iseeAdmin.iseeTagSwitch(url, index, breadcrumb, this.iseeData)
},
iseeTagClose(url, index) {
iseeAdmin.iseeTagClose(url, index, this.iseeData)
},
iseeTagCommandClose(command) {
iseeAdmin.iseeTagCommandClose(command, this.iseeData)
},
iseeMenuOpen(key, keyPath) {
iseeAdmin.iseeMenuOpen(key, keyPath, this.iseeData)
},
iseeFullScreen() {
iseeAdmin.iseeFullScreen(this.iseeData)
},
iseeAsideShow() {
iseeAdmin.iseeAsideShow(this.iseeData)
},
iseeOpenUrl(command) {
iseeAdmin.iseeMenuOpen(this.iseeData.avatar.list[command].index, this.iseeData.avatar.list[command].indexPath, this.iseeData)
},
iseeTagDivMove(flag) {
flag == 1 ? this.$refs.iseeTagDiv.scrollLeft += 80 : this.$refs.iseeTagDiv.scrollLeft -= 80
},
/*your methods*/
},
beforeMount() {
iseeAdmin.init(this.iseeData)
/*your beforeMount*/
},
mounted() {
}
});
</script>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )