Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a0072e17 1 parent de077135

新闻中心和关于我们头部banner图片显示优化

Inline Side-by-side
Showing 2 changed files with 33 additions and 13 deletions
<!--
* @Date: 2024-10-17 09:22:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 10:53:15
* @LastEditTime: 2024-11-07 16:54:50
* @FilePath: /hager/src/views/about/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-about-page">
<hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/tiny/banner04@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper" style="margin-top: 8%;">
<hager-box v-if="!is_xs" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/tiny/banner04@2x.png)' }">
<div class="banner-text-wrapper" style="margin-top: 8%;">
<div class="text">
<p class="title">海格E3可持续发展理念</p>
<p class="sub">Ethics 道德</p>
<p class="sub">Environment 环境</p>
<p class="sub">Energy 能源</p>
<p class="title" style="">海格E3可持续发展理念</p>
<p class="sub" style="">Ethics 道德</p>
<p class="sub" style="">Environment 环境</p>
<p class="sub" style="">Energy 能源</p>
</div>
</div>
</hager-box>
<hager-box v-else>
<div class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0; font-size: 5vw;">关于海格</p>
<p class="sub" style="font-size: 4vw;">About Hager</p>
</div>
</div>
</hager-box>
......
<!--
* @Date: 2024-10-18 12:05:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-05 09:38:45
* @LastEditTime: 2024-11-07 17:56:53
* @FilePath: /hager/src/views/news/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-news-page">
<hager-box :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner06.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<hager-box v-if="!is_xs" :class="['news-top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner06.png)' }">
<div class="banner-text-wrapper" style="margin-top: 5%;">
<div class="text">
<p class="title" style="margin-bottom: 0;">新闻中心</p>
<p class="sub">News</p>
<p class="sub" style="">News</p>
<div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
<p style="margin-bottom: 0.25rem;">在这里，可以找到海格的最新动态。</p>
<p>深入了解来自海格的企业及市场活动、成功案例、<br />创新产品等。</p>
......@@ -19,6 +19,14 @@
</div>
</div>
</hager-box>
<hager-box v-else>
<div class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0; font-size: 5vw;">新闻中心</p>
<p class="sub" style="font-size: 4vw;">News</p>
</div>
</div>
</hager-box>
<hager-box style="margin: 1rem 0;">
<div v-if="!is_xs" class="hager-news-list">
<div class="card" v-for="(item, index) in news_list" :key="index">
......@@ -36,7 +44,7 @@
</div>
<div v-else class="hager-news-list xs">
<div class="card" v-for="(item, index) in news_list" :key="index">
<img :src="item.cover" alt="学校图片" class="card-image">
<img :src="item.cover" alt="学校图片" class="card-image xs">
<div class="news-item">
<div class="news-item-title xs">{{ item.post_title }}</div>
<p class="news-item-sub">{{ item.post_title_en }}</p>
......@@ -98,7 +106,7 @@ export default {
<style lang="less" scoped>
.hager-news-page {
.top-img {
.news-top-img {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
......@@ -140,6 +148,10 @@ export default {
width: 100%;
height: 26rem;
object-fit: cover;
&.xs {
height: auto;
object-fit: contain;
}
}
.news-item {
......