From accebdce93486d3b4f26e55ffdea047549cce20c Mon Sep 17 00:00:00 2001
From: cuijian <cuijian@xalxzn.com>
Date: 星期一, 28 七月 2025 21:12:38 +0800
Subject: [PATCH] Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj
---
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 866 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 866 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
new file mode 100644
index 0000000..fef7505
--- /dev/null
+++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
@@ -0,0 +1,866 @@
+<template>
+ <div id="StatisticsLegend"
+ style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24">
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="鍚嶇О">
+ <a-input placeholder="璇烽�夋嫨鏍戣妭鐐�" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="鏃ユ湡">
+ <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
+ @change="dataChange" :allowClear="false"/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="2" :sm="2" :xs="2">
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+ </a-space>
+ </a-col>
+ </a-row>
+ </a-form>
+ </div>
+ <!--寮�鏈虹巼-->
+ <div class="PowerOnRate Line-box">
+ <div class="title">
+ <div class="circle"></div>
+ <div class="text">鍒╃敤鐜�</div>
+ </div>
+ <div class="PowerOnRate-box box-bottom">
+ <div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>
+ <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
+ </div>
+ </div>
+ <!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
+ <div class="UtilizationStartup">
+ <div class="Utilization Line-box">
+ <div class="title">
+ <div class="circle"></div>
+ <div class="text">寮�鏈虹巼</div>
+ </div>
+ <div class="Utilization-box box-bottom">
+ <div class="Utilization-left left">
+ <div class="left-box">
+ <div class="left-box-con">
+ <div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div>
+ <div class="Rate-box" :style="{height:UtilizationHeight+'%'}">
+ <p class="Rate-box-text">
+ <span ref="UtilizationRate">{{UtilizationHeight}}%</span>
+ <br>
+ 寮�鏈虹巼
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
+ </div>
+ </div>
+ <div class="Startup Line-box">
+ <div class="title">
+ <div class="circle"></div>
+ <div class="text">寮�鍔ㄧ巼</div>
+ </div>
+ <div class="Startup-box box-bottom">
+ <div class="Startup-left left" ref="StartupRate">
+ <div class="left-box">
+ <div class="left-box-con">
+ <div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div>
+ <div class="Rate-box" :style="{height:StartupHeight+'%'}">
+ <p class="Rate-box-text">
+ <span>{{StatCharUsedopeningRate}}%</span>
+ <br>
+ 寮�鍔ㄧ巼
+ </p>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import moment from 'moment'
+ import { putAction, getAction } from '@/api/manage'
+ import $ from 'jquery'
+ import * as echarts from 'echarts'
+
+ export default {
+ name: 'StatisticsLegend',
+ props: { equip: {} },
+ data() {
+ return {
+ readOnly: true,
+ showday: true,
+ StatCharOpeningRate: 0,
+ StatCharUsedRate: 0,
+ StatCharUsedopeningRate: 0,
+ openingLong: 0,
+ waitingLong: 0,
+ processLong: 0,
+ closedLong: 0,
+ totalLong: 0,
+ UtilizationHeight: 0,
+ StartupHeight: 0,
+ quip: {},
+ dates: [],
+ queryParam: {},
+ queryParams: {
+ collectTime: undefined
+ },
+ shiftSubList: [],
+ shiftList: [],
+ url: {
+ getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
+ dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
+ getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
+ }
+ }
+ },
+ created() {
+ let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
+ this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
+ this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
+ this.initEquipmentNode()
+ },
+
+ methods: {
+ disabledDate(current) {
+ //Can not slect days before today and today
+ return current && current > moment().subtract('days', 1)
+ },
+ //鎶婄璁＄畻鎴愬搴旂殑鏃跺垎绉掔殑鍑芥暟
+ getTime(time) {
+ //杞崲涓烘椂鍒嗙
+ let h = Math.round(time / 60 / 60)
+ h = h < 10 ? '0' + h : h
+ //浣滀负杩斿洖鍊艰繑鍥�
+ // console.log(h);
+ return h
+ },
+ moment,
+ draw() {
+ //鍒╃敤鐜�
+ //楗煎浘
+ let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
+ let PowerOnRatePie_option = {
+ // color: ["#3859fa", '#ccc'],
+ title: {
+ text: this.StatCharUsedRate + '%',
+ subtext: '鍒╃敤鐜�',
+ textStyle: {
+ color: '#268e80',
+ fontSize: 18
+
+ },
+ subtextStyle: {
+ color: '#292929'
+ },
+ x: 'center',
+ y: 'center'
+ },
+ series: [{
+ name: '',
+ type: 'pie',
+ radius: ['55%', '70%'],
+ itemStyle: {
+ normal: {
+ borderWidth: 4,//鎵囧尯闂村姞闂撮殧
+ borderColor: '#fff'//闂撮殧涓虹櫧鑹�
+ }
+ },
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ data: [{
+ value: 100,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#88a8fd'
+ },
+ {
+ offset: 1,
+ color: '#544cee'
+ }], false)
+ }
+ },
+ {
+ value: 100 - this.StatCharUsedRate,
+ itemStyle: {
+ color: '#f0f3f5'
+ }
+ }
+ ]
+ }
+ ]
+ }
+ PowerOnRatePie.setOption(PowerOnRatePie_option)
+ let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
+ let PowerOnRateLine_option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 60,
+ containLabel: true
+ },
+ legend: {
+ // selected:{
+ // "鏇茬嚎":false,
+ // },
+ top: '0',
+ right: '10',
+ //璁剧疆鍗曢�夊閫夋ā寮�
+ // selectedMode:'single',
+ icon: 'pin',
+ data: [
+ // {
+ // name:'鏇茬嚎',
+ // textStyle:{
+ // padding:4,
+ // color:'#e957ff',
+ // // borderWidth:1,
+ // fontSize:16,
+ // // borderColor:'#50E6D7'
+ // }
+ // },
+ {
+ name: '鏌辩姸鍥�',
+ textStyle: {
+ padding: 4,
+ fontSize: 16,
+ color: '#9996f8'
+ // borderWidth:1,
+ // borderColor:'#50E6D7'
+ }
+ }
+ ]
+ },
+ xAxis: {
+ type: 'category',
+ data: ['寮�鏈烘椂闀�', '鍏虫満鏃堕暱', '杩愯鏃堕暱', '寰呮満鏃堕暱'],
+ axisLabel: { //鍧愭爣杞村瓧浣撻鑹�
+ textStyle: {
+ color: '#000'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#e5e5e5'
+ }
+ },
+ axisTick: { //y杞村埢搴︾嚎
+ show: false
+ },
+ splitLine: { //缃戞牸
+ show: false
+ },
+ boundaryGap: true
+ },
+ yAxis: {
+ name: '鏃堕棿/灏忔椂',
+ type: 'value',
+ axisLabel: { //鍧愭爣杞村瓧浣撻鑹�
+ textStyle: {
+ color: '#000'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: { //y杞村埢搴︾嚎
+ show: false
+ },
+ splitLine: { //缃戞牸
+ show: true,
+ lineStyle: {
+ color: '#dadde4',
+ type: 'dashed'
+ }
+ }
+ },
+ series: [
+ // {
+ // name:'鏇茬嚎',
+ // type: 'line',
+ // smooth:true,
+ // symbol: 'circle',
+ // symbolSize: 8,
+ // label:{
+ // show:true,
+ // position:"top",
+ // textStyle:{
+ // color:'#000',
+ // },
+ // formatter:"鏃堕暱锛歿c}H"
+ // },
+ // itemStyle: {
+ // color: "rgb(87, 120, 225)",
+ // borderColor: "#fff",
+ // borderWidth: 2,
+ // shadowColor: 'rgba(0, 0, 0, .3)',
+ // },
+ // lineStyle: {
+ // normal: {
+ // color:"rgb(87, 120, 225)",
+ // shadowColor: 'rgba(87, 120, 225, .4)',
+ // shadowBlur: 8,
+ // shadowOffsetY: 10,
+ // shadowOffsetX: 0,
+ // },
+ // },
+ // areaStyle: {
+ // normal: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(87, 120, 225, .6)'
+ // }, {
+ // offset: 1,
+ // color: 'rgba(87, 120, 225, .3)'
+ // }]),
+ // }
+ // },
+ // data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
+ // },
+ {
+ name: '鏌辩姸鍥�',
+ type: 'bar',
+ data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
+ // data:[22,3,5,6],
+ barWidth: 25,
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#000'
+ },
+ // formatter:"鏃堕暱锛歿c}H",
+ formatter: params => {
+ const value = String(params.value)
+ return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H`
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ['#6496e9', '#6bded3'],
+ ['#849db8', '#b4b8cc'],
+ ['#4fe1c5', '#4ecee1'],
+ // ["#9978fa","#88a1fa"],
+ ['#ffbb65', '#fdc68b']
+ ]
+ // return colorList[params.dataIndex];
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: colorItem[0]
+ },
+ {
+ offset: 1,
+ color: colorItem[1]
+ }], false)
+ },
+ barBorderRadius: [5, 5, 0, 0]
+ }
+ }
+ }]
+ }
+ PowerOnRateLine.setOption(PowerOnRateLine_option)
+ //寮�鏈虹巼
+ let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
+ let UtilizationLine_option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '15%',
+ right: '3%',
+ left: '10%',
+ bottom: '12%'
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['寮�鏈烘椂闀�', '鎬绘椂闀�'],
+ axisLine: {
+ lineStyle: {
+ // color: 'rgba(70, 196, 255, .8)'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // color: 'rgba(111, 132, 189, 1)',
+ textStyle: {
+ fontSize: 14
+ }
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鏃堕棿/灏忔椂',
+ nameTextStyle: {
+ // color: 'rgba(111, 132, 189, 1)'
+ },
+ axisLabel: {
+ formatter: '{value}'
+ // color: 'rgba(111, 132, 189, 1)',
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ // color: 'rgba(70, 196, 255, .3)'
+ }
+ }
+ }],
+ series: [
+ {
+ type: 'bar',
+ data: [this.openingLong, this.totalLong],
+ // data:[22,22],
+ barWidth: 25,
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#000'
+ },
+ // formatter:"鏃堕暱锛歿c}H",
+ formatter: params => {
+ const value = String(params.value)
+ return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H`
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ['#6496e9', '#6bded3'],
+ ['#9978fa', '#88a1fa']
+ ]
+ // return colorList[params.dataIndex];
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: colorItem[0]
+ },
+ {
+ offset: 1,
+ color: colorItem[1]
+ }], false)
+ },
+ barBorderRadius: [5, 5, 0, 0]
+ }
+ }
+ }]
+ }
+ UtilizationLine.setOption(UtilizationLine_option)
+ //寮�鍔ㄧ巼
+ let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
+ let StartupLine_option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '15%',
+ right: '3%',
+ left: '10%',
+ bottom: '12%'
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['杩愯鏃堕暱', '寮�鏈烘椂闀�'],
+ axisLine: {
+ lineStyle: {
+ // color: 'rgba(70, 196, 255, .8)'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // color: 'rgba(111, 132, 189, 1)',
+ textStyle: {
+ fontSize: 14
+ }
+ }
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '鏃堕棿/灏忔椂',
+ nameTextStyle: {
+ // color: 'rgba(111, 132, 189, 1)'
+ },
+ axisLabel: {
+ formatter: '{value}'
+ // color: 'rgba(111, 132, 189, 1)',
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ // color: 'rgba(70, 196, 255, .3)'
+ }
+ }
+ }],
+ series: [{
+ type: 'bar',
+ data: [this.processLong, this.openingLong],
+ // data:[22,22],
+ barWidth: 25,
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#000'
+ },
+ // formatter:"鏃堕暱锛歿c}H",
+ formatter: params => {
+ const value = String(params.value)
+ return value.length == 2 && value[0] === '0' ? `鏃堕暱锛�${value.slice(1)}H` : `鏃堕暱锛�${value}H`
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ let colorList = [
+ ['#4fe1c5', '#4ecee1'],
+ ['#6496e9', '#6bded3']
+ ]
+ // return colorList[params.dataIndex];
+ let colorItem = colorList[params.dataIndex]
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: colorItem[0]
+ },
+ {
+ offset: 1,
+ color: colorItem[1]
+ }], false)
+ },
+ barBorderRadius: [5, 5, 0, 0]
+ }
+ }
+ }]
+ }
+ StartupLine.setOption(StartupLine_option)
+ },
+ queryStatistical() {
+ getAction(this.url.dayStatisticalRate, this.queryParams).then(res => {
+ if (res.success) {
+ this.StatCharOpeningRate = res.result.openRate
+ this.StatCharUsedRate = res.result.utilizationRate
+ this.UtilizationHeight = res.result.openRate
+ this.StatCharUsedopeningRate = res.result.usedOpenRate
+ this.StartupHeight = res.result.usedOpenRate
+ this.openingLong = this.getTime(res.result.openLong)
+ this.waitingLong = this.getTime(res.result.waitLong)
+ this.processLong = this.getTime(res.result.processLong)
+ this.closedLong = this.getTime(res.result.closeLong)
+ this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
+ this.draw()
+ }
+ })
+ },
+ dataChange(val) {
+ if (val) {
+ this.queryParams.dateTime = val.format('YYYYMMDD')
+ this.queryParams.collectTime = val.format('YYYY-MM-DD')
+ }
+ },
+ initEquipmentNode() {
+ let _this = this
+ getAction(this.url.getBaseTree).then((res) => {
+ if (res.success) {
+ const { isEquipment, productionId, tierName } = this.$route.params
+ // 鍒ゆ柇鏄惁鏄粠鐪嬫澘璺宠浆杩囨潵锛宲roductionId 瀛樺湪鍒欎负浠庣湅鏉胯烦杞�
+ if (productionId) {
+ // 鍒ゆ柇鏄惁鐐瑰嚮鐨勬槸璁惧灞傜骇
+ if (!isEquipment) {
+ _this.$set(this.queryParams, 'parentId', productionId)
+ _this.$set(this.queryParam, 'tierName', tierName)
+ } else {
+ _this.$set(this.queryParams, 'equipmentId', productionId)
+ _this.$set(this.queryParam, 'tierName', productionId + '/' + tierName)
+ }
+ } else {
+ if (res.result[0]) {
+ _this.$set(this.queryParam, 'tierName', res.result[0].title)
+ _this.$set(this.queryParams, 'parentId', res.result[0].key)
+ }
+ }
+ this.queryStatistical()
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ }).finally(() => {
+ this.loading = false
+ this.cardLoading = false
+ })
+ },
+ searchReset() {
+ this.queryParam = {}
+ this.queryParams = {
+ collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
+ dateTime: moment().add(-1, 'd').format('YYYYMMDD')
+ }
+ this.initEquipmentNode()
+ },
+ searchQuery() {
+ this.queryStatistical()
+ }
+ },
+ watch: {
+ equip(val) {
+ // console.log(val);
+ if (val && val.equipmentId) {
+ this.$set(this.queryParam, 'tierName', val.title)
+ this.$set(this.queryParam, 'equipmentId', val.equipmentId)
+ this.queryParams.parentId = ''
+ this.queryParams.equipmentId = val.equipmentId
+ } else {
+ this.queryParams.parentId = val.key
+ this.queryParams.equipmentId = ''
+ this.$set(this.queryParam, 'tierName', val.title)
+ }
+ this.searchQuery()
+ }
+ // this.searchQuery();
+ }
+
+ }
+</script>
+
+<style scoped>
+ .charContent {
+ display: flex;
+ }
+
+ @media screen and (min-width: 1920px) {
+ #StatisticsLegend {
+ height: 748px !important;
+ overflow: scroll;
+ }
+ }
+
+ @media screen and (min-width: 1680px) and (max-width: 1920px) {
+ #StatisticsLegend {
+ height: 748px !important;
+ overflow: scroll;
+ }
+ }
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ #StatisticsLegend {
+ height: 600px !important;
+ overflow: scroll;
+ }
+ }
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ #StatisticsLegend {
+ height: 501px !important;
+ overflow: scroll;
+ }
+ }
+
+ @media screen and (max-width: 1280px) {
+ #StatisticsLegend {
+ height: 501px !important;
+ overflow: scroll;
+ }
+ }
+
+ #StatisticsLegend .PowerOnRate {
+ flex: 1;
+ margin-bottom: 15px;
+ background-color: #fff;
+ }
+
+ #StatisticsLegend .UtilizationStartup {
+ flex: 1;
+ display: flex;
+ }
+
+ #StatisticsLegend .UtilizationStartup > div {
+ flex: 1;
+ background-color: #fff;
+ }
+
+ #StatisticsLegend .UtilizationStartup .Utilization {
+ margin-right: 15px;
+ }
+
+ .title {
+ display: flex;
+ align-items: center;
+ padding-left: 15px;
+ padding-top: 5px;
+ }
+
+ .title .circle {
+ width: 15px;
+ height: 15px;
+ background-color: #7282ec;
+ border-radius: 100%;
+ margin-right: 10px;
+ }
+
+ .title .text {
+ font-size: 2vh;
+ }
+
+ .Line-box {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .Line-box .box-bottom {
+ flex: 1;
+ }
+
+ .PowerOnRate-box {
+ display: flex;
+ }
+
+ .PowerOnRate-box .PowerOnRate-left {
+ width: 25%;
+ }
+
+ .PowerOnRate-box .PowerOnRate-right {
+ flex: 1;
+ }
+
+ .Utilization-box {
+ display: flex;
+ }
+
+ .Utilization-box .Utilization-left {
+ width: 25%;
+ }
+
+ .Utilization-box .Utilization-right {
+ flex: 1;
+ }
+
+ .Startup-box {
+ display: flex;
+ }
+
+ .Startup-box .Startup-left {
+ width: 25%;
+ }
+
+ .Startup-box .Startup-right {
+ flex: 1;
+ }
+
+ .left {
+ display: flex;
+ align-items: center;
+ }
+
+ .left .left-box {
+ width: 65%;
+ height: 60%;
+ margin: 0 auto;
+ overflow: hidden;
+ border-radius: 8px;
+
+ /*border: 6px solid red;*/
+ /*!*background-color: yellow;*!*/
+ /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
+ }
+
+ .left-box-con {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ text-align: center;
+ border: 6px solid red;
+ /*background-color: yellow;*/
+ border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
+ }
+
+ .left .left-box .Rate-box-kong {
+ width: 100%;
+ background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
+ background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #b5dec2), color-stop(100%, #f4f5ba));
+ background: -webkit-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
+ background: -o-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
+ background: -ms-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
+ background: linear-gradient(to top, #b5dec2 0%, #f4f5ba 100%);
+ }
+
+ .left .left-box .Rate-box {
+ position: absolute;
+ text-align: center;
+ bottom: 0;
+ width: 100%;
+ height: 89%;
+ /*background-color: green;*/
+ background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
+ background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #06a8f8), color-stop(100%, #2bf3c7));
+ background: -webkit-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
+ background: -o-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
+ background: -ms-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
+ background: linear-gradient(to top, #06a8f8 0%, #2bf3c7 100%);
+ }
+
+ .left .left-box .Rate-box p {
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ width: 100%;
+ text-align: center;
+ }
+
+ .con-left {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ }
+
+ .con-left > span {
+ flex: 1;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3