49 lines
1.0 KiB
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>
|