能力运行监控上半部分
This commit is contained in:
gaoyuanwei
parent
3ab89fcfec
commit
d4e47eafe6
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
|
@ -1,22 +1,508 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">概况和异常</div>
|
<div class="contentBox">
|
||||||
|
<div class="generalizeBox">
|
||||||
|
<h3>API概括</h3>
|
||||||
|
<div class="ApiBox">
|
||||||
|
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
|
||||||
|
<div>
|
||||||
|
<h4>API总数</h4>
|
||||||
|
<p>99999</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ApiBox">
|
||||||
|
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
|
||||||
|
<div>
|
||||||
|
<h4>异常API总数</h4>
|
||||||
|
<p>99999</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="abnormalBox">
|
||||||
|
<h3>API异常分析</h3>
|
||||||
|
<div class="abnormalBoxBottom">
|
||||||
|
<!-- API异常次数排行TOP10 -->
|
||||||
|
<div class="RankingList">
|
||||||
|
<h4 class="title">API异常次数排行TOP10</h4>
|
||||||
|
<ul>
|
||||||
|
<li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
|
||||||
|
<i><b>{{ index + 1 }}</b></i>
|
||||||
|
<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
|
||||||
|
<h6>{{ item.name }}</h6>
|
||||||
|
</el-tooltip>
|
||||||
|
<span>{{ item.num }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- API异常分布 -->
|
||||||
|
<div class="AbnormalDistribution">
|
||||||
|
<h4 class="title">API异常分布</h4>
|
||||||
|
<div class='container-body1'>
|
||||||
|
<div id="main" style="width: 100px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- API异常次数统计 -->
|
||||||
|
<div class="AnomalyStatistics">
|
||||||
|
<h4 class="title">API异常次数统计</h4>
|
||||||
|
<div class="AnomalyStatisticsTable">
|
||||||
|
<el-table :data="AnomalyStatisticsTable" border style="width:100%">
|
||||||
|
<el-table-column prop="name" label="接口名称" width="80">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="address" label="接口地址" width="200">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="method" label="调用方法">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="type" label="组件类型">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="provider" label="提供商">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="state" label="监控状态">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="tablePagination">
|
||||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
// components: {},
|
||||||
props: {},
|
// props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
// 排行榜
|
||||||
|
RankingData: [
|
||||||
|
{
|
||||||
|
name: '能力名称一能力名称一能力名称一能力名称一能力名称一',
|
||||||
|
num: '239'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称二',
|
||||||
|
num: '222'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称三',
|
||||||
|
num: '123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称四',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称五',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称六',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称七',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称八',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称九',
|
||||||
|
num: '88'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '能力名称十',
|
||||||
|
num: '88'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 表格
|
||||||
|
AnomalyStatisticsTable: [{
|
||||||
|
name: '接口名称',
|
||||||
|
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||||
|
method: '调用方法',
|
||||||
|
type: '组件类型',
|
||||||
|
provider: '提供商名称',
|
||||||
|
state: '监控状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '接口名称',
|
||||||
|
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||||
|
method: '调用方法',
|
||||||
|
type: '组件类型',
|
||||||
|
provider: '提供商名称',
|
||||||
|
state: '监控状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '接口名称',
|
||||||
|
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||||
|
method: '调用方法',
|
||||||
|
type: '组件类型',
|
||||||
|
provider: '提供商名称',
|
||||||
|
state: '监控状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '接口名称',
|
||||||
|
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||||
|
method: '调用方法',
|
||||||
|
type: '组件类型',
|
||||||
|
provider: '提供商名称',
|
||||||
|
state: '监控状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '接口名称',
|
||||||
|
address: 'http://hhhhhhhhhhhhhhhhhhhh',
|
||||||
|
method: '调用方法',
|
||||||
|
type: '组件类型',
|
||||||
|
provider: '提供商名称',
|
||||||
|
state: '监控状态'
|
||||||
|
}],
|
||||||
|
// 分页
|
||||||
|
currentPage4: 1,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
mounted() {
|
||||||
computed: {},
|
this.myEchars()
|
||||||
methods: {},
|
// 分页
|
||||||
created() {},
|
this.total = this.AnomalyStatisticsTable.length
|
||||||
mounted() {},
|
},
|
||||||
};
|
methods: {
|
||||||
|
// 分页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
console.log(`每页 ${val} 条`)
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`)
|
||||||
|
},
|
||||||
|
myEchars() {
|
||||||
|
var chartDom = document.getElementById('main')
|
||||||
|
var myChart = echarts.init(chartDom)
|
||||||
|
var option
|
||||||
|
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: '0%'
|
||||||
|
},
|
||||||
|
color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'GA 数据统计',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '12%',
|
||||||
|
bottom: '10%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
// emphasis: {
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// fontSize: '40',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 100, name: '智能算法' },
|
||||||
|
{ value: 100, name: '图层服务' },
|
||||||
|
{ value: 100, name: '开发组件' },
|
||||||
|
{ value: 100, name: '业务组件' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrapper {
|
.contentBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 1.25rem 0;
|
||||||
|
|
||||||
|
.generalizeBox {
|
||||||
|
height: 21.875rem;
|
||||||
|
margin-right: 1.25rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #333333;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ApiBox {
|
||||||
|
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
width: 22.5rem;
|
||||||
|
height: 6.875rem;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.375rem;
|
||||||
|
margin: 1.5rem 1.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #5f6770;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #1182fb;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ApiBox:last-of-type {
|
||||||
|
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
h4 {
|
||||||
|
color: #726b5b;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fcc549;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.abnormalBox {
|
||||||
|
height: 21.875rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #333333;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 1.25rem 0 0.625rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #5a83ae;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abnormalBoxBottom {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.RankingList {
|
||||||
|
margin-right: 5.625rem;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
width: 3.75rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #999999;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
b {
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
display: block;
|
||||||
|
height: 1.25rem;
|
||||||
|
width: 2.25rem;
|
||||||
|
background: linear-gradient(to right, rgba(204, 204, 204, 0.6), rgba(0, 0, 0, 0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
width: 11.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(1) i b {
|
||||||
|
width: 3.75rem;
|
||||||
|
background: linear-gradient(to right, rgba(251, 59, 5, 0.6), rgba(0, 0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(1) span {
|
||||||
|
color: #fc5656;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(2) i b {
|
||||||
|
width: 3.125rem;
|
||||||
|
background: linear-gradient(to right, rgba(251, 123, 5, 0.6), rgba(0, 0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(2) span {
|
||||||
|
color: #ff8a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(3) i b {
|
||||||
|
width: 2.75rem;
|
||||||
|
background: linear-gradient(to right, rgba(250, 179, 2, 0.6), rgba(0, 0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.RankingListData:nth-of-type(3) span {
|
||||||
|
color: #f9af0a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AbnormalDistribution {
|
||||||
|
margin-right: 3.75rem;
|
||||||
|
|
||||||
|
.container-body1 {}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AnomalyStatistics {
|
||||||
|
h4 {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AnomalyStatisticsTable {
|
||||||
|
width: 41rem;
|
||||||
|
|
||||||
|
::v-deep .el-table th {
|
||||||
|
padding: 0;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table td {
|
||||||
|
padding: 0;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table .cell {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablePagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
::v-deep .el-pager li {
|
||||||
|
min-width: 1.75rem;
|
||||||
|
padding: 0;
|
||||||
|
border: 0.0625rem solid #b2b2b2;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #b2b2b2;
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pager li:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pagination .btn-prev {
|
||||||
|
padding: 0;
|
||||||
|
min-width: 1.75rem;
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
border: 0.0625rem solid #1182fb;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1182fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pagination .btn-next {
|
||||||
|
padding: 0;
|
||||||
|
min-width: 1.75rem;
|
||||||
|
margin-left: 0.375rem;
|
||||||
|
border: 0.0625rem solid #1182fb;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #1182fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-pager li.active {
|
||||||
|
border: 0.0625rem solid #1182fb;
|
||||||
|
background: #1182fb;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">上边时间</div>
|
<div class="topBox">
|
||||||
|
<h1 class="topTitle">能力运行平台</h1>
|
||||||
|
<div class="topNav">
|
||||||
|
<div class="topTab">
|
||||||
|
<div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
|
||||||
|
<div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
|
||||||
|
<div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
|
||||||
|
</div>
|
||||||
|
<div class="topTimme">
|
||||||
|
<span>选择时间段</span>
|
||||||
|
<el-date-picker v-model="timeStart" type="datetime" placeholder="请选择起始时间">
|
||||||
|
</el-date-picker>
|
||||||
|
<el-date-picker v-model="timeEnd" type="datetime" placeholder="请选择结束时间">
|
||||||
|
</el-date-picker>
|
||||||
|
<el-button type="primary" round>确定</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,16 +25,75 @@ export default {
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
timeSwitchindex: '日',
|
||||||
|
timeStart: '',
|
||||||
|
timeEnd: ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {},
|
methods: {
|
||||||
created() {},
|
timeSwitch(name) {
|
||||||
mounted() {},
|
this.timeSwitchindex = name
|
||||||
};
|
}
|
||||||
|
},
|
||||||
|
created() { },
|
||||||
|
mounted() { }
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wrapper {
|
.topBox {
|
||||||
|
.topTitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.3125rem 0 1.25rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topNav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.topTab {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 6.875rem;
|
||||||
|
height: 1.75rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0.875rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #666666;
|
||||||
|
margin-right: 0.9375rem;
|
||||||
|
border: 0.0625rem solid #cccccc;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeDown {
|
||||||
|
color: #1182fb;
|
||||||
|
border: 0.0625rem solid #1182fb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topTimme {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: block;
|
||||||
|
margin-right: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-date-editor.el-input {
|
||||||
|
margin-right: 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue