Skip to content

肖康 / H5_2.0

Go to a project
Commit dddfea32 by LJM
Options

user

parent 7581e76f
Inline Side-by-side
Showing with 241 additions and 90 deletions
assets/css/mine/user.scss
.page-user {
height: 100vh;
background: #f5f5f7;
padding: 0 24rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #ffffff 277px);
padding: 22rpx 24rpx 0 24rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
.user-head {
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 {
margin-top: 16rpx;
margin-bottom: 25rpx;
......@@ -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>
<view class="bottom-nav-fixed row">
<navigator url="/" class="navitem" :class="{'act':actval==1}">
<text class="icon iconfont icon-home"></text>
<view>首页</view>
</navigator>
<navigator url="#" class="navitem" :class="{'act':actval==2}">
<text class="icon iconfont icon-class"></text>
<view>分类</view>
</navigator>
<navigator url="/joincart" class="cartbgo navitem" :class="{'act':actval==3}">
<text class="icon iconfont icon-car"></text>
<view >购物车<text class="counts">11</text></view>
</navigator>
<navigator url="#" class="navitem" :class="{'act':actval==4}">
<text class="icon iconfont icon-user"></text>
<view>我的</view>
</navigator>
</view>
<view class="bottom-nav-fixed row">
<navigator url="/" class="navitem" :class="{ act: actval == 1 }">
<text class="icon iconfont icon-home"></text>
<view>首页</view>
</navigator>
<navigator url="#" class="navitem" :class="{ act: actval == 2 }">
<text class="icon iconfont icon-class"></text>
<view>分类</view>
</navigator>
<navigator url="/joincart" class="cartbgo navitem" :class="{ act: actval == 3 }">
<text class="icon iconfont icon-car"></text>
<view>
购物车
<text class="counts">11</text>
</view>
</navigator>
<navigator url="/user" class="navitem" :class="{ act: actval == 4 }">
<text class="icon iconfont icon-user"></text>
<view>我的</view>
</navigator>
</view>
</template>
<script>
export default {
name: "bottom_nav",
props: {
actval: {
type: String,
default: 1
},
},
data() {
return {
}
},
methods: {
getData() {
}
}
}
export default {
name: 'bottom_nav',
props: {
actval: {
type: String,
default: 1
}
},
data() {
return {};
},
methods: {
getData() {}
}
};
</script>
<style scoped lang="scss">
.bottom-nav-fixed {
width: 750rpx;
height: 100rpx;
background: #fff;
position: fixed;
bottom:0rpx;
z-index: 6;
padding-top: 14rpx;
navigator{
display: block;
color:$uni-color999;
font-size: 20rpx;
width:25%;
text-align: center;
text{
font-size: 44rpx;
}
&.act{
color:$uni-coloract;
}
&.cartbgo{
position: relative;
.counts{
width: 46rpx;
height: 32rpx;
background: #FF3700;
border-radius: 16rpx;
border: 2rpx solid #FFFFFF;
position: absolute;
right:40rpx;
top:-5rpx;
color:#fff;
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
<style scoped lang="scss">
.bottom-nav-fixed {
width: 750rpx;
height: 100rpx;
background: #fff;
position: fixed;
bottom: 0rpx;
z-index: 6;
padding-top: 14rpx;
navigator {
display: block;
color: $uni-color999;
font-size: 20rpx;
width: 25%;
text-align: center;
text {
font-size: 44rpx;
}
&.act {
color: $uni-coloract;
}
&.cartbgo {
position: relative;
.counts {
width: 46rpx;
height: 32rpx;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
position: absolute;
right: 40rpx;
top: -5rpx;
color: #fff;
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
}
}
}
</style>
pages/mine/user.vue
<template>
<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="title">服务与工具</view>
<view class="list-tool-wrap">
......@@ -8,33 +36,51 @@
<text class="tt">地址管理</text>
</view>
<view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text>
<text class="iconfont icon-fpp"></text>
<text class="tt">发票管理</text>
</view>
<view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text>
<text class="iconfont icon-a-juxingbeifen142"></text>
<text class="tt">京东卡</text>
</view>
<view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text>
<text class="iconfont icon-a-juxingbeifen143"></text>
<text class="tt">我的物料库</text>
</view>
<view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text>
<text class="iconfont icon-a-juxingbeifen144"></text>
<text class="tt">询价记录</text>
</view>
<view class="box column rowCenter verCenter">
<text class="iconfont icon-dzz"></text>
<text class="iconfont icon-a-juxing3"></text>
<text class="tt">投诉反馈</text>
</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>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import bottomNavFixed from '@/components/bottom_nav.vue';
export default {
components: {
bottomNavFixed
},
data() {
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