前端
This commit is contained in:
@QQNZX
parent
97b28daba3
commit
742f0f15d9
@ -2,11 +2,9 @@
|
||||
module.exports = {
|
||||
|
||||
// baseUrl: 'https://vue.ruoyi.vip/prod-api',
|
||||
// baseUrl: 'http://192.168.0.196:8081/',
|
||||
baseUrl: 'http://192.168.1.6:8008/',
|
||||
|
||||
baseUrl: 'http://192.168.0.196:8080/',
|
||||
// baseUrl: 'http://192.168.1.6:8008/',
|
||||
// baseUrl: 'http://192.168.1.5:8002/cdJdc',
|
||||
|
||||
imagesUrl: 'http://www.nuoyunr.com/lananRsc',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<view class="box-centenr">
|
||||
<view class="box-centenr-title">我的服务</view>
|
||||
<view class="wrap-box">
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="goReder">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/lpk.png"></image>
|
||||
</view>
|
||||
@ -177,6 +177,11 @@
|
||||
url: '/pagesMy/myorder/myorder?id=' + id
|
||||
})
|
||||
},
|
||||
goReder() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesHome/RechargeRecords/RechargeRecords'
|
||||
})
|
||||
},
|
||||
gotodaby() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/today/today'
|
||||
|
||||
@ -3,21 +3,78 @@
|
||||
<view class="container">
|
||||
<view class="my-header">
|
||||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||||
<view class="my-text">充值记录</view>
|
||||
<view class="my-text">兑换记录</view>
|
||||
<view class="my-icons"></view>
|
||||
</view>
|
||||
<!-- 顶部区域 -->
|
||||
|
||||
<view class="ail" v-if="list.length != 0 ">
|
||||
<view class="box-order" v-for="(item,index) in list" :key="index">
|
||||
<view class="or-box-top">
|
||||
<view class="">{{item.recordName}}</view>
|
||||
<view class="chengg">充值成功</view>
|
||||
</view>
|
||||
|
||||
<view class="but-box">
|
||||
<view class="huis">充值金额</view>
|
||||
<view class="">￥{{item.rechargeBalance}}</view>
|
||||
</view>
|
||||
|
||||
<view class="but-box" v-if="item.recordName == '储值卡'">
|
||||
<view class="huis">优惠合计</view>
|
||||
<view class="reds">￥{{item.obtain}}</view>
|
||||
</view>
|
||||
<view class="but-box" v-else>
|
||||
<view class="huis">所得升数</view>
|
||||
<view class="reds">{{item.obtain}}</view>
|
||||
</view>
|
||||
<view class="but-box">
|
||||
<view class="huis">订单时间</view>
|
||||
<view class="">{{item.createTime}}</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-if="list.length == 0 " mode="coupon" text="内容为空"
|
||||
icon="http://cdn.uviewui.com/uview/empty/coupon.png">
|
||||
</u-empty>
|
||||
<u-loadmore :status="status" v-if="show == true" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import request from '../../utils/request'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
tindex: 0,
|
||||
status: 'loading',
|
||||
totalDetail: '',
|
||||
show: false,
|
||||
|
||||
list: [],
|
||||
query: {
|
||||
mtUserId: '',
|
||||
storeId: '',
|
||||
recordName: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tapList: [{
|
||||
text: "全部"
|
||||
},
|
||||
{
|
||||
text: "储值卡"
|
||||
},
|
||||
{
|
||||
text: "升数卡"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -25,11 +82,41 @@
|
||||
|
||||
components: {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getGiftRecords()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.show = true
|
||||
if (this.list.length >= this.totalDetail) {
|
||||
uni.showToast({
|
||||
title: '没有下一页数据',
|
||||
icon: 'none'
|
||||
})
|
||||
this.status = "nomore"
|
||||
} else {
|
||||
this.query.pageNo++
|
||||
this.getAllOrderList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
|
||||
getGiftRecords() {
|
||||
request({
|
||||
url: '/business/marketingActivity/cardGift/selectAllRecords',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -37,11 +124,12 @@
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background: #f4f5f6;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 88px;
|
||||
}
|
||||
@ -66,4 +154,96 @@
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.tap-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tap-box {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.gang {
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
// background: #0000ff;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.act {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.lan {
|
||||
background: #0000ff;
|
||||
}
|
||||
|
||||
.box-order {
|
||||
width: 95%;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.or-box-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
}
|
||||
|
||||
.chengg {
|
||||
color: #1678ff;
|
||||
}
|
||||
|
||||
.but-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.reds {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.huis {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.end-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.anniu {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
background-color: #1678ff;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -321,7 +321,7 @@
|
||||
},
|
||||
goRechargeRecords() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/Recharge/Recharge'
|
||||
url: '/pagesHome/RechargeRecords/RechargeRecords'
|
||||
})
|
||||
},
|
||||
//获取本店员工列表
|
||||
@ -514,4 +514,4 @@
|
||||
width: 20%;
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,520 +1,324 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- <view class="my-header">
|
||||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||||
<view class="my-text">核销记录</view>
|
||||
<view class="my-icons"></view>
|
||||
</view> -->
|
||||
<view class="">
|
||||
<view class="content">
|
||||
<view class="container">
|
||||
<view class="my-header">
|
||||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||||
<view class="my-text">会员</view>
|
||||
<view class="my-icons"></view>
|
||||
</view>
|
||||
<!-- 顶部区域 -->
|
||||
<view class="top-box">
|
||||
<view class="b-top">
|
||||
<view style="width: 70%;">
|
||||
<view class="title-size">V2会员</view>
|
||||
<view class="min-size" style="margin-bottom: 20px;">升级会员享更多特权</view>
|
||||
<view class="min-size" style="margin-bottom: 10px;">在获得358可升级至钻石会员</view>
|
||||
<u-line-progress :percentage="30" activeColor="#2F72F7"></u-line-progress>
|
||||
</view>
|
||||
<view class="right-img">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="c-box">
|
||||
<view class="title-bai">会员权益</view>
|
||||
<view class="wrap-box">
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
<view class="box-ba">
|
||||
<view class="min-box">
|
||||
<image src="../../static/imgs/vipxz.png" mode=""></image>
|
||||
</view>
|
||||
<view class="">会员特权</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 340px; width: 100%;"></view>
|
||||
<view class="bottom-box">
|
||||
<view class="bottom-bai-box">
|
||||
<view class="b-top-bt">
|
||||
<view class="title">每日任务</view>
|
||||
<view class="times">每天04:00更新</view>
|
||||
</view>
|
||||
<view class="b-top-bt" style="margin: 10px auto; ">
|
||||
<view class="disa">
|
||||
<view class="btimg">
|
||||
<image src="../../static/imgs/dljf.png" mode=""></image>
|
||||
</view>
|
||||
<view class="an-title">每日登录</view>
|
||||
</view>
|
||||
<view class="anniu"> 去完成 </view>
|
||||
</view>
|
||||
<view class="b-top-bt" style="margin: 10px auto; ">
|
||||
<view class="disa">
|
||||
<view class="btimg">
|
||||
<image src="../../static/imgs/dljf.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<swiper class="swiper">
|
||||
<swiper-item v-for="(items,indexs) in levelList" :key="indexs">
|
||||
<div class="topBg">
|
||||
<view class="progress b-card" :class="{'b-level-1': items.level === 1,
|
||||
'b-level-2': items.level === 2,'b-level-3': items.level === 3,'b-level-4': items.level === 4}">
|
||||
<view class="heard">
|
||||
尊贵会员
|
||||
</view>
|
||||
<view class="title">
|
||||
这是一段描述：感谢您支持开源项目！
|
||||
</view>
|
||||
<view class="progress-artice">
|
||||
<view class="outer">
|
||||
<view class="inside" :style="{'width': items.ratio+'%'}">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="content-item" :style="{'flex':item.flex}"
|
||||
v-for="(item,index) in items.list" :key="index">
|
||||
<view class="rangle">
|
||||
<view class="rangle-text" v-show="index<items.list.length-1"></view>
|
||||
<image class="rangle-gift"
|
||||
src="https://zhoukaiwen.com/img/medal/icon-medal-gift.png" mode=""
|
||||
v-show="index == items.list.length-1"></image>
|
||||
</view>
|
||||
<view class="level">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>分享小程序解锁其他开源项目！</text>
|
||||
<text class="text-des">1.5k人已解锁</text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
|
||||
<view class="medal">
|
||||
<view class="medal-title">
|
||||
<text>特别奖章</text>
|
||||
<text class="text">0个</text>
|
||||
</view>
|
||||
|
||||
<view class="medal-box">
|
||||
<view class="medal-item" v-for="(item,index) in medalList" :key="index">
|
||||
<image class="img" :src="item.imgUrl">
|
||||
</image>
|
||||
<view class="title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="text">
|
||||
{{item.text}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="an-title">每日登录</view>
|
||||
</view>
|
||||
<view class="anniu"> 去完成 </view>
|
||||
</view>
|
||||
<view class="b-top-bt" style="margin: 10px auto; ">
|
||||
<view class="disa">
|
||||
<view class="btimg">
|
||||
<image src="../../static/imgs/dljf.png" mode=""></image>
|
||||
</view>
|
||||
<view class="an-title">每日登录</view>
|
||||
</view>
|
||||
<view class="anniu"> 去完成 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: [{
|
||||
level: 1,
|
||||
ratio: 10,
|
||||
list: [{
|
||||
flex: 2,
|
||||
achieve: 25,
|
||||
name: 'LV.1'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 50,
|
||||
name: 'LV.2'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 75,
|
||||
name: 'LV.3'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 100,
|
||||
name: 'LV.4'
|
||||
}]
|
||||
}, {
|
||||
level: 2,
|
||||
ratio: 50,
|
||||
list: [{
|
||||
flex: 1,
|
||||
achieve: 14.2,
|
||||
name: 'LV.1'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 42.8,
|
||||
name: 'LV.2'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 71.5,
|
||||
name: 'LV.3'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 100,
|
||||
name: 'LV.4'
|
||||
}]
|
||||
}, {
|
||||
level: 3,
|
||||
ratio: 80,
|
||||
list: [{
|
||||
flex: 1,
|
||||
achieve: 14.2,
|
||||
name: 'LV.1'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 42.8,
|
||||
name: 'LV.2'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 71.5,
|
||||
name: 'LV.3'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 100,
|
||||
name: 'LV.4'
|
||||
}]
|
||||
}, {
|
||||
level: 4,
|
||||
ratio: 10,
|
||||
list: [{
|
||||
flex: 1,
|
||||
achieve: 14.2,
|
||||
name: 'LV.1'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 42.8,
|
||||
name: 'LV.2'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 71.5,
|
||||
name: 'LV.3'
|
||||
}, {
|
||||
flex: 2,
|
||||
achieve: 100,
|
||||
name: 'LV.4'
|
||||
}]
|
||||
}],
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
|
||||
|
||||
medalList: [{
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-1.png",
|
||||
title: "VIP专属",
|
||||
text: "成为VIP会员"
|
||||
}, {
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-2.png",
|
||||
title: "栏目真粉",
|
||||
text: "订阅10个栏目"
|
||||
}, {
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-3.png",
|
||||
title: "实力听霸",
|
||||
text: "完成200个音频"
|
||||
}, {
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-4.png",
|
||||
title: "时间管家",
|
||||
text: "完成50组短听"
|
||||
}, {
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-5.png",
|
||||
title: "养成习惯",
|
||||
text: "连续21天登录音频"
|
||||
}, {
|
||||
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-6.png",
|
||||
title: "乐享达人",
|
||||
text: "分享好友20次"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-header {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #1678ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 15px;
|
||||
padding-top: 40px;
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background: #2F3648;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.my-icons {
|
||||
width: 20px;
|
||||
.container {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
box-sizing: border-box;
|
||||
padding-top: 88px;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
.my-header {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #000;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 15px;
|
||||
padding-top: 40px;
|
||||
|
||||
.topBg {
|
||||
width: 100%;
|
||||
background: url(https://zhoukaiwen.com/img/qdpz/topBg.png);
|
||||
height: 400rpx;
|
||||
padding-top: 80rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.my-icons {
|
||||
width: 20px;
|
||||
|
||||
.b-card {
|
||||
background-color: #fefefe;
|
||||
background-image: linear-gradient(-45deg, #e8e9ec, #f2f2f2);
|
||||
padding: 30rpx 40rpx;
|
||||
margin: 0 30rpx;
|
||||
height: 500rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 2rpx 2rpx 2rpx #efeef3;
|
||||
color: #9a9ca1;
|
||||
}
|
||||
|
||||
.heard {
|
||||
color: #6f7275;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: #d8dcdd;
|
||||
}
|
||||
.top-box {
|
||||
width: 90%;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
background: linear-gradient(90deg, #EEF4FF 0%, #AEC9FF 100%);
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.outer {
|
||||
background-color: #d8dcdd;
|
||||
.b-top {
|
||||
color: #2F72F7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.inside {
|
||||
background-color: #6f7275;
|
||||
}
|
||||
}
|
||||
.right-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
.rangle {
|
||||
.rangle-text {
|
||||
background-color: #6f7275;
|
||||
}
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.b-level-1 {
|
||||
background-image: linear-gradient(45deg, #dde1ea, #a3abb8);
|
||||
color: #34424b;
|
||||
.title-size {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.heard {
|
||||
color: #34424b;
|
||||
}
|
||||
.min-size {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: #e4e9ed;
|
||||
}
|
||||
.c-box {
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
margin: 20px auto;
|
||||
height: 188px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
background-color: #e4e9ed;
|
||||
.title-bai {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inside {
|
||||
background-color: #34424b;
|
||||
}
|
||||
}
|
||||
.wrap-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.rangle {
|
||||
.rangle-text {
|
||||
background-color: #34424b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-level-2 {
|
||||
background-image: linear-gradient(45deg, #f0daa4, #d1a165);
|
||||
color: #323b4a;
|
||||
.box-ba {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.heard {
|
||||
color: #313a49;
|
||||
}
|
||||
.min-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 5px auto;
|
||||
|
||||
.text {
|
||||
background-color: #e4e7ec;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
background-color: #e4e7ec;
|
||||
.bottom-box {
|
||||
background: #F3F5F9;
|
||||
width: 100%;
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
height: 340px;
|
||||
|
||||
.inside {
|
||||
background-color: #313a49;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rangle {
|
||||
.rangle-text {
|
||||
background-color: #323b4a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-bai-box {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
|
||||
.b-level-3 {
|
||||
background-image: linear-gradient(45deg, #ddc1b5, #c59073);
|
||||
color: #333333;
|
||||
|
||||
.heard {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.outer {
|
||||
background-color: #e8e8e8;
|
||||
.b-top-bt {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.inside {
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.rangle {
|
||||
.rangle-text {
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
.times {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
}
|
||||
.btimg {
|
||||
|
||||
.b-level-4 {
|
||||
background-image: linear-gradient(45deg, #303030, #1a1a1a);
|
||||
color: #f0daa4;
|
||||
image {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.heard {
|
||||
color: #f0daa4;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: #f2e3c4;
|
||||
color: #77582a;
|
||||
}
|
||||
.anniu {
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
background: #EB3E67;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
.outer {
|
||||
background-color: #f2e3c4;
|
||||
}
|
||||
|
||||
.inside {
|
||||
background-color: #f2e3c4;
|
||||
}
|
||||
}
|
||||
.disa {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rangle {
|
||||
.rangle-text {
|
||||
background-color: #77582a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {}
|
||||
|
||||
.swiper {
|
||||
height: 600rpx;
|
||||
|
||||
.progress {
|
||||
.heard {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.progress-artice {
|
||||
margin-top: 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.outer {
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.inside {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
text-align: right;
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.rangle {
|
||||
height: 10rpx;
|
||||
line-height: 10rpx;
|
||||
margin-top: -10rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.rangle-text {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rangle-gift {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #cacdd0;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.achieveClass {
|
||||
background-color: #765528;
|
||||
}
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-top: 50rpx;
|
||||
margin-right: -20rpx;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
.level {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 60rpx;
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.text-des {
|
||||
font-size: 20rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.medal {
|
||||
margin: 10rpx 30rpx;
|
||||
|
||||
.medal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #30333b;
|
||||
padding: 0 10rpx;
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 300;
|
||||
color: #7c7f81;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.medal-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.medal-item {
|
||||
width: 33.3333333333333%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
line-height: 60rpx;
|
||||
font-weight: 600;
|
||||
color: #30333b;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #7c7f81;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.an-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user