<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%" height="306px" src="@/assets/home/banner.png" alt="" /> -->
|
</div>
|
<div class="notice">
|
<div class="left">
|
<div class="item item1">
|
<img src="@/assets/home/notice1.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 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-tab-pane label="网上竞价" name="fourth">网上竞价</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<div class="daixie">
|
<div class="contentxie">
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>市场调研</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>需求审查</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>履约验收</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>业代推荐</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>专家意见</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">三方开标</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">招采培训</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">财政监督</div>
|
</div>
|
</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>
|
<div>
|
<span class="hover:cursor-pointer" @click="toRegister">注册</span
|
><span class="m-2">|</span
|
><span class="hover:cursor-pointer" @click="toLogin">登录</span>
|
</div>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>
|
代理机构
|
</div>
|
<div>
|
<span class="hover:cursor-pointer" @click="toRegister">注册</span
|
><span class="m-2">|</span
|
><span class="hover:cursor-pointer" @click="toLogin">登录</span>
|
</div>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>供应商
|
</div>
|
<div>
|
<span class="hover:cursor-pointer" @click="toRegister">注册</span
|
><span class="m-2">|</span
|
><span class="hover:cursor-pointer" @click="toLogin">登录</span>
|
</div>
|
</div>
|
<div class="item">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car.png"
|
alt=""
|
/>评审专家
|
</div>
|
<div>
|
<span class="hover:cursor-pointer" @click="toRegister">注册</span
|
><span class="m-2">|</span
|
><span class="hover:cursor-pointer" @click="toLogin">登录</span>
|
</div>
|
</div>
|
</div>
|
<div class="right" />
|
</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 size="small"
|
>更多<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"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
<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 size="small"
|
>更多<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"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
<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 size="small"
|
>更多<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"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="zhuanjia w-[72%] mx-auto">
|
<div class="flex justify-between items-center m-5">
|
<div style="display: flex; align-items: center">
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">专家委员会</span>
|
</div>
|
<div>
|
<el-button round size="small">专家抽取</el-button>
|
</div>
|
</div>
|
<div class="flex justify-around items-center mb-5">
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
</div>
|
</div>
|
<div class="daili w-[100%] pt-5 pb-5">
|
<div class="w-[72%] mx-auto bg-white rounded-lg pb-5">
|
<div class="flex justify-between items-center p-5">
|
<div style="display: flex; align-items: center">
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">代理机构推荐</span>
|
</div>
|
<div>
|
<el-button round size="small"
|
>更多<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"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
</div>
|
<div class="flex flex-wrap justify-between">
|
<div
|
v-for="(item, index) in 15"
|
:key="index"
|
class="w-[24%] p-3 pl-6 mr-12 ml-12 dailimc"
|
>
|
<span
|
><span style="color: #145ccd; font-weight: 600" class="mr-1.5"
|
>·</span
|
>四川政采招投标咨询有限公司</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<my-footer />
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from "vue";
|
import myFooter from "./component/myFooter.vue";
|
let activeName = ref("first");
|
import { useRoute, useRouter } from "vue-router";
|
defineOptions({
|
name: "Home"
|
});
|
const router = useRouter();
|
const toRegister = () => {
|
router.push({ name: "Register" });
|
};
|
const toLogin = () => {
|
router.push({ name: "Login" });
|
};
|
</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;
|
background: url("@/assets/home/banner.png") no-repeat left center;
|
background-size: cover;
|
width: 100%;
|
height: 306px;
|
}
|
.notice {
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
width: 72%;
|
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%;
|
text-align: center;
|
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: 40px 0;
|
.all {
|
width: 72%;
|
height: 385px;
|
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 30px;
|
height: 25%;
|
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;
|
background: rgb(248, 248, 248);
|
|
.contentxie {
|
width: 72%;
|
// height: 140px;
|
padding: 20px 0;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-around;
|
.itemxie {
|
width: 13%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
div {
|
width: 100%;
|
text-align: center;
|
color: rgb(95, 95, 95);
|
font-family: 思源黑体;
|
font-size: 20px;
|
font-weight: 500;
|
letter-spacing: 1%;
|
}
|
}
|
img {
|
width: 91px;
|
height: 97.2px;
|
}
|
}
|
}
|
.more {
|
width: 100%;
|
height: 464px;
|
background: #f8f8f8;
|
padding: 30px 0;
|
.time {
|
color: rgb(152, 152, 152);
|
font-family: Figtree;
|
font-size: 15px;
|
font-weight: 400;
|
line-height: 24.2px;
|
}
|
.content {
|
width: 72%;
|
height: 415px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.item {
|
background: #fff;
|
width: 28%;
|
height: 100%;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
.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: 14px;
|
font-weight: 400;
|
line-height: 24.2px;
|
text-align: left;
|
margin-left: 10px;
|
}
|
}
|
.other {
|
width: 100%;
|
|
.itemother {
|
width: 100%;
|
font-size: 14px;
|
padding-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.time {
|
text-align: right;
|
}
|
}
|
}
|
}
|
}
|
.daili {
|
background: rgb(248, 248, 248);
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
|
/* 偶数行背景色 */
|
.dailimc:nth-child(odd) {
|
background: rgb(244, 244, 244);
|
border-radius: 4px;
|
}
|
/* 奇数行背景色 */
|
|
.dailimc:nth-child(3n + 2) {
|
// background-color: #fff;
|
background: rgb(244, 244, 244);
|
}
|
.dailimc:nth-child(5) {
|
background-color: #fff;
|
// background: rgb(244, 244, 244);
|
}
|
.dailimc:nth-child(11) {
|
background-color: #fff;
|
// background: rgb(244, 244, 244);
|
}
|
}
|
.zhuanjia {
|
img {
|
border-radius: 4px;
|
}
|
}
|
</style>
|
