1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408 |
- <template>
- <view class="container">
- <view class="carousel-section">
- <!-- 背景色区域 -->
- <!-- <view class="bg"></view> -->
- <!-- 标题栏和状态栏占位符 -->
- <!-- <view class="titleNview-placing"></view> -->
- <!-- 搜素栏 -->
- <view class="search flex">
- <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>
- </view>
- <swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
- :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="shop-list flex" style="padding-top: 40rpx;">
- <view class="shop-item flex" v-for="(item,index) in shopList"
- @click="navto('/pages/shop/shopList?id=' + item.id)">
- <image :src="item.pic" mode="" class="shop-img"></image>
- <view class="shop-name">
- {{item.cate_name}}
- </view>
- </view>
- </view>
- <!-- 商品列表 -->
- <view class="" style="background: #fff;margin-top: 20rpx;padding-bottom: 20rpx;">
- <view class="title-wrapper flex">
- <image src="../../static/icon/shop-logo.png" mode=""></image>
- <view class="">礼包商品</view>
- <view class="title-b">超值体验</view>
- </view>
- <view class="gift-info">
- <view class="" style="padding-top: 20rpx;font-weight: bold;font-size: 32rpx;">
- 最强商家联盟
- </view>
- <view class="">
- 买到就是赚到
- </view>
- </view>
- <view class="gift-good-list p-r">
- <view class="gift-list p-a flex f-j-s">
- <view class="gift-item flex f-d-c f-j-c" v-for="item in goodList"
- @click="navto('/pages/product/product?id=' + item.id)">
- <image :src="item.image" mode=""></image>
- <view class="gift-name clamp">
- {{item.store_name}}
- </view>
- <view class="gift-price">
- ¥{{item.price}}
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 门店列表 -->
- <view class="" style="height: 20rpx;"></view>
- <view class="djq-wrap flex f-ai-s" v-for="storeitem in storeList"
- @click="navto('/pages/shop/shopDetail?id=' + storeitem.id )">
- <image :src="storeitem.image" mode="" class="djq-img"></image>
- <view class="djq-right pl20">
- <view class="djq-tit flex f-j-sb f-ai-s">
- <view class="djq-name clamp">
- {{storeitem.name}}
- </view>
- <view class="djq-dis">
- <image src="../../static/index/index10.png" mode=""></image>
- 距离{{(storeitem.range*1 > 1000 )?( storeitem.range + 'KM'):(storeitem.range*1 + 'm')}}
- </view>
- </view>
- <view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
- <view class="djq-dz clamp2">
- {{storeitem.detailed_address}}
- </view>
- <view class="djq-hd flex f-j-sb">
- <view class="buy-info">
- 1425人已购买
- </view>
- <view class="hd-btn">
- <image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
- @click.stop="makeCall(storeitem.phone)"></image>
- <image src="../../static/icon/dh.png" mode="" @click.stop="dh(storeitem)"></image>
- </view>
- </view>
- </view>
- <view class="" style="padding: 10rpx 0 0 0;" v-if="storeitem.coupon.length > 0">
- <view class="left-btm flex f-j-s" v-for="qitem in storeitem.coupon">
- <view class="j-logo">
- 券
- </view>
- <view class="j-price">
- <text>¥</text>{{qitem.price}}
- </view>
- <view class="j-zk">
- {{(((qitem.price*10)/(qitem.ot_price*1)).toFixed(1))}}折
- </view>
- <view class="j-name">
- {{qitem.store_name}}
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import weixinObj from "@/plugin/jweixin-module/index.js";
- import {
- store_cate,
- getStoreList
- } from '@/api/shop.js'
- import {
- lookSubpoints,
- lookOneself
- } from '../../api/user.js';
- import seckill from '../../components/seckill/seckill.vue';
- import {
- loadIndexs,
- getVip
- } from '@/api/index.js';
- import {
- getUserInfo,
- spread
- } from '@/api/user.js';
- import {
- setCoupons
- } from '@/api/functionalUnit.js';
- import {
- getBargainList,
- getProducts
- } from '@/api/product.js';
- import {
- interceptor
- } from '@/utils/loginUtils';
- import {
- mapState,
- mapMutations
- } from 'vuex';
- import {
- tabbar
- } from '@/utils/tabbar.js';
- // #ifdef H5
- import {
- weixindata,
- shareLoad
- } from '@/utils/wxAuthorized';
- // #endif
- export default {
- components: {
- seckill
- },
- data() {
- return {
- storeList: [],
- tabbar: tabbar,
- current: 0,
- shareShow: false, //分享海报
- pageProportion: 0, //保存页面基于750宽度的比例
- swiperHeight: 0,
- checkid: 0,
- titleNViewBackground: '',
- swiperCurrent: 0,
- swiperLength: 0,
- carouselList: [], //轮播列表
- bastList: [], //会员礼包
- page: 1,
- limit: 5,
- firstList: [],
- goodList: [],
- shopList: []
- };
- },
- computed: {
- ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
- ...mapState('user', ['hasLogin', 'userInfo'])
- },
- onLoad: function(option) {
- this.getaddress();
- // #ifdef MP
- if (option.scene) {
- // 存储小程序邀请人
- uni.setStorage({
- key: 'spread_code',
- data: option.scene
- });
- }
- // #endif
- // #ifdef H5
- this.IndexShare();
- //#endif
- },
- onShow: function() {
- this.getGoodList()
- this.loadData();
- this.getBargainList();
- this.getStoreCate()
- },
- //下拉刷新
- onPullDownRefresh() {
- this.loadData();
- },
- // #ifndef MP
- // 监听导航栏输入框点击事件
- onNavigationBarSearchInputClicked(e) {
- //跳转到搜索页面
- this.clickSearch();
- },
- //点击导航栏 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']),
- // 计算距离
- space(lat1, lng1, lat2, lng2) {
- console.log(lat1, lng1, lat2, lng2);
- var radLat1 = (lat1 * Math.PI) / 180.0;
- var radLat2 = (lat2 * Math.PI) / 180.0;
- var a = radLat1 - radLat2;
- var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
- var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
- .pow(Math.sin(b / 2), 2)));
- s = s * 6378.137;
- s = Math.round(s * 10000) / 10000;
- // return s * 1000; // 单位米
- return s //单位km
- },
- // 拨打电话
- makeCall(phone) {
- uni.makePhoneCall({
- phoneNumber: phone //仅为示例
- });
- },
- // 导航
- dh(item) {
- // #ifdef H5
- weixindata().then(wxOjb => {
- console.log(wxOjb, '获取微信');
- wxOjb.openLocation({
- latitude: item.latitude, // 纬度,浮点数,范围为90 ~ -90
- longitude: item.longitude, // 经度,浮点数,范围为180 ~ -180。
- name: item.name, // 位置名
- address: item.detailed_address, // 地址详情说明
- scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
- infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
- });
- });
- // #endif
- },
- // 获取商店列表
- getStoreList() {
- let obj = this
- //getStoreList( cate_id=1
- getStoreList({
- latitude: obj.latitude,
- longitude: obj.longitude
- }).then(res => {
- console.log(res)
- obj.storeList = res.data.list
- // obj.storeList = res.data.list.map(item => {
- // item.space = obj.space(obj.latitude, obj.longitude, item.latitude, item.longitude)
- // return item
- // })
- })
- },
- // 获取店铺分类
- getStoreCate() {
- store_cate().then(res => {
- console.log(res)
- this.shopList = res.data
- })
- },
- getLocation() {
- uni.getLocation({
- type: 'gcj02',
- success(e) {
- console.log(e, 'dingwei')
- c
- }
- })
- },
- getGoodList() {
- let obj = this
- getProducts({
- page: 1,
- limit: 50,
- cid: 1
- }).then(res => {
- console.log(res, 'libao')
- obj.goodList = res.data
- })
- },
- navto(url) {
- uni.navigateTo({
- url,
- fail() {
- uni.switchTab({
- url
- })
- }
- })
- },
- // #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: this.baseURL + '/index/static/img/logo.jpg'
- };
- console.log(data, '分享数据');
- shareLoad(data);
- },
- // #endif
- getaddress() {
- console.log('dizhi+++++++++++');
- let obj = this;
- // #ifdef H5
- weixindata().then(wxOjb => {
- console.log(wxOjb, '获取微信');
- wxOjb.getLocation({
- type: 'gcj02',
- success: res => {
- console.log(res, 123456);
- obj.setLat(res.latitude);
- obj.setLon(res.longitude);
- obj.getStoreList()
- },
- fail: err => {
- console.log(err, 'shi+++++++++++++++');
- openMap().then(e => {
- this.getaddress();
- });
- }
- });
- });
- // #endif
- },
- navTo(url) {
- if (url == '') {
- this.$api.msg('暂未开通,敬请期待');
- } else {
- uni.navigateTo({
- url
- });
- }
- },
- getBargainList() {
- let that = this;
- getBargainList({
- page: that.page,
- limit: that.limit
- })
- .then(function(res) {
- // that.$set(that, 'bargainlist', res.data.slice(0, 2));
- })
- .catch(res => {
- console.log(res, 'getBargainList');
- });
- },
- // 點擊搜索框
- clickSearch() {
- uni.navigateTo({
- url: '/pages/product/search'
- });
- },
- // 监听图片加载完成
- onImageError(key, index) {
- this[key][index].image = '/static/error/errorImage.jpg';
- },
- // 请求载入数据
- async loadData() {
- loadIndexs({})
- .then(({
- data
- }) => {
- let goods = data.info;
- console.log(goods, '商品信息');
- this.carouselList = data.banner;
- 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
- console.log(item.wap_url.indexOf('http'), 'banner');
- if (item.wap_url.indexOf('http') >= 0) {
- window.location.href = item.wap_url;
- }
- // #endif
- //测试数据没有写id,用title代替
- uni.navigateTo({
- url: item.wap_url
- });
- }
- }
- };
- </script>
- <style lang="scss">
- page {
- background: #f8f6f9;
- }
- .carousel-section {
- position: relative;
- // padding-top: 10px;
- .bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 750rpx;
- height: 378rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .titleNview-placing {
- height: var(--status-bar-height);
- box-sizing: content-box;
- }
- .search {
- justify-content: flex-start;
- padding: 10rpx 32rpx 20rpx;
- align-items: center;
- background-color: #fff;
- .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;
- padding-left: 10rpx;
- }
- .shop-jt {
- margin-left: 8rpx;
- width: 16rpx;
- height: 10rpx;
- }
- .input-box {
- margin-left: 10rpx;
- position: relative;
- z-index: 99;
- width: 710rpx;
- height: 60rpx;
- background: #EEEEEE;
- border-radius: 30rpx;
- .input-content {
- position: relative;
- z-index: 11;
- border-radius: 99rpx;
- flex-grow: 1;
- padding: 5rpx 30rpx;
- background: #EEEEEE;
- .iconsearch {
- font-size: 50rpx;
- color: #CBCBCB;
- }
- .input {
- margin-left: 19rpx;
- flex-grow: 1;
- color: #CBCBCB;
- input {
- font-size: 28rpx;
- color: #CBCBCB;
- }
- }
- }
- .input-button {
- padding-left: 20rpx;
- font-size: $font-base;
- height: 100%;
- }
- }
- }
- }
- .carousel {
- position: relative;
- z-index: 3;
- width: 100%;
- height: 360rpx;
- background-color: #fff;
- .carousel-item {
- width: 100%;
- height: 100%;
- padding: 0 28rpx;
- overflow: hidden;
- }
- image {
- width: 100%;
- height: 100%;
- border-radius: $border-radius-sm;
- }
- }
- .navbar {
- position: relative;
- z-index: 2;
- padding: 0 50rpx;
- margin-top: -200rpx;
- width: 750rpx;
- height: 420rpx;
- background: #ffffff;
- border-radius: 40rpx;
- .navbar-box {
- padding-top: 250rpx;
- .navbar-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 20%;
- .nitem-image {
- width: 90rpx;
- height: 90rpx;
- }
- .nitem-font {
- margin-top: 22rpx;
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #000000;
- }
- }
- }
- }
- .jx {
- background: #fff;
- width: 750rpx;
- }
- .jx-box {
- background: #fff;
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 750rpx;
- .jx-box-title {
- margin: 50rpx 0;
- width: 610rpx;
- height: 30rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .jx-box-img {
- width: 750rpx;
- height: 220rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .cai {
- display: flex;
- justify-content: center;
- align-items: center;
- padding-bottom: 20rpx;
- font-size: 28rpx;
- font-weight: 500;
- color: #999999;
- }
- .jx-box-content {
- display: flex;
- .content-left {
- margin: 20rpx 15rpx;
- width: 236rpx;
- height: 236rpx;
- background: #E2E2E2;
- border-radius: 10rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .content-right {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- .shop-name {
- width: 382rpx;
- font-size: 32rpx;
- font-weight: bold;
- color: #333333;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- .shop-content {
- width: 455rpx;
- display: flex;
- justify-content: space-between;
- .shop-content-left {
- display: flex;
- flex-direction: column;
- .price-box {
- display: flex;
- align-items: center;
- .yuan-price {
- font-size: 26rpx;
- font-weight: 500;
- text-decoration: line-through;
- color: #999999;
- }
- image {
- margin: 0 10rpx;
- width: 16rpx;
- height: 18rpx;
- }
- .j-price {
- font-size: 24rpx;
- font-weight: bold;
- color: #B59467;
- }
- }
- .price-x {
- font-size: 36rpx;
- font-weight: bold;
- color: #FF4C4C;
- }
- }
- .shop-content-right {
- margin-top: 20rpx;
- align-items: center;
- text-align: center;
- width: 137rpx;
- height: 52rpx;
- font-size: 26rpx;
- font-weight: 500;
- color: #F8DABA;
- background: #303030;
- border-radius: 26rpx;
- line-height: 52rpx;
- }
- }
- }
- }
- .product-box {
- margin-top: 20rpx;
- background: #ffffff;
- padding: 26rpx 30rpx 20rpx;
- .product-title {
- display: flex;
- align-items: center;
- justify-content: center;
- .pt-image {
- width: 36rpx;
- height: 36rpx;
- }
- .bb {
- width: 120rpx;
- height: 1rpx;
- background: #989898;
- }
- .pt-title {
- margin: 0 28rpx;
- font-size: 30rpx;
- font-weight: 500;
- color: #363636;
- }
- .pt-tip {
- margin-left: 16rpx;
- font-size: 20rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #95a0b1;
- }
- }
- .hotgoods {
- margin-top: 38rpx;
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- padding: 0 0 30rpx;
- .hotgoods-item {
- width: 44%;
- background: #FFFFFF;
- margin: 20rpx;
- box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
- border-radius: 10px;
- .image-wrapper {
- width: 100%;
- height: 330rpx;
- 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: 20rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- }
- .hotgoods-box {
- height: 100rpx;
- }
- .titlee {
- margin-left: 15rpx;
- font-size: 26rpx;
- font-weight: 500;
- color: #666666;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .hot-price {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- padding: 14rpx 0 30rpx;
- .hotPrice-box {
- width: 70rpx;
- height: 28rpx;
- background: linear-gradient(90deg, #c79a4c, #f9df7f);
- border-radius: 5rpx;
- text-align: center;
- line-height: 28rpx;
- font-size: 20rpx;
- font-weight: 400;
- color: #ffffff;
- }
- .price {
- margin-left: 10rpx;
- font-size: 36rpx;
- color: #ff0000;
- font-weight: 500;
- }
- .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;
- }
- }
- }
- }
- }
- }
- .shop {
- margin-top: 20rpx;
- background: #ffffff;
- padding: 0 12rpx;
- .shop-title {
- padding: 30rpx 0 20rpx;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #e3e6e7;
- .shop-item {
- width: 25%;
- display: flex;
- align-items: center;
- justify-content: center;
- .sitem-font {
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- }
- .jt-down {
- width: 10rpx;
- height: 8rpx;
- margin-left: 12rpx;
- }
- }
- }
- }
- .shop-main {
- padding: 32rpx 18rpx 0 12rpx;
- align-items: flex-start;
- justify-content: flex-start;
- .main-left {
- width: 180rpx;
- height: 180rpx;
- border-radius: 10rpx;
- }
- .main-right {
- width: 500rpx;
- justify-content: space-between;
- align-items: flex-start;
- margin-left: 20rpx;
- padding: 13rpx 0 35rpx;
- border-bottom: 1px solid #eaeced;
- .shopm-info {
- max-width: 60%;
- line-height: 1;
- .shopm-title {
- display: flex;
- justify-content: flex-start;
- .shopmt-font {
- font-size: 34rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- }
- .shopmt-good {
- margin-left: 6rpx;
- width: 30rpx;
- height: 30rpx;
- border: 1px solid #ff4c4c;
- border-radius: 5rpx;
- font-size: 20rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #ff4c4c;
- text-align: center;
- line-height: 30rpx;
- }
- }
- .address {
- margin-top: 16rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- }
- .shopmt-tip {
- position: relative;
- display: inline-block;
- flex-grow: 0;
- margin-top: 52rpx;
- padding: 8rpx;
- background: #fcf3f0;
- border-radius: 16rpx 16rpx 16rpx 0px;
- font-size: 20rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #ff440d;
- }
- }
- .right {
- height: 100%;
- margin-top: 5rpx;
- display: flex;
- flex-direction: column;
- .mright-top {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .mrt-image {
- width: 20rpx;
- height: 28rpx;
- }
- .mrt-font {
- margin-left: 8rpx;
- font-size: 22rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- }
- }
- .mright-bottom {
- margin-top: 80rpx;
- display: flex;
- justify-content: flex-end;
- .mrb-item {
- width: 46rpx;
- height: 46rpx;
- margin-left: 14rpx;
- }
- }
- }
- }
- }
- .good-list {
- width: 750rpx;
- background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
- padding: 0 30rpx 30rpx;
- .good {
- width: 690rpx;
- height: 276rpx;
- background: #FFFFFF;
- box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
- border-radius: 10rpx;
- margin: auto;
- padding: 20rpx 15rpx;
- margin-bottom: 20rpx;
- &:last-of-type {
- margin-bottom: 0rpx;
- }
- .good-img {
- flex-shrink: 0;
- width: 236rpx;
- height: 236rpx;
- border-radius: 10rpx;
- margin-right: 22rpx;
- image {
- width: 236rpx;
- height: 236rpx;
- border-radius: 10rpx;
- }
- }
- .good-info {
- flex-grow: 1;
- height: 100%;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
- .good-name {
- font-size: 32rpx;
- font-weight: bold;
- padding-top: 10rpx;
- color: #333333;
- }
- .good-price {
- width: 100%;
- image {
- width: 14rpx;
- margin: 0 6rpx 0 10rpx;
- }
- .old-price {
- .old-left {
- font-size: 26rpx;
- font-weight: 500;
- text-decoration: line-through;
- color: #999999;
- }
- .old-right {
- font-size: 24rpx;
- font-weight: bold;
- color: #B59467;
- }
- }
- .new-price {
- width: 100%;
- font-size: 36rpx;
- font-weight: bold;
- color: #FF4C4C;
- justify-content: space-between;
- .good-tip {
- display: inline-block;
- padding: 0 20rpx 0 17rpx;
- min-width: 160rpx;
- text-align: center;
- line-height: 40rpx;
- background: #303030;
- font-size: 24rpx;
- font-weight: 500;
- color: #F8DABA;
- border-radius: 10rpx;
- position: relative;
- &::before {
- content: '';
- display: inline-block;
- height: 17rpx;
- width: 17rpx;
- background-color: #fff;
- border-radius: 50%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: -9rpx;
- margin: auto;
- }
- &::after {
- content: '';
- display: inline-block;
- height: 17rpx;
- width: 17rpx;
- background-color: #fff;
- border-radius: 50%;
- position: absolute;
- top: 0;
- bottom: 0;
- right: -9rpx;
- margin: auto;
- }
- }
- }
- }
- }
- }
- }
- .title-wrapper {
- padding-left: 20rpx;
- justify-content: flex-start;
- align-items: center;
- height: 86rpx;
- line-height: 86rpx;
- width: 690rpx;
- margin: auto;
- image {
- width: 36rpx;
- height: 36rpx;
- background: linear-gradient(43deg, #ffc063, #ffa163);
- border-radius: 50%;
- }
- view {
- padding-left: 10rpx;
- font-size: 32rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #242424;
- }
- .title-b {
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #8b8b8b;
- }
- }
- .shop-list {
- padding-top: 20rpx;
- flex-wrap: wrap;
- background-color: #fff;
- .shop-item {
- margin-bottom: 20rpx;
- flex-direction: column;
- width: 20%;
- height: 100rpx;
- image {
- width: 60rpx;
- height: 58rpx;
- }
- }
- }
- .gift-info {
- width: 690rpx;
- height: 155rpx;
- background: linear-gradient(43deg, #FFB242, #FF944D);
- border-radius: 12rpx 12rpx 0px 0px;
- margin: auto;
- color: #fff;
- font-size: 24rpx;
- font-weight: 400;
- color: #FFFFFF;
- view {
- padding-left: 28rpx;
- }
- }
- .gift-good-list {
- width: 690rpx;
- height: 243rpx;
- background: #f4f4f4;
- border-radius: 12rpx;
- margin: auto;
- .gift-list {
- width: 670rpx;
- height: 286rpx;
- background: #fff;
- border-radius: 12px;
- // margin: -54rpx auto 0;
- top: -54rpx;
- left: 0;
- right: 0;
- margin: auto;
- .gift-item {
- background-color: #fff;
- width: 223rpx;
- height: 100%;
- border-right: 1rpx solid #D6D7DC;
- &:first-of-type {
- border-radius: 12rpx 0 0 12rpx;
- }
- &:last-of-type {
- margin-right: 0;
- }
- image {
- width: 160rpx;
- height: 160rpx;
- }
- .gift-name {
- font-size: 22rpx;
- font-weight: bold;
- color: #3F3F3F;
- line-height: 34px;
- }
- .gift-price {
- font-size: 28rpx;
- font-weight: bold;
- color: #FF4C4C;
- }
- }
- }
- }
- .djq-wrap {
- width: 701rpx;
- // height: 255rpx;
- background: #FFFFFF;
- box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
- border-radius: 20rpx;
- margin: 0 auto 20rpx;
- padding: 23rpx 22rpx;
- &:last-of-type {
- margin-bottom: 0;
- }
- .djq-img {
- flex-shrink: 0;
- width: 150rpx;
- height: 150rpx;
- border-radius: 10rpx;
- }
- .djq-right {
- flex-grow: 1;
- .djq-tit {
- font-size: 34rpx;
- font-weight: bold;
- color: #333333;
- line-height: 52rpx;
- .djq-name {
- max-width: 300rpx;
- }
- .djq-dis {
- flex-shrink: 0;
- image {
- width: 20rpx;
- height: 28rpx;
- margin-right: 10rpx;
- }
- font-size: 22rpx;
- font-weight: 500;
- color: #666666;
- }
- }
- .djq-dz {
- width: 100%;
- font-size: 24rpx;
- font-weight: 500;
- color: #666666;
- }
- .djq-hd {
- width: 100%;
- // border-bottom: 1rpx solid #EAECED;
- .buy-info {
- display: inline-block;
- height: 32rpx;
- border-radius: 16rpx 16rpx 16rpx 0px;
- line-height: 32rpx;
- font-size: 20rpx;
- font-weight: 500;
- color: #FF440D;
- padding: 0 15rpx;
- background-color: #fcf3f0;
- }
- .hd-btn {
- image {
- width: 46rpx;
- height: 46rpx;
- }
- }
- }
- }
- }
- .left-btm {
- height: 66rpx;
- .j-logo {
- width: 32rpx;
- line-height: 33rpx;
- background: linear-gradient(-48deg, #FFA30B, #FFD158);
- border-radius: 13rpx;
- font-size: 21rpx;
- font-weight: 500;
- color: #FFFFFF;
- text-align: center;
- }
- .j-price {
- font-size: 27rpx;
- font-weight: bold;
- color: #FF4C4C;
- margin: 0 10rpx 0 5rpx;
- }
- .j-zk {
- height: 31rpx;
- border: 1rpx solid #FF4C4C;
- border-radius: 7rpx;
- line-height: 31rpx;
- padding: 0 8rpx;
- font-size: 20rpx;
- font-weight: bold;
- color: #FF4C4C;
- margin-right: 5rpx;
- }
- .j-name {
- font-size: 23rpx;
- font-weight: bold;
- color: #333333;
- }
- }
- </style>
|