| | |
| | | <template> |
| | | <div class="homePage"> |
| | | <el-carousel :height="screenheight + 'px'"> |
| | | <el-carousel-item v-for="(item, index) in banner" :key="index"> |
| | | <div class="bannerBox imgBox"> |
| | | <img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" /> |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | <div class="bannerBox imgBox"> |
| | | <img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" /> |
| | | <div class="bannerText"> |
| | | <div>中国协和医科大学出版社</div> |
| | | <div class="enText">ABOUT US</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="contentBox"> |
| | | <div class="crumbs"> |
| | |
| | | const getBanner = () => { |
| | | MG.resource |
| | | .getItem({ |
| | | path: 'banner\\homeBanner', |
| | | path: 'banner\\about', |
| | | fields: { link: [] }, |
| | | paging: { start: 0, size: 9 }, |
| | | }) |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .bannerBox { |
| | | height: 380px; |
| | | position: relative; |
| | | .bannerText { |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | font-size: 36px; |
| | | font-weight: 700; |
| | | color: #fff; |
| | | text-shadow: 0px 0px 10px #000000; |
| | | text-align: center; |
| | | } |
| | | .enText { |
| | | font-size: 36px; |
| | | opacity: 0.45; |
| | | margin-top: 20px; |
| | | } |
| | | } |
| | | .homePage { |
| | | min-width: 1220px; |
| | | min-height: calc(100vh - 61.8%); |