hookehuyr

hover效果优化

1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-01 17:31:10 4 + * @LastEditTime: 2024-11-04 17:41:28
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -533,12 +533,15 @@ export default { ...@@ -533,12 +533,15 @@ export default {
533 .news-item-more { 533 .news-item-more {
534 border: 0.08rem solid #F56400; 534 border: 0.08rem solid #F56400;
535 color: #F56400; 535 color: #F56400;
536 + background-color: #FFF;
536 padding: 0.5rem 1rem; 537 padding: 0.5rem 1rem;
537 width: 5rem; 538 width: 5rem;
538 text-align: center; 539 text-align: center;
539 font-size: 0.8rem; 540 font-size: 0.8rem;
540 - 541 + transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
541 &:hover { 542 &:hover {
543 + color: #FFF;
544 + background-color: #F56400;
542 cursor: pointer; 545 cursor: pointer;
543 } 546 }
544 } 547 }
......
1 <!-- 1 <!--
2 * @Date: 2024-10-18 12:05:44 2 * @Date: 2024-10-18 12:05:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-31 12:59:24 4 + * @LastEditTime: 2024-11-04 17:42:55
5 * @FilePath: /hager/src/views/news/index.vue 5 * @FilePath: /hager/src/views/news/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -175,11 +175,15 @@ export default { ...@@ -175,11 +175,15 @@ export default {
175 .news-item-more { 175 .news-item-more {
176 border: 0.08rem solid #F56400; 176 border: 0.08rem solid #F56400;
177 color: #F56400; 177 color: #F56400;
178 + background-color: #FFF;
178 padding: 0.5rem 1rem; 179 padding: 0.5rem 1rem;
179 width: 5rem; 180 width: 5rem;
180 text-align: center; 181 text-align: center;
181 font-size: 0.8rem; 182 font-size: 0.8rem;
183 + transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
182 &:hover { 184 &:hover {
185 + color: #FFF;
186 + background-color: #F56400;
183 cursor: pointer; 187 cursor: pointer;
184 // background-color: #F56400; 188 // background-color: #F56400;
185 // color: #FFF; 189 // color: #FFF;
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 14:26:41 2 * @Date: 2024-09-29 14:26:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-04 16:48:49 4 + * @LastEditTime: 2024-11-04 17:13:32
5 * @FilePath: /hager/src/views/product/detail.vue 5 * @FilePath: /hager/src/views/product/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 </div> 55 </div>
56 </div> 56 </div>
57 </hager-box> 57 </hager-box>
58 - <hager-box v-if="is_enable" class="box-n"> 58 + <hager-box v-if="is_enable && !is_file" class="box-n">
59 <hager-h1 title="产品资料" sub="Product Information"></hager-h1> 59 <hager-h1 title="产品资料" sub="Product Information"></hager-h1>
60 <div class="product-info"> 60 <div class="product-info">
61 <div class="info-control"> 61 <div class="info-control">
...@@ -159,6 +159,7 @@ export default { ...@@ -159,6 +159,7 @@ export default {
159 checked_items: [], 159 checked_items: [],
160 is_login: false, 160 is_login: false,
161 is_enable: true, // 产品是否有效 161 is_enable: true, // 产品是否有效
162 + is_file: false, // 是否有产品资料
162 } 163 }
163 }, 164 },
164 computed: { 165 computed: {
...@@ -231,6 +232,9 @@ export default { ...@@ -231,6 +232,9 @@ export default {
231 if (this.info.file?.img) { 232 if (this.info.file?.img) {
232 this.info_images = this.info.file.img.map(item => item.value); 233 this.info_images = this.info.file.img.map(item => item.value);
233 } 234 }
235 + // if (!this.info_images.length) { // 没有图片
236 + // this.info_images.push('https://cdn.ipadbiz.cn/hager/img/no-product-img.png');
237 + // }
234 // 产品优势 238 // 产品优势
235 this.product_advantages = this.splitIntoEqualChunks(this.info.product_advantages); 239 this.product_advantages = this.splitIntoEqualChunks(this.info.product_advantages);
236 // 产品资料数据结构 240 // 产品资料数据结构
...@@ -250,6 +254,8 @@ export default { ...@@ -250,6 +254,8 @@ export default {
250 break; 254 break;
251 } 255 }
252 } 256 }
257 + // 判断是否有产品资料
258 + this.is_file = this.download_list.filter(item => item.list.length).length === 0;
253 // 设置页面标题 259 // 设置页面标题
254 document.title = this.info.product_name + ' | Hager China'; 260 document.title = this.info.product_name + ' | Hager China';
255 } 261 }
......
1 <!-- 1 <!--
2 * @Date: 2024-09-27 16:53:09 2 * @Date: 2024-09-27 16:53:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-04 16:48:01 4 + * @LastEditTime: 2024-11-04 17:34:49
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -119,6 +119,7 @@ export default { ...@@ -119,6 +119,7 @@ export default {
119 this.category_name = info.category_name; 119 this.category_name = info.category_name;
120 this.category_name_en = info.category_name_en; 120 this.category_name_en = info.category_name_en;
121 this.product_list = info.list; 121 this.product_list = info.list;
122 + console.warn(info.list);
122 this.search_keyword = ''; 123 this.search_keyword = '';
123 // 获取当前类别的内容 124 // 获取当前类别的内容
124 this.cate_id = info.category_parent ? info.category_parent : info.id; // 同一个值,在不同层级下名字不一样 125 this.cate_id = info.category_parent ? info.category_parent : info.id; // 同一个值,在不同层级下名字不一样
...@@ -141,6 +142,7 @@ export default { ...@@ -141,6 +142,7 @@ export default {
141 if (this.search_keyword) { // 产品有值时操作 142 if (this.search_keyword) { // 产品有值时操作
142 const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword }); 143 const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword });
143 if (code) { 144 if (code) {
145 + console.warn(data);
144 this.product_list = data; 146 this.product_list = data;
145 this.is_search = true; 147 this.is_search = true;
146 this.keyword = this.search_keyword; 148 this.keyword = this.search_keyword;
......
...@@ -352,8 +352,12 @@ export default { ...@@ -352,8 +352,12 @@ export default {
352 color: #F56400; 352 color: #F56400;
353 padding: 0.5rem 2rem; 353 padding: 0.5rem 2rem;
354 border: 1px solid #F56400; 354 border: 1px solid #F56400;
355 + background-color: #FFF;
355 margin: 1rem 0; 356 margin: 1rem 0;
357 + transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
356 &:hover { 358 &:hover {
359 + color: #FFF;
360 + background-color: #F56400;
357 cursor: pointer; 361 cursor: pointer;
358 } 362 }
359 } 363 }
......