|
@@ -0,0 +1,568 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="notice-board">
|
|
|
|
+ <div class="left">
|
|
|
|
+ <div class="left-top">
|
|
|
|
+ <box label="企业信息">
|
|
|
|
+ <div class="organization-information-list">
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">企业名称</div>
|
|
|
|
+ <div class="value">智慧科技创新有限公司</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">信用代码</div>
|
|
|
|
+ <div class="value">91440300MA5F6XYH2N</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">法人代表</div>
|
|
|
|
+ <div class="value">陈志远</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">主营业务</div>
|
|
|
|
+ <div class="value">人工智能技术服务</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">联系人</div>
|
|
|
|
+ <div class="value">林美玲(商务总监)</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">入驻时间</div>
|
|
|
|
+ <div class="value">2023-03-15</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="key">合同期限</div>
|
|
|
|
+ <div class="value">2023-03-15 至 2026-03-14</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </box>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="left-bottom">
|
|
|
|
+ <box label="知识产权">
|
|
|
|
+ <div ref="chart" class="echarts-box" style="width: 100%;height: 100%;"></div>
|
|
|
|
+ </box>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="top">
|
|
|
|
+ <div class="top-box">
|
|
|
|
+ <div class="top-item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <i class="iconfont huifont-louceng"></i>
|
|
|
|
+ <div class="label">房租</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="value">
|
|
|
|
+ <span class="alibaba color-cyan">75</span>
|
|
|
|
+ <span class="unit">元</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="top-item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <i class="iconfont huifont-qiandao"></i>
|
|
|
|
+ <div class="label">水电费</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="value">
|
|
|
|
+ <span class="alibaba color-cyan">75</span>
|
|
|
|
+ <span class="unit">元</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="top-item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <i class="iconfont huifont-yichuli1"></i>
|
|
|
|
+ <div class="label">物业费</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="value">
|
|
|
|
+ <span class="alibaba color-cyan">75</span>
|
|
|
|
+ <span class="unit">元</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right">
|
|
|
|
+ <div class="right-chart">
|
|
|
|
+ <box label="企业产值">
|
|
|
|
+ <div ref="chart1" class="echarts-box"></div>
|
|
|
|
+ </box>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right-bottom">
|
|
|
|
+ <box label="发展历程">
|
|
|
|
+ <div class="process-box">
|
|
|
|
+ <div class="process-item">
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="icon">
|
|
|
|
+ <div class="icon1">
|
|
|
|
+ <div class="icon2"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="article">
|
|
|
|
+ <div class="date youshe">2023.06.24</div>
|
|
|
|
+ <div class="article-title youshe">时间轴大标题</div>
|
|
|
|
+ <div class="article-content">我是内容我是内容我是内容</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="process-item">
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="icon">
|
|
|
|
+ <div class="icon1">
|
|
|
|
+ <div class="icon2"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="article">
|
|
|
|
+ <div class="date youshe">2023.06.24</div>
|
|
|
|
+ <div class="article-title youshe">时间轴大标题</div>
|
|
|
|
+ <div class="article-content">我是内容我是内容我是内容</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="process-item">
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="icon">
|
|
|
|
+ <div class="icon1">
|
|
|
|
+ <div class="icon2"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="article">
|
|
|
|
+ <div class="date youshe">2023.06.24</div>
|
|
|
|
+ <div class="article-title youshe">时间轴大标题</div>
|
|
|
|
+ <div class="article-content">我是内容我是内容我是内容</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </box>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <model style="width: 100%;height: 100%;" ref="model" fileId="10000892771892"></model> -->
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import box from '@/components/common/noticeBoard/box'
|
|
|
|
+ import model from '@/components/work/common/model'
|
|
|
|
+ const color = ['#aaaaaa', '#fb9f34', '#2482fe'];
|
|
|
|
+ import {
|
|
|
|
+ getPie3D,
|
|
|
|
+ getParametricEquation
|
|
|
|
+ } from '@/uitls/charts.js' //工具类js,页面路径自己修改
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ optionData: [{
|
|
|
|
+ name: '专利产权',
|
|
|
|
+ value: 3
|
|
|
|
+ }, {
|
|
|
|
+ name: '商标产权',
|
|
|
|
+ value: 6
|
|
|
|
+ }, {
|
|
|
|
+ name: '著作权产权',
|
|
|
|
+ value: 22
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.setLabel()
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.initChart();
|
|
|
|
+ this.chart(this.$refs.chart1, [1200, 1340, 1580, 1600, 1640, 1640, 1700])
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 初始化label样式
|
|
|
|
+ setLabel() {
|
|
|
|
+ this.optionData.forEach((item, index) => {
|
|
|
|
+ item.itemStyle = {
|
|
|
|
+ color: color[index]
|
|
|
|
+ }
|
|
|
|
+ item.label = {
|
|
|
|
+ normal: {
|
|
|
|
+ show: true,
|
|
|
|
+ color: color[index],
|
|
|
|
+ formatter: [
|
|
|
|
+ '{b|{b}}',
|
|
|
|
+ '{c|{c}}{b|个}'
|
|
|
|
+ ].join('\n'), // 用\n来换行
|
|
|
|
+ rich: {
|
|
|
|
+ b: {
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ color: '#fff',
|
|
|
|
+ lineHeight: 18,
|
|
|
|
+ align: 'left'
|
|
|
|
+ },
|
|
|
|
+ c: {
|
|
|
|
+ fontSize: 16,
|
|
|
|
+ color: '#fff',
|
|
|
|
+ textShadowColor: '#1c90a6',
|
|
|
|
+ textShadowOffsetX: 0,
|
|
|
|
+ textShadowOffsetY: 2,
|
|
|
|
+ textShadowBlur: 5
|
|
|
|
+ },
|
|
|
|
+ d: {
|
|
|
|
+ color: color[index],
|
|
|
|
+ align: 'left'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ item.labelLine = {
|
|
|
|
+ normal: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ width: 1,
|
|
|
|
+ color: 'rgba(255,255,255,0.7)'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ initChart() {
|
|
|
|
+ this.statusChart = echarts.init(this.$refs.chart)
|
|
|
|
+ // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
|
|
|
+ this.option = getPie3D(this.optionData, 0.8, 240, 28, 26, 0.5)
|
|
|
|
+ this.statusChart.setOption(this.option)
|
|
|
|
+ // 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
|
|
|
|
+ this.option.series.push({
|
|
|
|
+ name: '电梯状态', //自己根据场景修改
|
|
|
|
+ backgroundColor: 'transparent',
|
|
|
|
+ type: 'pie',
|
|
|
|
+ label: {
|
|
|
|
+ opacity: 1,
|
|
|
|
+ fontSize: 13,
|
|
|
|
+ lineHeight: 20
|
|
|
|
+ },
|
|
|
|
+ startAngle: -40, // 起始角度,支持范围[0, 360]。
|
|
|
|
+ clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
|
|
+ radius: ['20%', '50%'],
|
|
|
|
+ center: ['50%', '50%'],
|
|
|
|
+ data: this.optionData,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ opacity: 0 //这里必须是0,不然2d的图会覆盖在表面
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.statusChart.setOption(this.option)
|
|
|
|
+ },
|
|
|
|
+ chart(elem, data) {
|
|
|
|
+ let chart = echarts.init(elem);
|
|
|
|
+ let option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ show: true,
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ formatter: function() {
|
|
|
|
+ return ''
|
|
|
|
+ },
|
|
|
|
+ backgroundColor: 'rgba(255,255,255,0)',
|
|
|
|
+ borderWidth: 0,
|
|
|
|
+ padding: 0,
|
|
|
|
+ axisPointer: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: 'solid',
|
|
|
|
+ color: '#4E5561',
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '15',
|
|
|
|
+ top: '30',
|
|
|
|
+ right: '15',
|
|
|
|
+ bottom: '0',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ color: ['#1978E5'],
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: ['01', '02', '03', '04', '05', '06', '07'],
|
|
|
|
+ axisLabel: {
|
|
|
|
+ margin: 10,
|
|
|
|
+ color: '#D0DEEE',
|
|
|
|
+ fontSize: 10
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#6C8097'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ name: '万元',
|
|
|
|
+ type: 'value',
|
|
|
|
+ minInterval: 1,
|
|
|
|
+ splitNumber: 3,
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ color: '#D0DEEE',
|
|
|
|
+ fontSize: 10,
|
|
|
|
+ align: 'right',
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ margin: 10,
|
|
|
|
+ color: '#D0DEEE',
|
|
|
|
+ fontSize: 10
|
|
|
|
+ },
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: 'rgba(108,128,151,0.3)',
|
|
|
|
+ type: 'dashed'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ data: data,
|
|
|
|
+ type: 'bar',
|
|
|
|
+ barWidth: 10,
|
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: 'rgba(73, 223, 214, 0.67)'
|
|
|
|
+ }, {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: 'rgba(0, 58, 255, 0)'
|
|
|
|
+ }, ]),
|
|
|
|
+ }]
|
|
|
|
+ };
|
|
|
|
+ chart.setOption(option);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ box,
|
|
|
|
+ model
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .notice-board {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: url(https://lanhu-oss.lanhuapp.com/pssojb3tye7vubv2ftf1nd9qqpjjolr8a16bce648-d855-43dd-bd70-e26ed58b5c42) 100% no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+
|
|
|
|
+ .left {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 350px;
|
|
|
|
+ background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
|
|
|
|
+ z-index: 99;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ padding: 10px 40px 10px 10px;
|
|
|
|
+
|
|
|
|
+ .left-bottom {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 0;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ width: 350px;
|
|
|
|
+ background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
|
|
|
|
+ z-index: 99;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ padding: 10px 10px 10px 40px;
|
|
|
|
+
|
|
|
|
+ .right-chart {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .echarts-box {
|
|
|
|
+ height: 160px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right-bottom {
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 0;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+
|
|
|
|
+ .process-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .line {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 3px;
|
|
|
|
+ background: rgba(0, 78, 126, 0.6);
|
|
|
|
+ left: 9px;
|
|
|
|
+ top: 0;
|
|
|
|
+ bottom: -15px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .process-item {
|
|
|
|
+ position: relative;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ padding-left: 30px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+
|
|
|
|
+ &:nth-child(2n) {
|
|
|
|
+ .article {
|
|
|
|
+ border-color: rgba(1, 255, 180, 0.6);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(3n) {
|
|
|
|
+ .article {
|
|
|
|
+ border-color: rgba(255, 147, 6, 0.6);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ background: rgba(0, 159, 255, 0.39);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 1px solid rgba(73, 223, 214, 0.67);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 20px;
|
|
|
|
+ left: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon1 {
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #009FFF;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ border: 2px solid rgba(73, 223, 214, 1);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon2 {
|
|
|
|
+ width: 5px;
|
|
|
|
+ height: 5px;
|
|
|
|
+ background: linear-gradient(0deg, #FFFFFF 0%, rgba(1, 126, 201, 0) 100%);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .article {
|
|
|
|
+ border-top: 2px solid rgba(0, 234, 255, 0.6);
|
|
|
|
+ background: rgba(0, 148, 238, 0.1);
|
|
|
|
+ padding: 10px;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .article-title {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin: 8px 0 6px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .date {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .article-content {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ line-height: 12px;
|
|
|
|
+ opacity: 0.6;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .top {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 10px;
|
|
|
|
+ left: 310px;
|
|
|
|
+ right: 310px;
|
|
|
|
+
|
|
|
|
+ .top-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-evenly;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .top-item {
|
|
|
|
+ width: 130px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .value {
|
|
|
|
+ height: 32px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ border: 1px solid rgba(9, 81, 137, 0.3);
|
|
|
|
+
|
|
|
|
+ .color-cyan {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ margin-right: 3px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .unit {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ background: linear-gradient(-90deg, rgba(0, 187, 255, 0) 0%, rgba(0, 230, 255, 0.09) 50%, rgba(0, 187, 255, 0) 100%);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 32px;
|
|
|
|
+
|
|
|
|
+ .label {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ margin-left: 6px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconfont {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ display: inline-block; //使元素成为行内块元素
|
|
|
|
+ line-height: 1; //设置宽度和高度
|
|
|
|
+ background: linear-gradient(0deg, #0080FF, #FFFFFF);
|
|
|
|
+ -webkit-background-clip: text; //指定背景只在文本内部显示
|
|
|
|
+ -webkit-text-fill-color: transparent; //使文本颜色透明
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .organization-information-list {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+
|
|
|
|
+ .item {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+
|
|
|
|
+ &:last-child {
|
|
|
|
+ margin-bottom: 0px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .key,
|
|
|
|
+ .value {
|
|
|
|
+ background: rgba(185, 223, 250, 0.1);
|
|
|
|
+ padding: 7px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .key {
|
|
|
|
+ width: 80px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .value {
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|