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
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 09:32:58 4 + * @LastEditTime: 2024-10-18 12:14:14
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -122,4 +122,22 @@ export default [{ ...@@ -122,4 +122,22 @@ export default [{
122 tag: 'concat' 122 tag: 'concat'
123 }, 123 },
124 children: [] 124 children: []
125 +}, {
126 + path: '/news',
127 + name: '新闻中心',
128 + component: () => import('@/views/news/index'),
129 + meta: {
130 + title: '海格电器',
131 + tag: 'news'
132 + },
133 + children: []
134 +}, {
135 + path: '/news/detail',
136 + name: '新闻详情',
137 + component: () => import('@/views/news/detail'),
138 + meta: {
139 + title: '海格电器',
140 + tag: 'news'
141 + },
142 + children: []
125 }] 143 }]
......
1 +<!--
2 + * @Date: 2024-10-18 12:06:09
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 13:41:32
5 + * @FilePath: /hager/src/views/news/detail.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-detail-page">
10 + <hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner06.png)' }">
11 + <div v-if="!is_xs" class="banner-text-wrapper top-center">
12 + <div class="text">
13 + <p class="title" style="margin-bottom: 0;">新闻中心</p>
14 + <p class="sub">News</p>
15 + <div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
16 + <p style="margin-bottom: 0.25rem;">海格用丰富的行业知识和应用经验，为</p>
17 + <p>多个行业提供先进的数字化解决方案。</p>
18 + </div>
19 + </div>
20 + </div>
21 + </hager-box>
22 + <hager-box>
23 + <div class="news-title">{{ title }}</div>
24 + <div v-html="content"></div>
25 + </hager-box>
26 + </div>
27 +</template>
28 +
29 +<script>
30 +import mixin from 'common/mixin';
31 +import hagerBox from '@/components/common/hagerBox';
32 +
33 +export default {
34 + components: { hagerBox },
35 + mixins: [mixin.init],
36 + data () {
37 + return {
38 + title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标杆品牌',
39 + content: '',
40 + }
41 + },
42 + mounted () {
43 +
44 + },
45 + methods: {
46 +
47 + }
48 +}
49 +</script>
50 +
51 +<style lang="less" scoped>
52 + .hager-detail-page {
53 + .top-img {
54 + width: 100%;
55 + background-repeat: no-repeat;
56 + background-size: cover;
57 + background-position: center;
58 + position: relative;
59 + .top-center {
60 + position: absolute;
61 + transform: translateY(50%); /* 垂直与水平居中 */
62 + }
63 + }
64 +
65 + .news-title {
66 + color: @secondary-color;
67 + text-align: center;
68 + font-size: 1.75rem;
69 + font-weight: bold;
70 + margin: 2rem 0;
71 + }
72 + }
73 +</style>
1 +<!--
2 + * @Date: 2024-10-18 12:05:44
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-18 13:36:34
5 + * @FilePath: /hager/src/views/news/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-news-page">
10 + <hager-box class="top-img" :style="{ height: '25rem', backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
11 + <div v-if="!is_xs" class="banner-text-wrapper top-center">
12 + <div class="text">
13 + <p class="title" style="margin-bottom: 0;">新闻中心</p>
14 + <p class="sub">News</p>
15 + <div style="margin-top: 1rem; font-weight: normal; font-size: 1.2rem;">
16 + <p style="margin-bottom: 0.25rem;">海格用丰富的行业知识和应用经验，为</p>
17 + <p>多个行业提供先进的数字化解决方案。</p>
18 + </div>
19 + </div>
20 + </div>
21 + </hager-box>
22 + <hager-box style="margin: 1rem 0;">
23 + <div class="hager-news-list">
24 + <div class="card" v-for="(item, index) in news_list" :key="index">
25 + <img :src="item.src" alt="学校图片" class="card-image">
26 + <div class="news-item">
27 + <div class="news-item-title">{{ item.title }}</div>
28 + <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
29 + <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
30 + <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
31 + </div>
32 + </div>
33 + </div>
34 + </hager-box>
35 + <hager-box>
36 + <div class="get-more">
37 + <div class="btn">加载更多...</div>
38 + </div>
39 + </hager-box>
40 + </div>
41 +</template>
42 +
43 +<script>
44 +import mixin from 'common/mixin';
45 +import hagerBox from '@/components/common/hagerBox';
46 +
47 +export default {
48 + components: { hagerBox },
49 + mixins: [mixin.init],
50 + data () {
51 + return {
52 + news_list: [{
53 + id: '1',
54 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
55 + title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
56 + content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
57 + 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'
58 + }, {
59 + id: '2',
60 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
61 + title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
62 + content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
63 + sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
64 + }, {
65 + id: '3',
66 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
67 + title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
68 + content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
69 + sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
70 + }]
71 + }
72 + },
73 + mounted () {
74 + },
75 + methods: {
76 + goToNew (v) {
77 + this.$router.push({
78 + path: '/news/detail',
79 + query: {
80 + id: v.id
81 + }
82 + });
83 + }
84 + }
85 +}
86 +</script>
87 +
88 +<style lang="less" scoped>
89 + .hager-news-page {
90 + .top-img {
91 + width: 100%;
92 + background-repeat: no-repeat;
93 + background-size: cover;
94 + background-position: center;
95 + position: relative;
96 + .top-center {
97 + position: absolute;
98 + transform: translateY(50%); /* 垂直与水平居中 */
99 + }
100 + }
101 +
102 + .hager-news-list {
103 + margin-top: 2rem;
104 + display: flex;
105 + flex-wrap: wrap;
106 + justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
107 + .card {
108 + flex: 0 0 48.5%; /* 宽度为 1/3 */
109 + margin-bottom: 2.5rem; /* 在元素之间添加间距 */
110 + box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
111 + border-radius: 10px;
112 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
113 + overflow: hidden;
114 + background-color: #fff;
115 + transition: transform 0.3s ease-in-out;
116 + &:hover {
117 + transform: scale(1.05);
118 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
119 + }
120 + .card-image {
121 + width: 100%;
122 + height: auto;
123 + object-fit: cover;
124 + }
125 +
126 + .news-item {
127 + padding: 2rem;
128 + &.xs {
129 + padding: 2rem;
130 + }
131 + .news-item-title {
132 + font-weight: bold;
133 + font-size: 1.35rem;
134 + color: @secondary-color;
135 + white-space: nowrap; /* 不换行 */
136 + overflow: hidden; /* 隐藏超出部分 */
137 + text-overflow: ellipsis; /* 用省略号表示被截断的部分 */
138 + }
139 + .news-item-sub {
140 + color: @primary-color;
141 + margin-top: 0.25rem;
142 + line-height: 1.5em;
143 + overflow: hidden;
144 + word-break: break-word;
145 + }
146 + .news-item-content {
147 + margin: 2rem 0;
148 + color: @text-color;
149 + line-height: 1.5em;
150 + overflow: hidden;
151 + word-break: break-word;
152 + }
153 + .news-item-more {
154 + border: 0.08rem solid #F56400;
155 + color: #F56400;
156 + padding: 0.5rem 1rem;
157 + width: 5rem;
158 + text-align: center;
159 + font-size: 0.8rem;
160 + &:hover {
161 + cursor: pointer;
162 + background-color: #F56400;
163 + color: #FFF;
164 + }
165 + }
166 + }
167 + }
168 + }
169 +
170 + .get-more {
171 + display: flex;
172 + justify-content: center;
173 + .btn {
174 + background-color: #F56400;
175 + color: #fff;
176 + padding: 1rem 2rem;
177 + width: 5rem;
178 + margin-bottom: 2rem;
179 + &:hover {
180 + cursor: pointer;
181 + }
182 + }
183 + }
184 + }
185 +</style>