Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
02b4c605 1 parent 0fb3cb42

fix 样式调整

Inline Side-by-side
Showing 2 changed files with 11 additions and 11 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-05 09:46:01
* @LastEditTime: 2024-11-19 14:30:13
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
......@@ -61,7 +61,7 @@ export default {
html,
body {
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
font-family: 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-12 16:10:50
* @LastEditTime: 2024-11-19 16:06:14
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -22,9 +22,9 @@
<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' }">
<div class="banner-text-wrapper" style="margin-top: 3%;">
<div class="text">
<p class="title" style="margin-bottom: 0; color: white; font-size: 2.2vw;">{{ category_name }}</p>
<p class="sub" style="color: white; font-size: 2.2vw;">{{ category_name_en }}</p>
<div style="margin-top: 1rem; font-weight: normal; font-size: 1vw; color: white; width: 45%;">
<p class="title" style="margin-bottom: 0; color: white; font-size: 1.6vw; font-weight: bold;">{{ category_name }}</p>
<p class="sub" style="color: white; font-size: 1.2vw; font-weight: bold;">{{ category_name_en }}</p>
<div style="margin-top: 1.5rem; font-weight: normal; font-size: 0.9vw; color: white; width: 45%;">
<p v-html="category_description"></p>
</div>
</div>
......@@ -161,7 +161,7 @@ export default {
let img_width = $('.product-item-img img').outerWidth();
$('.product-item-img img').css('height', img_width * 1 + 'px');
let banner_width = $('.top-img').outerWidth();
$('.top-img').css('height', banner_width * 0.19 + 'px');
$('.top-img').css('height', banner_width * 0.12 + 'px');
})
},
handleChange(val) {
......@@ -182,10 +182,10 @@ export default {
let info = data[0];
this.category_name = '所有产品';
this.category_name_en = 'All Products';
this.category_description = '<p style="margin-bottom: 0.5rem;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p><p>Hager provides safe and stable electrical products and intelligent solutions for customers.</p>';
this.banner = 'http://q.card-ar.com/hager/banner-r@2x_FnBknQc8Aq6k4cljFn8Y7yaZcJWP.png';
// this.category_description = '<p style="margin-bottom: 0.5rem;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p><p>Hager provides safe and stable electrical products and intelligent solutions for customers.</p>';
this.category_description = '<p style="margin-bottom: 0.5rem; font-weight: bold;">海格为客户提供安全稳定的电气产品与智能化解决方案。</p>';
this.banner = 'https://cdn.ipadbiz.cn/hager/img/4-b-02.png';
this.product_list = info.list;
this.search_keyword = '';
// 设置页面标题
document.title = '所有产品 | Hager China';
......@@ -286,7 +286,7 @@ export default {
}
.top-img {
background-size: 50% 100%; /* 每张背景图各占 50% 的宽度，100% 的高度 */
background-size: 50% 115%; /* 每张背景图各占 50% 的宽度，100% 的高度 */
background-position: left, right; /* 第一张图在左侧，第二张图在右侧 */
background-repeat: no-repeat; /* 避免背景图重复 */
position: relative;
......