hookehuyr

fix 样式调整

1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-11-05 09:46:01 4 + * @LastEditTime: 2024-11-19 14:30:13
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -61,7 +61,7 @@ export default { ...@@ -61,7 +61,7 @@ export default {
61 61
62 html, 62 html,
63 body { 63 body {
64 - font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; 64 + font-family: 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
65 width: 100%; 65 width: 100%;
66 height: 100%; 66 height: 100%;
67 margin: 0; 67 margin: 0;
......
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-12 16:10:50 4 + * @LastEditTime: 2024-11-19 16:06:14
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
22 <hager-box v-if="!is_xs && !is_search" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: `url('https://cdn.ipadbiz.cn/hager/img/product/banner-l@2x.png'), url(${banner})`, marginTop: '1rem' }"> 22 <hager-box v-if="!is_xs && !is_search" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: `url('https://cdn.ipadbiz.cn/hager/img/product/banner-l@2x.png'), url(${banner})`, marginTop: '1rem' }">
23 <div class="banner-text-wrapper" style="margin-top: 3%;"> 23 <div class="banner-text-wrapper" style="margin-top: 3%;">
24 <div class="text"> 24 <div class="text">
25 - <p class="title" style="margin-bottom: 0; color: white; font-size: 2.2vw;">{{ category_name }}</p> 25 + <p class="title" style="margin-bottom: 0; color: white; font-size: 1.6vw; font-weight: bold;">{{ category_name }}</p>
26 - <p class="sub" style="color: white; font-size: 2.2vw;">{{ category_name_en }}</p> 26 + <p class="sub" style="color: white; font-size: 1.2vw; font-weight: bold;">{{ category_name_en }}</p>
27 - <div style="margin-top: 1rem; font-weight: normal; font-size: 1vw; color: white; width: 45%;"> 27 + <div style="margin-top: 1.5rem; font-weight: normal; font-size: 0.9vw; color: white; width: 45%;">
28 <p v-html="category_description"></p> 28 <p v-html="category_description"></p>
29 </div> 29 </div>
30 </div> 30 </div>
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
161 let img_width = $('.product-item-img img').outerWidth(); 161 let img_width = $('.product-item-img img').outerWidth();
162 $('.product-item-img img').css('height', img_width * 1 + 'px'); 162 $('.product-item-img img').css('height', img_width * 1 + 'px');
163 let banner_width = $('.top-img').outerWidth(); 163 let banner_width = $('.top-img').outerWidth();
164 - $('.top-img').css('height', banner_width * 0.19 + 'px'); 164 + $('.top-img').css('height', banner_width * 0.12 + 'px');
165 }) 165 })
166 }, 166 },
167 handleChange(val) { 167 handleChange(val) {
...@@ -182,10 +182,10 @@ export default { ...@@ -182,10 +182,10 @@ export default {
182 let info = data[0]; 182 let info = data[0];
183 this.category_name = '所有产品'; 183 this.category_name = '所有产品';
184 this.category_name_en = 'All Products'; 184 this.category_name_en = 'All Products';
185 - this.category_description = '<p style="margin-bottom: 0.5rem;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p><p>Hager provides safe and stable electrical products and intelligent solutions for customers.</p>'; 185 + // this.category_description = '<p style="margin-bottom: 0.5rem;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p><p>Hager provides safe and stable electrical products and intelligent solutions for customers.</p>';
186 - this.banner = 'http://q.card-ar.com/hager/banner-r@2x_FnBknQc8Aq6k4cljFn8Y7yaZcJWP.png'; 186 + this.category_description = '<p style="margin-bottom: 0.5rem; font-weight: bold;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p>';
187 + this.banner = 'https://cdn.ipadbiz.cn/hager/img/4-b-02.png';
187 this.product_list = info.list; 188 this.product_list = info.list;
188 -
189 this.search_keyword = ''; 189 this.search_keyword = '';
190 // 设置页面标题 190 // 设置页面标题
191 document.title = '所有产品 | Hager China'; 191 document.title = '所有产品 | Hager China';
...@@ -286,7 +286,7 @@ export default { ...@@ -286,7 +286,7 @@ export default {
286 } 286 }
287 287
288 .top-img { 288 .top-img {
289 - background-size: 50% 100%; /* 每张背景图各占 50% 的宽度,100% 的高度 */ 289 + background-size: 50% 115%; /* 每张背景图各占 50% 的宽度,100% 的高度 */
290 background-position: left, right; /* 第一张图在左侧,第二张图在右侧 */ 290 background-position: left, right; /* 第一张图在左侧,第二张图在右侧 */
291 background-repeat: no-repeat; /* 避免背景图重复 */ 291 background-repeat: no-repeat; /* 避免背景图重复 */
292 position: relative; 292 position: relative;
......