170 lines
6.8 KiB
Plaintext
170 lines
6.8 KiB
Plaintext
<script setup lang="ts">
|
||
|
||
|
||
|
||
const value = ref()
|
||
const options =[{
|
||
value: 'guide',
|
||
label: 'Guide',
|
||
}]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex w-full ">
|
||
<!-- <AppBlock> -->
|
||
<!-- <img src="./images/goudongxi2.png" class="w-full h-full" /> -->
|
||
<div class="w-full bg-#f4f4f4 flex flex-wrap justify-between h-full rd-25px">
|
||
<div class="cards">
|
||
<div class="cards_title">供方阅读碳排放数据提交情况</div>
|
||
<div class="!text-18px right-20 pt30px text-#4E7EE8 ">
|
||
<a href="https://procurement.daikin.net.cn/mingdao/portal/app/7abea528-f7b4-4437-84bb-6b6b169bad3d"
|
||
class="no-underline text-#4E7EE8 "><img src="./images/yuny@2x.png"
|
||
class="w25px mr5px mt--4px" /><span>明道云</span></a>
|
||
</div>
|
||
<div class="flex w-full h-80px p20px items-center mt10px">
|
||
<div>
|
||
<el-cascader v-model="value" :options="options" @change="handleChange" />
|
||
</div>
|
||
<el-input v-model="input2" class="w-50 m-2" placeholder="供方名" prefix-icon="Search" width="150px"/>
|
||
<el-button type="primary">查询</el-button>
|
||
</div>
|
||
<div class="w-full h-730px p20px">
|
||
<el-row :gutter="10">
|
||
<el-col :span="8"><div class="times" >
|
||
<div class="text-#fff text-18px font-bold absolute left-40% top-18px"><span class="text-30px">1</span>月</div>
|
||
<div class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%">已提交：45</div>
|
||
<div class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%">未提交：100</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">2</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time">
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">3</span>月</div>
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">4</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="times" >
|
||
<div class="text-#fff text-18px font-bold absolute left-40% top-18px"><span class="text-30px">5</span>月</div>
|
||
<div class="bg-#fff w-120px absolute top-70px text-#A0C6B5 text-16px font-bold p10px left-15%">已提交：45</div>
|
||
<div class="bg-#fff w-120px absolute top-110px text-red text-16px font-bold p10px left-15%">未提交：100</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time">
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">6</span>月</div>
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">7</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">8</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time">
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-40% top-45%"><span class="text-60px">9</span>月</div>
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-20% top-45%"><span class="text-60px">10</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time" >
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-20% top-45%"><span class="text-60px">11</span>月</div>
|
||
</div></el-col>
|
||
<el-col :span="8"><div class="time">
|
||
<div class="text-#d3d2d2 text-18px font-bold absolute left-20% top-45%"><span class="text-60px">12</span>月</div>
|
||
</div></el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="cards">
|
||
|
||
<div class="cards_title">未提交供应商明细</div>
|
||
<div class="!text-18px right-20px pt30px text-#4E7EE8 ">
|
||
|
||
<span class="text-#ababab">更新时间：2023-9-24 21:37:39</span>
|
||
</div>
|
||
<div ref="msgScoll" class="px20px w-full h800px cent_box overflow-y-auto">
|
||
|
||
<div v-if="true" class="text-#808696 bg-#F4F8FF items-center flex py10px rd-5px mt10px" v-for="(i, key) in 9" :key="i">
|
||
<div class="truncate2" @click="toDetail(i,'App_E_Message')">
|
||
<span class="text-#fff bg-#407DF1 px5px text-16px rounded-20px mr-5px inlineFlex">{{ ++key }}</span>
|
||
<span>啊可接受的哈弗 </span>
|
||
</div>
|
||
<div class="min-w150px max-w150px text-#000">3次未提交</div>
|
||
<span class="absolute right-10px top-18px">
|
||
<el-button>提醒</el-button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- </AppBlock> -->
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.cards {
|
||
width: 49%;
|
||
height: 100%;
|
||
border-radius: 18px;
|
||
background-color: #ffffff;
|
||
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
.time{
|
||
width: 175px;
|
||
height: 175px;
|
||
background: url('@/assets/images/A2@2x.png');
|
||
background-size: cover;
|
||
}
|
||
.times{
|
||
width: 175px;
|
||
height: 175px;
|
||
background: url('@/assets/images/A1@2x.png');
|
||
background-size: cover;
|
||
}
|
||
.cards_title {
|
||
flex-shrink: 0;
|
||
font-size: 26px;
|
||
color: #142142;
|
||
padding: 20px;
|
||
margin-left: 20px;
|
||
font-weight: bold;
|
||
padding-bottom: 0;
|
||
|
||
&::before {
|
||
content: " ";
|
||
display: block;
|
||
width: 8px;
|
||
height: 30px;
|
||
background-color: #003ab5;
|
||
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
}
|
||
.truncate2 {
|
||
max-width:250px;
|
||
min-width:250px;
|
||
overflow: hidden;
|
||
padding: 5px 10px;
|
||
line-height: 30px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #142142;
|
||
cursor: pointer;
|
||
|
||
a {
|
||
text-decoration: none
|
||
}
|
||
}
|
||
</style>
|