root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 5 days ago
parent
3c381ade8e
commit
c945d4ec11
4 changed files with 104 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 147
      package1/components/planet/planet-header.vue
  2. 6
      package1/components/planet/planet-me.vue
  3. 4
      package1/components/planet/planet-news.vue
  4. 35
      package1/planet/index.vue

147
package1/components/planet/planet-header.vue
View File

@ -2,7 +2,13 @@
<view class="ph"> <view class="ph">
<view class="ph-story"> <view class="ph-story">
<text class="ph-kicker">BANJINLI ORBIT</text> <text class="ph-kicker">BANJINLI ORBIT</text>
<text class="ph-title">今天，登陆白嫖星球</text> <view class="ph-title-row">
<text class="ph-title">Hello，白嫖居民</text>
<view class="ph-actions">
<text class="ph-action" @tap="goTicketLog">明细</text>
<text class="ph-action ph-action-main" @tap="goDraw">开奖</text>
</view>
</view>
<text class="ph-sub">攒券、追捕、开盲盒，全校一起瓜分补给池</text> <text class="ph-sub">攒券、追捕、开盲盒，全校一起瓜分补给池</text>
</view> </view>
@ -17,7 +23,7 @@
<view class="ph-asteroid ph-asteroid-b"></view> <view class="ph-asteroid ph-asteroid-b"></view>
<view class="ph-floating-box"> <view class="ph-floating-box">
<view class="ph-floating-box-lid"></view> <view class="ph-floating-box-lid"></view>
<text>?</text> <text>白嫖说明书</text>
</view> </view>
<view class="ph-orbit ph-orbit-a"></view> <view class="ph-orbit ph-orbit-a"></view>
@ -35,7 +41,22 @@
<view class="ph-atmosphere"></view> <view class="ph-atmosphere"></view>
</view> </view>
<view class="ph-planet-core"> <view class="ph-planet-core">
<view class="ph-core-label">今日补给池</view> <view class="ph-count">
<view class="ph-period">开奖倒计时</view>
<view class="ph-count-unit">
<text>{{cd.h}}</text>
<text>H</text>
</view>
<view class="ph-count-unit">
<text>{{cd.m}}</text>
<text>M</text>
</view>
<view class="ph-count-unit">
<text>{{cd.s}}</text>
<text>S</text>
</view>
</view>
<view class="ph-core-label">得现金奖励</view>
<view class="ph-pool"> <view class="ph-pool">
<text class="ph-pool-symbol">￥</text> <text class="ph-pool-symbol">￥</text>
<text class="ph-pool-num">{{poolText}}</text> <text class="ph-pool-num">{{poolText}}</text>
@ -46,34 +67,18 @@
<view class="ph-squirrel"> <view class="ph-squirrel">
<image class="ph-squirrel-img" src="/static/images/img/loading.gif" mode="aspectFit"></image> <image class="ph-squirrel-img" src="/static/images/img/loading.gif" mode="aspectFit"></image>
<view class="ph-squirrel-tag">IP</view> <view class="ph-squirrel-tag">我的星球券 {{data.myTicketCount || 0}} 张</view>
</view> </view>
<view class="ph-satellite ph-satellite-left"> <view class="ph-satellite ph-satellite-left">
<text class="ph-satellite-num">{{data.joinCount || 0}}</text> <text class="ph-satellite-num">{{data.joinCount || 0}}</text>
<text class="ph-satellite-label">全校登陆</text> <text class="ph-satellite-label">竟奖人数</text>
</view> </view>
<view class="ph-satellite ph-satellite-right"> <view class="ph-satellite ph-satellite-right">
<text class="ph-satellite-num">{{rankText}}</text> <text class="ph-satellite-num">{{rankText}}</text>
<text class="ph-satellite-label">财富坐标</text> <text class="ph-satellite-label">财富坐标</text>
</view> </view>
<view class="ph-ticket-pill">我的星球券 {{data.myTicketCount || 0}} 张</view> <!-- <view class="ph-ticket-pill">我的星球券 {{data.myTicketCount || 0}} 张</view> -->
<view class="ph-count">
<view class="ph-period">第 {{data.periodNo || '--'}} 期</view>
<view class="ph-count-unit">
<text>{{cd.h}}</text>
<text>H</text>
</view>
<view class="ph-count-unit">
<text>{{cd.m}}</text>
<text>M</text>
</view>
<view class="ph-count-unit">
<text>{{cd.s}}</text>
<text>S</text>
</view>
</view>
</view> </view>
</template> </template>
@ -127,6 +132,12 @@
if (this.timer) clearInterval(this.timer) if (this.timer) clearInterval(this.timer)
}, },
methods: { methods: {
goTicketLog() {
this.$emit('ticketlog')
},
goDraw() {
this.$emit('draw')
},
pad(n) { pad(n) {
return n < 10 ? ('0' + n) : ('' + n) return n < 10 ? ('0' + n) : ('' + n)
}, },
@ -157,6 +168,7 @@
position: absolute; position: absolute;
left: 8rpx; left: 8rpx;
top: 12rpx; top: 12rpx;
right: 8rpx;
z-index: 6; z-index: 6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -169,12 +181,47 @@
letter-spacing: 4rpx; letter-spacing: 4rpx;
} }
.ph-title { .ph-title-row {
margin-top: 10rpx; margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.ph-title {
color: #12342F; color: #12342F;
font-size: 44rpx; font-size: 44rpx;
font-weight: 900; font-weight: 900;
letter-spacing: -1rpx; letter-spacing: -1rpx;
flex: 1;
white-space: nowrap;
}
.ph-actions {
display: flex;
align-items: center;
margin-left: 16rpx;
flex-shrink: 0;
}
.ph-action {
height: 52rpx;
line-height: 52rpx;
padding: 0 18rpx;
margin-left: 10rpx;
border-radius: 999rpx;
background: rgba(255,255,255,0.72);
border: 1rpx solid rgba(255,255,255,0.92);
color: #42635E;
font-size: 23rpx;
font-weight: 800;
box-shadow: 0 10rpx 22rpx rgba(53,214,166,0.1);
}
.ph-action-main {
color: #FFFFFF;
background: linear-gradient(135deg, #35D6A6, #4FB7FF);
border-color: rgba(255,255,255,0.82);
} }
.ph-sub { .ph-sub {
@ -286,8 +333,8 @@
.ph-floating-box { .ph-floating-box {
position: absolute; position: absolute;
left: 34rpx; left: 34rpx;
top: 525rpx; top: 625rpx;
width: 88rpx; width: 128rpx;
height: 86rpx; height: 86rpx;
border-radius: 22rpx; border-radius: 22rpx;
background: linear-gradient(145deg, #FF8B6A, #FFCF7A); background: linear-gradient(145deg, #FF8B6A, #FFCF7A);
@ -296,7 +343,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #FFFFFF; color: #FFFFFF;
font-size: 32rpx; font-size: 23rpx;
font-weight: 900; font-weight: 900;
z-index: 5; z-index: 5;
animation: treasureFloat 4.4s ease-in-out infinite; animation: treasureFloat 4.4s ease-in-out infinite;
@ -306,11 +353,11 @@
position: absolute; position: absolute;
left: -7rpx; left: -7rpx;
top: -16rpx; top: -16rpx;
width: 102rpx; width: 138rpx;
height: 32rpx; height: 32rpx;
border-radius: 18rpx; border-radius: 18rpx;
background: linear-gradient(135deg, #FFFFFF, #FFD38C); background: linear-gradient(135deg, #FFFFFF, #FFD38C);
transform: rotate(-5deg); /* transform: rotate(-5deg); */
} }
@keyframes treasureFloat { @keyframes treasureFloat {
@ -471,7 +518,7 @@
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 390rpx; width: 390rpx;
min-height: 220rpx; min-height: 270rpx;
border-radius: 56rpx; border-radius: 56rpx;
background: rgba(255,255,255,0.34); background: rgba(255,255,255,0.34);
border: 1rpx solid rgba(255,255,255,0.72); border: 1rpx solid rgba(255,255,255,0.72);
@ -489,6 +536,7 @@
font-size: 24rpx; font-size: 24rpx;
font-weight: 800; font-weight: 800;
letter-spacing: 2rpx; letter-spacing: 2rpx;
margin-top: 14rpx;
} }
.ph-period { .ph-period {
@ -524,7 +572,6 @@
text-align: center; text-align: center;
color: #42635E; color: #42635E;
font-size: 24rpx; font-size: 24rpx;
margin-top: 2rpx;
} }
.ph-ticket-pill { .ph-ticket-pill {
@ -543,20 +590,14 @@
} }
.ph-count { .ph-count {
position: absolute;
left: 50%;
bottom: 18rpx;
transform: translateX(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 12rpx 16rpx; padding: 8rpx 12rpx;
border-radius: 999rpx; border-radius: 999rpx;
background: rgba(255,255,255,0.72); background: rgba(255,255,255,0.62);
border: 1rpx solid rgba(255,255,255,0.92); border: 1rpx solid rgba(255,255,255,0.82);
box-shadow: 0 18rpx 42rpx rgba(79,183,255,0.14); box-shadow: 0 10rpx 24rpx rgba(79,183,255,0.1);
backdrop-filter: blur(8px);
z-index: 6;
} }
.ph-count-label { .ph-count-label {
@ -567,10 +608,10 @@
} }
.ph-count-unit { .ph-count-unit {
width: 64rpx; width: 52rpx;
height: 64rpx; height: 52rpx;
margin-left: 8rpx; margin-left: 8rpx;
border-radius: 22rpx; border-radius: 18rpx;
background: linear-gradient(145deg, #F8FFFB, #E1F8FF); background: linear-gradient(145deg, #F8FFFB, #E1F8FF);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -581,9 +622,9 @@
.ph-count-unit text:first-child { .ph-count-unit text:first-child {
color: #12342F; color: #12342F;
font-size: 28rpx; font-size: 24rpx;
font-weight: 900; font-weight: 900;
line-height: 30rpx; line-height: 26rpx;
font-family: DIN, Arial, sans-serif; font-family: DIN, Arial, sans-serif;
} }
@ -611,13 +652,13 @@
.ph-satellite-left { .ph-satellite-left {
left: 0; left: 0;
top: 350rpx; top: 300rpx;
transform: rotate(-6deg); transform: rotate(-6deg);
} }
.ph-satellite-right { .ph-satellite-right {
right: 0; right: 0;
top: 428rpx; top: 258rpx;
transform: rotate(7deg); transform: rotate(7deg);
animation-delay: -1.5s; animation-delay: -1.5s;
} }
@ -661,7 +702,7 @@
.ph-squirrel-img { .ph-squirrel-img {
position: absolute; position: absolute;
left: 0; right: 30rpx;
top: 0; top: 0;
width: 142rpx; width: 142rpx;
height: 142rpx; height: 142rpx;
@ -673,16 +714,16 @@
.ph-squirrel-tag { .ph-squirrel-tag {
position: absolute; position: absolute;
left: 38rpx;
bottom: 0; bottom: 0;
width: 68rpx; right:1rpx;
height: 38rpx; width: 200rpx;
line-height: 38rpx; height: 42rpx;
line-height: 42rpx;
text-align: center; text-align: center;
border-radius: 999rpx; border-radius: 999rpx;
background: rgba(255,255,255,0.82); background: rgba(255,255,255,0.82);
color: #35D6A6; color: #35D6A6;
font-size: 19rpx; font-size: 20rpx;
font-weight: 900; font-weight: 900;
border: 1rpx solid rgba(255,255,255,0.92); border: 1rpx solid rgba(255,255,255,0.92);
box-shadow: 0 10rpx 22rpx rgba(53,214,166,0.12); box-shadow: 0 10rpx 22rpx rgba(53,214,166,0.12);

6
package1/components/planet/planet-me.vue
View File

@ -7,7 +7,7 @@
<view class="pm-info"> <view class="pm-info">
<view class="pm-name">{{data.nickname || '星球居民'}}</view> <view class="pm-name">{{data.nickname || '星球居民'}}</view>
<view class="pm-sub"> <view class="pm-sub">
<text>{{data.level || 'C'}} 级探索者</text> <text>{{data.level || 'C'}} 级白嫖员</text>
<text>连签 {{data.consecutiveSignDays || 0}} 天</text> <text>连签 {{data.consecutiveSignDays || 0}} 天</text>
</view> </view>
</view> </view>
@ -68,7 +68,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.pm { .pm {
position: relative; position: relative;
margin-top: -12rpx; margin-top: 12rpx;
padding: 30rpx 28rpx 28rpx; padding: 30rpx 28rpx 28rpx;
border-radius: 38rpx; border-radius: 38rpx;
background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(245,255,250,0.64)); background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(245,255,250,0.64));
@ -76,7 +76,7 @@
box-shadow: 0 22rpx 60rpx rgba(53,214,166,0.14); box-shadow: 0 22rpx 60rpx rgba(53,214,166,0.14);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
overflow: hidden; overflow: hidden;
transform: rotate(-1.2deg); /* transform: rotate(-1.2deg); */
} }
.pm:before { .pm:before {

4
package1/components/planet/planet-news.vue
View File

@ -24,7 +24,7 @@
.pn { .pn {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: -8rpx; margin-top: -38rpx;
padding: 0 18rpx; padding: 0 18rpx;
height: 72rpx; height: 72rpx;
border-radius: 999rpx; border-radius: 999rpx;
@ -32,7 +32,7 @@
border: 1rpx solid rgba(255,255,255,0.92); border: 1rpx solid rgba(255,255,255,0.92);
box-shadow: 0 16rpx 34rpx rgba(79,183,255,0.12); box-shadow: 0 16rpx 34rpx rgba(79,183,255,0.12);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transform: rotate(1.2deg); /* transform: rotate(1.2deg); */
} }
.pn-icon { .pn-icon {

35
package1/planet/index.vue
View File

@ -20,10 +20,6 @@
<text class="nav-back-icon">‹</text> <text class="nav-back-icon">‹</text>
</view> </view>
<view class="nav-title">白嫖星球</view> <view class="nav-title">白嫖星球</view>
<view class="nav-right">
<text class="nav-link" @tap="goTicketLog">明细</text>
<text class="nav-link nav-link-main" @tap="goDrawResult">开奖</text>
</view>
</view> </view>
<scroll-view scroll-y class="planet-scroll" :style="{paddingTop: (statusBarHeight + 44) + 'px'}"> <scroll-view scroll-y class="planet-scroll" :style="{paddingTop: (statusBarHeight + 44) + 'px'}">
@ -36,7 +32,11 @@
</view> </view>
<block v-else> <block v-else>
<planet-header :data="home"></planet-header> <planet-header
:data="home"
@ticketlog="goTicketLog"
@draw="goDrawResult">
</planet-header>
<planet-news :list="home.newsList"></planet-news> <planet-news :list="home.newsList"></planet-news>
@ -566,31 +566,6 @@
padding-bottom: 6rpx; padding-bottom: 6rpx;
} }
.nav-right {
position: absolute;
right: 24rpx;
bottom: 6rpx;
display: flex;
align-items: center;
}
.nav-link {
font-size: 26rpx;
color: #42635E;
margin-left: 16rpx;
padding: 8rpx 16rpx;
border-radius: 999rpx;
background: rgba(255,255,255,0.62);
border: 1rpx solid rgba(255,255,255,0.9);
box-shadow: 0 10rpx 24rpx rgba(53,214,166,0.1);
}
.nav-link-main {
color: #FFFFFF;
background: linear-gradient(135deg, #35D6A6, #4FB7FF);
border-color: rgba(255,255,255,0.78);
}
.planet-scroll { .planet-scroll {
position: relative; position: relative;
z-index: 5; z-index: 5;

Write Preview
Loading…
Cancel
Save