Skip to content

肖康 / H5_2.0

Go to a project
Commit dddfea32 by LJM
Options

user

parent 7581e76f
Inline Side-by-side
Showing with 194 additions and 42 deletions
assets/css/mine/user.scss
.page-user { .page-user {
height: 100vh; padding: 22rpx 24rpx 0 24rpx;
background: #f5f5f7; background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
padding: 0 24rpx; .user-head {
background: linear-gradient(200deg, #d6e8ff 0%, #ffffff 277px); justify-content: flex-end;
.msg {
position: relative;
margin-right: 32rpx;
.num {
position: absolute;
right: -26rpx;
top: -12rpx;
width: 46rpx;
height: 32rpx;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
font-size: 24rpx;
color: #ffffff;
}
}
.iconfont {
font-size: 44rpx;
color: #484b59;
}
}
.info {
padding-left: 14rpx;
margin-bottom: 80rpx;
.t1 {
font-size: 32rpx;
color: #292b33;
font-weight: bold;
margin-right: 24rpx;
}
.t2 {
width: 76rpx;
height: 34rpx;
background: rgba(255, 255, 255, 0);
border-radius: 17rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
}
.company {
width: 100%;
height: 88rpx;
image {
width: 100%;
height: 88rpx;
}
}
.user-center {
padding: 32rpx 0 40rpx 0;
background: #ffffff;
display: grid;
grid-template-columns: repeat(3, 1fr);
.box {
position: relative;
grid-column-end: span 1;
image {
width: 52rpx;
height: 52rpx;
}
.tt {
margin-top: 10rpx;
font-size: 24rpx;
color: #919399;
}
.tip {
position: absolute;
top: 0;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: #ff3700;
z-index: 99;
left: 0;
left: 50%;
margin-left: 10rpx;
}
}
}
.list-tool { .list-tool {
margin-top: 16rpx; margin-top: 16rpx;
margin-bottom: 25rpx; margin-bottom: 25rpx;
...@@ -33,4 +112,34 @@ ...@@ -33,4 +112,34 @@
} }
} }
} }
.activity {
.title {
height: 80rpx;
.tt {
font-size: 24rpx;
color: #484b59;
}
.right-bar {
.bar-tt {
font-size: 24rpx;
color: #919399;
margin-right: 6px;
}
.iconfont {
font-size: 28rpx;
color: #919399;
}
}
}
.list {
.box {
width: 100%;
height: 144rpx;
image {
width: 100%;
height: 144rpx;
}
}
}
}
} }
components/bottom_nav.vue
<template> <template>
<view class="bottom-nav-fixed row"> <view class="bottom-nav-fixed row">
<navigator url="/" class="navitem" :class="{'act':actval==1}"> <navigator url="/" class="navitem" :class="{ act: actval == 1 }">
<text class="icon iconfont icon-home"></text> <text class="icon iconfont icon-home"></text>
<view>首页</view> <view>首页</view>
</navigator> </navigator>
<navigator url="#" class="navitem" :class="{'act':actval==2}"> <navigator url="#" class="navitem" :class="{ act: actval == 2 }">
<text class="icon iconfont icon-class"></text> <text class="icon iconfont icon-class"></text>
<view>分类</view> <view>分类</view>
</navigator> </navigator>
<navigator url="/joincart" class="cartbgo navitem" :class="{'act':actval==3}"> <navigator url="/joincart" class="cartbgo navitem" :class="{ act: actval == 3 }">
<text class="icon iconfont icon-car"></text> <text class="icon iconfont icon-car"></text>
<view >购物车<text class="counts">11</text></view> <view>
购物车
<text class="counts">11</text>
</view>
</navigator> </navigator>
<navigator url="#" class="navitem" :class="{'act':actval==4}"> <navigator url="/user" class="navitem" :class="{ act: actval == 4 }">
<text class="icon iconfont icon-user"></text> <text class="icon iconfont icon-user"></text>
<view>我的</view> <view>我的</view>
</navigator> </navigator>
...@@ -20,67 +23,61 @@ ...@@ -20,67 +23,61 @@
</template> </template>
<script> <script>
export default {
export default { name: 'bottom_nav',
name: "bottom_nav",
props: { props: {
actval: { actval: {
type: String, type: String,
default: 1 default: 1
}, }
}, },
data() { data() {
return { return {};
}
}, },
methods: { methods: {
getData() { getData() {}
}
}
} }
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bottom-nav-fixed { .bottom-nav-fixed {
width: 750rpx; width: 750rpx;
height: 100rpx; height: 100rpx;
background: #fff; background: #fff;
position: fixed; position: fixed;
bottom:0rpx; bottom: 0rpx;
z-index: 6; z-index: 6;
padding-top: 14rpx; padding-top: 14rpx;
navigator{ navigator {
display: block; display: block;
color:$uni-color999; color: $uni-color999;
font-size: 20rpx; font-size: 20rpx;
width:25%; width: 25%;
text-align: center; text-align: center;
text{ text {
font-size: 44rpx; font-size: 44rpx;
} }
&.act{ &.act {
color:$uni-coloract; color: $uni-coloract;
} }
&.cartbgo{ &.cartbgo {
position: relative; position: relative;
.counts{ .counts {
width: 46rpx; width: 46rpx;
height: 32rpx; height: 32rpx;
background: #FF3700; background: #ff3700;
border-radius: 16rpx; border-radius: 16rpx;
border: 2rpx solid #FFFFFF; border: 2rpx solid #ffffff;
position: absolute; position: absolute;
right:40rpx; right: 40rpx;
top:-5rpx; top: -5rpx;
color:#fff; color: #fff;
font-size: 24rpx; font-size: 24rpx;
line-height: 28rpx; line-height: 28rpx;
text-align: center; text-align: center;
} }
} }
} }
} }
</style> </style>
pages/mine/user.vue
<template> <template>
<view class="page-user"> <view class="page-user">
<view class="user-head row">
<view class="msg">
<text class="iconfont icon-news"></text>
<text class="num row rowCenter verCenter">28</text>
</view>
<text class="iconfont icon-juxing1"></text>
</view>
<view class="info row verCenter">
<text class="t1">欢迎您，13800138000</text>
<text class="t2 row rowCenter verCenter">个人</text>
</view>
<view class="company"><image src="../../static/company.png"></image></view>
<view class="user-center">
<view class="box column rowCenter verCenter">
<image src="../../static/order.png"></image>
<text class="tt">我的订单</text>
<text class="tip"></text>
</view>
<view class="box column rowCenter verCenter">
<image src="../../static/coup.png"></image>
<text class="tt">我的优惠券</text>
<text class="tip"></text>
</view>
<view class="box column rowCenter verCenter">
<image src="../../static/qq.png"></image>
<text class="tt">我的客服</text>
</view>
</view>
<view class="list-tool"> <view class="list-tool">
<view class="title">服务与工具</view> <view class="title">服务与工具</view>
<view class="list-tool-wrap"> <view class="list-tool-wrap">
...@@ -8,33 +36,51 @@ ...@@ -8,33 +36,51 @@
<text class="tt">地址管理</text> <text class="tt">地址管理</text>
</view> </view>
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text> <text class="iconfont icon-fpp"></text>
<text class="tt">发票管理</text> <text class="tt">发票管理</text>
</view> </view>
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text> <text class="iconfont icon-a-juxingbeifen142"></text>
<text class="tt">京东卡</text> <text class="tt">京东卡</text>
</view> </view>
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text> <text class="iconfont icon-a-juxingbeifen143"></text>
<text class="tt">我的物料库</text> <text class="tt">我的物料库</text>
</view> </view>
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text> <text class="iconfont icon-a-juxingbeifen144"></text>
<text class="tt">询价记录</text> <text class="tt">询价记录</text>
</view> </view>
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text> <text class="iconfont icon-a-juxing3"></text>
<text class="tt">投诉反馈</text> <text class="tt">投诉反馈</text>
</view> </view>
</view> </view>
</view> </view>
<view class="activity">
<view class="title row bothSide verCenter">
<text class="tt">活动中心</text>
<view class="right-bar row verCenter">
<text class="bar-tt">更多活动</text>
<text class="iconfont icon-jt"></text>
</view>
</view>
<view class="list">
<view class="box"><image src="https://img.ichunt.com/images/cms/202304/21/c2ca82b250ad4159d37f6a38eed88db8.jpg" mode="aspectFill"></image></view>
</view>
</view>
<bottomNavFixed actval="4" />
</view> </view>
</template> </template>
<script> <script>
import { Api_Url } from '@/util/api.js'; import { Api_Url } from '@/util/api.js';
import bottomNavFixed from '@/components/bottom_nav.vue';
export default { export default {
components: {
bottomNavFixed
},
data() { data() {
return {}; return {};
}, },
......
static/iconfont.ttf deleted 100644 → 0
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment