Skip to content

梁建民 / h5

Go to a project
Commit 481683dc by 施宇
Options

积分商城h5

parent c3eac899
Inline Side-by-side
Showing with 511 additions and 1 deletions
src/assets/css/pointmall/exchange.css 0 → 100644
.exchange {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
position: relative;
height: 100%;
overflow: hidden;
}
.exchange .f-r {
float: right;
}
.exchange .f-l {
float: left;
}
.exchange .point-list-head1 {
height: 42px;
line-height: 42px;
padding: 0 5%;
border-bottom: 1px solid #e1e1e1;
width: 100%;
display: inline;
white-space: nowrap;
overflow-x: scroll;
float: left;
overflow-y: hidden;
}
.exchange .point-list-head1 li {
display: inline-block;
width: 30%;
text-align: center;
font-size: 16px;
height: 42px;
line-height: 42px;
cursor: pointer;
box-sizing: border-box;
}
.exchange .point-list-head1 li.act {
color: #1080d0;
border-bottom: 2px solid #1080d0;
}
.exchange .exchange_content {
position: absolute;
top: 42px;
left: 0;
right: 0;
padding: 0 .32rem;
bottom: 0;
overflow-y: auto;
}
.exchange .exchange_content .data-group {
border-bottom: 1px solid #e1e1e1;
box-sizing: border-box;
}
.exchange .exchange_content .data-group .f-l {
height: 70px;
padding-top: 10px;
box-sizing: border-box;
}
.exchange .exchange_content .data-group .f-l .imgbox {
overflow: hidden;
margin-right: 10px;
}
.exchange .exchange_content .data-group .f-l .imgbox img {
width: 2rem;
height: 1.33rem;
border-radius: 4px;
}
.exchange .exchange_content .data-group .f-l.infotext {
width: 3.6rem;
}
.exchange .exchange_content .data-group .f-l.infotext .boxtextx {
height: 32.5px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 16.5px;
color: #333;
font-size: 0.37rem;
}
.exchange .exchange_content .data-group .f-l.infotext span {
color: #999;
font-size: 0.32rem;
}
.exchange .exchange_content .data-group .f-r {
height: 70px;
line-height: 70px;
color: #ffa200;
font-size: 0.37rem;
}
src/assets/css/pointmall/exchange.less 0 → 100644
.exchange {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
position: relative;
height: 100%;
overflow: hidden;
.f-r {
float: right
}
.f-l {
float: left;
}
.point-list-head1 {
height: 42px;
line-height: 42px;
padding: 0 5%;
border-bottom: 1px solid #e1e1e1;
width: 100%;
display: inline;
white-space: nowrap;
overflow-x: scroll;
float: left;
overflow-y: hidden;
li {
display: inline-block;
width: 30%;
text-align: center;
font-size: 16px;
height: 42px;
line-height: 42px;
cursor: pointer;
box-sizing: border-box;
&.act {
color: #1080d0;
border-bottom: 2px solid #1080d0;
}
}
}
.exchange_content {
position: absolute;
top: 42px;
left: 0;
right: 0;
padding: 0 .32rem;
bottom: 0;
overflow-y: auto;
.data-group {
border-bottom: 1px solid #e1e1e1;
box-sizing: border-box;
.f-l {
height: 70px;
padding-top: 10px;
box-sizing: border-box;
.imgbox {
overflow: hidden;
margin-right:10px;
img {
width: 2rem;
height: 1.33rem;
border-radius: 4px;
}
}
&.infotext {
width:3.6rem;
.boxtextx {
height: 32.5px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 16.5px;
color: #333;
font-size:0.37rem;
}
span {
color: #999;
font-size:0.32rem;
}
}
}
.f-r{
height:70px;
line-height: 70px;
color: #ffa200;
font-size:0.37rem;
}
}
}
}
\ No newline at end of file
src/assets/css/pointmall/pointDetail.css 0 → 100644
.pointer-detail {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
position: relative;
height: 100%;
overflow: hidden;
}
.pointer-detail .f-r {
float: right;
}
.pointer-detail .f-l {
float: left;
}
.pointer-detail .point-list-head {
height: 42px;
line-height: 42px;
padding: 0 0.24rem;
border-bottom: 1px solid #e1e1e1;
box-sizing: border-box;
}
.pointer-detail .point-list-head .f-l {
width: 20%;
text-align: center;
font-size: 16px;
height: 42px;
line-height: 42px;
cursor: pointer;
box-sizing: border-box;
}
.pointer-detail .point-list-head .f-l.act {
color: #1080d0;
border-bottom: 2px solid #1080d0;
}
.pointer-detail .point-list-head .f-r {
color: #666;
font-size: 12px;
}
.pointer-detail .point-list-head .f-r font {
color: #ffa200;
font-size: 18px;
}
.pointer-detail .point_content {
position: absolute;
top: 42px;
left: 0;
right: 0;
padding: 0 12px;
bottom: 0;
overflow-y: auto;
}
.pointer-detail .point_content .has_data .data-group {
height: 60px;
border-bottom: 1px solid #e1e1e1;
}
.pointer-detail .point_content .has_data .data-group .f-l {
height: 60px;
padding-top: 10px;
box-sizing: border-box;
}
.pointer-detail .point_content .has_data .data-group .f-l div {
color: #333;
font-size: 14px;
line-height: 21px;
}
.pointer-detail .point_content .has_data .data-group .f-l span {
color: #999;
font-size: 12px;
line-height: 21px;
}
.pointer-detail .point_content .has_data .data-group .f-r {
line-height: 60px;
height: 60px;
color: #ffa200;
font-size: 18px;
}
src/assets/css/pointmall/pointDetail.less 0 → 100644
.pointer-detail {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
position: relative;
height: 100%;
overflow: hidden;
.f-r {
float: right
}
.f-l {
float: left;
}
.point-list-head {
height: 42px;
line-height: 42px;
padding: 0 0.24rem;
border-bottom: 1px solid #e1e1e1;
box-sizing: border-box;
.f-l {
width: 20%;
text-align: center;
font-size: 16px;
height: 42px;
line-height: 42px;
cursor: pointer;
box-sizing: border-box;
&.act {
color: #1080d0;
border-bottom: 2px solid #1080d0;
}
}
.f-r {
color: #666;
font-size: 12px;
font {
color: #ffa200;
font-size: 18px;
}
}
}
.point_content {
position: absolute;
top: 42px;
left: 0;
right: 0;
padding: 0 12px;
bottom: 0;
overflow-y: auto;
.has_data {
.data-group {
height: 60px;
border-bottom: 1px solid #e1e1e1;
.f-l {
height: 60px;
padding-top: 10px;
box-sizing: border-box;
div {
color: #333;
font-size: 14px;
line-height: 21px;
}
span {
color: #999;
font-size: 12px;
line-height: 21px;
}
}
.f-r {
line-height: 60px;
height: 60px;
color: #ffa200;
font-size: 18px;
}
}
}
}
}
\ No newline at end of file
src/router.js
......@@ -10,12 +10,15 @@ const NewsDetail = resolve => require(['@/views/news/Detail'], resolve);
const Seo = resolve => require(['@/views/seo/Index'], resolve);
const Findthing = resolve => require(['@/views/findthing/index'], resolve);
const Pointmall = resolve => require(['@/views/pointmall/Index'], resolve);
const PointDetail = resolve => require(['@/views/pointmall/pointDetail'], resolve);
const Exchange = resolve => require(['@/views/pointmall/exchange'], resolve);
Vue.use(Router)
const routes=[
{
path: '/',
component: Home,
// component: Home,
component:Exchange,
meta: {
title: '猎芯网'
}
......
src/views/pointmall/exchange.vue 0 → 100644
<template>
<div class="exchange">
<Header title="兑换记录"></Header>
<ul class="point-list-head1">
<li :class="{'act':navIndex == 1}" @click="changeNav(1)">实物</li>
<li :class="{'act':navIndex == 2}" @click="changeNav(2)">优惠券</li>
<li :class="{'act':navIndex == 3}" @click="changeNav(3)">储值卡</li>
</ul>
<div class="exchange_content">
<div class="has_data" v-if="lists.length">
<div class="data-group clr" v-for="item in lists">
<div class="f-l">
<div class="imgbox">
<img :src="item.src">
</div>
</div>
<div class="f-l infotext">
<div class="boxtextx">{{item.title}}</div>
<span>{{item.time}}</span>
</div>
<div class="f-r">支出{{item.point||0}}积分</div>
</div>
</div>
<div class="no_data" v-else>暂无数据</div>
</div>
</div>
</template>
<script>
import Header from "@/views/common/Header.vue";
export default {
components: { Header },
data() {
return {
lists1: [
{
src:
"http://img.ichunt.com/test/images/ichunt/201811/23/ab134030d646955a62aaa0790d07d86a.jpg",
title: "three3 price",
time: "2018-12-10 11:02:37",
point: "80"
},
{
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "1000"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}, {
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/43c76df5017078520c9cc348167fafb0.jpg",
title: "小米手环",
time: "2018-12-10 11:02:37",
point: "100"
}
],
lists2: [{
src:
"http://img.ichunt.com/test/images/ichunt/201811/15/b5ecc813e2a6eeb62d3a9d26181e5184.jpg",
title: "优惠券",
time: "2018-12-10 11:02:37",
point: "50"
}],
lists3: [],
navIndex: 1,
lists: []
};
},
mounted() {
this.lists = this.lists1;
},
methods: {
changeNav(index) {
this.navIndex = index;
if(index == 1){
this.lists = this.lists1;
}else if(index == 2){
this.lists = this.lists2;
}else{
this.lists = this.lists3;
}
}
}
};
</script>
<style scoped>
@import "../../assets/css/pointmall/exchange.css";
</style>
src/views/pointmall/pointDetail.vue 0 → 100644
<template>
<div class="pointer-detail">
<Header title="积分明细"></Header>
<div class="point-list-head clr">
<div class="f-l act">收入</div>
<div class="f-l">支出</div>
<div class="f-r point-value">
当前总积分：<font>320</font>
</div>
</div>
<div class="point_content">
<div class="has_data">
<div class="data-group clr">
<div class="f-l">
<div>兑换礼品</div>
<span>2018-12-10 11:02:37</span>
</div>
<div class="f-r">+100</div>
</div>
</div>
<div class="no_data"></div>
</div>
</div>
</template>
<script>
import Header from '@/views/common/Header.vue';
export default {
components:{Header}
}
</script>
<style scoped>
@import "../../assets/css/pointmall/pointDetail.css";
</style>
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