小程序适配
This commit is contained in:
@@ -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>
|
||||
{{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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user