当前位置：首页 > news >正文

uniapp+vue3表格样式

news 2025/7/1 16:22:19

在这里插入图片描述

<view class="tableMain" v-if="state.use_scope==2"><view class="tableBox"><view class="th"><view class="col">站点名称</view><view class="col">站点状态</view><view class="col">操作</view></view><view class="row" v-for="(item,index) in 2" :key="index"><view class="rowWidth name">昆山站点撒恐龙当家昆山站点撒恐龙当家昆山站点撒恐龙当家昆山站点撒恐龙当家</view><view class="rowWidth status">正常</view><view class="rowWidth del">删除</view></view></view><view class="addSite" @click="addSite">+追加</view>
</view>

// 表格
.tableMain {.tableBox {margin: 0 30rpx 30rpx;border: 1rpx solid #EAEAEA;border-radius: 10rpx;.th {background-color: #F7F9FF;font-weight: bold;font-size: 26rpx;color: #3D3D3D;display: flex;align-items: center;text-align: center;.col {padding: 23rpx 0;flex: 1;border-right: 1rpx solid #EAEAEA;}}.row {display: flex;align-items: center;font-size: 22rpx;font-weight: bold;border-top: 1rpx solid #EAEAEA;text-align: center;.rowWidth {padding: 23rpx 0;flex: 1;flex-shrink: 0;border-right: 1rpx solid #EAEAEA;}.name {color: #606266;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.status {color: #71C441;}.del {color: #FF2B0A;}}}.addSite {width: 200rpx;height: 68rpx;border-radius: 10rpx;margin: 10rpx auto 30rpx;background: rgba(24, 77, 255, 0.1);border: 2rpx solid #184DFF;font-size: 28rpx;color: #184DFF;display: flex;justify-content: center;align-items: center;}
}