|
|
@@ -1,51 +1,57 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view class="carousel-section">
|
|
|
- <!-- 背景色区域 -->
|
|
|
- <view class="bg"><image src="../../static/index/index13.png" mode=""></image></view>
|
|
|
- <!-- 标题栏和状态栏占位符 -->
|
|
|
- <view class="titleNview-placing"></view>
|
|
|
- <!-- 搜素栏 -->
|
|
|
- <view class="search flex">
|
|
|
- <!-- <image src="../../static/index/index09.png" class="address"></image> -->
|
|
|
- <!-- <view class="shop-name clamp" @click.stop="canChange == 0?nav('/pages/shoping/list'):''">{{ storeInfo.name }}</view> -->
|
|
|
- <!-- <view class="shop-name clamp">椒江区</view> -->
|
|
|
- <!-- <image class="shop-jt" src="../../static/index/index07.png" mode=""></image> -->
|
|
|
- <view class="input-box flex" @click.stop="clickSearch">
|
|
|
- <view class=" input-content flex">
|
|
|
- <view class="iconfont iconsearch"></view>
|
|
|
- <view class="input"><input type="text" disabled value="输入关键字搜索" /></view>
|
|
|
- </view>
|
|
|
+ <!-- <view class="carousel-section"> -->
|
|
|
+ <!-- 背景色区域 -->
|
|
|
+ <!-- <view class="bg"><image src="../../static/index/index1.png" mode=""></image></view> -->
|
|
|
+ <!-- 标题栏和状态栏占位符 -->
|
|
|
+ <!-- <view class="titleNview-placing"></view> -->
|
|
|
+ <!-- </view> -->
|
|
|
+ <!-- <image class="bg2" src="../../static/index/index2.png" mode=""></image> -->
|
|
|
+ <image class="bg3" src="../../static/index/index3.png" mode=""></image>
|
|
|
+ <view class="tongz flex">
|
|
|
+ <view>
|
|
|
+ <view class="tongz-bg"><image src="../../static/img/tongz-bg.png" mode=""></image></view>
|
|
|
+ <view class="tongz-left flex">
|
|
|
+ <image class="image-left" src="../../static/img/ling.png" mode=""></image>
|
|
|
+ <u-notice-bar
|
|
|
+ style="width: 100%;"
|
|
|
+ mode="vertical"
|
|
|
+ type="none"
|
|
|
+ :volume-icon="false"
|
|
|
+ :more-icon="true"
|
|
|
+ :list="text"
|
|
|
+ @click="goDetails"
|
|
|
+ @getMore="navTo('/pages/index/jieshao')"
|
|
|
+ ></u-notice-bar>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" :indicator-dots="true" indicator-active-color="#FFFFFF">
|
|
|
- <!-- <swiper class="carousel" autoplay="true" duration="400" interval="5000"> -->
|
|
|
- <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
|
|
|
- <image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
</view>
|
|
|
- <view class="navbar">
|
|
|
- <view class="navbar-box flex">
|
|
|
- <view class="navbar-item" @click="navTo('/pages/category/category')">
|
|
|
- <image class="nitem-image" src="../../static/index/index03.png" mode=""></image>
|
|
|
- <view class="nitem-font">全部商品</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="navTo('/pages/index/jieshao')">
|
|
|
- <image class="nitem-image" src="../../static/index/index04.png" mode=""></image>
|
|
|
- <view class="nitem-font">公司介绍</view>
|
|
|
- </view>
|
|
|
- <view class="navbar-item" @click="$refs.popupkf.open()">
|
|
|
- <image class="nitem-image" src="../../static/index/index16.png" mode=""></image>
|
|
|
- <view class="nitem-font">联系客服</view>
|
|
|
+ <!-- <view class="main-box" v-if="integralList.length != 0">
|
|
|
+ <view class="main-top">
|
|
|
+ <image src="../../static/icon/indexI.png" mode="" class="main-icon"></image>
|
|
|
+ <view class="main-title">积分兑换</view>
|
|
|
+ <view class="main-synopsis">超值体验</view>
|
|
|
+ </view>
|
|
|
+ <view class="main-content">
|
|
|
+ <view class="content-top flex" @click="navTo('/pages/index/integral')">
|
|
|
+ <view class="content-font">
|
|
|
+ <view class="content-title">积分兑换热门好物</view>
|
|
|
+ <view class="content-synopsis">买到就是赚到</view>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/icon/fanhui.png" class="go" mode=""></image>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="navbar-item" @click="navTo('/pages/user/shareQrCode')">
|
|
|
- <image class="nitem-image" src="../../static/index/index02.png" mode=""></image>
|
|
|
- <view class="nitem-font">邀请有礼</view>
|
|
|
+ <view class="commodity flex">
|
|
|
+ <view class="commodity-item" v-for="(item, index) in integralList" :key="item.id" @click="navToDetailPagejf(item)">
|
|
|
+ <image class="commodity-image" :src="item.image" mode=""></image>
|
|
|
+ <view class="commodity-title clamp">{{ item.store_name }}</view>
|
|
|
+ <view class="price clamp">{{ item.result.value[0].integral * 1 }}积分+</view>
|
|
|
+ <view class="vip-price">
|
|
|
+ <text>¥{{ item.result.value[0].price }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="product-box" v-if="bastList.length != 0">
|
|
|
<view class="product-title">
|
|
|
<image class="pt-image" src="../../static/index/index15.png" mode=""></image>
|
|
|
@@ -55,7 +61,7 @@
|
|
|
<view class="hotgoods">
|
|
|
<view class="hotgoods-item" v-for="item in bastList" :key="item.id" @click="navToDetailPage(item)">
|
|
|
<view class="image-wrapper">
|
|
|
- <image class="image-bg" src="../../static/img/libao-bg.png" mode=""></image>
|
|
|
+ <!-- <image class="image-bg" src="../../static/img/libao-bg.png" mode=""></image> -->
|
|
|
<image class="image" :src="item.image" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
<view class="title clamp2">{{ item.store_name }}</view>
|
|
|
@@ -94,9 +100,10 @@
|
|
|
import { lookSubpoints, lookOneself } from '../../api/user.js';
|
|
|
import seckill from '../../components/seckill/seckill.vue';
|
|
|
import { loadIndexs } from '@/api/index.js';
|
|
|
+import { article } from '@/api/user.js';
|
|
|
import { getUserInfo, spread } from '@/api/user.js';
|
|
|
import { setCoupons } from '@/api/functionalUnit.js';
|
|
|
-import { getBargainList, getProducts } from '@/api/product.js';
|
|
|
+import { getProducts } from '@/api/product.js';
|
|
|
import { interceptor } from '@/utils/loginUtils';
|
|
|
import { mapState, mapMutations } from 'vuex';
|
|
|
// #ifdef H5
|
|
|
@@ -109,8 +116,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- text: 'x18258617070',
|
|
|
- shareShow: false, //分享海报
|
|
|
+ text: '',
|
|
|
pageProportion: 0, //保存页面基于750宽度的比例
|
|
|
swiperHeight: 0,
|
|
|
checkid: 0,
|
|
|
@@ -121,10 +127,12 @@ export default {
|
|
|
swiperLength: 0,
|
|
|
carouselList: [], //轮播列表
|
|
|
bastList: [], //会员礼包
|
|
|
- shoplist: [], //商店列表
|
|
|
+ integralList: [], //兑换专区
|
|
|
page: 1,
|
|
|
- limit: 5,
|
|
|
- bargainlist: []
|
|
|
+ limit: 10,
|
|
|
+ loadType: 'more',
|
|
|
+ text: [],
|
|
|
+ article: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -132,7 +140,6 @@ export default {
|
|
|
...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
- this.getaddress();
|
|
|
// #ifdef MP
|
|
|
if (option.scene) {
|
|
|
// 存储小程序邀请人
|
|
|
@@ -142,9 +149,6 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
// #endif
|
|
|
- // #ifdef H5
|
|
|
- this.IndexShare();
|
|
|
- //#endif
|
|
|
},
|
|
|
onShow: function() {
|
|
|
// 判断是否强制登录
|
|
|
@@ -153,44 +157,21 @@ export default {
|
|
|
// interceptor();
|
|
|
// }
|
|
|
this.loadData();
|
|
|
- this.getProduct();
|
|
|
- // this.getBargainList();
|
|
|
+ this.getproducts();
|
|
|
},
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- // #ifndef MP
|
|
|
- // 监听导航栏输入框点击事件
|
|
|
- onNavigationBarSearchInputClicked(e) {
|
|
|
- //跳转到搜索页面
|
|
|
- this.clickSearch();
|
|
|
+ onReachBottom() {
|
|
|
+ this.getproducts();
|
|
|
},
|
|
|
- //点击导航栏 buttons 时触发
|
|
|
- onNavigationBarButtonTap(e) {
|
|
|
- const index = e.index;
|
|
|
- if (index === 0) {
|
|
|
- this.$api.msg('点击了扫描');
|
|
|
- } else if (index === 1) {
|
|
|
- // #ifdef APP-PLUS
|
|
|
- const pages = getCurrentPages();
|
|
|
- const page = pages[pages.length - 1];
|
|
|
- const currentWebview = page.$getAppWebview();
|
|
|
- currentWebview.hideTitleNViewButtonRedDot({
|
|
|
- index
|
|
|
- });
|
|
|
- // #endif
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/notice'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // #endif
|
|
|
methods: {
|
|
|
...mapMutations(['setLat', 'setLon']),
|
|
|
kfClose() {
|
|
|
this.$refs.popupkf.close();
|
|
|
},
|
|
|
+ goDetails(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/detail?id=' + this.article[e].id
|
|
|
+ });
|
|
|
+ },
|
|
|
// 复制
|
|
|
comfirm(text) {
|
|
|
console.log(text);
|
|
|
@@ -207,74 +188,6 @@ export default {
|
|
|
}
|
|
|
this.$refs.popupkp.close();
|
|
|
},
|
|
|
- // #ifdef H5
|
|
|
- IndexShare() {
|
|
|
- let obj = this;
|
|
|
- let pages = getCurrentPages();
|
|
|
- // 获取当前页面
|
|
|
- let page = pages[pages.length - 1];
|
|
|
- let path = '#/' + page.route + '?';
|
|
|
- // 保存传值
|
|
|
- for (let i in page.options) {
|
|
|
- path += i + '=' + page.options[i] + '&';
|
|
|
- }
|
|
|
- console.log(obj.Path);
|
|
|
- // 保存邀请人
|
|
|
- path += 'spread=' + this.userInfo.uid;
|
|
|
- let data = {
|
|
|
- link: this.baseURL + '/index/' + path,
|
|
|
- title: this.userInfo.nickname + '邀请您进入响亮商城',
|
|
|
- desc: '欢迎加入响亮商城',
|
|
|
- imgUrl: 'https://xl.liuniu946.com/index/static/img/logo.jpg'
|
|
|
- };
|
|
|
- console.log(data, '分享数据');
|
|
|
- shareLoad(data);
|
|
|
- },
|
|
|
- // #endif
|
|
|
- getaddress() {
|
|
|
- console.log('dizhi+++++++++++');
|
|
|
- let obj = this;
|
|
|
- // uni.getLocation({
|
|
|
- // type: 'gcj02',
|
|
|
- // success: res => {
|
|
|
- // console.log(res, 123456);
|
|
|
- // obj.setLat(res.latitude);
|
|
|
- // obj.setLon(res.longitude);
|
|
|
- // },
|
|
|
- // fail: err => {
|
|
|
- // console.log(err, 'shi+++++++++++++++');
|
|
|
- // openMap().then(e => {
|
|
|
- // this.getaddress();
|
|
|
- // });
|
|
|
- // }
|
|
|
- // });
|
|
|
- weixindata().then(wxOjb => {
|
|
|
- console.log(wxOjb, '获取微信');
|
|
|
- wxOjb.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- success: res => {
|
|
|
- console.log(res, 123456);
|
|
|
- obj.setLat(res.latitude);
|
|
|
- obj.setLon(res.longitude);
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- console.log(err, 'shi+++++++++++++++');
|
|
|
- openMap().then(e => {
|
|
|
- this.getaddress();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- //砍价商品推荐详情页
|
|
|
- navToDetailPages(item) {
|
|
|
- let id = item.product_id;
|
|
|
- //let type = 2;
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/product?id=' + id
|
|
|
- });
|
|
|
- },
|
|
|
navTo(url) {
|
|
|
if (url == '') {
|
|
|
this.$api.msg('暂未开通,敬请期待');
|
|
|
@@ -289,81 +202,14 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- openSubscribe: function(e) {
|
|
|
- let page = e;
|
|
|
- // #ifndef MP
|
|
|
- uni.navigateTo({
|
|
|
- url: page
|
|
|
- });
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- uni.showLoading({
|
|
|
- title: '正在加载'
|
|
|
- });
|
|
|
- openBargainSubscribe()
|
|
|
- .then(res => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.navigateTo({
|
|
|
- url: page
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- // #endif
|
|
|
- },
|
|
|
- getBargainList() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- getBargainList({
|
|
|
- page: that.page,
|
|
|
- limit: that.limit
|
|
|
- })
|
|
|
- .then(function(res) {
|
|
|
- that.$set(that, 'bargainlist', res.data.slice(0, 2));
|
|
|
- console.log(that.bargainlist);
|
|
|
- })
|
|
|
- .catch(res => {
|
|
|
- console.log(res, 'getBargainList');
|
|
|
- });
|
|
|
- },
|
|
|
- Mask() {
|
|
|
- this.MaskShow = false;
|
|
|
- this.shareShow = true;
|
|
|
- uni.setStorage({
|
|
|
- key: 'FirstEntry',
|
|
|
- data: true,
|
|
|
- success: function() {
|
|
|
- console.log(uni.getStorageSync('FirstEntry'), 'Mask');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- Toshare() {
|
|
|
- if (this.userInfo == '') {
|
|
|
- getUserInfo({})
|
|
|
- .then(({ data }) => {
|
|
|
- this.setUserInfo(data);
|
|
|
- this.userInfo = data;
|
|
|
- })
|
|
|
- .catch(e => {});
|
|
|
- } else {
|
|
|
- this.shareShow = false;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- Tocancel() {
|
|
|
- this.shareShow = false;
|
|
|
- },
|
|
|
// 监听切换事件
|
|
|
listChange(e) {
|
|
|
this.checkid = e.detail.current;
|
|
|
},
|
|
|
- // 點擊搜索框
|
|
|
- clickSearch() {
|
|
|
+ //积分详情页
|
|
|
+ navToDetailPagejf(item) {
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages/product/search'
|
|
|
+ url: '/pages/product/product?id=' + item.id + '&isJF=1'
|
|
|
});
|
|
|
},
|
|
|
// 点击触发领取优惠券
|
|
|
@@ -409,18 +255,24 @@ export default {
|
|
|
},
|
|
|
// 请求载入数据
|
|
|
async loadData() {
|
|
|
+ this.text = [];
|
|
|
+ this.article = [];
|
|
|
loadIndexs({})
|
|
|
.then(({ data }) => {
|
|
|
let goods = data.info;
|
|
|
this.carouselList = data.banner;
|
|
|
console.log(this.carouselList, 'this.carouselList++++++++');
|
|
|
this.swiperLength = this.carouselList.length;
|
|
|
- // this.bastList = data.giftInfo; //会员礼包
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ this.integralList = data.likeInfo; //兑换专区
|
|
|
+ console.log(data.likeInfo, '123456');
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ .catch(e => {});
|
|
|
+ article({}, 1).then(({ data }) => {
|
|
|
+ data.forEach(e => {
|
|
|
+ this.text.push(e.synopsis);
|
|
|
});
|
|
|
+ this.article = data;
|
|
|
+ });
|
|
|
},
|
|
|
//轮播图切换修改背景色
|
|
|
swiperChange(e) {
|
|
|
@@ -435,7 +287,6 @@ export default {
|
|
|
url: '/pages/product/product?id=' + id + '&isVip=1'
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
// 轮播图跳转
|
|
|
bannerNavToUrl(item) {
|
|
|
// #ifdef H5
|
|
|
@@ -449,10 +300,20 @@ export default {
|
|
|
url: item.wap_url
|
|
|
});
|
|
|
},
|
|
|
- getProduct() {
|
|
|
- getProducts().then(res => {
|
|
|
- console.log(res.data);
|
|
|
- this.bastList = res.data;
|
|
|
+ getproducts() {
|
|
|
+ const obj = this;
|
|
|
+ if (obj.loadType == 'loading' || obj.loadType == 'nomore') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ obj.loadType = 'loading';
|
|
|
+ getProducts({ page: obj.page, limit: obj.limit }).then(({ data }) => {
|
|
|
+ obj.bastList = obj.bastList.concat(data);
|
|
|
+ if (data.length == obj.limit) {
|
|
|
+ obj.page++;
|
|
|
+ obj.loadType = 'more';
|
|
|
+ } else {
|
|
|
+ obj.loadType = 'nomore';
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
@@ -462,14 +323,15 @@ export default {
|
|
|
<style lang="scss">
|
|
|
.carousel-section {
|
|
|
position: relative;
|
|
|
- padding-top: 10px;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 1310rpx;
|
|
|
|
|
|
.bg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 750rpx;
|
|
|
- height: 378rpx;
|
|
|
+ height: 1310rpx;
|
|
|
|
|
|
image {
|
|
|
width: 100%;
|
|
|
@@ -481,132 +343,17 @@ export default {
|
|
|
height: var(--status-bar-height);
|
|
|
box-sizing: content-box;
|
|
|
}
|
|
|
-
|
|
|
- .search {
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 10rpx 32rpx 20rpx;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .address {
|
|
|
- width: 32rpx;
|
|
|
- height: 38rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .shop-name {
|
|
|
- height: 38rpx;
|
|
|
- position: relative;
|
|
|
- top: -4rpx;
|
|
|
- z-index: 100;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .shop-jt {
|
|
|
- margin-left: 8rpx;
|
|
|
- width: 16rpx;
|
|
|
- height: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .input-box {
|
|
|
- margin-left: 10rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 99;
|
|
|
- width: 700rpx;
|
|
|
- height: 60rpx;
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 30rpx;
|
|
|
-
|
|
|
- .input-content {
|
|
|
- position: relative;
|
|
|
- z-index: 11;
|
|
|
- border-radius: 99rpx;
|
|
|
- flex-grow: 1;
|
|
|
- padding: 5rpx 30rpx;
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
-
|
|
|
- .iconsearch {
|
|
|
- font-size: 50rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .input {
|
|
|
- margin-left: 19rpx;
|
|
|
- flex-grow: 1;
|
|
|
- color: #ffffff;
|
|
|
-
|
|
|
- input {
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .input-button {
|
|
|
- padding-left: 20rpx;
|
|
|
- font-size: $font-base;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
-
|
|
|
-.carousel {
|
|
|
- position: relative;
|
|
|
- z-index: 3;
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
-
|
|
|
- .carousel-item {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0 28rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: $border-radius-sm;
|
|
|
- }
|
|
|
+.bg2 {
|
|
|
+ margin-top: -60rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 250rpx;
|
|
|
}
|
|
|
-
|
|
|
-.navbar {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- margin-top: -200rpx;
|
|
|
+.bg3 {
|
|
|
+ margin-top: -20rpx;
|
|
|
width: 750rpx;
|
|
|
- height: 462rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 40rpx;
|
|
|
-
|
|
|
- .navbar-box {
|
|
|
- padding-top: 250rpx;
|
|
|
-
|
|
|
- .navbar-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 25%;
|
|
|
-
|
|
|
- .nitem-image {
|
|
|
- width: 130rpx;
|
|
|
- height: 130rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .nitem-font {
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 750rpx;
|
|
|
}
|
|
|
-
|
|
|
.product-box {
|
|
|
margin-top: 20rpx;
|
|
|
background: #ffffff;
|
|
|
@@ -735,7 +482,121 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.main-box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 22rpx 30rpx;
|
|
|
+ .main-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .main-icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ .main-title {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .main-synopsis {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #95a0b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-content {
|
|
|
+ width: 690rpx;
|
|
|
+ background: #f4f4f4;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ .xfq {
|
|
|
+ background: linear-gradient(43deg, #ffc063, #ffa163) !important;
|
|
|
+ }
|
|
|
+ .content-top {
|
|
|
+ width: 690rpx;
|
|
|
+ background: linear-gradient(43deg, #73deb2, #52c696);
|
|
|
+ border-radius: 12rpx 12rpx 0px 0px;
|
|
|
+ padding: 24rpx 22rpx 68rpx 27rpx;
|
|
|
+ .content-font {
|
|
|
+ .content-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .content-synopsis {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .go {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 35rpx;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ -ms-transform: rotate(180deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(180deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(180deg); /* Opera */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .commodity {
|
|
|
+ width: 670rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 2rpx;
|
|
|
+ margin: -50rpx auto 0;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .commodity-item {
|
|
|
+ width: 33%;
|
|
|
+ padding: 14rpx 30rpx 22rpx;
|
|
|
+ .commodity-image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+ .commodity-title {
|
|
|
+ margin-top: 14rpx;
|
|
|
+ width: 162rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3f3f3f;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .vip-price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff6f0f;
|
|
|
+ image {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.popup-box {
|
|
|
width: 522rpx;
|
|
|
height: 605rpx;
|
|
|
@@ -826,4 +687,48 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.tongz {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ margin: 32rpx auto 0;
|
|
|
+ padding: 18rpx 30rpx 18rpx 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .tongz-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tongz-left {
|
|
|
+ width: 640rpx;
|
|
|
+ .image-left {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ .tongz-font {
|
|
|
+ margin-left: 22rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0f253a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tongz-right {
|
|
|
+ position: relative;
|
|
|
+ z-index: 11;
|
|
|
+ width: 12rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|