hookehuyr

自适应模式下产品图片宽高优化显示

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-10-28 11:44:26 4 + * @LastEditTime: 2024-10-28 17:57:14
5 * @FilePath: /hager/src/views/product/detail.vue 5 * @FilePath: /hager/src/views/product/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 <div class="product-sub" style="margin: 1rem 0 2rem;" v-html="info.post_excerpt"></div> 35 <div class="product-sub" style="margin: 1rem 0 2rem;" v-html="info.post_excerpt"></div>
36 </div> 36 </div>
37 <div v-for="(item, index) in info_images" :key="index" class="product-item-img"> 37 <div v-for="(item, index) in info_images" :key="index" class="product-item-img">
38 - <el-image style="height: 14rem;" :src="item" fit="cover"></el-image> 38 + <el-image style="height: auto; width: 50vw;" :src="item" fit="cover"></el-image>
39 </div> 39 </div>
40 </div> 40 </div>
41 </hager-box> 41 </hager-box>
......
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-10-28 15:03:09 4 + * @LastEditTime: 2024-10-28 17:58:59
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 <div v-else class="product-list"> 44 <div v-else class="product-list">
45 <div class="product-item xs" v-for="(item, index) in product_list" :key="index"> 45 <div class="product-item xs" v-for="(item, index) in product_list" :key="index">
46 <div @click="goToDetail(item)" class="product-item-img xs"> 46 <div @click="goToDetail(item)" class="product-item-img xs">
47 - <img style="width: 100%; height: auto;" :src="item.product_status === 'publish' ? item.cover : no_product_img"> 47 + <img style="width: 35vw; height: auto;" :src="item.product_status === 'publish' ? item.cover : no_product_img">
48 </div> 48 </div>
49 <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p> 49 <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
50 </div> 50 </div>
......