|
@@ -10,18 +10,10 @@
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 顶部装饰背景图 -->
|
|
<!-- 顶部装饰背景图 -->
|
|
|
<div class="top-bg">
|
|
<div class="top-bg">
|
|
|
- <img src="@/assets/AIDesign/top-bg.jpg" alt="背景图" class="bg-image" />
|
|
|
|
|
|
|
+ <img v-show="currentTab === 'inside'" src="@/assets/AIDesign/top-inside.jpg" class="bg-image" />
|
|
|
|
|
+ <img v-show="currentTab === 'outside'" src="@/assets/AIDesign/top-outside.jpg" class="bg-image" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <!-- 空间标题 -->
|
|
|
|
|
- <!-- <div class="smart-space-title-new">
|
|
|
|
|
- <div class="tab-title" :class="{ active_l: currentTab === 'outside' }" @click="handleTabChange('outside')">
|
|
|
|
|
- <div>外墙空间</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="tab-title" :class="{ active_r: currentTab === 'inside' }" @click="handleTabChange('inside')">
|
|
|
|
|
- <div>内墙空间</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div> -->
|
|
|
|
|
<!-- 新版tab -->
|
|
<!-- 新版tab -->
|
|
|
<div class="new-tab-wrapper" :class="currentTab === 'outside' ? 'outside-tab-bg' : 'inside-tab-bg'">
|
|
<div class="new-tab-wrapper" :class="currentTab === 'outside' ? 'outside-tab-bg' : 'inside-tab-bg'">
|
|
|
<div class="tab-title" @click="currentTab = 'outside'"></div>
|
|
<div class="tab-title" @click="currentTab = 'outside'"></div>
|
|
@@ -242,50 +234,6 @@ export default class extends Vue {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
z-index: 0;
|
|
z-index: 0;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .active_l,
|
|
|
|
|
- .active_r {
|
|
|
|
|
- >div {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- z-index: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- ::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- width: 3rem;
|
|
|
|
|
- height: 2.4rem;
|
|
|
|
|
- right: calc(50% - 75px);
|
|
|
|
|
- transform: translate(-50%, 0);
|
|
|
|
|
- top: 10px;
|
|
|
|
|
- background: url('../../assets/AIDesign/AIIcon.png') 100% 100%;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .active_l::after,
|
|
|
|
|
- .active_r::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: calc(100% + 10rem);
|
|
|
|
|
- height: 5.5rem;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .active_l::after {
|
|
|
|
|
- left: -6rem;
|
|
|
|
|
- background: url('../../assets/AIDesign/tabL.png') 100% 100%;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .active_r::after {
|
|
|
|
|
- left: -4rem;
|
|
|
|
|
- background: url('../../assets/AIDesign/tabR.png') 100% 100%;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.new-tab-wrapper {
|
|
.new-tab-wrapper {
|