小程序适配

This commit is contained in:
duan
2024-10-29 15:46:53 +08:00
parent a747dba877
commit 764c9461ae
19 changed files with 478 additions and 275 deletions

View File

@@ -59,15 +59,15 @@
</view>
</view>
<view class="table-scroll">
<table cellspacing="0">
<thead>
<!-- <table class="table" cellspacing="0">
<thead class="thead">
<tr style="background-color: #aebad2;color: #fff;" height='41'>
<th style="width: 540rpx;">商品名称</th>
<th style="width: 215rpx;">总数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tbody class="tbody">
<tr v-for="(item,index) in tableList" :key="item.productId">
<td style="width: 500rpx;padding-left: 16rpx;">
<image v-if="index==0" src="../pageTable/index/images/1.png" style="width: 22rpx;height: 30rpx;"
@@ -84,6 +84,39 @@
</tr>
</tbody>
</table>
-->
<template>
<view class="color-333 u-font-28 bg-gray default-box-padding" style="padding-top:80px;">
<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
<view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
<view class="constantbox">
<view class="constantboxitem">
<view class="head">商品名称</view>
<view class="head">总数量</view>
<view class="head">金额</view>
</view>
<view class="constantboxitem" v-for="(item,index) in tableList" :key="index"
@click="toDetail(item)">
<view class="head" style="padding-left: 16rpx;">
<image v-if="index==0" src="../pageTable/index/images/1.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<image v-else-if="index==1" src="../pageTable/index/images/2.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<image v-else-if="index==2" src="../pageTable/index/images/3.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
&nbsp;&nbsp;{{item.productName}}
</view>
<view class="head">{{item.num}}</view>
<view class="head">{{item.salesAmount || '无'}}</view>
</view>
</view>
</view>
</scroll-view>
<!-- <view style="height: 100px;"></view> -->
</view>
</template>
</view>
<view class="bottombtn" @tap="toUrl">
更多 <uni-icons type="right" size="16"></uni-icons>
@@ -182,7 +215,7 @@
}
function changeTime(e) {
selected.value = e
if (e == 'custom') {
currentInstance.ctx.$refs.datePicker.toggle()
@@ -243,6 +276,71 @@
background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.fixed-top {
padding: 32rpx 28rpx;
z-index: 100;
}
.bottom {
background-color: transparent;
bottom: 84rpx;
left: 28rpx;
right: 28rpx;
}
.table {
border-radius: 12rpx 12rpx 0rpx 0rpx;
overflow: hidden;
font-size: 24rpx;
.constantbox {
.constantboxitem {
display: flex;
.head {
width: 220rpx;
padding: 32rpx 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.head:nth-child(4) {
width: 300rpx;
}
.head:nth-child(5) {
width: 300rpx;
}
}
.constantboxitem:nth-child(even) {
background: #fff;
}
.constantboxitem:nth-child(odd) {
background: #F7F6FB;
}
.constantboxitem:nth-child(1) {
background: #AEBAD2;
color: #fff;
font-size: 24rpx;
}
}
.item:nth-of-type(2n+1) {
background-color: rgb(249, 249, 249);
}
}
</style>
<style scoped lang="less">
.time-wrapper {
display: flex;
@@ -309,18 +407,18 @@
}
.table-scroll table {
.table-scroll .table {
table-layout: fixed;
// width: calc(100% - 10rpx);
}
.table-scroll thead {
.table-scroll .thead {
display: table-row;
background-color: bisque;
font-size: 24rpx;
}
.table-scroll tbody {
.table-scroll .tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
@@ -329,15 +427,15 @@
// width: calc(100% );
}
.table-scroll th,
td {
height: 82rpx;
overflow: hidden;
text-overflow: ellipsis;
width: 250rpx;
// border: 0.7rpx solid red;
border: 0.7rpx solid rgba(126, 155, 212, 0.27);
}
// .table-scroll th,
// td {
// height: 82rpx;
// overflow: hidden;
// text-overflow: ellipsis;
// width: 250rpx;
// // border: 0.7rpx solid red;
// border: 0.7rpx solid rgba(126, 155, 212, 0.27);
// }
.bottombtn {
width: 694rpx;
@@ -354,4 +452,9 @@
display: flex;
align-items: center;
}
</style>
<style>
.min-page{
height: 20vh;
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<view class="table-scroll">
<!-- <view class="table-scroll">
<table cellspacing="0">
<thead>
<tr style="background-color: #aebad2;color: #fff;" height='41'>
@@ -16,7 +16,29 @@
</tr>
</tbody>
</table>
</view>
</view> -->
<template>
<view class="color-333 u-font-28 bg-gray default-box-padding" >
<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
<view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
<view class="constantbox">
<view class="constantboxitem">
<view class="head">商品名称</view>
<view class="head">总数量</view>
<view class="head">金额</view>
</view>
<view class="constantboxitem" v-for="(item,index) in tableList" :key="index"
@click="toDetail(item)">
<view class="head">{{item.productName}}</view>
<view class="head">{{item.num}}</view>
<view class="head">{{item.salesAmount || '无'}}</view>
</view>
</view>
</view>
</scroll-view>
<!-- <view style="height: 100px;"></view> -->
</view>
</template>
</template>
<script setup>
@@ -86,4 +108,68 @@
width: 250rpx;
border: 0.7rpx solid rgba(126, 155, 212, 0.27);
}
</style>
</style>
<style lang="scss" scoped>
.fixed-top {
padding: 32rpx 28rpx;
z-index: 100;
}
.bottom {
background-color: transparent;
bottom: 84rpx;
left: 28rpx;
right: 28rpx;
}
.table {
border-radius: 12rpx 12rpx 0rpx 0rpx;
overflow: hidden;
font-size: 24rpx;
.constantbox {
.constantboxitem {
display: flex;
.head {
width: 220rpx;
padding: 32rpx 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.head:nth-child(4) {
width: 300rpx;
}
.head:nth-child(5) {
width: 300rpx;
}
}
.constantboxitem:nth-child(even) {
background: #fff;
}
.constantboxitem:nth-child(odd) {
background: #F7F6FB;
}
.constantboxitem:nth-child(1) {
background: #AEBAD2;
color: #fff;
font-size: 24rpx;
}
}
.item:nth-of-type(2n+1) {
background-color: rgb(249, 249, 249);
}
}
</style>