no message
This commit is contained in:
kuaifan
parent
518cfa9090
commit
489804ca80
@ -1,5 +1,35 @@
|
||||
<template>
|
||||
<div class="manage-box">
|
||||
<div class="manage-box-menu">
|
||||
<div class="manage-box-title">
|
||||
<div class="manage-box-logo"></div>
|
||||
<span>Doo Task</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Icon type="md-speedometer" />
|
||||
<div class="menu-title">Dashboard</div>
|
||||
</li>
|
||||
<li>
|
||||
<Icon type="md-cog" />
|
||||
<div class="menu-title">Settings</div>
|
||||
</li>
|
||||
<li>
|
||||
<Icon type="md-calendar" />
|
||||
<div class="menu-title">Calendar</div>
|
||||
</li>
|
||||
<li class="menu-project">
|
||||
<ul>
|
||||
<li class="action">✔️ Daily Task</li>
|
||||
<li>✈️ Meetings Summary</li>
|
||||
<li>🛰 Resources</li>
|
||||
<li>💺 Availibity</li>
|
||||
<li>🍒 Brainstroaming</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<Button class="manage-box-new" type="primary" icon="md-add">New Project</Button>
|
||||
</div>
|
||||
<div class="manage-box-main">
|
||||
<div class="manage-box-body">
|
||||
<div class="manage-box-body-content">
|
||||
@ -22,6 +52,110 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
.manage-box-menu {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 255px;
|
||||
height: 100%;
|
||||
background: #F4F5F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
.manage-box-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 86%;
|
||||
padding: 6px;
|
||||
margin-top: 27px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
.manage-box-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url("../../statics/images/logo.svg") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
> span {
|
||||
padding-left: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
color: #6C7D8C;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 100%;
|
||||
margin: 8px auto;
|
||||
padding: 0 4%;
|
||||
border-radius: 4px;
|
||||
> i {
|
||||
opacity: 0.3;
|
||||
font-size: 22px;
|
||||
margin-right: 10px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.menu-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&.menu-project {
|
||||
height: auto;
|
||||
padding: 14px 0 0;
|
||||
> ul {
|
||||
width: 100%;
|
||||
> li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 0 8px 0 30px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
margin: 4px auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
color: #333333;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
&.action {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.action {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.manage-box-new {
|
||||
width: 80%;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.manage-box-main {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
28
resources/assets/js/pages/manage/components/project-list.vue
Normal file
28
resources/assets/js/pages/manage/components/project-list.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="project-list">
|
||||
list
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project-list {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectList",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
113
resources/assets/js/pages/manage/components/project-message.vue
Normal file
113
resources/assets/js/pages/manage/components/project-message.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="project-message">
|
||||
<div class="group-member">
|
||||
<div class="member-head">
|
||||
<div class="member-title">Member<span>(25)</span></div>
|
||||
<div class="member-view-all">View All</div>
|
||||
</div>
|
||||
<ul class="member-list">
|
||||
<li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li class="online"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
<li><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="group-chat">
|
||||
<div class="group-title">Group Chat</div>
|
||||
</div>
|
||||
<div class="group-input">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 36px 24px;
|
||||
.group-member {
|
||||
padding: 0 8px;
|
||||
.member-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.member-title {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
> span {
|
||||
padding-left: 6px;
|
||||
color: #4E60CC;
|
||||
}
|
||||
}
|
||||
.member-view-all {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.member-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin-right: 13px;
|
||||
.ivu-avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff0000;
|
||||
border: 1px solid #ffffff;
|
||||
z-index: 1;
|
||||
}
|
||||
&.online {
|
||||
&:before {
|
||||
background-color: #509E76;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-chat {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
margin-top: 24px;
|
||||
.group-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.group-input {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectMessage",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,23 +1,48 @@
|
||||
<template>
|
||||
<div class="project-detail">
|
||||
<PageTitle>{{ $L('项目面板') }}</PageTitle>
|
||||
<Loading/>
|
||||
project-detail
|
||||
<ProjectList/>
|
||||
<ProjectMessage/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project-detail {
|
||||
background-image: url("../../../statics/images/loading.png");
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.project-list {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.project-message {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
max-width: 410px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ProjectList from "./components/project-list";
|
||||
import ProjectMessage from "./components/project-message";
|
||||
export default {
|
||||
components: {ProjectMessage, ProjectList},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
1
resources/assets/statics/images/logo.svg
Normal file
1
resources/assets/statics/images/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1622421950278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30122" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M102.4 102.4m102.4 0l614.4 0q102.4 0 102.4 102.4l0 614.4q0 102.4-102.4 102.4l-614.4 0q-102.4 0-102.4-102.4l0-614.4q0-102.4 102.4-102.4Z" fill="#9ED979" p-id="30123"></path><path d="M512 230.4c-114.090667 0-204.8 89.258667-204.8 201.6a200.746667 200.746667 0 0 0 117.034667 181.418667v48.981333c0 17.28 11.690667 28.8 29.269333 28.8h116.992c17.578667 0 29.269333-11.52 29.269333-28.8v-48.981333a200.746667 200.746667 0 0 0 117.034667-181.418667C716.8 319.658667 626.090667 230.4 512 230.4zM580.266667 732.16h-136.533334c-20.48 0-34.133333 12.288-34.133333 30.72s13.653333 30.72 34.133333 30.72h136.533334c20.48 0 34.133333-12.288 34.133333-30.72s-13.653333-30.72-34.133333-30.72z" fill="#FFFFFF" p-id="30124"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
x
Reference in New Issue
Block a user