vue/uniapp中,这样的页面你们会怎么写?
以下是本人尝试写选中“日”的代码,但完全达不到图中的效果
<view style="display: flex;justify-content: space-between;flex-direction: row;background-color: #E1E1E1;border-radius:82rpx;height: 82rpx;">
<view style="font-size: 36rpx;color: rgba(255, 255, 255, 1);background-color: #31BDEC;border-radius:82rpx;">日</view>
<view style="font-size: 36rpx;rgba(69, 69, 68, 1);">周</view>
<view style="font-size: 36rpx;rgba(69, 69, 68, 1);">月</view>
<view style="font-size: 36rpx;rgba(69, 69, 68, 1);">年</view>
</view>
小弟在这里先感谢各位大神们,感激不尽,祝大神们发财祝大神们取漂亮老婆
回复
1个回答
test
2024-06-27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tabs">
<div class="tab active">日</div>
<div class="tab">周</div>
<div class="tab">月</div>
<div class="tab">年</div>
</div>
</body>
<style>
.tabs {
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: #E1E1E1;
border-radius: 82px;
height: 82px;
}
.tab {
font-size: 36px;
color: rgba(69, 69, 68, 1);
width: 100%;
text-align: center;
line-height: 82px;
}
.tab.active {
color: rgba(255, 255, 255, 1);
background-color: #31BDEC;
border-radius: 82px;
}
</style>
</html>
写的html 自己看吧补个图
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容