145 lines
3.7 KiB
Vue
145 lines
3.7 KiB
Vue
<template>
|
|
<Card title="模型列表">
|
|
<div class="videos">
|
|
<div class="videosList">
|
|
<span style="margin-left: 45px">模型名称</span>
|
|
</div>
|
|
<div
|
|
class="video"
|
|
v-for="(item, index) in threeData"
|
|
:key="index"
|
|
@click="threeBtn(item, index)"
|
|
:class="index == noIndex ? 'active' : ''"
|
|
>
|
|
<span style="margin-right: 20px; margin-left: 10px">{{
|
|
item.typesss
|
|
}}</span>
|
|
<span>{{ item.bulidingName }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import bus from "@/util/eventBus.js";
|
|
import Card from "../components/Card.vue";
|
|
export default {
|
|
components: { Card },
|
|
data() {
|
|
return {
|
|
threeData: [
|
|
{
|
|
typesss: 1,
|
|
bulidingName:
|
|
"ZBDL-CP-01-S-B3_中建四局金融城东区AT091429地块项目底板承台与柱墩钢筋模型_V1_0",
|
|
url: "http://124.71.79.109/showModel?id=100001",
|
|
},
|
|
{
|
|
typesss: 2,
|
|
bulidingName:
|
|
"ZBDL-CP-01-S-B3_中建四局金融城东区AT091429地块项目结构底板插筋模型_V1_0",
|
|
url: "http://124.71.79.109/showModel?id=100002",
|
|
},
|
|
{
|
|
typesss: 3,
|
|
bulidingName:
|
|
"ZBDL-CP-01-S-B3_中建四局金融城东区AT091429地块项目结构底板钢筋模型_V1_0",
|
|
url: "http://124.71.79.109/showModel?id=100003",
|
|
},
|
|
{
|
|
typesss: 4,
|
|
bulidingName:
|
|
"ZBDL-CP-01-S-B3_中建四局金融城东区AT091429地块项目结构底板混凝土模型_V1_0",
|
|
url: "http://124.71.79.109/showModel?id=100004",
|
|
},
|
|
{
|
|
typesss: 5,
|
|
bulidingName:
|
|
"S_中建四局金融城东区ATO91429地块项目_塔楼",
|
|
url: "http://124.71.79.109/showModel?id=100005",
|
|
},
|
|
{
|
|
typesss: 6,
|
|
bulidingName:
|
|
"S_中建四局金融城东区ATO91429地块项目_裙楼_结构",
|
|
url: "http://124.71.79.109/showModel?id=100006",
|
|
},
|
|
{
|
|
typesss: 7,
|
|
bulidingName:
|
|
"S_中建四局金融城东区ATO91429地块项目-地下室_V1.0",
|
|
url: "http://124.71.79.109/showModel?id=100008",
|
|
},
|
|
{
|
|
typesss: 8,
|
|
bulidingName:
|
|
"MEP_中建四局金融城东区ATO91429地块项目_29F避难层",
|
|
url: "http://124.71.79.109/showModel?id=100009",
|
|
},
|
|
{
|
|
typesss: 9,
|
|
bulidingName:
|
|
"MMEP_中建四局金融城东区ATO91429地块项目_18F中低区标准层",
|
|
url: "http://124.71.79.109/showModel?id=100010",
|
|
},
|
|
],
|
|
url: [],
|
|
noIndex: 0,
|
|
urlData:'http://124.71.79.109/showModel?id=100007',
|
|
};
|
|
},
|
|
created() {
|
|
this.$nextTick(() => {
|
|
this.threeBtn(this.threeData[0],0);
|
|
});
|
|
|
|
// this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.threeData.forEach((res) => {
|
|
this.url = res.url;
|
|
});
|
|
},
|
|
threeBtn(item, index) {
|
|
bus.$emit("threeData", item.url);
|
|
this.noIndex = index;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.videos {
|
|
box-sizing: border-box;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
height: 100%;
|
|
.video {
|
|
width: 350px;
|
|
border-bottom: 2px solid #ccc;
|
|
margin: 0px 0 0 8px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 15px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.videosList {
|
|
width: 350px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
background-color: #66d3d8;
|
|
color: #00292a;
|
|
margin: 14px 0 0 8px;
|
|
font-size: 14px;
|
|
}
|
|
.active {
|
|
color: #66d3d8 !important;
|
|
}
|
|
}
|
|
</style>
|