| | |
| | | <template> |
| | | <div class="overview-title"> |
| | | <div class="left">{{ title }}</div> |
| | | <div class="right">详情 ></div> |
| | | <div class="overview-title"> |
| | | <div class="left"> |
| | | {{ title }} |
| | | </div> |
| | | <div class="right">详情 ></div> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | const props = defineProps({ |
| | | title: { |
| | | type: String, |
| | | default: '机巢概况' |
| | | } |
| | | }) |
| | | const props = defineProps({ |
| | | title: { |
| | | type: String, |
| | | default: '机巢概况', |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .overview-title { |
| | | border: 1px solid red; |
| | | height: hToV(42); |
| | | background-image: url(@/assets/images/title-bg.png); |
| | | background-repeat: no-repeat; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 18px; |
| | | .left { |
| | | margin-left: 66px; |
| | | font-weight: 400; |
| | | font-size: 20px; |
| | | color: #FFFFFF; |
| | | // line-height: 23px; |
| | | text-shadow: 0px 0px 7px rgba(75,180,229,0.69), 0px 2px 8px rgba(5,28,55,0.42); |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | } |
| | | .right { |
| | | width: 42px; |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #0BE7F6; |
| | | line-height: hToV(42); |
| | | } |
| | | } |
| | | </style> |
| | | .overview-title { |
| | | position: relative; |
| | | width: 404px; |
| | | height: hToV(43); |
| | | background-image: url(@/assets/images/title-bg.png); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 18px; |
| | | |
| | | .left { |
| | | position: absolute; |
| | | left: 49px; |
| | | bottom: hToV(16); |
| | | font-weight: 400; |
| | | font-size: 20px; |
| | | color: #ffffff; |
| | | text-shadow: 0px 0px 7px rgba(75, 180, 229, 0.69), 0px 2px 8px rgba(5, 28, 55, 0.42); |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; |
| | | height: hToV(26); |
| | | line-height: hToV(23); |
| | | } |
| | | |
| | | .right { |
| | | position: absolute; |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #0be7f6; |
| | | height: hToV(21); |
| | | line-height: hToV(21); |
| | | font-family: Source Han Sans CN, Source Han Sans CN, serif; |
| | | text-align: right; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | bottom: hToV(16); |
| | | right: 11px; |
| | | } |
| | | } |
| | | </style> |