DepSystem
/
new_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

vue web fix

vue
adiao 3 years ago
parent
8dd99b7a9d
commit
55bea5dbec
2 changed files with 70 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      src/views/Index.vue
  2. 54
      src/views/navigations/sidebar.vue

45
src/views/Index.vue
Unescape View File

@ -2,31 +2,7 @@
<div class="IndexPage row"> <div class="IndexPage row">
<!-- left 区域 --> <!-- left 区域 -->
<div class="col-1 item item-1"> <div class="col-1 item item-1">
<div class="list-group list-group-flush menu" role="tablist" id="list-tab"> <sidebar />
<a href="list-home" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
role="tab" aria-controls="home">dashboard</a>
<a href="list-people" class="list-group-item list-group-item-action" id="list-people-list"
data-toggle="list" role="tab" aria-controls="people">人员管理</a>
<a href="list-asset" class="list-group-item list-group-item-action" id="list-asset-list" data-toggle="list"
role="tab" aria-controls="asset">资产管理</a>
<a href="list-vendor" class="list-group-item list-group-item-action" id="list-vendor-list"
data-toggle="list" role="tab" aria-controls="vendor">厂商管理</a>
<a href="list-claims" class="list-group-item list-group-item-action" id="list-claims-list"
data-toggle="list" role="tab" aria-controls="claims">报销管理</a>
<a href="list-repair" class="list-group-item list-group-item-action" id="list-repair-list"
data-toggle="list" role="tab" aria-controls="repair">维修管理</a>
<a href="list-permission" class="list-group-item list-group-item-action" id="list-permission-list"
data-toggle="list" role="tab" aria-controls="permission">权限管理</a>
<a href="list-export" class="list-group-item list-group-item-action" id="list-export-list"
data-toggle="list" role="tab" aria-controls="export">列表导出</a>
</div>
</div> </div>
<!-- right 区域 --> <!-- right 区域 -->
@ -39,11 +15,13 @@
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="container-fluid row "> <div class="container-fluid row ">
<div class="col-1 item"> <div class="col-1 item">
<span>
<a class="navbar-brand"> <a class="navbar-brand">
<img src="https://img.icons8.com/cotton/24/null/money--v2.png" <img src="https://img.icons8.com/cotton/24/null/money--v2.png"
class="d-inline-block align-text-top" alt="Logo" /> class="d-inline-block align-text-top" alt="Logo" />
Bootstrap 资产系统
</a> </a>
</span>
</div> </div>
<div class="col-3 item"> <div class="col-3 item">
<form class="d-flex align-items-center" role="search"> <form class="d-flex align-items-center" role="search">
@ -53,6 +31,9 @@
</form> </form>
</div> </div>
<div class="col-1 item" id="userImage"> <div class="col-1 item" id="userImage">
<div class="set">
</div>
<img src="../image/user.png" alt="userIMage"> <img src="../image/user.png" alt="userIMage">
</div> </div>
</div> </div>
@ -74,8 +55,11 @@
</template> </template>
<script > <script >
import sidebar from './navigations/sidebar.vue';
export default { export default {
name: 'App5Index', name: 'App5Index',
components: { sidebar },
data() { data() {
return { return {
@ -98,7 +82,7 @@ export default {
.IndexPage { .IndexPage {
height: 100vh; height: 100vh;
padding: 0; padding: 0;
background-color: aqua; background-color: white;
box-sizing: border-box; box-sizing: border-box;
} }
@ -107,12 +91,7 @@ export default {
padding: 0; padding: 0;
} }
/* 侧栏样式 */
.item-1,
.menu {
background-color: #23a6d5;
text-align: center;
}
/* 导航栏的样式 */ /* 导航栏的样式 */
.header { .header {

54
src/views/navigations/sidebar.vue
Unescape View File

@ -0,0 +1,54 @@
<template>
<div class="navigation">
<div class="list-group list-group-flush menu" role="tablist" id="list-tab">
<!-- <a href="index/list-home" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
role="tab" aria-controls="home">dashboard</a> -->
<router-link class="nav-item" to="/index/list-home" tager="span">DashBoard</router-link>
<router-link class="nav-item" to="/index/list-people" tager="span">人员管理</router-link>
<router-link class="nav-item" to="/index/list-asset" tager="span">资产管理</router-link>
<router-link class="nav-item" to="/index/list-vendor" tager="span">厂商管理</router-link>
<router-link class="nav-item" to="/index/list-claims" tager="span">报销管理</router-link>
<router-link class="nav-item" to="/index/list-repair" tager="span">维修管理</router-link>
<router-link class="nav-item" to="/index/list-permission" tager="span">权限管理</router-link>
<router-link class="nav-item" to="/index/list-export" tager="span">列表导出</router-link>
<!-- <a href="list-people" class="list-group-item list-group-item-action" id="list-people-list" data-toggle="list"
role="tab" aria-controls="people">人员管理</a>
<a href="list-asset" class="list-group-item list-group-item-action" id="list-asset-list" data-toggle="list"
role="tab" aria-controls="asset">资产管理</a>
<a href="list-vendor" class="list-group-item list-group-item-action" id="list-vendor-list" data-toggle="list"
role="tab" aria-controls="vendor">厂商管理</a>
<a href="list-claims" class="list-group-item list-group-item-action" id="list-claims-list" data-toggle="list"
role="tab" aria-controls="claims">报销管理</a>
<a href="list-repair" class="list-group-item list-group-item-action" id="list-repair-list" data-toggle="list"
role="tab" aria-controls="repair">维修管理</a>
<a href="list-permission" class="list-group-item list-group-item-action" id="list-permission-list"
data-toggle="list" role="tab" aria-controls="permission">权限管理</a>
<a href="list-export" class="list-group-item list-group-item-action" id="list-export-list" data-toggle="list"
role="tab" aria-controls="export">列表导出</a> -->
</div>
</div>
</template>
<style>
/* 侧栏样式 */
.item-1,
.menu {
background-color: #23a6d5;
text-align: center;
}
.menu a {
color: #fff;
background-color: #23a6d5;
text-decoration: none;
}
</style>
Write Preview
Loading…
Cancel
Save