1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <script setup>
| import { ref } from "vue";
|
|
| </script>
|
| <template>
| <div class="yc-tag">
| <!-- <div class="content"> -->
| <slot></slot>
| <!-- </div> -->
| </div>
| </template>
|
| <style scoped lang="less">
| .yc-tag {
| // width: 200px;
| // height: 60px;
| height: 100%;
| position: relative;
| padding: 10px;
| z-index: 0;
| background: linear-gradient(#5cddf7) 12px 4px / calc(100% - 24px) 2px no-repeat,
| linear-gradient(#5cddf7) 12px calc(100% - 4px) / calc(100% - 24px) 2px no-repeat,
| linear-gradient(#5cddf7) 4px 12px / 2px calc(100% - 24px) no-repeat,
| linear-gradient(#5cddf7) calc(100% - 4px) 12px / 2px calc(100% - 24px) no-repeat,
| radial-gradient(circle, #5cddf7 0%, #5cddf7 60%, rgba(92,221,247, .4) 68%, transparent 68%) 0 0 / 10px 10px no-repeat,
| radial-gradient(circle, #5cddf7 0%, #5cddf7 60%, rgba(92,221,247, .4) 68%, transparent 68%) 100% 100% / 10px 10px no-repeat,
| radial-gradient(circle, transparent 20%, rgba(92,221,247, .4) 20%, #5cddf7 30%, #5cddf7 60%, rgba(92,221,247, .4) 68%, transparent 68%) 100% 0 / 10px 10px no-repeat,
| radial-gradient(circle, transparent 20%, rgba(92,221,247, .4) 20%, #5cddf7 30%, #5cddf7 60%, rgba(92,221,247, .4) 68%, transparent 68%) 0 100% / 10px 10px no-repeat;
| &::before {
| position: absolute;
| z-index: -1;
| content: '';
| left: 8px;
| right: 8px;
| top: 8px;
| bottom: 8px;
| background: #27658A;
| border: 1px solid #5cddf7;
| border-radius: 6px;
| }
| // .content {
| // height: 100%;
| // }
| }
| </style>
|
|
