root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-15 14:08:32 +08:00
parent b6f2a0fdc1
commit 90271467eb
21 changed files with 538 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/pages/changeLog/index.vue
View File

@@ -1,11 +1,216 @@
<script setup>
import Avatar from '../../static/images/banner占位.png';
import MAICON from '../../static/icons/打码.png';
import SQ from '../../static/icons/搜索.png';
import XNav from "../../components/XNav.vue";
import filer from "../../static/icons/filer-balck.png";
import XFilter from "../../components/XFilter.vue";
import {reactive, ref} from "vue";
import XFilterItem from "../../components/XFilterItem.vue";
import XRadioGroup from "../../components/XRadioGroup.vue";
import XRadio from "../../components/XRadio.vue";
const isVague = ref(false);
const showFilter = ref(false);
const isSearch = ref(false);
const sumPo = reactive({
type: 0,
});
</script>
<template>
<!--变动记录-->
<x-nav></x-nav>
<x-filter
v-model:model="sumPo"
v-model:visible="showFilter">
<x-filter-item label="成员类型">
<x-radio-group v-model:model-value="sumPo.type">
<view class="!grid grid-cols-3 gap-[24rpx]">
<x-radio :value="0">我邀请的</x-radio>
<x-radio :value="1">他人邀请的</x-radio>
</view>
</x-radio-group>
</x-filter-item>
<x-filter-item label="排序类型">
<x-radio-group v-model:model-value="sumPo.type">
<view class="!grid grid-cols-3 gap-[24rpx]">
<x-radio :value="0">按收益</x-radio>
<x-radio :value="1">加入时间正序</x-radio>
<x-radio :value="2">加入时间倒序</x-radio>
</view>
</x-radio-group>
</x-filter-item>
</x-filter>
<view class="py-[28rpx] !flex justify-evenly bg-[#fff]">
<view class="top-filter top-filter-cur">我邀请的</view>
<view class="w-[4rpx] bg-[#E5E6EB]"></view>
<view class="top-filter top-filter-cur">按收益排序</view>
<view class="w-[4rpx] bg-[#E5E6EB]"></view>
<view class="top-filter" @click="showFilter=true">
<image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
筛选
</view>
</view>
<view class="!mx-[20rpx] bg-[#fff] rounded-[20rpx] !mt-[20rpx]">
<view class="balance-card">
<view class="p-[24rpx] !flex items-center gap-[20rpx]">
<view class="radio radio-cur">今天</view>
<view class="radio">昨天</view>
<view class="radio">累计</view>
</view>
<view class="gap-line"></view>
<view class="py-[52rpx] px-[44rpx] !grid grid-cols-3">
<view>
<view class="info-title">新增成员(个)</view>
<view class="info-balance">
4
</view>
</view>
<view>
<view class="info-title">团队收益(元)</view>
<view class="info-balance">
15.64
</view>
</view>
<view>
<view class="info-title">团队奖励(元)</view>
<view class="info-balance">
5.60
</view>
</view>
</view>
</view>
</view>
<view class="!mt-[40rpx] px-[20rpx] !flex items-center gap-[20rpx]">
<view class="sjmx">数据明细</view>
<view class="btn !ml-auto" @click="isVague=!isVague">
<image class="!size-[28rpx]" mode="aspectFill" :src="MAICON"></image>
{{ isVague ? '取消' : '一键' }}打码
</view>
<view :class="['btn', isSearch?'search':'']" @click="isSearch=true">
<image class="!size-[28rpx] flex-shrink-0" mode="aspectFill" :src="SQ"></image>
<text v-if="!isSearch">搜索</text>
<input @blur="isSearch=false" v-else></input>
</view>
</view>
<view class="p-[20rpx] !flex flex-col gap-[20rpx]">
<view v-for="item in 20" class="rounded-[8rpx] bg-[#fff] p-[24rpx] flex-grow">
<view :class="['!flex gap-[18rpx]', isVague?'vague':'']">
<image class="!size-[88rpx] rounded-[16rpx]" :src="Avatar" mode="aspectFill"></image>
<view class="flex-grow h-full !flex flex-col justify-between gap-[14rpx]">
<view class="!flex justify-between items-center">
<view class="test-28r">一只哈里路</view>
<view class="text-[#86909C] test-24r">2024-01-26 加入</view>
</view>
<view class="!flex flex-wrap">
<view class="py-[3rpx] px-[8rpx] test-20r bg-[#F2F3F5]">id：53379</view>
</view>
</view>
</view>
<view class="!flex gap-[22rpx] !mt-[20rpx]">
<view class="!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r">
<view>收益：</view>
<view class="text-[var(--primary-color)]">245.14</view>
</view>
<view
:class="['!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r', isVague?'vague':'']">
<view>收益：</view>
<view class="text-[var(--primary-color)]">245.14</view>
</view>
</view>
</view>
</view>
</template>
<style scoped>
<style lang="scss" scoped>
.search {
width: 300rpx;
}
.vague {
filter: blur(4px);
}
.btn {
padding: 8rpx 32rpx;
color: var(--primary-color);
font-size: 28rpx;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
border-radius: 999rpx;
border: 1px solid var(--primary-color);
display: flex;
align-items: center;
gap: 10rpx;
}
.sjmx {
color: rgb(29, 33, 41);
font-size: 16px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
}
.top-filter {
color: rgb(29, 33, 41);
font-size: 28rpx;
line-height: 22px;
letter-spacing: 0;
}
.top-filter-cur {
color: var(--primary-color);
}
.balance-card {
border-radius: 20rpx;
background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);
.radio {
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0;
padding: 10rpx 32rpx;
transition: 300ms;
}
.radio-cur {
background-color: #ffffff;
border-radius: 999rpx;
color: var(--primary-color);
}
.gap-line {
height: 2px;
width: 100%;
background-color: rgba(232, 243, 255, 0.14);
}
.info-title {
color: rgb(190, 218, 255);
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0;
margin-bottom: 16rpx;
}
.info-balance {
color: rgb(255, 255, 255);
font-size: 40rpx;
font-weight: 500;
line-height: 23px;
letter-spacing: 0;
}
}
</style>