forked from software/MusicRoadUI
master
parent
2d78900f33
commit
d49d5bfe07
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,74 @@
|
|||||||
|
var chartDom = document.getElementById('carEcharts');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option = {
|
||||||
|
color: ["#2f89cf"],
|
||||||
|
title: {
|
||||||
|
text: '车辆来源地',
|
||||||
|
textStyle: {
|
||||||
|
color: "rgba(66,232,224)",
|
||||||
|
fontSize: "14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '7%',
|
||||||
|
right: '7%',
|
||||||
|
bottom: '5%',
|
||||||
|
top:"9%",
|
||||||
|
containLabel:false,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show:false,
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine:{show: false},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['江苏', '山东', '北京', '河北', '河南', '山西'],
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: "white",
|
||||||
|
fontSize: "14"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine:{show: false},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'bar',
|
||||||
|
data: [19, 29, 39, 44, 49, 69],
|
||||||
|
barWidth: "25%",
|
||||||
|
label:{
|
||||||
|
show:true,
|
||||||
|
position:"right",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
barBorderRadius: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// 把配置给实例对象
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize", function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel line">
|
||||||
|
<div class="titleBg">
|
||||||
|
<h2>车辆信息统计</h2>
|
||||||
|
</div>
|
||||||
|
<div class="carBar">
|
||||||
|
<div class="carBox carBorder">
|
||||||
|
<span class="carSpan">全部服务车辆</span>
|
||||||
|
<div class="carImg">
|
||||||
|
<span class="carNumber">159</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carBox carBorder">
|
||||||
|
<span class="carSpan">近一月服务车辆</span>
|
||||||
|
<div class="carImg">
|
||||||
|
<span class="carNumber">108</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carBox">
|
||||||
|
<span class="carSpan">近一周服务车辆</span>
|
||||||
|
<div class="carImg">
|
||||||
|
<span class="carNumber">59</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="carEcharts"></div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flexible from "@/layout/flexible.js";
|
||||||
|
export default{
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style >
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel line1">
|
||||||
|
<div class="titleBg">
|
||||||
|
<h2>设备管理</h2>
|
||||||
|
</div>
|
||||||
|
<div class="chart"></div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flexible from "@/layout/flexible.js";
|
||||||
|
|
||||||
|
export default{
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style >
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel bar1">
|
||||||
|
<div class="titleBg">
|
||||||
|
<h2>音乐管理</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="musicManagement">
|
||||||
|
<el-table :data="musicManagementList" style="width: 100%">
|
||||||
|
<el-table-column prop="location" label="位置" width="50" height="25" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="ipAddress" label="ip地址" height="25" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="deviceState" label="设备状态" height="25" width="80" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="note" 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="创建时间" 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">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-edit-outline"
|
||||||
|
@click="edit(scope.row)"
|
||||||
|
>编辑</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="danger"
|
||||||
|
@click="deleteMusic(scope.row)"
|
||||||
|
>删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flexible from "@/layout/flexible.js";
|
||||||
|
|
||||||
|
export default{
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
musicManagementList: [
|
||||||
|
{
|
||||||
|
location: "001",
|
||||||
|
ipAddress: "192.168.10.88",
|
||||||
|
deviceState: "正常",
|
||||||
|
note: "",
|
||||||
|
volume: "50%",
|
||||||
|
createTime: "2022-02-02",
|
||||||
|
createBy: "张大大"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
location: "001",
|
||||||
|
ipAddress: "192.168.10.88",
|
||||||
|
deviceState: "正常",
|
||||||
|
note: "",
|
||||||
|
volume: "50%",
|
||||||
|
createTime: "2022-02-02",
|
||||||
|
createBy: "张大大"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
location: "001",
|
||||||
|
ipAddress: "192.168.10.88",
|
||||||
|
deviceState: "正常",
|
||||||
|
note: "",
|
||||||
|
volume: "50%",
|
||||||
|
createTime: "2022-02-02",
|
||||||
|
createBy: "张大大"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style >
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel pie">
|
||||||
|
<div class="titleBg">
|
||||||
|
<h2>曲目管理</h2>
|
||||||
|
</div>
|
||||||
|
<!-- 曲目管理表格 -->
|
||||||
|
<div class="trackManagement">
|
||||||
|
<el-table :data="songList" style="width: 100%">
|
||||||
|
<el-table-column prop="number" type="index" label="序号" width="100" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="songName" label="歌曲名称" width="180" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="action" label="操作" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-headset"
|
||||||
|
@click="listenSong(scope.row)"
|
||||||
|
>试听</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-s-promotion"
|
||||||
|
@click="download(scope.row)"
|
||||||
|
>下发</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="danger"
|
||||||
|
@click="deleteSong(scope.row)"
|
||||||
|
>删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="waveBox"></div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flexible from "@/layout/flexible.js";
|
||||||
|
|
||||||
|
export default{
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
songList: [
|
||||||
|
{
|
||||||
|
songName: "门没锁"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
songName: "一吻天荒"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
songName: "漫天星辰不及你"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
songName: "南半球与北海道"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style >
|
||||||
|
</style>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel bar">
|
||||||
|
<div class="titleBg">
|
||||||
|
<h2>现场影像</h2>
|
||||||
|
</div>
|
||||||
|
<div class="video">
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flexible from "@/layout/flexible.js";
|
||||||
|
export default{
|
||||||
|
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods:{}
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style >
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
(function flexible(window, document) {
|
||||||
|
var docEl = document.documentElement;
|
||||||
|
var dpr = window.devicePixelRatio || 1;
|
||||||
|
|
||||||
|
// adjust body font size
|
||||||
|
function setBodyFontSize() {
|
||||||
|
if (document.body) {
|
||||||
|
document.body.style.fontSize = 12 * dpr + "px";
|
||||||
|
} else {
|
||||||
|
document.addEventListener("DOMContentLoaded", setBodyFontSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setBodyFontSize();
|
||||||
|
|
||||||
|
// set 1rem = viewWidth / 10
|
||||||
|
function setRemUnit() {
|
||||||
|
var rem = docEl.clientWidth / 24;
|
||||||
|
docEl.style.fontSize = rem + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
setRemUnit();
|
||||||
|
|
||||||
|
// reset rem unit on page resize
|
||||||
|
window.addEventListener("resize", setRemUnit);
|
||||||
|
window.addEventListener("pageshow", function(e) {
|
||||||
|
if (e.persisted) {
|
||||||
|
setRemUnit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// detect 0.5px supports
|
||||||
|
if (dpr >= 2) {
|
||||||
|
var fakeBody = document.createElement("body");
|
||||||
|
var testElement = document.createElement("div");
|
||||||
|
testElement.style.border = ".5px solid transparent";
|
||||||
|
fakeBody.appendChild(testElement);
|
||||||
|
docEl.appendChild(fakeBody);
|
||||||
|
if (testElement.offsetHeight === 1) {
|
||||||
|
docEl.classList.add("hairlines");
|
||||||
|
}
|
||||||
|
docEl.removeChild(fakeBody);
|
||||||
|
}
|
||||||
|
})(window, document);
|
||||||
@ -1,107 +1,286 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
<div class="app-container home">
|
||||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
<head>
|
||||||
<sidebar class="sidebar-container"/>
|
<meta charset="UTF-8" />
|
||||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<div :class="{'fixed-header':fixedHeader}">
|
</head>
|
||||||
<navbar />
|
<header>
|
||||||
<tags-view v-if="needTagsView" />
|
<h1>陵川电子音乐公路管理系统</h1>
|
||||||
</div>
|
</header>
|
||||||
<app-main />
|
<div class="mainbox">
|
||||||
<right-panel>
|
<div class="row1">
|
||||||
<settings />
|
<vedio/>
|
||||||
</right-panel>
|
<car-msg/>
|
||||||
|
<track-management/>
|
||||||
|
</div>
|
||||||
|
<div class="row2">
|
||||||
|
<music-manage/>
|
||||||
|
<device/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RightPanel from '@/components/RightPanel'
|
import {Vedio,CarMsg,TrackManagement,MusicManage,Device} from "./components";
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import flexible from "@/layout/flexible.js";
|
||||||
import ResizeMixin from './mixin/ResizeHandler'
|
// import jquery from "@../jquery.js";
|
||||||
import { mapState } from 'vuex'
|
// import echarts from "@../echarts.min.js";
|
||||||
import variables from '@/assets/styles/variables.scss'
|
// import index from "@/assets/styles/index.css";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Layout',
|
name: "Layout",
|
||||||
components: {
|
components: {
|
||||||
AppMain,
|
Vedio,
|
||||||
Navbar,
|
CarMsg,
|
||||||
RightPanel,
|
TrackManagement,
|
||||||
Settings,
|
MusicManage,
|
||||||
Sidebar,
|
Device,
|
||||||
TagsView
|
|
||||||
},
|
},
|
||||||
mixins: [ResizeMixin],
|
methods: {},
|
||||||
computed: {
|
data(){
|
||||||
...mapState({
|
return{
|
||||||
theme: state => state.settings.theme,
|
|
||||||
sideTheme: state => state.settings.sideTheme,
|
}
|
||||||
sidebar: state => state.app.sidebar,
|
},
|
||||||
device: state => state.app.device,
|
|
||||||
needTagsView: state => state.settings.tagsView,
|
|
||||||
fixedHeader: state => state.settings.fixedHeader
|
|
||||||
}),
|
|
||||||
classObj() {
|
|
||||||
return {
|
|
||||||
hideSidebar: !this.sidebar.opened,
|
|
||||||
openSidebar: this.sidebar.opened,
|
|
||||||
withoutAnimation: this.sidebar.withoutAnimation,
|
|
||||||
mobile: this.device === 'mobile'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
variables() {
|
|
||||||
return variables;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClickOutside() {
|
|
||||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style >
|
||||||
@import "~@/assets/styles/mixin.scss";
|
|
||||||
@import "~@/assets/styles/variables.scss";
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: electronicFont;
|
||||||
|
src: url(../DS-DIGIT.TTF);
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
/* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */
|
||||||
|
background: url(../assets/images/login-background.jpg) no-repeat #000;
|
||||||
|
background-size: cover;
|
||||||
|
/* 行高是字体1.15倍 */
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
.video {
|
||||||
|
width: 7.2rem;
|
||||||
|
height: 4.12rem;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
background-image: url(../assets/images/公路截图.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.titleBg {
|
||||||
|
background: url(../assets/images/矩形.png) no-repeat top center;
|
||||||
|
}
|
||||||
|
.carBar {
|
||||||
|
width: 7.2rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
background: rgba(18, 25, 97);
|
||||||
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.carImg {
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
background: url(../assets/images/车.png) no-repeat center;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.carBox {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.2rem;
|
||||||
|
height: 0.7rem;
|
||||||
|
}
|
||||||
|
.carBorder {
|
||||||
|
border-right: 1px solid white;
|
||||||
|
}
|
||||||
|
.carSpan {
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.carNumber {
|
||||||
|
font-size: 22px;
|
||||||
|
color: rgba(66, 232, 224);
|
||||||
|
margin-left: 0.65rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
/* // 曲目管理 */
|
||||||
|
.trackManagement {
|
||||||
|
width: 7.2rem;
|
||||||
|
height: 2.86rem;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
.el-button--primary {
|
||||||
|
/* background: #1C257F !important; */
|
||||||
|
background: #3835a0 !important;
|
||||||
|
color: white !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.el-button--danger {
|
||||||
|
background: #bf3d4a !important;
|
||||||
|
color: white !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.waveBox {
|
||||||
|
width: 7.2rem;
|
||||||
|
height: 1.12rem;
|
||||||
|
margin-top: 0.127rem;
|
||||||
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
}
|
||||||
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
|
background-color: #121961 !important;
|
||||||
|
}
|
||||||
|
.el-table--enable-row-transition {
|
||||||
|
background-color: #121961 !important;
|
||||||
|
}
|
||||||
|
.cell-border {
|
||||||
|
border-bottom: 1px solid rgba(25, 186, 139, 0.17) !important;
|
||||||
|
}
|
||||||
|
.musicManagement {
|
||||||
|
margin: 0.125rem 0 0.125rem;
|
||||||
|
}
|
||||||
|
::v-deep.el-table tr {
|
||||||
|
background: #121961 !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
::v-deep.el-table th {
|
||||||
|
background: #1c257f !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
/* .el-table .el-table--medium .el-table__cell{
|
||||||
|
padding:2px 0 !important;
|
||||||
|
} */
|
||||||
|
|
||||||
.app-wrapper {
|
#carEcharts {
|
||||||
@include clearfix;
|
width: 7.2rem;
|
||||||
position: relative;
|
height: 3rem;
|
||||||
height: 100%;
|
margin-top: 0.125rem;
|
||||||
width: 100%;
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
height: 1rem;
|
||||||
|
background: url(../assets/images/head_bg.png) no-repeat bottom center;
|
||||||
|
background-size: 110% 60%;
|
||||||
|
}
|
||||||
|
header h1 {
|
||||||
|
font-size: 0.475rem;
|
||||||
|
color: rgba(66, 232, 224);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1rem;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
}
|
||||||
|
.mainbox {
|
||||||
|
min-width: 1024px;
|
||||||
|
max-width: 1920px;
|
||||||
|
padding: 0.125rem 0.125rem 0;
|
||||||
|
}
|
||||||
|
.mainbox .row1 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mainbox .row2 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mainbox .row1 .panel {
|
||||||
|
flex: 50%;
|
||||||
|
margin: 0 0.125rem 0.1875rem;
|
||||||
|
}
|
||||||
|
.mainbox .row2 .panel {
|
||||||
|
flex: 50%;
|
||||||
|
margin: 0 0.125rem 0.125rem;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
position: relative;
|
||||||
|
height: 5rem;
|
||||||
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||||
|
|
||||||
&.mobile.openSidebar {
|
/* */
|
||||||
position: fixed;
|
background-color: rgba(17, 22, 88);
|
||||||
top: 0;
|
padding: 0 0.1875rem 0.5rem;
|
||||||
}
|
margin-bottom: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-bg {
|
.panel::before {
|
||||||
background: #000;
|
position: absolute;
|
||||||
opacity: 0.3;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
top: 0;
|
content: "";
|
||||||
height: 100%;
|
width: 10px;
|
||||||
position: absolute;
|
height: 10px;
|
||||||
z-index: 999;
|
border-top: 2px solid #02a6b5;
|
||||||
}
|
border-left: 2px solid #02a6b5;
|
||||||
|
}
|
||||||
|
.panel::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-top: 2px solid #02a6b5;
|
||||||
|
border-right: 2px solid #02a6b5;
|
||||||
|
}
|
||||||
|
.panel .panel-footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.panel .panel-footer::before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-bottom: 2px solid #02a6b5;
|
||||||
|
border-left: 2px solid #02a6b5;
|
||||||
|
}
|
||||||
|
.panel .panel-footer::after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-bottom: 2px solid #02a6b5;
|
||||||
|
border-right: 2px solid #02a6b5;
|
||||||
|
}
|
||||||
|
.panel h2 {
|
||||||
|
height: 0.6rem;
|
||||||
|
line-height: 0.6rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.panel h2 a {
|
||||||
|
margin: 0 0.1875rem;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.fixed-header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 9;
|
|
||||||
width: calc(100% - #{$base-sidebar-width});
|
|
||||||
transition: width 0.28s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
|
||||||
width: calc(100% - 54px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile .fixed-header {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue