feat(dashboard/index.vue): 完善控制台的团队信息
This commit is contained in:
@@ -45,7 +45,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
<el-col :span="20">
|
||||||
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
||||||
OAuth2、Sentinel、Elastic Stack ...
|
OAuth2、JWT、Elastic 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>
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 部门筛选
|
* 部门筛选
|
||||||
**/
|
**/
|
||||||
|
|||||||
Reference in New Issue
Block a user