TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
唐明明
2022-06-07 16:37:03 +08:00
parent b1e8d774ff
commit 1c6091371e
1706 changed files with 225309 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
pages/life/life.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<view class="life">
<!-- 账户信息 -->
<view class="life-header">
<view class="life-header-flex">
<view class="life-header-item">共力值：0.00</view>
<view class="life-header-item">余额：0.00</view>
</view>
</view>
<!-- 共力人生 -->
<view class="life-cover">
<image class="life-cover-back" :src="require('@/static/life/back.png')"></image>
<view class="life-role">
<image class="life-role-src" :src="require('@/static/role/1.png')" mode="widthFix"/>
<view class="life-role-content">
<view class="life-role-nick">唐明明</view>
<view class="life-role-card">
<image :src="require('@/static/role/role_icon_00.png')" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- 功能入口 -->
<view class="life-nav">
<view class="life-nav-item">
<image :src="require('@/static/life/icon_00.png')" mode="widthFix" />
<view>共力健康</view>
</view>
<view class="life-nav-item">
<image :src="require('@/static/life/icon_01.png')" mode="widthFix" />
<view>共力文娱</view>
</view>
<view class="life-nav-item">
<image :src="require('@/static/life/icon_02.png')" mode="widthFix" />
<view>共力发展</view>
</view>
</view>
<view class="life-flex">
<view class="life-flex-item house">
<view class="house-content">
<view class="house-title">共力生活</view>
<view class="house-subtitle">共力共慧</br>健康生活馆</view>
</view>
<image src="../../static/img/house_back.jpg" mode="aspectFill"></image>
</view>
<view class="life-flex-item both">
<view class="both-item team">
<view class="team-content">
<view class="team-title">DTS</view>
<view class="team-subtitle">数字化产权交易</view>
</view>
<image src="../../static/img/text_back.jpg" mode="aspectFill"></image>
</view>
<view class="both-item team">
<view class="team-content">
<view class="team-title">共力团队</view>
<view class="team-subtitle">
近期3人加入家族</br>
近期3人加入部落
</view>
</view>
<image src="../../static/img/team_back.jpg" mode="aspectFill"></image>
</view>
</view>
<view class="life-flex-item other">
<view class="other-title">
<image src="../../static/life/icon_05.png" mode="widthFix"></image>
消息中心
</view>
<view class="other-subtitle">1条消息</view>
<image class="other-back" src="../../static/life/icon_07.png"></image>
</view>
<view class="life-flex-item other">
<view class="other-title">
<image src="../../static/life/icon_03.png" mode="widthFix"></image>
邀请朋友
</view>
<view class="other-subtitle">2个邀请码可使用</view>
<image class="other-back" src="../../static/life/icon_08.png"></image>
</view>
<view class="life-flex-item other">
<view class="other-title">
<image src="../../static/life/icon_04.png" mode="widthFix"></image>
我的订单
</view>
<view class="other-subtitle">暂无订单</view>
<image class="other-back" src="../../static/life/icon_09.png"></image>
</view>
<view class="life-flex-item other">
<view class="other-title">
<image src="../../static/life/icon_06.png" mode="widthFix"></image>
共力好友
</view>
<view class="other-subtitle">在线即时互动</view>
<image class="other-back" src="../../static/life/icon_10.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.life{
min-height: 100vh;
background: #f8f8f8;
}
// 功能栏目
.life-flex{
padding: 0 20rpx 30rpx;
display: flex;
flex-wrap: wrap;
.life-flex-item{
background: white;
border-radius: 20rpx;
width: calc(50% - 20rpx);
margin: 10rpx;
padding: 30rpx;
box-sizing: border-box;
&.house{
height: 400rpx;
position: relative;
overflow: hidden;
background-color: #555;
image{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
}
.house-content{
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.house-title{
color: white;
font-size: 46rpx;
font-weight: bold;
}
.house-subtitle{
color: white;
font-size: 30rpx;
}
}
}
&.nav{
width: calc(33.33% - 20rpx);
height: 150rpx;
position: relative;
overflow: hidden;
background-color: #555;
image{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
}
.nav-content{
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.nav-title{
color: white;
font-size: 40rpx;
font-weight: bold;
}
}
}
&.both{
background: none;
padding: 0;
border-radius: 0;
.both-item{
background: white;
height: 190rpx;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
&:first-child{
margin-bottom: 20rpx;
}
&.team{
position: relative;
overflow: hidden;
background-color: #555;
image{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
}
.team-content{
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.team-title{
color: white;
font-size: 46rpx;
font-weight: bold;
}
.team-subtitle{
color: white;
font-size: 26rpx;
}
}
}
}
}
&.other{
height: 160rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
.other-back{
width: 150rpx;
height: 150rpx;
position: absolute;
bottom: 0;
right: 0;
}
.other-title{
font-size: 40rpx;
font-weight: bold;
color: #333;
image{
width: 42rpx;
vertical-align: middle;
margin-bottom: 4rpx;
margin-right: 5rpx;
}
}
.other-subtitle{
font-size: 26rpx;
color: gray;
}
}
}
}
// 入口模块
.life-nav{
padding: 20rpx 20rpx 10rpx;
display: flex;
&-item{
margin: 10rpx;
border-radius: 20rpx;
width: 33.33%;
padding: 30rpx 20rpx;
text-align: center;
color: white;
font-weight: bold;
font-size: 36rpx;
image{
width: 60rpx;
height: 60rpx;
vertical-align: top;
}
&:nth-child(1){
background-color: #6da2f8;
}
&:nth-child(2){
background-color: #faa471;
}
&:nth-child(3){
background-color: #8c79f9;
}
}
}
// header
.life-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: rgba(255, 255, 255, 1);
@extend .ios-top;
.life-header-flex{
padding: 20rpx 30rpx 30rpx;
display: flex;
height: 70rpx;
line-height: 70rpx;
.life-header-item{
border:solid 1px #ddd;
border-radius: 35rpx;
padding: 0 20rpx;
margin-right: 20rpx;
font-size: 28rpx;
}
}
}
// 角色信息
.life-cover{
position: relative;
width: 100%;
padding-top: 134%;
overflow: hidden;
.life-cover-back{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.life-role{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 99;
text-align: center;
.life-role-src{
width: 400rpx;
}
.life-role-content{
padding-bottom: 50rpx;
font-weight: bold;
.life-role-nick{
color: #333;
font-size: 50rpx;
}
.life-role-card{
padding-top: 10rpx;
image{
width: 150rpx;
}
}
}
}
}
</style>