|
| xqd
@@ -1,14 +1,11 @@
|
|
|
<template>
|
|
|
- <view class="app-exclusive-coupon-two" :style="{'background-color': `${noneColor ? '' : background}`}">
|
|
|
- <view class="app-bottom" v-if="coupon_list.length > 0">
|
|
|
- <scroll-view scroll-x class="app-scroll dir-left-nowrap">
|
|
|
- <view v-for="(item, index) in coupon_list"
|
|
|
- :key="index"
|
|
|
- class="app-item"
|
|
|
- :style="[couponBoxStyle(item,index)]"
|
|
|
- >
|
|
|
- <app-form-id @click="receive(index)">
|
|
|
- <view class="coupon-bg">
|
|
|
+ <view class="app-exclusive-coupon-two" :style="{'background-color': `${noneColor ? '' : background}`}">
|
|
|
+ <view class="app-bottom" v-if="coupon_list.length > 0">
|
|
|
+ <scroll-view scroll-x class="app-scroll dir-left-nowrap">
|
|
|
+ <view v-for="(item, index) in coupon_list" :key="index" class="app-item"
|
|
|
+ :style="[couponBoxStyle(item,index)]">
|
|
|
+ <app-form-id @click="receive(index)">
|
|
|
+ <!-- <view class="coupon-bg">
|
|
|
<img style="height: 100%;width: 100%" :src="couponBgImg" alt="">
|
|
|
</view>
|
|
|
<view v-if="coupon_list.length === 1" class="dir-left-nowrap" style="height: 100%"
|
|
| xqd
@@ -42,339 +39,424 @@
|
|
|
{{item.is_receive == 0 ? receiveTip : item.is_receive > 0 ? '已领取' : ''}}
|
|
|
</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </app-form-id>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <view class="coupon main-left">
|
|
|
+ <view class="item main-left">
|
|
|
+ <view class="Wb">
|
|
|
+ <view>
|
|
|
+ <view class="title_2">{{item.name}} <text
|
|
|
+ class="hjx-tc-B19D60 hjx-ts-21 hxj-ml-10">立即领取</text></view>
|
|
|
+ <view class="desc_2">新用户礼遇</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="price"><text>￥</text>{{item.sub_price}}</view>
|
|
|
+ <view class="yxq">有效期至2021-12-31</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </app-form-id>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'app-exclusive-coupon-two',
|
|
|
- props: {
|
|
|
- receiveBg: {
|
|
|
- type: String,
|
|
|
- default: function() {
|
|
|
- return '';
|
|
|
- }
|
|
|
- },
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: function() {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- textColor: {
|
|
|
- type: String,
|
|
|
- default: function() {
|
|
|
- return "#ffffff";
|
|
|
- }
|
|
|
- },
|
|
|
- unclaimedBg: {
|
|
|
- type: String,
|
|
|
- default: function() {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- index: {
|
|
|
- type: Number,
|
|
|
- },
|
|
|
- sign: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- noneColor: {
|
|
|
- type: Boolean,
|
|
|
- default() {
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- background: String,
|
|
|
- page_id: Number,
|
|
|
- template_id: Number,
|
|
|
- is_required: Boolean,
|
|
|
- coupon_req: Boolean,
|
|
|
- couponBg: {
|
|
|
- type: String,
|
|
|
- default: '#D9BC8B',
|
|
|
- },
|
|
|
- //diy手动添加优惠券标识
|
|
|
- addType: String,
|
|
|
- couponBgType: {
|
|
|
- type: String,
|
|
|
- default() {
|
|
|
- return '#pure';
|
|
|
- }
|
|
|
- },
|
|
|
- dIndex: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [0, 0];
|
|
|
- }
|
|
|
- },
|
|
|
- mIndex: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return [0, 0];
|
|
|
- }
|
|
|
- },
|
|
|
- dType: String,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- coupon_list: []
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- receiveTip() {
|
|
|
- let receiveTip = '立即领取';
|
|
|
- if (this.sign === 'integral-mall') {
|
|
|
- receiveTip = '立即兑换';
|
|
|
- }
|
|
|
- return receiveTip;
|
|
|
- },
|
|
|
- couponBgImg() {
|
|
|
- //wechat ../../../
|
|
|
- switch (this.coupon_list.length) {
|
|
|
- case 1:
|
|
|
- return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_1.png';
|
|
|
- case 2:
|
|
|
- return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_2.png';
|
|
|
- case 3:
|
|
|
- return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_3.png';
|
|
|
- default:
|
|
|
- return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_4.png';
|
|
|
- }
|
|
|
- },
|
|
|
+ export default {
|
|
|
+ name: 'app-exclusive-coupon-two',
|
|
|
+ props: {
|
|
|
+ receiveBg: {
|
|
|
+ type: String,
|
|
|
+ default: function() {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textColor: {
|
|
|
+ type: String,
|
|
|
+ default: function() {
|
|
|
+ return "#ffffff";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ unclaimedBg: {
|
|
|
+ type: String,
|
|
|
+ default: function() {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ index: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ sign: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ noneColor: {
|
|
|
+ type: Boolean,
|
|
|
+ default () {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ background: String,
|
|
|
+ page_id: Number,
|
|
|
+ template_id: Number,
|
|
|
+ is_required: Boolean,
|
|
|
+ coupon_req: Boolean,
|
|
|
+ couponBg: {
|
|
|
+ type: String,
|
|
|
+ default: '#D9BC8B',
|
|
|
+ },
|
|
|
+ //diy手动添加优惠券标识
|
|
|
+ addType: String,
|
|
|
+ couponBgType: {
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return '#pure';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dIndex: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [0, 0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mIndex: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return [0, 0];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dType: String,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ coupon_list: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ receiveTip() {
|
|
|
+ let receiveTip = '立即领取';
|
|
|
+ if (this.sign === 'integral-mall') {
|
|
|
+ receiveTip = '立即兑换';
|
|
|
+ }
|
|
|
+ return receiveTip;
|
|
|
+ },
|
|
|
+ couponBgImg() {
|
|
|
+ //wechat ../../../
|
|
|
+ switch (this.coupon_list.length) {
|
|
|
+ case 1:
|
|
|
+ return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_1.png';
|
|
|
+ case 2:
|
|
|
+ return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_2.png';
|
|
|
+ case 3:
|
|
|
+ return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_3.png';
|
|
|
+ default:
|
|
|
+ return 'https://shop.9026.com/web/statics/img/mall/diy/bg_coupon_index_4.png';
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- couponBoxStyle() {
|
|
|
- return (data, index) => {
|
|
|
- let couponList = this.coupon_list;
|
|
|
- let width, background;
|
|
|
+ couponBoxStyle() {
|
|
|
+ return (data, index) => {
|
|
|
+ let couponList = this.coupon_list;
|
|
|
+ let width, background;
|
|
|
|
|
|
- let screenWidth = uni.getSystemInfoSync().windowWidth;
|
|
|
- let p = 750 / screenWidth;
|
|
|
- switch (couponList.length) {
|
|
|
- case 1:
|
|
|
- width = `${parseInt(702 / p)}px`;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- width = `${parseInt(341 / p)}px`;
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- width = `${parseInt(220 / p)}px`;
|
|
|
- break;
|
|
|
- default:
|
|
|
- width = `${parseInt(274 / p)}px`;
|
|
|
- break;
|
|
|
- }
|
|
|
- let extra = {'margin-left': `${20 / p}px`};
|
|
|
- if (index === 0) extra = Object.assign(extra, {'margin-left': `${24 / p}px`});
|
|
|
- if (index === this.coupon_list.length - 1) extra = Object.assign(extra, {'margin-right': `${24 / p}px`});
|
|
|
- if (data.is_receive > 0) {
|
|
|
- background = '#B4B4B4';
|
|
|
- } else if (this.couponBgType === 'gradient') {
|
|
|
- background = 'linear-gradient(to left, ' + this.couponBg + ',' + this.$utils.colorRgba(this.couponBg, 0.5) + ')';
|
|
|
- } else {
|
|
|
- background = this.couponBg;
|
|
|
- }
|
|
|
- return Object.assign(extra, {
|
|
|
- background,
|
|
|
- 'width': width,
|
|
|
- 'min-width': couponList.length > 3 ? width : 'auto'
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- flushCache(coupon_list) {
|
|
|
- if (this.page_id == 0) {
|
|
|
- let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
- let dIndex = this.dIndex;
|
|
|
- let mIndex = this.mIndex;
|
|
|
+ let screenWidth = uni.getSystemInfoSync().windowWidth;
|
|
|
+ let p = 750 / screenWidth;
|
|
|
+ switch (couponList.length) {
|
|
|
+ case 1:
|
|
|
+ width = `${parseInt(702 / p)}px`;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ width = `${parseInt(341 / p)}px`;
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ width = `${parseInt(220 / p)}px`;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ width = `${parseInt(274 / p)}px`;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ let extra = {
|
|
|
+ 'margin-left': `${20 / p}px`
|
|
|
+ };
|
|
|
+ if (index === 0) extra = Object.assign(extra, {
|
|
|
+ 'margin-left': `${24 / p}px`
|
|
|
+ });
|
|
|
+ if (index === this.coupon_list.length - 1) extra = Object.assign(extra, {
|
|
|
+ 'margin-right': `${24 / p}px`
|
|
|
+ });
|
|
|
+ if (data.is_receive > 0) {
|
|
|
+ background = '#B4B4B4';
|
|
|
+ } else if (this.couponBgType === 'gradient') {
|
|
|
+ background = 'linear-gradient(to left, ' + this.couponBg + ',' + this.$utils.colorRgba(this
|
|
|
+ .couponBg, 0.5) + ')';
|
|
|
+ } else {
|
|
|
+ // background = this.couponBg;
|
|
|
+ }
|
|
|
+ return Object.assign(extra, {
|
|
|
+ background,
|
|
|
+ 'width': width,
|
|
|
+ 'min-width': couponList.length > 3 ? width : 'auto'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ flushCache(coupon_list) {
|
|
|
+ if (this.page_id == 0) {
|
|
|
+ let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
+ let dIndex = this.dIndex;
|
|
|
+ let mIndex = this.mIndex;
|
|
|
|
|
|
- if (this.dType === 'module') {
|
|
|
- storage.home_pages.navs[mIndex[0]].template.data[mIndex[1]].data.list[dIndex[0]].data[dIndex[1]].data.coupon_list = coupon_list;
|
|
|
- } else {
|
|
|
- storage.home_pages.navs[dIndex[0]].template.data[dIndex[1]].data.coupon_list = coupon_list;
|
|
|
- }
|
|
|
- this.$storage.setStorageSync('INDEX_MALL', storage);
|
|
|
- }
|
|
|
- },
|
|
|
- receive(index) {
|
|
|
- let list = this.coupon_list;
|
|
|
- if (this.sign == 'integral-mall') {
|
|
|
- this.$jump({
|
|
|
- url: list[index].page_url,
|
|
|
- open_type: 'navigate'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- if (list[index].is_receive == 1) {
|
|
|
- uni.showToast({
|
|
|
- mask: true,
|
|
|
- title: '已领取',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return true;
|
|
|
- }
|
|
|
- uni.showLoading({
|
|
|
- mask: true,
|
|
|
- title: '领取中'
|
|
|
- });
|
|
|
+ if (this.dType === 'module') {
|
|
|
+ storage.home_pages.navs[mIndex[0]].template.data[mIndex[1]].data.list[dIndex[0]].data[dIndex[1]]
|
|
|
+ .data.coupon_list = coupon_list;
|
|
|
+ } else {
|
|
|
+ storage.home_pages.navs[dIndex[0]].template.data[dIndex[1]].data.coupon_list = coupon_list;
|
|
|
+ }
|
|
|
+ this.$storage.setStorageSync('INDEX_MALL', storage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ receive(index) {
|
|
|
+ let list = this.coupon_list;
|
|
|
+ if (this.sign == 'integral-mall') {
|
|
|
+ this.$jump({
|
|
|
+ url: list[index].page_url,
|
|
|
+ open_type: 'navigate'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (list[index].is_receive == 1) {
|
|
|
+ uni.showToast({
|
|
|
+ mask: true,
|
|
|
+ title: '已领取',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '领取中'
|
|
|
+ });
|
|
|
|
|
|
- this.$request({
|
|
|
- url: this.$api.coupon.receive,
|
|
|
- data: {
|
|
|
- coupon_id: list[index].id
|
|
|
- }
|
|
|
- }).then(e => {
|
|
|
- uni.hideLoading();
|
|
|
- if (e.code === 0) {
|
|
|
- if (e.data.rest == 0) {
|
|
|
- this.coupon_list[index].is_receive = '1';
|
|
|
- }
|
|
|
- let tempList = this.coupon_list;
|
|
|
- this.flushCache(tempList);
|
|
|
- this.$store.dispatch('page/actionSetCoupon', {
|
|
|
- list: [Object.assign(tempList[index], e.data)],
|
|
|
- type: 'receive'
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({title: e.msg, icon: 'none'});
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- });
|
|
|
- },
|
|
|
+ this.$request({
|
|
|
+ url: this.$api.coupon.receive,
|
|
|
+ data: {
|
|
|
+ coupon_id: list[index].id
|
|
|
+ }
|
|
|
+ }).then(e => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (e.code === 0) {
|
|
|
+ if (e.data.rest == 0) {
|
|
|
+ this.coupon_list[index].is_receive = '1';
|
|
|
+ }
|
|
|
+ let tempList = this.coupon_list;
|
|
|
+ this.flushCache(tempList);
|
|
|
+ this.$store.dispatch('page/actionSetCoupon', {
|
|
|
+ list: [Object.assign(tempList[index], e.data)],
|
|
|
+ type: 'receive'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: e.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- loadData() {
|
|
|
- this.$request({
|
|
|
- url: this.$api.index.extra,
|
|
|
- data: {
|
|
|
- type: 'mall',
|
|
|
- key: 'coupon',
|
|
|
- page_id: this.page_id,
|
|
|
- index: this.index
|
|
|
- }
|
|
|
- }).then(e => {
|
|
|
- this.coupon_list = e.data;
|
|
|
- if (this.page_id === 0) {
|
|
|
- let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
- storage.home_pages[this.index].list = this.coupon_list;
|
|
|
- this.$storage.setStorageSync('INDEX_MALL', storage);
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (!this.coupon_req) {
|
|
|
- if (this.is_required) {
|
|
|
- this.loadData();
|
|
|
- } else {
|
|
|
- let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
- this.coupon_list = storage.home_pages[this.index].list;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.coupon_list = this.list;
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+ loadData() {
|
|
|
+ this.$request({
|
|
|
+ url: this.$api.index.extra,
|
|
|
+ data: {
|
|
|
+ type: 'mall',
|
|
|
+ key: 'coupon',
|
|
|
+ page_id: this.page_id,
|
|
|
+ index: this.index
|
|
|
+ }
|
|
|
+ }).then(e => {
|
|
|
+ this.coupon_list = e.data;
|
|
|
+ if (this.page_id === 0) {
|
|
|
+ let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
+ storage.home_pages[this.index].list = this.coupon_list;
|
|
|
+ this.$storage.setStorageSync('INDEX_MALL', storage);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (!this.coupon_req) {
|
|
|
+ if (this.is_required) {
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ let storage = this.$storage.getStorageSync('INDEX_MALL');
|
|
|
+ this.coupon_list = storage.home_pages[this.index].list;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.coupon_list = this.list;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .app-exclusive-coupon-two {
|
|
|
- width: #{750rpx};
|
|
|
+ .app-exclusive-coupon-two {
|
|
|
+ width: #{750rpx};
|
|
|
+
|
|
|
+ .coupon-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-bottom {
|
|
|
+ padding: #{16rpx} 0;
|
|
|
+ // height: #{130+16+16rpx};
|
|
|
+ width: #{750rpx};
|
|
|
+
|
|
|
+ .app-scroll {
|
|
|
+ // height: #{130+16+16rpx};
|
|
|
+ // height: 100%;
|
|
|
+ del-width: #{750-24rpx};
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-item {
|
|
|
+ width: #{256rpx};
|
|
|
+ position: relative;
|
|
|
+ // height: #{130rpx};
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: #{20rpx};
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .app-number.app-symbol:before {
|
|
|
+ content: '￥';
|
|
|
+ font-size: #{20rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ app-number {
|
|
|
+ font-size: #{40rpx};
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount:after {
|
|
|
+ content: '折';
|
|
|
+ font-size: 75%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-text-left {
|
|
|
+ width: 75%;
|
|
|
+ height: #{130rpx};
|
|
|
|
|
|
- .coupon-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .app-text-top {
|
|
|
+ height: 50%;
|
|
|
+ padding-top: #{1rpx};
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .app-bottom {
|
|
|
- padding: #{16rpx} 0;
|
|
|
- height: #{130+16+16rpx};
|
|
|
- width: #{750rpx};
|
|
|
+ .app-symbol {
|
|
|
+ display: inline-block;
|
|
|
+ height: #{78rpx};
|
|
|
+ font-size: #{20rpx};
|
|
|
+ }
|
|
|
|
|
|
- .app-scroll {
|
|
|
- height: #{130+16+16rpx};
|
|
|
- height: 100%;
|
|
|
- del-width: #{750-24rpx};
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ .app-number {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .app-item {
|
|
|
- width: #{256rpx};
|
|
|
- position: relative;
|
|
|
- height: #{130rpx};
|
|
|
- display: inline-block;
|
|
|
- margin-left: #{20rpx};
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .app-text-bottom {
|
|
|
+ height: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: #{20rpx};
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .app-number.app-symbol:before {
|
|
|
- content: '￥';
|
|
|
- font-size: #{20rpx};
|
|
|
- }
|
|
|
+ .app-text-right {
|
|
|
+ width: 25%;
|
|
|
+ height: #{130rpx};
|
|
|
|
|
|
- app-number {
|
|
|
- font-size: #{40rpx};
|
|
|
- }
|
|
|
+ text {
|
|
|
+ height: #{130rpx};
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: #{50rpx};
|
|
|
+ font-size: #{24rpx};
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ letter-spacing: #{5rpx};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .discount:after {
|
|
|
- content: '折';
|
|
|
- font-size: 75%;
|
|
|
- }
|
|
|
+ .coupon {
|
|
|
|
|
|
- .app-text-left {
|
|
|
- width: 75%;
|
|
|
- height: #{130rpx};
|
|
|
+ // padding: 0 45rpx 0 40rpx;
|
|
|
+ .item {
|
|
|
+ width: 320rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ position: relative;
|
|
|
+ background-image: url(https://t17.9026.com/web/statics/image/index/coupon_masking.png);
|
|
|
+ background-size: 316rpx 200rpx;
|
|
|
|
|
|
- .app-text-top {
|
|
|
- height: 50%;
|
|
|
- padding-top: #{1rpx};
|
|
|
- overflow: hidden;
|
|
|
- text-align: center;
|
|
|
+ .Wb {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 17rpx 0 17rpx 37rpx;
|
|
|
|
|
|
- .app-symbol {
|
|
|
- display: inline-block;
|
|
|
- height: #{78rpx};
|
|
|
- font-size: #{20rpx};
|
|
|
- }
|
|
|
+ .price {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #b19d60;
|
|
|
|
|
|
- .app-number {
|
|
|
- display: inline-block;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .app-text-bottom {
|
|
|
- height: 50%;
|
|
|
- text-align: center;
|
|
|
- font-size: #{20rpx};
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
+ .yxq {
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c1c2c1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .app-text-right {
|
|
|
- width: 25%;
|
|
|
- height: #{130rpx};
|
|
|
+ .title_2 {
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0e0e0e;
|
|
|
+ }
|
|
|
|
|
|
- text {
|
|
|
- height: #{130rpx};
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- line-height: #{50rpx};
|
|
|
- font-size: #{24rpx};
|
|
|
- writing-mode: vertical-rl;
|
|
|
- letter-spacing: #{5rpx};
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .desc_2 {
|
|
|
+ color: #5a5a5a;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #a7a7a7;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
