<template> <div class="wrap" v-if="modules.length>=1"> <div class="single-banner single-banner-overview"> <img class="banner-img" :src="modules[0].form.pic" alt=""> <div class="texts"> <h6 class="banner-title">{{ modules[0].form.title }}</h6> </div> </div> <ul class="tabs wow fadeInLeft"> <template v-for="(item, i) in tabs"> <li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li> </template> </ul> <div class="tab-content"> <div class="inner intro"> <img class="pic" :src="modules[1].form.pic" alt=""> <div class="right"> <div class="relative"> <h6 v-html="modules[1].form.title"></h6> <img class="title-bg" src="http://10.10.11.7/images/overviewIntro/2.png" alt=""> </div> <div class="text" v-html="modules[1].form.des"></div> </div> </div> <div class="intro-bg" v-if="modules[2]"> <div class="mask"></div> <div class="texts"> <h6>{{ modules[2].form.title }}</h6> <div class="des" v-html="modules[2].form.des"></div> </div> </div> </div> <!-- <div class="ads"> <ul class="list"> <li>具有高亮度</li> <li>超短脉冲</li> <li>高相干</li> <li>波长连续可调</li> </ul> </div> --> </div> </template> <script> import mixins from '@/mixins/page' import overview from '@/mixins/overview' import WOW from 'wow.js' export default { mixins: [mixins, overview], data () { return { } }, mounted () { new WOW().init() }, methods: { } }; </script> <style lang="scss" scoped> @import url(../../plugins/wow/animate.css); @import '../../styles/page/page.scss'; .wrap { background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat; } .single-banner { .texts { top: auto !important; bottom: 2rem; } } .tab-content { padding-top: 3.85rem; .intro { display: flex; align-items: center; margin-bottom: 5.5rem; .pic { width: 49%; margin-right: 2%; } .right { width: 49%; } h6 { position: relative; font-size: 1.36rem; color: #333; } .title-bg { position: absolute; top: -2rem; left: -1rem; } .text { margin-top: 2rem; font-size: 1rem; color: #020202; line-height: 2; } } .intro-bg { position: relative; height: auto; padding-top: 4.5rem; padding-bottom: 2rem; color: #fff; text-align: center; background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat; .mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: rgba(0, 0, 0, 0.3); } .texts { position: relative; } h6 { margin-bottom: 1.5rem; font-size: 1.6rem; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-weight: 800; } .des { font-size: 1.2rem; } } } .ads { position: fixed; top: 30%; right: 1%; padding: 20px; animation: move 20s linear infinite alternate; li { display: flex; align-items: center; padding-left: 20px; line-height: 26px; font-weight: 600; font-size: 16px; color: #1583ff; &:before { content: ''; width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background-color: #1583ff; } } } @keyframes move { 0% { top: 30%; right: 1%; } 50% { top: 40%; right: 40%; } 100% { top: 90%; right: 90%; } } @media (max-width: 1200px) { .tab-content { width: 90%; margin: auto; padding-top: 1.25rem; .intro { flex-direction: column; .pic { width: 100%; } } .intro-bg { padding-top: 3rem; .texts { h6 { font-size: 1.6rem; } } } .right { width: 100% !important; margin-top: 1.25rem; .text { margin-top: 1.25rem; } } span { font-size: 1.35rem; } } } </style>