|
|
|
<template>
|
|
|
|
<BorderRadiusImage class='Card' borderRadius="2px"
|
|
|
|
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" borderWidth="2px">
|
|
|
|
<div class="info" :style="{ gap }">
|
|
|
|
<p v-for="(item, index) in keyMap" :key="index">
|
|
|
|
<span>{{ item.label }}: </span>
|
|
|
|
<span>
|
|
|
|
<slot :name="`form-${item.key}`" :data="cardData">
|
|
|
|
{{ getValue(item.key) }}{{ item.suffix }}
|
|
|
|
</slot>
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bottom" v-if="hasBtn">
|
|
|
|
<slot name="button">
|
|
|
|
<Button>
|
|
|
|
{{ buttonText }}
|
|
|
|
</Button>
|
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
|
|
|
|
<span class="text">正常</span>
|
|
|
|
</div> -->
|
|
|
|
</BorderRadiusImage>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Button from '@screen/components/Buttons/Button.vue';
|
|
|
|
import BorderRadiusImage from "@screen/components/BorderRadiusImage.vue";
|
|
|
|
import { get as pathGet } from "lodash";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Card',
|
|
|
|
components: {
|
|
|
|
Button,
|
|
|
|
BorderRadiusImage
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
cardData: {
|
|
|
|
type: Object,
|
|
|
|
default: () => ({
|
|
|
|
source: "济菏运管中心",
|
|
|
|
location: "长清大学城收费站",
|
|
|
|
direction: "117.123456",
|
|
|
|
direction2: "37.12234",
|
|
|
|
state: 1
|
|
|
|
})
|
|
|
|
},
|
|
|
|
keyMap: {
|
|
|
|
type: Array,
|
|
|
|
default: () => ([
|
|
|
|
{
|
|
|
|
key: "source",
|
|
|
|
label: "机构名称"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "location",
|
|
|
|
label: "机构地址"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "direction",
|
|
|
|
label: "经度"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "direction2",
|
|
|
|
label: "纬度"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "direction3",
|
|
|
|
label: "救援外协单位"
|
|
|
|
}
|
|
|
|
])
|
|
|
|
},
|
|
|
|
buttonIcon: {
|
|
|
|
type: String,
|
|
|
|
default: "images/insert.svg"
|
|
|
|
},
|
|
|
|
buttonText: {
|
|
|
|
type: String,
|
|
|
|
default: "修改"
|
|
|
|
},
|
|
|
|
gap: {
|
|
|
|
type: String,
|
|
|
|
default: "6px"
|
|
|
|
},
|
|
|
|
hasBtn: {
|
|
|
|
type: Boolean,
|
|
|
|
default: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
stateMap: {
|
|
|
|
1: "confirmed",
|
|
|
|
2: 'comfortable',
|
|
|
|
3: 'congestion',
|
|
|
|
4: "normal"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getValue(key) {
|
|
|
|
return pathGet(this.cardData, key) ?? '-'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
.Card {
|
|
|
|
color: #fff;
|
|
|
|
display: flex;
|
|
|
|
background: #133242;
|
|
|
|
opacity: 1;
|
|
|
|
padding: 18px 12px;
|
|
|
|
gap: 12px;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
.info {
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
// align-items: center;
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
|
|
|
>p {
|
|
|
|
height: 21px;
|
|
|
|
font-size: 14px;
|
|
|
|
// font-family: PingFang SC, PingFang SC;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 21px;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
&>:first-child {
|
|
|
|
margin-right: 6px;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&>:last-child {
|
|
|
|
flex: 2;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
display: flex;
|
|
|
|
justify-content: end;
|
|
|
|
gap: 9px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.status {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 51px;
|
|
|
|
height: 51px;
|
|
|
|
clip-path: polygon(60% 0, 100% 39%, 100% 100%, 0 0);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
.text {
|
|
|
|
transform: rotate(42deg);
|
|
|
|
display: block;
|
|
|
|
line-height: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
background: linear-gradient(-147deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0%, #FFFFFF 46%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
height: 1px;
|
|
|
|
width: 124%;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
right: calc(-25% - 1px);
|
|
|
|
transform-origin: left top;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|