vue/uniapp中,这样的页面你们会怎么写?

作者站长头像
站长
· 阅读数 7

vue/uniapp中,这样的页面你们会怎么写?

vue/uniapp中,这样的页面你们会怎么写?

vue/uniapp中,这样的页面你们会怎么写?

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个回答
avatar
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 自己看吧补个图answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容