Skip to content

肖康 / H5_2.0

Go to a project
Commit b3eec796 by LJM
Options

css

parent ff078931
Inline Side-by-side
Showing with 281 additions and 15 deletions
assets/css/mine/msg.scss 0 → 100644
.page-msg {
padding-top: 210rpx;
.tab {
position: fixed;
top: 88rpx;
left: 0;
right: 0;
width: 100%;
height: 88rpx;
z-index: 9999;
background-color: #ffffff;
.box {
position: relative;
height: 88rpx;
.tt {
font-size: 28rpx;
color: #484b59;
}
.msg {
position: absolute;
right: -40rpx;
top: 6rpx;
width: 46rpx;
height: 32rpx;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #ffffff;
font-size: 24rpx;
color: #ffffff;
}
&.curr {
.tt {
color: #292b33;
font-weight: bold;
}
}
&.curr::after {
position: absolute;
bottom: -4rpx;
left: 0;
right: 0;
margin: 0 auto;
width: 53rpx;
height: 7rpx;
background: #1969f9;
border-radius: 4rpx;
content: '';
}
}
}
.list {
background: #ffffff;
.box {
position: relative;
margin: 0 24rpx;
padding: 24rpx 0;
border-bottom: 1px solid #f0f0f2;
.iconfont {
font-size: 48rpx;
color: #484b59;
}
.text {
padding-left: 24rpx;
position: relative;
.t1 {
font-size: 26rpx;
color: #484b59;
font-weight: 600;
margin-bottom: 12rpx;
}
.t2 {
font-size: 24rpx;
color: #919399;
font-weight: 400;
}
.arrow {
width: 12rpx;
height: 12rpx;
background: #ff3700;
z-index: 99;
border-radius: 50%;
margin-left: 9rpx;
}
}
.time {
position: absolute;
right: 24rpx;
top: 24rpx;
white-space: nowrap;
font-size: 20rpx;
color: #c6c7cc;
}
}
}
}
.page-msg-detail {
background-color: #ffffff;
padding: 100rpx 24rpx 24rpx 24rpx;
.content {
.t1 {
font-size: 32rpx;
color: #292b33;
font-weight: bold;
margin-bottom: 12rpx;
}
.t2 {
font-size: 24rpx;
color: #919399;
margin-bottom: 36rpx;
}
.desc {
font-size: 26rpx;
color: #484b59;
}
}
}
.no-data {
image {
width: 356rpx;
height: 356rpx;
}
.tt {
margin-top: 32rpx;
font-size: 28rpx;
color: #292b33;
}
}
pages.json
...@@ -41,12 +41,12 @@ ...@@ -41,12 +41,12 @@
"navigationBarTitleText": "品牌详情" "navigationBarTitleText": "品牌详情"
} }
}, },
{ {
"path": "pages/detail/detail/", "path": "pages/detail/detail/",
"style": { "style": {
"navigationBarTitleText": "商品详情" "navigationBarTitleText": "商品详情"
} }
}, },
{ {
"path": "pages/mine/login", "path": "pages/mine/login",
"style": { "style": {
...@@ -130,6 +130,24 @@ ...@@ -130,6 +130,24 @@
"style": { "style": {
"navigationBarTitleText": "关于我们" "navigationBarTitleText": "关于我们"
} }
},
{
"path": "pages/mine/msg",
"style": {
"navigationBarTitleText": "我的消息"
}
},
{
"path": "pages/mine/msgDetail",
"style": {
"navigationBarTitleText": "消息详情"
}
},
{
"path": "pages/mine/setting",
"style": {
"navigationBarTitleText": "账户设置"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
pages/mine/article.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="page-news-detail"> <view class="page-news-detail">
<navElement title="新闻详情"> <navElement title="新闻详情">
<template slot="title-bar"> <template slot="title-bar">
<view style="text-align: right;"><text class="iconfont icon-juxing5"></text></view> <view style="text-align: right;" @click="open()"><text class="iconfont icon-juxing5"></text></view>
</template> </template>
</navElement> </navElement>
<view class="detail"> <view class="detail">
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
onShow() {}, onShow() {},
methods: { methods: {
open() { open() {
this.$refs.popup.open('bottom'); this.$refs.share.open('bottom');
} }
} }
}; };
......
pages/mine/msg.vue 0 → 100644
<template>
<view class="page-msg">
<navElement title="我的消息"></navElement>
<view class="tab row avarage verCenter">
<text class="box curr row verCenter"><text class="tt">全部</text></text>
<text class="box row verCenter">
<text class="tt">未读</text>
<text class="msg row rowCenter verCenter">28</text>
</text>
<text class="box row verCenter"><text class="tt">已读</text></text>
</view>
<view class="list">
<navigator class="box row verCenter" v-for="(item, index) in 10" :key="index" url="/user/msgDetail" hover-class="none">
<text class="iconfont icon-adindex2"></text>
<view class="text column">
<view class="row">
<view class="t1">活动通知</view>
<text class="arrow"></text>
</view>
<text class="t2">恭喜您获得会员专享200.00元抵扣券一张！</text>
</view>
<view class="time">2023-04-12 11:16</view>
</navigator>
</view>
<view class="no-data column rowCenter verCenter">
<image src="../../static/nodate.png"></image>
<text class="tt">暂无消息</text>
</view>
</view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {};
},
onShow() {},
methods: {}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/msg.scss';
</style>
pages/mine/msgDetail.vue 0 → 100644
<template>
<view class="page-msg-detail">
<navElement title="消息详情"></navElement>
<view class="content">
<view class="t1">恭喜您获得会员专享200.00元抵扣券一张！</view>
<view class="t2">2023-04-12 11:16</view>
<view class="desc">尊敬的会员： 您好！ 恭喜您获得会员专享200.00元抵扣券一张，有效期：2023-04-06，可用于猎芯网下单。 使用规则： 1、该券可用于猎芯网下单； 2、该券仅用于您个人账户下单； 3、该券满10000元可用，可用于全站所有商品； 再次感谢您对猎芯网的支持，我们为您提供涵盖购买、报关、仓储、金融等整个交易环节服务，品质可追溯，服务更贴心。 *活动最终解释权由猎芯网所有</view>
</view>
</view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {};
},
onShow() {},
methods: {}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/msg.scss';
</style>
pages/mine/setting.vue 0 → 100644
<template>
<view class="page-setting"><navElement title="账户设置"></navElement></view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {};
},
onShow() {},
methods: {}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/setting.scss';
</style>
pages/mine/user.vue
<template> <template>
<view class="page-user"> <view class="page-user">
<view class="user-head row"> <view class="user-head row">
<view class="msg"> <navigator class="msg" url="/user/msg" hover-class="none">
<text class="iconfont icon-news"></text> <text class="iconfont icon-news"></text>
<text class="num row rowCenter verCenter">28</text> <text class="num row rowCenter verCenter">28</text>
</view> </navigator>
<text class="iconfont icon-juxing1"></text> <navigator class="iconfont icon-juxing1" url="/user/setting" hover-class="none"></navigator>
</view> </view>
<view class="info row verCenter"> <view class="info row verCenter">
<text class="t1">欢迎您，{{ userInfo.user_info.mobile }}</text> <text class="t1">欢迎您，{{ userInfo.user_info.mobile }}</text>
...@@ -77,10 +77,6 @@ ...@@ -77,10 +77,6 @@
<text class="iconfont icon-a-juxingbeifen142"></text> <text class="iconfont icon-a-juxingbeifen142"></text>
<text class="tt">京东卡</text> <text class="tt">京东卡</text>
</navigator> </navigator>
<!-- <view class="box column rowCenter verCenter">
<text class="iconfont icon-a-juxingbeifen143"></text>
<text class="tt">我的物料库</text>
</view> -->
<view class="box column rowCenter verCenter"> <view class="box column rowCenter verCenter">
<text class="iconfont icon-a-juxingbeifen144"></text> <text class="iconfont icon-a-juxingbeifen144"></text>
<text class="tt">询价记录</text> <text class="tt">询价记录</text>
......
router/index.js
...@@ -179,6 +179,27 @@ const router = new Router({ ...@@ -179,6 +179,27 @@ const router = new Router({
meta: { meta: {
title: '关于我们' title: '关于我们'
} }
},
{
path: '/pages/mine/msg',
aliasPath: '/user/msg',
meta: {
title: '我的消息'
}
},
{
path: '/pages/mine/msgDetail',
aliasPath: '/user/msgDetail',
meta: {
title: '消息详情'
}
},
{
path: '/pages/mine/setting',
aliasPath: '/user/setting',
meta: {
title: '账户设置'
}
} }
] ]
}); });
......
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