Skip to content

B
bigDataSystem
Commit ecc9b298 authored by LiXuyang's avatar LiXuyang
Browse files
Options

需求大厅-详情-1

parent 4e739288
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 39 deletions
src/router/routes/index.ts
View file @ ecc9b298
...@@ -117,6 +117,14 @@ export const PCFontRoute: AppRouteRecordRaw = { ...@@ -117,6 +117,14 @@ export const PCFontRoute: AppRouteRecordRaw = {
title: '', title: '',
}, },
}, },
{
path: '/aaaFont/demandHall/detail',
name: 'demandHallDetail',
component: () => import('@/views/AAAFont/demandHall/detail/index.vue'),
meta: {
title: '',
},
},
], ],
}; };
// export const fontRoute: AppRouteRecordRaw = { // export const fontRoute: AppRouteRecordRaw = {
......
src/views/AAAFont/demandHall/detail/index.vue 0 → 100644
View file @ ecc9b298
<template>
<div class="d-detail">
<div class="d-card1">
<div class="w-2/3 d-left">
<div>
<Icon icon="ant-design:line-chart-outlined" style="font-size: 50px; color: #7295fe" />
</div>
<div class="d-des">
<div class="d-hd">
<div class="d-row">
<div class="title"> 药房数据 </div>
<div class="tab"> 健康监测 </div>
</div>
<div class="d-row" style="font-size: 14px">
<div> 发布时间： </div>
<div style="color: #7892f8"> 2024-12-19 </div>
<div class="flex flex-1" style="gap: 10px; color: #c1c5ce">
<div>
<Icon icon="ant-design:eye-outlined" />
</div>
<div> 1578 </div>
</div>
</div>
<div> 用户在药店购买药品数据记录 </div>
</div>
<div class="d-ft">
<div class="ft-left">
<div class="money">面议</div>
<div class="status">匹配中</div>
</div>
<div class="ft-right">
<el-button type="primary">
<Icon style="margin-right: 6px" icon="ant-design:customer-service-outlined" />
立即沟通
</el-button>
<el-button> 发布类似需求 </el-button>
</div>
</div>
</div>
</div>
<div class="w-1/3 d-right">
<div class="dr-hd">
<div>
<Icon icon="ant-design:heart-outlined" style="font-size: 20px; color: #4475fe" />
</div>
<div class="hd-title"> 需求信息 </div>
</div>
<div class="dr-list">
<div class="list-item">
<div style="color: #bdc3c8"> 数据分类 </div>
<el-divider direction="vertical" />
<div style="color: #4e80f8"> 模型算法 </div>
</div>
<div class="list-item">
<div style="color: #bdc3c8"> 场景分类 </div>
<el-divider direction="vertical" />
<div style="color: #4e80f8"> 健康监测 </div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Icon from '@/components/Icon/Icon.vue';
export default {
components: { Icon },
data() {
return {};
},
};
</script>
<style scoped>
.d-detail {
padding-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
}
.d-card1 {
display: flex;
box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
border: 2px solid #eff1f6;
width: 70%;
padding: 40px;
.d-left {
display: flex;
gap: 30px;
.d-des {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 80px;
.d-hd {
display: flex;
flex-direction: column;
gap: 15px;
.d-row {
display: flex;
gap: 15px;
}
.title {
font-size: 20px;
font-weight: bolder;
}
.tab {
font-size: 12px;
background-color: #fff3ef;
color: #fe9693;
padding: 4px 10px;
}
}
.d-ft {
flex: 1;
display: flex;
justify-content: space-between;
padding-right: 10%;
.ft-left {
display: flex;
gap: 10px;
.money {
font-size: 22px;
color: #f5413f;
display: flex;
align-items: center;
}
.status {
font-size: 14px;
display: flex;
align-items: center;
color: #f9c331;
}
}
}
}
}
.d-right {
background-color: #f8f9fc;
padding: 15px;
.dr-hd {
display: flex;
gap: 10px;
}
.dr-list {
display: flex;
gap: 15px;
padding: 25px 5px;
.list-item {
display: flex;
gap: 20px;
font-size: 14px;
}
}
}
}
</style>
src/views/AAAFont/demandHall/index.vue
View file @ ecc9b298
...@@ -70,18 +70,18 @@ ...@@ -70,18 +70,18 @@
</div> </div>
</div> </div>
<div class="table"> <div class="table">
<div class="card" v-for="i in [1, 2, 3, 4, 5, 6, 7]" :key="i"> <div class="card" @click="handleCard(i)" v-for="i in cardList" :key="i">
<div class="title"> <div class="title">
<Icon icon="ant-design:exception-outlined" class="icon" /> <Icon icon="ant-design:exception-outlined" class="icon" />
<div class="c-header"> <div class="c-header">
<div class="ch-title"> 药房数据 </div> <div class="ch-title"> {{ i.title }} </div>
<div class="ch-tab"> 医疗卫生 </div> <div class="ch-tab"> {{ i.tab }} </div>
</div> </div>
<div class="c-des"> 省内及各地市县各大药房更新的用户购买药品记录 </div> <div class="c-des"> {{ i.des }} </div>
</div> </div>
<div class="c-footer"> <div class="c-footer">
<div class="cf-money"> 面议 </div> <div class="cf-money"> {{ i.money }} </div>
<div class="cf-status"> 匹配中 </div> <div class="cf-status"> {{ i.status }} </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -100,12 +100,6 @@ ...@@ -100,12 +100,6 @@
components: { Icon }, components: { Icon },
data() { data() {
return { return {
activeName: 'first',
activeName1: 'first',
activeName2: 'first',
cardLogo: 'src/assets/images/mallHome/biaoqian.png',
industryImg: 'src/assets/images/mallHome/行业动态.png',
dynamicImg: 'src/assets/images/mallHome/hangyedongtai.png',
items: [ items: [
{ {
id: '1', id: '1',
...@@ -116,32 +110,6 @@ ...@@ -116,32 +110,6 @@
url: 'src/assets/images/mallHome/banner.png', url: 'src/assets/images/mallHome/banner.png',
}, },
], ],
tableData: [
{
applicationDate: '2016-05-02',
upDate: '2016-05-02',
name: '**先导精密机械有限公司',
address: '关系型与非关系型数据库分析数据',
},
{
applicationDate: '2016-05-04',
upDate: '2016-05-04',
name: '天津市融创软通科技股份有限公司',
address: '图形学算法与应用分析数据',
},
{
applicationDate: '2016-05-01',
upDate: '2016-05-01',
name: '天津市融创软通科技股份有限公司',
address: '编程思想与设计模式分析数据',
},
{
applicationDate: '2016-05-03',
upDate: '2016-05-03',
name: '天津市融创软通科技股份有限公司',
address: '46-55岁人群对净水机满意度分析数据',
},
],
tabSelect: 0, tabSelect: 0,
tabList: [ tabList: [
{ {
...@@ -390,6 +358,148 @@ ...@@ -390,6 +358,148 @@
tabChildren: undefined, tabChildren: undefined,
tabChildrenSelect: 0, tabChildrenSelect: 0,
tab1Select: 0, tab1Select: 0,
cardList: [
{
title: '金融数据分析',
tab: '金融科技',
des: '提供针对金融行业的各类数据分析和报告，帮助金融机构制定投资决策',
money: '￥8234',
status: '匹配中',
},
{
title: '电商用户行为研究',
tab: '电商消费',
des: '收集并分析电商平台用户的浏览、购买及偏好数据，优化营销策略',
money: '￥11876',
status: '匹配中',
},
{
title: '城市交通流量监测',
tab: '城市治理',
des: '城市各主要道路的交通流量监控数据，用于交通调度优化',
money: '￥15642',
status: '匹配中',
},
{
title: '医院药品库存管理',
tab: '医疗卫生',
des: '医院药品库存及使用情况的数据管理系统，确保药品供应充足',
money: '面议',
status: '匹配中',
},
{
title: '工业生产线效率优化',
tab: '工业制造',
des: '监控工业生产线各环节的数据，优化生产效率与成本',
money: '￥20753',
status: '匹配中',
},
{
title: '物流配送时效分析',
tab: '交通物流',
des: '收集并分析物流配送时效数据，提升配送效率和客户满意度',
money: '￥7623',
status: '匹配中',
},
{
title: '地理信息系统数据管理',
tab: '时空信息',
des: '提供关于城市建设与发展相关的地理信息数据及分析报告',
money: '￥13254',
status: '匹配中',
},
{
title: '网站访问量与用户行为分析',
tab: '互联网',
des: '分析网站用户行为与访问量，提供数据支持以优化用户体验',
money: '￥18822',
status: '匹配中',
},
{
title: '企业客户满意度调查',
tab: '企业服务',
des: '针对企业客户进行的满意度调查和数据分析报告',
money: '￥6234',
status: '匹配中',
},
{
title: '城市环保数据监测',
tab: '公共服务',
des: '收集各城市环保相关数据，包括空气质量、水质等指标',
money: '￥12568',
status: '匹配中',
},
{
title: '金融市场动态分析',
tab: '金融科技',
des: '提供实时金融市场动态数据，帮助投资者捕捉市场机会',
money: '￥21127',
status: '匹配中',
},
{
title: '电商平台用户画像',
tab: '电商消费',
des: '对电商平台用户进行画像分析，帮助品牌商制定精准营销策略',
money: '￥15472',
status: '匹配中',
},
{
title: '智慧城市交通数据',
tab: '城市治理',
des: '各大城市智慧交通管理系统的实时交通数据，包括道路状况、车流量等',
money: '面议',
status: '匹配中',
},
{
title: '医院患者数据分析',
tab: '医疗卫生',
des: '对医院患者的诊疗数据进行分析，优化医疗资源配置',
money: '￥11234',
status: '匹配中',
},
{
title: '生产线设备运行监控',
tab: '工业制造',
des: '实时监控生产线设备的运行状态与故障预警，保障生产效率',
money: '￥8573',
status: '匹配中',
},
{
title: '物流仓储数据整合',
tab: '交通物流',
des: '收集并整合物流仓储的数据，优化仓储管理与配送效率',
money: '￥14253',
status: '匹配中',
},
{
title: '卫星遥感数据应用',
tab: '时空信息',
des: '使用卫星遥感技术收集各类环境数据，应用于农业、城市建设等领域',
money: '￥22876',
status: '匹配中',
},
{
title: '电商平台交易分析',
tab: '互联网',
des: '分析电商平台上的交易数据，帮助商家优化销售策略',
money: '￥6142',
status: '匹配中',
},
{
title: '企业人力资源数据分析',
tab: '企业服务',
des: '针对企业人力资源管理中的数据进行深入分析与报告',
money: '面议',
status: '匹配中',
},
{
title: '城市安全监控数据',
tab: '公共服务',
des: '城市公共安全监控数据，包括监控摄像头、紧急事件处理等',
money: '￥13245',
status: '匹配中',
},
],
}; };
}, },
methods: { methods: {
...@@ -417,6 +527,12 @@ ...@@ -417,6 +527,12 @@
this.tabChildren = tab.children; this.tabChildren = tab.children;
this.tabChildrenSelect = 0; this.tabChildrenSelect = 0;
}, },
handleCard(record) {
this.$router.push({
path: '/aaaFont/demandHall/detail',
query: record,
});
},
}, },
}; };
</script> </script>
...@@ -677,11 +793,12 @@ ...@@ -677,11 +793,12 @@
box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2); box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
} }
.card { .card {
margin-left: 10px;
border-radius: 15px; border-radius: 15px;
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
cursor: pointer; cursor: pointer;
border: 2px solid #eff1f6; border: 2px solid #eff1f6;
flex: 0 0 calc(25% - 20px); flex: 0 0 calc(25% - 30px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 40px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment