czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

同步代码

Browse Source
This commit is contained in:
GaoHao
2025-02-07 14:49:20 +08:00
commit 0740c3f349
1141 changed files with 167372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

448
pageSalesSummary/components/my-date-pickerview.vue Normal file
View File

@@ -0,0 +1,448 @@
<template>
<view class="mask" v-if="show" @tap="close">
<view class="box" @tap.stop="nullFunction">
<view class="u-flex u-relative u-row-center u-p-30 top">
<view class="font-bold u-font-32">筛选日期时间</view>
<view class="close" @tap="close">
<uni-icons type="closeempty" size="24"></uni-icons>
</view>
</view>
<!-- <view class="u-p-30 u-flex u-flex-wrap gap-20 fastTime">
<view class="item" v-for="(item,index) in fastTime" :key="index" @tap="changeTime(item.key)">
{{item.title}}
</view>
</view> -->
<picker-view :immediate-change="true" @pickend="pickend" :value="value" @change="bindChange"
class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
<!-- <picker-view-column>
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
</picker-view-column> -->
</picker-view>
<view class="u-text-center color-999">至</view>
<picker-view :immediate-change="true" :value="value1" @pickend="pickend1" @change="bindChange1"
class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in days1" :key="index">{{item}}日</view>
</picker-view-column>
<!-- <picker-view-column>
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
</picker-view-column> -->
</picker-view>
<!-- 站位 -->
<view style="height: 80px;"></view>
<view class="fixed_b">
<my-button shape="circle" @tap="confirm">确定</my-button>
</view>
</view>
</view>
</template>
<script setup>
import myButton from "@/components/my-components/my-button.vue"
import {
reactive,
ref
} from 'vue';
const $nowDate = new Date()
const nowDate = {
year: $nowDate.getFullYear(),
month: $nowDate.getMonth() + 1,
day: $nowDate.getDate(),
hours: $nowDate.getHours(),
minutes: $nowDate.getMinutes(),
seconds: $nowDate.getSeconds()
}
const yearsLen = 30
const years = new Array(yearsLen).fill(1).map((v, index) => {
return nowDate.year - index
}).reverse()
const months = new Array(12).fill(1).map((v, index) => {
return index + 1
})
const days = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
return index + 1
}))
const days1 = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
return index + 1
}))
const hours = new Array(24).fill(1).map((v, index) => {
return index
})
const minutes = new Array(60).fill(1).map((v, index) => {
return index
})
const seconds = new Array(60).fill(1).map((v, index) => {
return index
})
const fastTime = reactive([{
title: '今日',
key: 'now'
},
{
title: '昨日',
key: 'prve'
},
{
title: '本月',
key: 'nowMonth'
},
{
title: '上月',
key: 'prveMonth'
}
])
function setPrveDay() {
}
function setNowMoneth() {
}
function setprveMoneth() {
}
function setDay(start, end) {
value.value = [
start.year,
start.month,
start.day,
0,
0,
0,
]
value1.value = [
end.year,
end.month,
end.day,
23,
59,
59,
]
}
function changeTime(key) {
const yearIndex = years.findIndex(v => v == nowDate.year)
const prveyearIndex = years.findIndex(v => v == nowDate.year) - 1
const nowMonthIndex = nowDate.month - 1
const nowDayIndex = nowDate.day - 1
const dataMap = {
now: function() {
return {
start: {
year: yearIndex,
month: nowMonthIndex,
day: nowDayIndex
},
end: {
year: yearIndex,
month: nowMonthIndex,
day: nowDayIndex
}
}
},
prve: function() {
const oneDay=1000*60*60*24
const date=new Date(new Date(nowDate.year,nowDate.month,nowDate.day,0,0,0).getTime()-oneDay)
return {
start: {
year:years.findIndex(v=>v==date.getFullYear()),
month:date.getMonth()-1<0?11:date.getMonth()-1,
day: date.getDate()-1
},
end: {
year:years.findIndex(v=>v==date.getFullYear()),
month:date.getMonth()-1<0?11:date.getMonth()-1,
day: date.getDate()-1
}
}
},
nowMonth: function() {
return {
start: {
year:yearIndex,
month:nowMonthIndex,
day: 0
},
end: {
year:yearIndex,
month:nowMonthIndex,
day:new Date(nowDate.year, nowDate.month , 0).getDate() - 1
}
}
},
prveMonth: function() {
const oneDay=1000*60*60*24
const date=new Date(new Date(nowDate.year, nowDate.month-1,0,0,0).getTime()-oneDay)
console.log(date.getMonth());
return {
start: {
year:years.findIndex(v=>v==date.getFullYear()),
month:date.getMonth(),
day: 0
},
end: {
year:years.findIndex(v=>v==date.getFullYear()),
month:date.getMonth(),
day: date.getDate()
}
}
}
}
const data = dataMap[key]()
setDay(data.start, data.end)
changeDays(false,value.value)
changeDays(true,value1.value)
console.log(value1.value);
const start = returnDateString(value.value)
const end = returnDateString(value1.value)
emits('confirm', {
text: `${start}——${end}`,
start,
end
})
close()
}
let value = ref([
years.length - 1,
nowDate.month - 1,
nowDate.day - 1,
0,
0,
0,
])
let value1 = ref([
years.length - 1,
nowDate.month - 1,
nowDate.day - 1,
23,
59,
59,
])
let show = ref(false)
const emits = defineEmits('close', 'open', 'confirm')
function toggle() {
show.value = !show.value
if (show.value) {
emits('open', true)
} else {
emits('close', false)
}
}
function close() {
show.value = false
emits('close', false)
}
function open() {
show.value = true
emits('open', true)
}
function returnDateString(arr) {
const year = years[arr[0]]
const month = arr[1] + 1
const day = arr[2] + 1
const hour = ('0' + arr[3]).slice(-2)
const min = ('0' + arr[4]).slice(-2)
const sen = ('0' + arr[5]).slice(-2)
return `${year}-${month}-${day} ${hour}:${min}:${sen}`
}
function confirm(e) {
const start = returnDateString(value.value)
const end = returnDateString(value1.value)
console.log(start);
console.log(end);
emits('confirm', {
text: `${start}——${end}`,
start,
end
})
close()
}
function returnMonthStart(arr) {
return new Date(years[arr[0]], months[arr[1]] - 1, 1).getDate();
}
function returnMonthEnd(arr) {
return new Date(years[arr[0]], months[arr[1]], 0).getDate();
}
function changeDays(isDays1,arr){
const end = returnMonthEnd(arr)
if (end) {
if(isDays1){
days1.value= new Array(end).fill(1).map((v,
index) => {
return index + 1
})
}else{
days.value= new Array(end).fill(1).map((v,
index) => {
return index + 1
})
}
}
}
function bindChange(e) {
value.value = e.detail.value
changeDays(false, e.detail.value)
}
function bindChange1(e) {
value1.value = e.detail.value
changeDays(true, e.detail.value)
}
function getDayDate(date = new Date(), type) {
const now = date
if (type === 'start') {
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return startOfDay
}
if (type === 'end') {
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
return endOfDay;
}
}
function getMonthArea(date = new Date(), type) {
let now = date
let currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
let currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
if (type === 'start') {
return currentMonthStart
}
if (type === 'end') {
return currentMonthEnd;
}
return {
start: currentMonthStart,
end: currentMonthEnd
};
}
function nullFunction() {
}
function pickend(e) {
console.log(e);
}
function pickend1(e) {
console.log(e);
}
defineExpose({
close,
open,
confirm,
toggle
})
</script>
<style lang="scss">
.fastTime {
.item {
background-color: rgb(247, 247, 247);
padding: 6rpx 40rpx;
border-radius: 6rpx;
font-size: 32rpx;
}
}
.top {
border-bottom: 1px solid #eee;
}
.close {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30rpx;
}
.mask {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, .7);
.box {
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
border-radius: 16rpx 16rpx 0 0;
}
}
.fixed_b {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 30rpx;
z-index: 100;
background-color: #fff;
}
.picker-view {
width: 750rpx;
height: 300rpx;
}
.item {
line-height: 34px;
text-align: center;
}
</style>

462
pageSalesSummary/index.vue Normal file
View File

@@ -0,0 +1,462 @@
<template>
<view class="time-wrapper">
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
{{v.label}}
</view>
<view class="xian" v-if="v.value==selected "> </view>
</view>
</view>
<view class="pageSalesSummaryContent">
<view class="">
<view class="">
实收金额(元)
</view>
<view class="">
{{list.sale?list.sale.incomeAmountAll:0}}
</view>
</view>
<view class="">
<view class="">
优惠金额(元)
</view>
<view class="">
{{list.count?list.count.saveAmount:0}}
</view>
</view>
<view class="">
<view class="">
客单价(元)
</view>
<view class="">
{{list.count?list.count.unitPrice:0}}
</view>
</view>
<view class="">
<view class="">
会员消费(元)
</view>
<view class="">
{{list.vip?list.vip.useAmount:0}}
</view>
</view>
<view class="">
<view class="">
新增会员(人)
</view>
<view class="">
{{list.vip?list.vip.newFlow:0}}
</view>
</view>
<view class="">
<view class="">
翻台率(%)
</view>
<view class="">
{{list.count?list.count.turnoverRate:0}}
</view>
</view>
</view>
<view class="table-scroll">
<!-- <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 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;"
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>
<span v-else>{{index}}</span>
&nbsp;&nbsp;{{item.productName}}
</td>
<td style="padding-left: 16rpx;">{{item.num}}</td>
<td style="padding-left: 16rpx;">{{item.salesAmount}}</td>
</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>
</view>
<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
</template>
<script setup>
import datePickerview from './components/my-date-pickerview.vue'
import {
summaryTrade,
dateProduct
} from '@/http/yskApi/requestAll.js';
import {
onMounted,
getCurrentInstance,
ref
} from 'vue';
import dayjs from 'dayjs' //时间格式库
import go from '@/commons/utils/go.js'
const timeList = [{
label: '今天',
value: 'today'
},
{
label: '昨天',
value: 'yesterday'
},
{
label: '本周',
value: 'circumference'
}, {
label: '本月',
value: 'moon'
},
{
label: '自定义',
value: 'custom'
}
]
let selected = ref('today')
let list = ref([])
const currentInstance = getCurrentInstance()
let tableList = ref([])
let day = ref(1)
function toUrl() {
go.to('PAGES_PRODUCT_SALES_RANKING', {
day: day.value
})
}
function getlist(start, end) {
let startTime, endTime;
if (selected.value == 'today') {
startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
} else if (selected.value == 'yesterday') {
startTime = formatTime() + ' 00:00:00'
endTime = formatTime() + ' 23:59:59'
} else if (selected.value == 'circumference') {
var now = new Date();
var nowTime = now.getTime();
var day = now.getDay();
var oneDayTime = 24 * 60 * 60 * 1000;
//显示周一
var MondayTime = nowTime - (day - 1) * oneDayTime;
//显示周日
var SundayTime = nowTime + (7 - day) * oneDayTime;
startTime = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
endTime = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
} else if (selected.value == 'moon') {
startTime = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
endTime = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
} else if (selected.value == 'custom') {
let s = start.substring(0, start.indexOf(' '))
let e = end.substring(0, end.indexOf(' '))
startTime = s + ' 00:00:00'
endTime = e + ' 23:59:59'
}
summaryTrade({
shopId: uni.getStorageSync('shopId'),
startTime,
endTime,
}).then((res) => {
list.value = res
})
}
onMounted(() => {
getlist()
gettableData()
})
function datePickerConfirm(e) {
getlist(e.start, e.end)
// gettableData() day如日期不能是1 7 30 就回报错
}
function changeTime(e) {
selected.value = e
if (e == 'custom') {
currentInstance.ctx.$refs.datePicker.toggle()
} else {
getlist()
gettableData()
}
}
// 获取表格数据
function gettableData() {
if (selected.value == 'today') {
day.value = 1
} else if (selected.value == 'yesterday') {
day.value = 1
} else if (selected.value == 'circumference') {
day.value = 7
} else if (selected.value == 'moon') {
day.value = 30
} else if (selected.value == 'custom') {
day.value = 30
}
dateProduct({
shopId: uni.getStorageSync('shopId'),
day: day.value,
page: 0,
size: 5
}).then((res) => {
tableList.value = res.productList.content
})
}
// 获取当前时间
function getdate() {
const dt = new Date();
const y = dt.getFullYear();
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
const d = (dt.getDate() + "").padStart(2, "0");
const hh = (dt.getHours() + "").padStart(2, "0");
const mm = (dt.getMinutes() + "").padStart(2, "0");
const ss = (dt.getSeconds() + "").padStart(2, "0");
return `${y}-${m}-${d}`;
}
// 获取昨天时间
const formatTime = () => {
let strDate = getdate()
let dateFormat = new Date(strDate);
dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
dateFormat = new Date(dateFormat);
let y = dateFormat.getFullYear()
let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
let d = dateFormat.getDate().toString().padStart(2, '0')
return `${y}-${m}-${d}`
}
</script>
<style>
page {
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;
justify-content: space-around;
padding-bottom: 16rpx;
padding-top: 16rpx;
background-color: #fff;
.timelistbox {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.time-item {
font-size: 28rpx;
text-align: center;
padding-bottom: 10rpx;
}
.xian {
width: 40rpx;
height: 3rpx;
background-color: #318AFE;
// position: absolute;
// left: 16rpx;
// bottom: 0;
}
}
.time-selected {
color: #318afe;
font-size: 32rpx !important;
}
}
.pageSalesSummaryContent {
height: 320rpx;
margin: 20rpx 28rpx;
background-image: url('./svg/bgimg.svg');
background-size: 694rpx 320rpx;
padding: 48rpx 28rpx;
.df;
justify-content: space-between;
flex-wrap: wrap;
>view {
padding-right: 52rpx;
color: #fff;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
}
}
// 表格
.table-scroll {
// width: calc(100% - 5px);
overflow-x: scroll;
white-space: nowrap;
margin: 32rpx 28rpx;
margin-right: 30rpx;
border-radius: 30rpx 30rpx 0 0;
}
.table-scroll .table {
table-layout: fixed;
// width: calc(100% - 10rpx);
}
.table-scroll .thead {
display: table-row;
background-color: bisque;
font-size: 24rpx;
}
.table-scroll .tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
// width: 1040rpx;
width: 100%;
// 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);
// }
.bottombtn {
width: 694rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
margin: 0rpx auto;
background: #F1F1F1;
font-size: 24rpx;
border-radius: 0rpx 0rpx 28rpx 28rpx;
}
.df() {
display: flex;
align-items: center;
}
</style>
<style>
.min-page{
height: 20vh;
}
</style>

175
pageSalesSummary/productSalesRanking.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<!-- <view class="table-scroll">
<table cellspacing="0">
<thead>
<tr style="background-color: #aebad2;color: #fff;" height='41'>
<th>商品名称</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableList" :key="item.productId">
<td style="padding-left: 16rpx;">{{item.productName}}</td>
<td style="padding-left: 16rpx;">{{item.num}}</td>
<td style="padding-left: 16rpx;">{{item.salesAmount}}</td>
</tr>
</tbody>
</table>
</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>
import {
onMounted,
ref
} from 'vue';
import {
summaryTrade,
dateProduct
} from '@/http/yskApi/requestAll.js';
let tableList = ref([])
let props = defineProps({
day: {
type: Number
}
})
onMounted(() => {
gettableData()
})
// 获取表格数据
function gettableData() {
dateProduct({
shopId: uni.getStorageSync('shopId'),
day: props.day,
page: 0,
size: 50
}).then((res) => {
tableList.value = res.productList.content
})
}
</script>
<style>
.table-scroll {
overflow-x: scroll;
white-space: nowrap;
margin: 32rpx 28rpx;
margin-right: 30rpx;
border-radius: 30rpx 30rpx 0 0;
}
.table-scroll table {
table-layout: fixed;
}
.table-scroll thead {
display: table-row;
background-color: bisque;
font-size: 24rpx;
}
.table-scroll tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
width: 100%;
}
.table-scroll th,
td {
height: 82rpx;
overflow: hidden;
text-overflow: ellipsis;
width: 250rpx;
border: 0.7rpx solid rgba(126, 155, 212, 0.27);
}
</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>

80
pageSalesSummary/svg/bgimg.svg Normal file
View File

@@ -0,0 +1,80 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="347" height="160" viewBox="0 0 347 160">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16626" data-name="矩形 16626" width="347" height="160" rx="6" transform="translate(-9146 18040)" fill="#7a8999"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.449" y1="-0.022" x2="0.774" y2="1.011" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#449eff"/>
<stop offset="0" stop-color="#469fff" stop-opacity="0.996"/>
<stop offset="1" stop-color="#b5caf9" stop-opacity="0.851"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-0.101" y1="-0.308" x2="0.782" y2="0.948" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#449eff"/>
<stop offset="0.455" stop-color="#79b6fe"/>
<stop offset="1" stop-color="#8bb5fa"/>
</linearGradient>
<filter id="交叉_21" x="259" y="-35" width="133" height="135" filterUnits="userSpaceOnUse">
<feOffset dy="10" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="15" result="blur"/>
<feFlood flood-color="#5c70f8" flood-opacity="0.204"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<clipPath id="clip-path-2">
<rect id="矩形_16186" data-name="矩形 16186" width="347" height="106" transform="translate(14 250)" fill="#fff" stroke="#707070" stroke-width="1"/>
</clipPath>
<filter id="路径_9826" x="-1.906" y="56.99" width="351.111" height="69.518" filterUnits="userSpaceOnUse">
<feOffset dy="2" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="0.5" result="blur-2"/>
<feFlood flood-color="#ebd2d2" flood-opacity="0.169"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<linearGradient id="linear-gradient-3" x1="0.494" y1="0.679" x2="0.5" y2="-0.811" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="0.288" stop-color="#fff" stop-opacity="0"/>
<stop offset="0.663" stop-color="#fff"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
<filter id="路径_9827" x="-4.805" y="57" width="353.304" height="164.295" filterUnits="userSpaceOnUse">
<feOffset dy="1" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="0.5" result="blur-3"/>
<feFlood flood-color="#ff4d4d" flood-opacity="0.161"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="蒙版组_1155" data-name="蒙版组 1155" transform="translate(9146 -18040)" clip-path="url(#clip-path)">
<rect id="矩形_1403" data-name="矩形 1403" width="347" height="160" rx="6" transform="translate(-9146 18040)" fill="url(#linear-gradient)"/>
<g id="组_1622" data-name="组 1622" transform="translate(-9146 18056.176)">
<circle id="椭圆_11" data-name="椭圆 11" cx="2.5" cy="2.5" r="2.5" transform="translate(0 -0.176)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_22" data-name="椭圆 22" cx="2.5" cy="2.5" r="2.5" transform="translate(0 12.824)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_28" data-name="椭圆 28" cx="2.5" cy="2.5" r="2.5" transform="translate(0 25.824)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_12" data-name="椭圆 12" cx="2.5" cy="2.5" r="2.5" transform="translate(13 -0.176)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_21" data-name="椭圆 21" cx="2.5" cy="2.5" r="2.5" transform="translate(13 12.824)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_27" data-name="椭圆 27" cx="2.5" cy="2.5" r="2.5" transform="translate(13 25.824)" fill="#fff" opacity="0.093"/>
<circle id="椭圆_13" data-name="椭圆 13" cx="2.5" cy="2.5" r="2.5" transform="translate(26 -0.176)" fill="#fff" opacity="0.059"/>
<circle id="椭圆_20" data-name="椭圆 20" cx="2.5" cy="2.5" r="2.5" transform="translate(26 12.824)" fill="#fff" opacity="0.059"/>
<circle id="椭圆_26" data-name="椭圆 26" cx="2.5" cy="2.5" r="2.5" transform="translate(26 25.824)" fill="#fff" opacity="0.059"/>
<circle id="椭圆_14" data-name="椭圆 14" cx="2.5" cy="2.5" r="2.5" transform="translate(39 -0.176)" fill="#fff" opacity="0.04"/>
<circle id="椭圆_19" data-name="椭圆 19" cx="2.5" cy="2.5" r="2.5" transform="translate(39 12.824)" fill="#fff" opacity="0.04"/>
<circle id="椭圆_25" data-name="椭圆 25" cx="2.5" cy="2.5" r="2.5" transform="translate(39 25.824)" fill="#fff" opacity="0.04"/>
<circle id="椭圆_15" data-name="椭圆 15" cx="2.5" cy="2.5" r="2.5" transform="translate(52 -0.176)" fill="#fff" opacity="0.018"/>
<circle id="椭圆_18" data-name="椭圆 18" cx="2.5" cy="2.5" r="2.5" transform="translate(52 12.824)" fill="#fff" opacity="0.018"/>
<circle id="椭圆_24" data-name="椭圆 24" cx="2.5" cy="2.5" r="2.5" transform="translate(52 25.824)" fill="#fff" opacity="0.018"/>
</g>
<g transform="matrix(1, 0, 0, 1, -9146, 18040)" filter="url(#交叉_21)">
<path id="交叉_21-2" data-name="交叉 21" d="M304,28a27.877,27.877,0,0,1,5.75-17H341a6,6,0,0,1,6,6V51.647A28,28,0,0,1,304,28Z" transform="translate(0 -11)" fill="url(#linear-gradient-2)"/>
</g>
<g id="蒙版组_907" data-name="蒙版组 907" transform="translate(-9160 17844)" clip-path="url(#clip-path-2)">
<g id="组_16894" data-name="组 16894" transform="translate(-196.193 -86.495)">
<g transform="matrix(1, 0, 0, 1, 210.19, 282.5)" filter="url(#路径_9826)">
<path id="路径_9826-2" data-name="路径 9826" d="M208.52,385.434s39.063-63.028,91.077,0c0,0,16.463,19.137,46.725,19.561,24.33.341,47.329-12.3,63.147-33.292,19.168-25.44,60.676-62.291,105.343,13.423,4.4,7.467,11.032,13.049,18.785,14.856,6.629,1.546,14.526.594,21.641-7.675" transform="translate(-208.24 -282.5)" fill="none" stroke="rgba(255,255,255,0.21)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
</g>
<g transform="matrix(1, 0, 0, 1, 210.19, 282.5)" filter="url(#路径_9827)">
<path id="路径_9827-2" data-name="路径 9827" d="M206.889,483.334l3.366-98.808s38.321-62.12,90.5.908c0,0,16.512,19.137,46.871,19.561,24.405.341,47.475-12.3,63.342-33.292,19.229-25.44,60.868-62.291,105.675,13.423,4.417,7.467,11.067,13.049,18.842,14.856,6.652,1.546,14.573.594,21.71-7.675l-2.5,96.286c-7.139,8.269-15.058,9.221-21.71,7.675-7.777-1.81-14.427-7.39-18.844-14.856C469.334,405.7,427.7,442.55,408.466,467.99c-15.867,20.992-38.939,33.632-63.344,33.292-30.358-.424-46.871-19.561-46.871-19.561-52.177-63.028-88-5.531-88-5.531" transform="translate(-210.19 -282.5)" fill="url(#linear-gradient-3)"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB