item图片左右结构1

  <div class="item" @click="deill(item)">
                    <div class="img">
                        <img :src="item.image">
                    </div>
                    <div class="text">
                        <div class="text-tit">{{item.name}}</div>
                        <div class="text-item" v-html="item.descipt"></div>


                    </div>


                </div>

css
    .item {
        &:hover{
            box-shadow: 0px 4px 12px 0px rgba(12, 68, 204, 0.4);
            cursor: pointer;

        }
        width: 512px;
        height: 213px;

        display: flex;
        /*background: #FFFFFF;*/
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        cursor: pointer;
       width: 100%;
        padding: 10px;

        .img {
            img{
                width: 165px;
                height: 193px;

            }
        }
        .text{
            display: flex;
            flex-direction: column;
            padding: 10px;
            flex: 1;

            .text-tit{
                color: #3E3232;
                font-family: HarmonyOS Sans SC;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                letter-spacing: 0.8px;
                text-transform: capitalize;
            }
            .text-item{
                color: rgba(62, 50, 50, 0.75);
            margin-top: 10px;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;

                p{
                    text-overflow: ellipsis; /* 使用省略号显示超出部分 */
                    height: 50px;
                    overflow: hidden;
                }
            }


            .text-time{
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                /* identical to box height, or 171% */

                letter-spacing: 0.1px;

                color: #1E1E1E;
            }
        }
    
    }