mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
新增列表模式
This commit is contained in:
kuaifan
parent
6040e7befd
commit
680c436df9
@ -8,9 +8,17 @@
|
|||||||
<div class="project-icobox">
|
<div class="project-icobox">
|
||||||
<ul class="project-icons">
|
<ul class="project-icons">
|
||||||
<li class="project-icon">
|
<li class="project-icon">
|
||||||
<Icon type="ios-search-outline" />
|
<Icon type="ios-add" />
|
||||||
</li>
|
</li>
|
||||||
<li class="project-icon" @click="$store.commit('toggleProjectChatShow');">
|
<li class="project-icon">
|
||||||
|
<Tooltip theme="light" :always="searchText!=''" transfer>
|
||||||
|
<Icon type="ios-search-outline" />
|
||||||
|
<div slot="content">
|
||||||
|
<Input v-model="searchText" placeholder="Search task..." clearable autofocus/>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</li>
|
||||||
|
<li class="project-icon" :class="{'active':$store.state.projectChatShow}" @click="$store.commit('toggleProjectChatShow')">
|
||||||
<Icon type="ios-chatbubbles-outline" />
|
<Icon type="ios-chatbubbles-outline" />
|
||||||
<Badge :count="999"></Badge>
|
<Badge :count="999"></Badge>
|
||||||
</li>
|
</li>
|
||||||
@ -19,18 +27,20 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="project-switch">
|
<div class="project-switch">
|
||||||
<div class="project-switch-button">
|
<div class="project-switch-button" @click="$store.commit('toggleProjectListPanel')">
|
||||||
<div class="project-switch-img active">
|
<template v-if="$store.state.projectListPanel">
|
||||||
<img src="../../../../statics/images/project-panel-blue.svg">
|
<div class="project-switch-img active"><img src="../../../../statics/images/project-panel-blue.svg"></div>
|
||||||
</div>
|
<div class="project-switch-img"><img src="../../../../statics/images/project-menu-gray.svg"></div>
|
||||||
<div class="project-switch-img">
|
</template>
|
||||||
<img src="../../../../statics/images/project-menu-gray.svg">
|
<template v-else>
|
||||||
</div>
|
<div class="project-switch-img"><img src="../../../../statics/images/project-panel-gray.svg"></div>
|
||||||
|
<div class="project-switch-img active"><img src="../../../../statics/images/project-menu-blue.svg"></div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-column">
|
<div v-if="$store.state.projectListPanel" class="project-column">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<div class="column-head">
|
<div class="column-head">
|
||||||
@ -246,6 +256,345 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="project-table">
|
||||||
|
<div class="project-table-head">
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12"># Task name</Col>
|
||||||
|
<Col span="3">Task Column</Col>
|
||||||
|
<Col span="3">Priority</Col>
|
||||||
|
<Col span="3">Member</Col>
|
||||||
|
<Col span="3">Expiration</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
<div class="project-table-body">
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-title">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<div class="row-h1">My task</div>
|
||||||
|
<div class="row-num">(5)</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
<div class="item-icon">6<i class="iconfont"></i></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
<div class="project-table-body">
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-title">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<div class="row-h1">Undone</div>
|
||||||
|
<div class="row-num">(5)</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon type="md-radio-button-off" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
<div class="project-table-body">
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-title">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<div class="row-h1">Completed</div>
|
||||||
|
<div class="row-num">(5)</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
<Col span="3"></Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon class="completed" type="md-checkmark-circle" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Hi Progress</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon class="completed" type="md-checkmark-circle" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Hi Progress</Col>
|
||||||
|
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon class="completed" type="md-checkmark-circle" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Hi Progress</Col>
|
||||||
|
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
<Row class="project-row">
|
||||||
|
<Col span="12" class="row-item">
|
||||||
|
<Icon class="completed" type="md-checkmark-circle" />
|
||||||
|
<div class="item-title">Maxxis Tyres</div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
|
||||||
|
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">Next Up</Col>
|
||||||
|
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
|
||||||
|
<Col span="3" class="row-member">
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col span="3">6 June, 2021</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -297,6 +646,9 @@
|
|||||||
background-color: #F2F3F5;
|
background-color: #F2F3F5;
|
||||||
.ivu-icon {
|
.ivu-icon {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
.ivu-badge {
|
.ivu-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -304,6 +656,10 @@
|
|||||||
left: 20px;
|
left: 20px;
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
|
&.active {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #2d8cf0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.project-avatar {
|
&.project-avatar {
|
||||||
.ivu-avatar {
|
.ivu-avatar {
|
||||||
@ -449,10 +805,11 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 12px;
|
overflow: auto;
|
||||||
|
margin-right: 24px;
|
||||||
> li {
|
> li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-left: -5px;
|
margin-left: -6px;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -515,20 +872,132 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.project-table {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
.project-row {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1px solid #F4F4F5;
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-right: 1px solid #F4F4F5;
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table-head,
|
||||||
|
.project-table-body {
|
||||||
|
margin: 0 32px 12px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #F4F4F5;
|
||||||
|
border-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.project-table-head {
|
||||||
|
.project-row {
|
||||||
|
> div {
|
||||||
|
color: #888888;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project-table-body {
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 10px #e6ecfa;
|
||||||
|
}
|
||||||
|
.project-row {
|
||||||
|
> div {
|
||||||
|
padding: 10px 12px;
|
||||||
|
&.row-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
padding-left: 14px;
|
||||||
|
.iconfont {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.row-h1 {
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
.row-num {
|
||||||
|
color: #999999;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-item {
|
||||||
|
padding-left: 20px;
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #dddddd;
|
||||||
|
&.completed {
|
||||||
|
color: #87d068;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
padding: 0 22px 0 10px;
|
||||||
|
}
|
||||||
|
.item-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: #777777;
|
||||||
|
.ivu-icon,
|
||||||
|
.iconfont {
|
||||||
|
margin-left: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.iconfont {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.row-member {
|
||||||
|
> ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: auto;
|
||||||
|
margin-left: -4px;
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: -6px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.ivu-avatar {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TaskPriority from "./task-priority";
|
||||||
export default {
|
export default {
|
||||||
name: "ProjectList",
|
name: "ProjectList",
|
||||||
|
components: {TaskPriority},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
searchText: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="task-priority" :style="myStyle"><slot/></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:global {
|
||||||
|
.task-priority {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "TaskPriority",
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
default: '#ffffff'
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
default: '#7DBEEA'
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
default: '#7DBEEA'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
myStyle() {
|
||||||
|
const {color, background, backgroundColor} = this;
|
||||||
|
return {
|
||||||
|
color: color,
|
||||||
|
backgroundColor: backgroundColor || background,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
6
resources/assets/js/store/mutations.js
vendored
6
resources/assets/js/store/mutations.js
vendored
@ -3,6 +3,12 @@ export default {
|
|||||||
state.projectChatShow = !state.projectChatShow
|
state.projectChatShow = !state.projectChatShow
|
||||||
state.setStorage('projectChatShow', state.projectChatShow);
|
state.setStorage('projectChatShow', state.projectChatShow);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
toggleProjectListPanel(state) {
|
||||||
|
state.projectListPanel = !state.projectListPanel
|
||||||
|
state.setStorage('projectListPanel', state.projectListPanel);
|
||||||
|
},
|
||||||
|
|
||||||
setUserInfo(state, info) {
|
setUserInfo(state, info) {
|
||||||
const userInfo = state._cloneJSON(info);
|
const userInfo = state._cloneJSON(info);
|
||||||
userInfo.userid = state._runNum(userInfo.userid);
|
userInfo.userid = state._runNum(userInfo.userid);
|
||||||
|
|||||||
4
resources/assets/js/store/state.js
vendored
4
resources/assets/js/store/state.js
vendored
@ -159,12 +159,16 @@ const stateCommon = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const projectChatShow = stateCommon.getStorageBoolean('projectChatShow', true);
|
const projectChatShow = stateCommon.getStorageBoolean('projectChatShow', true);
|
||||||
|
const projectListPanel = stateCommon.getStorageBoolean('projectListPanel', true);
|
||||||
|
|
||||||
const userInfo = stateCommon.getStorageJson('userInfo');
|
const userInfo = stateCommon.getStorageJson('userInfo');
|
||||||
const userToken = userInfo.token;
|
const userToken = userInfo.token;
|
||||||
userInfo.userid = stateCommon._runNum(userInfo.userid);
|
userInfo.userid = stateCommon._runNum(userInfo.userid);
|
||||||
|
|
||||||
export default Object.assign(stateCommon, {
|
export default Object.assign(stateCommon, {
|
||||||
projectChatShow,
|
projectChatShow,
|
||||||
|
projectListPanel,
|
||||||
|
|
||||||
userInfo,
|
userInfo,
|
||||||
userToken,
|
userToken,
|
||||||
})
|
})
|
||||||
|
|||||||
1
resources/assets/sass/app.scss
vendored
1
resources/assets/sass/app.scss
vendored
@ -1,2 +1,3 @@
|
|||||||
|
@import "iconfont";
|
||||||
@import "loading";
|
@import "loading";
|
||||||
@import "main";
|
@import "main";
|
||||||
|
|||||||
15
resources/assets/sass/iconfont.scss
vendored
Normal file
15
resources/assets/sass/iconfont.scss
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'iconfont'; /* Project id 2583385 */
|
||||||
|
src: url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.woff2?t=1622518656789') format('woff2'),
|
||||||
|
url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.woff?t=1622518656789') format('woff'),
|
||||||
|
url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.ttf?t=1622518656789') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont", "serif" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: 0.2px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user