|
|
@@ -1,167 +1,120 @@
|
|
|
<template>
|
|
|
<view class="center">
|
|
|
- <view class="top">
|
|
|
- <view class="vheigh"></view>
|
|
|
- <!-- <view class="body-title">
|
|
|
- <view class="goback-box" @click="toBack">
|
|
|
- <image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="header">进货系统</view>
|
|
|
- </view> -->
|
|
|
- <!-- <image class="top-bg" src="../../static/img/top-bg.png" mode=""></image> -->
|
|
|
- <view class="top-main flex">
|
|
|
- <view class="search-box flex" @click="clickSearch()">
|
|
|
- <image class="search" src="../../static/img/search.png" mode=""></image>
|
|
|
- <view class="search-font">输入关键词搜索</view>
|
|
|
+ <view class="topcontent padding-b-30">
|
|
|
+ <view class="top">
|
|
|
+ <view class="vheigh"></view>
|
|
|
+ <view class="top-main flex">
|
|
|
+ <view class="search-box flex" @click="clickSearch()">
|
|
|
+ <image class="search" src="../../static/img/search.png" mode=""></image>
|
|
|
+ <view class="search-font">输入关键词搜索</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <swiper class="carousel" 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>
|
|
|
- <view class="stre flex">
|
|
|
- <view class="ic-text flex">
|
|
|
- <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
- <view class="ic-wen">自用购物优惠</view>
|
|
|
- </view>
|
|
|
- <view class="ic-text flex">
|
|
|
- <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
- <view class="ic-wen">分享好友赚钱</view>
|
|
|
- </view>
|
|
|
- <view class="ic-text flex">
|
|
|
- <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
- <view class="ic-wen">超值正品优惠</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="zhishi flex">
|
|
|
- <view class="zhishi-item">
|
|
|
- <image class="zhishi-ic" src="../../static/icon/shou-tro.png" mode=""></image>
|
|
|
- <view class="zhishi-te">行业介绍</view>
|
|
|
- </view>
|
|
|
- <view class="zhishi-item">
|
|
|
- <image class="zhishi-ic" src="../../static/icon/shou-we.png" mode=""></image>
|
|
|
- <view class="zhishi-te">关于我们</view>
|
|
|
- </view>
|
|
|
- <view class="zhishi-item">
|
|
|
- <image class="zhishi-ic" src="../../static/icon/shou-kefu.png" mode=""></image>
|
|
|
- <view class="zhishi-te">联系客服</view>
|
|
|
- </view>
|
|
|
- <view class="zhishi-item">
|
|
|
- <image class="zhishi-ic" src="../../static/icon/firend.png" mode=""></image>
|
|
|
- <view class="zhishi-te">邀请好友</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tongz flex">
|
|
|
- <view>
|
|
|
- <view class="tongz-bg">
|
|
|
- <image src="../../static/img/tongz-bg.png" mode=""></image>
|
|
|
+ <swiper class="carousel" autoplay="true" duration="400" interval="5000">
|
|
|
+ <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
|
|
|
+ @click="bannerNavToUrl(item)">
|
|
|
+ <image :src="item.pic" />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="stre flex">
|
|
|
+ <view class="ic-text flex">
|
|
|
+ <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
+ <view class="ic-wen">自用购物优惠</view>
|
|
|
</view>
|
|
|
- <view class="tongz-left flex">
|
|
|
- <image class="image-left" src="../../static/icon/shou-gonggao.png" mode=""></image>
|
|
|
- <u-notice-bar style="width: 100%;" mode="vertical" type="none" :volume-icon="false"
|
|
|
- :more-icon="true" :list="text" @click="goDetails"
|
|
|
- @getMore="nav('/pages/index/message?type=1')"></u-notice-bar>
|
|
|
+ <view class="ic-text flex">
|
|
|
+ <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
+ <view class="ic-wen">分享好友赚钱</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="navbar flex">
|
|
|
- <view class="navbar-item" v-for="(item, index) in navbarList[0].children"
|
|
|
- @click="nav('/pages/product/list?tid=' + item.id)">
|
|
|
- <image class="nitem-image" :src="item.pic" mode=""></image>
|
|
|
- <view class="nitem-font">{{ item.cate_name }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="shingle" v-if="list">
|
|
|
- <view class="shingle-top flex">
|
|
|
- <view class="shingle-title">CBB潮贝抢货通道</view>
|
|
|
- <view class="shingle-btn" @click="nav('/pages/hall/hall')">
|
|
|
- 更多CBB代理团队
|
|
|
- <text>></text>
|
|
|
+ <view class="ic-text flex">
|
|
|
+ <image class="ic-tubiao" src="../../static/icon/shou-ic.png" mode=""></image>
|
|
|
+ <view class="ic-wen">超值正品优惠</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="shingle-main" @click="navTo(list)">
|
|
|
- <view class="shingle-bg">
|
|
|
- <image :src="list.image" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="shinglem-title flex">
|
|
|
- <image class="tbg" src="../../static/img/tbg-left.png" mode=""></image>
|
|
|
- <view class="shinglemt-center">
|
|
|
- <image class="address" src="../../static/img/address.png" mode=""></image>
|
|
|
- <view class="shingle-font">{{ list.name || 'null' }}</view>
|
|
|
+ <view class="zhishi flex">
|
|
|
+ <navigator url="/pages/index/artDetail?id=5">
|
|
|
+ <view class="zhishi-item">
|
|
|
+ <image class="zhishi-ic" src="../../static/icon/shou-tro.png" mode=""></image>
|
|
|
+ <view class="zhishi-te">行业介绍</view>
|
|
|
</view>
|
|
|
- <image class="tbg" src="../../static/img/tbg-right.png" mode=""></image>
|
|
|
+ </navigator>
|
|
|
+ <navigator url="/pages/index/artDetail?id=6">
|
|
|
+ <view class="zhishi-item">
|
|
|
+ <image class="zhishi-ic" src="../../static/icon/shou-we.png" mode=""></image>
|
|
|
+ <view class="zhishi-te">关于我们</view>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ <view class="zhishi-item" @click="openKf">
|
|
|
+ <image class="zhishi-ic" src="../../static/icon/shou-kefu.png" mode=""></image>
|
|
|
+ <view class="zhishi-te">联系客服</view>
|
|
|
</view>
|
|
|
- <view class="shingle-mmain flex">
|
|
|
- <view class="smmain-item">
|
|
|
- <view class="smitem-top">开放中</view>
|
|
|
- <view class="smitem-bottom">状态</view>
|
|
|
+ <navigator url="/pages/user/shareQrCode">
|
|
|
+ <view class="zhishi-item">
|
|
|
+ <image class="zhishi-ic" src="../../static/icon/firend.png" mode=""></image>
|
|
|
+ <view class="zhishi-te">邀请好友</view>
|
|
|
</view>
|
|
|
- <view class="shu"></view>
|
|
|
- <view class="smmain-item">
|
|
|
- <view class="smitem-top clamp">{{ list.nickname }}</view>
|
|
|
- <view class="smitem-bottom">CBB潮倍贝</view>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ <view class="tongz">
|
|
|
+ <view class="tongz-left flex padding-l-30">
|
|
|
+ <image class="image-left" src="../../static/icon/shou-gonggao.png" mode=""></image>
|
|
|
+ <u-notice-bar class="notice" mode="vertical" type="none" :volume-icon="false" :more-icon="true"
|
|
|
+ :list="text" @click="goDetails" @getMore="nav('/pages/index/message?type=1')"></u-notice-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-list flex">
|
|
|
+ <template v-for="(item,ind) in dataList">
|
|
|
+ <view class="list-left" v-if="ind==0">
|
|
|
+ <navigator :url="`/pages/index/artDetail?id=${item.id}`">
|
|
|
+ <image class="imgleft" :src="item.image_input[0]" mode="scaleToFill"></image>
|
|
|
+ </navigator>
|
|
|
</view>
|
|
|
- <view class="shu"></view>
|
|
|
- <view class="smmain-item">
|
|
|
- <view class="people flex">
|
|
|
- <view class="peopleitem" v-for="item in 1">
|
|
|
- <image src="../../static/img/busy.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="peopleitem" v-for="item in 4">
|
|
|
- <image src="../../static/img/leisure.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="smitem-bottom">流畅</view>
|
|
|
+ </template>
|
|
|
+ <view class="list-right flex" v-if="dataList.length>1">
|
|
|
+ <view class="item" v-for="(item,ind) in dataList" v-if="ind>0">
|
|
|
+ <navigator :url="`/pages/index/artDetail?id=${item.id}`">
|
|
|
+ <image class="imgleft" :src="item.image_input[0]" mode="scaleToFill"></image>
|
|
|
+ </navigator>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <image class="right-bottom" src="../../static/img/right-bottom.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="shop" @click="nav('/pages/store/store')">
|
|
|
- <view class="shop-title">
|
|
|
- <image class="shop-title-icon" src="../../static/icon/index1.png" mode=""></image>
|
|
|
- <view class="shop-title-font">本地生活</view>
|
|
|
- </view>
|
|
|
- <!-- #ifndef APP-PLUS -->
|
|
|
- <view class="shop-main">
|
|
|
- <image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/59b8e202304061437149756.png" mode=""></image>
|
|
|
+ <view class="bottom-box margin-t-30">
|
|
|
+ <view class="bottom-title padding-b-30">
|
|
|
+ <image class="image" src="../../static/img/image-title.png" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <view class="shop-main">
|
|
|
- <image src="../../static/img/index-shop.png" mode=""></image>
|
|
|
+ <swiper previous-margin='150rpx' next-margin='150rpx' class="product-art-list" circular autoplay
|
|
|
+ duration="400" interval="5000" @change='changeBottom'>
|
|
|
+ <swiper-item v-for="(item, index) in article" :key="index" class="product-art-item">
|
|
|
+ <navigator :url="`/pages/index/artDetail?id=${item.id}`">
|
|
|
+ <view class="image-box">
|
|
|
+ <image class="image" :src="item.image_input[0]" />
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="product-detail">
|
|
|
+ {{article[actionArtInd].synopsis}}
|
|
|
</view>
|
|
|
- <!-- #endif -->
|
|
|
</view>
|
|
|
- <view class="product" v-for="(item, index) in navbarList[0].children">
|
|
|
- <view class="seckill-title flex">
|
|
|
- <view class="seckill-left flex">
|
|
|
- <view class="seckill-font">{{ item.cate_name }}</view>
|
|
|
+ <uni-popup ref="popupkf" type="center">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="img">
|
|
|
+ <image src="../../static/img/img009.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="seckill-right" @click="nav('/pages/product/list?tid=' + item.id)">
|
|
|
- <view class="seckill-rfont">更多</view>
|
|
|
- <image class="seckill-back" src="../../static/img/back.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="priduct-main">
|
|
|
- <view class="priduct-item" v-for="itm in item.product" :key="itm.id" @click="navToDetailPage(itm)">
|
|
|
- <view class="priduct-main-image">
|
|
|
- <image :src="itm.image" mode="scaleToFill"></image>
|
|
|
+ <view class="mian">
|
|
|
+ <view class="delivery">
|
|
|
+ <view class="title">已经为您定制专属客服</view>
|
|
|
+ <image src="../../static/img/img010.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="priduct-main-name clamp margin-c-20">{{ itm.store_name }}</view>
|
|
|
- <view class="priduct-main-price">
|
|
|
- <view class="price" v-if="item.integral != 0">¥{{ itm.price * 1 }} + {{ itm.integral }}趣豆</view>
|
|
|
- <view class="price" v-else>¥{{ itm.price }}</view>
|
|
|
+ <view class="nocancel">客服VX:{{ kefu }}</view>
|
|
|
+ <view class="comfirm-box">
|
|
|
+ <view class="cancel" @click="cancel">取消</view>
|
|
|
+ <view class="comfirm" @click="comfirm(kefu)">复制微信</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <u-tabbar activeColor="#f42b4e" v-model="current" :list="tabbar"></u-tabbar>
|
|
|
+ </uni-popup>
|
|
|
+ <u-tabbar activeColor="#333333" inactive-color='#999999' v-model="current" :list="tabbar"></u-tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -201,20 +154,14 @@
|
|
|
return {
|
|
|
current: 0,
|
|
|
tabbar: tabbar1,
|
|
|
- titleNViewBackground: '',
|
|
|
- swiperCurrent: 0,
|
|
|
- swiperLength: 0,
|
|
|
longitude: '', //经度
|
|
|
latitude: '', //纬度
|
|
|
- dataList: '',
|
|
|
carouselList: [], //轮播图列表
|
|
|
- text: [],
|
|
|
- article: [],
|
|
|
- list: {},
|
|
|
- stop: [],
|
|
|
- navbarList: [{
|
|
|
- child: []
|
|
|
- }]
|
|
|
+ text: [], //公告
|
|
|
+ article: [], //精品展示
|
|
|
+ dataList: [], //产品介绍
|
|
|
+ kefu: '',
|
|
|
+ actionArtInd: 0, //默认选中的精品展示对象
|
|
|
};
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
@@ -227,60 +174,54 @@
|
|
|
},
|
|
|
onShow() {
|
|
|
this.loadData();
|
|
|
- this.getnavbar();
|
|
|
this.getaddress();
|
|
|
},
|
|
|
methods: {
|
|
|
...mapMutations(['setLat', 'setLon', 'setChoose']),
|
|
|
- getnavbar() {
|
|
|
- let obj = this;
|
|
|
- getCategoryList({})
|
|
|
- .then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- data[0].children.forEach(e => {
|
|
|
- getProducts({
|
|
|
- page: 1,
|
|
|
- limit: 2,
|
|
|
- sid: e.id
|
|
|
- }).then(info => {
|
|
|
- obj.$set(e, 'product', info.data);
|
|
|
- });
|
|
|
- });
|
|
|
- this.navbarList = data;
|
|
|
- console.log(data, '123456');
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
+ // 底部轮播图切换
|
|
|
+ changeBottom(res) {
|
|
|
+ this.actionArtInd = res.detail.current;
|
|
|
+ console.log(res);
|
|
|
+ },
|
|
|
+ // 打开客服
|
|
|
+ openKf() {
|
|
|
+ this.$refs.popupkf.open();
|
|
|
+ },
|
|
|
+ // 关闭客服
|
|
|
+ cancel() {
|
|
|
+ this.$refs.popupkf.close();
|
|
|
},
|
|
|
loadData() {
|
|
|
article({}, 1).then(({
|
|
|
data
|
|
|
}) => {
|
|
|
- data.forEach(e => {
|
|
|
- this.text.push(e.synopsis);
|
|
|
- });
|
|
|
- this.article = data;
|
|
|
+ this.text = data.map((e) => {
|
|
|
+ return e.synopsis
|
|
|
+ })
|
|
|
});
|
|
|
- auction_gu({
|
|
|
- pages: 1,
|
|
|
- limit: 1
|
|
|
+ // 精品展示
|
|
|
+ article({}, 2).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.article = data.map((e) => {
|
|
|
+ e.imageurl = e.image_input[0];
|
|
|
+ return e
|
|
|
})
|
|
|
- .then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- this.list = data[0];
|
|
|
+ });
|
|
|
+ // 产品介绍
|
|
|
+ article({}, 3).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.dataList = data.map((e) => {
|
|
|
+ return e
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
+ });
|
|
|
loadIndexs({})
|
|
|
.then(({
|
|
|
data
|
|
|
}) => {
|
|
|
let goods = data.info;
|
|
|
- this.dataList = goods.bastList; //精品推荐
|
|
|
+ // this.dataList = goods.bastList; //精品推荐
|
|
|
this.carouselList = data.banner;
|
|
|
})
|
|
|
.catch(e => {});
|
|
|
@@ -374,12 +315,6 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- //轮播图切换修改背景色
|
|
|
- swiperChange(e) {
|
|
|
- const index = e.detail.current;
|
|
|
- this.swiperCurrent = index;
|
|
|
- this.titleNViewBackground = this.carouselList[index].background;
|
|
|
- },
|
|
|
// 點擊搜索框
|
|
|
clickSearch() {
|
|
|
uni.navigateTo({
|
|
|
@@ -404,51 +339,12 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page,
|
|
|
.center {
|
|
|
- min-height: 100%;
|
|
|
- height: auto;
|
|
|
- background: #ffffff;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
}
|
|
|
|
|
|
- .body-title {
|
|
|
- height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 35rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .header {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #fffeff;
|
|
|
- height: 80rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 700;
|
|
|
- z-index: 9;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .goback-box {
|
|
|
- position: absolute;
|
|
|
- left: 18rpx;
|
|
|
- top: 0;
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .goback {
|
|
|
- z-index: 100;
|
|
|
- width: 34rpx;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
+ .topcontent {
|
|
|
+ background-color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
.vheigh {
|
|
|
@@ -518,14 +414,17 @@
|
|
|
height: 276rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.ic-text {
|
|
|
margin: 0 60rpx 0 40rpx;
|
|
|
+
|
|
|
.ic-tubiao {
|
|
|
width: 27rpx;
|
|
|
height: 27rpx;
|
|
|
margin-top: 16rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
+
|
|
|
.ic-wen {
|
|
|
width: 121rpx;
|
|
|
height: 20rpx;
|
|
|
@@ -534,13 +433,16 @@
|
|
|
margin-top: 5rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.zhishi {
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
.zhishi-item {
|
|
|
- margin: 40rpx 38rpx auto ;
|
|
|
.zhishi-ic {
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
+
|
|
|
.zhishi-te {
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
@@ -549,29 +451,19 @@
|
|
|
}
|
|
|
|
|
|
.tongz {
|
|
|
- width: 690rpx;
|
|
|
height: 70rpx;
|
|
|
- margin: 32rpx auto 0;
|
|
|
- padding: 18rpx 30rpx 18rpx 24rpx;
|
|
|
+ margin: 0 30rpx 30rpx 30rpx;
|
|
|
+
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
-
|
|
|
- .tongz-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- width: 690rpx;
|
|
|
- height: 70rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ background-color: #F8F8FA;
|
|
|
|
|
|
.tongz-left {
|
|
|
- width: 640rpx;
|
|
|
+ .notice {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
|
|
|
.image-left {
|
|
|
width: 28rpx;
|
|
|
@@ -600,326 +492,153 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .navbar {
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
+ .popup-box {
|
|
|
+ width: 522rpx;
|
|
|
+ height: 605rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .navbar-item {
|
|
|
- margin-top: 42rpx;
|
|
|
- width: 25%;
|
|
|
+ .img {
|
|
|
+ position: relative;
|
|
|
+ top: -56rpx;
|
|
|
+ left: 0;
|
|
|
+ width: 522rpx;
|
|
|
+ height: 132rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .nitem-image {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- .nitem-font {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #0c1732;
|
|
|
+ image {
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ width: 450rpx;
|
|
|
+ height: 132rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .shingle {
|
|
|
- width: 750rpx;
|
|
|
- background: #f8f8f8;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 60rpx auto 0rpx;
|
|
|
- padding: 44rpx 50rpx 40rpx;
|
|
|
-
|
|
|
- .shingle-top {
|
|
|
- padding-left: 2rpx;
|
|
|
-
|
|
|
- .shingle-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #dc262b;
|
|
|
- }
|
|
|
|
|
|
- .shingle-btn {
|
|
|
- width: 250rpx;
|
|
|
- height: 50rpx;
|
|
|
- border: 2rpx solid #dc262b;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 0 16rpx;
|
|
|
- text-align: left;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #dc262b;
|
|
|
- line-height: 50rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- display: inline-block;
|
|
|
- padding-left: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .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;
|
|
|
|
|
|
- .shingle-main {
|
|
|
- margin: 20rpx auto;
|
|
|
- width: 650rpx;
|
|
|
- height: 206rpx;
|
|
|
- position: relative;
|
|
|
+ .delivery {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .shingle-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- width: 650rpx;
|
|
|
- height: 206rpx;
|
|
|
+ .title {}
|
|
|
|
|
|
image {
|
|
|
- width: 650rpx;
|
|
|
- height: 206rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ width: 172rpx;
|
|
|
+ height: 160rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .shinglem-title {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- justify-content: center;
|
|
|
- height: 70rpx;
|
|
|
+ .nocancel {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ }
|
|
|
|
|
|
- .tbg {
|
|
|
- height: 70rpx;
|
|
|
- width: 40rpx;
|
|
|
- }
|
|
|
+ .comfirm-box {
|
|
|
+ margin-top: 52rpx;
|
|
|
+ display: flex;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
|
|
|
- .shinglemt-center {
|
|
|
+ // justify-content: space-around;
|
|
|
+ .cancel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- background: rgba(220, 38, 43, 0.66);
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ border: 1px solid #dcc786;
|
|
|
+ border-radius: 38rpx;
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
}
|
|
|
|
|
|
- .address {
|
|
|
- width: 28rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .shingle-font {
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 70rpx;
|
|
|
- margin-left: 14rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shingle-mmain {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- margin-top: 30rpx;
|
|
|
-
|
|
|
- .smmain-item {
|
|
|
- width: 33%;
|
|
|
+ .comfirm {
|
|
|
+ margin-left: 32rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .smitem-top {
|
|
|
- text-align: center;
|
|
|
- width: 90%;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .smitem-bottom {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .people {
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .peopleitem {
|
|
|
- width: 24rpx;
|
|
|
- height: 34rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shu {
|
|
|
- width: 2rpx;
|
|
|
- height: 70rpx;
|
|
|
- background: #ffffff;
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
+ border-radius: 38px;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .right-bottom {
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 94rpx;
|
|
|
- height: 92rpx;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .shop {
|
|
|
- background: #ffffff;
|
|
|
- padding: 32rpx 30rpx 20rpx;
|
|
|
-
|
|
|
- .shop-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .product-list {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ line-height: 0;
|
|
|
+ align-items: stretch;
|
|
|
|
|
|
- .shop-title-icon {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .shop-title-font {
|
|
|
- margin-left: 20rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #303133;
|
|
|
- font-weight: bold;
|
|
|
+ .list-left {
|
|
|
+ .imgleft {
|
|
|
+ width: 306rpx;
|
|
|
+ height: 319rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .shop-main {
|
|
|
- margin: 20rpx auto 0;
|
|
|
- border-radius: 40rpx;
|
|
|
- width: 100%;
|
|
|
- height: 286rpx;
|
|
|
+ .list-right {
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .imgleft {
|
|
|
+ width: 366rpx;
|
|
|
+ height: 152rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .seckill-title {
|
|
|
- padding: 32rpx 30rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .seckill-left {
|
|
|
- justify-content: flex-start;
|
|
|
+ .bottom-box {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
|
|
- .seckill-inco {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
+ .bottom-title {
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .seckill-font {
|
|
|
- margin-left: 8rpx;
|
|
|
- font-size: 40rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .djs {
|
|
|
- margin-left: 12rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #dc262b;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .seckill-right {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .seckill-rfont {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .seckill-back {
|
|
|
- width: 10rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .product {
|
|
|
- background: #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .priduct-main {
|
|
|
- margin-top: 38rpx;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 32rpx;
|
|
|
-
|
|
|
- .priduct-item {
|
|
|
- width: 48%;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 12rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- &:nth-child(2n + 1) {
|
|
|
- margin-right: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .priduct-main-image {
|
|
|
- width: 100%;
|
|
|
- height: 330rpx;
|
|
|
- // background: red;
|
|
|
- border-radius: 3px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 12rpx 12rpx 0 0;
|
|
|
- }
|
|
|
+ .image {
|
|
|
+ width: 609rpx;
|
|
|
+ height: 31rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .priduct-main-name {
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .priduct-main-price {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 16rpx 12rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #fd3b39;
|
|
|
- }
|
|
|
+ .product-art-list {
|
|
|
+ .product-art-item {
|
|
|
+ .image-box {
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .cart-icon {
|
|
|
- image {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
+ .image {
|
|
|
+ width: 432rpx;
|
|
|
+ height: 432rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .product-detail {
|
|
|
+ margin: 30rpx;
|
|
|
+ height: 4em;
|
|
|
+ overflow: hidden;
|
|
|
+ text-indent: 2em;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|