merge junjie_dev into master
feat: 首页 Created-by: user8949 Commit-by: @user8949 Merged-by: user8949 Description: feat: 首页 See merge request: hk_openRepo/OpenRepo_Portal!1
This commit is contained in:
user8949
407
src/assets/imgs/home/BG.svg
Normal file
407
src/assets/imgs/home/BG.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.4 MiB |
BIN
src/assets/imgs/home/background@2x.png
Normal file
BIN
src/assets/imgs/home/background@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
src/assets/imgs/home/bg_@1x.png
Normal file
BIN
src/assets/imgs/home/bg_@1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
BIN
src/assets/imgs/home/home-title-logo-2x.webp
Normal file
BIN
src/assets/imgs/home/home-title-logo-2x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/imgs/home/home-title-logo.png
Normal file
BIN
src/assets/imgs/home/home-title-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/imgs/home/informIcon@2x.png
Normal file
BIN
src/assets/imgs/home/informIcon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -17,7 +17,7 @@ export default [
|
||||
{
|
||||
path: '',
|
||||
name: 'home',
|
||||
component: () => import('@/views/micro-page/proxy-homeweb.vue'),
|
||||
component: () => import('@/views/Jyh/Home/index.vue'),
|
||||
meta: {
|
||||
micorApp: ['micoro-app-homeweb-app'],
|
||||
hasMobile: true,
|
||||
|
||||
312
src/views/Jyh/Home/index.vue
Normal file
312
src/views/Jyh/Home/index.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="home-content">
|
||||
<div class="home-title">
|
||||
<img src="@/assets/imgs/home/home-title-logo-2x.webp" alt="logo" />
|
||||
<h1>可信开源代码库</h1>
|
||||
</div>
|
||||
<div class="home-search" ref="homeSearch">
|
||||
<d-input>
|
||||
<template #prepend>
|
||||
<d-select v-model="searchType" :options="searchOptions" :offset="offset"></d-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<d-dropdown :style="{ width: dropdownWidth + 'px' }" :offset="offset" :close-scope="'blank'"
|
||||
:position="['bottom-start']" >
|
||||
<div class="advanced-search">
|
||||
<span>高级筛选</span>
|
||||
<d-badge :count="5" :bg-color="'#f0f0f0'"></d-badge>
|
||||
<d-icon name="icon-chevron-down-2"></d-icon>
|
||||
</div>
|
||||
<template #menu>
|
||||
<div class="advanced-search-menu">
|
||||
<div style="padding: 12PX;">
|
||||
<span>高级筛选</span>
|
||||
<d-form style="margin-top: 20px" layout="vertical">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="8">
|
||||
<d-form-item field="name" label="license">
|
||||
<d-input placeholder="请输入license"/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="select" label="软件/组件名称">
|
||||
<d-input placeholder="请输入软件/组件名称"/>
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
|
||||
<d-input />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="8">
|
||||
<d-form-item field="executionDay" label="软件版本">
|
||||
<d-input />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="radio" label="依赖软件">
|
||||
<d-input />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-form-item field="switch" label="编程语言">
|
||||
<d-input />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="8">
|
||||
<d-form-item field="date" label="版本发布日期">
|
||||
<d-input />
|
||||
</d-form-item>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
|
||||
<d-button variant="solid">搜索</d-button>
|
||||
<d-button>取消</d-button>
|
||||
</gc-form-operation>
|
||||
</d-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</d-dropdown>
|
||||
</template>
|
||||
</d-input>
|
||||
<d-button color="primary" variant="solid">搜索</d-button>
|
||||
</div>
|
||||
<d-button icon="share" class="batch-btn">批量校验</d-button>
|
||||
<div class="home-information">
|
||||
<div class="info-title">
|
||||
<div class="sub-title">
|
||||
<img src="@/assets/imgs/home/informIcon@2x.png">
|
||||
<span>信息公示</span>
|
||||
</div>
|
||||
<a class="devui-link">更多 ></a>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
|
||||
<d-timeline-item style="cursor: pointer;" v-for="(item, index) in infoList" :key="index"
|
||||
:dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
|
||||
<template #default>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<div>{{ item.text }}</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<d-icon name="icon-time"></d-icon>
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #time>
|
||||
<span></span>
|
||||
</template>
|
||||
</d-timeline-item>
|
||||
</d-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const searchType = ref('组件/软件');
|
||||
const searchOptions = ref(['组件/软件']);
|
||||
const offset = ref({ mainAxis: 12, crossAxis: -200 });
|
||||
const infoList = ref([
|
||||
{
|
||||
text: '公告1',
|
||||
time: '2021-10-1',
|
||||
dotColor: 'var(--devui-info)',
|
||||
},
|
||||
{
|
||||
text: '公告2',
|
||||
time: '2021-10-2',
|
||||
dotColor: 'var(--devui-info)',
|
||||
},
|
||||
{
|
||||
text: '公告3',
|
||||
time: '2021-10-3',
|
||||
},
|
||||
{
|
||||
text: '公告4',
|
||||
time: '2021-10-3',
|
||||
},
|
||||
])
|
||||
|
||||
const homeSearch: any = ref(null);
|
||||
const dropdownWidth = ref(0);
|
||||
const isOpen = ref(true)
|
||||
|
||||
const updateDropdownWidth = () => {
|
||||
if (homeSearch.value) {
|
||||
dropdownWidth.value = homeSearch.value.offsetWidth * 0.8;
|
||||
offset.value.crossAxis = -homeSearch.value.offsetWidth * 0.3;
|
||||
}
|
||||
};
|
||||
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateDropdownWidth);
|
||||
if (homeSearch.value) {
|
||||
resizeObserver.observe(homeSearch.value);
|
||||
}
|
||||
|
||||
updateDropdownWidth();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (resizeObserver && homeSearch.value) {
|
||||
resizeObserver.unobserve(homeSearch.value);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.home-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1)),url('@/assets/imgs/home/background@2x.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.home-content {
|
||||
font-size: 14px;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.home-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
h1 {
|
||||
font-size: xx-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
filter: brightness(0);
|
||||
}
|
||||
}
|
||||
|
||||
.home-search {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.advanced-search {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.advanced-search-menu {
|
||||
height: 300px;
|
||||
padding: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.form-operation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-btn {
|
||||
color: $devui-aide-text;
|
||||
width: 150px;
|
||||
background-color: #f0f0f0;
|
||||
border-color: $devui-aide-text;
|
||||
}
|
||||
|
||||
.home-information {
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
|
||||
.info-title {
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.sub-title {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
:deep(.devui-timeline-item-data-left) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.devui-timeline-item-dot) {
|
||||
scale: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-search {
|
||||
:deep(.devui-input-slot__prepend),
|
||||
:deep(.devui-input-slot__append),
|
||||
:deep(.devui-input__wrapper) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.devui-select__selection--glow-style),
|
||||
:deep(.devui-input--glow-style) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user