refactor: 首页优化
Former-commit-id: 3a14cf05eea6ecea80ef803990cdae051a0167ca
This commit is contained in:
郝先瑞
1
src/assets/icons/homepage.svg
Normal file
1
src/assets/icons/homepage.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1650814907622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52318" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="52319"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -1 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
|
||||
<svg t="1650814389177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33470" width="200" height="200"><path d="M512.824785 2.489704c-283.043425 0-512.477884 203.929576-512.477884 455.538057 0 147.789974 72.163553 279.138488 194.830337 362.373191 0.726547 0.485047-12.627598 201.108321-12.627598 201.108321l206.019167-120.274294c37.784558 7.897877 80.438007 12.332886 120.917954 12.332886 283.043425 0 514.166339-203.929576 514.166339-455.540104C1023.653099 206.420303 795.868209 2.489704 512.824785 2.489704zM263.463484 523.996219c-35.317367 0-63.956637-28.636201-63.956637-63.956637 0-35.322483 28.639271-63.956637 63.956637-63.956637 35.32453 0 63.956637 28.634154 63.956637 63.956637C327.420121 495.361041 298.788014 523.996219 263.463484 523.996219zM512 523.996219c-35.32453 0-63.956637-28.636201-63.956637-63.956637 0-35.322483 28.632107-63.956637 63.956637-63.956637 35.317367 0 63.956637 28.634154 63.956637 63.956637C575.956637 495.361041 547.316344 523.996219 512 523.996219zM760.52833 523.996219c-35.32453 0-63.956637-28.636201-63.956637-63.956637 0-35.322483 28.632107-63.956637 63.956637-63.956637s63.956637 28.634154 63.956637 63.956637C824.484967 495.361041 795.85286 523.996219 760.52833 523.996219z" p-id="33471"></path></svg>
|
||||
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 1.3 KiB |
@@ -1 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>
|
||||
<svg t="1650814671903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49508" width="200" height="200"><path d="M365.714286 892.342857c-212.114286-14.628571-365.714286-80.457143-365.714286-168.228571v109.714285C0 936.228571 212.114286 1024 482.742857 1024H512c-65.828571-36.571429-109.714286-80.457143-146.285714-131.657143z m-29.257143-73.142857c-7.314286-29.257143-14.628571-58.514286-14.628572-87.771429 0-14.628571 0-29.257143 7.314286-43.885714C138.971429 672.914286 0 614.4 0 533.942857v109.714286c0 80.457143 138.971429 153.6 336.457143 175.542857z m7.314286-190.171429c14.628571-43.885714 43.885714-80.457143 80.457142-117.028571C182.857143 504.685714 0 438.857143 0 336.457143v109.714286c0 87.771429 146.285714 160.914286 343.771429 182.857142zM775.314286 512H687.542857v175.542857H512v87.771429h175.542857V950.857143h87.771429v-175.542857H950.857143V687.542857h-175.542857V512zM512 0C226.742857 0 0 95.085714 0 219.428571s226.742857 219.428571 512 219.428572h14.628571c102.4-58.514286 241.371429-95.085714 387.657143-95.085714h21.942857C994.742857 307.2 1024 263.314286 1024 219.428571c0-124.342857-226.742857-219.428571-512-219.428571z" p-id="49509"></path></svg>
|
||||
|
Before Width: | Height: | Size: 335 B After Width: | Height: | Size: 1.2 KiB |
@@ -1 +1 @@
|
||||
<svg t="1650625155645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30436" width="200" height="200"><path d="M848 712H318.4c-25.6 0-46.4-19.2-48-41.6L240 201.6c-1.6-25.6-16-46.4-38.4-57.6l-48-20.8c-12.8-4.8-25.6 0-32 12.8s0 25.6 12.8 32l46.4 20.8c6.4 3.2 11.2 9.6 11.2 17.6l28.8 468.8c3.2 48 46.4 86.4 96 86.4H848c12.8 0 24-11.2 24-24s-11.2-25.6-24-25.6z" p-id="30437"></path><path d="M884.8 265.6c-14.4-16-35.2-25.6-57.6-25.6H337.6c-12.8 0-24 11.2-24 24s11.2 24 24 24h489.6c8 0 16 3.2 20.8 9.6 4.8 6.4 8 14.4 8 22.4l-38.4 211.2v1.6c-1.6 14.4-12.8 24-27.2 25.6l-420.8 32c-12.8 1.6-22.4 12.8-22.4 25.6 1.6 12.8 11.2 22.4 24 22.4h1.6l419.2-32c36.8-3.2 67.2-30.4 70.4-67.2l38.4-212.8v-1.6c4.8-20.8-1.6-43.2-16-59.2z" p-id="30438"></path><path d="M305.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="30439"></path><path d="M753.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="30440"></path></svg>
|
||||
<svg t="1650814514935" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42619" width="200" height="200"><path d="M346.112 806.912q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM772.096 808.96q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM944.128 227.328q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l21.504 0 21.504 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM867.328 194.56l-374.784 0 135.168-135.168q23.552-23.552 51.712-24.064t51.712 23.04z" p-id="42620"></path></svg>
|
||||
|
Before Width: | Height: | Size: 955 B After Width: | Height: | Size: 1.5 KiB |
1
src/assets/icons/uv.svg
Normal file
1
src/assets/icons/uv.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1650813729189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" width="200" height="200"><path d="M504.29 576.68c-150.17 0-272.35-122.93-272.35-274.03C231.95 153.42 354.12 32 504.29 32s272.33 121.42 272.33 270.65c0.01 151.1-122.16 274.03-272.33 274.03z m0-476.18c-112.4 0-203.84 90.69-203.84 202.15 0 113.33 91.45 205.53 203.84 205.53s203.83-92.19 203.83-205.53c0-111.46-91.43-202.15-203.83-202.15z" p-id="3257"></path><path d="M410.8 988.38H96.13c-18.92 0-34.25-15.33-34.25-34.25 0-245.82 198.46-445.81 442.4-445.81 18.92 0 34.25 15.33 34.25 34.25s-15.33 34.25-34.25 34.25c-194.72 0-355.16 151-372.37 343.05H410.8c18.92 0 34.25 15.33 34.25 34.25s-15.33 34.26-34.25 34.26z" p-id="3258"></path><path d="M756.99 637.76c-97.82 0-177.12 79.3-177.12 177.12S659.17 992 756.99 992s177.12-79.3 177.12-177.12H756.99V637.76z" p-id="3259"></path><path d="M785 609.76v177.12h177.12c0-97.82-79.3-177.12-177.12-177.12z" p-id="3260"></path></svg>
|
||||
|
After Width: | Height: | Size: 988 B |
@@ -48,7 +48,7 @@ function initChart() {
|
||||
barChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '业绩总览(2021年)',
|
||||
text: '业绩总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
|
||||
@@ -47,7 +47,7 @@ function initChart() {
|
||||
pieChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '产品分类总览南丁格尔饼图',
|
||||
text: '产品分类总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
|
||||
@@ -47,7 +47,7 @@ function initChart() {
|
||||
radarChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '订单状态总雷达图',
|
||||
text: '订单状态统计',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
|
||||
@@ -6,26 +6,17 @@
|
||||
<span class="fw-b">有来开源组织 & 技术团队</span>
|
||||
</template>
|
||||
<el-tabs v-model="teamActiveName">
|
||||
<el-tab-pane label="开发者「无回」" name="developer">
|
||||
<el-tab-pane label="开发者" name="developer">
|
||||
<div class="developer" ref="dev_wrapper">
|
||||
<ul class="developer__container">
|
||||
<li class="developer__item" v-for="(item, index) in developers" :key="index">
|
||||
<div class="developer__inner">
|
||||
<el-image
|
||||
class="developer__img"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="[item.imgUrl]"
|
||||
></el-image>
|
||||
<el-image class="developer__img" :src="item.imgUrl" :preview-src-list="[item.imgUrl]"></el-image>
|
||||
<div class="developer__info">
|
||||
<span class="developer__nickname">{{ item.nickname }}</span>
|
||||
<div class="developer__position">
|
||||
<el-tag
|
||||
v-for="(position, i) in item.positions"
|
||||
:type="(colors[i % colors.length] as any)"
|
||||
:class="i !== 0 ? 'f-ml' : ''"
|
||||
size="small"
|
||||
:key="i"
|
||||
>{{ position }}</el-tag>
|
||||
<el-tag v-for="(position, i) in item.positions" :type="(colors[i % colors.length] as any)"
|
||||
:class="i !== 0 ? 'f-ml' : ''" size="small" :key="i">{{ position }}</el-tag>
|
||||
</div>
|
||||
<div class="developer__homepage">
|
||||
<a :href="item.homepage" target="_blank">个人主页</a>
|
||||
@@ -38,13 +29,10 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="交流群「有来」" name="2">
|
||||
<el-tab-pane label="交流群" name="2">
|
||||
<div class="group">
|
||||
<el-image
|
||||
class="group-img"
|
||||
src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="['https://www.youlai.tech/files/blog/youlaiqun.png']"
|
||||
/>
|
||||
<el-image class="group-img" src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="['https://www.youlai.tech/files/blog/youlaiqun.png']" />
|
||||
<div class="group-tip">群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@@ -73,13 +61,13 @@ const state = reactive({
|
||||
{
|
||||
imgUrl: "https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg",
|
||||
nickname: "郝先瑞",
|
||||
positions: ["Vue3", "Java", "文档"],
|
||||
positions: ["后端", "前端", "文档"],
|
||||
homepage: "https://www.cnblogs.com/haoxianrui/",
|
||||
},
|
||||
{
|
||||
imgUrl: "https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg",
|
||||
nickname: "张川",
|
||||
positions: ["Vue3", "Java"],
|
||||
positions: ["后端", "前端"],
|
||||
homepage: "https://blog.csdn.net/qq_41595149",
|
||||
},
|
||||
{
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<github-corner class="github-corner" />
|
||||
|
||||
<!-- 数据 -->
|
||||
<el-row :gutter="40" class="card-panel-col">
|
||||
<!-- <el-col :xs="24" :lg="6" class="card-panel-col">
|
||||
<el-row :gutter="40" class="card-panel__col">
|
||||
<!-- <el-col :xs="24" :lg="6" class="card-panel__col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper" style="margin-top: -10px">
|
||||
<el-image style="width:200px; height: 100px"
|
||||
@@ -22,10 +22,10 @@
|
||||
</div>
|
||||
</el-col>-->
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
<svg-icon icon-class="uv" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">访问数</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
@@ -46,18 +46,18 @@
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">支付金额</div>
|
||||
<div class="card-panel-text">收入金额</div>
|
||||
<div class="card-panel-num">1000</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
@@ -73,29 +73,29 @@
|
||||
<!-- 项目 + 团队成员介绍 -->
|
||||
<el-row :gutter="40">
|
||||
<!-- 项目介绍 -->
|
||||
<el-col :md="12" :lg="12" class="card-panel-col">
|
||||
<el-col :md="12" :lg="12" class="card-panel__col">
|
||||
<Project />
|
||||
</el-col>
|
||||
|
||||
<!-- 团队介绍 -->
|
||||
<el-col :md="12" :lg="12" class="card-panel-col">
|
||||
<el-col :md="12" :lg="12" class="card-panel__col">
|
||||
<Team />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- Echarts 图表 -->
|
||||
<el-row :gutter="40" style="margin-top: 20px">
|
||||
<el-col :sm="24" :lg="8" class="card-panel-col">
|
||||
<el-col :sm="24" :lg="8" class="card-panel__col">
|
||||
<BarChart id="barChart" height="400px" width="100%" class="chart-container" />
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
|
||||
<PieChart id="pieChart" height="400px" width="100%" class="chart-container" />
|
||||
<!--订单漏斗图-->
|
||||
<!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
|
||||
<RadarChart id="radarChart" height="400px" width="100%" class="chart-container" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -160,7 +160,7 @@ import Team from "./components/Team/index.vue";
|
||||
}
|
||||
}
|
||||
|
||||
.card-panel-col {
|
||||
.card-panel__col {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user