<template>
|
<div class="header">
|
<img width="227px" height="74px" src="@/assets/home/logo.png" alt="" />
|
<img width="427px" height="74px" src="@/assets/home/Header.png" alt="" />
|
<div class="other">
|
<div class="item">
|
<img width="21px" height="21px" src="@/assets/home/share.png" alt="" />
|
<span>分享网站</span>
|
</div>
|
<div class="item">
|
<img
|
width="21px"
|
height="21px"
|
src="@/assets/home/BellFilled.png"
|
alt=""
|
/>
|
<span>我的消息</span>
|
</div>
|
</div>
|
</div>
|
<div class="banner">
|
<img width="100%" src="@/assets/home/banner.png" alt="" />
|
</div>
|
<div class="notice">
|
<div class="left">
|
<div class="item item1">
|
<div style='width:50%'>
|
<img src="@/assets/home/notice1.png" alt="" />
|
</div>
|
<div>招采公告</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/notice.png" alt="" />
|
<div>招采公告</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/notice.png" alt="" />
|
<div>招采公告</div>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/notice.png" alt="" />
|
<div>招采公告</div>
|
</div>
|
</div>
|
<div class="right">
|
<el-tabs v-model="activeName" class="demo-tabs">
|
<el-tab-pane label="工程招标" name="first">
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】2024年石盘街道付家祠村粮油产业园区及配套基础设施建设项目磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】熊猫谷游客中心局部改造项目磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】丹景街道民湖社区红白喜事服务场所磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】成都东部新区三岔湖高级中学体艺中心前临时停车区和正校门两侧门卫室间区域黑化及排水提升解除内涝项目磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】四川省成都戒毒康复所病残戒毒人员康复活动中心维修改造项目第二次磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】老干部活动中心装修改造项目磋商公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>【四川省成都市】金牛区抢险救灾工程项目工程队伍储备库（房建、市政类）招标公告</span
|
>
|
<span>2024-04-15 18:10</span>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="货物招标" name="second">货物招标</el-tab-pane>
|
<el-tab-pane label="服务招标" name="third">服务招标</el-tab-pane>
|
<el-tab-pane label="网上竞价" name="fourth">网上竞价</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<div class="user">
|
<div class="all">
|
<div class="left">
|
<div class="item item1">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car1.png"
|
alt=""
|
/>
|
采购人/招标人
|
</div>
|
<span>注册|登录</span>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>
|
采购人
|
</div>
|
<span>注册|登录</span>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>招标代理机构
|
</div>
|
<span>注册|登录</span>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>供应商
|
</div>
|
<span>注册|登录</span>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>评审专家
|
</div>
|
<span>注册|登录</span>
|
</div>
|
</div>
|
<div class="right"></div>
|
</div>
|
</div>
|
<div class="daixie">
|
<div class="content">
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>标书代写</span>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>资质证书代办</span>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>招标金额</span>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>法律服务</span>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>平台开发</span>
|
</div>
|
<div class="item">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<span>公众号运营</span>
|
</div>
|
</div>
|
</div>
|
<div class="more">
|
<div class="content">
|
<div class="item">
|
<div class="header">
|
<div
|
style="display: flex; align-items: center; justify-content: center"
|
>
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">行业动态</span>
|
</div>
|
<el-button round
|
>更多<el-icon class="el-icon--right"
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<path
|
fill="currentColor"
|
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
></path></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img"></div>
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="item">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
<div class="item"></div>
|
<div class="item"></div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from "vue";
|
let activeName = ref("first");
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
height: 80px;
|
width: 100%;
|
.middle {
|
width: 50%;
|
display: flex;
|
justify-content: space-around;
|
color: rgb(51, 51, 51);
|
font-family: 思源黑体;
|
}
|
.other {
|
display: flex;
|
.item {
|
display: flex;
|
justify-content: center;
|
width: 63px;
|
height: 48px;
|
color: rgb(51, 51, 51);
|
font-family: 思源黑体;
|
font-size: 12px;
|
font-weight: 400;
|
line-height: 20px;
|
letter-spacing: 0%;
|
text-align: left;
|
text-transform: capitalize;
|
flex-wrap: wrap;
|
margin-right: 10px;
|
}
|
}
|
}
|
.banner {
|
// left: -3.76px;
|
// top: 80px;
|
// position: absolute;
|
width: 100%;
|
height: 306px;
|
}
|
.notice {
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
width: 1401px;
|
height: 518px;
|
padding: 15px;
|
margin: 20px auto;
|
background: rgb(254, 254, 254);
|
border-radius: 8px;
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
.left {
|
width: 10%;
|
height: 483px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.item {
|
width: 137px;
|
height: 111px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
align-items: center;
|
background: rgb(244, 244, 244);
|
border-radius: 6px;
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
div {
|
// display: block;
|
// width: 100%;
|
color: rgb(20, 92, 205);
|
font-size: 20px;
|
font-weight: 500;
|
align-items: center;
|
}
|
}
|
.item1 {
|
background: rgb(20, 92, 205);
|
div {
|
color: rgb(254, 254, 254);
|
}
|
}
|
}
|
.right {
|
width: 89%;
|
height: 51px;
|
border-radius: 4px;
|
.item {
|
// height: 51px;
|
line-height: 51px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 10px;
|
}
|
/* 偶数行背景色 */
|
.item:nth-child(even) {
|
background: rgb(244, 244, 244);
|
border-radius: 4px;
|
}
|
/* 奇数行背景色 */
|
.item:nth-child(odd) {
|
padding: 8px;
|
background-color: #fff;
|
}
|
}
|
}
|
.user {
|
width: 100%;
|
height: 520px;
|
background: rgb(248, 248, 248);
|
padding-top: 50px;
|
.all {
|
width: 1401px;
|
height: 482px;
|
background: #fff;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
border-radius: 8px;
|
|
.left {
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
width: 23%;
|
height: 100%;
|
border-radius: 8px;
|
.item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 50px;
|
height: 20%;
|
text-align: left;
|
color: #5f5f5f;
|
.box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
img {
|
margin-right: 5px;
|
}
|
}
|
.item1 {
|
background: #1a67e3;
|
color: #ffffff;
|
}
|
}
|
.left :first-child {
|
border-top-left-radius: 8px;
|
border-top-right-radius: 8px;
|
}
|
.left *:not(:first-child):not(:last-child) {
|
border-bottom: #c6c6c6 1px solid;
|
}
|
.right {
|
background: #a9b3c4;
|
width: 75%;
|
height: 100%;
|
border-radius: 8px;
|
}
|
}
|
}
|
.daixie {
|
width: 100%;
|
background: #fff;
|
.content {
|
width: 1401px;
|
height: 140px;
|
padding: 20px 0;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-around;
|
.item {
|
width: 13%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
span {
|
color: rgb(95, 95, 95);
|
font-family: 思源黑体;
|
font-size: 24px;
|
font-weight: 500;
|
line-height: 40.8px;
|
letter-spacing: 1%;
|
text-align: center;
|
text-transform: capitalize;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
}
|
img {
|
width: 100px;
|
height: 106px;
|
}
|
}
|
}
|
.more {
|
width: 100%;
|
height: 464px;
|
background: #f8f8f8;
|
padding-top: 50px;
|
.time {
|
color: rgb(152, 152, 152);
|
font-family: Figtree;
|
font-size: 15px;
|
font-weight: 400;
|
line-height: 24.2px;
|
}
|
.content {
|
width: 1400px;
|
height: 415px;
|
background: cadetblue;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.item {
|
background: #fff;
|
width: 28%;
|
height: 100%;
|
border-radius: 8px;
|
padding: 20px;
|
.header {
|
height: 41px;
|
color: rgb(0, 0, 0);
|
font-family: 思源黑体;
|
font-size: 24px;
|
font-weight: 500;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.main {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex: 1;
|
.img {
|
width: 142px;
|
height: 95px;
|
background: rgb(196, 196, 196);
|
border-radius: 4px;
|
}
|
.right {
|
width: 240px;
|
color: rgb(95, 95, 95);
|
font-family: 思源黑体;
|
font-size: 16px;
|
font-weight: 400;
|
line-height: 24.2px;
|
text-align: left;
|
margin-left: 10px;
|
}
|
}
|
.other {
|
width: 100%;
|
.item {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
