使用具名插槽image标签样式没了 uni-app

使用具名插槽image标签样式没了 uni-app

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

windows11

HBuilderX类型：

正式

HBuilderX版本号：

4.57

浏览器平台：

Chrome

浏览器版本：

134.0.6998.178（正式版本） （64 位）

项目创建方式：

HBuilderX

示例代码：

父组件
<template>
<view class="product">
<view class="product-title">
<view class="more"></view>
<view class="txt">
<slot name="txt"></slot>
</view>
<view class="more">
更多 >
</view>
</view>  
<view class="ProductFramework">  
    <product v-for="item,index in 4" :key="index">  
        <template #ProductImg>  
            <view class="ProductImg">  
                <image src="/static/linshi/样式 (6).png" mode=""></image>  
            </view>  
        </template>  
        <template #content>薄迷你便携自带线10000毫安移动电源</template>  
        <template #money>  
            <view class="money">  
                <text>￥</text>  
                <text>129</text>  
                <text>220</text>  
            </view>  
        </template>  
    </product>  
</view>  

</view>  
</template>  

<script setup>
import product from "@/utils/product_area_1.vue"
</script>  

<style lang="scss" scoped>
.product {
width: 750rpx;
padding: 0 30rpx;
margin-top: 20rpx;
background-color: #ffffff;  

.product-title {  
    height: 85rpx;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 15rpx 0;  

    .more {  
        display: flex;  
        align-items: center;  
        justify-content: end;  
        width: 100rpx;  
        height: 100%;  
        font-size: $text_font_size26;  
        color: $text_color_Coral;  
    }  

    .txt {  
        color: $text_color_Black;  
        font-size: $text_font_row40;  
    }  
}  

.ProductFramework {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
}
</style>  

子组件
<template>
<view class="Area">  
    <slot name="ProductImg"></slot>  
    <view class="content ellipsis-2-lines">  
        <slot name="content"></slot>  
    </view>  
    <view class="price">  
        <slot name="money"></slot>  
    </view>  
</view>  
</template>  

<script setup>
</script>  

<style lang="scss" >
.Area{
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 330rpx;
height: 500rpx;
border-radius: 10rpx;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.5) ;
.ProductImg{
width: 330rpx;
height: 340rpx;
image{
width: 330rpx;
height: 340rpx;
border-radius: 10rpx;
}
}
.content{
padding: 10rpx 15rpx;
font-size: $text_font_size26;
}
.price{
display: flex;
align-items: end;
justify-content: space-between;
width: 100%;
padding: 15rpx;
padding-top: 0;
.money{
>text:nth-child(1){
color: red;
}
>text:nth-child(2){
color: red;
font-size: $text_font_size40;
}
>text:nth-child(3){
margin-left: 10rpx;
color: $text_color_Magenta3;
text-decoration: line-through;
}
}
}
}
</style>

操作步骤：

一开始插槽只用了image元素，后来样式始终没有，又包裹了一层，每一个类名都把宽高锁定了，样式正常了，但是一重新编译就没了，有时候一刷新样式也没。把scoped去掉也不行，从新添加也不行。把所有关于image元素的全局样式都去掉，还是不行，但在之前没用插槽的时候是没有这样的问题的。

预期结果：

使用具名插槽，image元素插入后样式应保留

实际结果：

样式变了

bug描述：

使用具名插槽，image 样式消失 父组件 <template #ProductImg> <view class="ProductImg"> <image src="/static/linshi/样式 (6).png" mode="aspectFill"></image> </view> </template> 子组件 <slot name="ProductImg"></slot> .ProductImg{ width: 330rpx; height: 340rpx; image{ width: 330rpx; height: 340rpx; border-radius: 10rpx; } } 重新编译后，image的样式就消失，更改类名或者随意删除一些元素保存就正常，重新编译后又恢复没有样式的问题。而且子组件的margin-bottom: 20rpx; 不好使。只有bottom不好使。