huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style:金币管理的样式基本完成

zhangyong/milestone-20250913-现金管理
zhangrenyuan 2 months ago
parent
69121f81b9
commit
df6f5bb12d
6 changed files with 106 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      src/views/history/newHistory.vue
  2. 45
      src/views/history/oldHistory.vue
  3. 1
      src/views/home.vue
  4. 5
      src/views/refund/gold/coinRefundDetail.vue
  5. 15
      src/views/usergold/bean/userbean.vue
  6. 14
      src/views/usergold/gold/clientCountDetail.vue

45
src/views/history/newHistory.vue
View File

@ -1,5 +1,5 @@
<template>
<el-card>
<el-card class="card1">
<el-text size="large">姓名：</el-text>
<el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 12vw;margin-right:1vw"
clearable></el-input>
@ -16,7 +16,7 @@
<el-button type="success" @click="resetSearch">重置</el-button>
</el-card>
<el-card style="margin-top:10px" v-show="tableData.length > 0">
<el-card class="card2" style="margin-top:10px" v-show="tableData.length > 0">
<el-table :data="tableData" style="width: 82vw;height:60vh">
<el-table-column type="index" label="序号" width="100" header-align="center" align="center">
<template #default="scope">
@ -116,4 +116,43 @@ const handleCurrentChange = function (val) {
}
</script>
<style scoped></style>
<style scoped lang="scss">
.pagination {
display: flex;
margin-top: 1vh;
}
// 搜索的卡片样式
.card1 {
background: #F3FAFE;
}
// 表单的卡片样式
.card2 {
background: #E7F4FD;
}
// 表头背景等
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
/* 表格 */
:deep(.el-table__body td) {
background-color: #F3FAFE !important;
}
/* 表头 */
:deep(.el-table__header th) {
background-color: #F3FAFE !important;
}
/* 鼠标悬停 */
:deep(.el-table__row:hover > .el-table__cell) {
background-color: #E5EBFE !important;
}
</style>

45
src/views/history/oldHistory.vue
View File

@ -1,5 +1,5 @@
<template>
<el-card>
<el-card class="card1">
<el-text size="large">姓名：</el-text>
<el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 12vw;margin-right:1vw"
clearable></el-input>
@ -16,7 +16,7 @@
<el-button type="success" @click="resetSearch">重置</el-button>
</el-card>
<el-card style="margin-top:10px" v-show="tableData.length > 0">
<el-card class="card2" style="margin-top:10px" v-show="tableData.length > 0">
<el-table :data="tableData" style="width: 82vw;height:60vh">
<el-table-column type="index" label="序号" width="100" header-align="center" align="center">
<template #default="scope">
@ -114,4 +114,43 @@ const handleCurrentChange = function (val) {
}
</script>
<style scoped></style>
<style scoped lang="scss">
.pagination {
display: flex;
margin-top: 1vh;
}
// 搜索的卡片样式
.card1 {
background: #F3FAFE;
}
// 表单的卡片样式
.card2 {
background: #E7F4FD;
}
// 表头背景等
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
/* 表格 */
:deep(.el-table__body td) {
background-color: #F3FAFE !important;
}
/* 表头 */
:deep(.el-table__header th) {
background-color: #F3FAFE !important;
}
/* 鼠标悬停 */
:deep(.el-table__row:hover > .el-table__cell) {
background-color: #E5EBFE !important;
}
</style>

1
src/views/home.vue
View File

@ -180,6 +180,7 @@ function logout() {
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refreshData()">数据刷新</el-dropdown-item>
<el-dropdown-item @click="message()">查看个人信息</el-dropdown-item>
<el-dropdown-item @click="openChangePassword">修改密码</el-dropdown-item>
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>

5
src/views/refund/gold/coinRefundDetail.vue
View File

@ -566,8 +566,8 @@ const getMarket = async function () {
任务金币：{{ format3(Math.abs(taskGolds).toFixed(2)) }}
</div>
<!-- 设置表格容器的高度和滚动样式 -->
<div style="height: 58vh; overflow-y: auto;">
<el-table :data="tableData" style="width: 82vw;" @sort-change="handleSortChange">
<div style="height: 58vh; ">
<el-table :data="tableData" style="height: 57vh" @sort-change="handleSortChange">
<el-table-column type="index" label="序号" width="80px" fixed="left">
<template #default="scope">
<span>{{
@ -580,7 +580,6 @@ const getMarket = async function () {
<el-table-column prop="jwcode" label="精网号" fixed="left" width="110px" />
<el-table-column prop="market" label="所属地区" width="110px" />
<el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
<el-table-column prop="goodsName" label="商品名称" width="110px" show-overflow-tooltip />
<el-table-column prop="refundType" label="退款类型" width="100px" />
<el-table-column prop="refundModel" label="退款方式" width="110px">

15
src/views/usergold/bean/userbean.vue
View File

@ -21,7 +21,7 @@
消费金豆总数：{{ format3(stats.consumeSum) }}金豆&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<el-table :data="tableData" height="65vh" @sort-change="handleSortChange" :row-style="{ height: '60px' }">
<el-table-column type="index" label="序号" width="100px" fixed="left">
<el-table-column type="index" label="序号" width="80px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize
@ -29,7 +29,7 @@
</template>
</el-table-column>
<el-table-column label="姓名" style="width: 120px;" prop="name" show-overflow-tooltip />
<el-table-column label="精网号" style="width: 120px;" prop="jwcode" />
<el-table-column label="精网号" style="width: 110px;" prop="jwcode" />
<el-table-column label="所属地区" style="width: 120px;" prop="dept" />
<el-table-column label="现有金豆" style="width: 120px;" prop="beanNum" sortable="custom" />
<el-table-column label="免费金豆" style="width: 120px;" prop="freeBean" sortable="custom" />
@ -37,10 +37,13 @@
<el-table-column label="历史消费" style="width: 120px;" prop="totalCostBean" sortable="custom" />
</el-table>
<el-pagination class="pagination" v-model:current-page="pagination.pageNum"
v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
<div class="pagination">
<el-pagination background v-model:current-page="pagination.pageNum"
v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div>
</el-card>
</template>

14
src/views/usergold/gold/clientCountDetail.vue
View File

@ -527,9 +527,9 @@ const format3 = (num) => {
任务金币：{{ format3(totalTaskGold || 0) }}&nbsp;&nbsp;
<a style="color:#b1b1b1; font-size: small;">当前合计仅显示筛选范围内的金币净变化（充值总额 - 消费总额 + 退款总额)</a>
</div>
<div style="height: 55vh; overflow-y: auto">
<el-table :data="tableData" style="width: 82vw" @sort-change="handleSortChange" height="55vh">
<el-table-column type="index" label="序号" width="100px" fixed="left">
<div style="height: 58vh; ">
<el-table :data="tableData" style="height: 57vh" @sort-change="handleSortChange" >
<el-table-column type="index" label="序号" width="80px" fixed="left">
<template #default="scope">
<span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
@ -582,7 +582,7 @@ const format3 = (num) => {
</div>
<!-- 此处分页 -->
<div class="pagination" style="margin-top: 20px;display: flex;">
<div class="pagination" >
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
@ -624,6 +624,12 @@ const format3 = (num) => {
</template>
<style scoped lang="scss">
.pagination {
display: flex;
margin-top: 1vh;
}
// 搜索的卡片样式
.card1 {
background: #F3FAFE;

Write Preview
Loading…
Cancel
Save