Skip to content

J
jz_Travel
Commit 23665c0d authored by youjie's avatar youjie
Browse files
Options

列表 详情 首发新品

parent ebcfb71d
Hide whitespace changes
Inline Side-by-side
Showing with 370 additions and 8 deletions
pages/jiuzhai/jz_LineDetail.vue
View file @ 23665c0d
......@@ -48,17 +48,112 @@
<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{ $utils.getretailer()?currentPrice.b2BPrice:currentPrice.b2CPrice }}</text>
<text style="color: #999999; font-size: 28rpx; font-weight: 400">/人起</text>
</view>
<view class="row items-center" style="border-radius: 4px;overflow: hidden;font-size: 12px;" v-if="dataList.currentPriceInfo.teamType==1">
<view style="background-color: #111;padding: 2px 5px;color: #FFF;">
独家
<!--
<view class="row items-center jz_LineDetaCZ" style="border-radius: 4px;overflow: hidden;font-size: 12px;" >
<view class="jz_LineDetaCZL">
<view style="opacity: 0;">1</view>
</view>
<view style="background-color: #dfbe6e;padding: 2px 5px; color: #111;">
高端定制小团
<view class="jz_LineDetaCZR">
30元/人
</view>
</view> -->
</view>
<!-- <view class="jz_LineDetaYJDKQ">
<view class="jz_LineDetaYJ">
<view class="jz_LineDetaYJL">原价 ¥{{ $utils.getretailer()?currentPrice.b2BPrice:currentPrice.b2CPrice }}/人起</view>
<view class="jz_LineDetaYJR">已减248</view>
</view>
<view class="jz_LineDetaRDKQ">
<view>共1张抵扣券</view>
<u-icon name="arrow" size="30" color="#cecece" style="margin-left: 5px;"></u-icon>
</view>
</view> -->
<!-- <view class="jz_LineDetaYJDKQ">
<view class="jz_LineDetaFL">
<view class="row items-center jz_LineDetaCZ" style="border-radius: 4px;overflow: hidden;font-size: 12px;" >
<view class="jz_LineDetaCZL">
<view style="opacity: 0;">1</view>
</view>
<view class="jz_LineDetaCZR">
30元/人
</view>
</view>
<view class="jz_LineDetaFLJf">
278.25积分
</view>
</view>
<view class="jz_LineDetaRDKQ">
<view>共3项福利</view>
<u-icon name="arrow" size="30" color="#cecece" style="margin-left: 5px;"></u-icon>
</view>
</view> -->
<!--
<view class="jz_LineDetaSC">
<view class="jz_LineDetaSCL">
<view class="jz_LineDetaSCLDl">
<view>¥</view>
</view>
<view class="jz_LineDetaSCQM">248</view>
</view>
<view class="jz_LineDetaSCR">
<view class="jz_LineDetaSCRTitle">首购抵扣券</view>
<view class="jz_LineDetaSCRText">新户注册即得</view>
</view>
</view> -->
<!-- <view class="jz_LineDetaVip">
<view class="jz_LineDetaVipTop">
<view>
再完成4单即可成为VIP，享永久折扣！
</view>
<view>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"/>
</view>
</view>
<view class="jz_LineDetaVipPr">
<view class="jz_LineDetaVPB">
<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
:key="index">
<view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
<view class="jz_LineDetaVPBN">{{item.text}}</view>
<view class="jz_LineDetaVPBBoxI" v-if="item.img"><img :src="item.img"/></view>
<view class="jz_LineDetaVPBLine" v-else></view>
</view>
</view>
<view class="jz_LineDetaVPB jz_LineDetaVPBY">
<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
:key="index"
:class="[item.colorStyle]">
<view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
<view class="jz_LineDetaVPBN">{{item.text}}</view>
<view class="jz_LineDetaVPBBoxI" v-if="item.img"></view>
<view class="jz_LineDetaVPBLine" v-else></view>
</view>
</view>
</view>
</view>
<view class="jz_LineDetaQTS">
<img class="jz_LineDetaQTSImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463534129379.png" />
<view class="jz_LineDetaQTSText">
<view>完成首单，即可获得</view>
<view class="jz_LineDetaQTSTextRed">4张*150元</view>
<view>出境散拼团抵扣券</view>
</view>
</view> -->
<view class="jz_MainTitle">
<text v-if="dataList.title">{{ dataList.title }}</text>
<view class="jz_MainTitleL"
v-if="dataList.currentPriceInfo
&&dataList.currentPriceInfo.isNewArrival
&&dataList.currentPriceInfo.isNewArrival==1">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638733081598389054.png"/>
</view>
<view class="jz_MainTitleR" v-if="dataList.title">
<text>{{ dataList.title }}</text>
</view>
</view>
<view class="jz_Maidian">
<text>{{ dataList.productRecommend }}</text>
......@@ -1202,6 +1297,15 @@
}
],
createBy: 0,
progress:[
{text:'1',colorStyle: 'active',},
{text:'2',colorStyle: ''},
{text:'3',colorStyle: ''},
{text:'4',colorStyle: ''},
{text:'',style: '',
colorStyle: '',
img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'},
]
};
},
created() {},
......@@ -2078,15 +2182,31 @@
.jz_LineTitle {
font-size: 25rpx;
color: #ff3166;
margin-bottom: 10px;
}
.jz_MainTitle {
color: #111111;
font-size: 36rpx;
font-weight: 600;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 18rpx;
}
.jz_MainTitleL{
margin-left: 20rpx;
}
.jz_MainTitleL img{
max-width: 88rpx;
max-height: 100rpx;
display: block;
position: relative;
top: 8rpx;
}
.jz_MainTitleR{
width: 1px;
flex: 1;
}
.jz_Maidian {
color: #999999;
font-size: 28rpx;
......@@ -2561,4 +2681,246 @@
justify-content: space-between;
border-bottom: 1rpx solid #eee;
}
.jz_LineDetaCZ{
height: 36rpx;
background: #FFE5EC;
border-radius: 0rpx 6rpx 6rpx 8rpx;
}
.jz_LineDetaCZL{
width: 112rpx;
height: 36rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463439143641.png')no-repeat;
background-size: 100% auto;
}
.jz_LineDetaCZR{
font-family: PingFang SC;
font-weight: 800;
font-size: 24rpx;
color: #FF3166;
line-height: 70rpx;
padding-right: 10rpx;
padding-left: 5rpx;
}
.jz_LineDetaYJDKQ{
display: flex;
padding: 18rpx 0 0 0;
}
.jz_LineDetaFL{
width: 1px;
flex: 1;
display: flex;
align-items: center;
}
.jz_LineDetaFLJf{
padding: 1rpx 8rpx;
border-radius: 6rpx;
border: 1rpx solid #FFE5EC;
font-family: PingFang SC;
font-weight: 800;
font-size: 24rpx;
color: #FF3166;
margin-left: 15rpx;
}
.jz_LineDetaCZ.jz_LineDetaCZL{
flex: auto;
}
.jz_LineDetaYJ{
display: flex;
align-items: center;
width: 1px;
flex: 1;
}
.jz_LineDetaYJL{
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #ACACAC;
text-decoration: line-through
}
.jz_LineDetaYJR{
font-family: PingFang SC;
font-size: 28rpx;
color: #FF3166;
margin-left: 15rpx;
}
.jz_LineDetaRDKQ{
font-family: PingFang SC;
font-weight: 100;
font-size: 24rpx;
color: #949494;
display: flex;
align-items: center;
}
.jz_LineDetaRDKQ view{
font-size: 24rpx;
color: #949494;
}
.jz_LineDetaSC{
width: 100%;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463500511302.png')no-repeat;
background-size: 100% auto;
display: flex;
padding: 5rpx;
margin-top: 18rpx;
}
.jz_LineDetaSCL{
height: 90rpx;
background: linear-gradient(90deg, #FE3D49, #FB2E1F);
border-radius: 16rpx 45rpx 45rpx 16rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 0 23rpx;
}
.jz_LineDetaSCLDl{
font-family: PingFang SC;
font-size: 30rpx;
color: #FFFFFF;
line-height: 70rpx;
margin-right: 10rpx;
}
.jz_LineDetaSCLDl view{
position: relative;
top: 13rpx;
}
.jz_LineDetaSCQM{
font-family: PingFang SC;
font-weight: bold;
font-size: 56rpx;
color: #FFFFFF;
line-height: 70rpx;
}
.jz_LineDetaSCR{
color: #fff;
margin-left: 13rpx;
padding: 6rpx 0;
letter-spacing: .1rpx;
}
.jz_LineDetaSCRTitle{
font-family: PingFang SC;
font-weight: 200;
font-size: 28rpx;
color: #FFFFFF;
}
.jz_LineDetaSCRText{
font-family: PingFang SC;
font-weight: 100;
font-size: 24rpx;
color: #FFFFFF;
margin-top: 5rpx;
}
.jz_LineDetaQTS{
display: flex;
align-items: center;
padding: 18rpx 0;
}
.jz_LineDetaQTSImg{
width: 26rpx;
height: 29rpx;
display: inline-block;
margin-right: 6rpx;
}
.jz_LineDetaQTSText{
font-size: 24rpx;
color: #000;
font-weight: 800;
display: flex;
}
.jz_LineDetaQTSTextRed{
color: rgba(255, 49, 102, 1);
}
.jz_LineDetaVipPr{
margin-top: 16rpx;
position: relative;
left: -20rpx;
}
.jz_LineDetaVip{
width: 100%;
height: 120rpx;
background: linear-gradient(90deg, #3F423F, #313131);
border-radius: 18rpx;
display: flex;
flex-direction: column;
padding: 15rpx 0 6rpx 0;
margin-top: 18rpx;
}
.jz_LineDetaVipTop{
font-family: PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #E2C27A;
letter-spacing: .1rpx;
display: flex;
align-content: center;
padding: 0 34rpx;
}
.jz_LineDetaVipTop img{
width: 21rpx;
height: 21rpx;
display: inline-block;
margin-left: 5rpx;
}
.jz_LineDetaVPB{
display: flex;
}
.jz_LineDetaVPBBox{
display: flex;
align-items: center;
width: 1px;
flex: 1;
}
.jz_LineDetaVPBN{
width: 30rpx;
height: 30rpx;
background: #2E2E2E;
border-radius: 50%;
text-align: center;
line-height: 28rpx;
font-family: DIN Black;
font-weight: 400;
font-size: 24rpx;
color: #494949;;
}
.jz_LineDetaVPBLine{
flex: 1;
height: 10rpx;
background: #2E2E2E;
}
.jz_LineDetaVPBBoxI{
position: relative;
flex: 1;
}
.jz_LineDetaVPBBoxI img{
width: 87rpx;
height: 99rpx;
position: absolute;
bottom: -30rpx;
right: 0rpx;
}
.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
background: linear-gradient(270deg, #C99E59, #FFFFB3);
}
.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
background: #C99E59;
color: #583F2C;
}
.VPBLRadiusR{
border-radius: 0 10rpx 10rpx 0;
}
.VPBLRadiusX{
border-radius: 10rpx;
}
.VPBLRadiusL{
border-radius: 10rpx 0 0 10rpx ;
}
.jz_LineDetaVPBY{
position: absolute;
left: 0;
right: 0;
top: 0;
}
</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 to comment