|
@@ -0,0 +1,115 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="sxz-container">
|
|
|
|
+ <div class="banner">
|
|
|
|
+ <div class="container" v-html="`随心装 . 快速打造心中家的模样`"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="plate-w" ref="homeLayout">
|
|
|
|
+ <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
|
|
|
|
+ <div class="container">
|
|
|
|
+ <h2 class="common-title">{{item.name}}</h2>
|
|
|
|
+ <img :src="item.img" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getPosition } from '@/util'
|
|
|
|
+import { mapState } from 'vuex'
|
|
|
|
+import sequence from '@/components/sequence'
|
|
|
|
+export default {
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ sequenceArr: [
|
|
|
|
+ {
|
|
|
|
+ name: this.$t('conduct.conductHouse.itemTitle1'),
|
|
|
|
+ img: require('@/assets/images/core-products/sxz/item-1.png'),
|
|
|
|
+ runAnimation: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: this.$t('conduct.conductHouse.itemTitle2'),
|
|
|
|
+ img: require('@/assets/images/core-products/sxz/item-2.png'),
|
|
|
|
+ runAnimation: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: this.$t('conduct.conductHouse.itemTitle3'),
|
|
|
|
+ img: require('@/assets/images/core-products/sxz/item-3.png'),
|
|
|
|
+ runAnimation: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '快速打造线上3D家装效果,让人工智能真正服务于生活',
|
|
|
|
+ img: require('@/assets/images/core-products/sxz/item-3.png'),
|
|
|
|
+ runAnimation: true
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState({
|
|
|
|
+ language: state => state.language.current
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ sequence
|
|
|
|
+ },
|
|
|
|
+ mounted () {
|
|
|
|
+ const ISZH = this.language === 'zh'
|
|
|
|
+ },
|
|
|
|
+ destroyed () {
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss">
|
|
|
|
+.sxz-container {
|
|
|
|
+ .banner {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 420px;
|
|
|
|
+ background: url(~@/assets/images/core-products/sxz/banner.png) no-repeat center center;
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ line-height: 56px;
|
|
|
|
+ .container {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .item {
|
|
|
|
+ padding: 110px 0 0;
|
|
|
|
+ img {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .boom {
|
|
|
|
+ height: 530px;
|
|
|
|
+ }
|
|
|
|
+ .common-title {
|
|
|
|
+ margin-top: 0;
|
|
|
|
+ margin-bottom: 50px;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ }
|
|
|
|
+ .sub-list {
|
|
|
|
+ li {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 412px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ padding-bottom: 70px;
|
|
|
|
+ img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 255px;
|
|
|
|
+ }
|
|
|
|
+ &:last-child {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .plate-w {
|
|
|
|
+ margin-bottom: 110px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</style>
|