vue项目中,完成一个布局,分左右两部分,左边部分的第一行是上牌时间,第二行是请选择和>符号,右边部分的第一行是行驶里程,第二行是请选择和>符号
时间: 2024-02-25 21:55:58 浏览: 59
您使用Vue的布局组件来实现这个布局,如下所示:
```html
<template>
<div class="container">
<div class="left">
<div class="row">
<div class="label">上牌时间:</div>
<div class="value">2020-01-01</div>
</div>
<div class="row">
<div class="label">请选择:</div>
<div class="icon">></div>
</div>
</div>
<div class="right">
<div class="row">
<div class="label">行驶里程:</div>
<div class="value">10000公里</div>
</div>
<div class="row">
<div class="label">请选择:</div>
<div class="icon">></div>
</div>
</div>
</div>
</template>
<style>
.container {
display: flex;
align-items: center;
}
.left,
.right {
width: 50%;
display: flex;
flex-direction: column;
}
.row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label {
font-weight: bold;
margin-right: 10px;
}
.value {
flex: 1;
}
.icon {
font-size: 20px;
}
</style>
```
以上代码中,使用了flex布局实现了左右两部分的对齐。在左右两部分中分别使用了一个样式为`.row`的元素来表示一行,其中包含了一个样式为`.label`的元素和一个样式为`.value`或`.icon`的元素。您可以根据自己的需求修改样式和内容。
阅读全文