<template>
<!-- 公航旅电子交易中心-近日标讯 -->
<div class="tradeCenter_recentNews">
<div class="tradeCenterHeader">
<div class="leftLogo">
<img src="@/onebigdata/img/gonLogo.png" alt="">
<div class="title">公航旅电子交易中心-近日标讯</div>
</div>
<div class="rightTime">
<img src="@/onebigdata/img/timeIcon.png" alt="">
<p class="house"><span>{{hour}}</span>:<span>{{minute}}</span>:<span>{{second}}</span></p>
<div class="day">
<p class="week">{{week}}</p>
<p class="rightDay"><span>{{year}}</span>年<span>{{month}}</span>月<span>{{day}}</span>日</p>
</div>
</div>
</div>
<div class="tradeCenterContant">
<el-table
:data="tableData"
height="100%"
:header-cell-style="{'color':'#333333','font-weight':'400','font-size':'16px'}"
style="width: 100%"
ref="table"
>
<el-table-column
type="index"
label="序号"
width="80"
>
</el-table-column>
<el-table-column
prop="projectName"
label="项目名称"
width="800">
</el-table-column>
<el-table-column
prop="transactionAmount"
label="交易编码">
</el-table-column>
<el-table-column
prop="bidOpeningSite"
label="开标场地">
</el-table-column>
<el-table-column
prop="bidOpeningTime"
label="开标时间">
</el-table-column>
</el-table>
<el-button class="export" type="default">导出</el-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
tableData: [{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目甘肃卫生职业学院医学教育理实一体化教学系统建设项目甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
},
{
projectName: '甘肃卫生职业学院医学教育理实一体化教学系统建设项目',
transactionAmount: '20220420-037582-2',
bidOpeningSite: '第一开标厅',
bidOpeningTime: '2022-12-12 12:00:00',
}],
timer: null,
year: '',
month: '',
day: '',
hour: '',
minute: '',
second: '',
week: ''
}
},
computed: {
},
created(){
this.timer = setInterval(() => {
this.FormatTime()
},1000)
},
mounted(){
this.init()
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
init(){
const table = this.$refs.table
const divData = table.bodyWrapper
setInterval(()=>{
divData.scrollTop += 2
if(divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
divData.scrollTop = 0
}
},100)
},
selectValue(){
this.selectBar = !this.selectBar
},
FormatTime() {
//设置返回显示的日期时间格式
var date = new Date();
var year = this.formatTime(date.getFullYear());
var month = this.formatTime(date.getMonth() + 1);
var day = this.formatTime(date.getDate());
var hour = this.formatTime(date.getHours());
var minute = this.formatTime(date.getMinutes());
var second = this.formatTime(date.getSeconds());
var weekday = date.getDay();
var weeks = new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
);
var week = weeks[weekday];
//这里设置你要显示的格式
this.year = year;this.month = month;this.day = day;
this.hour = hour;this.minute = minute;this.second = second
this.week = week
},
formatTime(n) {
//判断时间是否需要加0
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
},
components:{
}
}
</script>
<style lang="less" scoped>
.export {
position: absolute;
top: 25px;
right: 69px;
z-index: 9;
padding: 6px 15px;
background-color: rgba(59,134,232,1);
color: #fff;
border: none;
&:hover {
opacity: .9;
}
}
.tradeCenter_recentNews {
width: 100vw;
height: 100vh;
background-color: #fff;
.tradeCenterHeader {
height: 120px;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
padding-left: 46px;
padding-right: 59px;
.leftLogo {
display: flex;
display: -webkit-flex;
align-items: center;
img {
width: 90px;
height: 63px;
}
.title {
font-size: 32px;
font-weight: 600;
color: #333333;
padding-left: 14px;
padding-top: 5px;
}
}
.rightTime {
display: flex;
display: -webkit-flex;
align-items: center;
img {
width: 56px;
height: 56px;
}
.house {
font-size: 34px;
font-weight: bold;
color: #333333;
padding-left: 14px;
padding-right: 22px;
}
.day {
font-size: 18px;
font-weight: 600;
color: #333333;
.week {
// padding-bottom: 5px;
}
}
}
}
.tradeCenterContant {
height: calc(100% - 120px);
background-color: #F6F6F6;
padding:20px 59px;
position: relative;
.el-table{
// position: relative;
&::v-deep {
.el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 4px;
height: 58px;
// background: rgba(241, 240, 245, 0.2);//滚动条颜色
background: rgb(168, 171, 172);//滚动条颜色
}
.el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(241, 240, 245, 0.2);
border-radius: 3px;
background: #F1F0F5;//滚动条背景色
}
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px;
}
}
.el-table {
font-size: 16px;
font-weight: 400;
color: #333333;
padding-bottom: 5px;
/deep/.el-table__row:nth-child(2n+1) {
background-color: #F8F8F8 !important;
}
/deep/.cell {
overflow: hidden;
white-space: nowrap;
}
/deep/td:first-child {
text-align: center !important;
}
/deep/th:first-child {
text-align: center !important;
}
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 2px;
height: 50px;
background: #eee;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background: rgba(0, 0, 0, 0.4);
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper {
overflow: hidden !important;
}
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
overflow: hidden !important;
}
}
}
</style>
el-table固定表头及内容自动滚动,取消el-table的滚动条(兼容谷歌,火狐),顺便带有时间的显示
于 2022-05-31 17:28:46 首次发布