|
|
|
@ -1,76 +1,92 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" /> |
|
|
|
|
|
|
|
<view class="head"> |
|
|
|
<view class="headImage" @click="goToEditUserInfo"> |
|
|
|
<image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="info"> |
|
|
|
<view class="name" @click="goToEditUserInfo"> |
|
|
|
{{ userInfo.nickName || '未登录' }} |
|
|
|
</view> |
|
|
|
<view class="tags"> |
|
|
|
<view class="tag" v-if="userInfo.intentionCode"> |
|
|
|
<text class="tag-label">ID:</text> |
|
|
|
<text>{{ userInfo.intentionCode }}</text> |
|
|
|
</view> |
|
|
|
<view v-if="role" |
|
|
|
style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;"> |
|
|
|
<image src="@/pages_order/static/center/agent-icon.png"></image> |
|
|
|
</view> |
|
|
|
<view v-else-if="userInfo.id" class="tag"> |
|
|
|
普通会员 |
|
|
|
</view> |
|
|
|
<view v-else class="tag" @click="goToLogin"> |
|
|
|
点击登录 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')"> |
|
|
|
<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tools-box"> |
|
|
|
<image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image> |
|
|
|
<view class="flex activate"> |
|
|
|
<template v-if="role"> |
|
|
|
<view class="activate-tips" style="padding-left: 27rpx;"> |
|
|
|
<view>代理商权益</view> |
|
|
|
<view> |
|
|
|
将于<text class="activate-highlight">{{ userInfo.endTime ? |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" /> |
|
|
|
|
|
|
|
<view class="head"> |
|
|
|
<view class="headImage" @click="goToEditUserInfo"> |
|
|
|
<image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="info"> |
|
|
|
<view class="name" @click="goToEditUserInfo"> |
|
|
|
{{ userInfo.nickName || '未登录' }} |
|
|
|
</view> |
|
|
|
<view class="tags"> |
|
|
|
<view class="tag" v-if="userInfo.intentionCode"> |
|
|
|
<text class="tag-label">ID:</text> |
|
|
|
<text>{{ userInfo.intentionCode }}</text> |
|
|
|
</view> |
|
|
|
<view v-if="role" |
|
|
|
style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;"> |
|
|
|
<image src="@/pages_order/static/center/agent-icon.png"></image> |
|
|
|
</view> |
|
|
|
<view v-else-if="userInfo.id" class="tag"> |
|
|
|
普通会员 |
|
|
|
</view> |
|
|
|
<view v-else class="tag" @click="goToLogin"> |
|
|
|
点击登录 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')"> |
|
|
|
<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tools-box"> |
|
|
|
<image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image> |
|
|
|
<view class="flex activate"> |
|
|
|
<template v-if="role"> |
|
|
|
<view class="activate-tips" style="padding-left: 27rpx;"> |
|
|
|
<view>代理商权益</view> |
|
|
|
<view> |
|
|
|
将于<text class="activate-highlight">{{ userInfo.endTime ? |
|
|
|
$dayjs(userInfo.endTime).format('YYYY年M月D日') : '-'}}</text>到期 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="btn-activate" @click="onActivate"> |
|
|
|
<image src="@/pages_order/static/center/btn-activate-again.png"></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<view class="activate-tips"> |
|
|
|
升级成为代理商享受更多权益 |
|
|
|
</view> |
|
|
|
<view class="btn-activate" @click="onActivate"> |
|
|
|
<image src="@/pages_order/static/center/btn-activate.png"></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<view class="tools flex"> |
|
|
|
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')"> |
|
|
|
<view class="tool-icon"> |
|
|
|
<image src="@/pages_order/static/center/tool-share.png"></image> |
|
|
|
</view> |
|
|
|
<text>分享好友</text> |
|
|
|
</view> |
|
|
|
<view class="tool" @click="onActivate"> |
|
|
|
<view class="tool-icon"> |
|
|
|
<image src="@/pages_order/static/center/tool-activate.png"></image> |
|
|
|
</view> |
|
|
|
<text>激活码</text> |
|
|
|
</view> |
|
|
|
<!-- <view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')"> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="btn-activate" @click="onActivate"> |
|
|
|
<image src="@/pages_order/static/center/btn-activate-again.png"></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<view class="activate-tips"> |
|
|
|
升级成为代理商享受更多权益 |
|
|
|
</view> |
|
|
|
<view class="btn-activate" @click="onActivate"> |
|
|
|
<image src="@/pages_order/static/center/btn-activate.png"></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<view class="tools flex"> |
|
|
|
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')"> |
|
|
|
<view class="tool-icon"> |
|
|
|
<image src="@/pages_order/static/center/tool-share.png"></image> |
|
|
|
</view> |
|
|
|
<text>分享好友</text> |
|
|
|
</view> |
|
|
|
<view class="tool" @click="onActivate"> |
|
|
|
<view class="tool-icon"> |
|
|
|
<image src="@/pages_order/static/center/tool-activate.png"></image> |
|
|
|
</view> |
|
|
|
<text>激活码</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<button open-type="contact" class="share"> |
|
|
|
<view class="tool"> |
|
|
|
<view class="tool-icon tool-icon-bg"> |
|
|
|
<uv-icon name="server-fill" color="#05d9a2" size="60rpx" /> |
|
|
|
</view> |
|
|
|
<text>联系客服</text> |
|
|
|
</view> |
|
|
|
</button> |
|
|
|
<view class="tool" @click="$refs.configPopup.open('user_ys')"> |
|
|
|
<view class="tool-icon tool-icon-bg"> |
|
|
|
<uv-icon name="question-circle" color="#05d9a2" size="60rpx" /> |
|
|
|
</view> |
|
|
|
<text>隐私政策</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')"> |
|
|
|
<view class="tool-icon"> |
|
|
|
<image src="@/pages_order/static/center/tool-wallet.png"></image> |
|
|
|
</view> |
|
|
|
@ -82,324 +98,344 @@ |
|
|
|
</view> |
|
|
|
<text>我的团队</text> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view class="card notice" v-if="notice"> |
|
|
|
<view class="notice-icon"> |
|
|
|
<image src="@/pages_order/static/center/notice.png"></image> |
|
|
|
</view> |
|
|
|
<uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx" |
|
|
|
:customStyle="{ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view class="card notice" v-if="notice"> |
|
|
|
<view class="notice-icon"> |
|
|
|
<image src="@/pages_order/static/center/notice.png"></image> |
|
|
|
</view> |
|
|
|
<uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx" |
|
|
|
:customStyle="{ |
|
|
|
padding: '6rpx 0', |
|
|
|
}"></uv-notice-bar> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card updates"> |
|
|
|
<view class="updates-header"> |
|
|
|
<view class="updates-header-bg"> |
|
|
|
<image src="@/static/image/center/title-bg.png"></image> |
|
|
|
</view> |
|
|
|
<view class="updates-header-content"> |
|
|
|
动态更新 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="updates-content"> |
|
|
|
<view class="card updates-item" v-for="item in list" :key="item.id" |
|
|
|
@click="goToNewsDetail(item.id)"> |
|
|
|
<view class="updates-item-img"> |
|
|
|
<image :src="item.image"></image> |
|
|
|
</view> |
|
|
|
<view class="updates-item-info"> |
|
|
|
<view class="updates-item-title">{{ item.title || '' }}</view> |
|
|
|
<view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')"> |
|
|
|
<image src="@/pages_order/static/center/service.png" mode=""></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<popupActivate ref="popupActivate"></popupActivate> |
|
|
|
<popupSharing ref="popupSharing"></popupSharing> |
|
|
|
|
|
|
|
<tabber select="center" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card updates"> |
|
|
|
<view class="updates-header"> |
|
|
|
<view class="updates-header-bg"> |
|
|
|
<image src="@/static/image/center/title-bg.png"></image> |
|
|
|
</view> |
|
|
|
<view class="updates-header-content"> |
|
|
|
动态更新 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="updates-content"> |
|
|
|
<view class="card updates-item" v-for="item in list" :key="item.id" |
|
|
|
@click="goToNewsDetail(item.id)"> |
|
|
|
<view class="updates-item-img"> |
|
|
|
<image :src="item.image"></image> |
|
|
|
</view> |
|
|
|
<view class="updates-item-info"> |
|
|
|
<view class="updates-item-title">{{ item.title || '' }}</view> |
|
|
|
<view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')"> |
|
|
|
<image src="@/pages_order/static/center/service.png" mode=""></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<popupActivate ref="popupActivate"></popupActivate> |
|
|
|
<popupSharing ref="popupSharing"></popupSharing> |
|
|
|
|
|
|
|
<configPopup ref="configPopup" /> |
|
|
|
|
|
|
|
<tabber select="center" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex' |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
|
|
|
|
import popupActivate from '@/components/center/popupActivate.vue' |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
popupActivate, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
notice: '', |
|
|
|
mixinsListApi: 'getNews', |
|
|
|
authApi : false, |
|
|
|
isLoggedIn : uni.getStorageSync('token'), |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['userInfo', 'userInfoVip']), |
|
|
|
role() { |
|
|
|
return this.userInfo.isPay |
|
|
|
}, |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
|
|
|
|
import popupActivate from '@/components/center/popupActivate.vue' |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
popupActivate, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
notice: '', |
|
|
|
mixinsListApi: 'getNews', |
|
|
|
authApi: false, |
|
|
|
isLoggedIn: uni.getStorageSync('token'), |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['userInfo', 'userInfoVip']), |
|
|
|
role() { |
|
|
|
return this.userInfo.isPay |
|
|
|
}, |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.fetchNotice() |
|
|
|
|
|
|
|
|
|
|
|
this.isLoggedIn = uni.getStorageSync('token') |
|
|
|
if(this.isLoggedIn){ |
|
|
|
if (this.isLoggedIn) { |
|
|
|
this.$store.commit('getUserInfo') |
|
|
|
this.$store.commit('getUserInfoVip') |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async fetchNotice() { |
|
|
|
try { |
|
|
|
// todo: check |
|
|
|
this.notice = (await this.$fetch('getNotice'))?.[0]?.title |
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
onActivate() { |
|
|
|
if (!this.isLoggedIn) { |
|
|
|
this.goToLogin() |
|
|
|
return |
|
|
|
} |
|
|
|
this.$refs.popupActivate.open(this.role) |
|
|
|
}, |
|
|
|
getDesc(str) { |
|
|
|
if (!str) { |
|
|
|
return '' |
|
|
|
} |
|
|
|
|
|
|
|
return str.replace(/<.*?>/g, '') |
|
|
|
}, |
|
|
|
goToNewsDetail(id) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages_order/mine/news?id=${id}` |
|
|
|
}) |
|
|
|
}, |
|
|
|
goToEditUserInfo() { |
|
|
|
if (!this.isLoggedIn) { |
|
|
|
this.goToLogin() |
|
|
|
return |
|
|
|
} |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/auth/wxUserInfo?mode=edit' |
|
|
|
}) |
|
|
|
}, |
|
|
|
goToLogin() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/auth/wxLogin' |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async fetchNotice() { |
|
|
|
try { |
|
|
|
// todo: check |
|
|
|
this.notice = (await this.$fetch('getNotice'))?.[0]?.title |
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
onActivate() { |
|
|
|
if (!this.isLoggedIn) { |
|
|
|
this.goToLogin() |
|
|
|
return |
|
|
|
} |
|
|
|
this.$refs.popupActivate.open(this.role) |
|
|
|
}, |
|
|
|
getDesc(str) { |
|
|
|
if (!str) { |
|
|
|
return '' |
|
|
|
} |
|
|
|
|
|
|
|
return str.replace(/<.*?>/g, '') |
|
|
|
}, |
|
|
|
goToNewsDetail(id) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages_order/mine/news?id=${id}` |
|
|
|
}) |
|
|
|
}, |
|
|
|
goToEditUserInfo() { |
|
|
|
if (!this.isLoggedIn) { |
|
|
|
this.goToLogin() |
|
|
|
return |
|
|
|
} |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/auth/wxUserInfo?mode=edit' |
|
|
|
}) |
|
|
|
}, |
|
|
|
goToLogin() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/auth/wxLogin' |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
|
|
|
|
background-color: #001B3C; |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 26rpx 18rpx 40rpx; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
width: 143rpx; |
|
|
|
height: 143rpx; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
.name { |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 38rpx; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tags {} |
|
|
|
} |
|
|
|
|
|
|
|
.setting { |
|
|
|
position: absolute; |
|
|
|
right: 26rpx; |
|
|
|
top: 37rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tag { |
|
|
|
display: inline-block; |
|
|
|
padding: 6rpx 21rpx; |
|
|
|
border: 1rpx solid #999999; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 24rpx; |
|
|
|
border-radius: 23rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
|
|
&-label { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tools { |
|
|
|
&-box { |
|
|
|
width: 100vw; |
|
|
|
height: 406rpx; |
|
|
|
padding: 0 5rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
width: calc(100vw - 69rpx*2); |
|
|
|
left: 69rpx; |
|
|
|
bottom: 64rpx; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.activate { |
|
|
|
position: absolute; |
|
|
|
width: calc(100% - 199rpx); |
|
|
|
height: 80rpx; |
|
|
|
top: 31rpx; |
|
|
|
right: 37rpx; |
|
|
|
|
|
|
|
&-tips { |
|
|
|
flex: 1; |
|
|
|
color: #976224; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-highlight { |
|
|
|
color: #FF6868; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-activate { |
|
|
|
width: 172rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tool { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
color: #57595B; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
padding: 0 20rpx 20rpx 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.notice { |
|
|
|
padding: 22rpx 21rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 49rpx; |
|
|
|
height: 49rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.updates { |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
&-header { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&-bg { |
|
|
|
height: 51rpx; |
|
|
|
width: 58rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
color: #262626; |
|
|
|
font-size: 38rpx; |
|
|
|
font-weight: 900; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
padding: 0; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16); |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
&-img { |
|
|
|
width: 100%; |
|
|
|
height: 252rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-info { |
|
|
|
padding: 15rpx 18rpx 8rpx 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-title { |
|
|
|
color: #474747; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-desc { |
|
|
|
color: #CCCCCC; |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.service { |
|
|
|
position: fixed; |
|
|
|
right: 29rpx; |
|
|
|
bottom: 312rpx; |
|
|
|
width: 149rpx; |
|
|
|
height: 158rpx; |
|
|
|
} |
|
|
|
.page { |
|
|
|
|
|
|
|
background-color: #001B3C; |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 26rpx 18rpx 40rpx; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
width: 143rpx; |
|
|
|
height: 143rpx; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
.name { |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 38rpx; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tags {} |
|
|
|
} |
|
|
|
|
|
|
|
.setting { |
|
|
|
position: absolute; |
|
|
|
right: 26rpx; |
|
|
|
top: 37rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tag { |
|
|
|
display: inline-block; |
|
|
|
padding: 6rpx 21rpx; |
|
|
|
border: 1rpx solid #999999; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 24rpx; |
|
|
|
border-radius: 23rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
|
|
&-label { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tools { |
|
|
|
&-box { |
|
|
|
width: 100vw; |
|
|
|
height: 406rpx; |
|
|
|
padding: 0 5rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
width: calc(100vw - 69rpx*2); |
|
|
|
left: 69rpx; |
|
|
|
bottom: 64rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.tool{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.tool-icon-bg { |
|
|
|
width: 90rpx; |
|
|
|
height: 90rpx; |
|
|
|
background-color: #001B3C; |
|
|
|
border-radius: 15rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.activate { |
|
|
|
position: absolute; |
|
|
|
width: calc(100% - 199rpx); |
|
|
|
height: 80rpx; |
|
|
|
top: 31rpx; |
|
|
|
right: 37rpx; |
|
|
|
|
|
|
|
&-tips { |
|
|
|
flex: 1; |
|
|
|
color: #976224; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-highlight { |
|
|
|
color: #FF6868; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-activate { |
|
|
|
width: 172rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tool { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
color: #57595B; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 88rpx; |
|
|
|
height: 88rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
padding: 0 20rpx 20rpx 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.notice { |
|
|
|
padding: 22rpx 21rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
&-icon { |
|
|
|
width: 49rpx; |
|
|
|
height: 49rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.updates { |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
&-header { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&-bg { |
|
|
|
height: 51rpx; |
|
|
|
width: 58rpx; |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
color: #262626; |
|
|
|
font-size: 38rpx; |
|
|
|
font-weight: 900; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
padding: 0; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16); |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
&-img { |
|
|
|
width: 100%; |
|
|
|
height: 252rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-info { |
|
|
|
padding: 15rpx 18rpx 8rpx 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-title { |
|
|
|
color: #474747; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-desc { |
|
|
|
color: #CCCCCC; |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.service { |
|
|
|
position: fixed; |
|
|
|
right: 29rpx; |
|
|
|
bottom: 312rpx; |
|
|
|
width: 149rpx; |
|
|
|
height: 158rpx; |
|
|
|
} |
|
|
|
</style> |
