目录
- 实例1：源码如下
- 实例2：实战1：图片如下
- 实例2：实战1：源码如下
- 实例3：实战2：图片如下
- 实例3：实战2：源码如下
- 最后
适用于所有前端，用uniapp写的
实例1：源码如下
<template>
<view class="content">
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === '正常' }" @click="changeTab('正常')">
正常：50/人
</view>
<view class="tab-item" :class="{ active: currentTab === '不活跃' }" @click="changeTab('不活跃')">
不活跃：1/人
</view>
<!-- <view class="tab-item" :class="{ active: currentTab === '正常' }" @click="changeTab('正常')">
<view :class="{ bottomline: currentTab === '互转' }">正常：50/人</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '不活跃' }" @click="changeTab('不活跃')">
<view :class="{ bottomline: currentTab === '互转' }">不活跃：1/人</view>
</view> -->
</view>
<view class="list-container">
<view v-if="currentTab === '正常'">
<view class="list-item" v-if="tableData.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in tableData" :key="index" v-else>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '不活跃'">
<view class="list-item" v-if="tableData.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in tableData" :key="index" v-else>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: '正常',
// 从服务器获取全部数据
tableData: []
}
},
mounted() {
this.getListData();
},
methods: {
// 切换 Tab 标签后进行不同的逻辑判断
changeTab(tab) {
this.currentTab = tab;
this.tableData = []; // 从服务器获取全部数据
if (this.currentTab === '正常') {
this.getListData(0); //调用接口里面传type参数： 0：活跃 10：不活跃
} else if (this.currentTab === '不活跃') {
this.getListData(10);
}
},
// 从服务器获取全部数据
getListData(_type = 0) {
let self = this;
uni.showLoading({
title: '加载中'
});
self._post(
'user.user/treeList', {
type: _type
},
function(res) {
self.tableData = res.data.agent_list;
// console.log(res.data.agent_list,'resss');
}
);
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
}
.tab-container {
display: flex;
}
/* 默认样式 tab标题 默认 样式*/
.tab-item {
font-size: 28rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
/* 选中样式 tab标题 选中 样式*/
.tab-item.active {
font-size: 28rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #891F50;
line-height: 52rpx;
}
.bottomline {
border-bottom: 1rpx solid blue;
}
</style>
实例2：实战1：图片如下
实例2：实战1：源码如下
<template>
<view class="container">
<!-- 标题 -->
<view class="title">资产</view>
<!-- 矩形框 -->
<view class="box-container">
<view class="box">
<view>
<view class="box-title">购物积分</view>
<view class="box-moeny">
<view class="box-value">${{ shoppingPoints }}</view>
<view class="box-gap">≈</view>
<view class="box-change">￥{{ exchangeMoney }}</view>
</view>
</view>
</view>
<view class="box tops">
<view>
<view class="box-title">现金积分</view>
<view class="box-moeny">
<view class="box-value">${{ moneyPoints }}</view>
<view class="box-gap">≈</view>
<view class="box-change">￥{{ cashExchange }}</view>
</view>
</view>
<view>
<view class="box-get" @click="goToDetail">互转/兑换/提现</view>
</view>
</view>
</view>
<!-- Tab标签切换 -->
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === '全部' }" @click="changeTab('全部')">
<view :class="{ bottomline: currentTab === '全部' }">全部</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '推荐' }" @click="changeTab('推荐')">
<view :class="{ bottomline: currentTab === '推荐' }">推荐</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '领导' }" @click="changeTab('领导')">
<view :class="{ bottomline: currentTab === '领导' }">领导</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '扩展' }" @click="changeTab('扩展')">
<view :class="{ bottomline: currentTab === '扩展' }">扩展</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '升星' }" @click="changeTab('升星')">
<view :class="{ bottomline: currentTab === '升星' }">升星</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '分红' }" @click="changeTab('分红')">
<view :class="{ bottomline: currentTab === '分红' }">分红</view>
</view>
</view>
<!-- 列表展示 -->
<view class="list-container">
<view v-if="currentTab === '全部'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">${{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '推荐'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '领导'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '扩展'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '升星'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '分红'">
<view class="list-item" v-if="listDataAll.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">收入</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: '全部', // 当前选中的Tab标签
// 从服务器获取全部数据
listDataAll: [],
// 购物积分美元
shoppingPoints: 0,
// 购物积分人民币
exchangeMoney: 0,
// 现金积分美元
moneyPoints: 0,
// 现金积分兑换美元
cashExchange: 0,
}
},
// 获取初始数据
mounted() {
this.getCurrentMoney();
this.fetchData();
},
methods: {
// 切换 Tab 标签后进行不同的逻辑判断
changeTab(tab) {
this.currentTab = tab;
this.listDataAll = [];
if (this.currentTab === '全部') {
this.fetchData(0);
} else if (this.currentTab === '推荐') {
this.fetchData(10);
} else if (this.currentTab === '领导') {
this.fetchData(20);
} else if (this.currentTab === '扩展') {
this.fetchData(30);
} else if (this.currentTab === '升星') {
this.fetchData(60);
} else if (this.currentTab === '分红') {
this.fetchData(70);
}
},
// 跳转到积分兑换
goToDetail() {
uni.navigateTo({
url: './list/list'
});
},
// 获取实时汇率以及显示内容
getCurrentMoney() {
let self = this;
uni.request({
url: 'https://vtlte.yunjingwl.com/index.php/api/settings/getExchange',
method: 'POST',
data: {
app_id: this.getAppId(),
},
success: (res) => {
if (res.data && res.statusCode === 200) {
let exchangeRate = res.data.data.exchange_rate;
self._get('user.index/detail', {
url: ''
}, function(res) {
if (res.code == 1) {
self.shoppingPoints = res.data.userInfo.balance;
self.exchangeMoney = Number(String(Number(res.data.userInfo.balance) *
Number(exchangeRate))).toFixed(2);
self.moneyPoints = res.data.userInfo.cash_money;
self.cashExchange = Number(String(Number(res.data.userInfo.cash_money) *
Number(exchangeRate))).toFixed(2);
};
});
} else {
// 请求失败处理
console.error('请求失败', res);
}
},
});
},
// 分类获取积分列表
fetchData(_type = 0) {
uni.request({
url: 'https://vtlte.yunjingwl.com/index.php/api/balance.log/cashBalance',
method: 'POST',
data: {
page: 1,
list_rows: 20,
type: _type,
token: uni.getStorageSync('token') || '',
app_id: this.getAppId(),
},
success: (res) => {
if (res.data && res.statusCode === 200) {
if (res.data.code == 1 && res.data.data.list.data.length > 0) {
this.listDataAll = res.data.data.list.data;
}
} else {
// 请求失败处理
console.error('请求失败', res);
}
},
});
}
},
};
</script>
<style scoped>
.container {
padding: 20rpx;
}
.title {
text-align: center;
font-size: 36rpx;
margin-bottom: 20rpx;
}
.box-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
}
.box-detail {
cursor: pointer
}
.box {
display: flex;
justify-content: space-between;
width: 85%;
padding: 40rpx;
padding-top: 60rpx;
padding-bottom: 60rpx;
background: url('../../static/product/assetspoint.png') no-repeat center center;
background-size: cover;
border-radius: 20rpx;
opacity: 1;
}
.tops {
margin-top: 20rpx;
background: url('../../static/product/moneypoint.png') no-repeat center center;
background-size: cover;
}
.box-title {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #f2f2f2
}
.box-get {
width: 230rpx;
height: 70rpx;
background: #C55287;
font-size: 28rpx;
color: #f2f2f2;
display: flex;
font-weight: bold;
justify-content: center;
align-items: center;
border-radius: 99rpx 99rpx 99rpx 99rpx;
opacity: 1;
}
.box-moeny {
display: flex;
justify-content: space-around;
align-items: center;
}
.box-value {
font-size: 44rpx;
color: #f2f2f2;
font-weight: bold;
}
.box-gap {
font-size: 36rpx;
color: #f2f2f2;
margin-left: 2px;
}
.box-change {
font-size: 36rpx;
color: #f2f2f2;
}
.tab-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 0 auto;
margin-bottom: 20rpx;
}
.tab-item {
text-align: center;
padding: 0rpx;
font-size: 36rpx;
cursor: pointer;
height: 20px;
}
.bottomline {
border-bottom: 6rpx solid #C55287;
}
.list-item {
display: flex;
justify-content: space-evenly;
padding: 10px;
font-size: 28rpx;
border-bottom: 1px solid #891F5050;
}
.list-container {
padding: 20rpx;
background-color: #f2f2f2;
border-radius: 10rpx;
font-size: 16rpx;
}
.left-item,
.right-item {
flex: 1;
}
.right-item {
text-align: right;
}
.amount-inner {
display: flex;
justify-content: start;
align-items: center;
float: right;
}
.income-name {
width:56rpx;
font-weight: bold;
border-bottom: 2px solid #891F50;
}
.reward-reason {
margin-top: 5px;
font-size: 32rpx
}
.time {
font-size: 28rpx;
font-weight: 300;
}
.amount,
.amount-current {
margin-top: 5px;
}
.amount-current {
color: #891F50;
font-size: 32rpx;
font-weight: bold;
}
</style>
实例3：实战2：图片如下
实例3：实战2：源码如下
<template>
<view class="container">
<!-- 标题 -->
<view class="top-stylrify">
<view class="title">
<view class="title-back" @click="backPrivious"><</view>
<view>现金积分</view>
<view></view>
</view>
</view>
<!-- 矩形框 -->
<view class="box-container">
<view class="box tops">
<view>
<view class="box-money">
<view class="box-title">
<text>现金积分</text>
<view class="box-gap">≈</view>
<view class="box-change">￥{{ cashExchange }}</view>
</view>
</view>
<view class="box-value">
<view class="box-value">${{ moneyPoints }}</view>
</view>
</view>
<view>
<view class="inner-change" @click="exchangePoints">兑换</view>
<view class="inner-button">
<view class="inner-button-text" @click="changeToEachOther">互转</view>
<view class="inner-button-text">提现</view>
</view>
</view>
</view>
</view>
<!-- Tab标签切换 -->
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === '互转' }" @click="changeTab('互转')">
<view :class="{ bottomline: currentTab === '互转' }">互转</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '兑换' }" @click="changeTab('兑换')">
<view :class="{ bottomline: currentTab === '兑换' }">兑换</view>
</view>
<view class="tab-item" :class="{ active: currentTab === '提现' }" @click="changeTab('提现')">
<view :class="{ bottomline: currentTab === '提现' }">提现</view>
</view>
</view>
<!-- 列表展示 -->
<view class="list-container">
<view v-if="currentTab === '互转'">
<view class="list-item" v-if="listDataAllDetail.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAllDetail" :key="index" v-else>
<view class="left-item">
<!-- <view class="income-name">{{ item.scene.text }}</view>
<view class="reward-reason">{{ item.describe }}</view> -->
<view class="income-name" v-if="item.scene.value == 80">{{ item.user.account }}</view>
<view class="income-name" v-else-if="item.scene.value == 90">现金积分</view>
<view class="income-name" v-else>{{ item.scene.text }}</view>
<view class="reward-reason" v-if="item.scene.value == 80">{{ item.convertuser.account }}</view>
<view class="income-name" v-else-if="item.scene.value == 90">购物积分</view>
<view class="reward-reason" v-else>{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '兑换'">
<view class="list-item" v-if="listDataAllDetail.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAllDetail" :key="index" v-else>
<view class="left-item">
<!-- <view class="income-name">{{ item.scene.text }}</view>
<view class="reward-reason">{{ item.describe }}</view> -->
<!-- <view class="income-name" v-if="item.scene.value == 80">{{ item.user.account }}</view> -->
<view class="income-name" v-if="item.scene.value == 90">现金积分</view>
<view class="income-name" v-else>{{ item.scene.text }}</view>
<!-- <view class="reward-reason" v-if="item.scene.value == 80">{{ item.convertuser.account }}</view> -->
<view class="income-name" v-if="item.scene.value == 90">购物积分</view>
<view class="reward-reason" v-else>{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === '提现'">
<view class="list-item" v-if="listDataAllMoney.length == 0">
暂无积分明细
</view>
<view class="list-item" v-for="(item, index) in listDataAllMoney" :key="index" v-else>
<img class="inner-card" src="../../../static/product/card.png">
<view class="left-item">
<view class="income-name">{{ item.scene.text }}</view>
<view class="reward-reason">{{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">金额：</view>
<view class="amount-current">{{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
<popup-detail v-if="isPopupVisible" @close="closePopup"></popup-detail>
<popup-exchange-detail v-if="isPopupExchangeVisible" @close="closeDetailPopup"></popup-exchange-detail>
</view>
</template>
<script>
// 引入互转弹出组件
import PopupDetail from '../components/popup/popup.vue';
// 引入兑换弹出组件
import PopupExchangeDetail from '../components/popup/popupexchange.vue'
export default {
data() {
return {
// 当前选中的Tab标签
currentTab: '互转',
// 从服务器获取全部数据
listDataAllDetail: [],
// 从服务器获取提现列表
listDataAllMoney: [],
// 设置互转初始状态为隐藏
isPopupVisible: false,
// 设置兑换初始状态未隐藏
isPopupExchangeVisible: false,
// 购物积分美元
// shoppingPoints: 0,
// 购物积分人民币
// exchangeMoney: 0,
// 现金积分美元
moneyPoints: 0,
// 现金积分兑换美元
cashExchange: 0,
}
},
components: {
'popup-detail': PopupDetail,
'popup-exchange-detail': PopupExchangeDetail
},
// 获取初始数据
mounted() {
this.fetchDetail();
this.fetchCash();
this.getCurrentMoney();
},
methods: {
// 获取实时汇率以及显示内容
getCurrentMoney() {
let self = this;
uni.request({
url: 'https://vtlte.yunjingwl.com/index.php/api/settings/getExchange',
method: 'POST',
data: {
app_id: this.getAppId(),
},
success: (res) => {
if (res.data && res.statusCode === 200) {
let exchangeRate = res.data.data.exchange_rate;
self._get('user.index/detail', {
url: ''
}, function(res) {
if (res.code == 1) {
// self.shoppingPoints = res.data.userInfo.balance;
// self.exchangeMoney = Number(String(Number(res.data.userInfo.balance) *
// Number(exchangeRate))).toFixed(2);
self.moneyPoints = res.data.userInfo.cash_money;
self.cashExchange = Number(String(Number(res.data.userInfo
.cash_money) *
Number(exchangeRate))).toFixed(2);
};
});
} else {
// 请求失败处理
console.error('请求失败', res);
}
},
});
},
// 返回资产页面
backPrivious() {
uni.navigateBack({
delta: 1
});
},
// 点击兑换后弹出组件
exchangePoints() {
this.isPopupExchangeVisible = true;
},
// 点击互转后弹出组件
changeToEachOther() {
this.isPopupVisible = true;
},
// 切换 Tab 标签后进行不同的逻辑判断
changeTab(tab) {
this.currentTab = tab;
this.listDataAllDetail = [];
if (this.currentTab === '互转') {
this.fetchDetail(80)
} else if (this.currentTab === '兑换') {
this.fetchDetail(90)
} else if (this.currentTab === '提现') {
this.fetchCash()
}
},
// 获取互转和兑换记录
fetchDetail(_type = 80) {
uni.request({
url: 'https://vtlte.yunjingwl.com/index.php/api/balance.log/cashBalance',
method: 'POST',
data: {
page: 1,
list_rows: 20,
type: _type,
token: uni.getStorageSync('token') || '',
app_id: this.getAppId(),
},
success: (res) => {
if (res.data && res.statusCode === 200) {
if (res.data.code == 1) {
this.listDataAllDetail = res.data.data.list.data;
}
} else {
// 请求失败处理
console.error('请求失败', res);
}
},
});
},
// 获取提现记录
fetchCash() {
this._get('user.cash/lists', {
status: -1,
page: 1,
list_rows: 20,
}, function(res) {
if (res.code == 1 && res.data.list.data.length > 0) {
this.listDataAllMoney = res.data.list.data
}
});
},
// 点击关闭按钮后，弹出页面关闭
closePopup() {
this.isPopupVisible = false;
},
// 点击关闭按钮后，弹出页面关闭
closeDetailPopup() {
this.isPopupExchangeVisible = false;
}
},
};
</script>
<style scoped>
page{
background: #FBFBFB;
}
.container {
padding: 10rpx;
}
.title {
text-align: center;
font-size: 36rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.box-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
}
.box-detail {
cursor: pointer
}
/**详情积分中的样式开始**/
.box {
display: flex;
justify-content: space-between;
width: 93%;
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 60rpx;
padding-bottom: 60rpx;
background-size: cover;
border-radius: 20rpx;
opacity: 1;
}
.tops {
margin-top: 10rpx;
background: url('../../../static/product/moenychange.png') no-repeat center center;
background-size: cover;
}
.box-money {
display: flex;
align-items: center;
}
.box-title {
margin-bottom: 10rpx;
/* color: #f2f2f2 */
display: flex;
align-items: center;
}
.box-title text {
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
.box-gap {
padding: 0 5rpx;
color: #FFF;
font-size: 36rpx;
}
.box-change{
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
.inner-button {
display: flex;
justify-content: center;
align-items: center;
}
.inner-button-text {
/* color: #f2f2f2; */
/* padding: 15rpx;
padding-left: 30rpx;
padding-right: 30rpx; */
width: 160rpx;
height: 72rpx;
background: #C55287;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin-left: 20rpx;
border-radius: 10rpx;
/* font-size: 36rpx; */
font-size: 40rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
display: flex;
justify-content: center;
align-items: center;
}
.inner-change {
/* font-size: 36rpx; */
position: relative;
/* color: #f2f2f2; */
text-align: center;
top: -50rpx;
right: -35%;
font-size: 44rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
/**详情积分中的样式结束**/
.box-get {
width: 200rpx;
height: 70rpx;
background: #C55287;
font-size: 24rpx;
color: #f2f2f2;
display: flex;
font-weight: bold;
justify-content: center;
align-items: center;
border-radius: 99rpx 99rpx 99rpx 99rpx;
opacity: 1;
}
.box-value {
font-size: 56rpx;
color: #f2f2f2;
font-weight: bold;
}
.tab-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 20rpx auto;
height: 86rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
}
.tab-item {
text-align: center;
padding: 0rpx;
cursor: pointer;
height: 20px;
/* font-size: 36rpx; */
/* color: red; */
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
.active::before{
display: block;
content: "";
width: 76rpx;
height: 12rpx;
background: #891F50;
border-radius: 238rpx 238rpx 238rpx 238rpx;
position: absolute;
top: 32rpx;
opacity: 0.8;
}
.list-item {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 10px;
font-size: 28rpx;
border-bottom: 1px solid #FFD2E7;
}
/* .bottomline {
border-bottom: 6rpx solid #C55287;
} */
.list-container {
padding: 20rpx;
background-color: #f2f2f2;
border-radius: 10rpx;
font-size: 16rpx;
}
.inner-card {
width: 80rpx;
height: 60rpx;
padding-right: 10rpx;
}
.left-item,
.right-item {
flex: 1;
}
.right-item {
text-align: right;
}
.amount-inner {
display: flex;
justify-content: start;
align-items: center;
float: right;
}
.income-name {
font-weight: bold;
}
.reward-reason {
margin-top: 5px;
font-size: 28rpx
}
.time {
font-size: 28rpx;
font-weight: 300;
}
.amount,
.amount-current {
margin-top: 5px;
}
.amount-current {
color: #891F50;
font-size: 32rpx;
font-weight: bold;
}
</style>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
