| | |
| | | <div v-for="(item, index) in details" :key="index"> |
| | | <div v-if="item.type === 'WLongText'" class="wrapper platform"> |
| | | <div class="content_title"><span v-if="item.title" v-text="item.title"></span></div> |
| | | <p v-text="item.longText"></p> |
| | | <p style="margin-bottom: 0.1rem;" v-for="(text, index) in item.textlist" :key="index" v-text="text.LongText"></p> |
| | | </div> |
| | | <div v-else-if="item.type === 'Wimages'" class="wrapper scene"> |
| | | <div class="content_title"><span v-if="item.title" v-text="item.title"></span></div> |
| | | <div class="content_scene"> |
| | | <span class="scene scene-img" v-for="(img, index) in item.imglist" :key="index"> |
| | | <span class="scene scene-img" :class="img.scale && 'scale'" v-for="(img, index) in item.imglist" :key="index"> |
| | | <img :src="img.url" alt=""> |
| | | <span class="txt" :class="'txt' + img.position" :style="'color:' + img.color"> |
| | | <p v-text="img.title"></p> |
| | |
| | | title: det.Title1 |
| | | } |
| | | if (item.type === 'WLongText') { |
| | | item.longText = det.DOne[0].LongText |
| | | item.textlist = det.DOne |
| | | } else if (item.type === 'Wimages') { |
| | | item.imglist = det.DOne.map(cell => { |
| | | return { |
| | |
| | | tip: cell.CDefine2, |
| | | url: cell.Images, |
| | | position: cell.TypeCharThree, |
| | | color: cell.TypeCharTwo |
| | | color: cell.TypeCharTwo, |
| | | scale: true |
| | | } |
| | | }) |
| | | } else if (item.type === 'WBigImageOne') { |
| | | item.type = 'Wimages' |
| | | item.imglist = det.DOne.map(cell => { |
| | | return { |
| | | title: cell.CDefine1, |
| | | tip: cell.CDefine2, |
| | | url: cell.Images, |
| | | position: cell.TypeCharThree, |
| | | color: cell.TypeCharTwo, |
| | | scale: false |
| | | } |
| | | }) |
| | | } else if (item.type === 'Wico') { |
| | |
| | | margin: 0.1rem 0 0.38rem; |
| | | } |
| | | p { |
| | | font-size: 0.14rem; |
| | | font-size: 0.16rem; |
| | | color: #676767; |
| | | line-height: .22rem; |
| | | line-height: .24rem; |
| | | } |
| | | } |
| | | .scene { |
| | | margin: 0 auto; |
| | | position: relative; |
| | | cursor: pointer; |
| | | // cursor: pointer; |
| | | |
| | | .txt { |
| | | position: absolute; |
| | |
| | | transform: scale(1); |
| | | transition: all 0.5s; |
| | | } |
| | | .scene-img:hover { |
| | | .scene-img.scale:hover { |
| | | transform: scale(1.1); |
| | | z-index: 10; |
| | | } |
| | |
| | | } |
| | | .industry { |
| | | .content_title { |
| | | margin: 1.06rem 0 0.69rem; |
| | | margin: 0.6rem 0 0.5rem; |
| | | } |
| | | .content_industry { |
| | | display: flex; |
| | |
| | | .content_skill_item { |
| | | text-align: center; |
| | | flex: 1; |
| | | font-size: .1rem; |
| | | font-size: .16rem; |
| | | div { |
| | | width: 1.2rem; |
| | | height: 1.2rem; |
| | | display: inline-block; |
| | | } |
| | | p { |
| | | font-size: 0.13rem; |
| | | font-size: 0.16rem; |
| | | color:#3A3A3C; |
| | | margin: 0.2rem 0; |
| | | text-align: center; |