caojunting
/
MusicRoadUI
forked from software/MusicRoadUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

头像

Browse Source
master
zhaowei 3 years ago
parent d025a13da1
commit 27ab84335f
9 changed files with 285 additions and 130 deletions
Show Stats Download Patch File Download Diff File

2
src/api/Device.js → src/api/DeviceManage.js
Unescape Escape View File

@ -1,6 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询设备数据 // 查询设备数据
export function listDevice(query) { export function listMusic(query) {
return request({ return request({
url: '/system/device/list', url: '/system/device/list',
method: 'get', method: 'get',

62
src/layout/components/Device/index.vue
Unescape Escape View File

@ -5,7 +5,7 @@
</div> </div>
<div class="buttonBox"> <div class="buttonBox">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button> <el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button> <!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button> -->
</div> </div>
<div id="deviceBox"> <div id="deviceBox">
<div class="deviceMsg" v-for="(item, index) in deviceData" :key="index"> <div class="deviceMsg" v-for="(item, index) in deviceData" :key="index">
@ -91,32 +91,35 @@
</div> </div>
<!-- 新增设备对话框--> <!-- 新增设备对话框-->
<el-dialog title :visible.sync="addDevice" width="20%" style="top:20vh" center> <el-dialog title :visible.sync="addDevice" width="20%" style="top:20vh" center>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="el-form3">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<!-- <el-form-item label="设备编号" prop="deviceId">
<el-input placeholder="请输入设备编号" v-model="form.deviceId" class="el-input3"></el-input>
</el-form-item> -->
<el-form-item label="位置" prop="location"> <el-form-item label="位置" prop="location">
<el-input placeholder="请输入位置" v-model="form.location"></el-input> <el-input placeholder="请输入位置" v-model="form.location" class="el-input3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="IP地址" prop="address"> <el-form-item label="IP地址" prop="deviceIp">
<el-input placeholder="请输入IP地址" v-model="form.address"></el-input> <el-input placeholder="请输入IP地址" v-model="form.deviceIp" class="el-input3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="音符" prop="note"> <el-form-item label="音符" prop="note">
<el-input placeholder="请输入音符" v-model="form.note"></el-input> <el-input placeholder="请输入音符" v-model="form.note" class="el-input3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="音量" prop="volume"> <el-form-item label="音量" prop="volume">
<el-input placeholder="请输入音量" v-model="form.volume"></el-input> <el-input placeholder="请输入音量" v-model="form.volume" class="el-input3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -133,7 +136,7 @@
<script> <script>
import flexible from "@/layout/flexible.js"; import flexible from "@/layout/flexible.js";
import { listDevice } from "@/api/Device"; import { listMusic } from "@/api/DeviceManage";
export default { export default {
data() { data() {
return { return {
@ -141,14 +144,19 @@ export default {
queryParams: { queryParams: {
pageNum: 1 pageNum: 1
}, },
address: null, deviceIp: null,
note: null, note: null,
volume: null, volume: null,
location: null, location: null,
addDevice: false, addDevice: false,
form: {}, form: {
forms: {},
location:null,
deviceIp:null,
note:null,
volume:null,
},
rules: {}, rules: {},
deviceData: [] deviceData: []
}; };
@ -160,7 +168,7 @@ export default {
//查询设备数据 //查询设备数据
getList() { getList() {
this.loading = true; this.loading = true;
listDevice(this.queryParams).then(result => { listMusic(this.queryParams).then(result => {
this.deviceData = result.rows; this.deviceData = result.rows;
this.loading = false; this.loading = false;
}); });
@ -168,13 +176,19 @@ export default {
//新增按钮 //新增按钮
editDevice() { editDevice() {
this.addDevice = true; this.addDevice = true;
// var deviceId =this.form.deviceId;
// var location = this.form.location;
// var deviceIp = this.form.deviceIp;
// var note = this.form.note;
// var volume = this.form.volume;
// this.deviceData.push({deviceId,location,deviceIp,note,volume});
}, },
//确定按钮 //确定按钮
submitForm() { submitForm() {
this.addDevice = false; this.addDevice = false;
// this.deviceData.push({location});
}, },
//删除按钮
deleteDevice() {},
//删除对应的喇叭 //删除对应的喇叭
removeItem(index, deviceData) { removeItem(index, deviceData) {
this.$modal this.$modal
@ -226,7 +240,6 @@ export default {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
height: 14px; height: 14px;
margin-right: -15px; margin-right: -15px;
} }
.iconImg { .iconImg {
@ -249,7 +262,7 @@ export default {
.deviceMsg { .deviceMsg {
margin-left: 0rem; margin-left: 0rem;
margin-top: 0rem; margin-top: 0rem;
margin-right: 0.125rem; margin-right: 0.1rem;
margin-bottom: 0.17rem; margin-bottom: 0.17rem;
width: 79px; width: 79px;
height: 90px; height: 90px;
@ -257,6 +270,7 @@ export default {
position: relative; position: relative;
border: 1px solid rgba(25, 186, 139, 0.17); border: 1px solid rgba(25, 186, 139, 0.17);
} }
/* 滚动条样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 7px; width: 7px;
} }
@ -323,4 +337,20 @@ export default {
.deleteImg { .deleteImg {
width: 100%; width: 100%;
} }
/* 新增对话框样式 */
::v-deep .el-dialog {
background: #111658 !important;
border:1px solid gray;
}
::v-deep .el-dialog__body {
color: white !important;
}
::v-deep .el-form .el-form-item__label{
color:white;
}
::v-deep .el-input3 .el-input__inner{
background-color: #1c257f!important;
border: 1px solid rgba(25, 186, 139, 0.17) !important;
color:white;
}
</style> </style>

178
src/layout/components/MusicManage/index.vue
Unescape Escape View File

@ -2,7 +2,13 @@
<div class="panel bar1"> <div class="panel bar1">
<div class="titleBg"> <div class="titleBg">
<h2> <h2>
<el-form :inline="true" :model="queryParams" class="el-form1" ref="queryForm" label-width="1.7rem"> <el-form
:inline="true"
:model="queryParams"
class="el-form1"
ref="queryForm"
label-width="1.7rem"
>
<el-form-item label prop="musicManage"> <el-form-item label prop="musicManage">
<el-select <el-select
class="selectNav" class="selectNav"
@ -21,24 +27,23 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
</h2> </h2>
</div> </div>
<!-- 音乐管理表格数据 --> <!-- 音乐管理表格数据 -->
<div class="musicManagement" v-show="musicShow"> <div class="musicManagement" v-show="musicShow">
<el-table :data="musicManagementList" style="width: 100%"> <el-table :data="musicManagementList" height="274" style="width: 100%">
<el-table-column prop="location" label="位置" width="140" height="25" align="center"></el-table-column> <el-table-column prop="location" label="位置" width="140" height="25" align="center"></el-table-column>
<el-table-column prop="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column> <el-table-column prop="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
<el-table-column prop="status" label="设备状态" height="25" width="80" align="center"> <el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.status == '0'">正常</span> <span v-if="scope.row.status == '0'">正常</span>
<span v-else-if="scope.row.status == '1'">异常</span> <span v-else-if="scope.row.status == '1'">异常</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="note" label="音符" width="70" height="25" align="center"></el-table-column> <el-table-column prop="note" label="音符" width="70" height="25" align="center"></el-table-column>
<el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column> <el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" width="160" height="25" align="center"></el-table-column> <el-table-column prop="createTime" label="创建时间" width="160" height="25" align="center"></el-table-column>
<el-table-column prop="createBy" label="创建人" width="80" height="25" align="center"></el-table-column> <el-table-column prop="createBy" label="创建人" width="80" height="25" align="center"></el-table-column>
<el-table-column prop="operate" label="操作" height="25" align="center"> <el-table-column prop="operate" label="操作" height="25" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
@ -57,46 +62,47 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination
<pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</div> </div>
<!-- 编辑音乐管理对话框 --> <!-- 编辑音乐管理对话框 -->
<el-dialog title :visible.sync="musicHandle" width="20%" style="top:20vh" center> <el-dialog title :visible.sync="musicHandle" width="20%" style="top:20vh" center>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="位置" prop="location"> <el-form-item label="位置" prop="location">
<el-input placeholder="请输入位置" v-model="form.location" class="el-input1"></el-input> <el-input placeholder="请输入位置" v-model="form.location" class="el-input1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="IP地址" prop="address"> <el-form-item label="IP地址" prop="deviceIp">
<el-input placeholder="请输入IP地址" v-model="form.address" class="el-input1"></el-input> <el-input placeholder="请输入IP地址" v-model="form.deviceIp" class="el-input1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="音符" prop="note"> <el-form-item label="音符" prop="note">
<el-input placeholder="请输入音符" v-model="form.note" class="el-input1"></el-input> <el-input placeholder="请输入音符" v-model="form.note" class="el-input1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="音量" prop="volume"> <el-form-item label="音量" prop="volume">
<el-input placeholder="请输入音量" v-model="form.volume" class="el-input1"></el-input> <el-input placeholder="请输入音量" v-model="form.volume" class="el-input1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -124,7 +130,7 @@
<script> <script>
import User from "@/layout/components/User"; import User from "@/layout/components/User";
import flexible from "@/layout/flexible.js"; import flexible from "@/layout/flexible.js";
import { listDevice } from "@/api/Device"; import { listMusic } from "@/api/DeviceManage";
export default { export default {
components: { components: {
User User
@ -149,28 +155,35 @@ export default {
userShow: false, userShow: false,
//编辑对话框 //编辑对话框
musicHandle: false, musicHandle: false,
form:{}, //表单
rules:{}, form: {
location: null,
deviceIp: null,
note: null,
volume: null
},
rules: {},
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 6, pageSize: 10,
note: null,
volume: null
}, },
// 总条数 // 总条数
total: 0, total: 0
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
methods: { methods: {
//查询音乐管理列表数据 //查询音乐管理列表数据
getList() { getList() {
this.loading = true; this.loading = true;
listDevice(this.queryParams).then(result => { listMusic(this.queryParams).then(result => {
this. musicManagementList= result.rows; this.musicManagementList = result.rows;
this.total = result.total; this.total = result.total;
this.loading = false; this.loading = false;
}); });
@ -191,8 +204,19 @@ export default {
this.open = false; this.open = false;
}, },
//确定按钮 //确定按钮
submitForm() { submitForm(row) {
this.musicHandle=false; var location = this.form.location;
var deviceIp = this.form.deviceIp;
var note = this.form.note;
var volume = this.form.volume;
var musicManagementList = this.musicManagementList;
musicManagementList.location = location;
musicManagementList.address = address;
musicManagementList.note = note;
musicManagementList.volume = volume;
this.musicHandle = false;
}, },
//删除按钮操作 //删除按钮操作
@ -201,7 +225,6 @@ export default {
.confirm("确认要删除吗") .confirm("确认要删除吗")
.then(function() { .then(function() {
musicManagementList.splice(index, 1); musicManagementList.splice(index, 1);
}) })
.then(() => { .then(() => {
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
@ -209,45 +232,57 @@ export default {
.catch(() => {}); .catch(() => {});
}, },
//编辑按钮 //编辑按钮
edit() { edit(row) {
this.musicHandle = true; this.musicHandle = true;
// this.form = row;
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
/* 滚动条样式 */
::v-deep ::-webkit-scrollbar {
width: 7px;
}
::v-deep ::-webkit-scrollbar-thumb {
border-radius: 14px;
background: #4a6cd5;
}
::v-deep ::-webkit-scrollbar-track {
border-radius: 0;
background: none;
}
::v-deep .pagination-container .el-select .el-input .el-select__caret { ::v-deep .pagination-container .el-select .el-input .el-select__caret {
color:#618dfa!important; color: #618dfa !important;
} }
::v-deep .pagination-container .el-input__suffix { ::v-deep .pagination-container .el-input__suffix {
right: 5px !important; right: 5px !important;
} }
::v-deep .pagination-container .el-input__inner { ::v-deep .pagination-container .el-input__inner {
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
color: #618dfa !important; color: #618dfa !important;
text-align: center !important; text-align: center !important;
} }
.pagination-container[data-v-72233bcd]{ .pagination-container[data-v-72233bcd] {
background:#111658; background: #111658;
} }
.userManagement { .userManagement {
margin: 0.125rem 0 0.125rem; margin: 0.125rem 0 0.125rem;
} }
::v-deep .el-input { ::v-deep .el-input {
margin-left: 6px !important; margin-left: 6px !important;
line-height: 0px!important; line-height: 0px !important;
} }
::v-deep .el-form-item__label{ ::v-deep .el-form-item__label {
color:white!important; color: white !important;
} }
::v-deep .el-input1 { ::v-deep .el-input1 {
background: cornflowerblue!important; background: #1c257f !important;
border: 1px solid rgba(25, 186, 139, 0.17) !important;
} }
::v-deep .el-input__suffix { ::v-deep .el-input__suffix {
right: 0.8rem !important; right: 0.8rem !important;
} }
@ -262,14 +297,15 @@ export default {
text-align: center !important; text-align: center !important;
letter-spacing: 4px !important; letter-spacing: 4px !important;
} }
::v-deep .el-input1 input::-webkit-input-placeholder {
color: gray !important ;
}
::v-deep .el-form1 input::-webkit-input-placeholder { ::v-deep .el-form1 input::-webkit-input-placeholder {
color: white !important ; color: white !important ;
} }
::v-deep .el-dialog { ::v-deep .el-dialog {
background: #111658 !important; background: #111658 !important;
border:1px solid gray; border: 1px solid gray;
} }
::v-deep .el-dialog__body { ::v-deep .el-dialog__body {
color: white !important; color: white !important;

48
src/layout/components/Navbar.vue
Unescape Escape View File

@ -1,12 +1,12 @@
<template> <template>
<div class="navbar"> <!-- <div class="navbar"> -->
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <!-- <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <el-tooltip content="源码地址" effect="dark" placement="bottom">
@ -17,13 +17,14 @@
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> </template> -->
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
@ -31,19 +32,22 @@
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/user/profile"> <!-- <router-link to="/user/profile"> -->
<div @click="userCenter">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </div>
<el-dropdown-item @click.native="setting = true">
<!-- </router-link> -->
<!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span> <span>布局设置</span>
</el-dropdown-item> </el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> <!-- </div> -->
</template> </template>
<script> <script>
@ -92,6 +96,9 @@ export default {
} }
}, },
methods: { methods: {
userCenter(){
this.$router.push("/user/profile");
},
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')
}, },
@ -111,12 +118,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { // .navbar {
height: 50px; // height: 50px;
overflow: hidden; // overflow: hidden;
position: relative; // position: relative;
background: #fff; // background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08); // box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
@ -146,8 +153,11 @@ export default {
} }
.right-menu { .right-menu {
float: right; // float: right;
height: 100%; position: absolute;
top:10px;
right:10px;
height: 60px;
line-height: 50px; line-height: 50px;
&:focus { &:focus {
@ -196,5 +206,5 @@ export default {
} }
} }
} }
} // }
</style> </style>

77
src/layout/components/User/index.vue
Unescape Escape View File

@ -7,7 +7,7 @@
v-model="queryParams.roleType" v-model="queryParams.roleType"
placeholder="角色类型" placeholder="角色类型"
clearable clearable
size="middle" size="mini"
style="width: 200px" style="width: 200px"
> >
<el-option <el-option
@ -20,7 +20,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="姓名" prop="roleName"> <el-form-item label="姓名" prop="roleName">
<el-input v-model="queryParams.roleName" placeholder class="input2"></el-input> <el-input v-model="queryParams.roleName" placeholder class="input2" size="mini"></el-input>
</el-form-item> </el-form-item>
<el-button <el-button
@ -44,7 +44,7 @@
<el-table-column prop="number" type="index" label="序号" align="center"></el-table-column> <el-table-column prop="number" type="index" label="序号" align="center"></el-table-column>
<el-table-column prop="roleName" label="用户姓名" align="center"></el-table-column> <el-table-column prop="roleName" label="用户姓名" align="center"></el-table-column>
<el-table-column prop="roleType" label="角色" align="center"></el-table-column> <el-table-column prop="roleType" label="角色" align="center"></el-table-column>
<el-table-column prop="roleStatus" type="用户状态" label="序号" align="center"></el-table-column> <el-table-column prop="roleStatus" type="用户状态" width="100" label="序号" align="center"></el-table-column>
<el-table-column prop="createBy" label="创建时间" align="center"></el-table-column> <el-table-column prop="createBy" label="创建时间" align="center"></el-table-column>
<el-table-column prop="action" label="操作" width="250" align="center"> <el-table-column prop="action" label="操作" width="250" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
@ -55,6 +55,47 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 新增用户对话框 -->
<el-dialog title :visible.sync="roleHandle" width="20%" style="top:20vh" center>
<el-form ref="roleForm" :model="roleForm" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="姓名" prop="roleName">
<el-input placeholder="" v-model="roleForm.roleName" class="el-input1" size="mini"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="角色" prop="roleType">
<el-select
class="input2"
v-model="roleForm.roleType"
placeholder="角色类型"
clearable
size="mini"
style="width: 200px"
>
<el-option
class="option1"
v-for="dict in roleTypeArr"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="roleHandle = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<style scoped> <style scoped>
@ -63,12 +104,12 @@
} }
.addButton { .addButton {
display: block; display: block;
margin-top: -10px; margin-top: -5px;
margin-left: 0px; margin-left: 0px;
} }
.searchButton { .searchButton {
margin-top: 5px; margin-top: 5px;
margin-left: 20px; margin-left: 25px;
} }
.userBox { .userBox {
width: 100%; width: 100%;
@ -88,22 +129,29 @@
border: 1px solid rgba(25, 186, 139, 0.17) !important; border: 1px solid rgba(25, 186, 139, 0.17) !important;
color: white !important; color: white !important;
text-align: left !important; text-align: left !important;
letter-spacing: 2px !important; letter-spacing: 0px !important;
} }
::v-deep .el-input--middle { ::v-deep .input2 .el-input--mini {
font-size: 14px !important; font-size: 14px !important;
color: gray !important; color: gray !important;
} }
</style> </style>
<script> <script>
import flexible from "@/layout/flexible.js"; import flexible from "@/layout/flexible.js";
export default { export default {
data() { data() {
return { return {
//查询参数 //查询参数
queryParams: { queryParams: {
roleType: null, roleType: null,
roleName: null roleName: null,
},
roleHandle:false,
roleForm:{
roleName:null,
roleType:null,
}, },
roleList: [ roleList: [
{ {
@ -133,8 +181,9 @@ export default {
{ {
value: 2, value: 2,
label: "操作员" label: "操作员"
} },
] ],
}; };
}, },
@ -150,7 +199,13 @@ export default {
//重置操作 //重置操作
resetQuery() {}, resetQuery() {},
//新增操作 //新增操作
editRole() {} editRole() {
this.roleHandle=true;
},
//确定按钮操作
submitForm(){
this.roleHandle=false;
},
} }
}; };
</script> </script>

9
src/layout/index.vue
Unescape Escape View File

@ -1,11 +1,12 @@
<template> <template>
<div class="app-container home"> <div class="app-content home">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<header> <header>
<h1>陵川电子音乐公路管理系统</h1> <h1>陵川电子音乐公路管理系统</h1>
<navbar />
</header> </header>
<div class="mainbox"> <div class="mainbox">
<div class="row1"> <div class="row1">
@ -28,6 +29,7 @@ import {
TrackManagement, TrackManagement,
MusicManage, MusicManage,
Device, Device,
Navbar,
} from "./components"; } from "./components";
import flexible from "@/layout/flexible.js"; import flexible from "@/layout/flexible.js";
@ -39,6 +41,7 @@ export default {
TrackManagement, TrackManagement,
MusicManage, MusicManage,
Device, Device,
Navbar,
}, },
methods: {}, methods: {},
@ -61,7 +64,7 @@ li {
font-family: electronicFont; font-family: electronicFont;
src: url(../DS-DIGIT.TTF); src: url(../DS-DIGIT.TTF);
} }
.app-container { .app-content {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -214,6 +217,8 @@ header h1 {
.mainbox { .mainbox {
min-width: 1024px; min-width: 1024px;
max-width: 1920px; max-width: 1920px;
width:100%;
padding: 0.125rem 0.125rem 0; padding: 0.125rem 0.125rem 0;
} }
.mainbox .row1 { .mainbox .row1 {

4
src/router/index.js
Unescape Escape View File

@ -67,10 +67,10 @@ export const constantRoutes = [
redirect: 'index', redirect: 'index',
children: [ children: [
{ {
path: 'index', path: '/index',
component: () => import('@/views/index'), component: () => import('@/views/index'),
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard', affix:true }
} }
] ]
}, },

25
src/views/login.vue
Unescape Escape View File

@ -42,15 +42,16 @@
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox class="el-checkbox-label" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px; color:grey; ">记住密码</el-checkbox> <el-checkbox class="el-checkbox-label" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px; color:grey; ">记住密码</el-checkbox>
<el-form-item style="width:100%;"> <el-form-item class="formItem1" style="width:100%;">
<el-button <el-button
class="loginButton"
:loading="loading" :loading="loading"
size="medium" size="medium"
type="goon" type="goon"
style="width:100%;" style="width:100%;"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading" style="font-size:18px">登 录</span> <span v-if="!loading" style="font-size:18px" class="loginSpan">登 录</span>
<span v-else style="font-size:18px">登 录 中...</span> <span v-else style="font-size:18px">登 录 中...</span>
</el-button> </el-button>
<div style="float: right;" v-if="register"> <div style="float: right;" v-if="register">
@ -159,6 +160,15 @@ export default {
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
// .loginSpan{
// background: url(../assets/images/矩形.png) no-repeat center;
// }
.el-button.is-loading:before{
background: transparent;
}
.formItem1{
background: url(../assets/images/矩形.png) no-repeat center;
}
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
color: white ; color: white ;
} }
@ -172,19 +182,22 @@ textarea::-webkit-input-placeholder {
} }
.el-button--goon.is-active, .el-button--goon.is-active,
.el-button--goon:active { .el-button--goon:active {
background: rgba(68,80,204,); // background: rgba(68,80,204,);
background: transparent;
border:none; border:none;
color: white; color: white;
} }
.el-button--goon:focus, .el-button--goon:focus,
.el-button--goon:hover { .el-button--goon:hover {
background: rgba(68,80,204,); // background: rgba(68,80,204,);
background: transparent;
// border-color: rgba(68,80,204,); // border-color: rgba(68,80,204,);
border:none; border:none;
color: white; color: white;
} }
.el-button--goon { .el-button--goon {
background: rgba(68,80,204,); // background: rgba(68,80,204,);
background: transparent;
// border-color: rgba(68,80,204,); // border-color: rgba(68,80,204,);
border:none; border:none;
color: white; color: white;
@ -252,7 +265,7 @@ textarea::-webkit-input-placeholder {
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; // color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;

8
src/views/system/user/profile/index.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="mainbox">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6" :xs="24"> <el-col :span="6" :xs="24">
<el-card class="box-card"> <el-card class="box-card">
@ -89,3 +89,9 @@ export default {
} }
}; };
</script> </script>
<style scoped>
.mainbox{
width:100%;
height:100%;
}
</style>

Write Preview
Loading…
Cancel
Save