81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router';
|
|
import { getLang } from '../utils/config';
|
|
</script>
|
|
|
|
<template>
|
|
<section class="no-print communication-shell">
|
|
<div class="communication-head">
|
|
<RouterLink class="communication-brand" :to="{ name: 'communication.chat' }">
|
|
<i class="fa fa-comments"></i> {{ getLang('module_name', 'Communication') }}
|
|
</RouterLink>
|
|
</div>
|
|
<div class="communication-tabs">
|
|
<RouterLink
|
|
class="communication-tab"
|
|
:class="{ active: $route.name === 'communication.chat' }"
|
|
:to="{ name: 'communication.chat' }"
|
|
>
|
|
{{ getLang('chat') }}
|
|
</RouterLink>
|
|
<RouterLink
|
|
class="communication-tab"
|
|
:class="{ active: $route.name === 'communication.meetings' }"
|
|
:to="{ name: 'communication.meetings' }"
|
|
>
|
|
{{ getLang('meetings') }}
|
|
</RouterLink>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.communication-shell {
|
|
margin-bottom: 18px;
|
|
border: 1px solid #e7ecf3;
|
|
border-radius: 14px;
|
|
background: linear-gradient(120deg, #ffffff 0%, #f9fbff 100%);
|
|
box-shadow: 0 8px 24px rgba(27, 39, 51, 0.06);
|
|
}
|
|
.communication-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 18px 6px;
|
|
}
|
|
.communication-brand {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1e2b37;
|
|
text-decoration: none;
|
|
}
|
|
.communication-brand i {
|
|
margin-right: 6px;
|
|
color: #4f7cff;
|
|
}
|
|
.communication-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 0 18px 14px;
|
|
}
|
|
.communication-tab {
|
|
display: inline-block;
|
|
border-radius: 999px;
|
|
padding: 8px 16px;
|
|
color: #4a5b6f;
|
|
background: #eef2f8;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.communication-tab:hover {
|
|
background: #dde6f7;
|
|
color: #243447;
|
|
}
|
|
.communication-tab.active {
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #4f7cff 0%, #5ea6ff 100%);
|
|
box-shadow: 0 5px 14px rgba(79, 124, 255, 0.35);
|
|
}
|
|
</style>
|