feat: 首页优化，添加开发人员信息
This commit is contained in:
郝先瑞
89
src/views/dashboard/components/Project/index.vue
Normal file
89
src/views/dashboard/components/Project/index.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<div class="component-container">
|
||||||
|
<el-card class="project-card">
|
||||||
|
<template #header>
|
||||||
|
<span class="fw-b">有来项目简介</span>
|
||||||
|
</template>
|
||||||
|
<div class="project-card__main">
|
||||||
|
<!-- 项目简介 -->
|
||||||
|
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
|
||||||
|
youlai-mall
|
||||||
|
</el-link>
|
||||||
|
是基于Spring Boot 2.5、Spring Cloud 2020 &
|
||||||
|
Alibaba 2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
|
||||||
|
涉及
|
||||||
|
<el-link target="_blank" type="primary" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
|
||||||
|
、
|
||||||
|
<el-link target="_blank" type="success" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
|
||||||
|
、
|
||||||
|
<el-link target="_blank" type="warning" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序
|
||||||
|
</el-link>
|
||||||
|
和
|
||||||
|
<el-link target="_blank" type="danger" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
|
||||||
|
等多端的开发。
|
||||||
|
<el-divider/>
|
||||||
|
|
||||||
|
<!-- 源码地址 -->
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-badge value="免费开源" class="fw-b">
|
||||||
|
源码地址
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-link target="_blank" type="primary" href="https://github.com/youlaitech">Github</el-link>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="14">
|
||||||
|
<el-link target="_blank" type="success" href="https://gitee.com/youlaiorg">码云</el-link>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider/>
|
||||||
|
<!-- 技术栈 -->
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="4" class="fw-b">
|
||||||
|
后端技术栈
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
||||||
|
OAuth2、Sentinel、Elastic Stack ...
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider/>
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="4" class="fw-b">
|
||||||
|
前端技术栈
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "index"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.component-container {
|
||||||
|
.project-card {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&__main {
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fw-b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
168
src/views/dashboard/components/Team/index.vue
Normal file
168
src/views/dashboard/components/Team/index.vue
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
<!-- 团队介绍 -->
|
||||||
|
<template>
|
||||||
|
<div class="component-container">
|
||||||
|
<el-card class="team-card">
|
||||||
|
<template #header>
|
||||||
|
<span class="fw-b">有来开源组织 & 技术团队 </span>
|
||||||
|
</template>
|
||||||
|
<el-tabs v-model="teamActiveName">
|
||||||
|
<el-tab-pane label="开发者「无回」" name="developer">
|
||||||
|
<div class="developers">
|
||||||
|
<ul class="developers__content">
|
||||||
|
<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 type="primary" size="mini">后端</el-tag>
|
||||||
|
<el-tag type="success" class="f-ml" size="mini">前端</el-tag>
|
||||||
|
<el-tag type="danger" class="f-ml" size="mini">运维</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">XLSS</span>
|
||||||
|
<div class="developer-info-position">
|
||||||
|
<el-tag type="primary" class="f-ml" size="mini">DevOps</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="交流群「有来」" name="2">
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="加入我们" name="3">
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {nextTick, onMounted, reactive, toRefs, watchEffect} from "vue";
|
||||||
|
import BScroll from "better-scroll";
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
teamActiveName: 'developer'
|
||||||
|
})
|
||||||
|
|
||||||
|
const {teamActiveName} = toRefs(state)
|
||||||
|
|
||||||
|
let bScroll = reactive({})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
|
||||||
|
startX: 0,
|
||||||
|
click: true,
|
||||||
|
scrollX: true,
|
||||||
|
scrollY: false,
|
||||||
|
eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
bScroll && (bScroll as any).refresh()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.component-container {
|
||||||
|
.team-card {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.developers {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.developer {
|
||||||
|
margin-left: 20px;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
width: 200px;
|
||||||
|
height: 206px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 10px 10px 5px #CCC;
|
||||||
|
padding: 23px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.developer-img {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.developer-info {
|
||||||
|
padding: 6px;
|
||||||
|
|
||||||
|
&-nickname {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-position {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fw-b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f-ml {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -69,101 +69,12 @@
|
|||||||
|
|
||||||
<!-- 项目介绍 -->
|
<!-- 项目介绍 -->
|
||||||
<el-col :sm="24" :lg="12">
|
<el-col :sm="24" :lg="12">
|
||||||
<el-card class="project-card">
|
<Project/>
|
||||||
<template #header>
|
|
||||||
<span class="fw-b">有来项目简介</span>
|
|
||||||
</template>
|
|
||||||
<div class="project-card__main">
|
|
||||||
<!-- 项目简介 -->
|
|
||||||
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
|
|
||||||
youlai-mall
|
|
||||||
</el-link>
|
|
||||||
是基于Spring Boot 2.5、Spring Cloud 2020 &
|
|
||||||
Alibaba 2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
|
|
||||||
涉及
|
|
||||||
<el-link target="_blank" type="primary" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
|
|
||||||
、
|
|
||||||
<el-link target="_blank" type="success" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
|
|
||||||
、
|
|
||||||
<el-link target="_blank" type="warning" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序
|
|
||||||
</el-link>
|
|
||||||
和
|
|
||||||
<el-link target="_blank" type="danger" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
|
|
||||||
等多端的开发。
|
|
||||||
<el-divider/>
|
|
||||||
|
|
||||||
<!-- 源码地址 -->
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-badge value="免费开源" class="fw-b">
|
|
||||||
源码地址
|
|
||||||
</el-badge>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-link target="_blank" type="primary" href="https://github.com/youlaitech">Github</el-link>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16">
|
|
||||||
<el-link target="_blank" type="success" href="https://gitee.com/youlaiorg">码云</el-link>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-divider/>
|
|
||||||
<!-- 技术栈 -->
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="4" class="fw-b">
|
|
||||||
后端技术栈
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="20">
|
|
||||||
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
|
||||||
OAuth2、JWT、Seata、Sentinel、Elastic Stack ...
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-divider/>
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="4" class="fw-b">
|
|
||||||
前端技术栈
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="20">
|
|
||||||
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- 团队介绍 -->
|
<!-- 团队介绍 -->
|
||||||
<el-col :sm="24" :lg="12">
|
<el-col :sm="24" :lg="12">
|
||||||
<el-card class="team-card">
|
<Team/>
|
||||||
<template #header>
|
|
||||||
<span class="fw-b">有来开源组织 X 有来技术团队 </span>
|
|
||||||
</template>
|
|
||||||
<el-tabs v-model="teamActiveName">
|
|
||||||
<el-tab-pane label="开发人员" name="developer">
|
|
||||||
<div class="developer-wrapper">
|
|
||||||
<ul class="developer-content">
|
|
||||||
<li>12</li>
|
|
||||||
<li>12</li>
|
|
||||||
<li>123</li>
|
|
||||||
<li>12</li>
|
|
||||||
<li>123</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
<li>33</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
<el-tab-pane label="有来交流群" name="2">
|
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
<el-tab-pane label="加入开源组织" name="3">
|
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
</el-tabs>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
@@ -197,10 +108,14 @@ import {computed, nextTick, onMounted, reactive, toRefs, watchEffect} from "vue"
|
|||||||
import GithubCorner from '@/components/GithubCorner/index.vue'
|
import GithubCorner from '@/components/GithubCorner/index.vue'
|
||||||
import TodoList from './components/TodoList/index.vue'
|
import TodoList from './components/TodoList/index.vue'
|
||||||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||||
import BarChart from "./components/BarChart.vue";
|
import BarChart from "./components/Chart/BarChart.vue";
|
||||||
import PieChart from "./components/PieChart.vue";
|
import PieChart from "./components/Chart/PieChart.vue";
|
||||||
import RadarChart from "./components/RadarChart.vue";
|
import RadarChart from "./components/Chart/RadarChart.vue";
|
||||||
import FunnelChart from "./components/FunnelChart.vue";
|
import FunnelChart from "./components/Chart/FunnelChart.vue";
|
||||||
|
|
||||||
|
import Project from "./components/Project/index.vue";
|
||||||
|
import Team from "./components/Team/index.vue";
|
||||||
|
|
||||||
import BScroll from 'better-scroll'
|
import BScroll from 'better-scroll'
|
||||||
|
|
||||||
import {useUserStoreHook} from "@/store/modules/user"
|
import {useUserStoreHook} from "@/store/modules/user"
|
||||||
@@ -209,29 +124,7 @@ const roles = computed(() => useUserStoreHook().roles);
|
|||||||
const avatar = computed(() => useUserStoreHook().avatar);
|
const avatar = computed(() => useUserStoreHook().avatar);
|
||||||
const nickname = computed(() => useUserStoreHook().nickname);
|
const nickname = computed(() => useUserStoreHook().nickname);
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
teamActiveName: 'developer'
|
|
||||||
})
|
|
||||||
|
|
||||||
const {teamActiveName} = toRefs(state)
|
|
||||||
|
|
||||||
let bScroll = reactive({})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
|
|
||||||
startX: 0,
|
|
||||||
click: true,
|
|
||||||
scrollX: true,
|
|
||||||
scrollY: false,
|
|
||||||
eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
bScroll && (bScroll as any).refresh()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -382,29 +275,11 @@ watchEffect(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-card {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fw-b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user