refactor(client): use css modules
This commit is contained in:
parent
194fb14e07
commit
eac6ebb239
|
@ -1,19 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<component
|
<component
|
||||||
:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target"
|
:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target"
|
||||||
@contextmenu.stop="() => {}"
|
@contextmenu.stop="() => {}"
|
||||||
>
|
>
|
||||||
<template v-if="!self">
|
<template v-if="!self">
|
||||||
<span class="schema">{{ schema }}//</span>
|
<span :class="$style.schema">{{ schema }}//</span>
|
||||||
<span class="hostname">{{ hostname }}</span>
|
<span :class="$style.hostname">{{ hostname }}</span>
|
||||||
<span v-if="port != ''" class="port">:{{ port }}</span>
|
<span v-if="port != ''" :class="$style.port">:{{ port }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="pathname === '/' && self">
|
<template v-if="pathname === '/' && self">
|
||||||
<span class="self">{{ hostname }}</span>
|
<span :class="$style.self">{{ hostname }}</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span>
|
<span v-if="pathname != ''" :class="$style.pathname">{{ self ? pathname.substring(1) : pathname }}</span>
|
||||||
<span class="query">{{ query }}</span>
|
<span :class="$style.query">{{ query }}</span>
|
||||||
<span class="hash">{{ hash }}</span>
|
<span :class="$style.hash">{{ hash }}</span>
|
||||||
<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
|
<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
|
@ -53,37 +53,37 @@ const attr = self ? 'to' : 'href';
|
||||||
const target = self ? null : '_blank';
|
const target = self ? null : '_blank';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.ieqqeuvs {
|
.root {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
> .icon {
|
.icon {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .self {
|
.self {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .schema {
|
.schema {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .hostname {
|
.hostname {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .pathname {
|
.pathname {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .query {
|
.query {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .hash {
|
.hash {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue