|
|
@@ -1,9 +1,8 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 轮播图 start -->
|
|
|
- <swiper class="top-swiper" autoplay="true" duration="400" interval="10000" @change="swiperChange">
|
|
|
- <swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"
|
|
|
- @click="navto(item.url)">
|
|
|
+ <swiper class="top-swiper" autoplay="true" duration="400" interval="10000">
|
|
|
+ <swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item" @click="navto(item.url)">
|
|
|
<image class="topImg" :src="item.pic" mode="scaleToFill" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
@@ -11,19 +10,16 @@
|
|
|
<view class="user-section">
|
|
|
<view class="user-info-box">
|
|
|
<view class="detail" @click="navTo('/pages/set/userinfo')">
|
|
|
- <view class="portrait-box">
|
|
|
- <image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image>
|
|
|
- </view>
|
|
|
+ <view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
|
|
|
<view class="info-box">
|
|
|
<view class="username">{{ userInfo.nickname || '游客' }}</view>
|
|
|
<view class="font-size-sm">升级会员享收益</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="config text-white ">
|
|
|
- 某娘粉丝
|
|
|
- </view>
|
|
|
+ <view class="config text-white ">某娘粉丝</view>
|
|
|
+ s
|
|
|
</view>
|
|
|
- <view class="upVipBox flex margin-t-20">
|
|
|
+ <view class="upVipBox flex margin-t-20" @click="navto(item.url)">
|
|
|
<image class="upViewTip" src="../../static/img/indexUpVipIcon.png" mode="scaleToFill"></image>
|
|
|
<view class="flex-grow-true padding-c-10 flex">
|
|
|
<view>
|
|
|
@@ -37,18 +33,15 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <swiper indicator-dots indicator-color='rgba(255, 255, 255, .5)' indicator-active-color='#FFFFFF'
|
|
|
- class="content-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
+ <swiper indicator-dots indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#FFFFFF" class="content-swiper" autoplay="true" duration="400" interval="5000">
|
|
|
<swiper-item v-for="(item, index) in activity" :key="index" class="nav" @click="navto(item.url)">
|
|
|
<image class="contentImg" :src="item.pic" mode="scaleToFill" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<view class="cate-section flex">
|
|
|
<view class="cate-item flex" v-for="item in menus" @click="navto(item.url)">
|
|
|
- <view class="img-wrapper flex">
|
|
|
- <image :src="item.pic" mode=" scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <view class="item-title">{{item.name}}</view>
|
|
|
+ <view class="img-wrapper flex"><image :src="item.pic" mode=" scaleToFill"></image></view>
|
|
|
+ <view class="item-title">{{ item.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="activty padding-b-20">
|
|
|
@@ -57,42 +50,24 @@
|
|
|
<view class="margin-c-20">推荐商品</view>
|
|
|
<image class="action-title-icon" src="../../static/img/indexTitleRight.png" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
- <view class="action-title-tip">
|
|
|
- 悦享套餐 格调生活
|
|
|
- </view>
|
|
|
+ <view class="action-title-tip">悦享套餐 格调生活</view>
|
|
|
</view>
|
|
|
- <view class="productList" v-for="(item,ind) in hotgoods">
|
|
|
- <view class="tipLeft text-white font-size-base">
|
|
|
- 立省¥{{item.ot_price-item.price}}
|
|
|
- </view>
|
|
|
+ <view class="productList" v-for="(item, ind) in hotgoods">
|
|
|
+ <view class="tipLeft text-white font-size-base">立省¥{{ item.ot_price - item.price }}</view>
|
|
|
<image class="productImg" :src="item.image" mode="scaleToFill"></image>
|
|
|
<view class="padding-c-20 padding-t-10 padding-b-20">
|
|
|
- <view class="product-name clamp">
|
|
|
- {{item.store_name}}
|
|
|
- </view>
|
|
|
+ <view class="product-name clamp">{{ item.store_name }}</view>
|
|
|
<view class="flex padding-t-10">
|
|
|
- <view class="mask">
|
|
|
- {{item.store_info}}
|
|
|
- </view>
|
|
|
- <view class="sales" v-if="item.sales>0">
|
|
|
- 已售{{item.sales+item.unit_name}}
|
|
|
- </view>
|
|
|
+ <view class="mask">{{ item.store_info }}</view>
|
|
|
+ <view class="sales" v-if="item.sales > 0">已售{{ item.sales + item.unit_name }}</view>
|
|
|
</view>
|
|
|
<view class="flex padding-t-10">
|
|
|
<view class="flex money">
|
|
|
- <view class="payMoney font-size-sm">
|
|
|
- ¥
|
|
|
- </view>
|
|
|
- <view class="payMoney font-size-lg">
|
|
|
- {{item.price}}
|
|
|
- </view>
|
|
|
- <view class="oldMoney margin-l-10">
|
|
|
- {{item.ot_price}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="buttomPlay text-white" @click.stop="navto('/pages/')">
|
|
|
- 立即抢购
|
|
|
+ <view class="payMoney font-size-sm">¥</view>
|
|
|
+ <view class="payMoney font-size-lg">{{ item.price }}</view>
|
|
|
+ <view class="oldMoney margin-l-10">{{ item.ot_price }}</view>
|
|
|
</view>
|
|
|
+ <view class="buttomPlay text-white" @click.stop="navto('/pages/product/product?id=' + item.id)">立即抢购</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -100,376 +75,361 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- loadIndexs,
|
|
|
- } from '@/api/index.js';
|
|
|
- import {
|
|
|
- getUserInfo
|
|
|
- } from '@/api/user.js';
|
|
|
- import {
|
|
|
- interceptor
|
|
|
- } from '@/utils/loginUtils';
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
+import { loadIndexs } from '@/api/index.js';
|
|
|
+import { getUserInfo } from '@/api/user.js';
|
|
|
+import { interceptor } from '@/utils/loginUtils';
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 轮播图
|
|
|
- bannerList: [],
|
|
|
- // 中间轮播图
|
|
|
- activity: [],
|
|
|
- // 金刚区
|
|
|
- menus: [],
|
|
|
- // 首页推荐
|
|
|
- hotgoods: []
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['loginInterceptor']),
|
|
|
- ...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng', 'hasLogin'])
|
|
|
- },
|
|
|
- async onLoad(option) {
|
|
|
- let obj = this;
|
|
|
- // #ifndef MP
|
|
|
- if (option.spread) {
|
|
|
- // 存储其他邀请人
|
|
|
- uni.setStorageSync('spread', option.spread);
|
|
|
- }
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- if (option.scene) {
|
|
|
- // 存储小程序邀请人
|
|
|
- uni.setStorage({
|
|
|
- key: 'spread_code',
|
|
|
- data: option.scene
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 轮播图
|
|
|
+ bannerList: [],
|
|
|
+ // 中间轮播图
|
|
|
+ activity: [],
|
|
|
+ // 金刚区
|
|
|
+ menus: [],
|
|
|
+ // 首页推荐
|
|
|
+ hotgoods: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['loginInterceptor']),
|
|
|
+ ...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng', 'hasLogin'])
|
|
|
+ },
|
|
|
+ async onLoad(option) {
|
|
|
+ let obj = this;
|
|
|
+ // #ifndef MP
|
|
|
+ if (option.spread) {
|
|
|
+ // 存储其他邀请人
|
|
|
+ uni.setStorageSync('spread', option.spread);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ if (option.scene) {
|
|
|
+ // 存储小程序邀请人
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'spread_code',
|
|
|
+ data: option.scene
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ //获取当前位置
|
|
|
+ await this.loadData();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 判断是否强制登录
|
|
|
+ if (this.loginInterceptor && !this.hasLogin) {
|
|
|
+ // 登录拦截
|
|
|
+ interceptor();
|
|
|
+ }
|
|
|
+ if (this.userInfo.uid) {
|
|
|
+ console.log(this.userInfo);
|
|
|
+ getUserInfo({})
|
|
|
+ .then(({ data }) => {
|
|
|
+ this.setUserInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
});
|
|
|
- }
|
|
|
- // #endif
|
|
|
- //获取当前位置
|
|
|
- await this.loadData();
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 判断是否强制登录
|
|
|
- if (this.loginInterceptor && !this.hasLogin) {
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- }
|
|
|
- if (this.userInfo.uid) {
|
|
|
- console.log(this.userInfo);
|
|
|
- getUserInfo({})
|
|
|
- .then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- this.setUserInfo(data);
|
|
|
- if (this.userInfo.store_info.length != 0) {
|
|
|
- this.isAdmin = true;
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- onShareAppMessage(options) {
|
|
|
- // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
- let pages = getCurrentPages(); //获取加载的页面
|
|
|
- let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
- let url = currentPage.route; //当前页面url
|
|
|
- let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
- let shareObj = {
|
|
|
- // title: '子臣餐饮数字化服务平台', // 默认是小程序的名称(可以写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 为详细失败信息
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ onShareAppMessage(options) {
|
|
|
+ // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
+ let pages = getCurrentPages(); //获取加载的页面
|
|
|
+ let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
+ let url = currentPage.route; //当前页面url
|
|
|
+ let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
+ let shareObj = {
|
|
|
+ // title: '子臣餐饮数字化服务平台', // 默认是小程序的名称(可以写slogan等)
|
|
|
+ path: url + '?scene=' + this.userInfo.uid, // 默认是当前页面,必须是以‘/’开头的完整路径
|
|
|
+ imageUrl: '',
|
|
|
+ success: function(res) {
|
|
|
+ // 转发成功之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:ok') {
|
|
|
}
|
|
|
- };
|
|
|
- return shareObj;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations('user', ['setUserInfo']),
|
|
|
- navTo(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
- });
|
|
|
- },
|
|
|
- // 點擊搜索框
|
|
|
- clickSearch() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/search'
|
|
|
- });
|
|
|
- },
|
|
|
- // 请求载入数据
|
|
|
- async loadData() {
|
|
|
- loadIndexs({})
|
|
|
- .then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- // banner轮播图
|
|
|
- this.bannerList = data.banner;
|
|
|
- // 中间轮播图
|
|
|
- this.activity = data.activity;
|
|
|
- // 金刚区
|
|
|
- this.menus = data.menus;
|
|
|
- // 商品推荐
|
|
|
- this.hotgoods = data.info.bastList;
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
},
|
|
|
- // 轮播图跳转
|
|
|
- navto(item) {
|
|
|
- // #ifdef H5
|
|
|
- console.log(url.indexOf('http'), 'banner');
|
|
|
- if (url.indexOf('http') >= 0) {
|
|
|
- window.location.href = url;
|
|
|
+ fail: function() {
|
|
|
+ // 转发失败之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
+ // 用户取消转发
|
|
|
+ } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
+ // 转发失败,其中 detail message 为详细失败信息
|
|
|
}
|
|
|
- // #endif
|
|
|
- //测试数据没有写id,用title代替
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return shareObj;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo']),
|
|
|
+ navTo(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 點擊搜索框
|
|
|
+ clickSearch() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/search'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 请求载入数据
|
|
|
+ async loadData() {
|
|
|
+ loadIndexs({})
|
|
|
+ .then(({ data }) => {
|
|
|
+ // banner轮播图
|
|
|
+ this.bannerList = data.banner;
|
|
|
+ // 中间轮播图
|
|
|
+ this.activity = data.activity;
|
|
|
+ // 金刚区
|
|
|
+ this.menus = data.menus;
|
|
|
+ // 商品推荐
|
|
|
+ this.hotgoods = data.info.bastList;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
});
|
|
|
- },
|
|
|
+ },
|
|
|
+ // 轮播图跳转
|
|
|
+ navto(url) {
|
|
|
+ // #ifdef H5
|
|
|
+ console.log(url.indexOf('http'), 'banner');
|
|
|
+ if (url.indexOf('http') >= 0) {
|
|
|
+ window.location.href = url;
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ //测试数据没有写id,用title代替
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .container {
|
|
|
- height: 100%;
|
|
|
- background-color: $page-color-base;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- }
|
|
|
+.container {
|
|
|
+ height: 100%;
|
|
|
+ background-color: $page-color-base;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+}
|
|
|
|
|
|
- .content-box {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.content-box {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .user-section {
|
|
|
- position: relative;
|
|
|
- width: 690rpx;
|
|
|
- margin: 0 30rpx;
|
|
|
- margin-top: -100rpx;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
+.user-section {
|
|
|
+ position: relative;
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ margin-top: -100rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
|
- .upVipBox {
|
|
|
- padding: 12rpx;
|
|
|
- background-color: #F5F5F5;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-weight: bold;
|
|
|
+ .upVipBox {
|
|
|
+ padding: 12rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
- .upViewTip {
|
|
|
- height: 78rpx;
|
|
|
- width: 78rpx;
|
|
|
- }
|
|
|
+ .upViewTip {
|
|
|
+ height: 78rpx;
|
|
|
+ width: 78rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .user-info-box {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- z-index: 10;
|
|
|
+ .user-info-box {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ z-index: 10;
|
|
|
|
|
|
- .detail {
|
|
|
- display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
+ .detail {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .portrait-box {
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
+ .portrait-box {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
|
|
|
- .portrait {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 5rpx solid #fff;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+ .portrait {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 5rpx solid #fff;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .info-box {
|
|
|
- margin: auto 20rpx;
|
|
|
- color: $font-color-dark;
|
|
|
+ .info-box {
|
|
|
+ margin: auto 20rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
|
|
|
- .username {
|
|
|
- font-size: $font-lg;
|
|
|
- font-weight: bold;
|
|
|
- // height: 100%;
|
|
|
- }
|
|
|
+ .username {
|
|
|
+ font-size: $font-lg;
|
|
|
+ font-weight: bold;
|
|
|
+ // height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .config {
|
|
|
- flex-shrink: 0;
|
|
|
- line-height: 1;
|
|
|
- padding-top: 5rpx;
|
|
|
- margin: auto 0;
|
|
|
- padding: 16rpx 34rpx;
|
|
|
- border-radius: 26rpx;
|
|
|
- font-size: $font-sm;
|
|
|
- background-color: #E896B3;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .config {
|
|
|
+ flex-shrink: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding-top: 5rpx;
|
|
|
+ margin: auto 0;
|
|
|
+ padding: 16rpx 34rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ font-size: $font-sm;
|
|
|
+ background-color: #e896b3;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.top-swiper {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 580rpx;
|
|
|
|
|
|
- .top-swiper {
|
|
|
+ .topImg {
|
|
|
width: 750rpx;
|
|
|
height: 580rpx;
|
|
|
-
|
|
|
- .topImg {
|
|
|
- width: 750rpx;
|
|
|
- height: 580rpx;
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.content-swiper {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 238rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
|
|
|
- .content-swiper {
|
|
|
- background-color: #FFFFFF;
|
|
|
- margin: 20rpx 30rpx;
|
|
|
+ .contentImg {
|
|
|
width: 690rpx;
|
|
|
height: 238rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .contentImg {
|
|
|
- width: 690rpx;
|
|
|
- height: 238rpx;
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .cate-section {
|
|
|
- justify-content: flex-start;
|
|
|
- background-color: #fff;
|
|
|
- padding: 30rpx 10rpx;
|
|
|
- padding-bottom: 10rpx;
|
|
|
- margin: 20rpx 30rpx 0rpx 30rpx;
|
|
|
- flex-wrap: wrap;
|
|
|
- border-radius: 15rpx;
|
|
|
+.cate-section {
|
|
|
+ justify-content: flex-start;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx 10rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ margin: 20rpx 30rpx 0rpx 30rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-radius: 15rpx;
|
|
|
|
|
|
- .cate-item {
|
|
|
- flex-grow: 0;
|
|
|
- width: 25%;
|
|
|
- flex-direction: column;
|
|
|
- text-align: center;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom: 20rpx;
|
|
|
+ .cate-item {
|
|
|
+ flex-grow: 0;
|
|
|
+ width: 25%;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
|
|
|
- .img-wrapper {
|
|
|
+ .img-wrapper {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ image {
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .item-title {
|
|
|
- margin-top: 15rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #6B4216;
|
|
|
- }
|
|
|
+ .item-title {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #6b4216;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .activty {
|
|
|
- padding-top: 30rpx;
|
|
|
+.activty {
|
|
|
+ padding-top: 30rpx;
|
|
|
|
|
|
- .action-title {
|
|
|
- color: #EE2F72;
|
|
|
- font-weight: bold;
|
|
|
- justify-content: center;
|
|
|
+ .action-title {
|
|
|
+ color: #ee2f72;
|
|
|
+ font-weight: bold;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- .action-title-icon {
|
|
|
- width: 20rpx;
|
|
|
- height: 12rpx;
|
|
|
- }
|
|
|
+ .action-title-icon {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 12rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .action-title-tip {
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .action-title-tip {
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .productList {
|
|
|
- margin: 0 30rpx 20rpx 30rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #FFFFFF;
|
|
|
- position: relative;
|
|
|
- line-height: 1;
|
|
|
- .tipLeft{
|
|
|
- background-color:rgba(255, 51, 66, 1) ;
|
|
|
- border-radius: 100rpx;
|
|
|
- border-bottom-left-radius: 0rpx;
|
|
|
- padding: 15rpx 25rpx;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
- .productImg {
|
|
|
- height: 330rpx;
|
|
|
- width: 690rpx;
|
|
|
- }
|
|
|
- .product-name{
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: $font-color-dark;
|
|
|
+.productList {
|
|
|
+ margin: 0 30rpx 20rpx 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ line-height: 1;
|
|
|
+ .tipLeft {
|
|
|
+ background-color: rgba(255, 51, 66, 1);
|
|
|
+ border-radius: 100rpx;
|
|
|
+ border-bottom-left-radius: 0rpx;
|
|
|
+ padding: 15rpx 25rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ .productImg {
|
|
|
+ height: 330rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ }
|
|
|
+ .product-name {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .mask,
|
|
|
+ .sales {
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ align-items: flex-end;
|
|
|
+ line-height: 0;
|
|
|
+ .payMoney {
|
|
|
+ color: #ff4c4c;
|
|
|
}
|
|
|
- .mask,.sales{
|
|
|
- font-size: $font-sm;
|
|
|
+ .oldMoney {
|
|
|
+ text-decoration: line-through;
|
|
|
color: $font-color-light;
|
|
|
- }
|
|
|
- .money{
|
|
|
- align-items: flex-end;
|
|
|
- line-height: 0;
|
|
|
- .payMoney{
|
|
|
- color: #FF4C4C;
|
|
|
- }
|
|
|
- .oldMoney{
|
|
|
- text-decoration:line-through;
|
|
|
- color: $font-color-light;
|
|
|
- font-size: $font-base - 2rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .buttomPlay{
|
|
|
font-size: $font-base - 2rpx;
|
|
|
- background-color:#EE2F72 ;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .buttomPlay {
|
|
|
+ font-size: $font-base - 2rpx;
|
|
|
+ background-color: #ee2f72;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|