admin/LingXi-CRM
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

ui: change page style

Browse Source
This commit is contained in:
zchengo
2023-01-19 23:44:03 +08:00
parent 51c665055e
commit b7075bf181
3 changed files with 38 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZOCRM</title> <title>ZOCRM</title>
</head> </head>
<body style="background-color: #FAFCFF;padding: 0;margin: 0;"> <body style="background-color: #FAFAFA;padding: 0;margin: 0;">
<div id="app"></div> <div id="app"></div>
<script type="module" src="./src/main.js"></script> <script type="module" src="./src/main.js"></script>
</body> </body>
web/src/views/Dashboard.vue
+4 -5
View File
@@ -64,9 +64,9 @@
</a-row> </a-row>
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="15"> <a-col :span="15">
<a-card class="card" style="height: 60vh;"> <a-card class="card" style="height: 60vh;margin-top: 20px;">
<div style="display:flex;align-items: center;justify-content: space-between;"> <div style="display:flex;align-items: center;justify-content: space-between;">
<div style="color: #606266;font-size: 16px;font-weight: 600;margin-left: 10px;"> <div style="color: #606266;font-size: 16px;font-weight: 600;">
<span>合同金额完成情况</span> <span>合同金额完成情况</span>
<a-tooltip placement="right"> <a-tooltip placement="right">
<template #title> <template #title>
@@ -85,8 +85,8 @@
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="9"> <a-col :span="9">
<a-card class="card" style="height: 60vh;"> <a-card class="card" style="height: 60vh;margin-top: 20px;">
<div style="color: #606266;font-size: 16px;font-weight: 600;margin-left: 10px;"> <div style="color: #606266;font-size: 16px;font-weight: 600;">
<span>客户行业分布</span> <span>客户行业分布</span>
<a-tooltip placement="right"> <a-tooltip placement="right">
<template #title> <template #title>
@@ -235,7 +235,6 @@ export default {
<style scoped> <style scoped>
.card { .card {
margin-top: 20px;
border: none; border: none;
box-shadow: 0 1px 16px 0 rgb(33 41 48 / 5%); box-shadow: 0 1px 16px 0 rgb(33 41 48 / 5%);
} }
web/src/views/Home.vue
+33 -37
View File
@@ -1,12 +1,12 @@
<template> <template>
<a-layout style="min-height: 100vh"> <a-layout has-sider>
<a-layout-sider width="180" class="sider" v-model:collapsed="collapsed" :trigger="null" collapsible> <a-layout-sider class="layout-sider" width="150">
<div class="logo"> <div class="logo">
<div><img src="../assets/logo.svg" style="width: 35px;height: 35px;filter: drop-shadow(2px 2px 6px #79bbff);" /> <div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
</div> </div>
<div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div> <div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
</div> </div>
<a-menu style="border-right: none;" v-model:selectedKeys="selectedKeys" mode="inline"> <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"> <a-menu-item :key="item.key" v-for="item in menuItem">
<router-link :to="item.to" @click="store.selectedKeys = item.key" replace> <router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
<component :is="item.icon" /> <component :is="item.icon" />
@@ -15,19 +15,11 @@
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</a-layout-sider> </a-layout-sider>
<a-layout> <a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
<a-layout-header class="header"> <a-layout-header class="header">
<div> <div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
<menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" /> <QuestionCircleFilled @click="toDocs"
<menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" /> style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
</div>
<div style="display: flex;align-items: center;justify-items: center;">
<a-popover placement="bottomRight" :overlayStyle="{ width: '180px' }" trigger="click">
<template #content>
<a-image :width="150" src="https://zocrm.cloud/gzh_qrcode.jpg" :preview="false" />
</template>
<QuestionCircleFilled style="color: #909399; font-size: 18px;margin: 0 15px;" />
</a-popover>
<a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click"> <a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
<template #content> <template #content>
<div style="max-height: 250px;overflow-y: scroll;"> <div style="max-height: 250px;overflow-y: scroll;">
@@ -37,12 +29,12 @@
<div style="display: inline-flex;align-items: center;"> <div style="display: inline-flex;align-items: center;">
<a-avatar shape="square" :size="20" v-if="item.status == 1"> <a-avatar shape="square" :size="20" v-if="item.status == 1">
<template #icon> <template #icon>
<BellFilled style="font-size: 12px;" /> <BellFilled style="font-size: 18px;" />
</template> </template>
</a-avatar> </a-avatar>
<a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else> <a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
<template #icon> <template #icon>
<BellFilled style="font-size: 12px;" /> <BellFilled style="font-size: 18px;" />
</template> </template>
</a-avatar> </a-avatar>
<div v-if="item.status == 1" style="color: #717171;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div> <div v-if="item.status == 1" style="color: #717171;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
@@ -65,9 +57,8 @@
<BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" /> <BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
</a-badge> </a-badge>
</a-popover> </a-popover>
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
<a-avatar @click="onUserAvatar" class="avatar" :size="32">U</a-avatar> <a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item @click="visible = true"> <a-menu-item @click="visible = true">
@@ -82,8 +73,8 @@
</div> </div>
<!-- 注销账号弹出框 --> <!-- 注销账号弹出框 -->
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销" <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
width="360px" :centered="true"> width="400px" :centered="true">
<a-alert message="账号注销后，会清空账号相关的所有数据" banner /><br /> <a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
<a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules"> <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
<a-form-item name="email"> <a-form-item name="email">
<a-input v-model:value="user.email" placeholder="邮箱" disabled /> <a-input v-model:value="user.email" placeholder="邮箱" disabled />
@@ -96,7 +87,8 @@
</a-form> </a-form>
</a-modal> </a-modal>
</a-layout-header> </a-layout-header>
<a-layout-content :style="{ margin: '10px', padding: '18px 18px 12px 18px', background: '#fff' }"> <a-layout-content
:style="{ margin: '10px', padding: '20px 20px 12px 20px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
<transition name="fade"> <transition name="fade">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<component :is="Component" /> <component :is="Component" />
@@ -114,10 +106,8 @@ import { useStore } from '../store/index';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { getUserInfo, getVerifyCode, userDelete } from '../api/user'; import { getUserInfo, getVerifyCode, userDelete } from '../api/user';
import { updateNotice, getNoticeCount, getNoticeList, deleteNotice } from '../api/notice'; import { updateNotice, getNoticeCount, getNoticeList, deleteNotice } from '../api/notice';
import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined } from '@ant-design/icons-vue'; import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, CrownOutlined } from '@ant-design/icons-vue';
import { CrownOutlined, MenuUnfoldOutlined, MenuFoldOutlined, WechatFilled } from '@ant-design/icons-vue'; import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { QuestionCircleFilled, BellFilled } from '@ant-design/icons-vue';
import { ExclamationCircleOutlined, CrownFilled, LogoutOutlined, DownCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import moment from 'moment' import moment from 'moment'
export default { export default {
@@ -127,16 +117,10 @@ export default {
MehOutlined, MehOutlined,
ShoppingOutlined, ShoppingOutlined,
CrownOutlined, CrownOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined,
WechatFilled,
QuestionCircleFilled, QuestionCircleFilled,
BellFilled, BellFilled,
ExclamationCircleOutlined, ExclamationCircleOutlined,
CrownFilled,
LogoutOutlined, LogoutOutlined,
DownCircleOutlined,
DeleteOutlined
}, },
setup() { setup() {
// 菜单选项 // 菜单选项
@@ -229,6 +213,11 @@ export default {
}) })
} }
// 跳转到项目文档
const toDocs = () => {
window.open("https://docs.zocrm.cloud")
}
// 点击获取验证码 // 点击获取验证码
const onGetCode = () => { const onGetCode = () => {
if (user.email == '') { if (user.email == '') {
@@ -356,14 +345,21 @@ export default {
onCancel, onCancel,
store, store,
formatDate, formatDate,
data data,
toDocs
}; };
}, },
} }
</script> </script>
<style scoped> <style scoped>
.sider { .layout-sider {
left: 0;
top: 0;
bottom: 0;
overflow: auto;
height: 100vh;
position: fixed;
background: #fff; background: #fff;
border-right: 0.5px solid #F0F2F5; border-right: 0.5px solid #F0F2F5;
} }
@@ -372,7 +368,7 @@ export default {
padding: 0 12px; padding: 0 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
background: #fff; background: #fff;
} }
@@ -410,7 +406,7 @@ export default {
} }
.title { .title {
font-size: 25px; font-size: 20px;
color: rgba(31, 31, 31, 0.85); color: rgba(31, 31, 31, 0.85);
font-weight: 620; font-weight: 620;
margin-left: 10px; margin-left: 10px;