cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页

Browse Source
This commit is contained in:
@user8949
2025-03-13 19:18:53 +08:00
parent 214272f011
commit 9a86626643
8 changed files with 720 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

407
src/assets/imgs/home/BG.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
src/assets/imgs/home/background@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
src/assets/imgs/home/bg_@1x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 477 KiB

BIN
src/assets/imgs/home/home-title-logo-2x.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/imgs/home/home-title-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/imgs/home/informIcon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/router/config/home.ts
View File

@@ -17,7 +17,7 @@ export default [
{ {
path: '', path: '',
name: 'home', name: 'home',
component: () => import('@/views/micro-page/proxy-homeweb.vue'), component: () => import('@/views/Jyh/Home/index.vue'),
meta: { meta: {
micorApp: ['micoro-app-homeweb-app'], micorApp: ['micoro-app-homeweb-app'],
hasMobile: true, hasMobile: true,

312
src/views/Jyh/Home/index.vue Normal file
View 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>