Skip to content

肖康 / H5_2.0

Go to a project
Commit c419c292 by LJM
Options

css

parent 89ff16b7
Inline Side-by-side
Showing with 418 additions and 7 deletions
assets/css/mine/activity.scss
.page-activity {
padding-top: 202rpx;
padding-bottom: 100rpx;
.tab {
position: fixed;
top: 88rpx;
width: 100%;
background: #ffffff;
height: 88rpx;
z-index: 99;
.box {
position: relative;
height: 100%;
transition: all 0.4s ease;
&.curr {
font-weight: bold;
&::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 53rpx;
height: 7rpx;
margin: 0 auto;
background: #1969f9;
border-radius: 4rpx;
content: '';
}
}
}
}
.list {
padding: 0 24rpx;
.box {
margin-bottom: 16rpx;
.pic {
width: 100%;
height: 144rpx;
border-radius: 10rpx 10rpx 0 0;
image {
width: 100%;
height: 144rpx;
border-radius: 10rpx 10rpx 0 0;
}
}
.text {
border-radius: 0 0 10rpx 10rpx;
background-color: #fff;
padding: 16rpx 0 16rpx 24rpx;
.p1 {
font-size: 28rpx;
color: #484b59;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 16rpx;
}
.p2 {
font-size: 22rpx;
color: #919399;
}
}
}
}
.coupon-list {
padding: 0 24rpx;
.box {
position: relative;
height: 176rpx;
background: #ffffff;
border-radius: 0px 10rpx 10rpx 0px;
margin-bottom: 16rpx;
.left {
width: 230rpx;
height: 176rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/19/e8f03900544551d09436a542ee7d0ea0.png') no-repeat center;
background-size: cover;
.p1 {
margin-bottom: 8rpx;
.t1 {
font-size: 22rpx;
color: #ffffff;
}
.t2 {
margin-left: 10rpx;
font-size: 60rpx;
color: #ffffff;
}
}
.p2 {
font-size: 20rpx;
color: #ffffff;
}
}
.right {
padding-left: 24rpx;
.p1 {
margin-bottom: 16rpx;
.t1 {
font-size: 22rpx;
color: #484b59;
}
.t2 {
font-size: 22rpx;
color: #1969f9;
}
}
.p2 {
margin-bottom: 16rpx;
}
.p3 {
width: 142rpx;
height: 40rpx;
border-radius: 6rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
}
.type-1 {
position: absolute;
right: 0;
top: 0;
width: 82rpx;
height: 68rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/19/f8fb5d9934fd1227ba807378939a5565.png') no-repeat center;
background-size: cover;
z-index: 99;
}
&.disabled {
.left {
background: url('https://img.ichunt.com/images/ichunt/202305/19/ebf691eb49a2a3dffe612baea352a7b6.png') no-repeat center;
background-size: cover;
}
}
}
}
}
assets/css/mine/feedback.scss 0 → 100644
.page-feedback {
padding-top: 112rpx;
.content {
padding: 0 24rpx;
.t1 {
font-size: 28rpx;
color: #292b33;
font-weight: bold;
margin-bottom: 24rpx;
}
.type {
padding: 24rpx;
background: #ffffff;
border-radius: 10rpx;
margin-bottom: 16rpx;
.box {
width: 206rpx;
height: 72rpx;
margin-right: 16rpx;
background: #f5f5f7;
border-radius: 6rpx;
font-size: 24rpx;
color: #292b33;
transition: all 0.4s ease;
&.curr {
background-color: #1969f9;
color: #ffffff;
}
}
}
.suggest {
padding: 24rpx;
background-color: #ffffff;
.t2 {
font-size: 24rpx;
color: #484b59;
margin-bottom: 16rpx;
}
textarea {
width: 100%;
height: 216rpx;
background: #f5f5f7;
border-radius: 10rpx;
padding: 24rpx;
box-sizing: border-box;
font-size: 26rpx;
}
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
background: #ffffff;
box-shadow: 0px -4rpx 20rpx 0px rgba(198, 199, 204, 0.1);
border-radius: 10rpx 10rpx 0px 0px;
padding: 24rpx;
.btn1 {
width: 100%;
height: 68rpx;
background: #1969f9;
border-radius: 10rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
assets/css/mine/inquery.scss 0 → 100644
.page-feedback {
padding-top: 112rpx;
.content {
padding: 0 24rpx;
.t1 {
font-size: 28rpx;
color: #292b33;
font-weight: bold;
margin-bottom: 24rpx;
}
.type {
padding: 24rpx;
background: #ffffff;
border-radius: 10rpx;
margin-bottom: 16rpx;
.box {
width: 206rpx;
height: 72rpx;
margin-right: 16rpx;
background: #f5f5f7;
border-radius: 6rpx;
font-size: 24rpx;
color: #292b33;
transition: all 0.4s ease;
&.curr {
background-color: #1969f9;
color: #ffffff;
}
}
}
.suggest {
padding: 24rpx;
background-color: #ffffff;
.t2 {
font-size: 24rpx;
color: #484b59;
margin-bottom: 16rpx;
}
textarea {
width: 100%;
height: 216rpx;
background: #f5f5f7;
border-radius: 10rpx;
padding: 24rpx;
box-sizing: border-box;
font-size: 26rpx;
}
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
background: #ffffff;
box-shadow: 0px -4rpx 20rpx 0px rgba(198, 199, 204, 0.1);
border-radius: 10rpx 10rpx 0px 0px;
padding: 24rpx;
.btn1 {
width: 100%;
height: 68rpx;
background: #1969f9;
border-radius: 10rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
pages.json
......@@ -166,6 +166,18 @@
"style": {
"navigationBarTitleText": "活动中心"
}
},
{
"path": "pages/mine/feedback",
"style": {
"navigationBarTitleText": "投诉反馈"
}
},
{
"path": "pages/mine/inquery",
"style": {
"navigationBarTitleText": "询价记录"
}
}
],
"globalStyle": {
......
pages/mine/activity.vue
<template>
<view class="page-activity">活动中心</view>
<view class="page-activity">
<navElement title="活动中心"></navElement>
<view class="tab row verCenter avarage">
<view class="box row verCenter" @click="tab(index)" v-for="(item, index) in text_arr" :key="index" :class="{ curr: index == curr }">{{ item }}</view>
</view>
<view class="list" v-if="curr == 0">
<view class="box" v-for="(item, index) in 10" :key="index">
<view class="pic"><image mode="aspectFill" src="https://img.ichunt.com/images/ichunt/202305/20/ffa1060a38803d5b436b33259fe142d0.jpg"></image></view>
<view class="text">
<view class="p1">新人注册享288大礼包，首单再送200元京东卡</view>
<view class="p2">2023-03-16 18:23:17</view>
</view>
</view>
</view>
<view class="coupon-list" v-else-if="curr == 1">
<view class="box row verCenter" v-for="(item, index) in 100" :key="index">
<view class="left column rowCenter verCenter">
<view class="p1">
<text class="t1">￥</text>
<text class="t2">10</text>
</view>
<view class="p2">满￥200可用</view>
</view>
<view class="right">
<view class="p1">
<text class="t1">适用于</text>
<text class="t2">全站</text>
<text class="t1">商品</text>
</view>
<view class="p2">2023.02.27-2023.04.01</view>
<view class="p3 row rowCenter verCenter">立即领取</view>
</view>
<text class="type-1"></text>
</view>
</view>
</view>
</template>
<script>
import { Api_Url } from '@/util/api.js';
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {};
return {
curr: 0,
text_arr: ['活动中心', '领券中心']
};
},
onShow() {},
methods: {}
methods: {
tab(index) {
this.curr = index;
}
}
};
</script>
......
pages/mine/feedback.vue 0 → 100644
<template>
<view class="page-feedback">
<navElement title="投诉反馈"></navElement>
<view class="content">
<view class="t1">问题类型</view>
<view class="type row">
<view class="box curr row rowCenter verCenter">购物流程</view>
<view class="box row rowCenter verCenter">物流问题</view>
<view class="box row rowCenter verCenter">售后服务</view>
<view class="box row rowCenter verCenter">其它</view>
</view>
<view class="suggest column">
<text class="t2">请留下您宝贵的建议：</text>
<textarea></textarea>
</view>
</view>
<view class="btn"><view class="btn1 row rowCenter verCenter">提交</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/feedback.scss';
</style>
pages/mine/inquery.vue 0 → 100644
<template>
<view class="page-feedback"><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/inquery.scss';
</style>
pages/mine/user.vue
......@@ -77,14 +77,14 @@
<text class="iconfont icon-a-juxingbeifen142"></text>
<text class="tt">京东卡</text>
</navigator>
<view class="box column rowCenter verCenter">
<navigator class="box column rowCenter verCenter" url="/user/inquery" hover-class="none">
<text class="iconfont icon-a-juxingbeifen144"></text>
<text class="tt">询价记录</text>
</view>
<view class="box column rowCenter verCenter">
</navigator>
<navigator class="box column rowCenter verCenter" url="/user/feedback" hover-class="none">
<text class="iconfont icon-a-juxing3"></text>
<text class="tt">投诉反馈</text>
</view>
</navigator>
</view>
</view>
<view class="activity">
......
router/index.js
......@@ -221,6 +221,20 @@ const router = new Router({
meta: {
title: '活动中心'
}
},
{
path: '/pages/mine/feedback',
aliasPath: '/user/feedback',
meta: {
title: '投诉反馈'
}
},
{
path: '/pages/mine/inquery',
aliasPath: '/user/inquery',
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