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-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="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>
|
||||
<Project/>
|
||||
</el-col>
|
||||
|
||||
<!-- 团队介绍 -->
|
||||
<el-col :sm="24" :lg="12">
|
||||
<el-card class="team-card">
|
||||
<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>
|
||||
<Team/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -197,10 +108,14 @@ import {computed, nextTick, onMounted, reactive, toRefs, watchEffect} from "vue"
|
||||
import GithubCorner from '@/components/GithubCorner/index.vue'
|
||||
import TodoList from './components/TodoList/index.vue'
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||
import BarChart from "./components/BarChart.vue";
|
||||
import PieChart from "./components/PieChart.vue";
|
||||
import RadarChart from "./components/RadarChart.vue";
|
||||
import FunnelChart from "./components/FunnelChart.vue";
|
||||
import BarChart from "./components/Chart/BarChart.vue";
|
||||
import PieChart from "./components/Chart/PieChart.vue";
|
||||
import RadarChart from "./components/Chart/RadarChart.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 {useUserStoreHook} from "@/store/modules/user"
|
||||
@@ -209,29 +124,7 @@ const roles = computed(() => useUserStoreHook().roles);
|
||||
const avatar = computed(() => useUserStoreHook().avatar);
|
||||
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>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user