【报Bug】使用具名插槽image标签样式没了

示例代码：

父组件
<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元素插入后样式应保留

实际结果：

样式变了