可以看我的上一篇文章(这里复用了这个组件)
<template>
<about>
<view class="listcard" v-for="i in 100">
<view class="listcard-image"><image src="../../static/img/0.jpg" mode="aspectFill"></image></view>
<view class="listcard-content">
<view class="listcard-content_title">千层蛋糕</view>
<view class="listcard-content_sum">美味的蛋糕,超级好吃,嘿嘿</view>
<view class="listcard-content_des">
<view class="listcard-content_des-money">¥100</view>
<view class="listcard-content_des-money">马上抢</view>
</view>
</view>
</view>
</about>
</template>
<script>
import about from '@/pages/about/about';
export default {
components: {
about
},
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {
toPage2() {
uni.navigateTo({
url: '../page2/page2/page2'
});
},
fun2() {
console.log('hello');
uni.navigateTo({
url: '../page2/page2/page2'
});
}
}
};
</script>
<style lang="scss" scoped>
$width: 150px;
.listcard {
border-bottom: 1px solid $uni-bg-color-grey;
display: flex;
padding: 10px;
margin: 10px;
border-radius: 5px;
border-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.9);
box-sizing: border-box;
.listcard-image {
width: 60px;
height: 60px;
border-radius: 5px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.listcard-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 10px;
width: 100%;
font-size: 14px;
line-height: 1.2;
.listcard-content_title {
}
,
.listcard-content_sum {
font-size: 10px;
}
.listcard-content_des {
display: flex;
justify-content: space-between;
font-size: 12px;
.listcard-content_des-money {
padding: 0 5px;
margin-right: 5px;
border-radius: 15px;
color: red;
border: 1px solid red;
}
}
}
}
</style>
对于布局的设计
最外层是 一个 flex 布局,左右两边 排列
右边的内容又是一个 flex布局
,显示竖直排列,设置 space-between 间隔开元素, 再调整一下 margin,padding的值,定位。