|
|
@@ -1,137 +1,31 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 顶部logo and 搜索 start-->
|
|
|
- <view class="index-top-wrap">
|
|
|
- <image src="../../static/index/index-top.png" mode="widthFix" class="index-top"></image>
|
|
|
- <view class="status_bar fud"></view>
|
|
|
- <view class="top-search flex fud">
|
|
|
- <view class="search-box flex" @click="clickSearch()">
|
|
|
- <image class="search" src="../../static/icon/search-h.png" mode=""></image>
|
|
|
- <view class="search-font">输入关键词搜索</view>
|
|
|
- </view>
|
|
|
+ <view class="status_bar"></view>
|
|
|
+ <view class="top-search flex">
|
|
|
+ <view class="search-box flex" @click="clickSearch()">
|
|
|
+ <image class="search" src="../../static/icon/search-h.png" mode=""></image>
|
|
|
+ <view class="search-font">输入关键词搜索</view>
|
|
|
</view>
|
|
|
- <!-- 顶部logo and 搜索 end-->
|
|
|
- <!-- 轮播图 start -->
|
|
|
- <swiper class="top-swiper fud" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
- <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
|
|
|
- @click="bannerNavToUrl(item)">
|
|
|
- <image :src="item.pic" />
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- 轮播图 end -->
|
|
|
</view>
|
|
|
<!-- 顶部logo and 搜索 end-->
|
|
|
<view class="jg" style="background-color: #fff;"></view>
|
|
|
- <!-- 分类 start -->
|
|
|
- <view class="cate-section flex">
|
|
|
- <view class="cate-item flex" @click="navto('/pages/category/category')">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image src="../../static/icon/in1.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">全部商品</view>
|
|
|
- </view>
|
|
|
- <!-- <view class="cate-item flex" @click="navto('/pages/store/shopList')">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image src="../../static/icon/in2.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">门店列表</view>
|
|
|
- </view> -->
|
|
|
- <view class="cate-item flex" @click="openKf">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image src="../../static/icon/in3.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">联系客服</view>
|
|
|
- </view>
|
|
|
- <view class="cate-item flex" @click="navto('/pages/index/integral')">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image src="../../static/icon/in4.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">积分商城</view>
|
|
|
- </view>
|
|
|
- <view class="cate-item flex" @click="navto('/pages/index/baodan')">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image src="../../static/icon/in4.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">会员商品</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 分类 ed -->
|
|
|
+ <!-- 轮播图 start -->
|
|
|
+ <swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange" indicator-dots indicator-active-color="#ea3855" >
|
|
|
+ <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
|
|
|
+ @click="bannerNavToUrl(item)">
|
|
|
+ <image :src="item.pic" />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 轮播图 end -->
|
|
|
+ <view class="jg">
|
|
|
|
|
|
- <!-- 商品列表 start -->
|
|
|
- <view class="product-box" v-if="navList.bd.list.length > 0">
|
|
|
- <view class="hotgoods">
|
|
|
- <view class="hotgoods-item" v-for="bditem in navList.bd.list" :key="bditem.id"
|
|
|
- @click="navto('/pages/product/product?id=' + bditem.id)" style="height: 520rpx;">
|
|
|
- <view class="image-wrapper">
|
|
|
- <image class="image" :src="bditem.image" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <view class="flex"
|
|
|
- style="flex-direction: column;justify-content: space-between;align-items: flex-start;height: 170rpx;">
|
|
|
- <view class="title clamp2">{{bditem.store_name}}</view>
|
|
|
- <view class="hot-price">
|
|
|
- <view class="price">
|
|
|
- <text class="font-size-sm"></text>
|
|
|
- <text>￥{{ bditem.price * 1 }}</text>
|
|
|
- <text class="give-jf"
|
|
|
- v-if="bditem.give_integral*1 > 0">赠{{bditem.give_integral*1}}积分</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
- <!-- 商品列表 ed-->
|
|
|
- <!-- <view class="jg" style="background-color: #f5f5f5;height: 20rpx;" v-if="navList.jf.list.length > 0">
|
|
|
- </view> -->
|
|
|
- <!-- 商品列表 start -->
|
|
|
- <!-- <view class="product-box" v-if="navList.jf.list.length > 0">
|
|
|
- <view class="product-tit flex">
|
|
|
- <view class="hx"></view>
|
|
|
- <view class="tit">积分兑换</view>
|
|
|
- <view class="hx"></view>
|
|
|
- </view>
|
|
|
- <view class="hotgoods">
|
|
|
- <view class="hotgoods-item" v-for="jfitem in navList.jf.list" :key="jfitem.id"
|
|
|
- @click="navto('/pages/product/product?id=' + jfitem.id + '&isjf=1')" style="height: 520rpx;">
|
|
|
- <view class="image-wrapper">
|
|
|
- <image class="image" :src="jfitem.image" mode="scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <view class="flex"
|
|
|
- style="flex-direction: column;justify-content: space-between;align-items: flex-start;height: 170rpx;">
|
|
|
- <view class="title clamp2">{{jfitem.store_name}}</view>
|
|
|
- <view class="hot-price">
|
|
|
- <view class="price">
|
|
|
- <text class="font-size-sm">￥</text>
|
|
|
- <text>{{ jfitem.price * 1 }}+{{ jfitem.max_integral* 1 }}积分</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <view class="good-list">
|
|
|
+ <view class="good" v-for="item in goodList" @click="navTo('/pages/index/artDetail?id=' + item.id)">
|
|
|
+ <image :src="item.image" mode=""></image>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
- <!-- 商品列表 ed-->
|
|
|
-
|
|
|
- <uni-popup ref="popupkf" type="center">
|
|
|
- <view class="popup-box">
|
|
|
- <view class="img">
|
|
|
- <image src="../../static/img/img009.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="mian">
|
|
|
- <view class="delivery">
|
|
|
- <view class="title">已经为您定制专属客服</view>
|
|
|
- <image src="../../static/img/img010.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="nocancel">客服VX:{{ text }}</view>
|
|
|
- <view class="comfirm-box">
|
|
|
- <view class="cancel" @click="cancel">取消</view>
|
|
|
- <view class="comfirm" @click="comfirm(text)">复制微信</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -142,10 +36,14 @@
|
|
|
} from '@/api/index.js';
|
|
|
import {
|
|
|
getUserInfo,
|
|
|
- spread
|
|
|
+ spread,
|
|
|
+ // getArtList
|
|
|
} from '@/api/user.js';
|
|
|
import {
|
|
|
- groomList
|
|
|
+ getBargainList,
|
|
|
+ getProducts,
|
|
|
+ goodsDetail,
|
|
|
+ poster
|
|
|
} from '@/api/product.js';
|
|
|
import {
|
|
|
saveUrl,
|
|
|
@@ -165,32 +63,81 @@
|
|
|
data() {
|
|
|
return {
|
|
|
text: '', //客服微信
|
|
|
+ page: 1,
|
|
|
+ limitt: 20,
|
|
|
+ loadingType: 'more',
|
|
|
+ current: 0,
|
|
|
+ shareShow: false, //分享海报
|
|
|
+ pageProportion: 0, //保存页面基于750宽度的比例
|
|
|
+ swiperHeight: 0,
|
|
|
+ checkid: 0,
|
|
|
+ titleNViewBackground: '',
|
|
|
+ swiperCurrent: 0,
|
|
|
+ swiperLength: 0,
|
|
|
carouselList: [], //轮播列表
|
|
|
- navList: {
|
|
|
- bd: {
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loaded: false,
|
|
|
- loadingType: 'more',
|
|
|
- list: [],
|
|
|
- status: 1
|
|
|
- },
|
|
|
- jf: {
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loaded: false,
|
|
|
- loadingType: 'more',
|
|
|
- list: [],
|
|
|
- status: 3
|
|
|
- }
|
|
|
- }
|
|
|
+ page: 1,
|
|
|
+ limit: 5,
|
|
|
+ firstList: [],
|
|
|
+ goodList: [], //商品列表
|
|
|
+ shopList: [],
|
|
|
+ period: 1,
|
|
|
+ shareImage: '',
|
|
|
+ fgList: '',//复购商品
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState('user', ['hasLogin', 'userInfo'])
|
|
|
},
|
|
|
- onReachBottom() {
|
|
|
+ onShareAppMessage(options) {
|
|
|
+ // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
+ let pages = getCurrentPages(); //获取加载的页面
|
|
|
+ let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
+ let url = currentPage.route; //当前页面url
|
|
|
+ let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
+ let shareObj = {}
|
|
|
+ if (this.userInfo.uid) {
|
|
|
+ shareObj = {
|
|
|
+ title: this.userInfo.nickname + '邀请您加入盛广大健康', // 默认是小程序的名称(可以写slogan等)
|
|
|
+ path: url + '?scene=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
+ imageUrl: '',
|
|
|
+ success: function(res) {
|
|
|
+ // 转发成功之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:ok') {}
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ // 转发失败之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
+ // 用户取消转发
|
|
|
+ } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
+ // 转发失败，其中 detail message 为详细失败信息
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ shareObj = {
|
|
|
+ title: '孝洙美颜', // 默认是小程序的名称(可以写slogan等)
|
|
|
+ path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
+ imageUrl: '',
|
|
|
+ success: function(res) {
|
|
|
+ // 转发成功之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:ok') {}
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ // 转发失败之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
+ // 用户取消转发
|
|
|
+ } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
+ // 转发失败，其中 detail message 为详细失败信息
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
+ return shareObj;
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ console.log('到底')
|
|
|
+ this.getGoodList()
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
// #ifdef MP
|
|
|
@@ -202,88 +149,43 @@
|
|
|
});
|
|
|
}
|
|
|
// #endif
|
|
|
- this.loadData();
|
|
|
- this.getGoodList()
|
|
|
+ if(option.spread) {
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'spread',
|
|
|
+ data: option.spread
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
onShow: function() {
|
|
|
- this.getaddress()
|
|
|
+ this.getGoodList()
|
|
|
+ this.loadData();
|
|
|
+ // this.groom1()
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapMutations(['setLat', 'setLon']),
|
|
|
- getaddress() {
|
|
|
- console.log('dizhi+++++++++++');
|
|
|
- let obj = this;
|
|
|
- uni.getLocation({
|
|
|
- type: 'wgs84',
|
|
|
- success: res => {
|
|
|
- let wz = obj.wgs84Togcj02(res.longitude, res.latitude);
|
|
|
- obj.setLat(wz[1]);
|
|
|
- obj.setLon(wz[0]);
|
|
|
- console.log(wz, '经纬度');
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- console.log(err, '经纬度');
|
|
|
- openMap().then(e => {
|
|
|
- this.getaddress();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- wgs84Togcj02(lng, lat) {
|
|
|
- if (this.out_of_china(lng, lat)) {
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
- //定义一些常量
|
|
|
- //GCJ02 转换为 WGS84
|
|
|
- var that = this;
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let dlat = that.transformlat(lng - 105.0, lat - 35.0);
|
|
|
- let dlng = that.transformlng(lng - 105.0, lat - 35.0);
|
|
|
- let radlat = (lat / 180.0) * PI;
|
|
|
- let magic = Math.sin(radlat);
|
|
|
- magic = 1 - ee * magic * magic;
|
|
|
- let sqrtmagic = Math.sqrt(magic);
|
|
|
- dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
|
|
|
- dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
|
|
|
- var mglat = lat + dlat;
|
|
|
- var mglng = lng + dlng;
|
|
|
- return [mglng, mglat];
|
|
|
- },
|
|
|
- transformlat(lng, lat) {
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(
|
|
|
- lng));
|
|
|
- ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
|
|
|
- return ret;
|
|
|
- },
|
|
|
- transformlng(lng, lat) {
|
|
|
- const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
|
|
|
- const PI = 3.1415926535897932384626;
|
|
|
- const a = 6378245.0;
|
|
|
- const ee = 0.00669342162296594323;
|
|
|
- let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
|
|
- ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
|
|
|
- ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
|
|
|
- return ret;
|
|
|
+ //获取复购商品
|
|
|
+ groom1() {
|
|
|
+ groom1().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.fgList = res.data.list
|
|
|
+ })
|
|
|
},
|
|
|
getGoodList() {
|
|
|
- let that = this;
|
|
|
- let item;
|
|
|
- item = that.navList.jf
|
|
|
- groomList({
|
|
|
- page: item.page,
|
|
|
- limit: item.limit
|
|
|
- }, 5).then(res => {
|
|
|
- item.list = item.list.concat(res.data.list)
|
|
|
+ let obj = this
|
|
|
+ if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ obj.loadingType = 'loading'
|
|
|
+ getProducts({
|
|
|
+ page: 1,
|
|
|
+ limit: 50,
|
|
|
+ },1).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ obj.goodList = res.data
|
|
|
+ if (obj.limit == res.data.length) {
|
|
|
+ obj.loadingType = 'more'
|
|
|
+ } else {
|
|
|
+ obj.loadingType = 'noMore'
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
navto(url, type = 0) {
|
|
|
@@ -304,7 +206,6 @@
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
- console.log(url, 'url');
|
|
|
uni.navigateTo({
|
|
|
url,
|
|
|
fail() {
|
|
|
@@ -340,15 +241,26 @@
|
|
|
data
|
|
|
}) => {
|
|
|
let goods = data.info;
|
|
|
+ console.log(goods, '商品信息');
|
|
|
this.carouselList = data.banner;
|
|
|
- this.navList.bd.list = data.info.firstList //首页商品
|
|
|
- console.log(this.navList.bd.list, '商品信息');
|
|
|
+ this.swiperLength = this.carouselList.length;
|
|
|
+ this.bastList = data.giftInfo; //会员礼包
|
|
|
+ data.info.firstList.forEach(e => {
|
|
|
+ e.isVip = e.store_type ? "3" : "0"
|
|
|
+ })
|
|
|
+ this.firstList = data.info.firstList //首页商品
|
|
|
uni.stopPullDownRefresh();
|
|
|
})
|
|
|
.catch(e => {
|
|
|
uni.stopPullDownRefresh();
|
|
|
});
|
|
|
},
|
|
|
+ //轮播图切换修改背景色
|
|
|
+ swiperChange(e) {
|
|
|
+ const index = e.detail.current;
|
|
|
+ this.swiperCurrent = index;
|
|
|
+ this.titleNViewBackground = this.carouselList[index].background;
|
|
|
+ },
|
|
|
// 轮播图跳转
|
|
|
bannerNavToUrl(item) {
|
|
|
// #ifdef H5
|
|
|
@@ -434,8 +346,7 @@
|
|
|
.top-search {
|
|
|
height: 80rpx;
|
|
|
padding: 0 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- // background-color: #fff;
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
.top-logo {
|
|
|
width: 50rpx;
|
|
|
@@ -473,345 +384,33 @@
|
|
|
|
|
|
// 顶部轮播图
|
|
|
.top-swiper {
|
|
|
- width: 690rpx;
|
|
|
- height: 365rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 348rpx;
|
|
|
|
|
|
// margin: 20rpx 0 0;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
image {
|
|
|
- width: 690rpx;
|
|
|
- height: 365rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 348rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .swiper-btm {
|
|
|
- height: 60rpx;
|
|
|
- width: 750rpx;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .btm-item {
|
|
|
- flex-grow: 1;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 25rpx;
|
|
|
- height: 25rpx;
|
|
|
- margin-right: 14rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
.jg {
|
|
|
height: 20rpx;
|
|
|
background: #F8F8F8;
|
|
|
}
|
|
|
|
|
|
- // 分类
|
|
|
- .cate-section {
|
|
|
- justify-content: space-around;
|
|
|
- background-color: #fff;
|
|
|
- padding: 0rpx 0 30rpx;
|
|
|
-
|
|
|
- .cate-item {
|
|
|
- flex-grow: 0;
|
|
|
- width: 20%;
|
|
|
- flex-direction: column;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .img-wrapper {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-title {
|
|
|
- margin-top: 15rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #3F3F3F;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .product-box {
|
|
|
- margin-top: 20rpx;
|
|
|
- background: #ffffff;
|
|
|
- padding: 26rpx 0 20rpx;
|
|
|
-
|
|
|
- .product-tit {
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 609rpx;
|
|
|
- height: 31rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .hx {
|
|
|
- width: 120rpx;
|
|
|
- height: 1rpx;
|
|
|
- background: #363636;
|
|
|
- color: #363636;
|
|
|
- line-height: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- .tit {
|
|
|
- margin: 0 70rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #363636;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .in-ban {
|
|
|
- margin-top: 40rpx;
|
|
|
- width: 750rpx;
|
|
|
- height: 220rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .hotgoods {
|
|
|
- margin-top: 38rpx;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 20rpx 30rpx;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .hotgoods-item {
|
|
|
- width: 345rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 12rpx;
|
|
|
- box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.2);
|
|
|
- margin-bottom: 15rpx;
|
|
|
-
|
|
|
- .image-wrapper {
|
|
|
- width: 345rpx;
|
|
|
- height: 345rpx;
|
|
|
- border-radius: 3px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .image-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 12rpx 12rpx 0 0;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 12rpx 12rpx 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-top: 24rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .hot-price {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- // padding: 14rpx 0 30rpx;
|
|
|
-
|
|
|
- .hotPrice-box {
|
|
|
- padding: 2rpx 6rpx;
|
|
|
-
|
|
|
- background: linear-gradient(90deg, #c79a4c, #f9df7f);
|
|
|
- border-radius: 5rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 28rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #ff0000;
|
|
|
- font-weight: 500;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .jf {
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .give-jf {
|
|
|
- display: inline-block;
|
|
|
- padding: 8rpx;
|
|
|
-
|
|
|
- background: linear-gradient(90deg, #FF834D, #FF2600);
|
|
|
- border-radius: 12rpx 0px 12rpx 0px;
|
|
|
-
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-left: 22rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .ot-pirce {
|
|
|
- margin-left: 7rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- align-self: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .yuanPrice {
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .cart-icon {
|
|
|
- image {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .popup-box {
|
|
|
- width: 522rpx;
|
|
|
- height: 605rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .img {
|
|
|
- position: relative;
|
|
|
- top: -56rpx;
|
|
|
- left: 0;
|
|
|
- width: 522rpx;
|
|
|
- height: 132rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
+ .good-list {
|
|
|
+ width: 750rpx;
|
|
|
+ .good {
|
|
|
+ margin: 20rpx auto;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 370rpx;
|
|
|
image {
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- width: 450rpx;
|
|
|
- height: 132rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mian {
|
|
|
- margin-top: -44rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- // padding: 32rpx 32rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 0 0 20rpx 20rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .delivery {
|
|
|
- font-size: 40rpx;
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- image {
|
|
|
- margin-top: 48rpx;
|
|
|
- width: 172rpx;
|
|
|
- height: 160rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .nocancel {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- margin-top: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm-box {
|
|
|
- margin-top: 52rpx;
|
|
|
- display: flex;
|
|
|
- // margin-bottom: 32rpx;
|
|
|
-
|
|
|
- // justify-content: space-around;
|
|
|
- .cancel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 74rpx;
|
|
|
- border: 1px solid #dcc786;
|
|
|
- border-radius: 38rpx;
|
|
|
-
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm {
|
|
|
- margin-left: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 74rpx;
|
|
|
- background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
- border-radius: 38px;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .index-top-wrap {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .index-top {
|
|
|
- width: 750rpx;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .fud {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+</style>
|
