-
-
Notifications
You must be signed in to change notification settings - Fork 605
/
AdsCarbon.vue
45 lines (37 loc) · 1.21 KB
/
AdsCarbon.vue
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
<script setup lang="ts">
const carbonads = ref(null)
onMounted(() => {
if (carbonads.value) {
const script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIPK7W&placement=contentnuxtcom')
script.setAttribute('id', '_carbonads_js')
carbonads.value.appendChild(script)
}
})
</script>
<template>
<div ref="carbonads" class="carbon" />
</template>
<style lang="postcss">
.carbon > #carbonads {
@apply relative border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 w-full transition-colors min-h-[220px];
&:hover {
.carbon-text {
@apply text-gray-700 dark:text-gray-200;
}
}
.carbon-img {
@apply flex justify-center p-2 w-full;
& > img {
@apply !max-w-full w-full rounded;
}
}
.carbon-text {
@apply flex px-2 text-sm text-gray-500 dark:text-gray-400 transition-colors text-center w-full;
}
.carbon-poweredby {
@apply block text-xs text-center text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 pt-1 pb-2 px-2 transition-colors;
}
}
</style>