|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
- <view class="seckill-section m-t" v-if="show">
|
|
|
|
- <view class="s-header">
|
|
|
|
|
|
+<!-- <view class="seckill-section m-t" v-if="show">
|
|
|
|
+ <view class="s-header">
|
|
<view class="f-left-icon"></view>
|
|
<view class="f-left-icon"></view>
|
|
<view class="tit-box"><text class="tit">限时秒杀</text></view>
|
|
<view class="tit-box"><text class="tit">限时秒杀</text></view>
|
|
<view class="tip-box">
|
|
<view class="tip-box">
|
|
@@ -11,236 +11,355 @@
|
|
</view>
|
|
</view>
|
|
<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
|
|
<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
|
|
</view>
|
|
</view>
|
|
- <scroll-view class="floor-list" scroll-x>
|
|
|
|
- <view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
|
|
|
|
- <view v-for="(item, index) in list" :key="index" class="floor-item">
|
|
|
|
|
|
+ <scroll-view class="floor-list" scroll-x>
|
|
|
|
+ <view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
|
|
|
|
+ <view v-for="(item, index) in list" :key="index" class="floor-item">
|
|
<image class="list-image" :src="item.image" mode="aspectFill"></image>
|
|
<image class="list-image" :src="item.image" mode="aspectFill"></image>
|
|
<text class="title clamp">{{ item.title }}</text>
|
|
<text class="title clamp">{{ item.title }}</text>
|
|
<text class="price">¥{{ item.price }}</text>
|
|
<text class="price">¥{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
- <view v-if="list.length == 0" class="floor-item ">
|
|
|
|
- <image class="list-image" mode="aspectFill"></image>
|
|
|
|
- <text class="title clamp"></text>
|
|
|
|
- <text class="price"></text>
|
|
|
|
- </view>
|
|
|
|
- <view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
|
|
|
|
- </view>
|
|
|
|
- </scroll-view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view v-if="list.length == 0" class="floor-item ">
|
|
|
|
+ <image class="list-image" mode="aspectFill"></image>
|
|
|
|
+ <text class="title clamp"></text>
|
|
|
|
+ <text class="price"></text>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="list.length == 0" class="noGoodsBg">
|
|
|
|
+ <view>敬请期待</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view> -->
|
|
|
|
+ <view class="sckill-wrapper">
|
|
|
|
+ <scroll-view scroll-x="true" class="sckill">
|
|
|
|
+ <view class="item-wrapper" @click="navTo('/pages/product/seckill')">
|
|
|
|
+ <view class="goods-box" v-for="(item, index) in list" :key="index" >
|
|
|
|
+ <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
|
+ <view class="good-title">{{ item.title }}</view>
|
|
|
|
+ <view class="price">
|
|
|
|
+ <view class="now-price">¥{{ item.price }}</view>
|
|
|
|
+ <view class="old-price">¥{{ item.ot_price }}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="list.length == 0" class="noGoodsBg">
|
|
|
|
+ <view>敬请期待</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
|
-import { getSeckillList, getSeckillClass } from '@/api/product.js';
|
|
|
|
-import { timeComputed } from '@/utils/rocessor.js';
|
|
|
|
-export default {
|
|
|
|
- components: {
|
|
|
|
- uniCountdown
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- list: [],
|
|
|
|
- page: 1,
|
|
|
|
- limit: 10,
|
|
|
|
- showTime: '', //显示的时间
|
|
|
|
- showTImeId: '', //显示时间id用于查询数据
|
|
|
|
- stopTimeH: 0,
|
|
|
|
- stopTimeM: 0,
|
|
|
|
- stopTimeS: 0,
|
|
|
|
- // 判断是否所有活动已经结束
|
|
|
|
- stop: false, //活动是否已经结束
|
|
|
|
- show: false, //是否显示活动
|
|
|
|
- status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- created: function(e) {
|
|
|
|
- // 载入分类
|
|
|
|
- this.getClass();
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- navTo(url) {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- getList() {
|
|
|
|
- getSeckillList(
|
|
|
|
- {
|
|
|
|
- page: this.page,
|
|
|
|
- limit: this.limit
|
|
|
|
- },
|
|
|
|
- this.showTImeId
|
|
|
|
- )
|
|
|
|
- .then(e => {
|
|
|
|
- this.list = e.data;
|
|
|
|
- })
|
|
|
|
- .catch(e => {
|
|
|
|
- console.log(e);
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- getClass() {
|
|
|
|
- let obj = this;
|
|
|
|
- getSeckillClass({})
|
|
|
|
- .then(({ data }) => {
|
|
|
|
- let arr = data.seckillTime;
|
|
|
|
- // 用于判断是否有数据
|
|
|
|
- let showDate = false;
|
|
|
|
- for (var i = 0; i < arr.length; i++) {
|
|
|
|
- let ar = arr[i];
|
|
|
|
- if (ar.status === 1 || ar.status === 2) {
|
|
|
|
- obj.status = ar.status;
|
|
|
|
- // 保存要显示的场次时间
|
|
|
|
- obj.showTime = ar.time;
|
|
|
|
- // 保存要显示活动商品的id
|
|
|
|
- obj.showTImeId = ar.id;
|
|
|
|
- // 保存当前状态值
|
|
|
|
- // 计算倒计时时间
|
|
|
|
- if (ar.status === 1) {
|
|
|
|
- obj.timeComputed(ar.stop * 1000);
|
|
|
|
- } else {
|
|
|
|
- // 获取需要开始
|
|
|
|
- let arTime = ar.time.split(':');
|
|
|
|
- let h = arTime[0];
|
|
|
|
- let m = arTime[1];
|
|
|
|
- let time = new Date();
|
|
|
|
- // 设置时间
|
|
|
|
- time.setHours(h, m, 0);
|
|
|
|
- obj.timeComputed(time.getTime());
|
|
|
|
- }
|
|
|
|
- // 获取商品列表
|
|
|
|
- obj.getList();
|
|
|
|
- // 保存当前有活动在举行
|
|
|
|
- showDate = true;
|
|
|
|
- // 任务查询结束跳出循环
|
|
|
|
- break;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // 判断是否有活动
|
|
|
|
- if (arr.length > 0) {
|
|
|
|
- obj.show = true;
|
|
|
|
- }
|
|
|
|
- // 判断今天活动是否已经全部结束
|
|
|
|
- if (!showDate) {
|
|
|
|
- // 保存活动结束最后一个小时的活动商品
|
|
|
|
- obj.showTImeId = arr[arr.length - 1].id;
|
|
|
|
- // 活动已经结束
|
|
|
|
- obj.status = 0;
|
|
|
|
- // 获取结束时的商品
|
|
|
|
- obj.getList();
|
|
|
|
- console.log(obj.status);
|
|
|
|
- }
|
|
|
|
- // 如果所有场次均已经结束
|
|
|
|
- })
|
|
|
|
- .catch(e => {
|
|
|
|
- uni.showModal({
|
|
|
|
- title: JSON.stringify(e)
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 计算倒计时时间
|
|
|
|
- timeComputed(da) {
|
|
|
|
- let obj = this;
|
|
|
|
- let stopTime = timeComputed(da)
|
|
|
|
- obj.stopTimeH =stopTime.hours;
|
|
|
|
- obj.stopTimeM = stopTime.minutes;
|
|
|
|
- obj.stopTimeS =stopTime.seconds;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
|
|
+ import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
|
+ import {
|
|
|
|
+ getSeckillList,
|
|
|
|
+ getSeckillClass
|
|
|
|
+ } from '@/api/product.js';
|
|
|
|
+ import {
|
|
|
|
+ timeComputed
|
|
|
|
+ } from '@/utils/rocessor.js';
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ uniCountdown
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ list: [],
|
|
|
|
+ page: 1,
|
|
|
|
+ limit: 10,
|
|
|
|
+ showTime: '', //显示的时间
|
|
|
|
+ showTImeId: '', //显示时间id用于查询数据
|
|
|
|
+ stopTimeH: 0,
|
|
|
|
+ stopTimeM: 0,
|
|
|
|
+ stopTimeS: 0,
|
|
|
|
+ // 判断是否所有活动已经结束
|
|
|
|
+ stop: false, //活动是否已经结束
|
|
|
|
+ show: false, //是否显示活动
|
|
|
|
+ status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created: function(e) {
|
|
|
|
+ // 载入分类
|
|
|
|
+ this.getClass();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ navTo(url) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getList() {
|
|
|
|
+ getSeckillList({
|
|
|
|
+ page: this.page,
|
|
|
|
+ limit: this.limit
|
|
|
|
+ },
|
|
|
|
+ this.showTImeId
|
|
|
|
+ )
|
|
|
|
+ .then(e => {
|
|
|
|
+ this.list = e.data;
|
|
|
|
+ console.log(this.list)
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ console.log(e);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getClass() {
|
|
|
|
+ let obj = this;
|
|
|
|
+ getSeckillClass({})
|
|
|
|
+ .then(({
|
|
|
|
+ data
|
|
|
|
+ }) => {
|
|
|
|
+ let arr = data.seckillTime;
|
|
|
|
+ // 用于判断是否有数据
|
|
|
|
+ let showDate = false;
|
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
|
+ let ar = arr[i];
|
|
|
|
+ if (ar.status === 1 || ar.status === 2) {
|
|
|
|
+ obj.status = ar.status;
|
|
|
|
+ // 保存要显示的场次时间
|
|
|
|
+ obj.showTime = ar.time;
|
|
|
|
+ // 保存要显示活动商品的id
|
|
|
|
+ obj.showTImeId = ar.id;
|
|
|
|
+ // 保存当前状态值
|
|
|
|
+ // 计算倒计时时间
|
|
|
|
+ if (ar.status === 1) {
|
|
|
|
+ obj.timeComputed(ar.stop * 1000);
|
|
|
|
+ } else {
|
|
|
|
+ // 获取需要开始
|
|
|
|
+ let arTime = ar.time.split(':');
|
|
|
|
+ let h = arTime[0];
|
|
|
|
+ let m = arTime[1];
|
|
|
|
+ let time = new Date();
|
|
|
|
+ // 设置时间
|
|
|
|
+ time.setHours(h, m, 0);
|
|
|
|
+ obj.timeComputed(time.getTime());
|
|
|
|
+ }
|
|
|
|
+ // 获取商品列表
|
|
|
|
+ obj.getList();
|
|
|
|
+ // 保存当前有活动在举行
|
|
|
|
+ showDate = true;
|
|
|
|
+ // 任务查询结束跳出循环
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 判断是否有活动
|
|
|
|
+ if (arr.length > 0) {
|
|
|
|
+ obj.show = true;
|
|
|
|
+ }
|
|
|
|
+ // 判断今天活动是否已经全部结束
|
|
|
|
+ if (!showDate) {
|
|
|
|
+ // 保存活动结束最后一个小时的活动商品
|
|
|
|
+ obj.showTImeId = arr[arr.length - 1].id;
|
|
|
|
+ // 活动已经结束
|
|
|
|
+ obj.status = 0;
|
|
|
|
+ // 获取结束时的商品
|
|
|
|
+ obj.getList();
|
|
|
|
+ console.log(obj.status);
|
|
|
|
+ }
|
|
|
|
+ // 如果所有场次均已经结束
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ uni.showModal({
|
|
|
|
+ title: JSON.stringify(e)
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 计算倒计时时间
|
|
|
|
+ timeComputed(da) {
|
|
|
|
+ let obj = this;
|
|
|
|
+ let stopTime = timeComputed(da)
|
|
|
|
+ obj.stopTimeH = stopTime.hours;
|
|
|
|
+ obj.stopTimeM = stopTime.minutes;
|
|
|
|
+ obj.stopTimeS = stopTime.seconds;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
-/* 秒杀专区 */
|
|
|
|
-.seckill-section {
|
|
|
|
- padding: 4rpx 30rpx 24rpx;
|
|
|
|
- .s-header {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- height: 92rpx;
|
|
|
|
- line-height: 1;
|
|
|
|
- .tit-box {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- }
|
|
|
|
- .tit {
|
|
|
|
- @extend %font-title;
|
|
|
|
- }
|
|
|
|
- .f-left-icon {
|
|
|
|
- @extend %f-left-icon;
|
|
|
|
- }
|
|
|
|
- .textNav {
|
|
|
|
- line-height: 1;
|
|
|
|
- padding: 15rpx 0;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- flex-grow: 1;
|
|
|
|
- min-width: 100rpx;
|
|
|
|
- }
|
|
|
|
- .tip-box {
|
|
|
|
- flex-grow: 1;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
- .tip {
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-light;
|
|
|
|
- padding-left: 10rpx;
|
|
|
|
- padding-right: 10rpx;
|
|
|
|
- }
|
|
|
|
- .timer {
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 40rpx;
|
|
|
|
- height: 36rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- margin-right: 14rpx;
|
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
|
- color: #fff;
|
|
|
|
- border-radius: 2px;
|
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
|
- }
|
|
|
|
- .iconenter {
|
|
|
|
- font-size: $font-sm;
|
|
|
|
- color: $font-color-light;
|
|
|
|
- flex: 1;
|
|
|
|
- text-align: right;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .floor-list {
|
|
|
|
- white-space: nowrap;
|
|
|
|
- background-color: white;
|
|
|
|
- padding: 20rpx;
|
|
|
|
- border-radius: 5rpx;
|
|
|
|
- box-shadow: $box-shadow;
|
|
|
|
- }
|
|
|
|
- .scoll-wrapper {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: flex-start;
|
|
|
|
- .noGoodsBg {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: 100%;
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- color: $font-color-light;
|
|
|
|
- }
|
|
|
|
- .floor-item {
|
|
|
|
- width: 150rpx;
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
|
- color: $font-color-dark;
|
|
|
|
- line-height: 1.8;
|
|
|
|
- .list-image {
|
|
|
|
- width: 150rpx;
|
|
|
|
- height: 150rpx;
|
|
|
|
- border-radius: 6rpx;
|
|
|
|
- }
|
|
|
|
- .price {
|
|
|
|
- color: $color-red;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+ /* 秒杀专区 */
|
|
|
|
+ .seckill-section {
|
|
|
|
+ padding: 4rpx 30rpx 24rpx;
|
|
|
|
+
|
|
|
|
+ .s-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 92rpx;
|
|
|
|
+ line-height: 1;
|
|
|
|
+
|
|
|
|
+ .tit-box {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tit {
|
|
|
|
+ @extend %font-title;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .f-left-icon {
|
|
|
|
+ @extend %f-left-icon;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .textNav {
|
|
|
|
+ line-height: 1;
|
|
|
|
+ padding: 15rpx 0;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ min-width: 100rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tip-box {
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tip {
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ padding-left: 10rpx;
|
|
|
|
+ padding-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .timer {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 40rpx;
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ margin-right: 14rpx;
|
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
|
+ color: #fff;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconenter {
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ flex: 1;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .floor-list {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ background-color: white;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ border-radius: 5rpx;
|
|
|
|
+ box-shadow: $box-shadow;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .scoll-wrapper {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+
|
|
|
|
+ .noGoodsBg {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .floor-item {
|
|
|
|
+ width: 150rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
|
+ color: $font-color-dark;
|
|
|
|
+ line-height: 1.8;
|
|
|
|
+
|
|
|
|
+ .list-image {
|
|
|
|
+ width: 150rpx;
|
|
|
|
+ height: 150rpx;
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .price {
|
|
|
|
+ color: $color-red;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .sckill-wrapper {
|
|
|
|
+ width: 701rpx;
|
|
|
|
+ height: 293rpx;
|
|
|
|
+ background-image: url(../../static/img/sckillbg.png);
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ margin: 34rpx auto 37rpx;
|
|
|
|
+ padding: 31rpx 21rpx;
|
|
|
|
+ .sckill {
|
|
|
|
+ width: 659rpx;
|
|
|
|
+ height: 231rpx;
|
|
|
|
+ .noGoodsBg {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ color: $font-color-light;
|
|
|
|
+ }
|
|
|
|
+ .item-wrapper {
|
|
|
|
+ display: flex;
|
|
|
|
+ .goods-box {
|
|
|
|
+ width: 192rpx;
|
|
|
|
+ height: 231rpx;
|
|
|
|
+ margin: 0 42rpx 0 0;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ .image-wrapper {
|
|
|
|
+ width: 192rpx;
|
|
|
|
+ height: 150rpx;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .good-title {
|
|
|
|
+ padding: 15rpx 0rpx 0rpx 6rpx;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #333333;
|
|
|
|
+ line-height: 26rpx;
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ .price {
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 39rpx;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .now-price {
|
|
|
|
+ // padding-top:19rpx ;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #901b21;
|
|
|
|
+ line-height: 16rpx;
|
|
|
|
+ // padding-left: 10rpx;
|
|
|
|
+ align-self: flex-end;
|
|
|
|
+ }
|
|
|
|
+ .old-price {
|
|
|
|
+ // padding-top:27rpx ;
|
|
|
|
+ align-self: flex-end;
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ text-decoration: line-through;
|
|
|
|
+ color: #9d9d9d;
|
|
|
|
+ line-height: 16rpx;
|
|
|
|
+ // padding-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|