|
@ -1,18 +1,11 @@ |
|
|
<template> |
|
|
<template> |
|
|
<BorderRadiusImage |
|
|
<BorderRadiusImage class="RoadStateCard" borderRadius="2px" |
|
|
class="RoadStateCard" |
|
|
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" borderWidth="2px"> |
|
|
borderRadius="2px" |
|
|
<div class="left" v-if="isShowLeft"> |
|
|
borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" |
|
|
|
|
|
borderWidth="2px" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="left"> |
|
|
|
|
|
<!-- <img :src="(cardData.pictures ? cardData.pictures[0] : null) || require(`./test.png`)"> --> |
|
|
<!-- <img :src="(cardData.pictures ? cardData.pictures[0] : null) || require(`./test.png`)"> --> |
|
|
<!-- <img :src="require(`./test.png`)"> --> |
|
|
<!-- <img :src="require(`./test.png`)"> --> |
|
|
<ElImage |
|
|
<ElImage style="width: 212px; height: 159px" :src="cardData.pictures ? cardData.pictures[0] : null" |
|
|
style="width: 212px; height: 159px" |
|
|
:preview-src-list="cardData.pictures || []"> |
|
|
:src="cardData.pictures ? cardData.pictures[0] : null" |
|
|
|
|
|
:preview-src-list="cardData.pictures || []" |
|
|
|
|
|
> |
|
|
|
|
|
<div slot="error"> |
|
|
<div slot="error"> |
|
|
<i class="el-icon-picture-outline icon"></i> |
|
|
<i class="el-icon-picture-outline icon"></i> |
|
|
</div> |
|
|
</div> |
|
@ -26,25 +19,14 @@ |
|
|
</p> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="controls"> |
|
|
<div class="controls"> |
|
|
<Button |
|
|
<Button :style="{ background: firstBtnColor, width: isShowLeft ? '50%' : '25%' }" |
|
|
:style="{ background: firstBtnColor, width: '50%' }" |
|
|
@click.native="$emit('firstBtnClick', cardData.id)">{{ getFirstBtnText(cardData.state) }}</Button> |
|
|
@click.native="$emit('firstBtnClick', cardData.id)" |
|
|
<Button v-if="cardData.state == 4" :style="{ background: lastBtnColor, width: isShowLeft ? '50%' : '25%' }" |
|
|
>{{ getFirstBtnText(cardData.state) }}</Button |
|
|
@click.native="$emit('lastBtnClick', cardData.id)">{{ getLastBtnText(cardData.state) }}</Button> |
|
|
> |
|
|
|
|
|
<Button |
|
|
|
|
|
v-if="cardData.state == 4" |
|
|
|
|
|
:style="{ background: lastBtnColor, width: '50%' }" |
|
|
|
|
|
@click.native="$emit('lastBtnClick', cardData.id)" |
|
|
|
|
|
>{{ getLastBtnText(cardData.state) }}</Button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<img |
|
|
<img v-if="cardData.state" class="status" :src="require(`./images/${statusMap[cardData.state]}.svg`)" /> |
|
|
v-if="cardData.state" |
|
|
|
|
|
class="status" |
|
|
|
|
|
:src="require(`./images/${statusMap[cardData.state]}.svg`)" |
|
|
|
|
|
/> |
|
|
|
|
|
</BorderRadiusImage> |
|
|
</BorderRadiusImage> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
@ -106,6 +88,10 @@ export default { |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
|
|
|
|
isShowLeft: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: true |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|