diff --git a/components/uni-list-item/uni-list-item.vue b/components/uni-list-item/uni-list-item.vue
index 4dac0cd..05d62d5 100644
--- a/components/uni-list-item/uni-list-item.vue
+++ b/components/uni-list-item/uni-list-item.vue
@@ -237,6 +237,7 @@
 		color: #999;
 		font-size: 24rpx;
 		overflow: hidden;
+		width: 350rpx;
 	}
 	.right{
 		width: 40rpx;
diff --git a/main.js b/main.js
index 850400d..89e7c13 100644
--- a/main.js
+++ b/main.js
@@ -6,7 +6,7 @@ Vue.config.productionTip = false
 
 App.mpType = 'app'
 
-Vue.prototype.path = 'https://xyb.wlkjwl.cn/'
+Vue.prototype.path = 'https://qlb.wlkjwl.cn/'
 // Vue.prototype.path = 'http://192.168.0.156:8091'
 Vue.prototype.$store = store;
 //异步请求
@@ -73,4 +73,4 @@ Vue.prototype.request = function(options){
 const app = new Vue({
     ...App
 })
-app.$mount()
+app.$mount()
diff --git a/pages.json b/pages.json
index ab73be6..dd66413 100644
--- a/pages.json
+++ b/pages.json
@@ -1,12 +1,17 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		
 		{
 			"path": "pages/index/index",
 			"style": {
 				"enablePullDownRefresh": true
 			}
-		},
+		},{
+            "path" : "pages/my/my",
+            "style" : {
+				"navigationStyle":"custom"
+			}
+        }
+        ,
 		{
 		    "path" : "pages/support/support",
 		    "style" : {
@@ -15,15 +20,7 @@
 				 "cell": "plugin://contactPlugin/cell"
 				}
 			}
-		}
-		,
-		{
-            "path" : "pages/my/my",
-            "style" : {
-				"navigationStyle":"custom"
-			}
-        }
-        ,
+		},
         {
             "path" : "pages/ad/ad",
             "style" : {
@@ -55,7 +52,13 @@
         ,{
             "path" : "pages/card/card",
             "style" : {}
-        }
+		},
+		{
+			"path" : "pages/guard/index",
+            "style" : {
+				"navigationBarTitleText":"守护详情"
+			}
+		}
         
     ],
 	"globalStyle": {
@@ -83,4 +86,4 @@
 			}
 		]
 	}
-}
+}
diff --git a/pages/guard/index.vue b/pages/guard/index.vue
new file mode 100644
index 0000000..836c2d6
--- /dev/null
+++ b/pages/guard/index.vue
@@ -0,0 +1,193 @@
+<template>
+	<view class="view-box">
+        <image :src="'https://xyb.wlkjwl.cn/'+url" mode="aspectFill"></image>
+        <view class="guard">
+            <view class="tips">我要守护你：<span>{{ name }}</span></view>
+            <view class="guard-item" v-for="(item, index) in timeList" :key="index">
+                <view class="line">
+                    <view class="outer">
+                        <view class="inner"></view>
+                    </view>
+                </view>
+                <view class="guard-main">
+                    <view class="time">今天{{ item }}：00到{{ item+1 }}：00</view>
+                    <view class="text" v-if="index&1">守护{{ name }}这一个小时</view>
+                    <view class="user" v-else>
+                        <image :src="userInfo.avatarUrl"></image>
+                        <view class="name">{{ userInfo.nickName }}</view>
+                    </view>
+                </view>
+                <view class="guard-brn" @click="guardStar(item)">我要守护</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+                url: '',
+                id: '',
+                name: '',
+                timeList: [],
+                userInfo: {}
+			};
+		},
+		onLoad(option) {
+            this.url = option.url;
+            this.id = option.id;
+            this.name = option.name;
+            this.setTimeList();
+            this.getUserInfo();
+        },
+        methods: {
+            guardStar(time) {
+                let startTime, endTime;
+                const date = new Date();
+                console.log(time)
+                startTime = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + parseInt(time)  + ":00:00"
+                endTime = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + (parseInt(time)+1)  + ":00:00"
+                // startTime = new Date(startTime).toString()
+                // endTime = new Date(endTime).toString()
+                console.log(startTime);
+
+                // console.log(new Date(startTime));
+                this.request({
+                    url:this.path + "/api/xyb/star/shouhuLog",
+                    data:{
+                        startTime,
+                        endTime,
+                        starId:this.id
+                    },
+                    success:(res)=>{
+                       
+                    }
+                })
+            },
+            setTimeList() {
+                let timeList = [], hour = new Date().getHours();
+                console.log(hour);
+                while (hour < 24) {
+                    timeList.push(hour)
+                    hour++
+                }
+                console.log(timeList);
+                this.timeList = timeList;
+            },
+            getUserInfo() {
+                this.userInfo = uni.getStorageSync('userInfo');
+            }
+        }
+	}
+</script>
+
+<style scoped lang="scss">
+.view-box {
+    background-color: #f8f7fc;
+    min-height: 100vh;
+    position: relative;
+    > image {
+        width: 100%;
+        height: 360rpx;
+        overflow: hidden;
+    }
+    .guard {
+        border-radius: 10rpx;
+        z-index: 9;
+        position: absolute;
+        top: 340rpx;
+        left: 50%;
+        transform: translate(-50%, 0);
+        box-sizing: border-box;
+        background-color: #FFF;
+        width: 710rpx;
+        // margin: 0 auto;
+        padding: 30rpx;
+        .tips {
+            font-size: 27rpx;
+            color: rgb(255,235,68);
+            margin-bottom: 30rpx;
+            > span {
+                color: #000;
+            }
+        }
+        .guard-item {
+            display: flex;
+            position: relative;
+            z-index: 9;
+            &:not(:last-child) {
+                .text {
+                    padding-bottom: 80rpx;
+                    color: rgb(156,156,156);
+                    font-size: 22rpx;
+                }
+                .user {
+                    padding-bottom: 30rpx;
+                }
+            }
+            .line {
+                position: absolute;
+                z-index: 19;
+                left: -11rpx;
+                top: 0;
+                background-color: #FFF;
+                .outer {
+                    width: 22rpx;
+                    height: 22rpx;
+                    border: 1rpx solid #07a6e0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    .inner {
+                        width: 8rpx;
+                        height: 8rpx;
+                        background-color: #07a6e0;
+                        border-radius: 50%;
+                    }
+                }
+            }
+            .guard-main {
+                padding-left: 30rpx;
+                margin-right: 105rpx;
+                border-left: #07a6e0 dashed 1rpx;
+                .time {
+                    font-size: 27rpx;
+                    color: rgb(19,160,213);
+                    margin-bottom: 27rpx;
+                }
+                .text {
+                    color: rgb(156,156,156);
+                    font-size: 22rpx;
+                }
+                .user {
+                    > image {
+                        width: 50rpx;
+                        height: 50rpx;
+                        margin-bottom: 4rpx;
+                        border-radius: 50%;
+                        background-color: #07a6e0;
+                    }
+                    .name {
+                        font-size: 18rpx;
+                        color: rgb(7,7,7);
+                    }
+                }
+            }
+            .guard-brn {
+                margin-left: auto;
+                margin-right: 55rpx;
+                font-size: 27rpx;
+                background-color: #07a6e0;
+                color: #FFF;
+                width: 180rpx;
+                height: 58rpx;
+                border-radius: 26rpx;
+                text-align: center;
+                line-height: 57rpx;
+            }
+        }
+    }
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index ff1e18d..ae67b03 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -92,14 +92,34 @@
 			<view @tap="hideIsShow" class="show-model-mask">
 			</view>
 		</view>
+		<uniPopup ref="hongbao">
+			<view class="hongbao">
+				<image src="/static/106.png"></image>
+				<view class="title">超级奖励发放</view>
+				<view class="button" v-if="lingqu" @click="lq">领取</view>
+				<view v-else>
+					<view class="text">今天赠送给你的每日权益票</view>
+					<view class="piao">{{piao}}票</view>
+				</view>
+	
+			</view>
+		</uniPopup>
 	</view>
 </template>
 <script>
 	import { mapState,mapMutations } from 'vuex';
 	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
+	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
+	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
+	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
 	export default {
 		components:{
-			uniCountdown
+			uniCountdown,
+			uniPopupMessage,
+			uniPopupDialog,
+			uniPopupShare,
+			uniPopup,
 		},
 		computed: {
 			...mapState(['hasLogin','userInfo']),
@@ -129,6 +149,8 @@
 				isLoad:true,
 				imgPath:'',
 				// nRanklist:[]
+				lingqu:true,
+				piao: '',
 			}
 		},
 		onLoad() {
@@ -156,6 +178,22 @@
 			}
 		},
 		methods: {
+			// 领取
+			lq(){
+				this.request({
+					url:this.path + "/api/xyb/star/getMuch",
+					data:{
+						typeId: 12,
+						much: this.piao,
+					},
+					success:(res)=>{
+						let d = res.data;
+						if(d.code == 0){
+							this.lingqu = false;
+						}
+					}
+				})
+			},
 			...mapMutations(['login']),
 			getContent(){
 				uni.getClipboardData({
@@ -212,6 +250,7 @@
 			},
 			init(type){
 				this.defaultDataList();
+				this.judgeShowHong();
 				//周榜
 				if(type == 1){
 					this.rankingZero = 0;
@@ -232,6 +271,19 @@
 					this.getKeepWeekAndMoth(4)
 				}
 			},
+			judgeShowHong() {
+				let that = this;
+				that.request({
+					url:that.path + "/api/xyb/star/isHaveRedPackgeToday",
+					method:"GET",
+					success(res){
+						if(res.data.data.code == 1) {
+							that.piao = res.data.data.num;
+							that.$refs.hongbao.open();
+						}
+					}
+				})
+			},
 			getKeepWeekAndMoth(id){
 				this.request({
 					url:this.path+'/api/xyb/banner/list',
@@ -818,4 +870,46 @@
 			z-index: -1;
 		}
 	}
-</style>
+	.hongbao{
+		width: 550rpx;
+		height: 678rpx;
+		position: relative;
+		>image{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			z-index: -1;
+		}
+		.title{
+			font-size: 36rpx;
+			color: #fff;
+			padding-top: 300rpx;
+			text-align: center;
+		}
+		.button{
+			width: 100rpx;
+			height: 100rpx;
+			background-color: #ED9C00;
+			border-radius: 50%;
+			font-size: 34rpx;
+			color: #333;
+			text-align: center;
+			line-height: 100rpx;
+			margin: 60rpx auto;
+
+		}
+		.text{
+			font-size: 30rpx;
+			text-align: center;
+			color: #fff;
+			margin-top: 53rpx;
+			padding: 0 60rpx;
+		}
+		.piao{
+			font-size: 63rpx;
+			color: #fff;
+			margin-top: 66rpx;
+			text-align: center;
+		}
+	}
+</style>
diff --git a/pages/support/support.vue b/pages/support/support.vue
index beb855a..b8b80de 100644
--- a/pages/support/support.vue
+++ b/pages/support/support.vue
@@ -45,18 +45,49 @@
 		</view>
 		<uni-list class="my-bottom">
 			<uni-list-item @click="goLuck" rightText="立即抽奖" :showArrow="false" title="抽奖" note="100%中奖" thumb="/static/supprt/chou.png" />
+			<uni-list-item @click="confirmShare" rightText="立即分享" :showArrow="false"  title="分享助力" note="今天已经邀请1人 昨天共邀请2人 每天最多助力10次" thumb="/static/supprt/fen.png" />
 			<uni-list-item @click="goSign" :isabled="sign.signStateId == 2?true:false" :rightText="sign.signStateId == 2?'已签到':'立即签到'" :showArrow="false"  title="每日签到" :note="'签到时间'+sign.signDate+'连续签到'+sign.signCount+'天'" thumb="/static/supprt/qian.png" />
 			<uni-list-item @click="goAdd" rightText="看视频" :showArrow="false"  title="看视频(+10票)" note="每日可看到无视频为止" thumb="/static/supprt/kan.png" />
+			<uni-list-item @click="showGuard" :rightText="isVIP ? '已开通' : '开启权限'" :isabled="isVIP ? true : false" :showArrow="false"  title="守护得票" note="每日领取300票" thumb="/static/supprt/guard.png" />
 			<uni-list-item @click="goAddPiao" rightText="立即领取" :showArrow="false"  title="日常加票" note="更多加票" thumb="/static/supprt/ri.png" />
 			<!-- <button class="share" open-type="share"></button> -->
-			<uni-list-item @click="confirmShare" rightText="立即分享" :showArrow="false"  title="分享助力" note="每天最多助力4次,助力成功抽奖次数+1" thumb="/static/supprt/fen.png" />
 			<cell class="gcontact" @tap="goContact" bind:startmessage='startmessage' bind:completemessage="completemessage" plugid='edc6797f8b36c85af0a284dca7a99aaf'>
 				<!-- <uni-list-item rightText="立即联系" :showArrow="false"  title="联系我领20票" thumb="/static/supprt/lian.png" /> -->
 			</cell>
 		</uni-list>
+		<view @tap.stop="toGuard" class="dingyue" v-if="isVIP">您有VIP特权，要守护{{ nowStar.name || ''}}吗？</view>
 		<view @tap.stop="dingyues" class="dingyue">订阅{{nowStar.name}}排名变化，您可以通知{{dingyue}}次哦</view>
-		<view>
-			
+		<uniPopup ref="red"></uniPopup>
+		<uniPopup ref="guard">
+			<view class="guard-popup">
+				<view class="title">开启守护权限</view>
+				<view class="cando">
+					<view>1、获得守护权限</view>
+					<view>2、解锁多个资源，每天只能解锁1个</view>
+					<view>3、每天可守护偶像1小时</view>
+				</view>
+				<view class="guard-item">
+					<view v-for="(item, index) in guardList" :key="index" @click="supportRankbuy(2,item.id)">{{ item.name }}</view>
+				</view>
+				<view class="close" @click="closeGuard">X</view>
+			</view>
+		</uniPopup>
+		<uniPopup ref="hongbao">
+			<view class="hongbao">
+				<image src="/static/106.png"></image>
+				<view class="title">超级奖励发放</view>
+				<view class="button" v-if="lingqu" @click="lq">领取</view>
+				<view v-else>
+					<view class="text">今天赠送给你的每日权益票</view>
+					<view class="piao">{{piao}}票</view>
+				</view>
+	
+			</view>
+		</uniPopup>
+		<view class="support-rank">
+			<view v-for="(item, index) in newArgeList" :key="index" class="rank-row">
+				<view v-for="(value, idx) in item" :key="idx" @click="supportRankbuy(1,value.id, value.muchPiao)">+{{ value.muchPiao }}票</view>
+			</view>
 		</view>
 		<view class="ad-view">
 			<ad unit-id="adunit-f6387bd5404467fd" ad-type="video" ad-theme="white"></ad>
@@ -148,6 +179,7 @@ import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
 import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
 import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
 import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
+import uniPopup from '@/components/uni-popup/uni-popup.vue'
 let rewardedVideoAd = null;
 import { mapState,mapMutations } from 'vuex';
 export default {
@@ -157,7 +189,8 @@ export default {
 		uniListItem,
 		uniPopupMessage,
 		uniPopupDialog,
-		uniPopupShare
+		uniPopupShare,
+		uniPopup,
 	},
 	data() {
 		return {
@@ -186,20 +219,35 @@ export default {
 			cid:'',
 			time:'',
 			yaoQingMa:'',
-			argeList:[
-				{name:"+66票",number:66,text:"冲榜",rmb:2},
-				{name:"+330票",number:330,text:"冲榜",rmb:10},
-				{name:"+1800票",number:1800,text:"冲榜",rmb:50},
-				{name:"+3344票",number:3344,text:"冲榜",rmb:88},
-				{name:"+7788票",number:7788,text:"冲榜",rmb:188},
-				{name:"+13140票",number:13140,text:"冲榜",rmb:288},
-				{name:"+24000票",number:24000,text:"冲榜",rmb:520},
-				{name:"+42000票",number:42000,text:"获取",rmb:888},
-				{name:"+66666票",number:66666,text:"冲榜",rmb:1314},
-			]
+			argeLength: 0,
+			newArgeList: [],
+			guardList: [],
+			lingqu:true,
+			piao:500,
+			isVIP: false,
 		};
 	},
 	onLoad(opt) {
+		// uni.showModal({
+		// 		title: '恭喜',
+		// 		content: opt.cid + "1",
+		// 		success: function (res) {
+		// 			if (res.confirm) {
+		// 				console.log('用户点击确定');
+		// 			} else if (res.cancel) {
+		// 				console.log('用户点击取消');
+		// 			}
+		// 		}
+		// 	})
+		this.supportRank()
+		this.getgoodsVip()
+		wx.showShareMenu({
+
+			withShareTicket:true,
+
+			menus:['shareAppMessage','shareTimeline']
+
+		})
 		if(this.hasLogin){
 			this.id = opt.id;
 			this.getStarInfo();
@@ -234,12 +282,171 @@ export default {
 			}
 		}
 	},
+	onShareTimeline(){
+		// let userInfo = uni.getStorageSync('userInfo') || '';
+		// let imgSrc = '';
+		// if(this.nowStar.photo){
+		// 	imgSrc = 'https://xyb.wlkjwl.cn/'+this.nowStar.photo
+		// }else{
+		// 	imgSrc = 'https://xyb.wlkjwl.cn/'+this.nowStar.head
+		// }
+		// if(userInfo.token){
+			
+		// }
+		console.log("朋友圈分享")
+		return {
+			title:`给${this.nowStar.name}一起来打榜`,
+			imageUrl:imgSrc
+		}
+	},
 	onShow() {
 		if(this.hasLogin){
 			this.getUserInfo();
 		}
 	},
 	methods:{
+		// 领取
+		lq(){
+			this.request({
+				url:this.path + "/api/xyb/star/getMuch",
+				data:{
+					typeId: 12,
+					much: this.piao,
+				},
+				success:(res)=>{
+					let d = res.data;
+					if(d.code == 0){
+						this.lingqu = false;
+						uni.showModal({
+							title: '恭喜',
+							content: '领取到来自好友 赠送的20票',
+							success: function (res) {
+								if (res.confirm) {
+									console.log('用户点击确定');
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							}
+						});
+					}
+				}
+			})
+		},
+		// vip商品获取
+		getgoodsVip(){
+			let that = this
+			this.request({
+				url: this.path + "/api/xyb/star/goodsVip",
+				success(res){
+					console.log(res)
+					that.guardList = res.data.data
+					console.log(that.guardList)
+				}
+			})
+		},
+		// vip 冲榜下单
+		supportRankbuy(type,id,num){
+			let that = this
+			uni.getSystemInfo({
+				success(res){
+					if(res.platform == 'ios'){
+						uni.showModal({
+							title: '提示',
+							content: 'ios不支持购买',
+							showCancel: false,
+							success: function (res) {
+								if (res.confirm) {
+									console.log('用户点击确定');
+								} else if (res.cancel) {
+									console.log('用户点击取消');
+								}
+							}
+						})
+					}else{
+						that.request({
+							url: that.path + '/api/xyb/star/orderProgramCreate',
+							method:"POSt",
+							headers:{
+								"Content-type":"application/x-www-form-urlencoded"
+							},
+							data:{
+								type: type,
+								goodsId: id,
+								starId: that.id,
+							},
+							success: res => {
+								console.log(res)
+									// 创建新数组循环
+									let {nonceStr,timeStamp,signType,paySign} = res.data
+								wx.requestPayment({
+									nonceStr,timeStamp,signType,paySign,package:res.data.package,	
+									success(res){
+										if(type == 1){
+											uni.showModal({
+												title: '打榜成功',
+												content: `已经成功为${that.nowStar.name}冲榜${num}票`,
+												showCancel: false,
+												success: function (res) {
+													if (res.confirm) {
+														console.log('用户点击确定');
+													} else if (res.cancel) {
+														console.log('用户点击取消');
+													}
+												}
+											})
+										}else{
+											that.request({
+												url:that.path + "/api/xyb/star/isHaveRedPackgeToday",
+												method:"GET",
+												success(res){
+													console.log(res)
+													this.piao = res.data.data.num;
+												}
+											})
+											that.$refs.guard.close();
+											that.$refs.hongbao.open()
+											
+										}
+										
+									},
+									fail(err){
+										console.log(err,"支付失败")
+									}
+								})
+								
+							}
+						})
+					}
+				}
+			})
+			
+		},
+		// 获取冲榜列表
+		supportRank() {
+			this.request({
+				url: this.path + '/api/xyb/star/goodsChongbang',
+				success: res => {
+					console.log(res)
+						// 创建新数组循环
+					for (let index = 0; index < res.data.data.length; index+=3) {
+						const element = res.data.data.slice(index, index + 3);
+						this.newArgeList.push(element);
+					}
+					console.log(this.newArgeList)
+				}
+			})
+		},
+		toGuard() {
+			uni.navigateTo({
+				url: '/pages/guard/index?url=' + this.nowStar.head + '&id=' + this.nowStar.id + '&name=' + this.nowStar.name
+			})
+		},
+		showGuard() {
+			this.$refs.guard.open();
+		},
+		closeGuard() {
+			this.$refs.guard.close();
+		},
 		...mapMutations(['login']),
 		init(){
 			this.getStarInfo();
@@ -348,6 +555,17 @@ export default {
 			}
 		},
 		updateRequest(cid){
+			uni.showModal({
+				title: '恭喜',
+				content: 'cid',
+				success: function (res) {
+					if (res.confirm) {
+						console.log('用户点击确定');
+					} else if (res.cancel) {
+						console.log('用户点击取消');
+					}
+				}
+			})
 			this.request({
 				url:this.path+'/api/xyb/star/customerInfoUpdate',
 				data:{
@@ -449,6 +667,8 @@ export default {
 					if(d.code == 0){
 						this.aList = d.data.list;
 						this.time = this.changeTimeList(d.data.timeDiff/1000)
+						if(d.data.timeDiff > 0) this.isVIP = true;
+						else this.isVIP = false;
 					}
 				}
 			})
@@ -665,13 +885,55 @@ export default {
 			uni.navigateTo({
 				url:'/pages/help/help?id='+item.id+'&starId='+this.nowStar.id
 			})
-		}
+		},
+		
 	}
 };
 </script>
 
 <style scoped lang="scss">
+.hongbao{
+	width: 550rpx;
+	height: 678rpx;
+	position: relative;
+	>image{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: -1;
+	}
+	.title{
+		font-size: 36rpx;
+		color: #fff;
+		padding-top: 300rpx;
+		text-align: center;
+	}
+	.button{
+		width: 100rpx;
+		height: 100rpx;
+		background-color: #ED9C00;
+		border-radius: 50%;
+		font-size: 34rpx;
+		color: #333;
+		text-align: center;
+		line-height: 100rpx;
+		margin: 60rpx auto;
 
+	}
+	.text{
+		font-size: 30rpx;
+		text-align: center;
+		color: #fff;
+		margin-top: 53rpx;
+		padding: 0 60rpx;
+	}
+	.piao{
+		font-size: 63rpx;
+		color: #fff;
+		margin-top: 66rpx;
+		text-align: center;
+	}
+}
 .vote-model{
 	position: fixed;
 	top: 0;
@@ -942,83 +1204,83 @@ export default {
 		margin-left: 20rpx;
 	}
 }
-.bg-red {
-	background-color: #e54d42;
-	color: #ffffff;
+.bg-red {
+	background-color: #e54d42;
+	color: #ffffff;
 }
 .bg-blue{
 	background-color: #4CD964;
 	color: #FFFFFF;
 }
-.cu-progress {
-	overflow: hidden;
-	height: 28upx;
-	background-color: #ebeef5;
-	display: inline-flex;
-	align-items: center;
+.cu-progress {
+	overflow: hidden;
+	height: 28upx;
+	background-color: #ebeef5;
+	display: inline-flex;
+	align-items: center;
 	width: 100%;
 	position: relative;
 	.text{
 		position: absolute;
 		top: 0;
 		left: 0;
-	}
-}
-
-.cu-progress+view,
-.cu-progress+text {
-	line-height: 1;
-}
-
-.cu-progress.xs {
-	height: 10upx;
-}
-
-.cu-progress.sm {
-	height: 20upx;
-}
-
-.cu-progress view {
-	
-	height: 100%;
-	align-items: center;
-	display: flex;
-	justify-items: flex-end;
-	justify-content: space-around;
-	font-size: 20upx;
-	color: #ffffff;
-	transition: width 0.6s ease;
-}
-
-.cu-progress text {
-	align-items: center;
-	display: flex;
-	font-size: 20upx;
-	color: #333333;
-	text-indent: 10upx;
-}
-
-.cu-progress.text-progress {
-	padding-right: 60upx;
-}
-
-.cu-progress.striped view {
-	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-	background-size: 72upx 72upx;
-}
-
-.cu-progress.active view {
-	animation: progress-stripes 2s linear infinite;
-}
-
-@keyframes progress-stripes {
-	from {
-		background-position: 72upx 0;
-	}
-
-	to {
-		background-position: 0 0;
-	}
+	}
+}
+
+.cu-progress+view,
+.cu-progress+text {
+	line-height: 1;
+}
+
+.cu-progress.xs {
+	height: 10upx;
+}
+
+.cu-progress.sm {
+	height: 20upx;
+}
+
+.cu-progress view {
+	
+	height: 100%;
+	align-items: center;
+	display: flex;
+	justify-items: flex-end;
+	justify-content: space-around;
+	font-size: 20upx;
+	color: #ffffff;
+	transition: width 0.6s ease;
+}
+
+.cu-progress text {
+	align-items: center;
+	display: flex;
+	font-size: 20upx;
+	color: #333333;
+	text-indent: 10upx;
+}
+
+.cu-progress.text-progress {
+	padding-right: 60upx;
+}
+
+.cu-progress.striped view {
+	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-size: 72upx 72upx;
+}
+
+.cu-progress.active view {
+	animation: progress-stripes 2s linear infinite;
+}
+
+@keyframes progress-stripes {
+	from {
+		background-position: 72upx 0;
+	}
+
+	to {
+		background-position: 0 0;
+	}
 }
 .content {
 	.ad-view{
@@ -1123,5 +1385,64 @@ export default {
 			}
 		}
 	}
+	.support-rank {
+		margin: 30rpx;
+		.rank-row {
+			display: flex;
+			background-color: rgb(248,248,248);
+			margin-bottom: 24rpx;
+			justify-content: space-around;
+			> view {
+				box-sizing: border-box;
+				color: #249bc5;
+				font-size: 25rpx;
+				padding-top: 18rpx;
+				text-align: center;
+				width: 196rpx;
+				height: 121rpx;
+				background: url("/static/supprt/rank.png") center center/100% 100% no-repeat;
+			}
+		}
+	}
 }
-</style>
+.guard-popup {
+	background-color: #FFFFFF;
+	box-sizing: border-box;
+	width: 700rpx;
+	padding: 50rpx 30rpx 100rpx;
+	position: relative;
+	.title {
+		text-align: center;
+		font-size: 40rpx;
+		color: #07a6e0;
+		margin-bottom: 50rpx;
+	}
+	.cando {
+		font-size: 33rpx;
+		color: #646464;
+		> view {
+			margin: 0 15rpx 30rpx;
+		}
+	}
+	.guard-item {
+		font-size: 30rpx;
+		> view {
+			width: 606rpx;
+			height: 108rpx;
+			text-align: center;
+			line-height: 108rpx;
+			border: 2rpx solid #f59ccc;
+			color: #FFFFFF;
+			margin-bottom: 16rpx;
+			background-color: rgb(7,166,224);
+		}
+	}
+	.close {
+		position: absolute;
+		right: 30rpx;
+		top: 30rpx;
+		font-size: 40rpx;
+		color: #000;
+	}
+}
+</style>
diff --git a/static/106.png b/static/106.png
new file mode 100644
index 0000000..1ba1ad2
Binary files /dev/null and b/static/106.png differ
diff --git a/static/supprt/guard.png b/static/supprt/guard.png
new file mode 100644
index 0000000..db4c44a
Binary files /dev/null and b/static/supprt/guard.png differ
diff --git a/static/supprt/rank.png b/static/supprt/rank.png
new file mode 100644
index 0000000..c873078
Binary files /dev/null and b/static/supprt/rank.png differ