settle_down_wx/pages/index/components/dynamic.vue

<template>
    <div class="dynamic">
      <div v-for="(item,index) in dynamicList" class="dynamicList">
         <image :src="item.img" class="dynamicImage"></image>
        <div class="dynamicInfo">
          <span style="color: #18172A;font-size: 28rpx">{{item.name}}</span>
          <span style="color: #666666;font-size: 24rpx">{{item.time}}</span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "dynamic",
  data(){
    return {
      dynamicList:[
        {img:'https://www.idea-co-sf.com/gardenProduct/image/dynamic1.png',name:'这是一个动态的标题',time:'2024-05-07'},
        {img:'https://www.idea-co-sf.com/gardenProduct/image/dynamic1.png',name:'这是一个动态的标题',time:'2024-05-07'},
        {img:'https://www.idea-co-sf.com/gardenProduct/image/dynamic1.png',name:'这是一个动态的标题',time:'2024-05-07'},
      ]
    }
  }
}
</script>

<style lang="scss">
    .dynamic{
      .dynamicList{
        display: flex;
        flex-direction: column;
        .dynamicImage{
          width: 686rpx;
          height: 240rpx;
          margin: 0 auto;
        }
        .dynamicInfo{
          width: 686rpx;
          margin: 16rpx auto 48rpx auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
</style>