济菏高速业务端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
3.7 KiB

1 year ago
<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 }">
1 year ago
<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 }}
1 year ago
</slot>
</span>
</p>
</div>
<div class="bottom" v-if="hasBtn">
<slot name="button">
<Button>
{{ buttonText }}
</Button>
</slot>
1 year ago
</div>
<!-- <div class="status" :style="{ background: 'linear-gradient(123deg, #00B3CC 0%, rgba(0, 179, 204, 0) 100%)' }">
1 year ago
<span class="text">正常</span>
</div> -->
1 year ago
</BorderRadiusImage>
</template>
<script>
import Button from '@screen/components/Buttons/Button.vue';
import BorderRadiusImage from "@screen/components/BorderRadiusImage.vue";
1 year ago
import { get as pathGet } from "lodash";
1 year ago
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
}
1 year ago
},
data() {
return {
stateMap: {
1: "confirmed",
2: 'comfortable',
3: 'congestion',
4: "normal"
}
}
1 year ago
},
methods: {
getValue(key) {
return pathGet(this.cardData, key) ?? '-'
}
1 year ago
}
}
</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;
1 year ago
}
.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>