Files
FiDA_Front/src/views/home/agent/components/Pause.vue

49 lines
1.0 KiB
Vue

<template>
<div class="pause-container flex align-center">
<SvgIcon name="exclamation" size="12" color="#FF7A51" />
<span>Task has been stopped.</span>
</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.pause-container {
position: relative;
width: 100%;
height: 3.6rem;
line-height: 3.6rem;
column-gap: 0.6rem;
padding: 0 1.2rem;
background-color: #fffcf4;
border-radius: 0.4rem;
margin-top: 1rem;
color: #ff7a51;
&::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.1rem;
background: linear-gradient(
119.03deg,
rgba(233, 121, 60, 0.3) 1.61%,
rgba(255, 207, 144, 0.3) 101.01%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.c-svg {
width: initial;
.svg-icon {
width: 1.2rem;
height: 1.2rem;
}
}
}
</style>