123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344 |
- <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">
- <view class="shop-item flex" v-for="(item,index) in shopList" @click="$api.msg('功能建设中,敬请期待')">
- <image :src="'../../static/icon/sc0' + (index + 1) + '.png'" mode="" class="shop-img"></image>
- <view class="shop-name">
- {{item.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>
- </template>
- <script>
- 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 {
- tabbar: tabbar,
- current: 0,
- shareShow: false, //分享海报
- pageProportion: 0, //保存页面基于750宽度的比例
- swiperHeight: 0,
- checkid: 0,
- titleNViewBackground: '',
- longitude: 0, //经度
- latitude: 0, //纬度
- swiperCurrent: 0,
- swiperLength: 0,
- carouselList: [], //轮播列表
- bastList: [], //会员礼包
- shoplist: [], //商店列表
- page: 1,
- limit: 5,
- vipList: [], //vip商品
- firstList: [],
- goodList: [],
- shopList: [{
- sid: 0,
- name: "美食"
- },
- {
- sid: 0,
- name: "电影"
- },
- {
- sid: 0,
- name: "娱乐"
- },
- {
- sid: 0,
- name: "美发"
- },
- {
- sid: 0,
- name: "景点"
- },
- {
- sid: 0,
- name: "健身"
- },
- {
- sid: 0,
- name: "休闲"
- },
- {
- sid: 0,
- name: "美容"
- },
- {
- sid: 0,
- name: "民宿"
- },
- {
- sid: 0,
- name: "超市"
- }
- ]
- };
- },
- computed: {
- ...mapState(['loginInterceptor', 'baseURL']),
- ...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()
- // getVip({
- // page: 1,
- // limit: 3,
- // is_vip: 3
- // }).then(res => {
- // this.vipList = res.data
- // res.data.forEach(e => {
- // e.isVip = e.store_type ? "3" : "0"
- // })
- // console.log(res.data, 'vip商品');
- // })
- // 判断是否强制登录
- // if (!this.hasLogin) {
- // // 登录拦截
- // interceptor();
- // }
- this.loadData();
- this.getBargainList();
- },
- //下拉刷新
- 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']),
- 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: '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('暂未开通,敬请期待');
- } else {
- uni.navigateTo({
- url
- });
- }
- },
- 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));
- })
- .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() {
- uni.navigateTo({
- url: '/pages/product/search'
- });
- },
- // 点击触发领取优惠券
- setCoupons(item) {
- // 判断是否已经领取了优惠券
- let obj = this;
- uni.showModal({
- title: '领取提示',
- content: '是否领取优惠券',
- success(e) {
- if (e.confirm) {
- setCoupons({
- couponId: item.id
- }).then(e => {
- item.is_use = true;
- uni.showToast({
- title: '领取成功',
- type: 'top',
- duration: 2000
- });
- });
- }
- }
- });
- },
- //商品种类切换
- change(item) {
- let id = item;
- this.checkid = id;
- if (this.checkid == 1) {
- // console.log(1);
- this.detail = this.selected_detail;
- } else if (this.checkid == 2) {
- // console.log(2);
- this.detail = this.new_product;
- } else {
- this.detail = this.cheap_good;
- }
- },
- // 监听图片加载完成
- 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;
- },
- //详情页
- navToDetailPage(item) {
- let id = item.id;
- uni.navigateTo({
- url: '/pages/product/product?id=' + id + '&isVip=' + item.isVip
- });
- },
- // 轮播图跳转
- 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: #EEEFEE;
- }
- .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;
- }
- }
- }
- }
- </style>
|