Skip to content

C
cust-app
Commit d31815b6 authored by liwei's avatar liwei
Browse files
Options

修改了排行榜页面

parent 04df1766
Hide whitespace changes
Inline Side-by-side
Showing with 668 additions and 155 deletions
pages/tab/index.vue
View file @ d31815b6
......@@ -140,17 +140,6 @@
</view>
</view>
</view>
<!-- <view class="footer-fixed" :class="{ 'safe-bottom': !showTabbar }"> -->
<view class="footer-fixed">
<view class="left" @click="logion(userData.id, false, '../../static/images/clo.png')">
<image src="../../static/images/clo.png" style="width: 100%;height: 100%;;" mode="aspectFill">
</image>
</view>
<view class="right" @click="logion(userData.id, true, '../../static/images/con1.png')">
<image src="../../static/images/con1.png" style="width: 100%;height: 100%;;" mode="aspectFill">
</image>
</view>
</view>
<!-- v-show="showAnima" -->
<image v-if="showAnima" :src="animUrl" mode="aspectFill" class="animate-middel-top"></image>
<image v-show="showArrowDown" src="../../static/images/home/arrow_down_sm.png" mode="aspectFill"
......
pages/tab/rank.vue
View file @ d31815b6
<template>
<view>
<view class="box">
<u-navbar :bgColor="bgColor" :placeholder="true">
<view class="u-nav-slot" slot="left">
<view class="text">排行榜</view>
</view>
<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
<z-paging-swiper>
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
<template #top>
<view class="">
<u-navbar :placeholder="true">
<template slot="left">
<u-tabs :list="list" @click="tabClick" :current="current" lineColor="#86A6F3" :activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.2)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
</u-tabs>
</template>
</u-navbar>
</view>
<scroll-view scroll-y="true" :style="{height: viewHeight +'rpx'}">
<view style="background-image: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);position: relative;">
<view class="container">
<view style="margin: auto 180rpx;padding-top: 50rpx;">
<u-subsection bgColor="#ffffff80" :list="list" :current="current" fontSize="15"
@change="sectionChange"></u-subsection>
</view>
<view style="margin-top: 20rpx;">
<u--text :bold="false" size="15" color="#ffffff" align="center" text="排行榜更新延迟在24小时之内" />
</view>
</view>
<view class="top">
<!-- 第二名 -->
<view class="two">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/two.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[1].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="26" color="#070707" align="center"
:text="rankList[1].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="36" color="#4facfe" align="right"
:text="rankList[1].hours" />
<u--text :bold="false" size="26" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第一名 -->
<view class="one">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/other_pages/static/rank/one.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="26" color="#070707" align="center"
:text="rankList[0].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 60rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="36" color="#4facfe" align="right"
:text="rankList[0].hours" />
<u--text :bold="false" size="26" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第三名 -->
<view class="three">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/other_pages/static/rank/three.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="26" color="#070707" align="center"
:text="rankList[2].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="36" color="#4facfe" align="right"
:text="rankList[2].hours" />
<u--text :bold="false" size="26" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
<!-- <ItemVue v-for="item in arr" :key="item.id" @delete="deleteFn" :info="item"
" @praise="praise" @close="isOpen = false" @open="isOpen = true" /> -->
<ListVue ref="listItem" @selectShare="selectShare" :tabIndex="index" :userInfo="userInfo"
:currentIndex="current" @changeOpen="changeOpen"></ListVue>
</swiper-item>
</swiper>
</z-paging-swiper>
</template>
<script>
import ELM from '@/components/elm-toast/index.vue';
import ItemVue from '../components/Item.vue';
import empty from '@/components/empty.vue'
import {
WS
} from '@/util/wsConfig.js'
import ListVue from '../components/List.vue';
export default {
// 复制下面这行 options 代码
options: {
styleIsolation: 'shared'
},
components: {
ItemVue,
empty,
ELM
ListVue
},
data() {
return {
current: 0,
viewHeight: 500,
list: ['全国排名'],
key:1,
bgColor: '#F4F5F9',
option: [{
text: '删除',
style: {
backgroundColor: '#FF8080'
}
}],
total: 0,
list: [
{
name: '按序号'
},
{
name: '按票数',
},
],
params: {
pageIndex: 1,
pageSize: 10
pageSize: 4,
tabType: 'RECOMMEND'
},
count: 0,
isShow: false,
ownerId: null,
timeoutObj: null,
reConnect: true,
socketTask: null,
nologin: '',
current: 1, // tabs组件的current值，表示当前活动的tab选项
arr: [],
total: 0,
userInfo: {},
selectInfo: {},
isOpen: false,
num: 0,
isLoginPop: false,
tipMsg: '',
isConfirm: false
};
},
onLoad() {
if (uni.getStorageSync('info') != '') {
this.userInfo = uni.getStorageSync('info');
} else {
this.userInfo = {
id: 0
}
}
// this.getList(true)
},
onShow() {
this.getNum()
if (uni.getStorageSync("isRefresh")) {
this.current = 1
this.$refs.listItem[1].reload()
uni.setStorageSync("isRefresh", false)
}
},
// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
onShareAppMessage(res) {
if (res.from == "button") {
return {
title: this.selectInfo.content,
path: '/pagescommunity/dynamicDetail/dynamicDetail?id=' + this.selectInfo.id,
imageUrl: this.selectInfo.img[0]
}
} else {
return {
title: "动态列表",
path: '/pages/tab/community',
}
}
},
// 自定义页面的分享到朋友圈
onShareTimeline(res) {
return {
title: "动态列表",
path: '/pages/tab/community',
}
},
methods: {
sectionChange(index) {
this.current = index
changeOpen(value) {
this.isOpen = value
},
selectShare(value) {
this.selectInfo = value
},
// swiper滑动结束
swiperAnimationfinish(e) {
this.current = e.detail.current;
},
// 获取未读消息数
getNum() {
this.$myRequest({
url: `/nostalgia/articleMessage/unread`,
withToken: true,
method: 'GET',
}).then(res => {
this.num = res.data != null ? res.data.data : 0;
})
},
// 删除
deleteFn(value) {
this.$myRequest({
url: `nostalgia/article/article/${value.id}`,
withToken: true,
method: 'DELETE',
}).then(res => {
if (res.data.code == 200) {
let idx = this.arr.findIndex(item => item.id == value.id)
this.arr.splice(idx, 1)
this.total -= 1
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
})
},
// 点赞
praise(value) {
console.log("进来了")
let obj = {
...value,
}
let url = ''
if (obj.isLike) {
url = 'nostalgia/article/cancel/praise'
obj.likeCount -= 1
} else {
url = 'nostalgia/article/praise'
obj.likeCount += 1
}
this.$myRequest({
url,
data: {
id: value.id,
praiseType: "ARTICLE"
},
withToken: true,
method: 'PUT',
}).then(res => {
if (res.data.code == "200") {
obj.isLike = !value.isLike
let idx = this.arr.findIndex(item => item.id == obj.id)
this.arr.splice(idx, 1, obj)
} else {
console.log(res.data.msg)
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
return;
}
})
},
onRefresh() {
this.getList(true)
// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
setTimeout(() => {
this.$refs.paging.complete();
}, 1000)
},
actionClick(i) {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog();
tabClick({name}) {
if (name == "关注") {
this.params.tabType = "FOLLOW"
this.current = 0
} else if (name == "最近") {
this.params.tabType = "RECOMMEND"
this.current = 1
}
// else {
// this.params.tabType = "CITY"
// this.current = 2
// }
// this.params.pageIndex = 1
// this.getList(true)
},
goPage(path) {
if (uni.getStorageSync('info') != '') {
uni.navigateTo({
url: path
})
} else {
this.isLoginPop = true
}
},
getList(isFirst) {
if (isFirst) this.params.pageIndex = 1
this.$myRequest({
url: `/nostalgia/article/page`,
data: this.params,
withToken: true,
method: 'GET',
}).then(res => {
this.total = res.data.data.totalCount
if (isFirst) this.arr = []
this.arr = [...this.arr, ...res.data.data.rows].map(item => {
return {
...item,
isDel: item.userId == this.userInfo.id
}
})
})
},
goMessage() {
if (uni.getStorageSync('info') != '') {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog();
} else {
this.isLoginPop = true
}
},
getUserInfo(e) {
if (e == 0) {
this.isLoginPop = false;
return;
}
// #ifdef MP-WEIXIN
try {
wx.getUserProfile({
desc: '用于完善会员资料',
success: resinfo => {
wx.login({
success: res => {
if (res.code) {
console.log(res.code, resinfo);
this.setCode(res.code, resinfo);
} else {}
},
fail: err => {}
});
},
fail: errinfo => {
this.setCode(this.generateRandomString(10), 'null');
}
});
} catch {
wx.getUserInfo({
success: resinfo => {
wx.login({
success: res => {
if (res.code) {
console.log(res.code, resinfo);
this.setCode(res.code, resinfo);
} else {}
},
fail: err => {}
});
},
fail: errinfo => {}
});
}
// #endif
// #ifndef MP-WEIXIN
this.setCode("ip", 'null');
// #endif
},
async setCode(code, resinfo) {
const res = await this.$myRequest({
url: 'token/wxAppletLogin',
data: {
code: code
},
method: 'POST'
});
console.log(res, 'delshoucang');
var obj = {
code: code,
state: res.data.code,
nickName: resinfo != 'null' ? resinfo.userInfo.nickName : "匿名用户"
};
uni.setStorageSync('verification', obj);
if (res.data.code == 200) {
this.isLoginPop = false;
this.isConfirm = true;
this.tipMsg = "登录成功";
this.$refs.elm.showDialog();
var info = {
birthday: res.data.data.info.birthday,
city: res.data.data.info.city,
gender: res.data.data.info.gender,
headPortrait: res.data.data.info.headPortrait,
id: res.data.data.info.id,
nickName: res.data.data.info.nickName
};
uni.setStorageSync('info', info);
uni.setStorageSync('token', res.data.data.token);
} else if (res.data.code == 11002) {
this.isLoginPop = false;
uni.reLaunch({
url: '/pagesintroduction/selfIntroduction?code=' + code
});
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
confirm() {
this.isConfirm = false;
},
generateRandomString(length) {
let result = uni.getStorageSync('touristopenid');
if (result != null&&result!="") {
return result;
}else{
result='';
}
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // 包含大小写字母和数字的所有字符集合
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters[randomIndex];
}
var now = new Date();
var year = now.getFullYear(); // 年份
var month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份（注意要加上1）
var day = now.getDate().toString().padStart(2, '0'); // 天数
var hours = now.getHours().toString().padStart(2, '0'); // 小时
var minutes = now.getMinutes().toString().padStart(2, '0'); // 分钟
var seconds = now.getSeconds().toString().padStart(2, '0'); // 秒数
result = "touristopenid" + result + (+year + month + day + hours + minutes + seconds);
uni.setStorageSync('touristopenid', result);
return result;
}
}
}
</script>
<style lang="scss" scoped>
.container {
// background-color: #4CD964;
margin: auto 20rpx;
height: 440rpx;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: PingFang HK, PingFang HK;
}
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 315rpx;
line-height: 44rpx;
.u-navbar .left {
width: 28rpx;
height: 32rpx;
}
.box {
padding: 0 32rpx 30rpx 32rpx;
::v-deep item-vue:first-child {
.item {
border: none;
margin-top: 0;
}
}
}
.swiper {
height: 100%;
}
::v-deep .itemm:first-child .item {
border: none !important;
margin-top: 0;
}
::v-deep .u-badge {
font-weight: 600;
}
</style>
pagesRank/index/index.vue 0 → 100644
View file @ d31815b6
<template>
<view>
<view class="box">
<u-navbar :bgColor="bgColor" :placeholder="true">
<view class="u-nav-slot" slot="left">
<view class="text">排行榜</view>
</view>
</u-navbar>
</view>
<scroll-view scroll-y="true" :style="{height: viewHeight +'rpx'}">
<view style="background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);position: relative;">
<view class="container">
<view style="margin: auto 180rpx;padding-top: 50rpx;">
<u-subsection bgColor="#ffffff80" :list="list" :current="current" fontSize="15"
@change="sectionChange"></u-subsection>
</view>
<view style="margin-top: 20rpx;">
<u--text :bold="false" size="15" color="#ffffff" align="center" text="排行榜更新延迟在24小时之内" />
</view>
</view>
<view class="top">
<!-- 第二名 -->
<view class="two">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/two.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[1].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[1].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[1].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第一名 -->
<view class="one">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/one.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[0].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 60rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[0].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
<!-- 第三名 -->
<view class="three">
<view style="padding: 0;margin-left: 95rpx;margin-bottom: -10rpx;">
<u-icon name="/static/images/rank/three.png" size="50rpx"></u-icon>
</view>
<view
style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="false" size="15" color="#070707" align="center"
:text="rankList[2].user.nickname" />
</view>
</view>
<view
style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view
style="display: flex; justify-content: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="#4facfe" align="right"
:text="rankList[2].hours" />
<u--text :bold="false" size="15" color="#4facfe" align="" text="小时" />
</view>
</view>
</view>
</view>
</view>
<view>
<view class="container-list">
<view class="list-item" :class="{activeItem:index%2==0}" v-for="(item,index) in rankList.slice(3)" :key="index">
<view>
<u-row>
<u-col span="2">
<view style="">
<u--text :bold="true" size="15" align="center" color="#000000" :text="index+4"/>
</view>
</u-col>
<u-col span="2">
<view style="margin-left: -10rpx;">
<u-avatar :src="item.user.avatarUrl" size="80rpx"/>
</view>
</u-col>
<u-col span="5">
<u--text :bold="true" size="15" align="left" color="#000000" :text="item.user.nickname"/>
</u-col>
<u-col span="3">
<view style="display: flex; justify-content: flex-start;">
<u--text :bold="true" size="20" color="#4facfe" align="right" :text="item.hours" />
<u--text :bold="false" size="15" color="#4facfe" align="left" text="小时" />
</view>
</u-col>
</u-row>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import ELM from '@/components/elm-toast/index.vue';
import empty from '@/components/empty.vue'
import {
WS
} from '@/util/wsConfig.js'
export default {
components: {
empty,
ELM
},
data() {
return {
current: 0,
viewHeight: 1400,
list: ['全国排名'],
key:1,
bgColor: '#F4F5F9',
option: [{
text: '删除',
style: {
backgroundColor: '#FF8080'
}
}],
total: 0,
params: {
pageIndex: 1,
pageSize: 10
},
count: 0,
isShow: false,
ownerId: null,
timeoutObj: null,
reConnect: true,
socketTask: null,
nologin: '',
tipMsg: '',
isConfirm: false,
rankList: [
{
hours:10,
user: { nickname: '测试用户1', avatarUrl: '',}
},
{
hours:11,
user: { nickname: '测试用户2', avatarUrl: '',}
},
{
hours:12,
user: { nickname: '测试用户3', avatarUrl: '',}
},
{
hours:13,
user: { nickname: '测试用户4', avatarUrl: '',}
},
{
hours:14,
user: { nickname: '测试用户5', avatarUrl: '',}
},
{
hours:15,
user: { nickname: '测试用户6', avatarUrl: '',}
},
],
}
},
onShow() {
},
methods: {
sectionChange(index) {
this.current = index
},
actionClick(i) {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog();
},
}
}
</script>
<style lang="less" scoped>
.container {
// background-color: #4CD964;
margin: auto 20rpx;
height: 440rpx;
}
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 315rpx;
line-height: 44rpx;
}
}
.top {
display: flex;
justify-content: space-around;
margin: auto 20rpx;
position: absolute;
bottom: -80rpx;
// background-color: #005500;
.two {
position: absolute;
bottom: 0rpx;
left: 0rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
// box-shadow:0px -10rpx 20rpx 0rpx #a8aaab;
background-color: #ffffff;
width: 236rpx;
height: 280rpx;
z-index: 1;
// text-align: center;
// align-items: center;
}
.one {
position: absolute;
bottom: 0rpx;
left: 236rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-shadow: 0px -6px 10px -1px darkgrey;
background-color: #ffffff;
width: 236rpx;
height: 320rpx;
z-index: 2;
}
.three {
position: absolute;
bottom: 0rpx;
left: 470rpx;
border-radius: 0rpx 20rpx 20rpx 0rpx;
// box-shadow:0px 0px 10px #ccced0;
background-color: #ffffff;
width: 240rpx;
height: 280rpx;
z-index: 1;
}
}
.container-list {
border-radius: 20rpx;
margin: auto 20rpx;
padding: auto 20rpx;
margin-top: 100rpx;
background-color: #ffffff;
// height: 400rpx;
// margin-bottom: 100rpx;
}
.activeItem {
background-color: #f1f1f1;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment