vip功能

This commit is contained in:
liuyuan
2025-02-19 11:50:43 +08:00
parent 0b975c2418
commit 3afba2870e
34 changed files with 793 additions and 2303 deletions

BIN
pages/mine/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -17,183 +17,63 @@
<view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
<view class="per_mes">
<view style="display: flex; align-items: center; flex-direction: column">
<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar != null"
class="per_mes_img color_shandow"></image>
</view>
<image src="@/static/icon/home_icon_logo.png" v-if="userMes.avatar == null"
class="per_mes_img color_shandow"></image>
<view class="userInfoBox" style="width: calc(100% - 120rpx)">
<view class="name">昵称{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
<view class="name" v-if="!userMes.userVip" style="
font-size: 28rpx;
font-weight: 500;
color: #606266 !important;
">普通用户</view>
<view style="display: flex; align-items: center" v-else-if="userMes.userVip&&$platform=='ios'">
<view class="user_vip_box1">
<view v-if="userMes.vip == 1" class="user_vip super user_vip_super">超级VIP</view>
<view v-if="userMes.vip == 3" class="user_vip user_vip_zmzm">众妙之门VIP</view>
<view v-if="userMes.vip == 2" class="user_vip user_vip_wumen">吴门医述VIP</view>
</view>
<view class="viptime" v-if="userMes.vip != 0">会员时长{{
userMes.userVip.endTime.split(" ")[0]
}}&nbsp;到期</view>
<view :style="hasVipType2?'width: 170rpx;':''">
<view style="display: flex; align-items: center; flex-direction: column">
<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar"
class="per_mes_img color_shandow"></image>
<image src="@/static/icon/ic_login_health.png" v-else
class="per_mes_img color_shandow"></image>
</view>
<view class="user_vip_box" v-if="isAndorid&&hasVipType1 || isAndorid&&hasVipType2">
<view class="user_vip super" :style="hasVipType2?'width: 170rpx;':''">
<view class="user_vip_item" v-if="hasVipType1"><text>医学</text><image src="@/static/icon/chao_svip.png"></image></view>
<view class="user_vip_item" v-if="hasVipType2"><text>国学心理学</text><image src="@/static/icon/chao_svip.png"></image></view>
</view>
</view>
<!-- -->
<!-- <view class="phone" v-if="userMes.tel">手机号({{ userMes.tel }})</view>
<view class="phone email" v-if="userMes.email">邮箱({{ userMes.email }})</view>
-->
<!-- <text class="tong">累计读书5本
<span style="margin: 0 20upx;">|</span> 今日读50分钟
</text> -->
</view>
<br clear="both" />
<view class="userInfoBox" style="margin-left: 30rpx;">
<view class="name">昵称{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
<view class="name" style="color: #606266 !important;font-weight: normal;font-size: 28rpx;" v-if="userMes.tel">手机号({{ userMes.tel }})</view>
<template v-if="isAndorid&&textList.length>0">
<view class="vip_type">
<view class="vip_type_item" v-for="(item,index) in textList" :key="index">
{{item}}<image src="@/static/icon/chao_vip.png"></image>
</view>
</view>
</template>
</view>
</view>
<!-- <view class="now_vip" v-if="userMes.vip==0">
<text>
<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
开通会员畅享海量内容
</text>
<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
</view> -->
<!-- <view class="now_vip" v-if="userMes.vip==1">
<text>
<image src="../../static/icon/mine_v.png"></image>
尊贵的VIP会员
<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
</text>
<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
</view> -->
<view v-if="$platform=='android'" style="
padding: 20rpx 20rpx 0;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
">
<view v-if="isAndorid" style="
padding: 20rpx 20rpx 0;
margin-top: 50rpx;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
">
<template>
<view v-if="!userMes.userVip" :class="`chong_zhi boxShadow box_fillet vip_box`"
<view class="chong_zhi boxShadow box_fillet vip_box"
@click="onPageJump('/pages/mine/vip/index')">
<view class="noVip">
<view class="zhanghu PM_font" style="text-align: center">
<image class="vip_image" src="@/static/icon/mine_p.png" mode="aspectFit">
</image>
<text style="color: #452808; letter-spacing: 2rpx">超级VIP</text>
</view>
<view style="margin-left: 20rpx">加入会员畅享更多专属权益</view>
<view class="right_arrow" style="color: #fff">
<!-- <image src="@/static/icon/mine_p.png" mode="aspectFit"> </image> -->
>
</view>
<!-- <swiper
:autoplay="true"
:interval="3000"
:duration="1000"
style="width: 100%; height: 60rpx"
>
<swiper-item
v-for="(item, index) in swiperList"
style="width: 100%; height: 100%"
>
<view
style="
background: linear-gradient(
130deg,
rgb(46, 103, 106) 0%,
rgb(114, 173, 146) 100%
)
text;
text-align: center;
"
:style="item.style"
v-html="item.name"
></view>
</swiper-item>
</swiper> -->
</view>
</view>
<view v-else :class="`chong_zhi boxShadow box_fillet vip_box hasVipBox ${
userMes.vip == 1
? 'hasVipSuper'
: userMes.vip == 2
? 'hasVipWumen'
: userMes.vip == 3
? 'hasVipZmZm'
: ''
}`" @click="onPageJump('/pages/mine/vip/index')">
<view class="current_identity">当前身份</view>
<view class="hasVip" style="position: relative">
<view class="zhanghu" style="text-align: center">
<view class="vbg" v-if="userMes.vip == 2 || userMes.vip == 3">V</view>
<image v-if="userMes.vip == 1" class="vip_image" src="@/static/icon/quanyi.png"
mode="aspectFit">
</image>
<!-- <image
v-if="userMes.vip == 3"
class="vip_image"
src="@/static/icon/quanyiZM.png"
mode="aspectFit"
>
</image>
<image
v-if="userMes.vip == 2"
class="vip_image"
src="@/static/icon/quanyi.png"
mode="aspectFit"
>
</image> -->
<view v-if="userMes.vip == 1" class="vip_info">
<view class="PM_font vip_name">超级VIP</view>
</view>
<view v-if="userMes.vip == 3" class="vip_info">
<view class="PM_font vip_name">众妙之门VIP</view>
</view>
<view v-if="userMes.vip == 2" class="vip_info">
<view class="PM_font vip_name">吴门医述VIP</view>
</view>
<view class="viptime">会员时长{{
userMes.userVip.endTime.split(" ")[0]
}}&nbsp;到期</view>
</view>
<view class="zhanghu quanyi" style="text-align: center">
<!-- <image
class="vip_image"
src="@/static/icon/quanyi.png"
mode="aspectFit"
>
</image> -->
<view v-if="userMes.vip == 1" class="vip_info vip_info_bottom">
<view style="color: #d33b1b">尊享 5 项专属特权</view>
<view class="xufei">立即续费</view>
</view>
<view v-if="userMes.vip == 2" class="vip_info vip_info_bottom">
<view style="">尊享 4 项专属特权,</view>
<view class="xufei">立即续费</view>
</view>
<view v-if="userMes.vip == 3" class="vip_info vip_info_bottom">
<view style="">尊享 4 项专属特权</view>
<view class="xufei">立即续费</view>
</view>
<view style="display: flex; align-items: center;">
<view class="zhanghu PM_font" style="text-align: left; margin-left: 15rpx;">
<image class="vip_image" src="@/static/icon/mine_p.png" mode="aspectFit"></image>
<text style="color: #fff; font-size: 60rpx;" v-if="vipList.length==0">VIP</text>
</view>
<view class="vip_infor" v-if="vipList&&vipList.length>0">
<view class="vip_infor_item" v-for="(item, index) in vipList" :key="index" :class="{expired: isExpired(item.endTime.split(' ')[0])}">
<text>{{item.text}}VIP</text>
<text v-if="isExpired(item.endTime.split(' ')[0])">{{item.endTime.split(' ')[0]}} 已到期</text>
<text v-else>有效期到 {{item.endTime.split(' ')[0]}})</text>
</view>
</view>
<view v-else class="vip_null" style=" padding-left: 30rpx;">办理VIP畅享更多专属权益</view>
</view>
<view class="vip_btn"><button v-if="vipList.length==0">办理</button><button v-else>续费</button></view>
</view>
</view>
</template>
@@ -207,13 +87,6 @@
justify-content: space-between;
">
<view class="chong_zhi boxShadow box_fillet chongzhi_box">
<!-- <view
class="zhanghu"
@click="onPageJump('/pages/mine/wallet/index/index')"
>
我的账户
<image src="@/static/icon/icon_right.png" class="rightArrow"></image>
</view> -->
<view class="chong_list">
<view class="left">
<view class="chong_list_item" style="
@@ -225,12 +98,6 @@
<view class="pay_item_img">
天医币<u-icon @click.native.stop="openInfo()" name="question-circle"
style="float: right; margin: 0 6rpx"></u-icon>
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/pay_3.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx; display: flex">{{
@@ -246,12 +113,6 @@
" @click="onPageJump('/pages/mine/wallet/jf/index')">
<view class="pay_item_img">
积分
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/jifen2.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx">{{
@@ -259,13 +120,6 @@
}}</view>
</view>
</view>
<!-- v-if="iosHide" -->
<!-- <view v-if="iosHide" class="chong_list_item">
<b>{{ userMes.conponsCount }}</b>
优惠券
</view> -->
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')"> </b> -->
<view class="chong_list_item" style="
display: flex;
align-items: center;
@@ -278,24 +132,6 @@
</view>
</view>
</view>
<!-- <view class="list_box order_box">
<view class="xiugai boxShadow box_fillet">
<view class="title">我的订单</view>
<view class="cate_box">
<view class="cate_item_box" v-for="(v, i) in orderList"
@click="goOrderList(`/pages/bookShop/orderList`, 'mine', i)">
<view class="cate_item_border">
<image :src="v.imgUrl" mode="aspectFill" style="width: 58rpx; height: 58rpx"></image>
<u-badge type="error" max="99" :value="v.badge.value"
style="position: absolute; top: -10rpx; right: -10rpx"></u-badge>
</view>
<view class="cate_item_name">{{ v.title }}</view>
</view>
</view>
</view>
</view> -->
<view class="list_box">
<view class="xiugai boxShadow box_fillet">
<common-list :dataList="pageList" @hancleClick="handleClickTab" label="name">
@@ -306,34 +142,6 @@
<view> </view>
</template>
</common-list>
<!-- <view class="nav_list" @click="onPageJump('../clock/clockList')">
<text>我的打卡</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../listen/home')" v-if="iosHide">
<text>我的听书</text>
</view> -->
<!-- 暂时去掉 -->
<!-- <view class="nav_list" @click="onPageJump('../listen/setListen')" v-if="iosHide">
<text>听书设置</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../peanut/myComments')">
<text>我的评价</text>
</view> -->
<!-- 暂时去掉 -->
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
<text>电子书购买记录</text>
</view> -->
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookRecord')">
<text>阅读记录</text>
</view> -->
<!-- <view class="nav_list" @click="onGoing()">
<text>帮助与反馈11111</text>
</view> -->
<!-- <view class="nav_list" @click="newOnShare" v-if="isAndorid"> -->
</view>
</view>
</view>
@@ -363,20 +171,14 @@
justify-content: center;
">
<!-- <u-button
size="small"
text="不同意"
@click="protocolShow=false"
></u-button> -->
<u-button style="width: 200rpx; float: center" :plain="true" text="知道啦" color="#9b9b9b"
<u-button style="width: 200rpx; float: center" :plain="true" text="知道啦" color="#9b9b9b"
size="small" @click="infoShow = false"></u-button>
</view>
</view>
</view>
</view>
</u-popup>
<!-- <u-modal :show="infoShow" title="提示信息" :content=""></u-modal> -->
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
@@ -385,7 +187,6 @@
<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
import {
mapState,
mapMutations
@@ -460,11 +261,6 @@
type: "switchTab",
},
// {
// name: "购物车",
// url: "../peanut/shopping",
// type: "pageJump",
// },
{
name: "个人资料",
url: "/pages/mine/userInfo/persData",
@@ -491,22 +287,19 @@
name: "问题反馈/申诉",
url: "/pages/homePage/index/workOrder",
type: "workOrder"
},
//{ name: "设置", url: "/pages/mine/set/index", type: "pageJump" },
// { name: "退出登录", type: "quitLogin" },
// { name: "注销帐号", type: "loginOut" },
}
],
hasVipType1: false,
hasVipType2: false,
vipList: [],
textList: [], //普通vip文字
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
// uni.hideTabBar();
// #ifdef APP-PLUS
this.getOS();
this.platform = uni.getSystemInfoSync().platform;
// console.log('操纵系统',this.platform)
// #endif
},
computed: {
@@ -514,11 +307,11 @@
},
//页面显示
onShow() {
console.log(this.userInfo, "11111111111111");
// 隐藏原生的tabbar
// uni.hideTabBar();
this.getBookList();
this.getData();
//获取vip身份
this.textList = [];
this.getUserVipType();
},
async onTabItemTap() {
this.getBookList();
@@ -533,11 +326,6 @@
getBookList(flag, refreshflag) {
this.isLoadingHide = false;
var that = this;
// 根据tab不同获取最新书评、最热书评、书集列表
// uni.showLoading({
// title: '加载中'
// });
// 顶部红点数量
$http
.request({
@@ -594,7 +382,6 @@
this.onPageJump("/pages/mine/userInfo/persData");
},
handleClickTab(v) {
console.log("v at line 259:", v);
switch (v.type) {
case "pageJump":
this.onPageJump(v.url);
@@ -618,7 +405,6 @@
uni.navigateTo({
url: `${v.url}?name=userPage`
})
// this.onPageJump(v.url);
break;
}
},
@@ -626,7 +412,6 @@
getOS() {
let oprateOs = "";
oprateOs = uni.getSystemInfoSync().platform;
// console.log(oprateOs)
if (oprateOs == "android") {
this.isAndorid = true;
} else {
@@ -691,14 +476,7 @@
this.$http.post("common/user/getUserInfo").then((res) => {
this.userMes = res.result;
if (this.userMes.userVip) {
// console.log(
// "this.userMes.vipValidtime at line 510:",
// this.userMes.vipValidtime
// );
// this.userMes.vipValidtime = this.userMes.vipValidtime.substring(
// 0,
// this.userMes.vipValidtime.indexOf(" ")
// );
}
});
}
@@ -757,6 +535,73 @@
url: "/pages/user/login/login",
});
},
//获取vip身份
getUserVipType() {
this.$http.request({
url: "common/userVip/getUserVipType",
method: "POST",
data: {},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
if (res.code == 0) {
this.vipList = res.list;
this.hasVipType1 = this.vipList.some(item => item.type === 1);
this.hasVipType2 = this.vipList.some(item => item.type === 2);
//筛选出来已过期的
let listAll = this.vipList;
let list = this.vipList.filter(item => !this.isExpired(item.endTime.split(' ')[0]));
//全部的 vip模块展示
if(listAll.length>0){
listAll = this.showDataList(listAll);
}
console.log('-------listAll',listAll)
//筛选过期以后的 昵称模块展示需要
if(list.length>0){
list = this.showDataList(list);
}
console.log('-------list',list)
}
});
},
//分情况展示逻辑
showDataList(list){
this.textList = [];
list.forEach((item, index) => {
if(item.type=='4'){
item.text = '中医学';
this.textList.push(item.text);
}else if(item.type=='5'){
item.text = '针灸学';
this.textList.push(item.text);
}else if(item.type=='6'){
item.text = '肿瘤学';
this.textList.push(item.text);
}else if(item.type=='7'){
item.text = '国学';
this.textList.push(item.text);
}else if(item.type=='8'){
item.text = '心理学';
this.textList.push(item.text);
}else if(item.type=='1'){
item.text = '医学S';
}else if(item.type=='2'){
item.text = '国学心理学S';
}
});
return this.textList;
},
//判断过期的vip
isExpired(dateString){
const date = new Date(dateString);
const now = new Date();
return date < now;
},
},
};
</script>
@@ -764,34 +609,25 @@
@import "@/style/mixin.scss";
.per_mes {
// height: 200rpx;
position: relative;
margin: 0rpx 20rpx 0rpx 20rpx;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
.per_mes_img {
// @include themeBorder(10rpx,10rpx,#4E79A3, #A6D8DC);
width: 90rpx;
height: 90rpx;
// background-color: #fff;
width: 120rpx;
height: 120rpx;
border-radius: 90rpx;
margin: 0 0 0 0;
float: left;
}
view {
float: left;
// margin-top: 20rpx;
.name {
width: 100%;
// display: inline-block;
font-weight: bold;
font-size: 30rpx;
margin-bottom: 10rpx;
font-size: 32rpx;
color: #333 !important;
}
@@ -860,18 +696,11 @@
.chong_zhi {
box-shadow: none;
// border-bottom-left-radius: 0rpx !important;
// border-bottom-right-radius: 0rpx !important;
// background-color: #d8f8e4;
// margin: 0 0 30upx 0;
padding: 0 30upx;
height: auto;
.zhanghu {
width: 100%;
margin-bottom: 10rpx;
font-size: 44rpx;
// line-height: 80rpx;
font-weight: bold;
display: flex;
align-items: center;
@@ -885,25 +714,17 @@
height: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
// justify-content: space-between;
// flex-direction: column;
justify-content: space-between;
.zhanghu {
font-size: 42rpx;
width: auto;
display: inline-block;
// margin-top: 20rpx;
font-size: 40rpx;
margin-bottom: 0rpx;
text-align: center;
display: flex;
align-items: center;
// justify-content: space-around;
image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
width: 50rpx;
height: 50rpx;
}
}
}
@@ -1027,27 +848,12 @@
width: 100%;
height: auto;
border-radius: 10rx !important;
// background: rgba(255, 255, 255, 0.85);
// padding: 30rpx 20rpx 10rpx;
// background-color: $themeBgColor;
// @include themeBorder(6rpx, 20rpx, #3ab3ae, #a6d8dc);
// #FFE9BB
background-image: linear-gradient(80deg, #eaeff2 0%, #c2d0db 100%);
background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 120%);
.PM_font {
color: #476379;
}
// @include themeBorder(
// 10rpx,
// 20rpx,
// (
// linear-gradient(#edf6f5ad, #edf6f5ad),
// linear-gradient(to bottom left, #bed1b1, #a6d8dc)
// )
// );
.zhanghu {
font-size: 80rpx;
text-align: center;
@@ -1065,25 +871,23 @@
}
.bg_top {
// background-position: center center;
padding: 0 30rpx;
height: 30vh;
position: relative;
margin-top: 30rpx;
.setIcon {
position: absolute;
right: 30rpx;
// top: 30rpx;
}
}
.mine_box {
width: 100%;
position: absolute;
// top: 90rpx;
left: 0;
padding: 0 0rpx;
margin-top: 30rpx;
}
.list_box {
@@ -1169,64 +973,13 @@
}
}
}
.user_vip_box {
z-index: 10;
// min-width: 130rpx;
// margin-top: -20rpx;
// position: absolute;
// bottom: -20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.user_vip {
font-size: 24rpx;
width: auto;
padding: 1rpx 20rpx;
font-weight: 800;
border-radius: 40rpx;
// background: linear-gradient(
// to right,
// rgb(204, 229, 244) 0%,
// rgb(197, 227, 215) 100%
// );
}
.user_vip_box1 {
.user_vip {
// padding: 0;
font-size: 20rpx;
margin-right: 10rpx;
}
.user_vip_super {
background-image: linear-gradient(90deg, #fff0dc 0%, #f8e483 100%);
}
.user_vip_wumen {
background-image: linear-gradient(90deg, #c4e8fe 0%, #60bcff 100%);
}
.user_vip_zmzm {
background-image: linear-gradient(90deg, #aff7d6 0%, #edf5f1 100%);
}
}
.super {
// background: linear-gradient(to right, #fff0dc 0%, #f8e483 100%);
color: #f4a04c;
}
.cate_box {
width: 100%;
height: auto;
// background: $themeColor;
background-repeat: no-repeat;
display: flex;
justify-content: center;
@@ -1251,30 +1004,18 @@
.cate_item_border {
position: relative;
// width: 75rpx;
// height: 98rpx;
// background-size: 100% 100%;
// background-image: url("@/static/icon/homePage/cate_bg.png");
// border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
image {
// height: 56rpx;
}
}
.cate_item_name {
margin-top: 6rpx;
// font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 28rpx;
color: #000000;
// line-height: 46rpx;
text-align: center;
// color: #fff;
}
}
}
@@ -1513,4 +1254,91 @@
.vip_info_bottom {
height: 64rpx;
}
.user_vip_box{
width: 125rpx;
position: absolute;
margin-top: - 40rpx;
z-index: 99;
}
.user_vip_item{
display: flex;
align-items: center;
justify-content: center;
}
.user_vip_item {
border-radius: 20rpx;
background: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
color: #fff;
font-size: 20rpx;
line-height: 40rpx;
height: 40rpx;
font-weight: bold;
margin-bottom: 5rpx;
}
.user_vip_item image{
width: 49rpx;
height: 16rpx;
}
.vip_type{
display: flex;
align-items: center;
}
.vip_type_item{
display: flex;
align-items: center;
justify-content: center;
padding: 0 10rpx;
background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
border-radius: 20rpx;
font-size: 20rpx;
line-height: 40rpx;
height: 40rpx;
font-weight: bold;
color: #fff;
margin-right: 10rpx;
}
.vip_type_item:last-child{
margin-right: 0;
}
.vip_type_item image{
width: 34rpx;
height: 24rpx;
}
.vip_infor{
padding-left: 15rpx;
}
.vip_infor_item{
display: block;
color: #fff;
font-size: 26rpx;
line-height: 36rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
}
.vip_infor_item text{
color: #fff;
}
.vip_btn{
margin-right: 15rpx;
height: 50rpx;
}
.vip_btn button{
background: none;
border: 2rpx solid #3ab3ae;
border-radius: 40rpx;
font-size: 24rpx;
width: 82rpx;
line-height: 42rpx;
color: #3ab3ae;
font-weight: bold;
}
.vip_null{
color: #fff;
font-size: 26rpx;
line-height: 34rpx;
}
.expired{
opacity: 0.55;
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff