目录

1.展示效果

2.基础方法源码展示

        ①div部分展示

        ②css部分展示

 

3.接口方法源码展示

     scoped使用

---

1.展示效果

   

2.基础方法源码展示

        ①div部分展示

    <view class="container">
                <view class="cover">
                    <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
                </view>
                <view class="mid">
                    <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
                    <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
                </view>
                <view class="small">
                    <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
                    <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
                    <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
                </view>
            </view>

        ②css部分展示

 

<style scoped> 
.container {
  position: relative;
  width: 375px;  /*去掉宽度，设置padding，即可使两边的内边距一样*/
  height: 812px;
  background-color: #f5f5f5;
  padding: 8px;
}

.img {
  width: 100%;
  height: 100%;
  background-color: skyblue;
  display: block;
  margin: 1px;
}

.cover,
.mid,
.small {
  display: flex;
  width: 375px;
}

.cover {
  height: 200px;
}

.mid {
  height: 180px;
  margin: 2px 0;
}


.small {
  height: 100px;
}

3.接口方法源码展示

<template>
  <div class="container">
    <div class="images">
      <img v-for="url in urls" :key="url" :src="url" class="img" />
    </div>
  </div>
</template>


<script>
export default {
  data: () => ({
    urls: [
      '图片位置'    
    ]
  })
}
</script>

<style scoped>
.container {
  position: relative;
  width: 375px;
  height: 812px;
  background-color: #f5f5f5;
  padding: 8px;
}

.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.img {
  width: 100%;
  height: 100px;
  display: block;
  box-sizing: border-box;
  padding: 1px;
}

.img:nth-child(1) {
  height: 200px;
}

.img:nth-child(2),
.img:nth-child(3) {
  width: 50%;
  height: 150px;
}


.img:nth-child(4),
.img:nth-child(5),
.img:nth-child(6) {
  flex: 1;
}
</style>

     scoped使用

        注：scoped能隔离样式, 不会导致样式冲突，所以在组件外, 通过类名设置组件内的样式, 是不生效的

        当style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。如果你希望 scoped 样式中的一个选择器能够作用得"更深”，例如影响子组件，你可以使用深度选择器