feat(dashboard/index.vue): 完善控制台的团队信息

This commit is contained in:
郝先瑞
2022-01-28 23:57:26 +08:00
parent 6c2b343b65
commit 37e533839e
4 changed files with 107 additions and 59 deletions

View File

@@ -45,7 +45,7 @@
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
Spring BootSpring Cloud & AlibabaSpring Security Spring BootSpring Cloud & AlibabaSpring Security
OAuth2SentinelElastic Stack ... OAuth2JWTElastic Stack ...
</el-col> </el-col>
</el-row> </el-row>
<el-divider/> <el-divider/>
@@ -76,14 +76,13 @@ export default {
&__main { &__main {
line-height: 28px; line-height: 28px;
height: 315px;
} }
} }
.fw-b { .fw-b {
font-weight: bold; font-weight: bold;
} }
} }
</style> </style>

View File

@@ -9,57 +9,38 @@
<el-tab-pane label="开发者「无回」" name="developer"> <el-tab-pane label="开发者「无回」" name="developer">
<div class="developers"> <div class="developers">
<ul class="developers__content"> <ul class="developers__content">
<li class="developer"> <li class="developer" v-for="(item,index) in developers">
<div class="developer__content"> <div class="developer__content">
<el-image <el-image
class="developer-img" class="developer-img"
src="https://gitee.com/haoxr/image/raw/master/hxr.jpg" :src="item.imgUrl"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']"> :preview-src-list="[item.imgUrl]">
</el-image> </el-image>
<div class="developer-info"> <div class="developer-info">
<span class="developer-info-nickname">郝先瑞</span> <span class="developer-info-nickname">{{ item.nickname }}</span>
<div class="developer-info-position"> <div class="developer-info-position">
<el-tag type="primary" size="mini">后端</el-tag> <el-tag v-for="(position,i) in item.positions"
<el-tag type="success" class="f-ml" size="mini">前端</el-tag> :type="colors[i%colors.length]"
<el-tag type="danger" class="f-ml" size="mini">运维</el-tag> :class="i!==0?'f-ml':''"
size="mini">
{{ position }}
</el-tag>
</div>
<div class="developer-info-homepage">
<a :href="item.homepage" target="_blank">
个人主页
</a>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<li class="developer"> <li class="pointer">
<div class="developer__content"> <el-image src="https://gitee.com/haoxr/image/raw/master/default/left.png"/>
<el-image <div class="pointer-tip">
class="developer-img" 欢迎添加开发者微信🤗🤗🤗
src="https://gitee.com/haoxr/image/raw/master/hxr.jpg"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']">
</el-image>
<div class="developer-info">
<span class="developer-info-nickname">XLSS</span>
<div class="developer-info-position">
<el-tag type="primary" class="f-ml" size="mini">DevOps</el-tag>
</div>
</div>
</div> </div>
</li> </li>
<li class="developer">
<div class="developer__content">
<el-image
class="developer-img"
src="https://gitee.com/haoxr/image/raw/master/hxr.jpg"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']">
</el-image>
<div class="developer-info">
<span class="developer-info-nickname">总有刁民要害朕</span>
<div class="developer-info-position">
<el-tag size="mini">后端</el-tag>
<el-tag type="success" class="f-ml" size="mini">前端</el-tag>
</div>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</el-tab-pane> </el-tab-pane>
@@ -68,6 +49,12 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="加入我们" name="3"> <el-tab-pane label="加入我们" name="3">
<div class="join-us">
<p>1. 人品良好善于思考执行力强</p>
<p>2. 至少给项目提交过一个PR(无论大小) </p>
<p>3. Git代码库活跃个人主页博客完善者优先</p>
<p>4. 过份优秀者我们会主动联系您...</p>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -81,12 +68,33 @@ import {nextTick, onMounted, reactive, toRefs, watchEffect} from "vue";
import BScroll from "better-scroll"; import BScroll from "better-scroll";
const state = reactive({ const state = reactive({
teamActiveName: 'developer' teamActiveName: 'developer',
developers: [
{
imgUrl: 'https://gitee.com/haoxr/image/raw/master/hxr.jpg',
nickname: '郝先瑞',
positions: ['后端', '前端', '打杂'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
},
{
imgUrl: 'https://gitee.com/haoxr/image/raw/master/default/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220128222910_gaitubao_841x841.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
},
{
imgUrl: 'https://gitee.com/haoxr/image/raw/master/default/ba695a5e70410a066b7052c5dc9db5c.jpg',
nickname: '张川',
positions: ['后端', '前端'],
homepage: 'https://blog.csdn.net/qq_41595149'
},
],
colors: ['', 'success', 'warning', 'danger']
}) })
const {teamActiveName} = toRefs(state) const {teamActiveName, developers, colors} = toRefs(state)
let bScroll = reactive({}) /*let bScroll = reactive({})
onMounted(() => { onMounted(() => {
bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, { bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
@@ -102,7 +110,7 @@ watchEffect(() => {
nextTick(() => { nextTick(() => {
bScroll && (bScroll as any).refresh() bScroll && (bScroll as any).refresh()
}) })
}) })*/
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -118,18 +126,36 @@ watchEffect(() => {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.pointer {
list-style: none;
width: 180px;
min-width: 180px;
align-items: center;
margin-left: 50px;
&-tip {
position: absolute;
min-width: 180px;
top: 18px;
color: #5959d0;
}
}
.developer { .developer {
&:not(:first-child) {
margin-left: 20px; margin-left: 20px;
}
align-items: center; align-items: center;
list-style: none; list-style: none;
width: 200px; width: 180px;
height: 206px; min-width: 180px;
&__content { &__content {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 5px; border-radius: 5px;
box-shadow: 10px 10px 5px #CCC; box-shadow: 6px 6px 6px #AAA;
padding: 23px; padding: 8px;
text-align: center; text-align: center;
.developer-img { .developer-img {
@@ -139,13 +165,26 @@ watchEffect(() => {
.developer-info { .developer-info {
padding: 6px; padding: 6px;
&-nickname {
font-size: 14px; font-size: 14px;
}
&-position { &-position {
margin-top: 5px; margin-top: 10px;
}
&-homepage {
margin-top: 16px;
a {
display: inline-block;
padding: 4px 10px;
color: #409EFF;
border: 1px solid #409EFF;
border-radius: 5px;
background: #ecf5ff;
&:hover {
background: #409EFF;
color: #FFFFFF;
} }
} }
} }
@@ -153,6 +192,15 @@ watchEffect(() => {
} }
} }
} }
}
.join-us{
height: 247px;
p{
font-weight: bold;
}
}
}
.fw-b { .fw-b {
font-weight: bold; font-weight: bold;

View File

@@ -68,12 +68,12 @@
<el-row :gutter="40"> <el-row :gutter="40">
<!-- 项目介绍 --> <!-- 项目介绍 -->
<el-col :sm="24" :lg="12"> <el-col :md="12" :lg="12">
<Project/> <Project/>
</el-col> </el-col>
<!-- 团队介绍 --> <!-- 团队介绍 -->
<el-col :sm="24" :lg="12"> <el-col :md="12" :lg="12">
<Team/> <Team/>
</el-col> </el-col>
</el-row> </el-row>

View File

@@ -369,13 +369,14 @@ const state = reactive({
multiple: true, multiple: true,
// 总条数 // 总条数
total: 0, total: 0,
// 用户表格数据 // 用户分页数据
pageList: [], pageList: [],
// 弹窗属性 // 弹窗属性
dialog: { dialog: {
title: '', title: '',
visible: false visible: false
}, },
deptName:undefined,
// 部门树选项 // 部门树选项
deptOptions: [], deptOptions: [],
// 部门名称 // 部门名称
@@ -446,11 +447,11 @@ const {
dialog, dialog,
formData, formData,
rules, rules,
deptName,
deptOptions, deptOptions,
roleOptions roleOptions
} = toRefs(state) } = toRefs(state)
/** /**
* 部门筛选 * 部门筛选
**/ **/