refactor: define setup in script label
This commit is contained in:
zchengo
+290
-328
@@ -1,105 +1,109 @@
|
||||
<template>
|
||||
<a-layout has-sider>
|
||||
<a-layout-sider class="layout-sider" width="150">
|
||||
<div class="logo">
|
||||
<div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
|
||||
</div>
|
||||
<div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
|
||||
</div>
|
||||
<a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<a-menu-item :key="item.key" v-for="item in menuItem">
|
||||
<router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
|
||||
<a-layout-header class="header">
|
||||
<div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
|
||||
<QuestionCircleFilled @click="toDocs"
|
||||
style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
|
||||
<a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
|
||||
<template #content>
|
||||
<div style="max-height: 250px;overflow-y: scroll;">
|
||||
<a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
|
||||
<div style="display: inline-flex;align-items: center;">
|
||||
<a-avatar shape="square" :size="20" v-if="item.status == 1">
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="item.status == 1" style="color: #717171;"> {{ item.content }}</div>
|
||||
<div v-else> {{ item.content }}</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
|
||||
<span v-else>{{ formatDate(item.created) }}</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
|
||||
<a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary" style="width: 92%;"
|
||||
shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-badge :count="data.noticeCount">
|
||||
<BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
|
||||
</a-badge>
|
||||
</a-popover>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
|
||||
<template #overlay>
|
||||
<a-menu style="width: 120px;">
|
||||
<a-menu-item @click="visible = true">
|
||||
<ExclamationCircleOutlined /> 注销账号
|
||||
<a-layout has-sider>
|
||||
<a-layout-sider class="layout-sider" width="150">
|
||||
<div class="logo">
|
||||
<div><img src="../assets/logo.svg"
|
||||
style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" /></div>
|
||||
<div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
|
||||
</div>
|
||||
<a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<a-menu-item :key="item.key" v-for="item in menuItem">
|
||||
<router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="onLogout">
|
||||
<LogoutOutlined /> 退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 注销账号弹出框 -->
|
||||
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
|
||||
width="400px" :centered="true">
|
||||
<a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
|
||||
<a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="user.email" placeholder="邮箱" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
|
||||
<a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
|
||||
{{ buttonText }}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-layout-header>
|
||||
<a-layout-content
|
||||
:style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
|
||||
<transition name="fade">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</transition>
|
||||
</a-layout-content>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
|
||||
<a-layout-header class="header">
|
||||
<div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
|
||||
<QuestionCircleFilled @click="toDocs"
|
||||
style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
|
||||
<a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
|
||||
<template #content>
|
||||
<div style="max-height: 250px;overflow-y: scroll;">
|
||||
<a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
|
||||
<div style="display: inline-flex;align-items: center;">
|
||||
<a-avatar shape="square" :size="20" v-if="item.status == 1">
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square"
|
||||
style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="item.status == 1" style="color: #717171;">
|
||||
{{ item.content }}</div>
|
||||
<div v-else> {{ item.content }}</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<span v-if="item.status == 2" style="color: black;">{{
|
||||
formatDate(item.created)
|
||||
}}</span>
|
||||
<span v-else>{{ formatDate(item.created) }}</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
|
||||
<a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary"
|
||||
style="width: 92%;" shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-badge :count="data.noticeCount">
|
||||
<BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
|
||||
</a-badge>
|
||||
</a-popover>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
|
||||
<template #overlay>
|
||||
<a-menu style="width: 120px;">
|
||||
<a-menu-item @click="visible = true">
|
||||
<ExclamationCircleOutlined /> 注销账号
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="onLogout">
|
||||
<LogoutOutlined /> 退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 注销账号弹出框 -->
|
||||
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
|
||||
okText="注销" width="400px" :centered="true">
|
||||
<a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
|
||||
<a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="user.email" placeholder="邮箱" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
|
||||
<a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading"
|
||||
:disabled="disabled">
|
||||
{{ buttonText }}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-layout-header>
|
||||
<a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
|
||||
<transition name="fade">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</transition>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive, ref, onBeforeMount } from 'vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from '../store/index';
|
||||
@@ -110,312 +114,270 @@ import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, Profil
|
||||
import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardOutlined,
|
||||
SmileOutlined,
|
||||
MehOutlined,
|
||||
ShoppingOutlined,
|
||||
ProfileOutlined,
|
||||
CrownOutlined,
|
||||
QuestionCircleFilled,
|
||||
BellFilled,
|
||||
ExclamationCircleOutlined,
|
||||
LogoutOutlined
|
||||
},
|
||||
setup() {
|
||||
// 菜单选项
|
||||
const menuItem = reactive([{
|
||||
key: "dashboard",
|
||||
to: "/dashboard",
|
||||
icon: "dashboard-outlined",
|
||||
name: "仪表盘"
|
||||
}, {
|
||||
key: "customer",
|
||||
to: "/customer",
|
||||
icon: "smile-outlined",
|
||||
name: "客户"
|
||||
}, {
|
||||
key: "contract",
|
||||
to: "/contract",
|
||||
icon: "meh-outlined",
|
||||
name: "合同"
|
||||
}, {
|
||||
key: "product",
|
||||
to: "/product",
|
||||
icon: "shopping-outlined",
|
||||
name: "产品"
|
||||
}, {
|
||||
key: "config",
|
||||
to: "/config",
|
||||
icon: "profile-outlined",
|
||||
name: "配置"
|
||||
}, {
|
||||
key: "subscribe",
|
||||
to: "/subscribe",
|
||||
icon: "crown-outlined",
|
||||
name: "订阅"
|
||||
}])
|
||||
// 菜单选项
|
||||
const menuItem = reactive([{
|
||||
key: "dashboard",
|
||||
to: "/dashboard",
|
||||
icon: DashboardOutlined,
|
||||
name: "仪表盘"
|
||||
}, {
|
||||
key: "customer",
|
||||
to: "/customer",
|
||||
icon: SmileOutlined,
|
||||
name: "客户"
|
||||
}, {
|
||||
key: "contract",
|
||||
to: "/contract",
|
||||
icon: MehOutlined,
|
||||
name: "合同"
|
||||
}, {
|
||||
key: "product",
|
||||
to: "/product",
|
||||
icon: ShoppingOutlined,
|
||||
name: "产品"
|
||||
}, {
|
||||
key: "config",
|
||||
to: "/config",
|
||||
icon: ProfileOutlined,
|
||||
name: "配置"
|
||||
}, {
|
||||
key: "subscribe",
|
||||
to: "/subscribe",
|
||||
icon: CrownOutlined,
|
||||
name: "订阅"
|
||||
}])
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!',
|
||||
trigger: 'blur',
|
||||
}, {
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
};
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
};
|
||||
|
||||
const store = useStore();
|
||||
const store = useStore();
|
||||
|
||||
const selectedKeys = ref([store.selectedKeys])
|
||||
const collapsed = ref(false)
|
||||
const selectedKeys = ref([store.selectedKeys])
|
||||
const collapsed = ref(false)
|
||||
|
||||
const data = reactive({
|
||||
noticeCount: 0,
|
||||
noticeList: []
|
||||
})
|
||||
const data = reactive({
|
||||
noticeCount: 0,
|
||||
noticeList: []
|
||||
})
|
||||
|
||||
store.$subscribe((mutation, state) => {
|
||||
selectedKeys.value = [state.selectedKeys]
|
||||
})
|
||||
store.$subscribe((mutation, state) => {
|
||||
selectedKeys.value = [state.selectedKeys]
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
const user = reactive({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
verison: undefined,
|
||||
code: undefined,
|
||||
versionText: undefined
|
||||
})
|
||||
const user = reactive({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
verison: undefined,
|
||||
code: undefined,
|
||||
versionText: undefined
|
||||
})
|
||||
|
||||
const visible = ref(false)
|
||||
const visibleLogo = ref(false)
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const buttonText = ref('获取验证码')
|
||||
const visible = ref(false)
|
||||
const visibleLogo = ref(false)
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const buttonText = ref('获取验证码')
|
||||
|
||||
// 初始化数据
|
||||
onBeforeMount(() => {
|
||||
store.selectedKeys = 'dashboard'
|
||||
router.push('dashboard')
|
||||
noticeCount()
|
||||
})
|
||||
// 初始化数据
|
||||
onBeforeMount(() => {
|
||||
store.selectedKeys = 'dashboard'
|
||||
router.push('dashboard')
|
||||
noticeCount()
|
||||
})
|
||||
|
||||
// 点击用户头像
|
||||
const onUserAvatar = () => {
|
||||
getUserInfo().then((res) => {
|
||||
// 点击用户头像
|
||||
const onUserAvatar = () => {
|
||||
getUserInfo().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
user.name = res.data.data.name
|
||||
user.email = res.data.data.email
|
||||
user.version = res.data.data.version
|
||||
user.name = res.data.data.name
|
||||
user.email = res.data.data.email
|
||||
user.version = res.data.data.version
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到项目文档
|
||||
const toDocs = () => {
|
||||
window.open("https://docs.zocrm.cloud")
|
||||
}
|
||||
// 跳转到项目文档
|
||||
const toDocs = () => {
|
||||
window.open("https://docs.zocrm.cloud")
|
||||
}
|
||||
|
||||
// 点击获取验证码
|
||||
const onGetCode = () => {
|
||||
if (user.email == '') {
|
||||
// 点击获取验证码
|
||||
const onGetCode = () => {
|
||||
if (user.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: user.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击确认注销账号
|
||||
const onConfirm = () => {
|
||||
let param = {
|
||||
// 点击确认注销账号
|
||||
const onConfirm = () => {
|
||||
let param = {
|
||||
email: user.email,
|
||||
code: user.code
|
||||
}
|
||||
userDelete(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
router.push('/')
|
||||
message.success('账号已注销')
|
||||
}
|
||||
})
|
||||
}
|
||||
userDelete(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
router.push('/')
|
||||
message.success('账号已注销')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
const formatDate = (timeStamp) => {
|
||||
let now = (Date.parse(new Date())) / 1000
|
||||
if (now - timeStamp < 60) {
|
||||
// 日期格式化
|
||||
const formatDate = (timeStamp) => {
|
||||
let now = (Date.parse(new Date())) / 1000
|
||||
if (now - timeStamp < 60) {
|
||||
return "刚刚"
|
||||
}
|
||||
if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
|
||||
}
|
||||
if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
|
||||
return "今天 " + moment(timeStamp * 1000).format('HH:mm')
|
||||
}
|
||||
return moment(timeStamp * 1000).format('YYYY-MM-DD')
|
||||
}
|
||||
return moment(timeStamp * 1000).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
// 点击读取通知
|
||||
const onReadNotice = (id) => {
|
||||
updateNotice({ id: id }).then((res) => {
|
||||
// 点击读取通知
|
||||
const onReadNotice = (id) => {
|
||||
updateNotice({ id: id }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
onNotice()
|
||||
noticeCount()
|
||||
onNotice()
|
||||
noticeCount()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取通知数量
|
||||
const noticeCount = () => {
|
||||
getNoticeCount().then((res) => {
|
||||
// 获取通知数量
|
||||
const noticeCount = () => {
|
||||
getNoticeCount().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeCount = res.data.data.count
|
||||
data.noticeCount = res.data.data.count
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取通知列表
|
||||
const onNotice = () => {
|
||||
getNoticeList().then((res) => {
|
||||
// 获取通知列表
|
||||
const onNotice = () => {
|
||||
getNoticeList().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeList = res.data.data
|
||||
data.noticeList = res.data.data
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除通知
|
||||
const onDeleteNotice = () => {
|
||||
let ids = []
|
||||
for (let index = 0; index < data.noticeList.length; index++) {
|
||||
// 删除通知
|
||||
const onDeleteNotice = () => {
|
||||
let ids = []
|
||||
for (let index = 0; index < data.noticeList.length; index++) {
|
||||
ids[index] = data.noticeList[index].id
|
||||
}
|
||||
deleteNotice({ ids: ids }).then((res) => {
|
||||
}
|
||||
deleteNotice({ ids: ids }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeList = res.data.data
|
||||
onNotice()
|
||||
data.noticeList = res.data.data
|
||||
onNotice()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击退出账号
|
||||
const onLogout = () => {
|
||||
localStorage.removeItem("uid")
|
||||
localStorage.removeItem("token")
|
||||
router.push('/')
|
||||
}
|
||||
// 点击退出账号
|
||||
const onLogout = () => {
|
||||
localStorage.removeItem("uid")
|
||||
localStorage.removeItem("token")
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
disabled.value = false
|
||||
modalFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
return {
|
||||
menuItem,
|
||||
rules,
|
||||
selectedKeys,
|
||||
collapsed,
|
||||
user,
|
||||
visible,
|
||||
visibleLogo,
|
||||
loading,
|
||||
disabled,
|
||||
buttonText,
|
||||
onUserAvatar,
|
||||
onLogout,
|
||||
onGetCode,
|
||||
onConfirm,
|
||||
onNotice,
|
||||
onReadNotice,
|
||||
noticeCount,
|
||||
onDeleteNotice,
|
||||
onCancel,
|
||||
store,
|
||||
formatDate,
|
||||
data,
|
||||
toDocs
|
||||
};
|
||||
},
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
disabled.value = false
|
||||
modalFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-sider {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
border-right: 0.5px solid #F0F2F5;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
border-right: 0.5px solid #F0F2F5;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fff;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
font-size: 18px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #476FFF;
|
||||
color: #476FFF;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
color: #f56a00;
|
||||
background-color: #fde3cf;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
color: #f56a00;
|
||||
background-color: #fde3cf;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.popover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: rgba(31, 31, 31, 0.85);
|
||||
font-weight: 620;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
color: rgba(31, 31, 31, 0.85);
|
||||
font-weight: 620;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user