Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4d13ab1f 1 parent 1132c04d

新增新闻中心和新闻详情

Inline Side-by-side
Showing 3 changed files with 277 additions and 1 deletions
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 09:32:58
* @LastEditTime: 2024-10-18 12:14:14
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -122,4 +122,22 @@ export default [{
tag: 'concat'
},
children: []
}, {
path: '/news',
name: '新闻中心',
component: () => import('@/views/news/index'),
meta: {
title: '海格电器',
tag: 'news'
},
children: []
}, {
path: '/news/detail',
name: '新闻详情',
component: () => import('@/views/news/detail'),
meta: {
title: '海格电器',
tag: 'news'
},
children: []
}]
......
<!--
* @Date: 2024-10-18 12:06:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 13:41:32
* @FilePath: /hager/src/views/news/detail.vue
* @Description: 文件描述
-->
<template>
<div class="hager-detail-page">
<hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner06.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">新闻中心</p>
<p class="sub">News</p>
<div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
<p style="margin-bottom: 0.25rem;">海格用丰富的行业知识和应用经验，为</p>
<p>多个行业提供先进的数字化解决方案。</p>
</div>
</div>
</div>
</hager-box>
<hager-box>
<div class="news-title">{{ title }}</div>
<div v-html="content"></div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标杆品牌',
content: '',
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.hager-detail-page {
.top-img {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
.top-center {
position: absolute;
transform: translateY(50%); /* 垂直与水平居中 */
}
}
.news-title {
color: @secondary-color;
text-align: center;
font-size: 1.75rem;
font-weight: bold;
margin: 2rem 0;
}
}
</style>
<!--
* @Date: 2024-10-18 12:05:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 13:36:34
* @FilePath: /hager/src/views/news/index.vue
* @Description: 文件描述
-->
<template>
<div class="hager-news-page">
<hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
<div v-if="!is_xs" class="banner-text-wrapper top-center">
<div class="text">
<p class="title" style="margin-bottom: 0;">新闻中心</p>
<p class="sub">News</p>
<div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
<p style="margin-bottom: 0.25rem;">海格用丰富的行业知识和应用经验，为</p>
<p>多个行业提供先进的数字化解决方案。</p>
</div>
</div>
</div>
</hager-box>
<hager-box style="margin: 1rem 0;">
<div class="hager-news-list">
<div class="card" v-for="(item, index) in news_list" :key="index">
<img :src="item.src" alt="学校图片" class="card-image">
<div class="news-item">
<div class="news-item-title">{{ item.title }}</div>
<p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
<p class="news-item-content" v-clamp="3">{{ item.content }}</p>
<div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
</div>
</div>
</div>
</hager-box>
<hager-box>
<div class="get-more">
<div class="btn">加载更多...</div>
</div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
export default {
components: { hagerBox },
mixins: [mixin.init],
data () {
return {
news_list: [{
id: '1',
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid astgy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
}, {
id: '2',
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
}, {
id: '3',
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
}]
}
},
mounted () {
},
methods: {
goToNew (v) {
this.$router.push({
path: '/news/detail',
query: {
id: v.id
}
});
}
}
}
</script>
<style lang="less" scoped>
.hager-news-page {
.top-img {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
.top-center {
position: absolute;
transform: translateY(50%); /* 垂直与水平居中 */
}
}
.hager-news-list {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
.card {
flex: 0 0 48.5%; /* 宽度为 1/3 */
margin-bottom: 2.5rem; /* 在元素之间添加间距 */
box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
}
.news-item {
padding: 2rem;
&.xs {
padding: 2rem;
}
.news-item-title {
font-weight: bold;
font-size: 1.35rem;
color: @secondary-color;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
}
.news-item-sub {
color: @primary-color;
margin-top: 0.25rem;
line-height: 1.5em;
overflow: hidden;
word-break: break-word;
}
.news-item-content {
margin: 2rem 0;
color: @text-color;
line-height: 1.5em;
overflow: hidden;
word-break: break-word;
}
.news-item-more {
border: 0.08rem solid #F56400;
color: #F56400;
padding: 0.5rem 1rem;
width: 5rem;
text-align: center;
font-size: 0.8rem;
&:hover {
cursor: pointer;
background-color: #F56400;
color: #FFF;
}
}
}
}
}
.get-more {
display: flex;
justify-content: center;
.btn {
background-color: #F56400;
color: #fff;
padding: 1rem 2rem;
width: 5rem;
margin-bottom: 2rem;
&:hover {
cursor: pointer;
}
}
}
}
</style>