Skip to content

J
jd-vx-app
Commit 4ab7a444 authored by lijiongliang's avatar lijiongliang
Browse files
Options

页面样式微调

parent 84c56042
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 303 deletions
pages/home.vue
View file @ 4ab7a444
<template> <template>
<view class="appCotent" v-if="show"> <view class="appCotent" v-if="show">
<view class="index-content"> <view class="index-content">
<u-swiper radius="0 0 0 30px" :height="210" :list="list5" circular @change="e => current = e.current" :autoplay="true" keyName="imageUrl" @click="goOtherLink"> <u-swiper radius="0 0 0 30px" :height="210" :list="list5" circular @change="e => current = e.current"
<view slot="indicator" class="indicator"> :autoplay="true" keyName="imageUrl" @click="goOtherLink">
<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']"> <view slot="indicator" class="indicator">
</view> <view class="indicator__dot" v-for="(item, index) in list5" :key="index"
</view> :class="[index === current && 'indicator__dot--active']">
</u-swiper> </view>
<u-gap bgColor="transparent" height="15"></u-gap> </view>
<div class="content__code" v-if="freeCode.mainImgUrl"> </u-swiper>
<div class="code__img"> <u-gap bgColor="transparent" height="15"></u-gap>
<image :src="freeCode.mainImgUrl" class="code__img"></image> <div class="content__code" v-if="freeCode.mainImgUrl">
</div> <div class="code__img">
<div class="code__money"> <image :src="freeCode.mainImgUrl" class="code__img"></image>
<div class="money__title"> </div>
<text>{{freeCode.title}}</text> <div class="code__money">
</div> <div class="money__title">
<div class="code__tips clamp1"> <text>{{freeCode.title}}</text>
<text>{{freeCode.spec}}</text> </div>
</div> <div class="code__tips clamp1">
<div class="money__num"> <text>{{freeCode.spec}}</text>
<text class="num__one">￥0.00</text> </div>
<text class="num__two">￥{{freeCode.originalPrice/100}}</text> <div class="money__num">
</div> <text class="num__one">￥0.00</text>
</div> <text class="num__two">￥{{freeCode.originalPrice/100}}</text>
<div class="code__get" @click="getPrice"> </div>
<div> </div>
立即 <div class="code__get" @click="getPrice">
</div> <div>
<div> 立即
领取 </div>
</div> <div>
</div> 领取
</div> </div>
<u-gap bgColor="transparent" height="15"></u-gap> </div>
<div class="index__item3"> </div>
<image src="@/static/index/index23.png"></image> <u-gap bgColor="transparent" height="15"></u-gap>
</div> <div class="index__item3">
<u-gap bgColor="transparent" height="15"></u-gap> <image src="@/static/index/index23.png"></image>
<div class="index__item3-1"> </div>
<image src="@/static/index/index14.png"></image> <u-gap bgColor="transparent" height="15"></u-gap>
</div> <div class="index__item3-1">
<u-gap bgColor="transparent" height="15"></u-gap> <image src="@/static/index/index14.png"></image>
<div class="index__item4"> </div>
<image src="@/static/index/index20.png"></image> <u-gap bgColor="transparent" height="15"></u-gap>
</div> <div class="index__item4">
<u-gap bgColor="transparent" height="15"></u-gap> <image src="@/static/index/index20.png"></image>
<div class="index__item5"> </div>
<image src="@/static/index/index8.png"></image> <u-gap bgColor="transparent" height="15"></u-gap>
</div> <div class="index__item5">
<u-gap bgColor="transparent" height="60"></u-gap> <image src="@/static/index/index8.png"></image>
</view> </div>
</view> <u-gap bgColor="transparent" height="60"></u-gap>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
show: false, show: false,
current: 0, current: 0,
balance: "0.00", balance: "0.00",
list5: [], list5: [],
//免费挪车码 //免费挪车码
freeCode: {}, freeCode: {},
}; };
}, },
methods: { methods: {
getPrice() { getPrice() {
let token = uni.getStorageSync('userToken'); let token = uni.getStorageSync('userToken');
if (!token) { if (!token) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/binding/index?url=/pages/main&index=0' url: '/pages/binding/index?url=/pages/main&index=0'
}) })
return; return;
} }
let opts = { let opts = {
url: '/app/user/info', url: '/app/user/info',
method: 'get' method: 'get'
} }
this.http.httpTokenRequest(opts, {}).then(res => { this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
let freeMoveFlag = res.data.data.freeMoveFlag let freeMoveFlag = res.data.data.freeMoveFlag
if (freeMoveFlag) { if (freeMoveFlag) {
uni.showToast({ uni.showToast({
title: "您的免费领取次数已用完", title: "您的免费领取次数已用完",
icon: 'none', icon: 'none',
duration: 2000, duration: 2000,
}); });
} else { } else {
//跳转到领取优惠卷页面 //跳转到领取优惠卷页面
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
}); });
} }
} }
}) })
}, },
getMoveCode() { getMoveCode() {
let opts = { let opts = {
url: '/app/index/free/code', url: '/app/index/free/code',
method: 'get' method: 'get'
}; };
this.http.httpRequest(opts, {}).then(res => { this.http.httpRequest(opts, {}).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.freeCode = res.data.data this.freeCode = res.data.data
} }
}) })
}, },
getRotationList() { getRotationList() {
let opts = { let opts = {
url: '/app/index/carouse/1', url: '/app/index/carouse/1',
method: 'get' method: 'get'
}; };
this.http.httpTokenRequest(opts, {}).then(res => { this.http.httpTokenRequest(opts, {}).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
let data = [] let data = []
data = res.data.data data = res.data.data
let imgList = [] let imgList = []
data.forEach(e => { data.forEach(e => {
imgList.push(e) imgList.push(e)
}) })
this.list5 = imgList this.list5 = imgList
} }
}) })
}, },
// 轮播跳转其他页面 // 轮播跳转其他页面
goOtherLink(index){ goOtherLink(index) {
let item = this.list5[index] let item = this.list5[index]
let link = item.link; let link = item.link;
var newStr = link.indexOf("http"); var newStr = link.indexOf("http");
var newStr2 = link.indexOf("https"); var newStr2 = link.indexOf("https");
if (newStr == 0 || newStr2 == 0) { if (newStr == 0 || newStr2 == 0) {
uni.navigateTo({
url: '/pages/webview/webview?url=' + link
})
return
}
uni.navigateTo({ uni.navigateTo({
url: '/pages/webview/webview?url=' + link url: link
}) })
return }
} },
uni.navigateTo({ created() {
url: link this.getMoveCode()
}) this.getRotationList()
},
mounted() {
setTimeout(() => {
this.show = true
}, 100);
},
onReady: function() {
uni.setNavigationBarTitle({
title: '友众挪车牌'
});
} }
}, };
created() {
this.getMoveCode()
this.getRotationList()
},
mounted() {
setTimeout(() => {
this.show = true
}, 100);
},
onReady: function () {
uni.setNavigationBarTitle({
title: '友众挪车牌'
});
}
};
</script> </script>
<style lang="scss"> <style lang="scss">
.index-content { .index-content {
/deep/ .u-swiper__indicator { /deep/ .u-swiper__indicator {
position: absolute; position: absolute;
right: 30rpx !important; right: 30rpx !important;
} }
background-color: #f9f9f9;
height: 100%;
background-color: #f9f9f9; .index__item3 {
height: 100%; width: 100%;
height: 356rpx;
.index__item3 { image {
width: 100%; width: 100%;
height: 356rpx; height: 356rpx;
}
}
image { .index__item3-1 {
width: 100%; width: 100%;
height: 356rpx; height: 711rpx;
}
}
.index__item3-1 { image {
width: 100%; width: 100%;
height: 711rpx; height: 711rpx;
}
}
image { .index__item4 {
width: 100%; width: 100%;
height: 711rpx; height: 646rpx;
}
}
.index__item4 { image {
width: 100%; width: 100%;
height: 646rpx; height: 646rpx;
}
}
image { .index__item5 {
width: 100%; width: 100%;
height: 646rpx; height: 1289rpx;
}
}
.index__item5 { image {
width: 100%; width: 100%;
height: 1289rpx; height: 1289rpx;
}
}
image { .content__code {
width: 100%; padding: 28rpx;
height: 1289rpx; box-sizing: border-box;
} width: 630rpx;
} height: 220rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx 40rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 30rpx;
position: relative;
.content__code { .code__img {
padding: 28rpx; width: 160rpx;
box-sizing: border-box; height: 160rpx;
width: 630rpx; background: #3699ff;
height: 220rpx; border-radius: 10rpx;
background: #ffffff; }
box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
border-radius: 10rpx 40rpx 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 30rpx;
position: relative;
.code__img { .code__money {
width: 160rpx; width: 390rpx;
height: 160rpx; margin: 0 20rpx;
background: #3699ff;
border-radius: 10rpx;
}
.code__money { .money__title {
width:360rpx; font-size: 36rpx;
margin: 0 20rpx; font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
.money__title { }
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 42rpx;
} .code__tips {
.code__tips { font-size: 30rpx;
font-size: 30rpx; font-family: PingFang SC;
font-family: PingFang SC; font-weight: 500;
font-weight: 500; color: #666666;
color: #666666; line-height: 42rpx;
line-height: 42rpx; margin-bottom: 20rpx;
margin-bottom:20rpx; }
}
.money__num { .money__num {
.num__one { .num__one {
font-size: 26rpx; font-size: 26rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #e1251b; color: #e1251b;
line-height: 42rpx; line-height: 42rpx;
} }
.num__two { .num__two {
font-size: 22rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
line-height: 42rpx; line-height: 42rpx;
position: relative; position: relative;
} }
.num__two::before { .num__two::before {
content: ''; content: '';
width: 100%; width: 100%;
height: 1rpx; height: 1rpx;
background: #999; background: #999;
position: absolute; position: absolute;
bottom: 16rpx; bottom: 16rpx;
left: 8rpx; left: 8rpx;
} }
} }
} }
.code__get { .code__get {
position: absolute; position: absolute;
right: -60rpx; right: -60rpx;
width: 90rpx; width: 90rpx;
height: 90rpx; height: 90rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
padding-top: 4rpx; padding-top: 4rpx;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background: url("@/static/index/index26.png") no-repeat; background: url("@/static/index/index26.png") no-repeat;
background-size: contain; background-size: contain;
} }
} }
/deep/ .u-swiper { /deep/ .u-swiper {
border-radius: 0 0 0 100rpx !important; border-radius: 0 0 0 100rpx !important;
} }
.indicator { .indicator {
@include flex(row); @include flex(row);
justify-content: center; justify-content: center;
&__dot { &__dot {
height: 20rpx; height: 20rpx;
width: 20rpx; width: 20rpx;
border-radius: 100%; border-radius: 100%;
background-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.35);
margin: 0 10rpx; margin: 0 10rpx;
transition: background-color 0.3s; transition: background-color 0.3s;
&--active { &--active {
background-color: #e1251b; background-color: #e1251b;
} }
} }
} }
.indicator-num { .indicator-num {
padding: 4rpx 0; padding: 4rpx 0;
background-color: rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.35);
border-radius: 100%; border-radius: 100%;
width: 35px; width: 35px;
text-align: right; text-align: right;
@include flex; @include flex;
justify-content: center; justify-content: center;
&__text { &__text {
color: #ffffff; color: #ffffff;
font-size: 24rpx; font-size: 24rpx;
} }
} }
} }
</style> </style>
pagesC/pages/shop/pay.vue
View file @ 4ab7a444
...@@ -378,6 +378,9 @@ export default { ...@@ -378,6 +378,9 @@ export default {
} }
.address__right { .address__right {
width:60rpx;
display: flex;
justify-content: flex-end;
image { image {
width: 14rpx; width: 14rpx;
height: 24rpx; height: 24rpx;
......
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 to comment