<template>
|
<div class="app-container">
|
<el-row :gutter="3">
|
<el-col :span="6">
|
<el-card shadow="always">
|
总是显示
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="always">
|
总是显示
|
</el-card>
|
</el-col>
|
<el-col :span="15">
|
<el-card shadow="always">
|
总是显示
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3" style="margin-top: 5px">
|
<el-col :span="6">
|
<div style="height: 600px;overflow: auto;">
|
<div class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
|
<span class="centered">居中文本</span>
|
</div>
|
<div v-for="(item,index) in tableData" :key="item.date" class="outerDiv" :id="'outerDiv'+index">
|
<div class="innerDiv1">
|
<div class="innerDiv2">
|
<span class="content_left">{{ item.date }}</span>
|
</div>
|
<div class="content_right">{{ item.address }}</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="18">
|
<el-col :span="20">
|
<el-card style="height: 600px" shadow="always">
|
<el-row style="height: 100px">
|
{{address}}
|
</el-row>
|
<el-row style="height: 400px">
|
<el-image style="height: 390px;width: 960px" :src="src"></el-image>
|
<!-- {{src}}-->
|
</el-row>
|
<el-row style="height: 100px">
|
<el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
|
<el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card style="height: 600px" shadow="always">
|
<el-row style="height: 100px;margin-top: 100px">
|
<el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
|
</el-row>
|
<el-row style="height: 50px;margin-top: 5px">
|
<el-button type="primary" @click="product2V91()" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
|
</el-row>
|
<el-row style="height: 50px;">
|
<el-button type="primary" @click="product191()" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
|
</el-row>
|
<el-row style="height: 50px;">
|
<el-button type="primary" @click="product0JWF()" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
|
</el-row>
|
</el-card>
|
</el-col>
|
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "index",
|
data() {
|
return {
|
tableData: [{
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: '222222222222',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}, {
|
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
|
date: '2',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
address: '',
|
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
// src: 'file:///D:/img/qt.jpg'
|
};
|
},
|
created() {
|
},
|
mounted() {
|
document.getElementById('outerDiv0').style.background = 'yellow'
|
this.setImg(0)
|
this.autoShow()
|
},
|
methods: {
|
autoShow() {
|
const _this = this
|
setInterval(() => {
|
_this.setBg()
|
}, 2000)
|
},
|
setImg(index) {
|
this.address = this.tableData[index].address
|
this.src = this.tableData[index].img
|
},
|
setBg() {
|
if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
|
this.setImg(0)
|
document.getElementById('outerDiv0').style.background = 'yellow'
|
for (let j = 1; j < this.tableData.length; j++) {
|
document.getElementById('outerDiv' + j).style.background = 'white'
|
}
|
return;
|
}
|
for (let i = 0; i < this.tableData.length - 1; i++) {
|
if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
|
this.setImg(i+1)
|
document.getElementById('outerDiv' + i).style.background = 'green'
|
document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
|
return;
|
}
|
}
|
},
|
getUpOrDown(index) {
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
|
this.setImg(i + index)
|
document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
|
document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
|
return;
|
}
|
}
|
},
|
backClick(){
|
this.getUpOrDown(-1)
|
},
|
nextStep(){
|
this.getUpOrDown(1)
|
},
|
processDocuments(){
|
|
},
|
product2V91(){
|
|
},
|
product191(){
|
|
},
|
product0JWF(){
|
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.outerDiv {
|
width: fit-content;
|
min-width: 100%;
|
/*width: 300px;*/
|
height: 50px;
|
margin-bottom: 10px;
|
}
|
|
.innerDiv1 {
|
/*width: 79%;*/
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.innerDiv2 {
|
/*width: 20%;*/
|
width: 50px;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.content_left {
|
font-weight: bold;
|
}
|
.content_right {
|
white-space: nowrap;
|
padding-left: 5px;
|
padding-right: 5px;
|
}
|
.container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100px; /* 设置div的高度，可根据实际情况调整 */
|
}
|
|
.centered {
|
text-align: center;
|
}
|
|
</style>
|
