1205 lines
25 KiB
Vue
1205 lines
25 KiB
Vue
<!--
|
|
* @Date: 2023-06-08 09:49:49
|
|
* @LastEditTime: 2024-03-14 14:55:45
|
|
* @Description: content
|
|
-->
|
|
<template>
|
|
<view class="content">
|
|
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
|
<view class="flex" style="width: 100%;">
|
|
<!-- <image class="img100" :src="$img1('common/indexTitle.png')"></image> -->
|
|
<view class="title1">
|
|
吧唧一番赏
|
|
</view>
|
|
<!-- 公告 -->
|
|
<view class="news-box relative"
|
|
:style="{ backgroundImage: `url(${$img1('index/notification.png?x=1')})`}"
|
|
@click="$refs.rulePop.getRule(3, '提示')">
|
|
<view class="news-text">
|
|
<uni-notice-bar :style="{width: `100%`}" :speed="8" background-color="transparent" color="#fff"
|
|
scrollable single :text="$c.filterText(gonggao)"></uni-notice-bar>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
|
@up="loadData">
|
|
<swiper class="swiper-box" :autoplay="true" :indicator-dots="false" :circular="true" :interval="3000"
|
|
@change="swChange">
|
|
<swiper-item v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
|
|
<image class="yh_bg" :src="v.imgurl"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="sw-dot relative">
|
|
<view class="sw-dot-item" v-for="(item, i) in advert" :key="i" :class="{act: swCur == i}"></view>
|
|
</view>
|
|
<!-- 推荐上新 -->
|
|
<view class="flex yqhy" v-if="tuijian.length>0" style="margin-top: 60rpx; position: relative;">
|
|
<image class="img100" style="position: absolute; display: flex; justify-content: center;"
|
|
:src="$img1('/image/a6548-pw1cx.gif')"></image>
|
|
<view class=""
|
|
style="position: absolute; width: 585rpx; height: 230rpx; margin-left: 85rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between;overflow: auto;">
|
|
|
|
<view v-for="(item,index) in tuijian" class=""
|
|
style="width: 181rpx; height: 181rpx;flex: 0 0 auto; margin:0px 2px;">
|
|
<image class="yh_bg" :src="item.imgurl" @click="$c.navTo(item,index)"></image>
|
|
</view>
|
|
<!-- <view class="" style="width: 181rpx; height: 181rpx; background-color: aquamarine;"></view>
|
|
<view class="" style="width: 181rpx; height: 181rpx; background-color: aquamarine;"></view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-x class="tab-list">
|
|
<view @click="getlist(i)"
|
|
:style="{background:tabCur == i? 'url('+ $img1('index/tabCheck.png')+') no-repeat 0 0 / 100% 100%':'none'}"
|
|
v-for="(v, i) in tabList" :key="i" class="tab-list-item center">
|
|
<text :class="{active: tabCur == i}">{{ v.title }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="qbt_con">
|
|
<view v-for="(item, index) in listdata" :key="index" class="qbt_con_item" @click="todetails(item)">
|
|
<view class="list_1 center">
|
|
<image :src="item.imgurl" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="list_2">
|
|
<view class="hang1">{{ item.title }}</view>
|
|
<view class="redu" v-if="item.join_count">
|
|
<text>{{ item.join_count }}次参与</text>
|
|
</view>
|
|
<view class="redu" v-else>快去参与吧！</view>
|
|
<view class="qbt_con_item_3 flex_center mt10">
|
|
<view class="item-price">
|
|
￥<text style="font-size: 32rpx">{{ item.price }}</text>
|
|
</view>
|
|
<view v-if="item.stock" class="qbt_con_item_price">
|
|
<text>{{ item.sale_stock }}/{{ item.stock }}</text>
|
|
<image :src="$img1('index/box.png')"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image :src="$img1('common/new2.png')" class="image1" mode="widthFix"
|
|
v-if="item.new_is==1 && tabList[tabCur].id==2"></image>
|
|
<image :src="$img1('common/new1.png')" class="image1"
|
|
style="animation: zoom 1.2s ease-in-out infinite;" mode="widthFix"
|
|
v-if="item.new_is==1 && tabList[tabCur].id!=2"></image>
|
|
<view class="image3 common_bg"
|
|
:style="{ backgroundImage: tabList[tabCur].id!=2?`url(${$img1('common/label1.png')})`:`url(${$img1('common/label2.png')})`}">
|
|
<text>
|
|
{{ item.type_text }}
|
|
</text>
|
|
</view>
|
|
<view v-if="item.is_shou_zhe == 1" class="half-tag">
|
|
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
|
</view>
|
|
<!-- <view v-if="item.type == 1 || item.type == 6" class="lock-tag" :class="{dis: item.lock_is != 1}">
|
|
{{ item.lock_is == 1 ? '锁箱' : '竞技' }}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<!-- 群聊弹窗 -->
|
|
<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
|
<view class="pop">
|
|
<view class="flex">
|
|
<image class="img100" :src="erweima" :show-menu-by-longpress="true" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="pop-view column">
|
|
<text class="ziti">添加客服领优惠</text>
|
|
<text>识别图中二维码</text>
|
|
</view>
|
|
<image class="pop-liwu" :src="$img1('index/liwu.png')"></image>
|
|
<view @click="$refs.qunliao_show.close()" class="pop-close flex">
|
|
<image :src="$img1('common/close.png')" class="img100" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 优惠券弹窗 -->
|
|
<uni-popup ref="couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
|
<view v-if="couponData" class="coupon-pop common_bg relative">
|
|
<view class="coupon-pop-title ziti">
|
|
<text>新人大礼包</text>
|
|
</view>
|
|
<scroll-view class="coupon-list" scroll-y>
|
|
<view v-for="(item, i) in couponData.goods.list" :key="i" class="coupon-item">
|
|
<view class="center">
|
|
<text>￥</text>
|
|
<text>{{Number(item.price)}}</text>
|
|
</view>
|
|
<view class="ml30 column">
|
|
<text>{{item.title}}</text>
|
|
<text>有限期{{item.effective_day}}天</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view @click="receiveCoupon" class="get-btn center">立即收下</view>
|
|
<view class="bt-tip">优惠券在【我的-优惠券】中查看</view>
|
|
<view class="bt-close flex" @tap="$refs.couponPop.close()">
|
|
<image class="img100" :src="$img1('common/close.png')"></image>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- <tab-bar :index="0"></tab-bar> -->
|
|
|
|
<!-- 进福利群 -->
|
|
<view class="group-fixed" @click="$refs.qunliao_show.open()">
|
|
<image :src="$img1('image/fuliqun.png')"></image>
|
|
</view>
|
|
|
|
<!-- 邀请好友 -->
|
|
<view class="group-fixed2" @tap="$c.to({url:'/pages/user/tui-guang'})">
|
|
<image :src="$img1('image/yaoqing.png')"></image>
|
|
</view>
|
|
|
|
<!-- 排行榜 -->
|
|
<view class="group-fixed1" @click="toRanking()">
|
|
<image :src="$img1('image/paihangbang.png')"></image>
|
|
</view>
|
|
|
|
<rule-pop ref="rulePop"></rule-pop>
|
|
|
|
<rule-pop ref="appNotice" notice-check></rule-pop>
|
|
|
|
<!-- #ifdef MP -->
|
|
<!-- 隐私政策弹窗 -->
|
|
<priv-pop></priv-pop>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
|
|
export default {
|
|
components: {
|
|
lffBarrage
|
|
},
|
|
data() {
|
|
return {
|
|
z_imgPath: this.$z_img2 + 'shouye/',
|
|
tabList: [
|
|
// {
|
|
// id: 10,
|
|
// title: '卡牌赏'
|
|
// },
|
|
{
|
|
id: 4,
|
|
title: '吧唧赏'
|
|
},
|
|
{
|
|
id: 1,
|
|
title: '一番赏'
|
|
},
|
|
{
|
|
id: 12,
|
|
title: '连击赏'
|
|
},
|
|
{
|
|
id: 6,
|
|
title: '全局赏'
|
|
},
|
|
{
|
|
id: 8,
|
|
title: '领主赏',
|
|
},
|
|
// {
|
|
// id: 2,
|
|
// title: '小岚赏'
|
|
// }
|
|
{
|
|
id: 3,
|
|
title: '擂台赏'
|
|
},
|
|
// {
|
|
// id: 5,
|
|
// title: '积分赏'
|
|
// },
|
|
{
|
|
id: 9,
|
|
title: '自制赏'
|
|
},
|
|
// {
|
|
// id:7,
|
|
// title: '福利盲盒'
|
|
// },
|
|
],
|
|
tabCur: 0,
|
|
keyword: '',
|
|
listdata: [],
|
|
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
|
downOption: {
|
|
auto: false
|
|
},
|
|
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
|
upOption: {
|
|
auto: true,
|
|
page: {
|
|
size: 15 // 每页数据的数量,默认10
|
|
}
|
|
},
|
|
advert: [], //轮播图
|
|
tuijian: [], //推荐上新
|
|
notice_list: [], // 弹幕
|
|
erweima: '', // 福利群
|
|
yushou_rili: '', // 预售日历
|
|
jump_appid: '', // 跳转的小程序id
|
|
aa: false,
|
|
gonggao: '',
|
|
couponData: '',
|
|
canGetCoupon: false,
|
|
swCur: 0
|
|
}
|
|
},
|
|
|
|
onUnload() {
|
|
this.aa = false
|
|
},
|
|
onHide() {
|
|
clearInterval(this.timer)
|
|
this.aa = false
|
|
let pages = getCurrentPages()
|
|
// console.log(11, this.$mp.page.route)
|
|
uni.setStorageSync('page', this.$mp.page.route)
|
|
},
|
|
onLoad(v) {
|
|
console.log('参数', v)
|
|
|
|
if (v.pid) {
|
|
uni.setStorageSync('pid', v.pid)
|
|
}
|
|
if (v.scene) {
|
|
uni.setStorageSync('pid', v.scene)
|
|
}
|
|
if (v.token) {
|
|
uni.setStorageSync('token', v.token)
|
|
}
|
|
/* 获取广告id */
|
|
if (v.ad_id) {
|
|
uni.setStorageSync('_ad_id', v.ad_id)
|
|
}
|
|
/* 获取click_id */
|
|
if (v.gdt_vid) {
|
|
uni.setStorageSync('_click_id', v.gdt_vid)
|
|
}
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
this.aa = true
|
|
// setTimeout(() => {
|
|
// that.colrdo()
|
|
// }, 500
|
|
this.canGetCoupon && this.getCoupon()
|
|
this.canGetCoupon && this.getnews()
|
|
this.canGetCoupon = true
|
|
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
|
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
|
this.$mp.page.getTabBar().setData({
|
|
selected: 0
|
|
});
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
// this.$refs.couponPop.open()
|
|
this.getCoupon()
|
|
// this.$refs.rulePop.open()
|
|
this.getnews()
|
|
},
|
|
|
|
onShareAppMessage() {
|
|
let that = this
|
|
return {
|
|
title: "吧唧一番，正版潮玩手办一番赏",
|
|
imageUrl: that.advert[0].imgurl,
|
|
path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: 是否弹公告
|
|
* @return {*}
|
|
*/
|
|
checkNotice() {
|
|
/* 上次勾选(今日不再提醒)的日期 */
|
|
const _last_notice_date = uni.getStorageSync('_last_notice_date')
|
|
/* 本次打开app是否已经弹过公告弹窗 */
|
|
const _is_this_show = uni.getStorageSync('_is_this_show')
|
|
const nowDate = this.$c.getDateTime()
|
|
|
|
if (_last_notice_date != nowDate && !_is_this_show) {
|
|
this.$refs.appNotice.getRule(19, '公告')
|
|
uni.setStorageSync('_is_this_show', true)
|
|
}
|
|
},
|
|
|
|
swChange(e) {
|
|
this.swCur = e.detail.current
|
|
},
|
|
|
|
receiveCoupon() {
|
|
let arr = this.couponData.goods.list.map(item => item.id)
|
|
|
|
if (arr.length <= 0) {
|
|
return
|
|
}
|
|
|
|
this.req({
|
|
url: 'receive',
|
|
data: {
|
|
coupon_id: arr.join(',')
|
|
},
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '领取成功',
|
|
icon: 'success'
|
|
})
|
|
}, 100)
|
|
|
|
this.$refs.couponPop.close()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
getCoupon() {
|
|
this.req({
|
|
url: 'coupon',
|
|
data: {},
|
|
success: res => {
|
|
if (res.status == 1 && res.data.status != 2) {
|
|
res.data.totalMoney = 0
|
|
|
|
if (res.data.goods.list.length > 0) {
|
|
res.data.totalMoney = res.data.goods.list.reduce((pre, item) => {
|
|
return pre + Number(item.price)
|
|
}, 0)
|
|
|
|
this.$refs.couponPop.open()
|
|
}
|
|
|
|
this.couponData = res.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// colrdo() {
|
|
// //插入一条弹幕
|
|
// let that = this
|
|
// let a = 0
|
|
// that.timer = setInterval(function () {
|
|
// // that.$refs.lffBarrage.add({
|
|
// // item: that.notice_list[a].content,
|
|
// // // title: that.notice_list[a].title,
|
|
// // // color: that.notice_list[a].color,
|
|
// // headimg: that.notice_list[a].headimg
|
|
// // });
|
|
// if (a < that.notice_list.length - 1) {
|
|
// a++
|
|
// } else {
|
|
// a = 0
|
|
// }
|
|
// }, 5000)
|
|
// },
|
|
torili() {
|
|
uni.setStorageSync('rili', this.yushou_rili)
|
|
this.gotoPage('/pages/shouye/rili')
|
|
},
|
|
getnews() {
|
|
let that = this
|
|
that.req({
|
|
url: 'index',
|
|
success(res) {
|
|
if (res.status == 1) {
|
|
that.advert = res.data.advert
|
|
that.tuijian = res.data.tuijian;
|
|
that.notice_list = res.data.new_bulletcha
|
|
that.erweima = res.data.other.erweima
|
|
that.gonggao = res.data.notice.content
|
|
that.yushou_rili = res.data.other.yushou_rili
|
|
that.jump_appid = res.data.other.jump_appid
|
|
uni.setStorageSync('jump_appid', res.data.other.jump_appid)
|
|
uni.setStorageSync('wx_link', res.data.other.wx_link)
|
|
uni.setStorageSync('corpid', res.data.other.corpid)
|
|
|
|
if (res.data.other.is_shou_tan == 1) {
|
|
that.checkNotice()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
loadData({
|
|
num,
|
|
size
|
|
}) {
|
|
// 模拟接口
|
|
let that = this
|
|
that.req({
|
|
url: 'goods',
|
|
data: {
|
|
page: num,
|
|
type: that.tabList[that.tabCur].id,
|
|
keyword: that.keyword
|
|
},
|
|
success: function(res) {
|
|
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
|
if (num == 1) {
|
|
that.listdata = res.data.data
|
|
} else {
|
|
that.listdata = that.listdata.concat(res.data.data)
|
|
}
|
|
console.log(that.listdata)
|
|
}
|
|
})
|
|
},
|
|
todetails(e) {
|
|
// 无限赏
|
|
let url = '/pages/shouye/detail'
|
|
|
|
if (e.type == 2 || e.type == 8) {
|
|
url = '/pages/shouye/detail_wuxian'
|
|
}
|
|
|
|
if (e.type == 9) {
|
|
url = '/package/index/lian-ji'
|
|
}
|
|
if (e.type == 3) {
|
|
url = '/package/index/leitai'
|
|
}
|
|
|
|
this.$c.to({
|
|
url,
|
|
query: {
|
|
goods_id: e.id,
|
|
type_text: e.type_text
|
|
}
|
|
})
|
|
},
|
|
getlist(v) {
|
|
this.tabCur = v
|
|
this.listdata = []
|
|
this.mescroll.resetUpScroll()
|
|
this.mescroll.scrollTo(0, 0)
|
|
|
|
// this.loadData(1)
|
|
},
|
|
|
|
toRanking() {
|
|
uni.navigateTo({
|
|
url: '/pages/shouye/ranking'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.title1 {
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-family: YouSheBiaoTiHei;
|
|
}
|
|
|
|
.navLeft {
|
|
position: fixed;
|
|
left: 30rpx;
|
|
z-index: 100;
|
|
|
|
>view {
|
|
width: 200rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
|
|
.pop {
|
|
width: 506rpx;
|
|
height: 380px;
|
|
position: relative;
|
|
background: #B198E2;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137, 77, 211, 0.33);
|
|
border-radius: 44rpx;
|
|
|
|
>view:nth-child(1) {
|
|
padding-top: 40rpx;
|
|
|
|
>image {
|
|
width: 430rpx;
|
|
height: 430rpx;
|
|
margin: 0 auto 0;
|
|
background: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
&-view {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 506rpx;
|
|
height: 276rpx;
|
|
box-sizing: border-box;
|
|
padding: 68rpx 0 0 40rpx;
|
|
background: url($imgurl+'index/hudu.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
>text:nth-child(1) {
|
|
font-weight: 400;
|
|
font-size: 52rpx;
|
|
color: #894DD3;
|
|
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
|
}
|
|
|
|
>text:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #894DD3;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-liwu {
|
|
position: absolute;
|
|
right: -160rpx;
|
|
width: 380rpx;
|
|
height: 260rpx;
|
|
bottom: -60rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
&-close {
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
position: absolute;
|
|
bottom: -140rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.image2 {
|
|
width: 115rpx;
|
|
height: 62rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
}
|
|
|
|
.gonggao {
|
|
width: 750rpx;
|
|
height: 300rpx;
|
|
border-radius: 39rpx;
|
|
margin: 0rpx auto;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
/* position: relative; */
|
|
position: absolute;
|
|
top: 330rpx;
|
|
z-index: 16;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
.header {
|
|
width: 750rpx;
|
|
}
|
|
|
|
.header-left-title {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
height: 88rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10rpx;
|
|
|
|
image {
|
|
width: 230rpx;
|
|
height: 70rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-box {
|
|
width: 750rpx;
|
|
height: 460rpx;
|
|
margin: 0 auto;
|
|
background: #000000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sw-dot {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -40rpx;
|
|
z-index: 10;
|
|
|
|
.sw-dot-item {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
background: #fff;
|
|
margin: 0 8rpx;
|
|
transition: 0.3s;
|
|
|
|
&.act {
|
|
width: 18rpx;
|
|
background-color: #ff873a;
|
|
}
|
|
}
|
|
}
|
|
|
|
.yh_bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.news-box {
|
|
width: 710rpx;
|
|
height: 43rpx;
|
|
margin: 50rpx auto 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-size: 100% 100%;
|
|
|
|
.news-text {
|
|
width: 500rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 120rpx;
|
|
|
|
/deep/.uni-noticebar__content-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav1 {
|
|
width: 710rpx;
|
|
margin: 30rpx auto 0;
|
|
|
|
>view:nth-child(1) {
|
|
width: 284rpx;
|
|
height: 349rpx;
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
height: 349rpx;
|
|
|
|
>image:nth-child(1) {
|
|
width: 423rpx;
|
|
height: 183rpx;
|
|
}
|
|
|
|
>image:nth-child(2) {
|
|
width: 423rpx;
|
|
height: 170rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.yqhy {
|
|
width: 691rpx;
|
|
height: 230rpx;
|
|
margin: 30rpx auto 0;
|
|
}
|
|
|
|
.nav2 {
|
|
width: 710rpx;
|
|
height: 170rpx;
|
|
margin: 0 auto;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.tab-list {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
position: relative;
|
|
margin: 50rpx 0 30rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.tab-list-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-size: auto 100%;
|
|
background-position: center center;
|
|
padding: 0 30rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #CCCCCC;
|
|
height: 70rpx;
|
|
margin-right: 20rpx;
|
|
|
|
|
|
.active {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100vw;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background-attachment: fixed;
|
|
position: relative;
|
|
}
|
|
|
|
.title_ipt {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx auto;
|
|
border-radius: 30rpx;
|
|
padding-left: 30rpx;
|
|
width: 620rpx;
|
|
height: 58rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.title_ipt>image {
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
}
|
|
|
|
.title_ipt>input {
|
|
width: 90%;
|
|
height: 58rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 105rpx;
|
|
font-size: 28rpx;
|
|
line-height: 58rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.title_ipt>view {
|
|
width: 90rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient(0deg, #1ac762 0%, #35ed85 100%);
|
|
border-radius: 18rpx;
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.qiehuan {
|
|
display: flex;
|
|
/* justify-content: space-between; */
|
|
align-items: center;
|
|
width: 690rpx;
|
|
margin: 20rpx auto 0;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.qiehuan_line {
|
|
margin: -10rpx auto;
|
|
width: 50rpx;
|
|
height: 20rpx;
|
|
border-bottom: 4rpx solid #ff7514;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.qiehuan>view {
|
|
margin-right: 10rpx;
|
|
/* flex: 1;
|
|
text-align: center; */
|
|
}
|
|
|
|
.wzs {
|
|
font-size: 32rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.xzs {
|
|
font-size: 34rpx;
|
|
color: #ff7514;
|
|
}
|
|
|
|
.qbt_con {
|
|
padding: 1rpx 30rpx 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.qbt_con_item {
|
|
width: 330rpx;
|
|
height: 505rpx;
|
|
margin-top: 30rpx;
|
|
border: 1px solid #4a4951;
|
|
position: relative;
|
|
background: url($imgurl+'common/goodsBg.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
.image1 {
|
|
width: 80rpx;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: -1rpx;
|
|
left: 10rpx;
|
|
}
|
|
|
|
.image3 {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
padding: 0 21rpx 0 32rpx;
|
|
height: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
text-shadow: 2rpx 2rpx #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.half-tag {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 250rpx;
|
|
z-index: 1;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.lock-tag {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 294rpx;
|
|
z-index: 1;
|
|
padding: 0 14rpx;
|
|
height: 36rpx;
|
|
background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 22rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
|
|
&.dis {
|
|
background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.list_1 {
|
|
width: 100%;
|
|
height: 332rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list_1>image {
|
|
// width: 290rpx;
|
|
// height: 290rpx;
|
|
width: 90%;
|
|
height: 88%;
|
|
}
|
|
|
|
.list_2 {
|
|
padding: 20rpx 20rpx 0;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.redu {
|
|
margin-top: 10rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #cccccc;
|
|
}
|
|
|
|
.qbt_con_item_3 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #fff;
|
|
// text-shadow: 0px 2px 8px rgba(233, 18, 252, 0.41);
|
|
|
|
.item-price {
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #F8D300;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.qbt_con_item_price {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #cccccc;
|
|
}
|
|
|
|
.qbt_con_item_price>image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.redu>image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* .redu>text {} */
|
|
|
|
// .nav-wrap {
|
|
// width: 720rpx;
|
|
// height: 268rpx;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// position: relative;
|
|
// margin: 0 auto;
|
|
|
|
// .nav-lg {
|
|
// width: 365rpx;
|
|
// height: 268rpx;
|
|
// }
|
|
|
|
// .nav-sm {
|
|
// position: absolute;
|
|
// right: 0;
|
|
// top: 0;
|
|
// width: 365rpx;
|
|
// height: 143rpx;
|
|
// }
|
|
|
|
// .nav-sm + .nav-sm {
|
|
// top: auto;
|
|
// bottom: 0;
|
|
// }
|
|
// }
|
|
|
|
.coupon-pop {
|
|
width: 612rpx;
|
|
height: 780rpx;
|
|
position: relative;
|
|
background: url($imgurl+'index/couponBg.png') no-repeat 0 0 / 100% 100%;
|
|
// background: #281C50;
|
|
// border-radius: 30rpx;
|
|
// border: 1px solid #7776AD;
|
|
|
|
.coupon-pop-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40rpx 0 30rpx;
|
|
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.coupon-list {
|
|
// margin-top: 30rpx;
|
|
height: 360rpx;
|
|
|
|
.coupon-item {
|
|
width: 530rpx;
|
|
height: 160rpx;
|
|
margin: 0 auto 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
background: url($imgurl+'index/couponItem.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
>view:nth-child(1) {
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
|
|
>text:nth-child(1) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #894DD3;
|
|
}
|
|
|
|
>text:nth-child(2) {
|
|
font-weight: 700;
|
|
font-size: 72rpx;
|
|
color: #894DD3;
|
|
}
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
>text:nth-child(1) {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #894DD3;
|
|
}
|
|
|
|
>text:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #894DD3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gap-box {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.get-btn {
|
|
margin: 170rpx auto 0;
|
|
width: 288rpx;
|
|
height: 74rpx;
|
|
background: #ff873a;
|
|
border-radius: 37rpx 37rpx 37rpx 37rpx;
|
|
border: 2rpx solid #ff873a;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.bt-tip {
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
bottom: -50rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.bt-close {
|
|
position: absolute;
|
|
bottom: -180rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.group-fixed {
|
|
width: 187rpx;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
z-index: 10;
|
|
right: 0;
|
|
bottom: 20vh;
|
|
|
|
animation: zoom 1.2s ease-in-out infinite;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.group-fixed2 {
|
|
width: 187rpx;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
z-index: 10;
|
|
right: 0;
|
|
bottom: 28vh;
|
|
|
|
animation: zoom 1.2s ease-in-out infinite;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.group-fixed1 {
|
|
width: 50rpx;
|
|
height: 140rpx;
|
|
position: fixed;
|
|
z-index: 10;
|
|
right: 0;
|
|
top: 21vh;
|
|
|
|
// animation: zoom 1.2s ease-in-out infinite;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |