shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
zpc 2025-03-22 16:46:02 +08:00
parent d7816a2bb7
commit 4b7a94a46f
6 changed files with 1128 additions and 1098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

646
package/mine/collect.vue
View File

@ -1,329 +1,399 @@
<!--
* @Date: 2023-11-16 19:08:42
* @LastEditTime: 2023-11-30 18:30:38
* @Description: content
-->
<template> <template>
<view class="content"> <view class="content">
<uni-nav-bar left-icon="left" title="我的收藏" color="#000000" backgroundColor="transparent" :fixed="true" <uni-nav-bar
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar> left-icon="left"
title="我的收藏"
color="#000000"
backgroundColor="transparent"
:fixed="true"
:statusBar="true"
:border="false"
@clickLeft="$c.back"
></uni-nav-bar>
<scroll-view class="tab" scroll-x> <!-- 顶部标签栏 -->
<view class="tab-item flex center" v-for="(item, i) in tabList" :key="i" :class="{act: tabCur == i}" <scroll-view class="tab" scroll-x>
@click="tabChange(i)"> <view
{{ item.title }} class="tab-item"
</view> v-for="(item, i) in tabList"
</scroll-view> :key="i"
:class="{ active: tabCur === i }"
@click="tabChange(i)"
>
{{ item.title }}
</view>
</scroll-view>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption" <!-- 列表区域 -->
:up="upOption"> <mescroll-body
<view class="list"> ref="mescrollRef"
<view class="list-item common_bg" v-for="(item, i) in listData" :key="i" @click="toDetail(item)"> @init="mescrollInit"
<view class="pic center center"> @down="downCallback"
<image class="pic-img" :src="item.imgurl" lazy-load></image> @up="getList"
</view> :down="downOption"
<view class="image3 common_bg" :style="{ backgroundImage: `url(${$img1('common/label1.png')})`}"> :up="upOption"
<text> >
{{ tabList[tabCur].title }} <view class="list" v-if="listData.length > 0">
</text> <view
</view> class="list-item"
<view class="title hang1"> v-for="(item, i) in listData"
{{ item.goods_title }} :key="i"
</view> @click="toDetail(item)"
<!-- <view class="redu" v-if="item.join_count"> >
<text>{{ item.join_count }}次参与</text> <view class="pic">
</view> <image
<view class="redu" v-else>快去参与吧！</view> --> class="pic-img"
<view class="price-box"> :src="item.imgurl"
<view class="price"> mode="aspectFill"
¥ lazy-load
<text>{{ item.goods_price }}</text> ></image>
</view> </view>
<view v-if="item.stock" class="num-box"> <view
<view class="num">{{ item.surplus_stock }}/{{ item.stock }}</view> class="tag"
<view class="box icon"> :style="{ backgroundImage: `url(${$img1('common/label1.png')})` }"
<image :src="$img1('index/box.png')" lazy-load></image> >
</view> <text>{{ tabList[tabCur].title }}</text>
</view> </view>
</view> <view class="title ellipsis">{{ item.goods_title }}</view>
</view>
</view> <view class="price-box">
</mescroll-body> <view class="price">
</view> ¥<text>{{ item.goods_price }}</text>
</view>
<view v-if="item.stock" class="stock">
<view class="stock-num"
>{{ item.surplus_stock }}/{{ item.stock }}</view
>
<image
class="stock-icon"
:src="$img1('index/box.png')"
lazy-load
></image>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="listData.length === 0 && !isLoading">
<image
class="empty-image"
:src="$img1('common/empty.png')"
mode="aspectFit"
></image>
<text class="empty-text">暂无收藏内容</text>
</view>
</mescroll-body>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
// 下拉刷新的配置(可选, 绝大部分情况无需配置) // 下拉刷新配置
downOption: { downOption: {
auto: false auto: false,
}, },
// 上拉加载的配置(可选, 绝大部分情况无需配置) // 上拉加载配置
upOption: { upOption: {
auto: true, auto: true,
page: { page: {
size: 10 // 每页数据的数量,默认10 size: 10, // 每页数据数量
} },
}, noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据
tabList: [{ empty: {
id: 2, use: false, // 使用自定义的空状态
title: '无限赏', },
label: '/static/img/bq1.png', },
}, tabList: [], // 标签列表
{ tabCur: 0, // 当前选中标签索引
id: 8, listData: [], // 列表数据
title: '领主赏', isLoading: true, // 是否正在加载
label: '/static/img/bq5.png', };
}, },
{
id: 9,
title: '连击赏',
label: '/static/img/bq4.png',
},
// {
// id: 2,
// title: '卡牌赏',
// label:'/static/img/bq2.png',
// },
{
id: 1,
title: '一番赏',
label: '/static/img/bq3.png',
},
{
id: 6,
title: '全局赏'
},
// { created() {
// id: 3, // 获取商品类型列表
// title: '擂台赏' this.initTabList();
// }, },
// {
// id: 4,
// title: '抽卡机'
// },
// {
// id: 5,
// title: '积分赏'
// },
// { methods: {
// id: 7, /**
// title: '福利盲盒' * 初始化标签列表
// }, */
initTabList() {
const tabList = this.$config.getGoodType();
// 过滤掉id为0的选项
this.tabList = tabList.filter((item) => item.id !== 0);
},
/**
* 初始化mescroll对象
* @param {Object} mescroll mescroll实例
*/
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
], /**
tabCur: 0, * 下拉刷新回调
listData: [] */
} downCallback() {
}, this.mescroll.resetUpScroll();
},
methods: { /**
toDetail(e) { * 跳转到详情页
// 无限赏 * @param {Object} item 商品项
let url = '/pages/shouye/detail' */
toDetail(item) {
let url = "/pages/shouye/detail";
if (e.type == 2 || e.type == 8) { // 根据商品类型跳转到不同详情页
url = '/pages/shouye/detail_wuxian' if (item.type === 2 || item.type === 8) {
} url = "/pages/shouye/detail_wuxian";
} else if (item.type === 9) {
url = "/package/index/lian-ji";
}
if (e.type == 9) { this.$c.to({
url = '/package/index/lian-ji' url,
} query: {
goods_id: item.goods_id,
type_text: this.tabList[this.tabCur].title,
},
});
},
this.$c.to({ /**
url, * 切换标签
query: { * @param {Number} index 标签索引
goods_id: e.goods_id, */
type_text: this.tabList[this.tabCur].title tabChange(index) {
} if (this.tabCur === index) return;
})
},
tabChange(i) { this.tabCur = index;
this.tabCur = i this.listData = [];
this.listData = [] this.isLoading = true;
this.mescroll.resetUpScroll() // 重置列表并滚动到顶部
this.mescroll.scrollTo(0, 0) this.mescroll.resetUpScroll();
}, this.mescroll.scrollTo(0, 0);
/** },
* @description: 获取列表
* @param {*} num /**
* @param {*} size * 获取收藏列表数据
* @return {*} * @param {Object} params 分页参数
*/ */
getList({ getList({ num, size }) {
num, this.isLoading = true;
size
}) { // 使用Promise方式调用API
this.req({ this.$request
url: 'listCollect', .post("listCollect", {
data: { page: num,
page: num, type: this.tabList[this.tabCur].id,
type: this.tabList[this.tabCur].id })
}, .then((res) => {
success: res => { this.isLoading = false;
if (res.status == 1) {
if (num == 1) { if (res.status === 1) {
this.listData = [] // 第一页时清空数据
} if (num === 1) {
this.listData = this.listData.concat(res.data.data) this.listData = [];
this.mescroll.endByPage(res.data.data.length, res.data.last_page) }
}
} // 追加数据
}) this.listData = this.listData.concat(res.data.data || []);
}
} // 更新分页状态
} this.mescroll.endByPage(
res.data.data ? res.data.data.length : 0,
res.data.last_page || 1
);
} else {
this.mescroll.endErr();
uni.showToast({
title: res.msg || "加载失败",
icon: "none",
});
}
})
.catch((err) => {
this.isLoading = false;
this.mescroll.endErr();
uni.showToast({
title: "网络请求失败",
icon: "none",
});
console.error(err);
});
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
.content { .content {
background-color: #F7F7F7; background-color: #f7f7f7;
.tab { min-height: 100vh;
white-space: nowrap;
.tab-item { // 顶部标签栏
width: 88rpx; .tab {
height: 40rpx; white-space: nowrap;
position: relative; padding: 15rpx 0;
display: inline-flex;
margin-left: 30rpx;
background-color: #FFFFFF;
font-size: 20rpx;
border-radius: 8rpx;
&:last-child { .tab-item {
margin-right: 30rpx; width: 88rpx;
} height: 40rpx;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 30rpx;
background-color: #ffffff;
font-size: 20rpx;
border-radius: 8rpx;
color: #333333;
transition: all 0.2s;
font-weight: 400; &:last-child {
color: #333333; margin-right: 30rpx;
}
&.act { &.active {
background-color: #E6F791; background-color: #e6f791;
} font-weight: 500;
} }
} }
}
.list { // 商品列表
padding: 1rpx 30rpx 30rpx; .list {
display: flex; padding: 15rpx 30rpx 30rpx;
flex-flow: row wrap; display: flex;
justify-content: space-between; flex-wrap: wrap;
justify-content: space-between;
.list-item { .list-item {
width: 330rpx; width: 330rpx;
height: 487rpx; height: 487rpx;
margin-top: 30rpx; margin-top: 30rpx;
position: relative; position: relative;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.pic { .pic {
width: 100%; width: 100%;
height: 332rpx; height: 332rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #D8D8D8; background-color: #f5f5f5;
border-radius: 16rpx 16rpx 0rpx 0rpx; border-radius: 16rpx 16rpx 0 0;
// overflow: hidden; overflow: hidden;
.pic-img { .pic-img {
// width: 290rpx; width: 100%;
// height: 290rpx; height: 100%;
border-radius: 16rpx 16rpx 0rpx 0rpx; border-radius: 16rpx 16rpx 0 0;
width: 100%; }
height: 100%; }
}
} .tag {
position: absolute;
z-index: 1;
top: 12rpx;
left: 12rpx;
width: 68rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
background-size: 100% 100%;
.image3 { text {
position: absolute; font-size: 14rpx;
z-index: 1; color: #ffffff;
top: 12rpx; }
left: 12rpx; }
width: 68rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
text { .title {
font-size: 14rpx; padding: 20rpx 20rpx 0;
font-weight: 400; font-size: 20rpx;
color: #FFFFFF; color: #333333;
} line-height: 1.4;
} height: 56rpx;
}
.title { .price-box {
padding: 20rpx 20rpx 0; padding: 20rpx 20rpx 10rpx;
font-size: 20rpx; display: flex;
font-weight: 400; justify-content: space-between;
color: #333333; align-items: center;
} position: absolute;
bottom: 0;
left: 0;
right: 0;
.redu { .price {
margin-top: 10rpx; font-size: 16rpx;
padding-left: 20rpx; color: #333333;
font-size: 24rpx;
font-weight: 400;
color: #cccccc;
}
.hot-num { text {
padding: 10rpx 20rpx 0; font-size: 24rpx;
font-weight: 500;
}
}
font-size: 24rpx; .stock {
font-weight: 400; display: flex;
color: #333333; align-items: center;
}
.price-box { .stock-num {
padding: 64rpx 20rpx 10rpx; font-size: 24rpx;
display: flex; color: #cccccc;
justify-content: space-between; }
align-items: center;
.price { .stock-icon {
font-size: 16rpx; width: 26rpx;
font-family: Source Han Sans CN; height: 26rpx;
font-weight: 400; margin-left: 6rpx;
color: #333333; }
}
}
}
}
text { // 空状态
font-size: 24rpx; .empty-state {
} display: flex;
} flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
.num-box { .empty-image {
display: flex; width: 200rpx;
align-items: center; height: 200rpx;
margin-bottom: 20rpx;
}
.num { .empty-text {
font-size: 24rpx; font-size: 28rpx;
font-family: Source Han Sans CN; color: #999;
font-weight: 400; }
color: #cccccc; }
}
.box { // 公共类
width: 26rpx; .ellipsis {
height: 26rpx; overflow: hidden;
margin-left: 6rpx; text-overflow: ellipsis;
} display: -webkit-box;
-webkit-line-clamp: 2;
.icon {} -webkit-box-orient: vertical;
} }
} }
}
}
}
</style> </style>

515
pages/user/bi_jl.vue
View File

@ -1,304 +1,285 @@
<template> <template>
<view class="content"> <view class="content">
<uni-nav-bar left-icon="left" title="币记录" color="#000000" backgroundColor="transparent" :fixed="true" <uni-nav-bar
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar> left-icon="left"
:title="$config.getAppSetting('currency1_name') + '记录'"
color="#000000"
backgroundColor="transparent"
:fixed="true"
:statusBar="true"
:border="false"
@clickLeft="$c.back"
></uni-nav-bar>
<!-- 内容 -->
<mescroll-body
ref="mescrollRef"
@init="mescrollInit"
:down="downOption"
@down="downCallback"
@up="upCallback"
>
<view class="coupon flex column">
<view
v-for="(item, index) in aixuanArr"
:key="index"
class="coupon_item"
:style="'border:' + (index == aixuanArr.length - 1 ? 'none' : '')"
>
<view class="coupon_item_1" style="margin-left: 32rpx">
<view>{{ item.content }}</view>
<view>{{ item.addtime }}</view>
</view>
<!-- <view class="tab-list"> <view class="coupon_r flex_center" style="margin-right: 32rpx">
<view <text>{{ item.change_money }}</text>
@click="getlist(i)" </view>
v-for="(item, i) in arr" <view
:key="i" style="
class="tab-list-item" width: 622rpx;
:class="{ height: 2rpx;
active: show == i background-color: #f3f3f3;
}" position: absolute;
> bottom: 2rpx;
{{ item }} left: 32rpx;
"
<view v-if="show == i" class="arrow"></view> >
</view>
</view> -->
<!-- <view class="head">
<view
class="status_bar"
:style="'height:' + statusBarHeight + 'px;'"
></view>
<view class="header_title">
<view @click="back()">
返回
</view>
<view class="hang1">星钻记录</view>
</view>
<view class="qiehuan">
<view @click="getlist(i)" v-for="(v, i) in arr" :key="i">
<view :class="show == i ? 'xzs' : 'wzs'">{{ v }}</view>
<view class="qiehuan_line" v-if="show == i">
</view> </view>
</view> </view>
</view> </view>
</view> --> </mescroll-body>
<!-- <view class="header"> </view>
</view> -->
<!-- 内容 -->
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
<view class="coupon flex column">
<view v-for="(item, index) in aixuanArr" :key="index" class="coupon_item"
:style="'border:' + (index == aixuanArr.length - 1 ? 'none' : '')">
<view class="coupon_item_1" style="margin-left: 32rpx;">
<view>{{ item.content }}</view>
<view>{{ item.addtime }}</view>
</view>
<view class="coupon_r flex_center" style="margin-right: 32rpx;">
<text>{{ item.change_money }}</text>
<!-- <image src="../../static/mine/$.png"></image> -->
</view>
<view
style="width: 622rpx; height: 2rpx; background-color: #F3F3F3; position: absolute; bottom: 2rpx; left: 32rpx;">
</view>
</view>
</view>
</mescroll-body>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
z_imgPath: this.$z_img2 + 'mine/', z_imgPath: this.$z_img2 + "mine/",
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
arr: ['全部', '收入', '支出'], arr: ["全部", "收入", "支出"],
show: 0, show: 0,
aixuanArr: [], aixuanArr: [],
downOption: { downOption: {
auto: false auto: false,
} },
} };
}, },
onLoad(e) { onLoad(e) {},
methods: {
}, back() {
methods: { uni.navigateBack();
back() { },
uni.navigateBack() getlist(v) {
}, this.show = v;
getlist(v) { this.aixuanArr = [];
this.show = v this.mescroll.resetUpScroll();
this.aixuanArr = [] },
this.mescroll.resetUpScroll() /*下拉刷新的回调 */
}, downCallback() {
/*下拉刷新的回调 */ this.mescroll.resetUpScroll();
downCallback() { },
this.mescroll.resetUpScroll() /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
}, upCallback(page) {
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ //联网加载数据
upCallback(page) { this.loadData(page.num);
//联网加载数据 },
this.loadData(page.num) loadData(pageNo) {
}, // 模拟接口
loadData(pageNo) { let that = this;
// 模拟接口 that.req({
let that = this url: "profitIntegral",
that.req({ Loading: true,
url: 'profitIntegral', data: {
Loading: true, page: pageNo,
data: { type: that.show,
page: pageNo, },
type: that.show success(res) {
}, that.mescroll.endByPage(res.data.data.length, res.data.last_page);
success(res) { if (pageNo == 1) {
that.mescroll.endByPage(res.data.data.length, res.data.last_page) that.aixuanArr = res.data.data;
if (pageNo == 1) { } else {
that.aixuanArr = res.data.data that.aixuanArr = that.aixuanArr.concat(res.data.data);
} else { }
that.aixuanArr = that.aixuanArr.concat(res.data.data) },
} });
} },
}) },
} };
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.coupon_r>image { .coupon_r > image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.coupon_r { .coupon_r {
font-size: 32rpx; font-size: 32rpx;
/* font-family: 'zcq'; */ /* font-family: 'zcq'; */
color: #333333; color: #333333;
} }
.coupon_item_1>view:nth-of-type(2) { .coupon_item_1 > view:nth-of-type(2) {
font-size: 24rpx; font-size: 24rpx;
color: #676767; color: #676767;
margin-top: 10rpx; margin-top: 10rpx;
} }
.coupon_item_1>view:nth-of-type(1) { .coupon_item_1 > view:nth-of-type(1) {
font-size: 28rpx; font-size: 28rpx;
// font-weight: bold; // font-weight: bold;
color: #333333; color: #333333;
} }
.coupon_item { .coupon_item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx 0; padding: 30rpx 0;
box-sizing: border-box; box-sizing: border-box;
// background-color: rgba(255, 255, 255, 0.08); // background-color: rgba(255, 255, 255, 0.08);
// margin-top: 20rpx; // margin-top: 20rpx;
// border-radius: 10rpx; // border-radius: 10rpx;
position: relative; position: relative;
} }
.coupon { .coupon {
width: 686rpx; width: 686rpx;
margin: 20rpx auto; margin: 20rpx auto;
/* background: #11141D; /* background: #11141D;
box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
padding: 0 30rpx; */ padding: 0 30rpx; */
box-sizing: border-box; box-sizing: border-box;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 16rpx; border-radius: 16rpx;
} }
.qiehuan { .qiehuan {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 16rpx; margin-top: 16rpx;
width: 400rpx; width: 400rpx;
} }
.qiehuan_line { .qiehuan_line {
margin: -10rpx auto; margin: -10rpx auto;
width: 30rpx; width: 30rpx;
height: 20rpx; height: 20rpx;
border-bottom: 4rpx solid #70ede8; border-bottom: 4rpx solid #70ede8;
border-radius: 2rpx; border-radius: 2rpx;
} }
.qiehuan_line>image { .qiehuan_line > image {
width: 30rpx; width: 30rpx;
height: 20rpx; height: 20rpx;
} }
.qiehuan>view { .qiehuan > view {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
.wzs { .wzs {
font-size: 34rpx; font-size: 34rpx;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
} }
.xzs { .xzs {
font-size: 34rpx; font-size: 34rpx;
color: #ffffff; color: #ffffff;
} }
.header { .header {
width: 750rpx; width: 750rpx;
/* height: 176rpx; */ /* height: 176rpx; */
padding-bottom: 30rpx; padding-bottom: 30rpx;
background: #222222; background: #222222;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
/* #ifdef MP */ /* #ifdef MP */
top: 0; top: 0;
/* #endif */ /* #endif */
/* #ifndef MP */ /* #ifndef MP */
top: 88rpx; top: 88rpx;
/* #endif */ /* #endif */
z-index: 15; z-index: 15;
} }
.content { .content {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
// color: #fff; // color: #fff;
background-color: #F7F7F7; background-color: #f7f7f7;
.head { .head {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 20; z-index: 20;
.header_title { .header_title {
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 30rpx; padding-left: 30rpx;
box-sizing: border-box; box-sizing: border-box;
>view:nth-of-type(1) { > view:nth-of-type(1) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
>view:nth-of-type(2) { > view:nth-of-type(2) {
width: 520rpx; width: 520rpx;
text-align: center; text-align: center;
/* margin: auto; */ /* margin: auto; */
} }
image { image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
} }
} }
} }
.tab-list { .tab-list {
display: flex; display: flex;
padding: 30rpx; padding: 30rpx;
.tab-list-item { .tab-list-item {
margin-right: 40rpx; margin-right: 40rpx;
position: relative; position: relative;
font-size: 28rpx; font-size: 28rpx;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
.arrow { .arrow {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: -10rpx; bottom: -10rpx;
transform: translateX(-50%); transform: translateX(-50%);
width: 32rpx; width: 32rpx;
height: 4rpx; height: 4rpx;
background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%); background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
border-radius: 2rpx; border-radius: 2rpx;
} }
&.active { &.active {
color: transparent; color: transparent;
background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%); background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
background-clip: text; background-clip: text;
} }
} }
} }
</style> </style>

1
pages/user/change.vue
View File

@ -89,6 +89,7 @@ export default {
*/ */
back() { back() {
uni.navigateBack(); uni.navigateBack();
}, },
/** /**

548
pages/user/hsjl.vue
View File

@ -1,332 +1,302 @@
<template> <template>
<view class="content"> <view class="content">
<uni-nav-bar left-icon="left" title="兑换记录" color="#000000" backgroundColor="transparent" :fixed="true" <uni-nav-bar
:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar> left-icon="left"
title="兑换记录"
color="#000000"
backgroundColor="transparent"
:fixed="true"
:statusBar="true"
:border="false"
@clickLeft="back"
></uni-nav-bar>
<!-- <view class="tab-list"> <mescroll-body
<view ref="mescrollRef"
@click="getlist(i + 1)" @init="mescrollInit"
v-for="(item, i) in arr" :down="downOption"
:key="i" @down="downCallback"
class="tab-list-item" @up="upCallback"
:class="{ >
active: show == i + 1 <view class="xuyuan br20" v-for="(v, i) in listData" :key="i">
}" <view class="xuyuan_head">
> <view style="opacity: 1; color: #8a8a8a; font-size: 20rpx"
{{ item }} >打包时间：{{ v.addtime }}</view
>
<image <view style="font-size: 20rpx; color: #8a8a8a">
v-if="show == i + 1" 共
class="arrow" <text style="margin: 0 4rpx; color: #333333">{{ v.count }}</text>
:src="$img('/static/img/tab_arrow.png')" 件
mode="scaleToFill" </view>
/>
</view>
</view> -->
<!-- <view class="head">
<view
class="status_bar"
:style="'height:' + statusBarHeight + 'px;'"
></view>
<view class="header_title">
<view @click="back()">
返回
</view> </view>
<view class="hang1">打包记录</view> <view class="xuyuan_con">
</view>
</view> -->
<!-- 内容 -->
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
<view class="xuyuan br20" v-for="(v, i) in listData" :key="i">
<view class="xuyuan_head">
<view style="opacity: 1; color: #8A8A8A; font-size: 20rpx;">打包时间：{{ v.addtime }}</view>
<view style="font-size: 20rpx; color: #8A8A8A;">
共
<text style="margin: 0 4rpx; color: #333333;">{{ v.count }}</text>
件
</view>
</view>
<view class="xuyuan_con">
<view class="xuyuan_item" v-for="(a, b) in v.order_list" :key="b">
<view class="list_img">
<image :src="a.goodslist_imgurl"></image>
<!-- <view class="shang_title center">
<view class="num">×{{ a.prize_num }}</view>
</view> -->
<view class="allNum">{{a.prize_num}}</view>
</view>
<view class="xuyuan_item_2 column center">
<view class="hang1 mt10" style="width: 180rpx;">{{ a.goodslist_title }}</view>
<view class="hang1 mt10">兑换价：{{ a.goodslist_money }}</view>
</view>
</view>
</view>
<!-- <view class="xuyuan_con">
<view class="xuyuan_item" v-for="(a, b) in v.order_list" :key="b"> <view class="xuyuan_item" v-for="(a, b) in v.order_list" :key="b">
<view class="list_img"> <view class="list_img">
<image :src="a.goodslist_imgurl"></image> <image :src="a.goodslist_imgurl"></image>
<view class="shang_title"> <view class="allNum">{{ a.prize_num }}</view>
{{ a.shang_title }} X{{ a.prize_num }}
</view>
</view> </view>
<view class="xuyuan_item_2 flex_center"> <view class="xuyuan_item_2 column center">
<view class="hang1">{{ a.goodslist_title }}</view> <view class="hang1 mt10" style="width: 180rpx">{{
a.goodslist_title
}}</view>
<view class="hang1 mt10"
>兑换价：{{ a.goodslist_money * 100 }}</view
>
</view> </view>
</view> </view>
</view> --> </view>
<view class="xuyuan_foot">
<view> <view class="xuyuan_foot">
共计兑换星钻： <view>
<text style="color: #333333">￥{{ v.money }}</text> 共计兑换{{ $config.getAppSetting("currency2_name") }}：
</view> <text style="color: #333333">￥{{ v.money * 100 }}</text>
</view> </view>
</view> </view>
</mescroll-body> </view>
</view> </mescroll-body>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
z_imgPath: this.$z_img2 + 'mine/', z_imgPath: this.$z_img2 + "mine/",
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
downOption: { downOption: {
auto: false auto: false,
}, },
listData: [] listData: [],
} };
}, },
onLoad(e) {}, onLoad(e) {},
methods: { methods: {
back() { back() {
uni.navigateBack() uni.navigateBack();
}, },
/*下拉刷新的回调 */ /*下拉刷新的回调 */
downCallback() { downCallback() {
this.mescroll.resetUpScroll() this.mescroll.resetUpScroll();
}, },
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) { upCallback(page) {
//联网加载数据 //联网加载数据
this.loadData(page.num) this.loadData(page.num);
}, },
loadData(pageNo) { loadData(pageNo) {
// 模拟接口 // 模拟接口
let that = this let that = this;
that.req({ that.req({
url: 'warehouse_recovery_record', url: "warehouse_recovery_record",
Loading: true, Loading: true,
data: { data: {
page: pageNo page: pageNo,
}, },
success(res) { success(res) {
that.mescroll.endByPage(res.data.data.length, res.data.last_page) that.mescroll.endByPage(res.data.data.length, res.data.last_page);
if (pageNo == 1) { if (pageNo == 1) {
that.listData = res.data.data that.listData = res.data.data;
} else { } else {
that.listData = that.listData.concat(res.data.data) that.listData = that.listData.concat(res.data.data);
} }
} },
}) });
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.xuyuan_foot { .xuyuan_foot {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: 30rpx; padding: 30rpx;
font-size: 20rpx; font-size: 20rpx;
color: #333333; color: #333333;
} }
.xuyuan_item_2 { .xuyuan_item_2 {
color: #333333; color: #333333;
font-size: 20rpx; font-size: 20rpx;
width: 100%; width: 100%;
margin-top: 4rpx; margin-top: 4rpx;
padding: 0 10rpx; padding: 0 10rpx;
>view:nth-child(2) { > view:nth-child(2) {
font-weight: 400; font-weight: 400;
font-size: 16rpx; font-size: 16rpx;
color: #8A8A8A; color: #8a8a8a;
} }
} }
.allNum { .allNum {
position: absolute; position: absolute;
bottom: 10rpx; bottom: 10rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 22rpx; font-size: 22rpx;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: 20rpx; border-radius: 20rpx;
color: #fff; color: #fff;
padding: 5rpx 20rpx; padding: 5rpx 20rpx;
} }
.list_img .shang_title { .list_img .shang_title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 32rpx; height: 32rpx;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
left: 0; left: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.type { .type {
height: 100%; height: 100%;
padding: 0 16rpx; padding: 0 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%); background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
font-size: 20rpx; font-size: 20rpx;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #222222; color: #222222;
} }
.num { .num {
padding-right: 10rpx; padding-right: 10rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
} }
.list_img>image { .list_img > image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.list_img { .list_img {
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
background: #333333; background: #333333;
border-radius: 20rpx; border-radius: 20rpx;
position: relative; position: relative;
} }
.xuyuan_item { .xuyuan_item {
width: 180rpx; width: 180rpx;
box-sizing: border-box; box-sizing: border-box;
margin-right: 20rpx; margin-right: 20rpx;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.xuyuan_con { .xuyuan_con {
display: flex; display: flex;
margin: 14rpx auto 0; margin: 14rpx auto 0;
width: 630rpx; width: 630rpx;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1rpx solid #F3F3F3; border-bottom: 1rpx solid #f3f3f3;
padding-bottom: 20rpx; padding-bottom: 20rpx;
overflow-x: scroll; overflow-x: scroll;
}
} .xuyuan_head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 24rpx;
box-sizing: border-box;
.xuyuan_head { font-size: 28rpx;
display: flex; font-family: Source Han Sans CN;
justify-content: space-between; font-weight: 400;
align-items: center; color: #ffffff;
padding: 10rpx 24rpx; }
box-sizing: border-box;
font-size: 28rpx; .xuyuan {
font-family: Source Han Sans CN; width: 690rpx;
font-weight: 400; margin: 20rpx auto;
color: #ffffff; padding-top: 10rpx;
} background: #ffffff;
}
.xuyuan { .content {
width: 690rpx; width: 100vw;
margin: 20rpx auto; min-height: 100vh;
padding-top: 10rpx; box-sizing: border-box;
background: #FFFFFF; background-color: #f7f7f7;
}
.content { .head {
width: 100vw; position: fixed;
min-height: 100vh; top: 0;
box-sizing: border-box; z-index: 20;
background-color: #F7F7F7;
.head { .header_title {
position: fixed; height: 70rpx;
top: 0; line-height: 70rpx;
z-index: 20; width: 100%;
box-sizing: border-box;
font-weight: bold;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
.header_title { > view:nth-of-type(1) {
height: 70rpx; display: flex;
line-height: 70rpx; align-items: center;
width: 100%; }
box-sizing: border-box;
font-weight: bold;
display: flex;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
>view:nth-of-type(1) { > view:nth-of-type(2) {
display: flex; width: 520rpx;
align-items: center; text-align: center;
} /* margin: auto; */
}
>view:nth-of-type(2) { image {
width: 520rpx; width: 48rpx;
text-align: center; height: 48rpx;
/* margin: auto; */ }
} }
}
}
image { .tab-list {
width: 48rpx; display: flex;
height: 48rpx; padding: 30rpx;
}
}
}
}
.tab-list { .tab-list-item {
display: flex; margin-right: 40rpx;
padding: 30rpx; position: relative;
.tab-list-item { font-size: 30rpx;
margin-right: 40rpx; font-family: Source Han Sans CN;
position: relative; font-weight: 400;
color: #ffffff;
font-size: 30rpx; .arrow {
font-family: Source Han Sans CN; position: absolute;
font-weight: 400; left: 50%;
color: #ffffff; bottom: -28rpx;
transform: translateX(-50%);
width: 40rpx;
height: 20rpx;
}
.arrow { &.active {
position: absolute; text-shadow: 0 0 10rpx #ba39ff;
left: 50%; }
bottom: -28rpx; }
transform: translateX(-50%); }
width: 40rpx;
height: 20rpx;
}
&.active {
text-shadow: 0 0 10rpx #ba39ff;
}
}
}
</style> </style>

19
pages/user/index.vue
View File

@ -39,19 +39,6 @@
<image style="width: 206rpx; height: 206rpx; position: absolute; top: -40rpx; right: 8rpx;" <image style="width: 206rpx; height: 206rpx; position: absolute; top: -40rpx; right: 8rpx;"
:src="$img1('my/ou.png')"></image> :src="$img1('my/ou.png')"></image>
</view> </view>
<!-- <view class="rbtn flex" @click="$c.to({ url: '/pages/user/vip' })">
<image class="img100" :src="$img1('my/huiyuan.png')"></image>
</view> -->
<!-- <view class="rbtn btn1 flex" @click="$c.to({ url: '/package/index/sign' })">
<image class="img100" :src="$img1('my/sign.png')"></image>
</view> -->
<!-- <view class="rbtn btn1 flex">
<button class="hide" open-type="contact"></button>
<image class="img100" :src="$img1('my/kefu.png')"></image>
</view> -->
</view> </view>
<view class=""> <view class="">
@ -61,12 +48,12 @@
<view class="other-num"> <view class="other-num">
<view class="other-item" @click="$c.to({ url: '/pages/user/bi_jl' })"> <view class="other-item" @click="$c.to({ url: '/pages/user/bi_jl' })">
<view class="num" style="color: #333333;">{{ userinfo.integral || 0 }}</view> <view class="num" style="color: #333333;">{{ userinfo.integral || 0 }}</view>
<view class="title">吧唧币</view> <view class="title">{{$config.getAppSetting('currency1_name')}}</view>
</view> </view>
<view class="other-item" @click="$c.to({ url: '/pages/user/jf_jl' })"> <view class="other-item" @click="$c.to({ url: '/pages/user/jf_jl' })">
<view class="num" style="color: #333333;">{{ userinfo.score || 0 }}</view> <view class="num" style="color: #333333;">{{ userinfo.score || 0 }}</view>
<view class="title">积分</view> <view class="title">{{$config.getAppSetting('currency2_name')}}</view>
</view> </view>
<!-- <view class="other-item" @click="$c.to({ url: '/pages/user/my_coupon' })"> <!-- <view class="other-item" @click="$c.to({ url: '/pages/user/my_coupon' })">
@ -77,7 +64,7 @@
<view class="money align-center justify-between br20"> <view class="money align-center justify-between br20">
<view class="align-center" style="margin-left: 32rpx;"> <view class="align-center" style="margin-left: 32rpx;">
<text style="color: #333333; font-size: 28rpx;">星钻</text> <text style="color: #333333; font-size: 28rpx;">{{$config.getAppSetting('balance_name')}}</text>
</view> </view>
<view class="money-detail" @click="$c.to({ url: '/pages/user/yetx' })"> <view class="money-detail" @click="$c.to({ url: '/pages/user/yetx' })">
<text>{{ userinfo.money || '0.00' }}</text> <text>{{ userinfo.money || '0.00' }}</text>

497
pages/user/yetx.vue
View File

@ -1,18 +1,31 @@
<template> <template>
<view class="content"> <view class="content">
<uni-nav-bar left-icon="left" title="我的星钻" color="#000000" backgroundColor="transparent" :fixed="true" <uni-nav-bar
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar> left-icon="left"
:title="$config.getAppSetting('balance_name') + '记录'"
color="#000000"
backgroundColor="transparent"
:fixed="true"
:statusBar="true"
:border="false"
@clickLeft="$c.back"
></uni-nav-bar>
<view class="tab-list align-center"> <view class="tab-list align-center">
<view @click="getlist(i)" v-for="(item, i) in arr" :key="i" class="tab-list-item" <view
:class="{active: show == i}"> @click="getlist(i)"
{{ item }} v-for="(item, i) in arr"
:key="i"
class="tab-list-item"
:class="{ active: show == i }"
>
{{ item }}
<view v-if="show == i" class="arrow"></view> <view v-if="show == i" class="arrow"></view>
</view> </view>
</view> </view>
<!-- <view class="head"> <!-- <view class="head">
<view class="qiehuan"> <view class="qiehuan">
<view @click="getlist(i)" v-for="(v, i) in arr" :key="i"> <view @click="getlist(i)" v-for="(v, i) in arr" :key="i">
<view :class="show == i ? 'xzs' : 'wzs'">{{ v }}</view> <view :class="show == i ? 'xzs' : 'wzs'">{{ v }}</view>
@ -21,262 +34,270 @@
</view> </view>
</view> </view>
</view> --> </view> -->
<!-- 内容 --> <!-- 内容 -->
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> <mescroll-body
<view class="coupon"> ref="mescrollRef"
<view v-for="(item, index) in listData" :key="index" class="coupon_item"> @init="mescrollInit"
<view class="coupon_item_1"> :down="downOption"
<view>{{ item.content }}</view> @down="downCallback"
<view>{{ item.addtime }}</view> @up="upCallback"
</view> >
<view class="coupon_r">{{ item.change_money }}</view> <view class="coupon">
</view> <view
</view> v-for="(item, index) in listData"
</mescroll-body> :key="index"
</view> class="coupon_item"
>
<view class="coupon_item_1">
<view>{{ item.content }}</view>
<view>{{ item.addtime }}</view>
</view>
<view class="coupon_r">{{ item.change_money }}</view>
</view>
</view>
</mescroll-body>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
z_imgPath: this.$z_img2 + 'mine/', z_imgPath: this.$z_img2 + "mine/",
statusBarHeight: uni.getSystemInfoSync().statusBarHeight, statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
arr: ['全部', '收入', '支出', '兑换'], arr: ["全部", "收入", "支出", "兑换"],
show: 0, show: 0,
listData: [], listData: [],
// 是否显示参与 // 是否显示参与
downOption: { downOption: {
auto: false auto: false,
} },
} };
}, },
onLoad(e) { onLoad(e) {
// setTimeout(() => { // setTimeout(() => {
// this.listData=[ // this.listData=[
// { // {
// content:'哈哈哈哈哈哈哈哈哈', // content:'哈哈哈哈哈哈哈哈哈',
// addtime:'2333-23-23 23:23:23', // addtime:'2333-23-23 23:23:23',
// change_money:233 // change_money:233
// } // }
// ] // ]
// }, 1000); // }, 1000);
}, },
methods: { methods: {
back() { back() {
uni.navigateBack() uni.navigateBack();
}, },
getlist(v) { getlist(v) {
this.show = v this.show = v;
this.aixuanArr = [] this.aixuanArr = [];
this.mescroll.resetUpScroll() this.mescroll.resetUpScroll();
}, },
/*下拉刷新的回调 */ /*下拉刷新的回调 */
downCallback() { downCallback() {
this.mescroll.resetUpScroll() this.mescroll.resetUpScroll();
}, },
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) { upCallback(page) {
//联网加载数据 //联网加载数据
this.loadData(page.num) this.loadData(page.num);
}, },
loadData(pageNo) { loadData(pageNo) {
// 模拟接口 // 模拟接口
let that = this let that = this;
that.req({ that.req({
url: 'profitMoney', url: "profitMoney",
Loading: true, Loading: true,
data: { data: {
page: pageNo, page: pageNo,
type: that.show type: that.show,
}, },
success(res) { success(res) {
that.mescroll.endByPage(res.data.data.length, res.data.last_page) that.mescroll.endByPage(res.data.data.length, res.data.last_page);
if (pageNo == 1) { if (pageNo == 1) {
that.listData = res.data.data that.listData = res.data.data;
} else { } else {
that.listData = that.listData.concat(res.data.data) that.listData = that.listData.concat(res.data.data);
} }
} },
}) });
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.coupon_r>image { .coupon_r > image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
.coupon_r { .coupon_r {
font-size: 24rpx; font-size: 24rpx;
/* font-family: 'zcq'; */ /* font-family: 'zcq'; */
color: #333333; color: #333333;
} }
.coupon_item_1>view:nth-of-type(2) { .coupon_item_1 > view:nth-of-type(2) {
font-size: 16rpx; font-size: 16rpx;
color: #676767; color: #676767;
margin-top: 10rpx; margin-top: 10rpx;
} }
.coupon_item_1>view:nth-of-type(1) { .coupon_item_1 > view:nth-of-type(1) {
font-size: 20rpx; font-size: 20rpx;
// font-weight: bold; // font-weight: bold;
color: #333333; color: #333333;
} }
.coupon_item { .coupon_item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx 0; padding: 30rpx 0;
box-sizing: border-box; box-sizing: border-box;
// background-color: rgba(255, 255, 255, 0.08); // background-color: rgba(255, 255, 255, 0.08);
// margin-top: 20rpx; // margin-top: 20rpx;
// border-radius: 10rpx; // border-radius: 10rpx;
position: relative; position: relative;
border-bottom: 1px solid #F3F3F3; border-bottom: 1px solid #f3f3f3;
} }
.coupon { .coupon {
width: 690rpx; width: 690rpx;
margin: 20rpx auto; margin: 20rpx auto;
/* background: #11141D; /* background: #11141D;
box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7); box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
padding: 0 30rpx; */ padding: 0 30rpx; */
box-sizing: border-box; box-sizing: border-box;
background-color: #FFFFFF; background-color: #ffffff;
padding: 0 32rpx; padding: 0 32rpx;
border-radius: 16rpx; border-radius: 16rpx;
/* border-radius: 20rpx; */ /* border-radius: 20rpx; */
} }
.qiehuan { .qiehuan {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 16rpx; margin-top: 16rpx;
width: 400rpx; width: 400rpx;
} }
.qiehuan_line { .qiehuan_line {
margin: -10rpx auto; margin: -10rpx auto;
width: 30rpx; width: 30rpx;
height: 20rpx; height: 20rpx;
border-bottom: 4rpx solid #70ede8; border-bottom: 4rpx solid #70ede8;
border-radius: 2rpx; border-radius: 2rpx;
} }
.qiehuan_line>image { .qiehuan_line > image {
width: 30rpx; width: 30rpx;
height: 20rpx; height: 20rpx;
} }
.qiehuan>view { .qiehuan > view {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
.wzs { .wzs {
font-size: 34rpx; font-size: 34rpx;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
} }
.xzs { .xzs {
font-size: 34rpx; font-size: 34rpx;
color: #ffffff; color: #ffffff;
} }
.header { .header {
width: 750rpx; width: 750rpx;
/* height: 176rpx; */ /* height: 176rpx; */
padding-bottom: 30rpx; padding-bottom: 30rpx;
background: #222222; background: #222222;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
/* #ifdef MP */ /* #ifdef MP */
top: 0; top: 0;
/* #endif */ /* #endif */
/* #ifndef MP */ /* #ifndef MP */
top: 88rpx; top: 88rpx;
/* #endif */ /* #endif */
z-index: 15; z-index: 15;
} }
.content { .content {
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
background-color: #F7F7F7; background-color: #f7f7f7;
.head { .head {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 20; z-index: 20;
.header_title { .header_title {
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 30rpx; padding-left: 30rpx;
box-sizing: border-box; box-sizing: border-box;
>view:nth-of-type(1) { > view:nth-of-type(1) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
>view:nth-of-type(2) { > view:nth-of-type(2) {
width: 520rpx; width: 520rpx;
text-align: center; text-align: center;
/* margin: auto; */ /* margin: auto; */
} }
image { image {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
} }
} }
} }
} }
.tab-list { .tab-list {
display: flex; display: flex;
padding: 30rpx; padding: 30rpx;
.tab-list-item { .tab-list-item {
width: 88rpx; width: 88rpx;
height: 40rpx; height: 40rpx;
margin-right: 40rpx; margin-right: 40rpx;
position: relative; position: relative;
font-size: 20rpx; font-size: 20rpx;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
background-color: #FFFFFF; background-color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 8rpx; border-radius: 8rpx;
&.active {
font-weight: 400;
&.active { color: #333333;
font-weight: 400; background-color: #e6f791;
color: #333333; }
background-color: #E6F791; }
} }
}
}
</style> </style>