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>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar class="sidebar-container"/>
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<right-panel>
|
||||
<settings />
|
||||
</right-panel>
|
||||
<div class="app-container home">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<header>
|
||||
<h1>陵川电子音乐公路管理系统</h1>
|
||||
</header>
|
||||
<div class="mainbox">
|
||||
<div class="row1">
|
||||
<vedio/>
|
||||
<car-msg/>
|
||||
<track-management/>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<music-manage/>
|
||||
<device/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
|
||||
import {Vedio,CarMsg,TrackManagement,MusicManage,Device} from "./components";
|
||||
import flexible from "@/layout/flexible.js";
|
||||
// import jquery from "@../jquery.js";
|
||||
// import echarts from "@../echarts.min.js";
|
||||
// import index from "@/assets/styles/index.css";
|
||||
export default {
|
||||
name: 'Layout',
|
||||
name: "Layout",
|
||||
components: {
|
||||
AppMain,
|
||||
Navbar,
|
||||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
Vedio,
|
||||
CarMsg,
|
||||
TrackManagement,
|
||||
MusicManage,
|
||||
Device,
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
...mapState({
|
||||
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 })
|
||||
}
|
||||
}
|
||||
methods: {},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
<style >
|
||||
|
||||
* {
|
||||
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 {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
#carEcharts {
|
||||
width: 7.2rem;
|
||||
height: 3rem;
|
||||
margin-top: 0.125rem;
|
||||
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;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
/* */
|
||||
background-color: rgba(17, 22, 88);
|
||||
padding: 0 0.1875rem 0.5rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.panel::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue