123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template>
- <div class="p-panel">
- <div class="p-panel-title font-sm">{{ title }}</div>
- <div class="p-panel-body">
- <div class="pp-info">
- <div class="pp-info-days">
- <span class="font-num green font-lg pp-info-days-num">{{
- days
- }}</span>
- <span class="gray font-sm">{{ daysUnit }}</span>
- </div>
- <div class="pp-info-data">
- <span class="gray-l font-sm">{{ data1Str }}</span>
- <span class="pp-icon-l svg-icon" :class="data1IconClass">
- <svg-icon :svgid="data1Icon" />
- </span>
- <span class="gray-l font-sm">{{ data2Str }}</span>
- <span class="pp-icon-r svg-icon" :class="data2IconClass">
- <svg-icon :svgid="data2Icon" />
- </span>
- </div>
- </div>
- <div class="pp-data">
- <div class="pp-tip" :style="'margin-left: ' + data * 100 + '%'">
- <div class="pp-tip-data font-sm">
- {{
- flip
- ? ((1 - data) * 100).toFixed(2) + "%"
- : (data * 100).toFixed(2) + "%"
- }}
- </div>
- <div class="pp-tip-icon">
- <i
- class="el-icon-caret-bottom font-sm"
- :style="'color: ' + dataColor"
- ></i>
- </div>
- </div>
- <div
- class="pp-data-box"
- :style="
- 'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
- "
- >
- <div class="pp-data-split" v-for="index of 19" :key="index"></div>
- <div
- class="pp-data-num"
- :style="
- 'width: ' + data * 100 + '%; background: ' + dataColor + ';'
- "
- ></div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import SvgIcon from "@com/coms/icon/svg-icon.vue";
- export default {
- // 名称
- name: "Ppanel",
- // 使用组件
- components: {
- SvgIcon,
- },
- // 传入参数
- props: {
- title: {
- type: String,
- default: "利用小时",
- },
- days: {
- type: Number,
- default: 88.5,
- },
- daysUnit: {
- type: String,
- default: "小时",
- },
- data1Str: {
- type: String,
- default: "环",
- },
- data1IconClass: {
- type: String,
- default: "svg-icon-sm svg-icon-green",
- },
- data1Icon: {
- type: String,
- default: "svg-arrow-up-1",
- },
- data2Str: {
- type: String,
- default: "同",
- },
- data2Icon: {
- type: String,
- default: "svg-arrow-dpwn-1",
- },
- data2IconClass: {
- type: String,
- default: "svg-icon-sm svg-icon-yellow",
- },
- data: {
- type: Number,
- default: 0.75,
- },
- flip: {
- type: Boolean,
- default: false,
- },
- dataColor: {
- type: String,
- default: "#05BB4C",
- },
- backColor: {
- type: String,
- default: "#4B55AE",
- },
- },
- emits: {},
- // 数据
- data() {
- return {};
- },
- // 函数
- methods: {},
- // 生命周期钩子
- beforeCreate() {
- // 创建前
- },
- created() {
- // 创建后
- },
- beforeMount() {
- // 渲染前
- },
- mounted() {
- // 渲染后
- },
- beforeUpdate() {},
- updated() {},
- };
- </script>
- <style lang="less">
- .p-panel {
- background: #1a1f2fcc;
- width: 206px;
- .font-sm {
- font-size: 12px;
- }
- .font-lg {
- font-size: 16px;
- }
- .p-panel-title {
- height: 2.778vh;
- line-height: 2.778vh;
- text-align: center;
- color: #ffffff;
- border-bottom: 1px solid #ffffff66;
- }
- .p-panel-body {
- .pp-info {
- padding-top: 1.111vh;
- display: flex;
- .pp-info-days-num {
- padding: 1.204vh 0.926vh 0 1.944vh;
- }
- .pp-info-data {
- margin-left: auto;
- .pp-icon-l {
- padding: 1.111vh 1.037vh 0 0.556vh;
- }
- .pp-icon-r {
- padding: 1.111vh 0.833vh 0 0.556vh;
- }
- }
- }
- .pp-data {
- padding: 0.741vh 0.556vh 1.389vh 0.556vh;
- .pp-tip {
- display: inline-block;
- .pp-tip-data,
- .pp-tip-icon {
- margin-left: -100%;
- text-align: center;
- }
- .pp-tip-icon {
- margin-top: -0.37vh;
- }
- }
- .pp-data-box {
- height: 0.741vh;
- width: 190px;
- border: 1px solid;
- position: relative;
- display: flex;
- transform: skewX(-25deg);
- .pp-data-split {
- width: 10px;
- height: 100%;
- z-index: 2;
- transition: 0.2s;
- + .pp-data-split {
- border-left: 1px solid #172f2e;
- }
- }
- .pp-data-num {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- z-index: 1;
- }
- }
- }
- }
- }
- </style>
|