|
|
@@ -10,7 +10,7 @@
|
|
|
controls
|
|
|
></audio>
|
|
|
<!-- 音频图标 v-if="audio && !isOneAduio"-->
|
|
|
- <div class="iconList">
|
|
|
+ <div :class="onImg ? 'iconLists' : 'iconList'">
|
|
|
<div
|
|
|
class="audioIcon"
|
|
|
@click="audioSta = !audioSta"
|
|
|
@@ -23,14 +23,11 @@
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="audioIcon"
|
|
|
- :title="audioSta ? '关闭音频' : '打开音频'"
|
|
|
- >
|
|
|
+ <div class="audioIcon" :title="audioSta ? '关闭音频' : '打开音频'">
|
|
|
<div class="ppList">
|
|
|
<div
|
|
|
v-for="item in languageList"
|
|
|
- :key="item"
|
|
|
+ :key="item.key"
|
|
|
@click="hanleType(item)"
|
|
|
:style="{ color: item.key == language ? '#0F7562' : '#00221C' }"
|
|
|
>
|
|
|
@@ -90,6 +87,7 @@
|
|
|
<img class="logo" src="../assets/logo.png" alt="" />
|
|
|
<div
|
|
|
class="contenBox"
|
|
|
+ v-show="!onImg"
|
|
|
:class="{ contenBoxAc: index === myInd }"
|
|
|
v-for="(item, index) in activeObj.images"
|
|
|
:key="index"
|
|
|
@@ -122,11 +120,13 @@
|
|
|
@click="cutMyInd(-1, myInd === 0)"
|
|
|
class="leftJJ awccJJ"
|
|
|
:class="{ noClick: myInd === 0 }"
|
|
|
+ v-show="!onImg"
|
|
|
v-if="activeObj.images && activeObj.images.length > 1"
|
|
|
></div>
|
|
|
<div
|
|
|
@click="cutMyInd(1, myInd === activeObj.images.length - 1)"
|
|
|
class="rightJJ awccJJ"
|
|
|
+ v-show="!onImg"
|
|
|
:class="{ noClick: myInd === activeObj.images.length - 1 }"
|
|
|
v-if="activeObj.images && activeObj.images.length > 1"
|
|
|
></div>
|
|
|
@@ -140,8 +140,9 @@
|
|
|
activeObj = element;
|
|
|
myInd = 0;
|
|
|
"
|
|
|
- v-for="element in list"
|
|
|
- :key="element.title"
|
|
|
+ v-show="element.title"
|
|
|
+ v-for="(element, index) in list"
|
|
|
+ :key="index"
|
|
|
:class="{ active: element.id == activeObj.id }"
|
|
|
>
|
|
|
{{ element.title }}
|
|
|
@@ -149,12 +150,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 下面的文字介绍 -->
|
|
|
- <div class="flooTxt" v-if="activeObj.images[myInd]">
|
|
|
+ <div
|
|
|
+ class="flooTxt"
|
|
|
+ :class="{ onImg: !!onImg }"
|
|
|
+ v-if="activeObj.images[myInd]"
|
|
|
+ >
|
|
|
<div class="flooTxtBox">
|
|
|
- <div class="myTitle">{{ activeObj.images[myInd].title_zh }}</div>
|
|
|
- <div class="myTxt">
|
|
|
- {{ activeObj.images[myInd].text_zh }}
|
|
|
- </div>
|
|
|
+ <div class="myTitle" v-html="showText('title')"></div>
|
|
|
+ <div class="myTxt" v-html="showText('text')"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -175,19 +178,24 @@ export default {
|
|
|
return {
|
|
|
m: this.$route.query.m,
|
|
|
id: this.$route.query.id,
|
|
|
- languageList: [{
|
|
|
- name: '简体中文',
|
|
|
- key: 'zh-cn',
|
|
|
- },{
|
|
|
- name: '繁体中文',
|
|
|
- key: 'zh-hk',
|
|
|
- },{
|
|
|
- name: 'English',
|
|
|
- key: 'en',
|
|
|
- },{
|
|
|
- name: 'Português',
|
|
|
- key: 'pe',
|
|
|
- }],
|
|
|
+ languageList: [
|
|
|
+ {
|
|
|
+ name: "简体中文",
|
|
|
+ key: "zh-cn",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "繁体中文",
|
|
|
+ key: "zh-hk",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "English",
|
|
|
+ key: "en",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Português",
|
|
|
+ key: "pe",
|
|
|
+ },
|
|
|
+ ],
|
|
|
language: "zh-cn",
|
|
|
// 音频地址
|
|
|
audio: "",
|
|
|
@@ -195,6 +203,8 @@ export default {
|
|
|
isOneAduio: false,
|
|
|
// 音频状态
|
|
|
audioSta: false,
|
|
|
+ //无图，模式
|
|
|
+ onImg: false,
|
|
|
myInd: 0,
|
|
|
// 当前 type
|
|
|
list: [],
|
|
|
@@ -241,9 +251,29 @@ export default {
|
|
|
computed: {},
|
|
|
components: {},
|
|
|
methods: {
|
|
|
- hanleType(item){
|
|
|
- this.language = item.key
|
|
|
- this.$i18n.locale = 'fr';
|
|
|
+ hanleType(item) {
|
|
|
+ this.language = item.key;
|
|
|
+ // this.$i18n.locale = 'fr';
|
|
|
+ },
|
|
|
+ showText(type) {
|
|
|
+ let item = this.activeObj.images[this.myInd];
|
|
|
+ let objTitle = {
|
|
|
+ "zh-cn": item.title_zh,
|
|
|
+ "zh-hk": item.title_zhhk,
|
|
|
+ pe: item.title_pe,
|
|
|
+ en: item.title_en,
|
|
|
+ };
|
|
|
+ let objText = {
|
|
|
+ "zh-cn": item.text_zh,
|
|
|
+ "zh-hk": item.text_zhhk,
|
|
|
+ pe: item.text_pe,
|
|
|
+ en: item.text_en,
|
|
|
+ };
|
|
|
+ if (type == "title") {
|
|
|
+ return objTitle[this.language];
|
|
|
+ } else {
|
|
|
+ return objText[this.language];
|
|
|
+ }
|
|
|
},
|
|
|
// 本地化 url 适配
|
|
|
urlToFitFu(url) {
|
|
|
@@ -270,20 +300,20 @@ export default {
|
|
|
dom.show();
|
|
|
},
|
|
|
async getData() {
|
|
|
- console.log("----myData", myData);
|
|
|
// https://www.4dmodel.com/
|
|
|
|
|
|
- // let url = `https://super.4dage.com/data/${ // 线上数据
|
|
|
-
|
|
|
- // let url = `/data/${
|
|
|
- // //本地化部署
|
|
|
- // this.id
|
|
|
- // }/hot/js/data.js?time=${Math.random()}`;
|
|
|
- // let url = `/hot/js/data.js?time=${Math.random()}`;
|
|
|
- // let result = (await this.$http.get(url)).data;
|
|
|
- const resData = myData;
|
|
|
- this.list = resData;
|
|
|
+ let url = `https://houseoss.4dkankan.com/project/aoMenScene/static/hot/${
|
|
|
+ // 线上数据
|
|
|
+ // let url = `/static/data/${
|
|
|
+ //本地化部署
|
|
|
+ this.m
|
|
|
+ }/data.json?time=${Math.random()}`;
|
|
|
+ console.log("----myData", myData, url);
|
|
|
+ let result = (await this.$http.get(url)).data;
|
|
|
+ const resData = result;
|
|
|
+ this.list = JSON.parse(JSON.stringify(resData));
|
|
|
let showData = resData && resData[0];
|
|
|
+ this.onImg = showData.onImg || false;
|
|
|
let item = showData.images[this.myInd];
|
|
|
this.audio = item.mp3_zh || item.mp3_zhhk || item.mp3_en || item.mp3_pe;
|
|
|
this.activeObj = {
|
|
|
@@ -362,7 +392,8 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
- .iconList {
|
|
|
+ .iconList,
|
|
|
+ .iconLists {
|
|
|
position: absolute;
|
|
|
bottom: 182px;
|
|
|
right: 237px;
|
|
|
@@ -545,6 +576,9 @@ export default {
|
|
|
font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 10px;
|
|
|
+ * {
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
}
|
|
|
.myTxt {
|
|
|
font-family: Adobe Heiti Std;
|
|
|
@@ -552,6 +586,9 @@ export default {
|
|
|
font-size: 19px;
|
|
|
color: #dde5e2;
|
|
|
line-height: 31px;
|
|
|
+ * {
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
}
|
|
|
&::-webkit-scrollbar {
|
|
|
/*滚动条整体样式*/
|
|
|
@@ -562,7 +599,7 @@ export default {
|
|
|
/*滚动条里面小方块*/
|
|
|
border-radius: 10px;
|
|
|
-webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
- background: #2F714A;
|
|
|
+ background: #2f714a;
|
|
|
}
|
|
|
&::-webkit-scrollbar-track {
|
|
|
/*滚动条里面轨道*/
|
|
|
@@ -572,15 +609,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .onImg {
|
|
|
+ top: -600px !important;
|
|
|
+ height: 360px;
|
|
|
+ }
|
|
|
+
|
|
|
.flooTxtOne {
|
|
|
height: 600px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 移动端
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
.home {
|
|
|
- .logo{
|
|
|
+ .logo {
|
|
|
display: none;
|
|
|
}
|
|
|
#myAudio {
|
|
|
@@ -595,17 +638,21 @@ export default {
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- .iconList{
|
|
|
+ .iconList {
|
|
|
bottom: 430px !important;
|
|
|
right: 30px !important;
|
|
|
}
|
|
|
- .changeList{
|
|
|
+ .iconLists {
|
|
|
+ bottom: 270px !important;
|
|
|
+ right: 30px !important;
|
|
|
+ }
|
|
|
+ .changeList {
|
|
|
width: 100%;
|
|
|
left: 42px;
|
|
|
bottom: 458px;
|
|
|
- div{
|
|
|
+ div {
|
|
|
font-size: 8px !important;
|
|
|
- .item{
|
|
|
+ .item {
|
|
|
padding: 5px 4px !important;
|
|
|
min-width: 52px;
|
|
|
}
|
|
|
@@ -678,9 +725,9 @@ export default {
|
|
|
background-image: url("../assets/images/icon/right.png");
|
|
|
}
|
|
|
}
|
|
|
- .ppList{
|
|
|
+ .ppList {
|
|
|
top: 35px !important;
|
|
|
- left: -75px ! important;
|
|
|
+ left: -75px !important;
|
|
|
}
|
|
|
.flooTxt {
|
|
|
margin-top: 0;
|
